|
|
@@ -16,19 +16,21 @@
|
|
|
<!-- 已使用 -->
|
|
|
<view class="prize-coupon">
|
|
|
<view class="prize-coupon-list">
|
|
|
- <view class="flex prize-coupon-list-item" v-for="(item, index) in list" :key="index">
|
|
|
- <image :src="item.picUrl" mode="aspectFill"></image>
|
|
|
- <view class="flex info">
|
|
|
- <view class="flex desc">
|
|
|
- <view class="title">{{ item.title }}</view>
|
|
|
- <view class="txt">使用期限：{{ $parseTime(item.validStart, '{y}.{m}.{d}') }}-{{ $parseTime(item.validEnd, '{y}.{m}.{d}') }}</view>
|
|
|
- <view class="txt">使用范围：{{ item.useAreaDesc }}</view>
|
|
|
+ <view class="prize-coupon-list-item" v-for="(item, index) in list" :key="index">
|
|
|
+ <image src="../../static/icon/coupon_bg2.png" mode=""></image>
|
|
|
+ <view class="info">
|
|
|
+ <view class="info-item">
|
|
|
+ <text>使用期限：</text>
|
|
|
+ <text>{{ $parseTime(item.validStart, '{y}.{m}.{d}') }}-{{ $parseTime(item.validEnd, '{y}.{m}.{d}') }}</text>
|
|
|
</view>
|
|
|
- <view class="flex btn">
|
|
|
- <view class="amt"><text>￥</text>{{ item.discount / 100 }}</view>
|
|
|
+ <view class="info-item">
|
|
|
+ <text>使用范围：</text>
|
|
|
+ <text>{{ item.useAreaDesc || '-' }}</text>
|
|
|
</view>
|
|
|
- <view class="state" v-if="state == 2">已使用</view>
|
|
|
- <view class="state" v-else>已过期</view>
|
|
|
+ </view>
|
|
|
+ <view class="flex price-title">
|
|
|
+ <view class="price"><text>￥</text>{{ item.discount / 100 }}</view>
|
|
|
+ <view class="title">{{ item.title }}</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -86,13 +88,13 @@
|
|
|
this.loading = false
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
pageList() {
|
|
|
this.pageNum = 1
|
|
|
this.list = []
|
|
|
this.getList()
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
changeTab(e) {
|
|
|
if (e.index == 0) {
|
|
|
this.state = 2
|
|
|
@@ -106,7 +108,7 @@
|
|
|
|
|
|
},
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
onReachBottom() {
|
|
|
// 判断是否有数据
|
|
|
if (this.total > this.pageNum * 20) {
|
|
|
@@ -137,63 +139,49 @@
|
|
|
&-list {
|
|
|
|
|
|
&-item {
|
|
|
- justify-content: space-between;
|
|
|
+ position: relative;
|
|
|
background-color: #FFFFFF;
|
|
|
- padding: 40rpx 20rpx;
|
|
|
+ margin-bottom: 20rpx;
|
|
|
border-radius: 10rpx;
|
|
|
- margin-bottom: 40rpx;
|
|
|
|
|
|
image {
|
|
|
- width: 94rpx;
|
|
|
- height: 132rpx;
|
|
|
+ width: 100%;
|
|
|
+ height: 156rpx;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
}
|
|
|
|
|
|
.info {
|
|
|
- position: relative;
|
|
|
- justify-content: space-between;
|
|
|
- flex: 1;
|
|
|
- }
|
|
|
+ padding-left: 40rpx;
|
|
|
+ padding-bottom: 8rpx;
|
|
|
|
|
|
- .desc {
|
|
|
- height: 132rpx;
|
|
|
- flex-direction: column;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: flex-start;
|
|
|
- padding-left: 20rpx;
|
|
|
+ .info-item {
|
|
|
+ line-height: 40rpx;
|
|
|
+ color: #333333;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
}
|
|
|
|
|
|
- .txt {
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
+ .price-title {
|
|
|
+ justify-content: flex-start;
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ width: 100%;
|
|
|
+ padding: 36rpx 0 0 40rpx;
|
|
|
|
|
|
- .btn {
|
|
|
- flex-direction: column;
|
|
|
- }
|
|
|
+ .price {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 60rpx;
|
|
|
+ margin-right: 20rpx;
|
|
|
|
|
|
- .amt {
|
|
|
- font-size: 48rpx;
|
|
|
- font-weight: bold;
|
|
|
- line-height: 72rpx;
|
|
|
- }
|
|
|
+ text {
|
|
|
+ font-size: 40rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
|
|
|
- text {
|
|
|
- font-size: 24rpx;
|
|
|
- }
|
|
|
-
|
|
|
- .state{
|
|
|
- position: absolute;
|
|
|
- right: 50rpx;
|
|
|
- transform: rotate(20deg);
|
|
|
- -webkit-transform:rotate(20deg);
|
|
|
- width: 160rpx;
|
|
|
- height:160rpx;
|
|
|
- line-height: 160rpx;
|
|
|
- border: #E1E1E1 2px solid;
|
|
|
- border-radius: 50%;
|
|
|
- background-color: #f9f2ef;
|
|
|
- text-align: center;
|
|
|
- color: #000000;
|
|
|
- opacity: .5;
|
|
|
+ .title {
|
|
|
+ color: #FFFFFF;
|
|
|
+ font-size: 48rpx;
|
|
|
+ }
|
|
|
}
|
|
|
}
|
|
|
|
|
|
@@ -202,8 +190,8 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .empty{
|
|
|
+
|
|
|
+ .empty {
|
|
|
height: 60vh;
|
|
|
}
|
|
|
</style>
|
hwb0