|
@@ -1,16 +1,18 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
<!-- #ifdef MP-ALIPAY -->
|
|
|
- <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="选择优惠券" leftIconSize="0"></u-navbar>
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="选择优惠券" leftIconSize="0">
|
|
|
+ </u-navbar>
|
|
|
<!-- #endif -->
|
|
|
<!-- #ifndef MP-ALIPAY -->
|
|
|
<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="选择优惠券"></u-navbar>
|
|
|
<!-- #endif -->
|
|
|
-
|
|
|
+
|
|
|
<view class="coupon-title">可用优惠券:{{ total }}</view>
|
|
|
<view class="coupon-list">
|
|
|
<u-radio-group v-model="radiovalue1" placement="column" @change="changeChechk()">
|
|
|
- <view class="flex coupon-list-item" v-for="(item,index) in list" :key="index" :style="{backgroundImage:`url(${ index == isActive ? backOn : backOff })`}">
|
|
|
+ <view class="flex coupon-list-item" v-for="(item,index) in list" :key="index"
|
|
|
+ :style="{backgroundImage:`url(${ index == isActive ? backOn : backOff })`}">
|
|
|
<view class="flex coupon-list-item-info">
|
|
|
<view class="money">
|
|
|
<!-- <view class="">¥<text>{{ item.discount / 100 }}</text></view> -->
|
|
@@ -28,17 +30,21 @@
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="uradio">
|
|
|
- <u-radio :customStyle="{ marginBottom: '8px' }" :name="item.id" activeColor="#E96737" size="24" @change="exclusive(index)">
|
|
|
- </u-radio>
|
|
|
+ <u-radio :customStyle="{ marginBottom: '8px' }" :name="item.id" activeColor="#E96737" size="24"
|
|
|
+ @change="exclusive(index)">
|
|
|
+ </u-radio>
|
|
|
</view>
|
|
|
-
|
|
|
</view>
|
|
|
+ <u-loadmore :line="true" v-if="list.length>5" :status="status" :loading-text="'努力加载中'"
|
|
|
+ :nomore-text="'已经到底了'" />
|
|
|
</u-radio-group>
|
|
|
</view>
|
|
|
|
|
|
<view class="flex empty" v-if="!list.length">
|
|
|
<view class="center">
|
|
|
- <image class="center-img" src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_1.png" mode="scaleToFill"></image>
|
|
|
+ <image class="center-img"
|
|
|
+ src="https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/nodata_1.png" mode="scaleToFill">
|
|
|
+ </image>
|
|
|
<view class="center-font">暂无优惠券</view>
|
|
|
</view>
|
|
|
<!-- <u-empty text="数据为空" mode="order" /> -->
|
|
@@ -69,7 +75,8 @@
|
|
|
couponId: '', //选中项的id
|
|
|
boxId: '',
|
|
|
ticketId: '',
|
|
|
-
|
|
|
+ status: 'nomore', //上拉刷新状态
|
|
|
+
|
|
|
isActive: undefined,
|
|
|
backOn: "https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/coupon_bkg2.png",
|
|
|
backOff: "https://mp-public-1310078123.cos.ap-shanghai.myqcloud.com/v2/coupon_bkg1.png",
|
|
@@ -99,12 +106,8 @@
|
|
|
|
|
|
getList() {
|
|
|
let _this = this
|
|
|
- uni.showLoading({
|
|
|
- title: '加载中'
|
|
|
- });
|
|
|
$http.post(`/api/v1/mp/user/ticket/order/coupon/listPage?pageNum=${_this.pageNum}&pageSize=20`, {}).then(
|
|
|
res => {
|
|
|
- uni.hideLoading();
|
|
|
if (res.code == 0) {
|
|
|
this.listNum = res.rows.length
|
|
|
res.rows.forEach(item => {
|
|
@@ -114,17 +117,16 @@
|
|
|
_this.list = [..._this.list, ...res.rows]
|
|
|
_this.total = res.total
|
|
|
for (var i = 0; i < _this.list.length; i++) {
|
|
|
- if(_this.list[i].id == _this.couponId){
|
|
|
+ if (_this.list[i].id == _this.couponId) {
|
|
|
_this.isActive = i
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}).catch(() => {
|
|
|
- uni.hideLoading();
|
|
|
})
|
|
|
},
|
|
|
-
|
|
|
+
|
|
|
exclusive(index) {
|
|
|
this.isActive = index
|
|
|
},
|
|
@@ -176,21 +178,19 @@
|
|
|
},
|
|
|
onReachBottom() {
|
|
|
// 判断是否有数据
|
|
|
- if (this.total > this.pageNum * 20) {
|
|
|
- setTimeout(() => {
|
|
|
- ++this.pageNum
|
|
|
- this.getList()
|
|
|
- }, 500)
|
|
|
- } else {
|
|
|
- uni.$u.toast('已经到底了')
|
|
|
- }
|
|
|
+ if (this.total < this.pageNum * 20) return;
|
|
|
+ this.status = 'loading';
|
|
|
+ ++this.pageNum
|
|
|
+ if (this.total < this.pageNum * 20) this.status = 'nomore';
|
|
|
+ else this.status = 'loading';
|
|
|
+ this.getList()
|
|
|
},
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
|
.coupon {
|
|
|
-
|
|
|
+
|
|
|
&-title {
|
|
|
position: fixed;
|
|
|
z-index: 10;
|
|
@@ -201,7 +201,7 @@
|
|
|
|
|
|
&-list {
|
|
|
margin-top: 100rpx;
|
|
|
- padding: 0 20rpx 100rpx;
|
|
|
+ padding: 0 20rpx 200rpx;
|
|
|
|
|
|
&-item {
|
|
|
justify-content: space-between;
|
|
@@ -227,6 +227,7 @@
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
justify-content: space-between;
|
|
|
+
|
|
|
.txt {
|
|
|
font-size: 24rpx;
|
|
|
line-height: 24rpx;
|
|
@@ -244,18 +245,19 @@
|
|
|
.money {
|
|
|
width: 220rpx;
|
|
|
height: 100%;
|
|
|
- margin:0 10rpx 0;
|
|
|
+ margin: 0 10rpx 0;
|
|
|
+
|
|
|
.price {
|
|
|
position: absolute;
|
|
|
color: #fff;
|
|
|
z-index: 0;
|
|
|
-
|
|
|
+
|
|
|
text:first-child {
|
|
|
line-height: 150rpx;
|
|
|
font-size: 70rpx;
|
|
|
padding-right: 20rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
text:last-child {
|
|
|
font-size: 40rpx;
|
|
|
}
|
|
@@ -264,8 +266,10 @@
|
|
|
}
|
|
|
|
|
|
.uradio {
|
|
|
- position: absolute;right: 40rpx;
|
|
|
+ position: absolute;
|
|
|
+ right: 40rpx;
|
|
|
}
|
|
|
+
|
|
|
.circle {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
@@ -285,15 +289,15 @@
|
|
|
|
|
|
.empty {
|
|
|
height: 60vh;
|
|
|
-
|
|
|
+
|
|
|
.center {
|
|
|
text-align: center;
|
|
|
-
|
|
|
+
|
|
|
&-img {
|
|
|
width: 228rpx;
|
|
|
height: 320rpx;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
&-font {
|
|
|
font-size: 30rpx;
|
|
|
font-weight: 400;
|