73 lines
1.7 KiB
Vue
73 lines
1.7 KiB
Vue
<template>
|
|
<view class="pkg-user-coupons">
|
|
<SubSection :current="current" :can-use="canUse" :not-use="notUse" @change="changeNav"/>
|
|
|
|
<Coupons class="coupons" :data="item" v-for="(item,index) in list" :key="index"/>
|
|
|
|
<image class="zero-coupons" :src="webUrl+'/20231201201733142658.png'" mode="scaleToFill" v-if="list.length===0"/>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import SubSection from '@/components/SubSection.vue'
|
|
import Coupons from '../components/Coupons.vue'
|
|
import {getCouponsUser} from '@/api/user'
|
|
import { pageListenMixins } from '@/mixins/pageListenMixins'
|
|
|
|
export default {
|
|
name: "myCoupons",
|
|
components: {SubSection, Coupons},
|
|
mixins: [pageListenMixins],
|
|
data() {
|
|
return {
|
|
webUrl: this.$VUE_APP_RESOURCES_URL,
|
|
current: 0,
|
|
canUse: 0,
|
|
notUse: 0,
|
|
list: [],
|
|
pageKeyId: Object.freeze('userCouponsIndex')
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.fetchList(1)
|
|
this.fetchList(2)
|
|
},
|
|
methods: {
|
|
changeNav(index) {
|
|
this.current = index
|
|
this.fetchList(index + 1)
|
|
},
|
|
fetchList(type) {
|
|
// type 1-可使用，2-已到期
|
|
getCouponsUser(type).then(({data}) => {
|
|
if (this.current + 1 === type) this.list = data
|
|
this.list?.forEach(item => {
|
|
item.isOpen = false
|
|
})
|
|
if (type === 1) this.canUse = data.length
|
|
if (type === 2) this.notUse = data.length
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.pkg-user-coupons {
|
|
padding: 40rpx 32rpx;
|
|
|
|
/deep/ .components-coupons {
|
|
margin-top: 32rpx;
|
|
}
|
|
|
|
.zero-coupons {
|
|
position: absolute;
|
|
left: 50%;
|
|
top: 40%;
|
|
transform: translate(-50%,-50%);
|
|
width: 400rpx;
|
|
height: 366rpx;
|
|
vertical-align: middle;
|
|
}
|
|
}
|
|
</style> |