|
|
@@ -1,32 +1,31 @@
|
|
|
<template>
|
|
|
<view>
|
|
|
- <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="选择优惠券"></u-navbar>
|
|
|
+ <u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="选择优惠券" ></u-navbar>
|
|
|
<view class="coupon-title">可用优惠券：{{listNum}}</view>
|
|
|
<view class="coupon-list">
|
|
|
- <view class="flex coupon-list-item" v-for="(item,index) in list" :key="index">
|
|
|
- <view class="flex coupon-list-item-info">
|
|
|
- <view class="money">
|
|
|
- <view class="">￥<text>{{item.discount}}</text></view>
|
|
|
- </view>
|
|
|
- <view class="flex content">
|
|
|
- <view class="txt 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>
|
|
|
-
|
|
|
- </view>
|
|
|
- <view class="checked">
|
|
|
- <view class="flex circle">
|
|
|
- <view class="action" v-if="actionIndex == 0"></view>
|
|
|
+ <u-radio-group v-model="radiovalue1" placement="column">
|
|
|
+ <view class="flex coupon-list-item" v-for="(item,index) in list" :key="index">
|
|
|
+ <view class="flex coupon-list-item-info">
|
|
|
+ <view class="money">
|
|
|
+ <view class="">￥<text>{{item.discount}}</text></view>
|
|
|
+ </view>
|
|
|
+ <view class="flex content">
|
|
|
+ <view class="txt 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>
|
|
|
</view>
|
|
|
+ <u-radio :customStyle="{marginBottom: '8px'}" :name="index"> </u-radio>
|
|
|
</view>
|
|
|
- </view>
|
|
|
+ </u-radio-group>
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="flex empty" v-if="!list.length">
|
|
|
<u-empty text="数据为空" mode="order" />
|
|
|
</view>
|
|
|
-
|
|
|
+
|
|
|
<view class="footer-fixed">
|
|
|
<view class="flex btn">
|
|
|
<button type="default" @click="exchange">确认</button>
|
|
|
@@ -46,15 +45,16 @@
|
|
|
pageNum: 1,
|
|
|
total: 0,
|
|
|
list: [],
|
|
|
-
|
|
|
- listNum:'',
|
|
|
+
|
|
|
+ listNum: '',//可用优惠券数量
|
|
|
+ radiovalue1: 0, //被选中的下标
|
|
|
};
|
|
|
},
|
|
|
- onShow(){
|
|
|
+ onShow() {
|
|
|
this.getList()
|
|
|
},
|
|
|
- methods:{
|
|
|
- getList(){
|
|
|
+ methods: {
|
|
|
+ getList() {
|
|
|
uni.showLoading({
|
|
|
title: '加载中'
|
|
|
});
|
|
|
@@ -64,7 +64,7 @@
|
|
|
console.log(res)
|
|
|
if (res.code == 0) {
|
|
|
this.listNum = res.data.length
|
|
|
- res.data.forEach(item =>{
|
|
|
+ res.data.forEach(item => {
|
|
|
let useAreaDesc = JSON.parse(item.useArea)
|
|
|
item.useAreaDesc = useAreaDesc.desc
|
|
|
})
|
|
|
@@ -75,12 +75,16 @@
|
|
|
uni.hideLoading();
|
|
|
})
|
|
|
},
|
|
|
- changeChecked(e){
|
|
|
- console.log(e);
|
|
|
- },
|
|
|
- exchange(){
|
|
|
- // 获取所选项
|
|
|
- // 返回立即支付位置
|
|
|
+
|
|
|
+ // 点击确认事件
|
|
|
+ exchange() {
|
|
|
+ for (var i = 0; i < this.list.length; i++) {
|
|
|
+ if(i == this.radiovalue1){
|
|
|
+ console.log(this.list[i])
|
|
|
+ uni.navigateBack({data:this.list[i]})
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
@@ -104,45 +108,48 @@
|
|
|
padding: 20rpx;
|
|
|
background-color: #FFFFFF;
|
|
|
margin-bottom: 20rpx;
|
|
|
-
|
|
|
- &-info{
|
|
|
+
|
|
|
+ &-info {
|
|
|
flex: 1;
|
|
|
justify-content: flex-start;
|
|
|
height: 170rpx;
|
|
|
- image{
|
|
|
+
|
|
|
+ image {
|
|
|
width: 84rpx;
|
|
|
height: 132rpx;
|
|
|
margin-right: 20rpx;
|
|
|
}
|
|
|
-
|
|
|
- .content{
|
|
|
+
|
|
|
+ .content {
|
|
|
height: 132rpx;
|
|
|
flex-direction: column;
|
|
|
align-items: flex-start;
|
|
|
justify-content: space-between;
|
|
|
}
|
|
|
- .content .title{
|
|
|
+
|
|
|
+ .content .title {
|
|
|
font-size: 32rpx;
|
|
|
line-height: 50rpx;
|
|
|
}
|
|
|
-
|
|
|
- .money{
|
|
|
+
|
|
|
+ .money {
|
|
|
padding-right: 30rpx;
|
|
|
font-weight: bold;
|
|
|
- text{
|
|
|
+
|
|
|
+ text {
|
|
|
font-size: 50rpx;
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .circle{
|
|
|
+
|
|
|
+ .circle {
|
|
|
width: 40rpx;
|
|
|
height: 40rpx;
|
|
|
border-radius: 50%;
|
|
|
border: 1px solid;
|
|
|
}
|
|
|
-
|
|
|
- .action{
|
|
|
+
|
|
|
+ .action {
|
|
|
width: 30rpx;
|
|
|
height: 30rpx;
|
|
|
border-radius: 50%;
|
|
|
@@ -151,11 +158,11 @@
|
|
|
}
|
|
|
}
|
|
|
}
|
|
|
-
|
|
|
- .empty{
|
|
|
+
|
|
|
+ .empty {
|
|
|
height: 60vh;
|
|
|
}
|
|
|
-
|
|
|
+
|
|
|
.footer-fixed {
|
|
|
position: fixed;
|
|
|
bottom: var(--window-bottom);
|
|
|
@@ -167,10 +174,10 @@
|
|
|
// 设置ios刘海屏底部横线安全区域
|
|
|
padding-bottom: constant(safe-area-inset-bottom);
|
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
|
-
|
|
|
+
|
|
|
.btn {
|
|
|
padding: 20rpx 0;
|
|
|
-
|
|
|
+
|
|
|
/deep/ button {
|
|
|
width: 640rpx;
|
|
|
height: 90rpx;
|
