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.
289 lines
6.8 KiB
289 lines
6.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 list"
|
|
:key="index"
|
|
class="coupon-item"
|
|
:class="{
|
|
'used-coupon': currentTab === 1,
|
|
'expired-coupon': currentTab === 2
|
|
}"
|
|
>
|
|
<!-- 左侧金额区域 -->
|
|
<view class="coupon-left">
|
|
<text class="coupon-symbol">¥</text>
|
|
<text class="coupon-amount">{{ coupon.money }}</text>
|
|
<!-- 状态盖章 -->
|
|
<image
|
|
v-if="currentTab !== 0"
|
|
class="status-stamp"
|
|
:src="currentTab === 1 ? '/static/used-stamp.png' : '/static/expired-stamp.png'"
|
|
mode="aspectFit"
|
|
></image>
|
|
</view>
|
|
|
|
<!-- 右侧信息区域 -->
|
|
<view class="coupon-right">
|
|
<view class="coupon-title">{{ coupon.name }}</view>
|
|
<view class="coupon-expire">有效期至 {{ coupon.endTime }}</view>
|
|
|
|
<!-- 使用按钮或状态 -->
|
|
<view class="coupon-action">
|
|
<uv-button
|
|
v-if="currentTab === 0"
|
|
:customStyle="buttonStyle"
|
|
text="去使用"
|
|
@click="useCoupon(coupon)"
|
|
></uv-button>
|
|
<view
|
|
v-else
|
|
class="coupon-status"
|
|
:class="{
|
|
'used-status': currentTab === 1,
|
|
'expired-status': currentTab === 2
|
|
}"
|
|
>
|
|
{{ currentTab === 1 ? '已使用' : '已过期' }}
|
|
</view>
|
|
</view>
|
|
|
|
|
|
</view>
|
|
</view>
|
|
|
|
<uv-loading-icon text="加载中" textSize="30rpx" v-if="isLoading"></uv-loading-icon>
|
|
<!-- 空状态 -->
|
|
<uv-empty
|
|
v-else-if="list === 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,
|
|
fromPage: '', // 来源页面标识
|
|
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'
|
|
}
|
|
}
|
|
},
|
|
|
|
onLoad(options) {
|
|
// 接收来源页面参数
|
|
if (options.from) {
|
|
this.fromPage = options.from
|
|
}
|
|
},
|
|
|
|
computed: {
|
|
|
|
},
|
|
|
|
methods: {
|
|
mixinSetParams() {
|
|
return {
|
|
status: String(this.currentTab)
|
|
}
|
|
},
|
|
onTabChange(index) {
|
|
this.currentTab = index
|
|
this.list = []
|
|
this.initPage()
|
|
this.getList(true)
|
|
},
|
|
|
|
useCoupon(coupon) {
|
|
// 如果是从充值页面跳转过来的，选择优惠券后返回
|
|
if (this.fromPage === 'recharge') {
|
|
console.log('被选中了');
|
|
// 通过事件总线传递选中的优惠券数据
|
|
uni.$emit('couponSelected', {
|
|
id: coupon.id,
|
|
name: coupon.name,
|
|
money: coupon.money,
|
|
endTime: coupon.endTime
|
|
})
|
|
|
|
uni.navigateBack()
|
|
} else {
|
|
// 其他情况的处理逻辑
|
|
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>
|