390 lines
8.4 KiB
Vue
390 lines
8.4 KiB
Vue
<template>
|
|
<view class="coupon-page">
|
|
<!-- 标签筛选 -->
|
|
<view class="filter-tabs">
|
|
<view
|
|
v-for="tab in tabs"
|
|
:key="tab.value"
|
|
class="tab-item"
|
|
:class="{ active: currentTab === tab.value }"
|
|
@click="changeTab(tab.value)">
|
|
{{ tab.label }}
|
|
</view>
|
|
</view>
|
|
|
|
<!-- 优惠券列表 -->
|
|
<scroll-view scroll-y class="coupon-list">
|
|
<view class="coupon-item" v-for="coupon in couponList" :key="coupon.id" :class="'status-' + coupon.status">
|
|
<view class="coupon-left">
|
|
<view class="coupon-amount">
|
|
<text class="amount-symbol">¥</text>
|
|
<text class="amount-value">{{ coupon.amount }}</text>
|
|
</view>
|
|
<view class="coupon-condition">满{{ coupon.minAmount }}元可用</view>
|
|
</view>
|
|
|
|
<view class="coupon-right">
|
|
<view class="coupon-name">{{ coupon.name }}</view>
|
|
<view class="coupon-desc">{{ coupon.description }}</view>
|
|
<view class="coupon-time">
|
|
<text class="time-icon">⏰</text>
|
|
<text>{{ coupon.expireTime }}</text>
|
|
</view>
|
|
|
|
<button
|
|
class="btn-use"
|
|
v-if="coupon.status === 1"
|
|
@click="useCoupon(coupon)">
|
|
立即使用
|
|
</button>
|
|
<view class="coupon-status" v-else>
|
|
{{ getStatusText(coupon.status) }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="coupon-tag" v-if="coupon.status !== 1">
|
|
{{ getStatusText(coupon.status) }}
|
|
</view>
|
|
</view>
|
|
|
|
<view class="empty-state" v-if="couponList.length === 0">
|
|
<text class="empty-icon">🎫</text>
|
|
<text class="empty-text">暂无优惠券</text>
|
|
</view>
|
|
</scroll-view>
|
|
|
|
<!-- 兑换按钮 -->
|
|
<view class="bottom-bar">
|
|
<button class="btn-exchange" @click="exchangeCoupon">
|
|
<text class="btn-icon">🎁</text>
|
|
<text>兑换优惠券</text>
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { couponApi } from '@/api/index.js'
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
currentTab: 1,
|
|
tabs: [
|
|
{ label: '未使用', value: 1 },
|
|
{ label: '已使用', value: 2 },
|
|
{ label: '已过期', value: 3 }
|
|
],
|
|
couponList: [
|
|
{
|
|
id: 1,
|
|
name: '新用户专享券',
|
|
amount: 50,
|
|
minAmount: 200,
|
|
description: '适用于所有服务',
|
|
expireTime: '2025-12-31',
|
|
status: 1
|
|
},
|
|
{
|
|
id: 2,
|
|
name: '满减优惠券',
|
|
amount: 100,
|
|
minAmount: 500,
|
|
description: '适用于时卡套餐',
|
|
expireTime: '2025-06-30',
|
|
status: 1
|
|
},
|
|
{
|
|
id: 3,
|
|
name: '体验券',
|
|
amount: 20,
|
|
minAmount: 100,
|
|
description: '首次预约可用',
|
|
expireTime: '2024-12-31',
|
|
status: 3
|
|
}
|
|
]
|
|
}
|
|
},
|
|
|
|
onShow() {
|
|
this.loadCouponList()
|
|
},
|
|
|
|
methods: {
|
|
async loadCouponList() {
|
|
try {
|
|
uni.showLoading({ title: '加载中...' })
|
|
const res = await couponApi.getMyCoupons({ status: this.currentTab })
|
|
if (res && res.code === 200 && res.data) {
|
|
this.couponList = res.data
|
|
}
|
|
} catch (e) {
|
|
console.error('加载优惠券失败', e)
|
|
uni.showToast({
|
|
title: '加载失败',
|
|
icon: 'none'
|
|
})
|
|
} finally {
|
|
uni.hideLoading()
|
|
}
|
|
},
|
|
|
|
changeTab(value) {
|
|
this.currentTab = value
|
|
this.loadCouponList()
|
|
},
|
|
|
|
getStatusText(status) {
|
|
const statusMap = {
|
|
1: '未使用',
|
|
2: '已使用',
|
|
3: '已过期'
|
|
}
|
|
return statusMap[status] || ''
|
|
},
|
|
|
|
useCoupon(coupon) {
|
|
// 服务列表是 tabBar 页面，不支持传参
|
|
// 先保存参数到本地存储
|
|
uni.setStorageSync('serviceListParams', { couponId: coupon.id })
|
|
uni.switchTab({
|
|
url: `/pages/service/list`
|
|
})
|
|
},
|
|
|
|
exchangeCoupon() {
|
|
uni.showModal({
|
|
title: '兑换优惠券',
|
|
editable: true,
|
|
placeholderText: '请输入兑换码',
|
|
success: async (res) => {
|
|
if (res.confirm && res.content) {
|
|
try {
|
|
uni.showLoading({ title: '兑换中...' })
|
|
const result = await couponApi.receiveCoupon(res.content)
|
|
uni.hideLoading()
|
|
|
|
if (result && result.code === 200) {
|
|
uni.showToast({
|
|
title: '兑换成功',
|
|
icon: 'success'
|
|
})
|
|
this.loadCouponList()
|
|
}
|
|
} catch (e) {
|
|
uni.hideLoading()
|
|
uni.showToast({
|
|
title: e.message || '兑换失败',
|
|
icon: 'none'
|
|
})
|
|
}
|
|
}
|
|
}
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
$primary-green: #5fc9ba;
|
|
$white: #fff;
|
|
$black: #333;
|
|
$gray: #999;
|
|
$light-gray: #f5f5f5;
|
|
|
|
.coupon-page {
|
|
min-height: 100vh;
|
|
background: $light-gray;
|
|
display: flex;
|
|
flex-direction: column;
|
|
}
|
|
|
|
.filter-tabs {
|
|
display: flex;
|
|
background: $white;
|
|
padding: 20rpx 30rpx;
|
|
|
|
.tab-item {
|
|
flex: 1;
|
|
text-align: center;
|
|
padding: 16rpx 0;
|
|
font-size: 28rpx;
|
|
color: #666;
|
|
border-radius: 8rpx;
|
|
transition: all 0.3s;
|
|
|
|
&.active {
|
|
color: $primary-green;
|
|
background: rgba(95, 201, 186, 0.1);
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
}
|
|
|
|
.coupon-list {
|
|
flex: 1;
|
|
padding: 20rpx 30rpx 140rpx;
|
|
}
|
|
|
|
.coupon-item {
|
|
position: relative;
|
|
background: $white;
|
|
border-radius: 16rpx;
|
|
padding: 30rpx;
|
|
margin-bottom: 20rpx;
|
|
display: flex;
|
|
gap: 30rpx;
|
|
overflow: hidden;
|
|
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);
|
|
|
|
&.status-2,
|
|
&.status-3 {
|
|
opacity: 0.6;
|
|
}
|
|
|
|
.coupon-left {
|
|
width: 180rpx;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
border-right: 2rpx dashed #ddd;
|
|
padding-right: 30rpx;
|
|
|
|
.coupon-amount {
|
|
display: flex;
|
|
align-items: baseline;
|
|
margin-bottom: 12rpx;
|
|
|
|
.amount-symbol {
|
|
font-size: 32rpx;
|
|
color: $primary-green;
|
|
font-weight: bold;
|
|
}
|
|
|
|
.amount-value {
|
|
font-size: 56rpx;
|
|
color: $primary-green;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.coupon-condition {
|
|
font-size: 22rpx;
|
|
color: $gray;
|
|
}
|
|
}
|
|
|
|
.coupon-right {
|
|
flex: 1;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.coupon-name {
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: $black;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.coupon-desc {
|
|
font-size: 24rpx;
|
|
color: $gray;
|
|
margin-bottom: 12rpx;
|
|
}
|
|
|
|
.coupon-time {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: 8rpx;
|
|
font-size: 22rpx;
|
|
color: $gray;
|
|
margin-bottom: 16rpx;
|
|
|
|
.time-icon {
|
|
font-size: 20rpx;
|
|
}
|
|
}
|
|
|
|
.btn-use {
|
|
width: 160rpx;
|
|
height: 56rpx;
|
|
background: $primary-green;
|
|
color: $white;
|
|
border-radius: 28rpx;
|
|
font-size: 24rpx;
|
|
font-weight: bold;
|
|
align-self: flex-end;
|
|
}
|
|
|
|
.coupon-status {
|
|
font-size: 24rpx;
|
|
color: $gray;
|
|
text-align: right;
|
|
}
|
|
}
|
|
|
|
.coupon-tag {
|
|
position: absolute;
|
|
top: 20rpx;
|
|
right: -40rpx;
|
|
width: 160rpx;
|
|
height: 48rpx;
|
|
line-height: 48rpx;
|
|
text-align: center;
|
|
background: rgba(0, 0, 0, 0.5);
|
|
color: $white;
|
|
font-size: 22rpx;
|
|
transform: rotate(45deg);
|
|
}
|
|
}
|
|
|
|
.empty-state {
|
|
text-align: center;
|
|
padding: 120rpx 0;
|
|
|
|
.empty-icon {
|
|
display: block;
|
|
font-size: 120rpx;
|
|
margin-bottom: 30rpx;
|
|
opacity: 0.3;
|
|
}
|
|
|
|
.empty-text {
|
|
font-size: 28rpx;
|
|
color: $gray;
|
|
}
|
|
}
|
|
|
|
.bottom-bar {
|
|
position: fixed;
|
|
bottom: 0;
|
|
left: 0;
|
|
right: 0;
|
|
background: $white;
|
|
padding: 20rpx 30rpx;
|
|
padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
|
|
box-shadow: 0 -4rpx 12rpx rgba(0, 0, 0, 0.08);
|
|
|
|
.btn-exchange {
|
|
width: 100%;
|
|
height: 88rpx;
|
|
background: $primary-green;
|
|
color: $white;
|
|
border-radius: 44rpx;
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
gap: 12rpx;
|
|
|
|
.btn-icon {
|
|
font-size: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
</style>
|