解决优惠券获取链路报错

pages/mall/consumer/coupons.uvue

@@ -1,15 +1,25 @@
 <template>
   <view class="coupons-page">
-    <view class="coupon-list">
-      <view v-if="coupons.length === 0" class="empty-state">
+    <scroll-view class="coupon-list" :scroll-y="true">
+      <view v-if="loading" class="empty-state">
+        <text class="empty-text">加载中...</text>
+      </view>
+      
+      <view v-else-if="loadError" class="empty-state">
+        <text class="empty-icon">⚠️</text>
+        <text class="empty-text">优惠券加载失败</text>
+        <button class="retry-btn" @click="loadCoupons">重新加载</button>
+      </view>
+      
+      <view v-else-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 v-else v-for="coupon in coupons" :key="coupon.id" class="coupon-item">
         <view class="coupon-left">
-          <text class="coupon-amount">{{ coupon.amount }}</text>
-          <text class="coupon-type">优惠券</text>
+          <text class="coupon-amount">{{ coupon.displayAmount }}</text>
+          <text class="coupon-type">{{ coupon.typeLabel }}</text>
         </view>
         <view class="coupon-right">
           <text class="coupon-title">{{ coupon.title }}</text>
@@ -17,7 +27,7 @@
           <button class="use-btn" @click="useCoupon(coupon)">去使用</button>
         </view>
       </view>
-    </view>
+    </scroll-view>
   </view>
 </template>
 
@@ -28,28 +38,45 @@ import type { UserCoupon } from '@/utils/supabaseService.uts'
 
 type Coupon = {
   title: string
-  amount: string
+  displayAmount: string
+  typeLabel: string
   expiry: string
   id: string
 }
 
 const coupons = ref<Coupon[]>([])
+const loading = ref<boolean>(true)
+const loadError = ref<boolean>(false)
 
 const loadCoupons = async () => {
-    uni.showLoading({ title: '加载中...' })
+    loading.value = true
+    loadError.value = false
     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 discountType = item.discount_type ?? 1
             const expiryVal = (item.expire_at != null && item.expire_at !== '') 
                 ? item.expire_at.substring(0, 10) 
                 : '长期有效'
+            
+            let displayAmount = ''
+            let typeLabel = '优惠券'
+            if (discountType == 2) {
+                displayAmount = Math.round(amountVal * 100) / 10 + '折'
+                typeLabel = '折扣券'
+            } else {
+                displayAmount = '¥' + amountVal.toString()
+                typeLabel = '优惠券'
+            }
+            
             const coupon: Coupon = {
                 id: item.id,
                 title: (item.template_name != null && item.template_name !== '') ? item.template_name : '优惠券',
-                amount: `¥${amountVal}`,
+                displayAmount: displayAmount,
+                typeLabel: typeLabel,
                 expiry: expiryVal
             } as Coupon
             couponList.push(coupon)
@@ -57,9 +84,14 @@ const loadCoupons = async () => {
         coupons.value = couponList
     } catch (e) {
         console.error('加载优惠券失败', e)
+        loadError.value = true
         coupons.value = []
+        uni.showToast({
+            title: '优惠券加载失败，请稍后重试',
+            icon: 'none'
+        })
     } finally {
-        uni.hideLoading()
+        loading.value = false
     }
 }
 
@@ -76,9 +108,15 @@ const useCoupon = (coupon: Coupon) => {
 
 <style>
 .coupons-page {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
   padding: 15px;
   background-color: #f5f5f5;
-  flex: 1;
+  display: flex;
+  flex-direction: column;
 }
 
 .empty-state {
@@ -97,6 +135,22 @@ const useCoupon = (coupon: Coupon) => {
 .empty-text {
   font-size: 16px;
   color: #999;
+  margin-bottom: 15px;
+}
+
+.retry-btn {
+  font-size: 14px;
+  background-color: #FF5722;
+  color: white;
+  padding: 6px 16px;
+  border-radius: 15px;
+  line-height: 1.5;
+}
+
+.coupon-list {
+  flex: 1;
+  min-height: 0;
+  width: 100%;
 }
 
 .coupon-item {