完成consumer端同步

.consumer-sync-backup/20260514-093851/pages/mall/consumer/coupons.uvue

@@ -0,0 +1,162 @@
+<template>
+  <view class="coupons-page">
+    <view class="coupon-list">
+      <view v-if="coupons.length === 0" class="empty-state">
+        <text class="empty-icon">🎫</text>
+        <text class="empty-text">暂无优惠券</text>
+      </view>
+      
+      <view v-else v-for="(coupon, index) in coupons" :key="index" class="coupon-item">
+        <view class="coupon-left">
+          <text class="coupon-amount">{{ coupon.amount }}</text>
+          <text class="coupon-type">优惠券</text>
+        </view>
+        <view class="coupon-right">
+          <text class="coupon-title">{{ coupon.title }}</text>
+          <text class="coupon-expiry">有效期至: {{ coupon.expiry }}</text>
+          <button class="use-btn" @click="useCoupon(coupon)">去使用</button>
+        </view>
+      </view>
+    </view>
+  </view>
+</template>
+
+<script setup lang="uts">
+import { ref, onMounted } from 'vue'
+import supabaseService from '@/utils/supabaseService.uts'
+import type { UserCoupon } from '@/utils/supabaseService.uts'
+
+type Coupon = {
+  title: string
+  amount: string
+  expiry: string
+  id: string
+}
+
+const coupons = ref<Coupon[]>([])
+
+const loadCoupons = async () => {
+    uni.showLoading({ title: '加载中...' })
+    try {
+        const userCoupons = await supabaseService.getUserCoupons(1)
+        const couponList: Coupon[] = []
+        for (let i = 0; i < userCoupons.length; i++) {
+            const item = userCoupons[i]
+            const amountVal = item.amount ?? 0
+            const expiryVal = (item.expire_at != null && item.expire_at !== '') 
+                ? item.expire_at.substring(0, 10) 
+                : '长期有效'
+            const coupon: Coupon = {
+                id: item.id,
+                title: (item.template_name != null && item.template_name !== '') ? item.template_name : '优惠券',
+                amount: `¥${amountVal}`,
+                expiry: expiryVal
+            } as Coupon
+            couponList.push(coupon)
+        }
+        coupons.value = couponList
+    } catch (e) {
+        console.error('加载优惠券失败', e)
+        coupons.value = []
+    } finally {
+        uni.hideLoading()
+    }
+}
+
+onMounted(() => {
+  loadCoupons()
+})
+
+const useCoupon = (coupon: Coupon) => {
+  uni.switchTab({
+    url: '/pages/main/index'
+  })
+}
+</script>
+
+<style>
+.coupons-page {
+  padding: 15px;
+  background-color: #f5f5f5;
+  flex: 1;
+}
+
+.empty-state {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  padding-top: 100px;
+}
+
+.empty-icon {
+  font-size: 60px;
+  margin-bottom: 20px;
+}
+
+.empty-text {
+  font-size: 16px;
+  color: #999;
+}
+
+.coupon-item {
+  display: flex;
+  background-color: white;
+  border-radius: 8px;
+  margin-bottom: 15px;
+  overflow: hidden;
+  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+.coupon-left {
+  width: 100px;
+  background: linear-gradient(135deg, #FF9800, #FF5722);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  color: white;
+  padding: 15px;
+}
+
+.coupon-amount {
+  font-size: 24px;
+  font-weight: bold;
+}
+
+.coupon-type {
+  font-size: 12px;
+  margin-top: 5px;
+}
+
+.coupon-right {
+  flex: 1;
+  padding: 15px;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.coupon-title {
+  font-size: 16px;
+  font-weight: bold;
+  color: #333;
+  margin-bottom: 8px;
+}
+
+.coupon-expiry {
+  font-size: 12px;
+  color: #999;
+  margin-bottom: 10px;
+}
+
+.use-btn {
+  align-self: flex-end;
+  font-size: 12px;
+  background-color: #FF5722;
+  color: white;
+  padding: 4px 12px;
+  border-radius: 15px;
+  line-height: 1.5;
+}
+</style>