|
|
@@ -22,9 +22,9 @@
|
|
|
<view class="coupon-card__left">
|
|
|
<view class="amount-wrapper">
|
|
|
<text class="amount-number">{{ coupon.amount }}</text>
|
|
|
- <text class="amount-unit">元</text>
|
|
|
+ <text class="amount-unit">{{ coupon.amountUnit || '元' }}</text>
|
|
|
</view>
|
|
|
- <text class="condition-text">满{{ coupon.minAmount }}可用</text>
|
|
|
+ <text class="condition-text">{{ coupon.conditionText || (coupon.minAmount > 0 ? '满' + coupon.minAmount + '可用' : '无门槛') }}</text>
|
|
|
</view>
|
|
|
|
|
|
<!-- 右侧信息区域 -->
|
|
|
@@ -35,25 +35,15 @@
|
|
|
使用规则
|
|
|
<text class="arrow">›</text>
|
|
|
</view>
|
|
|
- <text class="coupon-expire">{{ coupon.expireDate }}到期</text>
|
|
|
+ <text class="coupon-expire">{{ coupon.expireDate ? 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 v-if="coupon.status === 0" class="status-text status-text--unused">未使用</view>
|
|
|
+ <view v-else-if="coupon.status === 1" class="status-text status-text--expiring">即将过期</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>
|
|
|
@@ -74,11 +64,12 @@
|
|
|
</template>
|
|
|
|
|
|
<script setup>
|
|
|
-import { onLoad } from "@dcloudio/uni-app";
|
|
|
+import { onShow } 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";
|
|
|
+import * as diningApi from "@/api/dining.js";
|
|
|
|
|
|
// 标签页数据
|
|
|
const tabs = ['未使用', '即将过期', '已使用', '已过期'];
|
|
|
@@ -95,56 +86,69 @@ const selectedCoupon = ref({
|
|
|
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 couponList = ref([]);
|
|
|
+const loading = ref(false);
|
|
|
+
|
|
|
+// 规范化接口返回的优惠券项
|
|
|
+function normalizeCouponItem(raw) {
|
|
|
+ if (!raw || typeof raw !== 'object') return null;
|
|
|
+ const couponType = Number(raw.couponType) ?? 1;
|
|
|
+ const nominalValue = Number(raw.nominalValue ?? raw.amount ?? 0) || 0;
|
|
|
+ const discountRate = Number(raw.discountRate ?? 0) || 0;
|
|
|
+ const minAmount = Number(raw.minimumSpendingAmount ?? raw.minAmount ?? 0) || 0;
|
|
|
+ let amount = nominalValue;
|
|
|
+ let amountUnit = '元';
|
|
|
+ let conditionText = minAmount > 0 ? `满${minAmount}可用` : '无门槛';
|
|
|
+ if (couponType === 2 && discountRate > 0) {
|
|
|
+ amount = discountRate;
|
|
|
+ amountUnit = '折';
|
|
|
+ conditionText = minAmount > 0 ? `满${minAmount}可用` : '无门槛';
|
|
|
}
|
|
|
-]);
|
|
|
-
|
|
|
-// 根据当前标签页过滤优惠券
|
|
|
-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;
|
|
|
- });
|
|
|
-});
|
|
|
+ return {
|
|
|
+ id: raw.id ?? raw.userCouponId ?? raw.couponId ?? '',
|
|
|
+ amount,
|
|
|
+ amountUnit,
|
|
|
+ minAmount,
|
|
|
+ name: raw.name ?? raw.title ?? raw.couponName ?? '',
|
|
|
+ expireDate: raw.expirationTime ?? raw.endGetDate ?? raw.expireDate ?? '',
|
|
|
+ status: currentTab.value,
|
|
|
+ couponType,
|
|
|
+ nominalValue,
|
|
|
+ discountRate,
|
|
|
+ conditionText
|
|
|
+ };
|
|
|
+}
|
|
|
+
|
|
|
+// 根据当前标签页展示的优惠券（接口按 tabType 分页返回，直接使用）
|
|
|
+const filteredCoupons = computed(() => couponList.value);
|
|
|
|
|
|
// 切换标签页
|
|
|
const handleTabChange = (index) => {
|
|
|
currentTab.value = index;
|
|
|
+ fetchCouponList();
|
|
|
+};
|
|
|
+
|
|
|
+// 拉取优惠券列表
|
|
|
+const fetchCouponList = async () => {
|
|
|
+ loading.value = true;
|
|
|
+ try {
|
|
|
+ const res = await diningApi.GetUserCouponList({
|
|
|
+ tabType: currentTab.value, // 0未使用 1即将过期 2已使用 3已过期
|
|
|
+ page: 1,
|
|
|
+ size: 20
|
|
|
+ });
|
|
|
+ const raw = res?.data ?? res ?? {};
|
|
|
+ const list = raw?.records ?? raw?.list ?? (Array.isArray(res) ? res : []);
|
|
|
+ const arr = Array.isArray(list) ? list : [];
|
|
|
+ couponList.value = arr.map(normalizeCouponItem).filter(Boolean);
|
|
|
+ } catch (err) {
|
|
|
+ console.error('获取优惠券列表失败:', err);
|
|
|
+ uni.showToast({ title: '加载失败', icon: 'none' });
|
|
|
+ couponList.value = [];
|
|
|
+ } finally {
|
|
|
+ loading.value = false;
|
|
|
+ }
|
|
|
};
|
|
|
|
|
|
// 获取优惠券卡片样式类
|
|
|
@@ -171,9 +175,9 @@ const handleShowRules = (coupon) => {
|
|
|
showRulesModal.value = true;
|
|
|
};
|
|
|
|
|
|
-onLoad(() => {
|
|
|
- // 页面加载时获取优惠券列表
|
|
|
- // TODO: 调用API获取真实数据
|
|
|
+// 使用 onShow 拉取数据（onLoad 在 uni-app Vue3 组合式 API 下可能不触发，onShow 更可靠）
|
|
|
+onShow(() => {
|
|
|
+ fetchCouponList();
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
@@ -391,6 +395,11 @@ onLoad(() => {
|
|
|
font-size: 24rpx;
|
|
|
padding: 8rpx 16rpx;
|
|
|
|
|
|
+ &--unused,
|
|
|
+ &--expiring {
|
|
|
+ color: #999999;
|
|
|
+ }
|
|
|
+
|
|
|
&--used {
|
|
|
color: #999999;
|
|
|
}
|
sunshibo