98 lines
2.3 KiB
Vue
98 lines
2.3 KiB
Vue
<template>
|
|
<view class="coupon-list-page">
|
|
<custom-navbar title="历史记录" :show-back="true" title-color="#333" background-color="#FFFFFF"
|
|
:showHeadle="false"></custom-navbar>
|
|
|
|
<view class="list-content">
|
|
<!-- 已过期 -->
|
|
<CouponCard
|
|
v-for="item in couponList"
|
|
:key="item.id"
|
|
:coupon="item"
|
|
@action="handleCardAction"
|
|
/>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import CouponCard from './components/couponCard.vue';
|
|
export default {
|
|
components: { CouponCard },
|
|
data() {
|
|
return {
|
|
// 模拟接口数据
|
|
couponList: [
|
|
{
|
|
id: 1,
|
|
amount: 20,
|
|
condition: '满150元可用',
|
|
platform: '平台',
|
|
tag: '新人专享券',
|
|
expiry: '有效期至2025.08.21 10:10',
|
|
status: 'expired' // 已过期
|
|
},
|
|
{
|
|
id: 2,
|
|
amount: 40,
|
|
condition: '满380元可用',
|
|
platform: '平台',
|
|
tag: '新人专享券',
|
|
expiry: '有效期至2025.08.21 10:10',
|
|
status: 'used' // 已使用
|
|
},
|
|
{
|
|
id: 3,
|
|
amount: 330,
|
|
condition: '满5650元可用',
|
|
platform: '平台',
|
|
tag: '新人专享券',
|
|
expiry: '有效期至2025.08.21 10:10',
|
|
status: 'expired', // 立即领取
|
|
isNew: false, // 显示新获取图标
|
|
isExpiringSoon: false // 不显示快过期图标
|
|
},
|
|
{
|
|
id: 4,
|
|
amount: 20,
|
|
condition: '满120元可用',
|
|
platform: '平台',
|
|
tag: '新人专享券',
|
|
expiry: '有效期至2025.08.21 10:10',
|
|
status: 'expired', // 立即使用
|
|
isNew: false, // 不显示新获取图标
|
|
isExpiringSoon: true // 显示快过期图标
|
|
}
|
|
]
|
|
};
|
|
},
|
|
methods: {
|
|
handleCardAction(status) {
|
|
if (status === 'receive') {
|
|
console.log('领取优惠券');
|
|
// 调用领取接口
|
|
} else if (status === 'use') {
|
|
console.log('使用优惠券');
|
|
// 跳转使用页面
|
|
}
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="less">
|
|
/* 页面整体容器 */
|
|
.coupon-list-page {
|
|
background-color: #f8f8f8;
|
|
min-height: 100vh;
|
|
padding: 20rpx 30rpx 20rpx;
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
/* 卡片列表区域 */
|
|
.list-content {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: 20rpx;
|
|
}
|
|
</style> |