You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
155 lines
3.7 KiB
155 lines
3.7 KiB
<template>
|
|
<view class="page">
|
|
<!-- 导航栏 -->
|
|
<navbar title="优惠券" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />
|
|
|
|
<!-- 标签页 -->
|
|
<uv-sticky bgColor="#fff" v-if="!usein">
|
|
<uv-tabs :list="tabs" @change="changeTab" :scrollable="false" lineColor="#019245"
|
|
:activeStyle="{color: '#019245' }" lineWidth="80" lineHeight="6" :inactiveStyle="{color: '#333'}"
|
|
:itemStyle="{height: '90rpx'}" />
|
|
</uv-sticky>
|
|
|
|
<!-- 优惠券列表 -->
|
|
<view class="coupon-list">
|
|
<template v-if="currentTab === 0">
|
|
<coupon-item v-for="coupon in unusedCoupons" :key="coupon.id" :coupon="coupon" @use="useCoupon" />
|
|
<view v-if="unusedCoupons.length == 0" style="padding-top: 200rpx;">
|
|
<uv-empty text="暂无优惠卷" textSize="30rpx" iconSize="200rpx"
|
|
style="padding-top: 200rpx;" icon="list" />
|
|
</view>
|
|
|
|
</template>
|
|
|
|
<template v-if="currentTab === 1">
|
|
<coupon-item v-for="coupon in usedCoupons" :key="coupon.id" :coupon="coupon" />
|
|
<view v-if="usedCoupons.length == 0" style="padding-top: 200rpx;">
|
|
<uv-empty text="暂无优惠卷" textSize="30rpx" iconSize="200rpx"
|
|
style="padding-top: 200rpx;" icon="list" />
|
|
</view>
|
|
</template>
|
|
|
|
<template v-if="currentTab === 2">
|
|
<coupon-item v-for="coupon in expiredCoupons" :key="coupon.id" :coupon="coupon" />
|
|
<view v-if="expiredCoupons.length == 0" style="padding-top: 200rpx;">
|
|
<uv-empty text="暂无优惠卷" textSize="30rpx" iconSize="200rpx"
|
|
style="padding-top: 200rpx;" icon="list" />
|
|
</view>
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/base/navbar.vue'
|
|
import CouponItem from '@/components/coupon/CouponItem.vue'
|
|
import { mapState } from 'vuex'
|
|
|
|
export default {
|
|
components: {
|
|
navbar,
|
|
CouponItem
|
|
},
|
|
data() {
|
|
return {
|
|
tabs: [
|
|
{ name: '未使用' },
|
|
{ name: '已使用' },
|
|
{ name: '已过期' }
|
|
],
|
|
currentTab: 0,
|
|
allCoupons: [],
|
|
usein: false // 是否是跳进来选择使用的情况
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState(['couponData']),
|
|
unusedCoupons() {
|
|
return (this.allCoupons || []).filter(coupon => coupon.status === "0")
|
|
},
|
|
usedCoupons() {
|
|
return (this.allCoupons || []).filter(coupon => coupon.status === "1")
|
|
},
|
|
expiredCoupons() {
|
|
return (this.allCoupons || []).filter(coupon => coupon.status === "2")
|
|
}
|
|
},
|
|
onLoad(args) {
|
|
this.getCoupon()
|
|
if (args.usein === '1') {
|
|
this.usein = true
|
|
}
|
|
},
|
|
methods: {
|
|
// 切换标签页
|
|
changeTab(item) {
|
|
this.currentTab = item.index
|
|
this.getCoupon()
|
|
},
|
|
|
|
// 使用优惠券
|
|
useCoupon(coupon) {
|
|
if (this.usein) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `确定使用面值${coupon.discount}元的优惠券吗？`,
|
|
confirmColor: '#019245',
|
|
success: (res) => {
|
|
// 模拟使用优惠券
|
|
uni.showLoading({
|
|
title: '使用中...'
|
|
})
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
if (res.confirm) {
|
|
uni.showToast({
|
|
title: '使用成功',
|
|
icon: 'success'
|
|
})
|
|
this.$store.commit('setCouponData', coupon)
|
|
this.$utils.navigateBack()
|
|
}
|
|
}, 300)
|
|
},
|
|
fail: (err) => {
|
|
console.log('err', err)
|
|
}
|
|
})
|
|
}else {
|
|
this.$utils.navigateTo('/pages/index/category')
|
|
}
|
|
},
|
|
// 获取优惠卷
|
|
getCoupon() {
|
|
this.$api('queryCouponList', {
|
|
pageNo: 1,
|
|
pageSize: 10000,
|
|
status: this.currentTab
|
|
}, res => {
|
|
if (res.code === 200){
|
|
this.allCoupons = res.result.records
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page {
|
|
.tabs-container {
|
|
.coupon-list {
|
|
padding: 30rpx;
|
|
}
|
|
|
|
.empty-tip {
|
|
text-align: center;
|
|
color: $uni-color-third;
|
|
padding: 100rpx 0;
|
|
font-size: 28rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
</style>
|