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.
326 lines
7.8 KiB
326 lines
7.8 KiB
<template>
|
|
<view class="discount-container">
|
|
<!-- 顶部tab切换 -->
|
|
<uv-subsection
|
|
:list="tabList"
|
|
:current="currentTab"
|
|
@change="onTabChange"
|
|
:activeColor="tabStyle.activeColor"
|
|
:inactiveColor="tabStyle.inactiveColor"
|
|
|
|
:fontSize="tabStyle.fontSize"
|
|
:height="tabStyle.height"
|
|
custom-style="height: 80rpx;border-radius: 70rpx;position: sticky; left: 0; top: 0;right: 0;zIndex: 999"
|
|
custom-item-style="border-radius: 60rpx;"
|
|
></uv-subsection>
|
|
|
|
<!-- 优惠券列表 -->
|
|
<view class="coupon-list">
|
|
<view
|
|
v-for="(coupon, index) in currentCoupons"
|
|
:key="index"
|
|
class="coupon-item"
|
|
:class="{
|
|
'used-coupon': coupon.status === 'used',
|
|
'expired-coupon': coupon.status === 'expired'
|
|
}"
|
|
>
|
|
<!-- 左侧金额区域 -->
|
|
<view class="coupon-left">
|
|
<text class="coupon-symbol">¥</text>
|
|
<text class="coupon-amount">{{ coupon.amount }}</text>
|
|
<!-- 状态盖章 -->
|
|
<image
|
|
v-if="coupon.status !== 'available'"
|
|
class="status-stamp"
|
|
:src="coupon.status === 'used' ? '/static/已使用盖章.png' : '/static/已过期盖章.png'"
|
|
mode="aspectFit"
|
|
></image>
|
|
</view>
|
|
|
|
<!-- 右侧信息区域 -->
|
|
<view class="coupon-right">
|
|
<view class="coupon-title">{{ coupon.title }}</view>
|
|
<view class="coupon-expire">有效期至 {{ coupon.expireDate }}</view>
|
|
|
|
<!-- 使用按钮或状态 -->
|
|
<view class="coupon-action">
|
|
<uv-button
|
|
v-if="coupon.status === 'available'"
|
|
:customStyle="buttonStyle"
|
|
text="去使用"
|
|
@click="useCoupon(coupon)"
|
|
></uv-button>
|
|
<view
|
|
v-else
|
|
class="coupon-status"
|
|
:class="{
|
|
'used-status': coupon.status === 'used',
|
|
'expired-status': coupon.status === 'expired'
|
|
}"
|
|
>
|
|
{{ coupon.status === 'used' ? '已使用' : '已过期' }}
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<uv-empty
|
|
v-if="currentCoupons.length === 0"
|
|
text="暂无优惠券"
|
|
:textColor="emptyStyle.textColor"
|
|
:textSize="emptyStyle.textSize"
|
|
:marginTop="emptyStyle.marginTop"
|
|
></uv-empty>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import ListMixins from '@/mixins/list'
|
|
export default {
|
|
mixins: [ListMixins],
|
|
data() {
|
|
return {
|
|
mixinListApi: 'member.getCouponList',
|
|
currentTab: 0,
|
|
tabList: [
|
|
{ name: '待使用' },
|
|
{ name: '已使用' },
|
|
{ name: '已过期' }
|
|
],
|
|
|
|
// tab样式配置
|
|
tabStyle: {
|
|
activeColor: '#06DADC',
|
|
inactiveColor: '#999',
|
|
bgColor: '#f8f8f8',
|
|
fontSize: '28rpx',
|
|
height: '80rpx'
|
|
},
|
|
|
|
// 按钮样式配置
|
|
buttonStyle: {
|
|
backgroundColor: '#06DADC',
|
|
borderRadius: '99rpx',
|
|
width: '140rpx',
|
|
height: '60rpx',
|
|
fontSize: '30rpx',
|
|
color: '#fff'
|
|
},
|
|
|
|
// 空状态样式配置
|
|
emptyStyle: {
|
|
textColor: '#999',
|
|
textSize: '28rpx',
|
|
marginTop: '200rpx'
|
|
},
|
|
|
|
// 优惠券数据
|
|
coupons: {
|
|
available: [
|
|
{
|
|
id: 1,
|
|
title: '专属福利】20元红包',
|
|
amount: 20,
|
|
expireDate: '2026-04-28',
|
|
status: 'available'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '专属福利】400元红包',
|
|
amount: 400,
|
|
expireDate: '2026-04-28',
|
|
status: 'available'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '专属福利】400元红包',
|
|
amount: 400,
|
|
expireDate: '2026-04-28',
|
|
status: 'available'
|
|
},
|
|
{
|
|
id: 1,
|
|
title: '专属福利】20元红包',
|
|
amount: 20,
|
|
expireDate: '2026-04-28',
|
|
status: 'available'
|
|
},
|
|
{
|
|
id: 2,
|
|
title: '专属福利】400元红包',
|
|
amount: 400,
|
|
expireDate: '2026-04-28',
|
|
status: 'available'
|
|
},
|
|
{
|
|
id: 3,
|
|
title: '专属福利】400元红包',
|
|
amount: 400,
|
|
expireDate: '2026-04-28',
|
|
status: 'available'
|
|
},
|
|
],
|
|
used: [
|
|
{
|
|
id: 4,
|
|
title: '专属福利】20元红包',
|
|
amount: 20,
|
|
expireDate: '2026-04-28',
|
|
status: 'used'
|
|
}
|
|
],
|
|
expired: [
|
|
{
|
|
id: 5,
|
|
title: '专属福利】20元红包',
|
|
amount: 20,
|
|
expireDate: '2026-04-28',
|
|
status: 'expired'
|
|
}
|
|
]
|
|
}
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
currentCoupons() {
|
|
const statusMap = ['available', 'used', 'expired']
|
|
return this.coupons[statusMap[this.currentTab]] || []
|
|
}
|
|
},
|
|
|
|
methods: {
|
|
onTabChange(index) {
|
|
this.currentTab = index
|
|
},
|
|
|
|
useCoupon(coupon) {
|
|
uni.showToast({
|
|
title: '跳转到使用页面',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.discount-container {
|
|
min-height: 100vh;
|
|
background-color: #f8f8f8;
|
|
padding-bottom: 50rpx;
|
|
.coupon-list {
|
|
padding: 40rpx 30rpx;
|
|
|
|
.coupon-item {
|
|
display: flex;
|
|
background-color: #fff;
|
|
border-radius: 24rpx;
|
|
margin-bottom: 24rpx;
|
|
overflow: hidden;
|
|
position: relative;
|
|
padding: 8rpx;
|
|
// box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
|
|
|
|
&.used-coupon,
|
|
&.expired-coupon {
|
|
.coupon-left {
|
|
background-color: #E3E3E3;
|
|
|
|
.coupon-symbol,
|
|
.coupon-amount {
|
|
color: #FBFBFB;
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
|
|
.coupon-left {
|
|
width: 180rpx;
|
|
background-color: #FFF2F2;
|
|
display: flex;
|
|
// flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-radius: 16rpx;
|
|
position: relative;
|
|
.coupon-symbol {
|
|
font-size: 24rpx;
|
|
color: #FF4800;
|
|
font-weight: bold;
|
|
margin-bottom: 10rpx;
|
|
}
|
|
|
|
.coupon-amount {
|
|
font-size: 48rpx;
|
|
color: #FF4800;
|
|
font-weight: 500;
|
|
line-height: 1.4;
|
|
}
|
|
|
|
.status-stamp {
|
|
position: absolute;
|
|
bottom: 0rpx;
|
|
right: 0rpx;
|
|
width: 100rpx;
|
|
height: 100rpx;
|
|
|
|
// opacity: 0.8;
|
|
}
|
|
}
|
|
|
|
.coupon-right {
|
|
flex: 1;
|
|
margin-left: 20rpx;
|
|
padding: 40rpx 30rpx 20rpx;
|
|
position: relative;
|
|
width: 0px;
|
|
|
|
border-left: 2rpx dashed #DADADA;
|
|
.coupon-title {
|
|
font-size: 32rpx;
|
|
color: #181818;
|
|
font-weight: bold;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.coupon-expire {
|
|
font-size: 28rpx;
|
|
color: #9B9B9B;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.coupon-action {
|
|
display: flex;
|
|
justify-content: flex-start;
|
|
|
|
.coupon-status {
|
|
padding: 10rpx 30rpx;
|
|
border-radius: 40rpx;
|
|
font-size: 30rpx;
|
|
text-align: center;
|
|
|
|
&.used-status {
|
|
background-color: #E3E3E3;
|
|
color: #fff;
|
|
}
|
|
|
|
&.expired-status {
|
|
background-color: #E3E3E3;
|
|
color: #fff;
|
|
}
|
|
}
|
|
}
|
|
|
|
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|