|
@@ -5,9 +5,9 @@
|
|
<view :class="index==TabCur?'cu-item text-blue cur':'cu-item'" v-for="(item,index) in list" :key="index" @click="tabSelect"
|
|
<view :class="index==TabCur?'cu-item text-blue cur':'cu-item'" v-for="(item,index) in list" :key="index" @click="tabSelect"
|
|
:data-id="index" style="">
|
|
:data-id="index" style="">
|
|
{{item.name}}
|
|
{{item.name}}
|
|
- <text v-if="index == 0">({{notUsed}})</text>
|
|
|
|
- <text v-if="index == 1">({{used}})</text>
|
|
|
|
- <text v-if="index == 2">({{invalid}})</text>
|
|
|
|
|
|
+ <text v-if="index == 0">({{notUsedList.length}})</text>
|
|
|
|
+ <text v-if="index == 1">({{usedList.length}})</text>
|
|
|
|
+ <text v-if="index == 2">({{invalidList.length}})</text>
|
|
</view>
|
|
</view>
|
|
<view class="coupon-List" v-if="TabCur == 0">
|
|
<view class="coupon-List" v-if="TabCur == 0">
|
|
<view style="text-align: right;">
|
|
<view style="text-align: right;">
|
|
@@ -15,18 +15,18 @@
|
|
</view>
|
|
</view>
|
|
<view class="margin-top-sm">
|
|
<view class="margin-top-sm">
|
|
<view class="cu-list menu-avatar padding-tb-sm bg-white">
|
|
<view class="cu-list menu-avatar padding-tb-sm bg-white">
|
|
- <view class="cu-item" v-for="(item,index) in 5" :key="index">
|
|
|
|
- <view class="cu-avatar round lg" style="background-image:url(https://ossweb-img.qq.com/images/lol/img/champion/Taric.png);">
|
|
|
|
|
|
+ <view class="cu-item" v-for="(item,index) in notUsedList" :key="index">
|
|
|
|
+ <view class="cu-avatar round lg" :style="'background-image:url('+item.icon+');'">
|
|
</view>
|
|
</view>
|
|
<view class="content">
|
|
<view class="content">
|
|
<view class="text-grey">
|
|
<view class="text-grey">
|
|
- <text class="text-cut">九折卷</text>
|
|
|
|
|
|
+ <text class="text-cut">{{item.name}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="text-gray text-sm flex">
|
|
<view class="text-gray text-sm flex">
|
|
- <text class="text-cut">满20元可用,优惠上限50元</text>
|
|
|
|
|
|
+ <text class="text-cut">{{item.title}}</text>
|
|
</view>
|
|
</view>
|
|
<view class="text-gray text-sm flex">
|
|
<view class="text-gray text-sm flex">
|
|
- <text class="text-cut">有效期:2020.01.01 11:00:00-2020.01.10 11:00:00</text>
|
|
|
|
|
|
+ <text class="text-cut">有效期:{{item.start_time}}-{{item.end_time}}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="action">
|
|
<view class="action">
|
|
@@ -38,12 +38,54 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view v-else-if="TabCur == 1">
|
|
<view v-else-if="TabCur == 1">
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ <view class="margin-top-sm">
|
|
|
|
+ <view class="cu-list menu-avatar padding-tb-sm bg-white">
|
|
|
|
+ <view class="cu-item" v-for="(item,index) in usedList" :key="index">
|
|
|
|
+ <view class="cu-avatar round lg" :style="'background-image:url('+item.icon+');'">
|
|
|
|
+ </view>
|
|
|
|
+ <view class="content">
|
|
|
|
+ <view class="text-grey">
|
|
|
|
+ <text class="text-cut">{{item.name}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="text-gray text-sm flex">
|
|
|
|
+ <text class="text-cut">{{item.title}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="text-gray text-sm flex">
|
|
|
|
+ <text class="text-cut">有效期:{{item.start_time}}-{{item.end_time}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="action">
|
|
|
|
+ <!-- <view class="text-grey text-xs">22:20</view>
|
|
|
|
+ <view class="cuIcon-notice_forbid_fill text-gray"></view> -->
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
<view v-else="TabCur == 2">
|
|
<view v-else="TabCur == 2">
|
|
-
|
|
|
|
-
|
|
|
|
|
|
+ <view class="margin-top-sm">
|
|
|
|
+ <view class="cu-list menu-avatar padding-tb-sm bg-white">
|
|
|
|
+ <view class="cu-item" v-for="(item,index) in invalidList" :key="index">
|
|
|
|
+ <view class="cu-avatar round lg" :style="'background-image:url('+item.icon+');'">
|
|
|
|
+ </view>
|
|
|
|
+ <view class="content">
|
|
|
|
+ <view class="text-grey">
|
|
|
|
+ <text class="text-cut">{{item.name}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="text-gray text-sm flex">
|
|
|
|
+ <text class="text-cut">{{item.title}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="text-gray text-sm flex">
|
|
|
|
+ <text class="text-cut">有效期:{{item.start_time}}-{{item.end_time}}</text>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ <view class="action">
|
|
|
|
+ <!-- <view class="text-grey text-xs">22:20</view>
|
|
|
|
+ <view class="cuIcon-notice_forbid_fill text-gray"></view> -->
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
|
|
+ </view>
|
|
</view>
|
|
</view>
|
|
</scroll-view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
@@ -73,21 +115,37 @@
|
|
current: 0, // tabs组件的current值,表示当前活动的tab选项
|
|
current: 0, // tabs组件的current值,表示当前活动的tab选项
|
|
swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
|
|
swiperCurrent: 0, // swiper组件的current值,表示当前那个swiper-item是活动的
|
|
pageindex: 1,
|
|
pageindex: 1,
|
|
- couponList:[]
|
|
|
|
|
|
+ couponList: [],
|
|
|
|
+ notUsedList: [],
|
|
|
|
+ usedList: [],
|
|
|
|
+ invalidList: [],
|
|
|
|
+ show: false
|
|
};
|
|
};
|
|
},
|
|
},
|
|
methods: {
|
|
methods: {
|
|
tabSelect(e) {
|
|
tabSelect(e) {
|
|
this.TabCur = e.currentTarget.dataset.id
|
|
this.TabCur = e.currentTarget.dataset.id
|
|
- console.log(this.TabCur)
|
|
|
|
},
|
|
},
|
|
getCouponList: async function() {
|
|
getCouponList: async function() {
|
|
let res = await this.$request.post("/api/v1/coupon/couponList", {
|
|
let res = await this.$request.post("/api/v1/coupon/couponList", {
|
|
page: this.pageindex
|
|
page: this.pageindex
|
|
})
|
|
})
|
|
- console.log(res)
|
|
|
|
- if(res.status == 0){
|
|
|
|
- this.couponList = res.data.data
|
|
|
|
|
|
+ if (res.status == 0) {
|
|
|
|
+ this.notUsedList = res.data.data.filter(item => {
|
|
|
|
+ if (item.status == 1) {
|
|
|
|
+ return item
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.usedList = res.data.data.filter(item => {
|
|
|
|
+ if (item.status == 2) {
|
|
|
|
+ return item
|
|
|
|
+ }
|
|
|
|
+ })
|
|
|
|
+ this.invalidList = res.data.data.filter(item => {
|
|
|
|
+ if (item.status == 3) {
|
|
|
|
+ return item
|
|
|
|
+ }
|
|
|
|
+ })
|
|
}
|
|
}
|
|
}
|
|
}
|
|
},
|
|
},
|
|
@@ -100,7 +158,7 @@
|
|
.coupon-List {
|
|
.coupon-List {
|
|
height: 100%;
|
|
height: 100%;
|
|
width: 100%;
|
|
width: 100%;
|
|
- background-color: #f9f9f9;
|
|
|
|
|
|
+ /* background-color: #f9f9f9; */
|
|
padding: 20rpx 20rpx 0 20rpx;
|
|
padding: 20rpx 20rpx 0 20rpx;
|
|
}
|
|
}
|
|
|
|
|