141 lines
2.9 KiB
Vue
141 lines
2.9 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"
|
|
radio-model
|
|
@change="changeNav"
|
|
/>
|
|
<view class="list-box">
|
|
<view
|
|
v-for="(item, index) in list"
|
|
:key="index"
|
|
style="margin-bottom: 20rpx"
|
|
>
|
|
<Coupons
|
|
:data="item"
|
|
:radio-model="current === 0"
|
|
@change="selectCoupon"
|
|
/>
|
|
</view>
|
|
<view
|
|
v-if="list.length === 0"
|
|
class="tc"
|
|
>
|
|
<image class="zero-coupons" :src="webUrl+'/20231201201733142658.png'" mode="scaleToFill"/>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button disabled></button>
|
|
<view
|
|
v-if="current === 0"
|
|
:class="{ 'btn-disabled': current === 1 }"
|
|
class="btn-done bold flex jc-center ai-center"
|
|
@click="setCoupon"
|
|
>
|
|
确定
|
|
</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: {
|
|
usable: [],
|
|
unusable: []
|
|
}
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
current: 0,
|
|
couponId: uni.getStorageSync('couponId') || 0
|
|
}
|
|
},
|
|
computed: {
|
|
list() {
|
|
const temp = this.current === 0 ? this.twoList['usable'] : this.twoList['unusable']
|
|
if (this.current === 0) {
|
|
const localCouponId = uni.getStorageSync('couponId') || 0
|
|
temp.map(item => {
|
|
item.checked = localCouponId === item.id
|
|
})
|
|
}
|
|
return this.$global.deepClone(temp)
|
|
},
|
|
canUse() {
|
|
return this.twoList['usable'].length
|
|
},
|
|
notUse() {
|
|
return this.twoList['unusable'].length
|
|
}
|
|
},
|
|
methods: {
|
|
changeNav(index) {
|
|
this.current = index
|
|
},
|
|
selectCoupon(id) {
|
|
this.couponId = id
|
|
this.list.map(item => {
|
|
item.checked = id === item.id
|
|
})
|
|
},
|
|
setCoupon() {
|
|
if (this.current === 1) return
|
|
uni.setStorageSync('couponId', this.couponId)
|
|
this.$emit('change')
|
|
}
|
|
}
|
|
}
|
|
</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> |