coupon 优化
This commit is contained in:
1 parent
020cd5ad40
commit
50fbcfe27b
1 file changed
+7
-60
@@ -8,8 +8,7 @@
|
|||||||
<view class="container position-relative w-100 h-100 overflow-hidden">
|
<view class="container position-relative w-100 h-100 overflow-hidden">
|
||||||
<view class="exchange-box">
|
<view class="exchange-box">
|
||||||
<view class="input-box">
|
<view class="input-box">
|
||||||
<input type="text" v-model="exchange_code" placeholder="请输入兑换码" placeholder-class="text-color-assist font-size-base" />
|
<uv-search placeholder="请输入兑换码" v-model="exchange_code" @click="exchange"></uv-search>
|
||||||
<button type="primary" @click="exchange">兑换</button>
|
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
<view class="tabbar">
|
<view class="tabbar">
|
||||||
@@ -58,7 +57,7 @@
|
|||||||
<uv-empty v-if="notCoupons.length == 0" mode="list"></uv-empty>
|
<uv-empty v-if="notCoupons.length == 0" mode="list"></uv-empty>
|
||||||
<view class="coupon" v-for="(item, index) in notCoupons" :key="index" @tap="openDetailModal(item,index)">
|
<view class="coupon" v-for="(item, index) in notCoupons" :key="index" @tap="openDetailModal(item,index)">
|
||||||
<view class="taobao">
|
<view class="taobao">
|
||||||
<view class="ticket">
|
<view class="">
|
||||||
<view class="left">
|
<view class="left">
|
||||||
<image
|
<image
|
||||||
class="picture"
|
class="picture"
|
||||||
@@ -92,7 +91,7 @@
|
|||||||
</view>
|
</view>
|
||||||
</scroll-view>
|
</scroll-view>
|
||||||
</view>
|
</view>
|
||||||
<modal custom :show="detailModalVisible" @cancel="closeDetailModal" width="90%">
|
<modal custom :show="detailModalVisible" @cancel="closeDetailModal" width="90%" title="优惠券详情">
|
||||||
<view class="modal-content">
|
<view class="modal-content">
|
||||||
<view class="d-flex font-size-extra-lg text-color-base just-content-center mb-20">{{ coupon.title }}</view>
|
<view class="d-flex font-size-extra-lg text-color-base just-content-center mb-20">{{ coupon.title }}</view>
|
||||||
<view class="d-flex font-size-sm text-color-base mb-20">
|
<view class="d-flex font-size-sm text-color-base mb-20">
|
||||||
@@ -113,12 +112,6 @@
|
|||||||
<view class="d-flex font-size-sm text-color-base mb-20">
|
<view class="d-flex font-size-sm text-color-base mb-20">
|
||||||
适用店铺:{{coupon.shopName}}
|
适用店铺:{{coupon.shopName}}
|
||||||
</view>
|
</view>
|
||||||
<view class="d-flex align-items-center just-content-center" v-if="activeTabIndex == 0">
|
|
||||||
<button type="primary" @tap="useCoupon" class="use-coupon-btn">立即使用</button>
|
|
||||||
</view>
|
|
||||||
<view class="d-flex align-items-center just-content-center" v-if="activeTabIndex == 1">
|
|
||||||
<button type="primary" @tap="receive(coupon, couponIndex)" class="use-coupon-btn">立即领取</button>
|
|
||||||
</view>
|
|
||||||
</view>
|
</view>
|
||||||
</modal>
|
</modal>
|
||||||
|
|
||||||
@@ -229,9 +222,9 @@ const getCoupons = async(type) => {
|
|||||||
console.log('tabs.value:',tabs.value[type].title)
|
console.log('tabs.value:',tabs.value[type].title)
|
||||||
//tabs.value[type].page++;
|
//tabs.value[type].page++;
|
||||||
}
|
}
|
||||||
const openDetailModal = (coupon,index) => {
|
const openDetailModal = (couponData,index) => {
|
||||||
couponIndex.value = index;
|
couponIndex.value = index;
|
||||||
coupon.value = coupon
|
coupon.value = couponData
|
||||||
detailModalVisible.value = true
|
detailModalVisible.value = true
|
||||||
}
|
}
|
||||||
const useCouponWith = (coupon) => {
|
const useCouponWith = (coupon) => {
|
||||||
@@ -289,40 +282,21 @@ page {
|
|||||||
|
|
||||||
.exchange-box {
|
.exchange-box {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
height: 200rpx;
|
height: 100rpx;
|
||||||
background-color: #ffffff;
|
background-color: #ffffff;
|
||||||
display: flex;
|
display: flex;
|
||||||
flex-direction: column;
|
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
|
|
||||||
.input-box {
|
.input-box {
|
||||||
display: flex;
|
|
||||||
align-items: stretch;
|
|
||||||
width: 70%;
|
width: 70%;
|
||||||
flex-shrink: 0;
|
|
||||||
input {
|
|
||||||
flex: 1;
|
|
||||||
height: 80rpx;
|
|
||||||
border: 1rpx solid #eee;
|
|
||||||
border-right: 0;
|
|
||||||
border-radius: 8rpx 0 0 8rpx;
|
|
||||||
// padding: 20rpx;
|
|
||||||
font-size: $font-size-base;
|
|
||||||
color: $text-color-base;
|
|
||||||
}
|
|
||||||
button {
|
|
||||||
border-radius: 0 8rpx 8rpx 0;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.tabbar {
|
.tabbar {
|
||||||
flex-shrink: 0;
|
flex-shrink: 0;
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 120rpx;
|
height: 80rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@@ -438,23 +412,6 @@ page {
|
|||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
}
|
}
|
||||||
.store {
|
|
||||||
font-weight: 500;
|
|
||||||
}
|
|
||||||
.buddha {
|
|
||||||
width: 70rpx;
|
|
||||||
height: 70rpx;
|
|
||||||
border-radius: 10rpx;
|
|
||||||
margin-right: 10rpx;
|
|
||||||
}
|
|
||||||
.entrance {
|
|
||||||
color: $uv-info;
|
|
||||||
border: solid 2rpx $uv-info;
|
|
||||||
line-height: 48rpx;
|
|
||||||
padding: 0 30rpx;
|
|
||||||
background: none;
|
|
||||||
border-radius: 15px;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
.ticket {
|
.ticket {
|
||||||
display: flex;
|
display: flex;
|
||||||
@@ -523,16 +480,6 @@ page {
|
|||||||
margin-left: 20rpx;
|
margin-left: 20rpx;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
.right_log {
|
|
||||||
text-align: center;
|
|
||||||
width: 30%;
|
|
||||||
padding: 80rpx 0rpx;
|
|
||||||
background-color: white;//rgb(255, 245, 244);
|
|
||||||
border-radius: 20rpx;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
Reference in new issue
Block a user