解决优惠券获取链路报错

This commit is contained in:
2026-06-04 21:54:16 +08:00
parent fc808bd562
commit 5d0c0ae95a
4 changed files with 123 additions and 2074 deletions

View File

@@ -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 {

View File

@@ -750,11 +750,25 @@ export default {
},
scrollToSection(tabKey: string) {
const offsets = this.sectionOffsets
if (offsets == null) return
const offset = offsets.getNumber(tabKey)
if (offset != null && offset >= 0) {
let target = tabKey == 'goods' ? 0 : Math.max(0, offset - this.customHeaderHeight)
const sectionId = 'section-' + tabKey
const query = uni.createSelectorQuery()
query.select('#' + sectionId).boundingClientRect()
query.select('.page-scroll').scrollOffset()
query.exec((res: any) => {
if (res == null) return
let rect: any = null
let scrollInfo: any = null
if (Array.isArray(res)) {
rect = res[0]
scrollInfo = res[1]
}
if (rect == null || rect.top == null) return
const nodeTop = rect.top as number
const scrollTop = (scrollInfo != null && scrollInfo.scrollTop != null) ? scrollInfo.scrollTop as number : this.currentScrollTop
let target = 0
if (tabKey != 'goods') {
target = Math.max(0, nodeTop + scrollTop - this.customHeaderHeight)
}
this.isProgrammaticScrolling = true
this.targetScrollTop = -1
setTimeout(() => {
@@ -762,12 +776,12 @@ export default {
setTimeout(() => { this.isProgrammaticScrolling = false }, 400)
}, 20)
this.activeTab = tabKey
}
})
},
measureSections() {
const sectionIds = ['section-goods', 'section-comments', 'section-detail', 'section-recommend']
const query = uni.createSelectorQuery().in(this)
const query = uni.createSelectorQuery()
for (let i = 0; i < sectionIds.length; i++) {
query.select('#' + sectionIds[i]).boundingClientRect()
}
@@ -782,7 +796,6 @@ export default {
}
}
this.sectionOffsets = offsets
this.customHeaderHeight = this.statusBarHeight + this.headerMainRowHeight + this.headerTabsRowHeight
})
},