|
|
|
|
@ -1,22 +1,19 @@ |
|
|
|
|
<template> |
|
|
|
|
<view> |
|
|
|
|
<view class="tabr" :style="{top:headerTop}"> |
|
|
|
|
<view :class="{on:typeClass=='valid'}" @tap="switchType('valid')">可用({{couponcout}})</view> |
|
|
|
|
<view :class="{on:typeClass=='invalid'}" @tap="switchType('invalid')">已失效</view> |
|
|
|
|
<view class="border" :class="typeClass"></view> |
|
|
|
|
<view class="tabr" :style="{top:headerTop}"> |
|
|
|
|
<!-- ({{couponcout}}) --> |
|
|
|
|
<view :class="{on:typeClass=='valid'}" @tap="switchType('valid')">待使用</view> |
|
|
|
|
<view :class="{on:typeClass=='invalid'}" @tap="switchType('invalid')">已使用</view> |
|
|
|
|
<view :class="{on:typeClass=='noinvalid'}" @tap="switchType('noinvalid')">已过期</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="place"></view> |
|
|
|
|
<view class="list"> |
|
|
|
|
<!-- 优惠券列表 --> |
|
|
|
|
<view class="sub-list valid" :class="subState"> |
|
|
|
|
<view class="sub-list" v-if="typeClass == 'valid'"> |
|
|
|
|
<view class="tis" v-if="couponValidList.length==0"> |
|
|
|
|
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="row" v-for="(row,index) in couponValidList" :key="index" @click="jumpcoupons(row)"> |
|
|
|
|
<!-- 删除按钮 --> |
|
|
|
|
<view class="menu" @tap.stop="deleteCoupon(row.id,couponValidList)"> |
|
|
|
|
<view class="icon shanchu"></view> |
|
|
|
|
</view> |
|
|
|
|
<!-- content --> |
|
|
|
|
<view class="carrier"> |
|
|
|
|
<view class="left"> |
|
|
|
|
@ -26,43 +23,38 @@ |
|
|
|
|
<view class="term"> |
|
|
|
|
截止时间:{{row.useEndTime | formatDate('-')}} |
|
|
|
|
</view> |
|
|
|
|
<view class="gap-top"></view> |
|
|
|
|
<view class="gap-bottom"></view> |
|
|
|
|
</view> |
|
|
|
|
<view class="right"> |
|
|
|
|
<view class="ticket"> |
|
|
|
|
<view class="num" v-if="row.highDiscount.discountType == 3"> |
|
|
|
|
{{row.highDiscount.discountPrice * 10}} |
|
|
|
|
</view> |
|
|
|
|
<view class="num" v-else> |
|
|
|
|
{{row.highDiscount.discountPrice}} |
|
|
|
|
</view> |
|
|
|
|
<view class="num" v-else> |
|
|
|
|
{{row.highDiscount.discountPrice}} |
|
|
|
|
</view> |
|
|
|
|
<view class="unit" v-if="row.highDiscount.discountType == 3"> |
|
|
|
|
折 |
|
|
|
|
</view> |
|
|
|
|
<view class="unit" v-else> |
|
|
|
|
元 |
|
|
|
|
</view> |
|
|
|
|
<view class="unit" v-else> |
|
|
|
|
元 |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<!-- <view class="criteria"> |
|
|
|
|
{{row.highDiscount.discountName}} |
|
|
|
|
</view> --> |
|
|
|
|
<view class="use" > |
|
|
|
|
<view class="use"> |
|
|
|
|
去使用 |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="sub-list invalid" :class="subState"> |
|
|
|
|
<!-- //已使用 --> |
|
|
|
|
<view class="sub-list" v-if="typeClass == 'invalid'"> |
|
|
|
|
<view class="tis" v-if="couponinvalidList.length==0"> |
|
|
|
|
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="row" v-for="(row,index) in couponinvalidList" :key="index"> |
|
|
|
|
<!-- 删除按钮 --> |
|
|
|
|
<view class="menu" @tap.stop="deleteCoupon(row.id,couponinvalidList)"> |
|
|
|
|
<view class="icon shanchu"></view> |
|
|
|
|
</view> |
|
|
|
|
<!-- content --> |
|
|
|
|
<view class="carrier"> |
|
|
|
|
<view class="left"> |
|
|
|
|
@ -70,13 +62,43 @@ |
|
|
|
|
{{row.highDiscount.discountName}} |
|
|
|
|
</view> |
|
|
|
|
<view class="term"> |
|
|
|
|
截止时间:{{row.highDiscount.salesEndTime | formatDate('-')}} |
|
|
|
|
使用时间:{{row.useTime | formatDate('-')}} |
|
|
|
|
</view> |
|
|
|
|
<view class="icon shixiao"> |
|
|
|
|
|
|
|
|
|
</view> |
|
|
|
|
<view class="right invalid"> |
|
|
|
|
<view class="ticket"> |
|
|
|
|
<view class="num"> |
|
|
|
|
{{row.highDiscount.discountPrice}} |
|
|
|
|
</view> |
|
|
|
|
<view class="unit"> |
|
|
|
|
元 |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="criteria"> |
|
|
|
|
{{row.highDiscount.discountName}} |
|
|
|
|
</view> |
|
|
|
|
<view class="use"> |
|
|
|
|
已使用 |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<!-- 已过期 --> |
|
|
|
|
<view class="sub-list" v-if="typeClass == 'noinvalid'"> |
|
|
|
|
<view class="tis" v-if="couponnoinvalidList.length==0"> |
|
|
|
|
<image mode="widthFix" style="width: 70vw;" :src="imagewxUrl+imgadres"></image> |
|
|
|
|
</view> |
|
|
|
|
<view class="row" v-for="(row,index) in couponnoinvalidList" :key="index"> |
|
|
|
|
<!-- content --> |
|
|
|
|
<view class="carrier"> |
|
|
|
|
<view class="left"> |
|
|
|
|
<view class="title"> |
|
|
|
|
{{row.highDiscount.discountName}} |
|
|
|
|
</view> |
|
|
|
|
<view class="term"> |
|
|
|
|
过期时间:{{row.useEndTime | formatDate('-')}} |
|
|
|
|
</view> |
|
|
|
|
<view class="gap-top"></view> |
|
|
|
|
<view class="gap-bottom"></view> |
|
|
|
|
</view> |
|
|
|
|
<view class="right invalid"> |
|
|
|
|
<view class="ticket"> |
|
|
|
|
@ -91,7 +113,7 @@ |
|
|
|
|
{{row.highDiscount.discountName}} |
|
|
|
|
</view> |
|
|
|
|
<view class="use"> |
|
|
|
|
已失效 |
|
|
|
|
已过期 |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
@ -112,8 +134,9 @@ |
|
|
|
|
return { |
|
|
|
|
couponValidList: [], |
|
|
|
|
couponinvalidList: [], |
|
|
|
|
couponnoinvalidList: [], |
|
|
|
|
imagewxUrl: app.globalData.imageWxImg, |
|
|
|
|
imgadres:'noorder.png', |
|
|
|
|
imgadres: 'noorder.png', |
|
|
|
|
headerTop: 0, |
|
|
|
|
//控制滑动效果 |
|
|
|
|
typeClass: 'valid', |
|
|
|
|
@ -124,8 +147,8 @@ |
|
|
|
|
pageNum: 1, |
|
|
|
|
pageSize: 10, |
|
|
|
|
isNoMoreData: false, |
|
|
|
|
loadingText: '', |
|
|
|
|
couponcout:0 |
|
|
|
|
loadingText: '', |
|
|
|
|
couponcout: 0 |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
onPageScroll(e) { |
|
|
|
|
@ -172,8 +195,10 @@ |
|
|
|
|
onReachBottom() { |
|
|
|
|
if (this.typeClass == 'valid') { |
|
|
|
|
this.getUserDiscountList(1); |
|
|
|
|
} else { |
|
|
|
|
} else if (this.typeClass == 'invalid') { |
|
|
|
|
this.getUserDiscountList(2); |
|
|
|
|
} else { |
|
|
|
|
this.getUserDiscountList(0); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
methods: { |
|
|
|
|
@ -201,31 +226,34 @@ |
|
|
|
|
this.isNoMoreData = true; |
|
|
|
|
} |
|
|
|
|
if (this.typeClass == 'valid') { |
|
|
|
|
this.couponValidList = this.couponValidList.concat(res.return_data.list); |
|
|
|
|
this.couponValidList = this.couponValidList.concat(res.return_data.list); |
|
|
|
|
this.couponcout = res.return_data.total; |
|
|
|
|
} else { |
|
|
|
|
} else if (this.typeClass == 'invalid') { |
|
|
|
|
this.couponinvalidList = this.couponinvalidList.concat(res.return_data.list); |
|
|
|
|
} else { |
|
|
|
|
this.couponnoinvalidList = this.couponnoinvalidList.concat(res.return_data.list); |
|
|
|
|
} |
|
|
|
|
this.pageNum = res.return_data.list.length == this.pageSize ? ++pagenum : pagenum; |
|
|
|
|
} else { |
|
|
|
|
this.couponValidList = []; |
|
|
|
|
this.couponinvalidList = []; |
|
|
|
|
this.couponnoinvalidList = []; |
|
|
|
|
uni.hideLoading() |
|
|
|
|
} |
|
|
|
|
}) |
|
|
|
|
}, |
|
|
|
|
//跳转详情 |
|
|
|
|
jumpcoupons(e) { |
|
|
|
|
if(e.highDiscount.useScope == 3){ |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url: '../../../subPages/recharge/recharge' |
|
|
|
|
}) |
|
|
|
|
}else{ |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url: '../mineCouponsDestails/mineCouponsDestails?id=' + e.id |
|
|
|
|
}) |
|
|
|
|
jumpcoupons(e) { |
|
|
|
|
if (e.highDiscount.useScope == 3) { |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url: '../../../subPages/recharge/recharge' |
|
|
|
|
}) |
|
|
|
|
} else { |
|
|
|
|
uni.navigateTo({ |
|
|
|
|
url: '../mineCouponsDestails/mineCouponsDestails?id=' + e.id |
|
|
|
|
}) |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
}, |
|
|
|
|
switchType(type) { |
|
|
|
|
if (this.typeClass == type) { |
|
|
|
|
@ -237,91 +265,28 @@ |
|
|
|
|
}) |
|
|
|
|
this.typeClass = type; |
|
|
|
|
this.subState = this.typeClass == '' ? '' : 'show' + type; |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.oldIndex = null; |
|
|
|
|
this.theIndex = null; |
|
|
|
|
this.subState = this.typeClass == 'valid' ? '' : this.subState; |
|
|
|
|
}, 200) |
|
|
|
|
// setTimeout(() => { |
|
|
|
|
// this.oldIndex = null; |
|
|
|
|
// this.theIndex = null; |
|
|
|
|
// this.subState = this.typeClass == 'valid' ? '' : this.subState; |
|
|
|
|
// }, 200) |
|
|
|
|
if (this.typeClass == 'valid') { |
|
|
|
|
this.pageNum = 1; |
|
|
|
|
this.couponValidList = [] |
|
|
|
|
this.isNoMoreData = false; |
|
|
|
|
this.getUserDiscountList(1); |
|
|
|
|
} else { |
|
|
|
|
} else if (this.typeClass == 'invalid') { |
|
|
|
|
this.pageNum = 1; |
|
|
|
|
this.couponinvalidList = [] |
|
|
|
|
this.isNoMoreData = false; |
|
|
|
|
this.getUserDiscountList(2); |
|
|
|
|
} else { |
|
|
|
|
this.pageNum = 1; |
|
|
|
|
this.couponnoinvalidList = [] |
|
|
|
|
this.isNoMoreData = false; |
|
|
|
|
this.getUserDiscountList(0); |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
//控制左滑删除效果-begin |
|
|
|
|
touchStart(index, event) { |
|
|
|
|
//多点触控不触发 |
|
|
|
|
if (event.touches.length > 1) { |
|
|
|
|
this.isStop = true; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
this.oldIndex = this.theIndex; |
|
|
|
|
this.theIndex = null; |
|
|
|
|
//初始坐标 |
|
|
|
|
this.initXY = [event.touches[0].pageX, event.touches[0].pageY]; |
|
|
|
|
}, |
|
|
|
|
touchMove(index, event) { |
|
|
|
|
//多点触控不触发 |
|
|
|
|
if (event.touches.length > 1) { |
|
|
|
|
this.isStop = true; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
let moveX = event.touches[0].pageX - this.initXY[0]; |
|
|
|
|
let moveY = event.touches[0].pageY - this.initXY[1]; |
|
|
|
|
|
|
|
|
|
if (this.isStop || Math.abs(moveX) < 5) { |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
if (Math.abs(moveY) > Math.abs(moveX)) { |
|
|
|
|
// 竖向滑动-不触发左滑效果 |
|
|
|
|
this.isStop = true; |
|
|
|
|
return; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
if (moveX < 0) { |
|
|
|
|
this.theIndex = index; |
|
|
|
|
this.isStop = true; |
|
|
|
|
} else if (moveX > 0) { |
|
|
|
|
if (this.theIndex != null && this.oldIndex == this.theIndex) { |
|
|
|
|
this.oldIndex = index; |
|
|
|
|
this.theIndex = null; |
|
|
|
|
this.isStop = true; |
|
|
|
|
setTimeout(() => { |
|
|
|
|
this.oldIndex = null; |
|
|
|
|
}, 150) |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
touchEnd(index, $event) { |
|
|
|
|
//解除禁止触发状态 |
|
|
|
|
this.isStop = false; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
//删除商品 |
|
|
|
|
deleteCoupon(id, List) { |
|
|
|
|
let len = List.length; |
|
|
|
|
for (let i = 0; i < len; i++) { |
|
|
|
|
if (id == List[i].id) { |
|
|
|
|
List.splice(i, 1); |
|
|
|
|
break; |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
this.oldIndex = null; |
|
|
|
|
this.theIndex = null; |
|
|
|
|
}, |
|
|
|
|
|
|
|
|
|
discard() { |
|
|
|
|
//丢弃 |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</script> |
|
|
|
|
@ -357,7 +322,7 @@ |
|
|
|
|
z-index: 10; |
|
|
|
|
|
|
|
|
|
view { |
|
|
|
|
width: 50%; |
|
|
|
|
width: 33.3%; |
|
|
|
|
height: 90upx; |
|
|
|
|
justify-content: center; |
|
|
|
|
align-items: center; |
|
|
|
|
@ -367,16 +332,7 @@ |
|
|
|
|
|
|
|
|
|
.on { |
|
|
|
|
color: #0083f5; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.border { |
|
|
|
|
height: 4upx; |
|
|
|
|
background-color: #0083f5; |
|
|
|
|
transition: all .3s ease-out; |
|
|
|
|
|
|
|
|
|
&.invalid { |
|
|
|
|
transform: translate3d(100%, 0, 0); |
|
|
|
|
} |
|
|
|
|
border-bottom: 2px solid #0083f5; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
} |
|
|
|
|
@ -407,6 +363,16 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@keyframes shownoInvalid { |
|
|
|
|
0% { |
|
|
|
|
transform: translateX(0); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
100% { |
|
|
|
|
transform: translateX(-200%); |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
.sub-list { |
|
|
|
|
&.invalid { |
|
|
|
|
position: absolute; |
|
|
|
|
@ -425,6 +391,11 @@ |
|
|
|
|
animation: showInvalid 0.20s linear both; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
&.shownoinvalid { |
|
|
|
|
display: flex; |
|
|
|
|
animation: shownoInvalid 0.20s linear both; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
width: 100%; |
|
|
|
|
padding: 20upx 0 120upx 0; |
|
|
|
|
|
|
|
|
|
@ -605,35 +576,6 @@ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* |
|
|
|
|
<view class="carrier" :class="[theIndex==index?'open':oldIndex==index?'close':'']" @touchstart="touchStart(index,$event)" @touchmove="touchMove(index,$event)" @touchend="touchEnd(index,$event)"> |
|
|
|
|
<view class="left"> |
|
|
|
|
<view class="title"> |
|
|
|
|
10元日常用品类 |
|
|
|
|
</view> |
|
|
|
|
<view class="term"> |
|
|
|
|
2019-04-01~2019-05-30 |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="right"> |
|
|
|
|
<view class="ticket"> |
|
|
|
|
<view class="num"> |
|
|
|
|
10 |
|
|
|
|
</view> |
|
|
|
|
<view class="unit"> |
|
|
|
|
元 |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
<view class="criteria"> |
|
|
|
|
满50使用 |
|
|
|
|
</view> |
|
|
|
|
<view class="use"> |
|
|
|
|
去使用 |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
</view> |
|
|
|
|
* |
|
|
|
|
* */ |
|
|
|
|
} |
|
|
|
|
} |
|
|
|
|
</style> |
|
|
|
|
|
