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.
131 lines
3.1 KiB
131 lines
3.1 KiB
<template>
|
|
<view class="page">
|
|
<!-- 导航栏 -->
|
|
<navbar title="优惠券" leftClick @leftClick="$utils.navigateBack" bgColor="#019245" color="#fff" />
|
|
|
|
<!-- 标签页 -->
|
|
<uv-sticky bgColor="#fff">
|
|
<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" />
|
|
<uv-empty v-if="unusedCoupons.length == 0" text="暂无优惠卷" textSize="30rpx" iconSize="200rpx"
|
|
style="padding-top: 100rpx;" icon="list" />
|
|
|
|
</template>
|
|
|
|
<template v-if="currentTab === 1">
|
|
<coupon-item v-for="coupon in usedCoupons" :key="coupon.id" :coupon="coupon" />
|
|
<uv-empty v-if="usedCoupons.length == 0" text="暂无优惠卷" textSize="30rpx" iconSize="200rpx"
|
|
style="padding-top: 100rpx;" icon="list" />
|
|
</template>
|
|
|
|
<template v-if="currentTab === 2">
|
|
<coupon-item v-for="coupon in expiredCoupons" :key="coupon.id" :coupon="coupon" />
|
|
<uv-empty v-if="expiredCoupons.length == 0" text="暂无优惠卷" textSize="30rpx" iconSize="200rpx"
|
|
style="padding-top: 100rpx;" icon="list" />
|
|
</template>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import navbar from '@/components/base/navbar.vue'
|
|
import CouponItem from '@/components/coupon/CouponItem.vue'
|
|
import { unusedCoupons, usedCoupons, expiredCoupons } from '@/static/js/mockCoupon.js'
|
|
|
|
export default {
|
|
components: {
|
|
navbar,
|
|
CouponItem
|
|
},
|
|
data() {
|
|
return {
|
|
tabs: [
|
|
{ name: '未使用' },
|
|
{ name: '已使用' },
|
|
{ name: '已过期' }
|
|
],
|
|
currentTab: 0,
|
|
unusedCoupons: [],
|
|
usedCoupons: [],
|
|
expiredCoupons: []
|
|
}
|
|
},
|
|
onLoad() {
|
|
// 从mock数据获取优惠券列表
|
|
this.unusedCoupons = unusedCoupons
|
|
this.usedCoupons = usedCoupons
|
|
// 暂时 没有已过期的优惠卷
|
|
// this.expiredCoupons = expiredCoupons
|
|
this.getCoupon()
|
|
},
|
|
methods: {
|
|
// 切换标签页
|
|
changeTab(item) {
|
|
this.currentTab = item.index
|
|
},
|
|
|
|
// 使用优惠券
|
|
useCoupon(coupon) {
|
|
uni.showModal({
|
|
title: '提示',
|
|
content: `确定使用面值${coupon.amount}元的优惠券吗？`,
|
|
success: (res) => {
|
|
// 模拟使用优惠券
|
|
uni.showLoading({
|
|
title: '使用中...'
|
|
})
|
|
setTimeout(() => {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: '使用成功',
|
|
icon: 'success'
|
|
})
|
|
setTimeout(() => {
|
|
if (res.confirm) {
|
|
this.$utils.navigateTo('/pages/order/index')
|
|
}
|
|
}, 1000)
|
|
}, 1000)
|
|
}
|
|
})
|
|
},
|
|
// 获取优惠卷
|
|
getCoupon() {
|
|
this.$api('queryCouponList', {
|
|
pageNo: 1,
|
|
pageSize: 10000
|
|
}, res => {
|
|
if (res.code === 200){
|
|
console.log(res);
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</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>
|