401 lines
7.8 KiB
Plaintext
401 lines
7.8 KiB
Plaintext
<template>
|
|
<view class="coupon-page">
|
|
<!-- 沉浸式状态栏 -->
|
|
<view class="status-bar"></view>
|
|
|
|
<!-- 顶部导航 -->
|
|
<view class="nav-bar">
|
|
<image class="back-icon" src="/static/icons/back.svg" @click="goBack" mode="aspectFit" />
|
|
<text class="nav-title">优惠券</text>
|
|
<view class="nav-placeholder"></view>
|
|
</view>
|
|
|
|
<!-- Tab 切换 - 简约文字Tab -->
|
|
<view class="tab-bar">
|
|
<view
|
|
v-for="(tab, index) in tabs"
|
|
:key="index"
|
|
class="tab-item"
|
|
:class="{ active: currentTab === tab.value }"
|
|
@click="switchTab(tab.value)"
|
|
>
|
|
<text class="tab-text">{{ tab.label }}</text>
|
|
<text v-if="tab.count > 0" class="tab-count">({{ tab.count }})</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 优惠券列表 - 简约卡片 -->
|
|
<view class="coupon-list">
|
|
<view
|
|
v-for="coupon in coupons"
|
|
:key="coupon.id"
|
|
class="coupon-card"
|
|
:class="`coupon-${coupon.status}`"
|
|
>
|
|
<!-- 左侧金额 -->
|
|
<view class="coupon-left">
|
|
<view v-if="coupon.type === 'discount'" class="coupon-amount">
|
|
<text class="amount-number">{{ coupon.discount }}</text>
|
|
<text class="amount-unit">折</text>
|
|
</view>
|
|
<view v-else-if="coupon.type === 'reduction'" class="coupon-amount">
|
|
<text class="amount-symbol">¥</text>
|
|
<text class="amount-number">{{ coupon.discount }}</text>
|
|
</view>
|
|
<view v-else class="coupon-amount">
|
|
<text class="amount-gift">礼品</text>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 分割线 -->
|
|
<view class="coupon-divider">
|
|
<view class="divider-circle top"></view>
|
|
<view class="divider-line"></view>
|
|
<view class="divider-circle bottom"></view>
|
|
</view>
|
|
|
|
<!-- 右侧信息 -->
|
|
<view class="coupon-right">
|
|
<view class="coupon-title">{{ coupon.title }}</view>
|
|
<view class="coupon-condition">
|
|
<text v-if="coupon.minAmount > 0">满{{ coupon.minAmount }}元可用</text>
|
|
<text v-else>无门槛</text>
|
|
</view>
|
|
<view class="coupon-expire">有效期至 {{ coupon.expireDate }}</view>
|
|
|
|
<!-- 状态标识 -->
|
|
<view v-if="coupon.status === 'used'" class="coupon-status used">
|
|
<text>已使用</text>
|
|
</view>
|
|
<view v-else-if="coupon.status === 'expired'" class="coupon-status expired">
|
|
<text>已过期</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 空状态 -->
|
|
<view v-if="coupons.length === 0" class="empty">
|
|
<text class="empty-text">{{ emptyText }}</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { onShow, onLoad } from "@dcloudio/uni-app";
|
|
import { Service } from "@/Service/Service"
|
|
import { ref } from "vue";
|
|
// import { getCouponList } from '@/api/index.js'
|
|
|
|
// 数据
|
|
const currentTab = ref('unused')
|
|
const coupons = ref([])
|
|
|
|
const tabs = ref([
|
|
{ label: '未使用', value: 'unused', count: 0 },
|
|
{ label: '已使用', value: 'used', count: 0 },
|
|
{ label: '已过期', value: 'expired', count: 0 }
|
|
])
|
|
|
|
// 空状态文本
|
|
const emptyText = computed(() => {
|
|
const textMap = {
|
|
unused: '暂无可用优惠券',
|
|
used: '暂无已使用的优惠券',
|
|
expired: '暂无已过期的优惠券'
|
|
}
|
|
return textMap[currentTab.value]
|
|
})
|
|
|
|
// 获取优惠券列表
|
|
const fetchCoupons = async () => {
|
|
// const res = await getCouponList(currentTab.value)
|
|
// if (res.code === 200) {
|
|
// coupons.value = res.data
|
|
// }
|
|
}
|
|
|
|
// 更新各状态数量
|
|
const updateCounts = async () => {
|
|
// const statuses = ['unused', 'used', 'expired']
|
|
// for (const status of statuses) {
|
|
// const res = await getCouponList(status)
|
|
// if (res.code === 200) {
|
|
// const tab = tabs.value.find(t => t.value === status)
|
|
// if (tab) {
|
|
// tab.count = res.data.length
|
|
// }
|
|
// }
|
|
// }
|
|
}
|
|
|
|
// 切换Tab
|
|
const switchTab = (value) => {
|
|
currentTab.value = value
|
|
fetchCoupons()
|
|
}
|
|
|
|
// 返回我的页面
|
|
const goBack = () => {
|
|
Service.GoPage()
|
|
}
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.coupon-page {
|
|
min-height: 100vh;
|
|
background-color: #F5F5F5;
|
|
}
|
|
|
|
/* 状态栏 */
|
|
.status-bar {
|
|
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
|
height: var(--status-bar-height);
|
|
width: 100%;
|
|
}
|
|
|
|
/* 导航栏 */
|
|
.nav-bar {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
padding: 60rpx 24rpx 20rpx 24rpx;
|
|
background: linear-gradient(135deg, #FF6B00, #FF9500);
|
|
}
|
|
|
|
.back-icon {
|
|
width: 48rpx;
|
|
height: 48rpx;
|
|
padding: 8rpx;
|
|
}
|
|
|
|
.nav-title {
|
|
font-size: 36rpx;
|
|
font-weight: 600;
|
|
color: #FFFFFF;
|
|
}
|
|
|
|
.nav-placeholder {
|
|
width: 48rpx;
|
|
}
|
|
|
|
/* Tab栏 - 简约文字Tab */
|
|
.tab-bar {
|
|
display: flex;
|
|
background: #FFFFFF;
|
|
padding: 20rpx 20rpx 0;
|
|
border-bottom: 1rpx solid #E5E5E5;
|
|
}
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding-bottom: 20rpx;
|
|
position: relative;
|
|
}
|
|
|
|
.tab-item.active .tab-text {
|
|
color: #222;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.tab-item.active::after {
|
|
content: '';
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
width: 32rpx;
|
|
height: 4rpx;
|
|
background: #FF6B00;
|
|
border-radius: 2rpx;
|
|
}
|
|
|
|
.tab-text {
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
}
|
|
|
|
.tab-count {
|
|
font-size: 24rpx;
|
|
color: inherit;
|
|
margin-left: 4rpx;
|
|
}
|
|
|
|
/* 优惠券列表 */
|
|
.coupon-list {
|
|
padding: 20rpx;
|
|
}
|
|
|
|
.coupon-card {
|
|
background: #FFFFFF;
|
|
border-radius: 12rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
overflow: hidden;
|
|
}
|
|
|
|
/* 未使用 - 橙色边框 */
|
|
.coupon-unused {
|
|
border: 2rpx solid #FF6B00;
|
|
}
|
|
|
|
/* 已使用 - 灰色 */
|
|
.coupon-used {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* 已过期 - 灰色 */
|
|
.coupon-expired {
|
|
opacity: 0.5;
|
|
}
|
|
|
|
/* 左侧金额区 */
|
|
.coupon-left {
|
|
flex-shrink: 0;
|
|
width: 200rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: linear-gradient(135deg, #FFF4E6, #FFE0B2);
|
|
padding: 32rpx 20rpx;
|
|
}
|
|
|
|
.coupon-amount {
|
|
display: flex;
|
|
align-items: baseline;
|
|
}
|
|
|
|
.amount-symbol {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
.amount-number {
|
|
font-size: 56rpx;
|
|
font-weight: 600;
|
|
color: #FF6B00;
|
|
line-height: 1;
|
|
}
|
|
|
|
.amount-unit {
|
|
font-size: 24rpx;
|
|
font-weight: 500;
|
|
color: #FF6B00;
|
|
margin-left: 4rpx;
|
|
}
|
|
|
|
.amount-gift {
|
|
font-size: 28rpx;
|
|
font-weight: 600;
|
|
color: #FF6B00;
|
|
}
|
|
|
|
/* 分割线 */
|
|
.coupon-divider {
|
|
position: relative;
|
|
width: 4rpx;
|
|
background: #F5F5F5;
|
|
}
|
|
|
|
.divider-circle {
|
|
position: absolute;
|
|
width: 20rpx;
|
|
height: 20rpx;
|
|
background: #F5F5F5;
|
|
border-radius: 50%;
|
|
left: 50%;
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
.divider-circle.top {
|
|
top: -10rpx;
|
|
}
|
|
|
|
.divider-circle.bottom {
|
|
bottom: -10rpx;
|
|
}
|
|
|
|
.divider-line {
|
|
position: absolute;
|
|
top: 10rpx;
|
|
bottom: 10rpx;
|
|
left: 50%;
|
|
width: 2rpx;
|
|
background: repeating-linear-gradient(
|
|
to bottom,
|
|
#F5F5F5 0rpx,
|
|
#F5F5F5 6rpx,
|
|
transparent 6rpx,
|
|
transparent 12rpx
|
|
);
|
|
transform: translateX(-50%);
|
|
}
|
|
|
|
/* 右侧信息 */
|
|
.coupon-right {
|
|
flex: 1;
|
|
padding: 24rpx 20rpx;
|
|
position: relative;
|
|
display: flex;
|
|
flex-direction: column;
|
|
justify-content: space-between;
|
|
}
|
|
|
|
.coupon-title {
|
|
font-size: 30rpx;
|
|
font-weight: 600;
|
|
color: #222;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.coupon-condition {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.coupon-expire {
|
|
font-size: 22rpx;
|
|
color: #999;
|
|
}
|
|
|
|
/* 状态标识 */
|
|
.coupon-status {
|
|
position: absolute;
|
|
top: 50%;
|
|
right: 20rpx;
|
|
transform: translateY(-50%);
|
|
}
|
|
|
|
.coupon-status text {
|
|
font-size: 24rpx;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.coupon-status.used text {
|
|
color: #999;
|
|
}
|
|
|
|
.coupon-status.expired text {
|
|
color: #999;
|
|
}
|
|
|
|
/* 空状态 */
|
|
.empty {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 120rpx 0;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 26rpx;
|
|
color: #999;
|
|
}
|
|
</style>
|