|
|
@@ -0,0 +1,480 @@
|
|
|
+<template>
|
|
|
+ <!-- 优惠券页面 -->
|
|
|
+ <view class="page">
|
|
|
+
|
|
|
+ <!-- 标签页 -->
|
|
|
+ <view class="tabs">
|
|
|
+ <view v-for="(tab, index) in tabs" :key="index"
|
|
|
+ :class="['tab-item', { 'tab-item--active': currentTab === index }]" @click="handleTabChange(index)">
|
|
|
+ {{ tab }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 优惠券列表 -->
|
|
|
+ <scroll-view class="content" scroll-y>
|
|
|
+ <view class="coupon-list" v-if="filteredCoupons.length > 0">
|
|
|
+ <view v-for="(coupon, index) in filteredCoupons" :key="coupon.id || index"
|
|
|
+ :class="['coupon-card', getCouponCardClass(coupon)]">
|
|
|
+ <image :src="getFileUrl('img/personal/coupon.png')" mode="widthFix" class="coupon-card-bg"></image>
|
|
|
+ <image :src="getFileUrl('img/personal/couponLeft.png')" mode="heightFix" class="coupon-card-bgLeft"></image>
|
|
|
+ <view class="coupon-card-content">
|
|
|
+ <!-- 左侧金额区域 -->
|
|
|
+ <view class="coupon-card__left">
|
|
|
+ <view class="amount-wrapper">
|
|
|
+ <text class="amount-number">{{ coupon.amount }}</text>
|
|
|
+ <text class="amount-unit">元</text>
|
|
|
+ </view>
|
|
|
+ <text class="condition-text">满{{ coupon.minAmount }}可用</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 右侧信息区域 -->
|
|
|
+ <view class="coupon-card__right">
|
|
|
+ <view class="coupon-info">
|
|
|
+ <text class="coupon-name">{{ coupon.name }}</text>
|
|
|
+ <view class="coupon-rules" @click="handleShowRules(coupon)">
|
|
|
+ 使用规则
|
|
|
+ <text class="arrow">›</text>
|
|
|
+ </view>
|
|
|
+ <text class="coupon-expire">{{ coupon.expireDate }}到期</text>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 操作按钮 -->
|
|
|
+ <view class="coupon-action">
|
|
|
+ <view v-if="coupon.status === 0" class="action-btn action-btn--use" hover-class="hover-active"
|
|
|
+ @click="handleUseCoupon(coupon)">
|
|
|
+ 去使用
|
|
|
+ </view>
|
|
|
+ <view v-else-if="coupon.status === 1" class="action-btn action-btn--use" hover-class="hover-active"
|
|
|
+ @click="handleUseCoupon(coupon)">
|
|
|
+ 去使用
|
|
|
+ </view>
|
|
|
+ <view v-else-if="coupon.status === 2" class="status-text status-text--used">
|
|
|
+ 已使用
|
|
|
+ </view>
|
|
|
+ <view v-else class="status-text status-text--expired">
|
|
|
+ 已过期
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 空状态 -->
|
|
|
+ <view class="empty-state" v-else>
|
|
|
+ <image :src="getFileUrl('img/icon/noCoupon.png')" mode="widthFix" class="empty-icon"></image>
|
|
|
+ <text class="empty-text">暂无优惠券</text>
|
|
|
+ </view>
|
|
|
+ </scroll-view>
|
|
|
+
|
|
|
+ <!-- 使用规则弹窗 -->
|
|
|
+ <RulesModal v-model:open="showRulesModal" :couponData="selectedCoupon" @use="handleUseCoupon" />
|
|
|
+ </view>
|
|
|
+</template>
|
|
|
+
|
|
|
+<script setup>
|
|
|
+import { onLoad } from "@dcloudio/uni-app";
|
|
|
+import { ref, computed } from "vue";
|
|
|
+import { go } from "@/utils/utils.js";
|
|
|
+import { getFileUrl } from "@/utils/file.js";
|
|
|
+import RulesModal from "./components/RulesModal.vue";
|
|
|
+
|
|
|
+// 标签页数据
|
|
|
+const tabs = ['未使用', '即将过期', '已使用', '已过期'];
|
|
|
+const currentTab = ref(0);
|
|
|
+
|
|
|
+// 弹窗控制
|
|
|
+const showRulesModal = ref(false);
|
|
|
+const selectedCoupon = ref({
|
|
|
+ amount: 0,
|
|
|
+ minAmount: 0,
|
|
|
+ name: '',
|
|
|
+ expireDate: '',
|
|
|
+ validDays: 90,
|
|
|
+ description: '周一、周五不可用'
|
|
|
+});
|
|
|
+
|
|
|
+// 优惠券数据（模拟数据）
|
|
|
+const couponList = ref([
|
|
|
+ {
|
|
|
+ id: 1,
|
|
|
+ amount: 1000,
|
|
|
+ minAmount: 2000,
|
|
|
+ name: '美食必吃套餐专享券',
|
|
|
+ expireDate: '2024/07/28',
|
|
|
+ status: 0 // 0: 未使用, 1: 即将过期, 2: 已使用, 3: 已过期
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 2,
|
|
|
+ amount: 38,
|
|
|
+ minAmount: 158,
|
|
|
+ name: '美食必吃套餐专享券',
|
|
|
+ expireDate: '2024/07/28',
|
|
|
+ status: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 3,
|
|
|
+ amount: 999,
|
|
|
+ minAmount: 2000,
|
|
|
+ name: '美食必吃套餐专享券',
|
|
|
+ expireDate: '2024/07/28',
|
|
|
+ status: 0
|
|
|
+ },
|
|
|
+ {
|
|
|
+ id: 4,
|
|
|
+ amount: 5,
|
|
|
+ minAmount: 158,
|
|
|
+ name: '美食必吃套餐专享券',
|
|
|
+ expireDate: '2024/07/28',
|
|
|
+ status: 0
|
|
|
+ }
|
|
|
+]);
|
|
|
+
|
|
|
+// 根据当前标签页过滤优惠券
|
|
|
+const filteredCoupons = computed(() => {
|
|
|
+ return couponList.value.filter(coupon => {
|
|
|
+ if (currentTab.value === 0) return coupon.status === 0;
|
|
|
+ if (currentTab.value === 1) return coupon.status === 1;
|
|
|
+ if (currentTab.value === 2) return coupon.status === 2;
|
|
|
+ if (currentTab.value === 3) return coupon.status === 3;
|
|
|
+ return true;
|
|
|
+ });
|
|
|
+});
|
|
|
+
|
|
|
+// 切换标签页
|
|
|
+const handleTabChange = (index) => {
|
|
|
+ currentTab.value = index;
|
|
|
+};
|
|
|
+
|
|
|
+// 获取优惠券卡片样式类
|
|
|
+const getCouponCardClass = (coupon) => {
|
|
|
+ if (coupon.status === 2) return 'coupon-card--used';
|
|
|
+ if (coupon.status === 3) return 'coupon-card--expired';
|
|
|
+ return '';
|
|
|
+};
|
|
|
+
|
|
|
+// 使用优惠券
|
|
|
+const handleUseCoupon = (coupon) => {
|
|
|
+ console.log('使用优惠券:', coupon);
|
|
|
+ // 跳转到点餐页面
|
|
|
+ go('/pages/orderFood/index');
|
|
|
+};
|
|
|
+
|
|
|
+// 查看使用规则
|
|
|
+const handleShowRules = (coupon) => {
|
|
|
+ selectedCoupon.value = {
|
|
|
+ ...coupon,
|
|
|
+ validDays: 90,
|
|
|
+ description: '周一、周五不可用'
|
|
|
+ };
|
|
|
+ showRulesModal.value = true;
|
|
|
+};
|
|
|
+
|
|
|
+onLoad(() => {
|
|
|
+ // 页面加载时获取优惠券列表
|
|
|
+ // TODO: 调用API获取真实数据
|
|
|
+});
|
|
|
+</script>
|
|
|
+
|
|
|
+<style lang="scss" scoped>
|
|
|
+.page {
|
|
|
+ min-height: 100vh;
|
|
|
+ background: #F5F5F5;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+}
|
|
|
+
|
|
|
+.header {
|
|
|
+ background: #FFFFFF;
|
|
|
+ padding: 20rpx 30rpx;
|
|
|
+ padding-top: calc(20rpx + env(safe-area-inset-top));
|
|
|
+
|
|
|
+ .header-title {
|
|
|
+ font-size: 36rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #151515;
|
|
|
+ text-align: center;
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.tabs {
|
|
|
+ background: #FFFFFF;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ padding: 0 30rpx;
|
|
|
+
|
|
|
+ .tab-item {
|
|
|
+ flex: 1;
|
|
|
+ text-align: center;
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #666666;
|
|
|
+ padding: 28rpx 0;
|
|
|
+ position: relative;
|
|
|
+ transition: all 0.3s;
|
|
|
+
|
|
|
+ &--active {
|
|
|
+ color: #151515;
|
|
|
+ font-weight: bold;
|
|
|
+
|
|
|
+ &::after {
|
|
|
+ content: '';
|
|
|
+ position: absolute;
|
|
|
+ bottom: 20rpx;
|
|
|
+ left: 50%;
|
|
|
+ transform: translateX(-50%);
|
|
|
+ width: 40rpx;
|
|
|
+ height: 6rpx;
|
|
|
+ background: linear-gradient(90deg, #FF8A57 0%, #F47D1F 100%);
|
|
|
+ border-radius: 3rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.content {
|
|
|
+ flex: 1;
|
|
|
+ padding: 24rpx 30rpx;
|
|
|
+ padding-bottom: calc(24rpx + env(safe-area-inset-bottom));
|
|
|
+ box-sizing: border-box;
|
|
|
+}
|
|
|
+
|
|
|
+.coupon-list {
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .coupon-card-bg {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: 100%;
|
|
|
+ height: 100%;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-card-bgLeft {
|
|
|
+ position: absolute;
|
|
|
+ top: 0;
|
|
|
+ left: 0;
|
|
|
+ width: auto;
|
|
|
+ height: 190rpx;
|
|
|
+ z-index: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-card-content {
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-card {
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ margin-bottom: 24rpx;
|
|
|
+ overflow: hidden;
|
|
|
+ position: relative;
|
|
|
+ box-sizing: border-box;
|
|
|
+ position: relative;
|
|
|
+ z-index: 3;
|
|
|
+
|
|
|
+ &:last-child {
|
|
|
+ margin-bottom: 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ &__left {
|
|
|
+ width: 200rpx;
|
|
|
+ padding: 32rpx 0;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+
|
|
|
+ .amount-wrapper {
|
|
|
+ display: flex;
|
|
|
+ align-items: baseline;
|
|
|
+ margin-bottom: 8rpx;
|
|
|
+
|
|
|
+ .amount-number {
|
|
|
+ font-size: 64rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #F47D1F;
|
|
|
+ line-height: 1;
|
|
|
+ }
|
|
|
+
|
|
|
+ .amount-unit {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #F47D1F;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .condition-text {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #F47D1F;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__divider {
|
|
|
+ width: 2rpx;
|
|
|
+ height: 100%;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .dash-line {
|
|
|
+ width: 2rpx;
|
|
|
+ height: 100%;
|
|
|
+ // background-image: linear-gradient(to bottom, #FFD9C2 0%, #FFD9C2 50%, transparent 50%, transparent 100%);
|
|
|
+ background-size: 2rpx 12rpx;
|
|
|
+ background-repeat: repeat-y;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ &__right {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: space-between;
|
|
|
+ padding: 32rpx 24rpx;
|
|
|
+
|
|
|
+ .coupon-info {
|
|
|
+ flex: 1;
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+
|
|
|
+ .coupon-name {
|
|
|
+ font-size: 28rpx;
|
|
|
+ font-weight: bold;
|
|
|
+ color: #151515;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-rules {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #999999;
|
|
|
+ margin-bottom: 12rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+
|
|
|
+ .arrow {
|
|
|
+ font-size: 28rpx;
|
|
|
+ margin-left: 4rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-expire {
|
|
|
+ font-size: 22rpx;
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-action {
|
|
|
+ margin-left: 20rpx;
|
|
|
+
|
|
|
+ .action-btn {
|
|
|
+ width: 120rpx;
|
|
|
+ height: 56rpx;
|
|
|
+ border-radius: 28rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ font-size: 26rpx;
|
|
|
+ font-weight: 500;
|
|
|
+
|
|
|
+ &--use {
|
|
|
+ // background: linear-gradient(135deg, #FF8A57 0%, #F47D1F 100%);
|
|
|
+ background: #F47D1F;
|
|
|
+ color: #FFFFFF;
|
|
|
+ // box-shadow: 0rpx 4rpx 12rpx 0rpx rgba(255, 107, 53, 0.3);
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-text {
|
|
|
+ font-size: 24rpx;
|
|
|
+ padding: 8rpx 16rpx;
|
|
|
+
|
|
|
+ &--used {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
+ &--expired {
|
|
|
+ color: #CCCCCC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 已使用状态
|
|
|
+ &--used {
|
|
|
+ background: #F8F8F8;
|
|
|
+
|
|
|
+ .coupon-card__left {
|
|
|
+
|
|
|
+ .amount-number,
|
|
|
+ .amount-unit,
|
|
|
+ .condition-text {
|
|
|
+ color: #CCCCCC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-card__right {
|
|
|
+ .coupon-info {
|
|
|
+
|
|
|
+ .coupon-name,
|
|
|
+ .coupon-rules,
|
|
|
+ .coupon-expire {
|
|
|
+ color: #CCCCCC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 已过期状态
|
|
|
+ &--expired {
|
|
|
+ background: #F8F8F8;
|
|
|
+
|
|
|
+ .coupon-card__left {
|
|
|
+
|
|
|
+ .amount-number,
|
|
|
+ .amount-unit,
|
|
|
+ .condition-text {
|
|
|
+ color: #CCCCCC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ .coupon-card__right {
|
|
|
+ .coupon-info {
|
|
|
+
|
|
|
+ .coupon-name,
|
|
|
+ .coupon-rules,
|
|
|
+ .coupon-expire {
|
|
|
+ color: #CCCCCC;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+.hover-active {
|
|
|
+ opacity: 0.8;
|
|
|
+ transform: scale(0.98);
|
|
|
+}
|
|
|
+
|
|
|
+.empty-state {
|
|
|
+ display: flex;
|
|
|
+ flex-direction: column;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
+ padding-top: 200rpx;
|
|
|
+
|
|
|
+ .empty-icon {
|
|
|
+ width: 300rpx;
|
|
|
+ height: 280rpx;
|
|
|
+ margin-bottom: 40rpx;
|
|
|
+ }
|
|
|
+
|
|
|
+ .empty-text {
|
|
|
+ font-size: 28rpx;
|
|
|
+ color: #AAAAAA;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
zhaoyang