128 lines
2.8 KiB
Vue
128 lines
2.8 KiB
Vue
<template>
|
|
<view class="popup-coupons">
|
|
<view class="popup-box">
|
|
<view class="popup-title bold tc">选择优惠券</view>
|
|
<SubSection :current="current" :can-use="canUse" :not-use="notUse" radioModel @change="changeNav"/>
|
|
|
|
<view class="list-box">
|
|
<view style="margin-bottom: 20rpx" v-for="(item,index) in list" :key="index">
|
|
<Coupons :data="item" radioModel @change="selectCoupon"/>
|
|
</view>
|
|
|
|
<view class="tc" v-if="list.length===0">
|
|
<image class="zero-coupons" :src="webUrl+'/20231201201733142658.png'" mode="scaleToFill"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button disabled></button>
|
|
<view class="btn-done bold flex jc-center ai-center" :class="{'btn-disabled':current===1}" @click="setCoupon" v-if="current===0">确定
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import SubSection from "@/components/SubSection.vue"
|
|
import Coupons from '@/components/Coupons.vue'
|
|
|
|
export default {
|
|
name: 'CouponsPopup',
|
|
components: {SubSection, Coupons},
|
|
props: {
|
|
twoList: {
|
|
type: Object,
|
|
default: {}
|
|
}
|
|
},
|
|
computed: {
|
|
list() {
|
|
let temp = this.current === 0 ? this.twoList['usable'] : this.twoList['unusable']
|
|
return this.$global.deepClone(temp)
|
|
},
|
|
canUse() {
|
|
return this.twoList['usable'].length
|
|
},
|
|
notUse() {
|
|
return this.twoList['unusable'].length
|
|
}
|
|
},
|
|
watch: {
|
|
current() {
|
|
this.selectCoupon(this.couponId)
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
current: 0,
|
|
couponId: 0
|
|
}
|
|
},
|
|
mounted() {
|
|
this.couponId = uni.getStorageSync('couponId') || 0
|
|
this.selectCoupon(this.couponId)
|
|
},
|
|
methods: {
|
|
changeNav(index) {
|
|
this.current = index
|
|
},
|
|
selectCoupon(id) {
|
|
const isCancel = this.couponId === id
|
|
this.couponId = isCancel ? 0 : id
|
|
|
|
this.list?.forEach(item => {
|
|
if (!isCancel) {
|
|
item.checked = id === item.id
|
|
} else {
|
|
item.checked = false
|
|
}
|
|
})
|
|
},
|
|
setCoupon() {
|
|
if (this.current === 1) return
|
|
// if (this.couponId !== 0) {
|
|
uni.setStorageSync('couponId', this.couponId)
|
|
// }
|
|
this.$emit('close')
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="less">
|
|
.popup-coupons {
|
|
.popup-box {
|
|
padding: 34rpx 32rpx;
|
|
}
|
|
|
|
.popup-title {
|
|
margin-bottom: 20rpx;
|
|
color: #333333;
|
|
font-size: 36rpx;
|
|
line-height: 52rpx;
|
|
}
|
|
|
|
.list-box {
|
|
max-height: 640rpx;
|
|
margin-top: 32rpx;
|
|
overflow-y: auto;
|
|
}
|
|
|
|
.btn-done {
|
|
width: 100%;
|
|
height: 80rpx;
|
|
background: #FF564A;
|
|
color: #FFFFFF;
|
|
font-size: 36rpx;
|
|
}
|
|
|
|
.btn-disabled {
|
|
background: #BFBFBF;
|
|
}
|
|
|
|
.zero-coupons {
|
|
width: 400rpx;
|
|
height: 366rpx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
</style> |