552 lines
15 KiB
Vue
552 lines
15 KiB
Vue
<template>
|
||
<view class="content">
|
||
<!-- 顶部渐变背景（作为固定区域的背景） -->
|
||
<view class="fixed-top-bg"></view>
|
||
|
||
<!-- 固定在顶部的区域：导航栏 + 标签栏 -->
|
||
<view class="fixed-top-container">
|
||
<!-- 导航栏 -->
|
||
<view class="nav-bar">
|
||
<view class="nav-bar-l" @click="goBack">
|
||
<image class="nav-bar-l-img"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/a52cd5ad-a26f-4426-ad59-e2d481fe0e92.png"
|
||
mode="widthFix"></image>
|
||
</view>
|
||
<view class="nav-bar-c">
|
||
<view class="nav-bar-c-text">我的优惠券</view>
|
||
</view>
|
||
<view class="nav-bar-r">
|
||
<view class="nav-bar-r-text" @click="gotoCouponHistory()">历史记录</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="coupon-title">
|
||
<view class="coupon-tab" @click="selectd(0)">
|
||
<view class="coupon-tab-text" :class="{ active: isselect === 0 }">全部优惠券</view>
|
||
<image class="tab-line-img" v-if="isselect === 0"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b304a532-2c5d-467b-b7f7-f30f58cdc7ec.png">
|
||
</image>
|
||
</view>
|
||
<view class="coupon-tab" @click="selectd(1)">
|
||
<view class="coupon-tab-text" :class="{ active: isselect === 1 }">即将到期</view>
|
||
<image class="tab-line-img" v-if="isselect === 1"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/b304a532-2c5d-467b-b7f7-f30f58cdc7ec.png">
|
||
</image>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
|
||
<view class="list-coupon-container">
|
||
<!-- 已领取的优惠券 -->
|
||
<view class="list-coupon" v-if="isselectd && !timesout">
|
||
<!-- 已领取标题 -->
|
||
<view class="collectd-title">
|
||
<image class="collectd-title-icon"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/71c747be-b80c-496e-aeab-821a7dddcfc2.png"
|
||
mode="widthFix"></image>
|
||
<view class="collectd-title-text">已领取的优惠券</view>
|
||
</view>
|
||
|
||
<!-- 空状态提示 -->
|
||
<view v-if="filterCollectedList.length === 0" class="empty-tip">
|
||
<view class="empty-text">暂无已领取的优惠券</view>
|
||
</view>
|
||
|
||
<!-- 已领取优惠券卡片列表（使用组件） -->
|
||
<CouponCard v-for="(item, index) in showCollectedList" :key="'collected-' + index" :coupon="item"
|
||
@action="(status) => handleAvailableAction(status, item)" />
|
||
|
||
<!-- 展开/收起按钮（仅已领取优惠券使用） -->
|
||
<view v-if="filterCollectedList.length > 4" class="expand-btn" @click="toggleExpand">
|
||
<view class="expand-text">{{ isExpanded ? '收起全部' : '展开全部' }}</view>
|
||
<image class="expand-icon"
|
||
:src="isExpanded ? 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/fe418cfb-99c5-43ca-8ffd-5c656fb1cd06.png' : 'https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/169e99f5-8181-43d9-b290-f0526690ff83.png'"
|
||
mode="widthFix"></image>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 更多可领优惠券（无展开/收起） -->
|
||
<view class="list-coupon" v-if="!timesout">
|
||
<!-- 可领取标题 -->
|
||
<view class="collectd-title">
|
||
<image class="collectd-title-icon"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/71c747be-b80c-496e-aeab-821a7dddcfc2.png"
|
||
mode="widthFix"></image>
|
||
<view class="collectd-title-text">更多可领优惠券</view>
|
||
</view>
|
||
|
||
<!-- 空状态提示 -->
|
||
<view v-if="availableCouponList.length === 0" class="empty-tip">
|
||
<view class="empty-text">暂无可领取的优惠券</view>
|
||
</view>
|
||
|
||
<!-- 可领取优惠券卡片列表（使用组件） -->
|
||
<CouponCard v-for="(item, index) in formattedAvailableList" :key="'available-' + index" :coupon="item"
|
||
@action="(status) => handleAvailableAction(status, item)" />
|
||
</view>
|
||
<view class="no-data" v-if="collectedCouponList.length<0">
|
||
<image class="no-data-img"
|
||
src="https://mrrplus.oss-cn-beijing.aliyuncs.com/photo/system/035b7613-338b-4a71-9975-291cec794f89.png"
|
||
mode="widthFix"></image>
|
||
</view>
|
||
<view class="daoqi" v-if="isselect==1">
|
||
<CouponCard class="daoqi-list" v-for="(item, index) in formattedAvailableLis"
|
||
:key="'available-' + index" :coupon="item"
|
||
@action="(status) => handleAvailableAction(status, item)" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import CouponCard from './components/couponCard.vue';
|
||
|
||
export default {
|
||
components: {
|
||
CouponCard
|
||
},
|
||
data() {
|
||
return {
|
||
timesout: false,
|
||
statusBarHeight: 0,
|
||
isselectd: true,
|
||
isselect: 0, // 默认选中全部优惠券
|
||
isExpanded: false, // 已领取优惠券是否展开
|
||
// 已领取优惠券列表
|
||
collectedCouponList: [{
|
||
denomination: 20,
|
||
condition: '满150元可用',
|
||
name: '平台|新人专享券',
|
||
expireTime: '有效期至2025.08.21 10:10',
|
||
tagType: 'new',
|
||
status: 'available'
|
||
},
|
||
{
|
||
denomination: 45,
|
||
condition: '满300元可用',
|
||
name: '平台|新人专享券',
|
||
expireTime: '有效期至2025.08.21 10:10',
|
||
tagType: 'new',
|
||
status: 'available'
|
||
},
|
||
{
|
||
denomination: 330,
|
||
condition: '满5650元可用',
|
||
name: '平台|新人专享券',
|
||
expireTime: '有效期至2025.08.21 10:10',
|
||
tagType: 'soon',
|
||
status: 'available'
|
||
},
|
||
{
|
||
denomination: 20,
|
||
condition: '满150元可用',
|
||
name: '平台|新人专享券',
|
||
expireTime: '有效期至2025.04.21 23:10',
|
||
tagType: 'expire',
|
||
status: 'available'
|
||
},
|
||
{
|
||
denomination: 10,
|
||
condition: '满99元可用',
|
||
name: '平台|满减券',
|
||
expireTime: '有效期至2025.09.10 23:59',
|
||
tagType: 'new',
|
||
status: 'available'
|
||
},
|
||
{
|
||
denomination: 50,
|
||
condition: '满500元可用',
|
||
name: '平台|满减券',
|
||
expireTime: '有效期至2025.08.30 12:00',
|
||
tagType: 'new',
|
||
status: 'available'
|
||
}
|
||
],
|
||
// 更多可领优惠券列表
|
||
availableCouponList: [{
|
||
denomination: 20,
|
||
condition: '满150元可用',
|
||
name: '平台|新人专享券',
|
||
expireTime: '有效期至2025.08.21 10:10',
|
||
tagType: 'new' // 用于图标
|
||
},
|
||
{
|
||
denomination: 330,
|
||
condition: '满5650元可用',
|
||
name: '平台|新人专享券',
|
||
expireTime: '有效期至2025.08.21 10:10',
|
||
tagType: 'new'
|
||
},
|
||
{
|
||
denomination: 888,
|
||
condition: '满9999元可用',
|
||
name: '平台|新人专享券',
|
||
expireTime: '有效期至2025.08.21 10:10',
|
||
tagType: 'new'
|
||
}
|
||
],
|
||
timeoutdatalist: [{
|
||
denomination: 20,
|
||
condition: '满150元可用',
|
||
name: '平台|新人专享券',
|
||
expireTime: '还剩09:59:59过期',
|
||
tagType: 'new' // 用于图标
|
||
},
|
||
{
|
||
denomination: 20,
|
||
condition: '满150元可用',
|
||
name: '平台|新人专享券',
|
||
expireTime: '还剩09:59:59过期',
|
||
tagType: 'new' // 用于图标
|
||
},
|
||
{
|
||
denomination: 20,
|
||
condition: '满150元可用',
|
||
name: '平台|新人专享券',
|
||
expireTime: '还剩09:59:59过期',
|
||
tagType: 'expired' // 用于图标
|
||
},
|
||
]
|
||
}
|
||
},
|
||
computed: {
|
||
// 已领取优惠券筛选后列表（根据标签）
|
||
filterCollectedList() {
|
||
if (this.isselect === 0) {
|
||
return this.collectedCouponList
|
||
} else {
|
||
// 即将到期逻辑交由后端处理，这里暂时返回空（可根据后端返回字段调整）
|
||
return []
|
||
}
|
||
},
|
||
// 已领取优惠券实际展示列表：默认前4个，展开后显示全部
|
||
showCollectedList() {
|
||
const list = this.filterCollectedList
|
||
const rawList = this.isExpanded ? list : list.slice(0, 4)
|
||
// 映射为组件所需格式
|
||
return rawList.map(item => this.formatCollectedCoupon(item))
|
||
},
|
||
// 可领取列表映射为组件格式
|
||
formattedAvailableList() {
|
||
return this.availableCouponList.map(item => this.formatAvailableCoupon(item))
|
||
},
|
||
formattedAvailableLis() {
|
||
return this.timeoutdatalist.map(item => this.formatAvailableCoupon(item))
|
||
},
|
||
|
||
},
|
||
methods: {
|
||
// 将已领取优惠券原始数据转换为组件 coupon 对象
|
||
formatCollectedCoupon(item) {
|
||
const [platform, tag] = item.name.split('|')
|
||
let status = ''
|
||
if (item.status === 'available') status = 'use'
|
||
else if (item.status === 'expired') status = 'expired'
|
||
else if (item.status === 'used') status = 'used'
|
||
else status = 'use' // 默认
|
||
|
||
return {
|
||
amount: item.denomination,
|
||
condition: item.condition,
|
||
platform: platform || '平台',
|
||
tag: tag || '优惠券',
|
||
expiry: item.expireTime,
|
||
status: status,
|
||
isNew: item.tagType === 'new',
|
||
isExpiringSoon: item.tagType === 'soon' || item.tagType === 'expire'
|
||
}
|
||
},
|
||
// 将可领取优惠券原始数据转换为组件 coupon 对象
|
||
formatAvailableCoupon(item) {
|
||
const [platform, tag] = item.name.split('|')
|
||
return {
|
||
amount: item.denomination,
|
||
condition: item.condition,
|
||
platform: platform || '平台',
|
||
tag: tag || '优惠券',
|
||
expiry: item.expireTime,
|
||
status: 'receive', // 可领取
|
||
isNew: item.tagType === 'new', // 根据需要设置，默认 true 也可以
|
||
isExpiringSoon: false
|
||
}
|
||
},
|
||
// 处理已领取卡片的点击（立即使用/已过期/已使用）
|
||
handleAvailableAction(status, clickedItem) {
|
||
if (status === 'receive') {
|
||
console.log('领取优惠券', clickedItem);
|
||
uni.showToast({
|
||
title: '领取成功',
|
||
icon: 'success'
|
||
});
|
||
const originItem = this.availableCouponList.find(item =>
|
||
item.denomination === clickedItem.amount &&
|
||
item.condition === clickedItem.condition &&
|
||
item.name === `${clickedItem.platform}|${clickedItem.tag}`
|
||
);
|
||
|
||
if (originItem) {
|
||
const index = this.availableCouponList.indexOf(originItem);
|
||
this.availableCouponList.splice(index, 1);
|
||
this.collectedCouponList.unshift({
|
||
...originItem,
|
||
tagType: 'new', // 标记为新领取
|
||
status: 'available'
|
||
});
|
||
}
|
||
} else if (status === 'use') {
|
||
console.log('使用优惠券', clickedItem);
|
||
uni.navigateTo({
|
||
url: '/pages/coupon/couponDetail'
|
||
});
|
||
}
|
||
},
|
||
toggleExpand() {
|
||
this.isExpanded = !this.isExpanded
|
||
},
|
||
selectd(i) {
|
||
this.isselect = i
|
||
console.log(this.isselect, '选中项');
|
||
// 切换标签时重置为收起状态
|
||
// this.isExpanded = false
|
||
// this.isselectd=false
|
||
if (i == 1) {
|
||
this.timesout = true
|
||
} else {
|
||
this.timesout = false
|
||
}
|
||
},
|
||
gotoCouponHistory() {
|
||
uni.navigateTo({
|
||
url: '/pages/coupon/couponHistory',
|
||
fail(err) {
|
||
console.error('跳转失败', err)
|
||
}
|
||
})
|
||
},
|
||
goBack() {
|
||
uni.navigateBack({
|
||
delta: 1
|
||
})
|
||
},
|
||
},
|
||
onLoad() {
|
||
// 移除定时器启动逻辑
|
||
},
|
||
onUnload() {},
|
||
onHide() {
|
||
// 移除定时器暂停逻辑
|
||
},
|
||
onShow() {
|
||
const systemInfo = uni.getWindowInfo()
|
||
const statusBarHeight = systemInfo.statusBarHeight;
|
||
this.statusBarHeight = statusBarHeight
|
||
console.log('刘海/状态栏高度：', statusBarHeight + 'px');
|
||
|
||
},
|
||
onPullDownRefresh() {
|
||
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style scoped>
|
||
.nav-bar-l {
|
||
margin-top: 200rpx;
|
||
}
|
||
|
||
/* 全局容器 */
|
||
.content {
|
||
position: relative;
|
||
width: 750rpx;
|
||
min-height: 100vh;
|
||
background-color: #f5f5f5;
|
||
/* 预留固定区域高度，避免内容被遮挡 */
|
||
padding-top: 200rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 固定区域的渐变背景（和原背景样式一致） */
|
||
.fixed-top-bg {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 99;
|
||
width: 750rpx;
|
||
height: 260rpx;
|
||
background: linear-gradient(180deg, #FFEAE6 0%, #FFFBF9 100%);
|
||
}
|
||
|
||
/* 固定在顶部的容器：导航栏+标签栏 */
|
||
.fixed-top-container {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
z-index: 100;
|
||
width: 750rpx;
|
||
height: 200rpx;
|
||
padding: 0 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 导航栏样式 */
|
||
.nav-bar {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
padding-top: 60rpx;
|
||
/* 适配状态栏高度 */
|
||
height: 140rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.nav-bar-l-img {
|
||
width: 18rpx;
|
||
height: 35.74rpx;
|
||
}
|
||
|
||
.nav-bar-c {
|
||
margin-left: 24rpx;
|
||
margin-bottom: 5rpx;
|
||
}
|
||
|
||
.nav-bar-c-text {
|
||
font-family: AlimamaShuHeiTi, AlimamaShuHeiTi;
|
||
font-weight: bold;
|
||
font-size: 40rpx;
|
||
color: #000000;
|
||
}
|
||
|
||
.nav-bar-r {
|
||
margin-left: auto;
|
||
margin-bottom: 8rpx;
|
||
}
|
||
|
||
.nav-bar-r-text {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-size: 30rpx;
|
||
color: #666666;
|
||
}
|
||
|
||
.list-coupon .coupon-card {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
/* 标签栏样式 */
|
||
.coupon-title {
|
||
display: flex;
|
||
height: 60rpx;
|
||
align-items: center;
|
||
margin-top: 37rpx;
|
||
}
|
||
|
||
.coupon-tab {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-right: 40rpx;
|
||
}
|
||
|
||
.coupon-tab-text {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-size: 30rpx;
|
||
color: #666666;
|
||
margin-bottom: 8rpx;
|
||
width: 150rpx;
|
||
text-align: center;
|
||
}
|
||
|
||
.coupon-tab-text.active {
|
||
font-weight: 600;
|
||
color: #333333;
|
||
}
|
||
|
||
.tab-line-img {
|
||
width: 53rpx;
|
||
height: 6rpx;
|
||
}
|
||
|
||
/* 优惠券列表外层容器 */
|
||
.list-coupon-container {
|
||
position: relative;
|
||
z-index: 2;
|
||
margin-top: 50rpx;
|
||
}
|
||
|
||
/* 优惠券列表容器（复用样式） */
|
||
.list-coupon {
|
||
width: 750rpx;
|
||
background: #FFFFFF;
|
||
border-radius: 40rpx;
|
||
margin-bottom: 10rpx;
|
||
margin-top: 10rpx;
|
||
padding: 30rpx;
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
/* 空状态样式 */
|
||
.empty-tip {
|
||
text-align: center;
|
||
padding: 60rpx 0;
|
||
color: #999;
|
||
font-size: 28rpx;
|
||
}
|
||
|
||
.empty-text {
|
||
font-size: 28rpx;
|
||
color: #999999;
|
||
}
|
||
|
||
/* 标题样式 */
|
||
.collectd-title {
|
||
display: flex;
|
||
align-items: center;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.collectd-title-icon {
|
||
width: 41rpx;
|
||
margin-right: 8rpx;
|
||
}
|
||
|
||
.collectd-title-text {
|
||
font-family: PingFangSC, PingFang SC;
|
||
font-weight: 500;
|
||
font-size: 28rpx;
|
||
color: #333333;
|
||
}
|
||
|
||
/* 展开/收起按钮 */
|
||
.expand-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
margin: 0 auto;
|
||
padding: 12rpx 45rpx 12rpx 20rpx;
|
||
border: 1rpx solid #eee;
|
||
border-radius: 40rpx;
|
||
width: 161rpx;
|
||
}
|
||
|
||
.expand-text {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
margin-right: 10rpx;
|
||
}
|
||
|
||
.expand-icon {
|
||
width: 30rpx;
|
||
height: 30rpx;
|
||
}
|
||
|
||
.no-data-img {
|
||
width: 430rpx;
|
||
margin: 299rpx 0 0 160rpx;
|
||
}
|
||
|
||
.daoqi {
|
||
margin: 80rpx 0 0rpx 30rpx;
|
||
}
|
||
|
||
.daoqi-list {
|
||
margin-bottom: 20rpx;
|
||
}
|
||
</style> |