feat(paid-member): 添加付费会员功能模块

- 新增付费会员API接口层,支持会员查询、下单、记录及报价
- 新增付费会员页面,展示权益、推荐商品及购买流程
- 新增付费会员购买记录页面,支持订单状态查看与继续支付
- 新增 PaidMemberPrice 组件用于商品列表和详情页展示会员价
- 个人中心页添加付费会员入口,支持配置化展示标题与背景
- 商品详情页集成会员价展示,支持秒杀和拼团场景下隐藏
- 商品列表组件集成会员价展示,支持批量请求与防竞态
- 支付页适配付费会员支付流程,支持H5轮询与结果回调
- 订单确认页优惠文案更新为"活动优惠(含会员优惠)"
- pages.json 新增付费会员及购买记录页面路由配置
- README 更新升级计划,按时间倒序补充已完成功能明细
This commit is contained in:
pikachu1995@126.com
2026-11-05 22:37:12 +08:00
parent 06af86af3f
commit cc71d20aa6
12 changed files with 1244 additions and 973 deletions

View File

@@ -68,7 +68,7 @@
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, onMounted, computed } from 'vue'
import { onLoad, onBackPress } from '@dcloudio/uni-app'
import { onLoad, onBackPress, onUnload } from '@dcloudio/uni-app'
import { useStore } from '@/store'
import * as API_Trade from '@/api/trade'
import { payCallback } from '@/api/members'
@@ -88,6 +88,8 @@ const paymentType = ref('')
const paymentClient = ref('')
const walletValue = ref(0)
const autoCancelTime = ref(0)
let h5PollTimer: ReturnType<typeof setInterval> | undefined
onUnload(() => { if (h5PollTimer) clearInterval(h5PollTimer) })
onLoad((val) => {
routerVal.value = val || {}
@@ -107,7 +109,9 @@ onLoad((val) => {
onBackPress((e) => {
if (e.from == 'backbutton') {
if (routerVal.value.recharge_sn) {
if (routerVal.value.paid_member_sn) {
uni.redirectTo({ url: '/pages/mine/paidMemberRecords' })
} else if (routerVal.value.recharge_sn) {
uni.switchTab({ url: '/pages/tabbar/user/my' })
} else {
uni.navigateTo({ url: '/pages/order/myOrder?status=0' })
@@ -126,6 +130,10 @@ function hideLoadingIfNeeded() {
}
function callback(paymentMethod: string) {
if (orderType.value === 'PAID_MEMBER') {
uni.redirectTo({ url: '/pages/mine/paidMember?payment_sn=' + encodeURIComponent(sn.value) })
return
}
const goSuccess = () => {
uni.redirectTo({
url:
@@ -145,7 +153,10 @@ function callback(paymentMethod: string) {
function cashierData() {
const parms: Record<string, string> = {}
if (routerVal.value.recharge_sn) {
if (routerVal.value.paid_member_sn) {
sn.value = routerVal.value.paid_member_sn
orderType.value = 'PAID_MEMBER'
} else if (routerVal.value.recharge_sn) {
sn.value = routerVal.value.recharge_sn
orderType.value = 'RECHARGE'
} else if (routerVal.value.trade_sn) {
@@ -212,6 +223,11 @@ function onPayTimeout() {
}
function goPayError(message = '支付失败,如果您已支付,请勿反复支付') {
if (orderType.value === 'PAID_MEMBER') {
uni.showToast({ title: '支付未完成,请在购买记录中查看结果', icon: 'none' })
uni.redirectTo({ url: '/pages/mine/paidMemberRecords' })
return
}
const query = [`orderSn=${encodeURIComponent(sn.value)}`, `message=${encodeURIComponent(message)}`]
uni.navigateTo({ url: `/pages/cart/payment/error?${query.join('&')}` })
}
@@ -276,15 +292,24 @@ async function pay(payment: string) {
})
hideLoadingIfNeeded()
} else {
window.location.href = JSON.parse(response.result).h5_url
const paymentUrl = typeof response.result === 'string' && response.result.startsWith('http')
? response.result : JSON.parse(response.result).h5_url
const returnUrl = orderType.value === 'PAID_MEMBER'
? window.location.href.split('#')[0] + '#/pages/mine/paidMember?payment_sn=' + encodeURIComponent(sn.value)
: window.location.href
window.location.href = paymentUrl + (paymentUrl.includes('?') ? '&' : '?') + 'redirect_url=' + encodeURIComponent(returnUrl)
const searchParams = { ...params, price: cashierParams.value }
const timer = setInterval(() => {
let attempts = 0
if (h5PollTimer) clearInterval(h5PollTimer)
h5PollTimer = setInterval(() => {
if (++attempts > 100) { clearInterval(h5PollTimer); return }
payCallback(searchParams).then((cbRes) => {
if (cbRes.data.result) {
clearInterval(timer)
uni.navigateTo({ url: '/pages/order/myOrder' })
clearInterval(h5PollTimer)
if (orderType.value === 'PAID_MEMBER') callback(paymentMethod)
else uni.navigateTo({ url: '/pages/order/myOrder' })
}
})
}).catch(() => {})
}, 3000)
hideLoadingIfNeeded()
}

79
pages/mine/paidMember.vue Normal file
View File

@@ -0,0 +1,79 @@
<template>
<view class="paid-page">
<view v-if="loading && !data.config" class="empty">加载中…</view>
<view v-else-if="error && !data.config" class="empty" @click="load">加载失败,点击重试</view>
<template v-else-if="data.config">
<view v-if="error" class="poll-message" @click="load">刷新失败,点击重试</view>
<view class="member-card" :style="cardStyle">
<image v-if="data.config.backgroundType === 'IMAGE' && data.config.backgroundImage" class="card-bg" :src="data.config.backgroundImage" mode="aspectFill" />
<view class="card-content"><view class="card-title"><image v-if="data.config.icon" class="member-icon" :src="data.config.icon" mode="aspectFit" /><text>{{ data.config.name }}</text></view><text class="member-status">{{ data.active ? '会员有效期至 ' + data.endTime : data.status === 'EXPIRED' ? '会员已到期' : '开通会员,享专属权益' }}</text><text v-if="data.status !== 'UNOPENED'" class="saved">累计已优惠 ¥{{ money(data.savedAmount) }}</text></view>
</view>
<view v-if="pollMessage" class="poll-message" @click="checkPayment">{{ pollMessage }}</view>
<view class="purchase-card"><view><text class="price">¥{{ money(data.config.price) }}</text><text class="period"> / {{ data.config.months }}个月</text></view><text class="hint">{{ data.active ? '续费将从原到期时间顺延,续费权益在新周期开始后生效' : '支付成功后开通,按自然月计算有效期' }}</text></view>
<view class="section"><view class="section-heading"><text>专属权益</text><text class="record-link" @click="goRecords">购买记录 ›</text></view>
<view class="rights-grid"><view v-for="b in displayedBenefits" :key="b.id" class="right-item" @click="detail = b"><image v-if="b.benefitLogo" :src="b.benefitLogo" mode="aspectFit" /><u-icon v-else name="gift" size="28" color="#ae8245" /><text>{{ b.benefitName }}</text></view></view><text v-if="!displayedBenefits.length" class="hint">{{ data.active ? '当前暂无关联权益' : '开通后按会员配置享有权益' }}</text>
<view class="discount-note"><text>会员专享商品折扣</text><text>优惠由平台提供,限适用商家及商品。实际优惠以结算页为准。</text></view>
</view>
<view v-if="data.recommendedGoods?.length" class="section"><view class="section-heading">为你推荐</view><view class="goods-grid"><view v-for="g in data.recommendedGoods" :key="g.id" class="goods-card" @click="goGoods(g)"><image class="goods-cover" :src="g.thumbnail" mode="aspectFit" /><text class="goods-name">{{ g.goodsName }}</text><text class="goods-price">¥{{ money(g.price) }}</text><view v-if="quotes[g.id]" class="member-price"><image v-if="quotes[g.id].label" class="member-price-label" :src="quotes[g.id].label" mode="aspectFit" /><text>会员价 ¥{{ money(quotes[g.id].price) }}</text></view></view></view></view>
<view v-if="data.config.description" class="section"><view class="section-heading">购买说明</view><rich-text :nodes="data.config.description" /></view>
<view class="purchase-footer"><view class="agreement-row" @click="agreed = !agreed"><u-icon :name="agreed ? 'checkmark-circle-fill' : 'checkmark-circle'" size="17" color="#a78149" /><text>我已阅读并同意</text><text class="agreement-link" @click.stop="showAgreement = true">《付费会员协议》</text></view><button :disabled="!data.config.enabled || buying || !agreed" :loading="buying" class="buy-button" @click="buy">{{ !data.config.enabled ? '暂未开放购买和续费' : data.active ? '立即续费' : '立即开通' }}</button></view>
</template>
<view v-if="detail || showAgreement" class="overlay"><view class="mask" @click="closeDetail" @touchmove.stop.prevent /><view class="sheet"><text class="sheet-title">{{ detail?.benefitName || '付费会员协议' }}</text><scroll-view scroll-y class="sheet-scroll"><rich-text :nodes="detail ? detail.benefitDesc || '暂无说明' : data.config?.agreement || '请联系平台查看会员协议'" /></scroll-view><button class="close-button" @click="closeDetail">关闭</button></view></view>
</view>
</template>
<script setup>
import { ref, computed } from 'vue'
import { onLoad, onShow, onHide, onUnload, onPullDownRefresh } from '@dcloudio/uni-app'
import { getPaidMember, createPaidMemberOrder, getPaidMemberOrder, getPaidMemberQuotes } from '@/api/paid-member'
import { isLogin, navigateToLogin } from '@/utils/filters'
const data=ref({}), quotes=ref({}), loading=ref(false), error=ref(false), agreed=ref(false), buying=ref(false), detail=ref(null), showAgreement=ref(false), pollMessage=ref('')
let request=0, owner='', purchaseRequest='', paymentSn='', timer=null, pollId=0, pollCount=0
const money=value=>(Number(value)||0).toFixed(2)
const cardStyle=computed(()=>({backgroundColor:data.value.config?.backgroundColor || '#51443b',color:data.value.config?.fontColor || '#fff1d8'}))
const displayedBenefits=computed(()=>data.value.active ? data.value.benefits || [] : data.value.offeredBenefits || [])
function closeDetail(){detail.value=null;showAgreement.value=false}
function goRecords(){uni.navigateTo({url:'/pages/mine/paidMemberRecords'})}
function goGoods(g){uni.navigateTo({url:`/pages/product/goods?id=${g.id}&goodsId=${g.goodsId}`})}
async function load(){
const memberId=String(isLogin()?.id || '')
if(!memberId){request++;stopPolling();owner='';data.value={};quotes.value={};loading.value=false;agreed.value=false;purchaseRequest='';paymentSn='';pollMessage.value='';navigateToLogin();uni.stopPullDownRefresh();return}
if(owner!==memberId){if(owner){stopPolling();paymentSn='';pollMessage.value=''}owner=memberId;data.value={};quotes.value={};agreed.value=false;purchaseRequest='';detail.value=null}
const id=++request;loading.value=true;error.value=false
try{
const res=await getPaidMember()
if(id!==request || String(isLogin()?.id||'')!==memberId)return
if(!res.data?.success)throw new Error('load')
if(data.value.configVersion !== res.data.result?.configVersion) agreed.value=false
data.value=res.data.result||{};quotes.value={}
const ids=(data.value.recommendedGoods||[]).map(g=>g.id)
const results=await Promise.all(Array.from({length:Math.ceil(ids.length/100)},(_,i)=>getPaidMemberQuotes(ids.slice(i*100,i*100+100))))
if(id===request && String(isLogin()?.id||'')===memberId) quotes.value=Object.assign({},...results.filter(q=>q.data?.success).map(q=>q.data.result||{}))
}catch{if(id===request)error.value=true}finally{if(id===request)loading.value=false;uni.stopPullDownRefresh()}
}
async function buy(){
if(buying.value || !agreed.value || !data.value.config?.enabled)return
buying.value=true
const memberId=owner
purchaseRequest=purchaseRequest || 'pm_'+Date.now().toString(36)+'_'+Math.random().toString(36).slice(2)
try{
const res=await createPaidMemberOrder({requestId:purchaseRequest,configVersion:data.value.configVersion,agreed:true})
if(String(isLogin()?.id||'')!==memberId)return
if(res.data?.success){const o=res.data.result;purchaseRequest='';if(o.status==='PAID')uni.redirectTo({url:'/pages/mine/paidMember?payment_sn='+encodeURIComponent(o.sn)});else uni.navigateTo({url:`/pages/cart/payment/payOrder?paid_member_sn=${o.sn}`})}
else{purchaseRequest='';agreed.value=false;await load()}
}catch{uni.showToast({title:'购买结果暂未确认,请重试或查看购买记录',icon:'none'})}finally{buying.value=false}
}
function stopPolling(){pollId++;if(timer)clearTimeout(timer);timer=null}
async function checkPayment(){
if(!paymentSn)return
const id=++pollId;pollMessage.value='正在确认支付结果…'
try{const res=await getPaidMemberOrder(paymentSn);if(id!==pollId)return;if(res.data?.success && res.data.result.status==='PAID'){paymentSn='';pollMessage.value='支付已确认,会员资格已更新';await load();return}pollCount++;if(pollCount<10){timer=setTimeout(checkPayment,1500)}else pollMessage.value='支付结果待确认,点击刷新或查看购买记录'}catch{if(id===pollId)pollMessage.value='支付结果待确认,点击重试'}
}
onLoad(options=>{paymentSn=options?.payment_sn||''})
onShow(async()=>{await load();if(paymentSn){pollCount=0;checkPayment()}})
onPullDownRefresh(load)
onHide(stopPolling)
onUnload(()=>{request++;stopPolling()})
</script>
<style scoped lang="scss">
.paid-page{min-height:100vh;box-sizing:border-box;background:#f5f6f9;padding:28rpx 28rpx 240rpx;color:#292f39}.member-card{position:relative;overflow:hidden;border-radius:24rpx;min-height:240rpx}.card-bg{position:absolute;inset:0;width:100%;height:100%}.card-content{position:relative;padding:36rpx}.card-title{display:flex;align-items:center;gap:16rpx;font-size:38rpx;font-weight:600}.member-icon{width:70rpx;height:70rpx}.member-status,.saved{display:block;margin-top:18rpx;font-size:24rpx}.saved{opacity:.8}.purchase-card,.section{margin-top:24rpx;background:#fff;padding:28rpx;border-radius:20rpx}.price{font-size:48rpx;font-weight:600;color:#a67b3d}.period{font-size:25rpx;color:#929aa6}.hint{display:block;margin-top:14rpx;font-size:23rpx;line-height:1.7;color:#929aa6}.section-heading{display:flex;align-items:center;justify-content:space-between;font-size:30rpx;font-weight:600;margin-bottom:24rpx}.record-link{font-size:23rpx;font-weight:400;color:#a78149}.rights-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28rpx 16rpx}.right-item{display:flex;flex-direction:column;align-items:center;gap:12rpx;text-align:center;font-size:24rpx}.right-item image{width:72rpx;height:72rpx}.discount-note{margin-top:24rpx;padding:20rpx;background:#fbf6ed;border-radius:14rpx;font-size:23rpx;color:#a78149;line-height:1.8}.discount-note text{display:block}.goods-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24rpx}.goods-cover{width:100%;height:230rpx}.goods-name{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:24rpx;line-height:1.6}.goods-price,.member-price{display:block;margin-top:8rpx;font-size:25rpx}.member-price{display:flex;align-items:center;gap:6rpx;color:#9c7139;font-size:22rpx}.member-price-label{width:28rpx;height:28rpx;flex-shrink:0}.purchase-footer{position:fixed;left:0;right:0;bottom:0;background:#fff;padding:22rpx 28rpx calc(22rpx + env(safe-area-inset-bottom));border-top:1rpx solid #eee;z-index:8}.agreement-row{display:flex;justify-content:center;align-items:center;gap:8rpx;font-size:22rpx;color:#929aa6;margin-bottom:18rpx}.agreement-link{color:#a78149}.buy-button,.close-button{background:#ead5b1;color:#705125;border-radius:44rpx;font-size:28rpx;line-height:84rpx}button::after{border:none}.empty{padding:160rpx 20rpx;text-align:center;color:#969da8;font-size:27rpx}.poll-message{padding:20rpx;background:#fff2d9;border-radius:12rpx;margin-top:20rpx;color:#9d753e;font-size:24rpx}.overlay{position:fixed;inset:0;z-index:20;display:flex;align-items:flex-end}.mask{position:absolute;inset:0;background:rgba(0,0,0,.4)}.sheet{position:relative;width:100%;background:#fff;border-radius:28rpx 28rpx 0 0;padding:30rpx;box-sizing:border-box;padding-bottom:calc(30rpx + env(safe-area-inset-bottom))}.sheet-title{display:block;text-align:center;font-size:32rpx;font-weight:600;margin-bottom:24rpx}.sheet-scroll{height:50vh;margin-bottom:24rpx;font-size:26rpx;line-height:1.8}
</style>

View File

@@ -0,0 +1,36 @@
<template>
<view class="records-page">
<view v-for="order in rows" :key="order.id" class="record-card">
<view class="heading"><text>{{ memberName(order) }}</text><text class="status">{{ status(order) }}</text></view>
<text class="amount">¥{{ Number(order.amount).toFixed(2) }} <text class="months">/ {{ order.months }}个月</text></text>
<text class="line">订单号:{{ order.sn }}</text><text class="line">创建时间:{{ order.createTime }}</text>
<template v-if="order.status === 'PAID'"><text class="line">支付时间:{{ order.payTime }}</text><text class="line">有效期:{{ order.startTime }} 至 {{ order.endTime }}</text></template>
<view v-if="canPay(order)" class="actions"><button class="cancel" @click="cancel(order)">取消订单</button><button class="pay" @click="pay(order)">继续支付</button></view>
</view>
<view v-if="!rows.length" class="empty">{{ loading ? '加载中…' : error ? '加载失败,点击重试' : '暂无购买记录' }}</view>
<view v-if="error" class="load-more" @click="load(retryReset)">点击重新加载</view><view v-else-if="rows.length" class="load-more" @click="load(false)">{{ loading ? '加载中…' : more ? '上拉或点击加载更多' : '已显示全部记录' }}</view>
</view>
</template>
<script setup>
import { ref } from 'vue'
import { onShow, onReachBottom, onPullDownRefresh, onUnload } from '@dcloudio/uni-app'
import { getPaidMemberOrders, cancelPaidMemberOrder } from '@/api/paid-member'
import { isLogin, navigateToLogin } from '@/utils/filters'
const rows=ref([]),loading=ref(false),error=ref(false),more=ref(true)
let page=1,owner='',request=0,retryReset=true
const time=value=>new Date(String(value||'').replace(/-/g,'/')).getTime()
function memberName(order){try{return JSON.parse(order.configSnapshot).name}catch{return '付费会员'}}
function canPay(order){return order.status==='UNPAID' && time(order.payDeadline)>Date.now()}
function status(order){return order.status==='PAID' ? time(order.startTime)>Date.now() ? '待生效' : time(order.endTime)<=Date.now() ? '已到期' : '会员有效' : order.status==='CANCELLED' ? '已取消' : canPay(order) ? '待支付' : '已超时'}
function pay(order){uni.navigateTo({url:`/pages/cart/payment/payOrder?paid_member_sn=${order.sn}`})}
function cancel(order){uni.showModal({title:'取消会员订单',content:'确定取消这笔未支付订单?',success:async result=>{if(result.confirm){const res=await cancelPaidMemberOrder(order.sn);if(res.data?.success)load(true)}}})}
async function load(reset=false){
const memberId=String(isLogin()?.id||'');if(!memberId){request++;rows.value=[];owner='';navigateToLogin();uni.stopPullDownRefresh();return}
if(!reset && (loading.value || !more.value))return
if(owner!==memberId){owner=memberId;rows.value=[];reset=true}
const id=++request,next=reset?1:page;loading.value=true;error.value=false;retryReset=reset
try{const res=await getPaidMemberOrders({pageNumber:next,pageSize:20});if(id!==request||String(isLogin()?.id||'')!==memberId)return;if(!res.data?.success)throw new Error('load');const data=res.data.result||{};rows.value=reset ? data.records||[] : [...rows.value,...(data.records||[]).filter(row=>!rows.value.some(old=>old.id===row.id))];page=next+1;more.value=next*20<Number(data.total||0);retryReset=false}catch{if(id===request)error.value=true}finally{if(id===request)loading.value=false;uni.stopPullDownRefresh()}
}
onShow(()=>load(true));onPullDownRefresh(()=>load(true));onReachBottom(()=>{if(!error.value)load(false)});onUnload(()=>request++)
</script>
<style scoped>.records-page{min-height:100vh;box-sizing:border-box;padding:24rpx 28rpx calc(30rpx + env(safe-area-inset-bottom));background:#f5f6f9}.record-card{padding:28rpx;background:#fff;border-radius:20rpx;margin-bottom:20rpx}.heading{display:flex;align-items:center;justify-content:space-between;font-size:29rpx;font-weight:600}.status{font-size:23rpx;color:#a78149;font-weight:400}.amount{display:block;font-size:40rpx;margin:20rpx 0;color:#9d753e}.months{font-size:23rpx;color:#989faa}.line{display:block;font-size:22rpx;line-height:1.9;color:#929aa6;overflow-wrap:anywhere}.actions{display:flex;justify-content:flex-end;gap:16rpx;margin-top:22rpx}.actions button{margin:0;padding:0 26rpx;font-size:23rpx;line-height:58rpx;border-radius:30rpx}.actions button::after{border:none}.pay{background:#f0dfc2;color:#8d6836}.cancel{background:#f2f3f5;color:#929aa6}.empty,.load-more{padding:40rpx 0;text-align:center;font-size:25rpx;color:#a0a7b1}</style>

View File

@@ -346,7 +346,7 @@
</div>
<div>
<u-row>
<u-col :span="6">活动优惠</u-col>
<u-col :span="6">活动优惠(含会员优惠)</u-col>
<u-col :span="6" class="tr tipsColor" textAlign="right">
<span v-if="orderMessage.priceDetailDTO.discountPrice"
>-¥{{unitPrice(orderMessage.priceDetailDTO.discountPrice)

File diff suppressed because it is too large Load Diff

View File

@@ -1,136 +1,136 @@
<template>
<view class="wrapper" v-if="res">
<view v-for="prom in promotionKeys" :key="prom">
<view v-if="getPromType(prom) == 'FULL_DISCOUNT'">
<view class="res_prom_item" v-if="res[prom].fullMinus">
<view class="deg_tag">满减</view>
<text class="pro-text">
满{{ res[prom].fullMoney }}元 立减现金
<text class="price">{{ res[prom].fullMinus }}元</text>
<text v-if="res[prom].couponFlag"> 赠送优惠券</text>
<text v-if="res[prom].pointFlag"> 赠送{{ res[prom].point }}积分</text>
<text v-if="res[prom].giftFlag"> 赠送商品</text>
<text v-if="res[prom].freeFreightFlag"> 赠送包邮服务</text>
</text>
</view>
<view class="res_prom_item" v-if="res[prom].fullRate && res[prom].fullRateFlag">
<view class="deg_tag">打折</view>
<text class="pro-text">
满{{ res[prom].fullMoney }}元,立享
<text class="price">{{ res[prom].fullRate }}折</text>
优惠
</text>
</view>
</view>
<view v-if="getPromType(prom) == 'PINTUAN'">
<view class="res_prom_item" v-if="res[prom].requiredNum">
<view class="deg_tag">拼团</view>
<text class="pro-text">
{{ res[prom].requiredNum }}人拼团 限购
<text class="price">{{ res[prom].limitNum }}件</text>
</text>
</view>
</view>
<view v-if="getPromType(prom) == 'SECKILL'">
<view class="res_prom_item">
<view class="deg_tag">限时抢购</view>
<text class="pro-text">限时抢购</text>
</view>
</view>
<view v-if="getPromType(prom) == 'POINTS_GOODS'">
<view class="res_prom_item">
<view class="deg_tag">积分活动</view>
<text class="pro-text">
当前商品参与积分活动。
<text @tap="handClickToJoinPromotion(prom)" class="href">点击此处参与活动</text>
</text>
</view>
</view>
<view v-if="getPromType(prom) == 'KANJIA'">
<view class="res_prom_item">
<view class="deg_tag">砍价活动</view>
<text class="pro-text">
当前商品参与砍价活动。
<text @tap="handClickToJoinPromotion(prom)" class="href">点击此处参与活动</text>
</text>
</view>
</view>
</view>
<view v-if="!promotionKeys.length">暂无促销活动</view>
</view>
</template>
<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{
res?: any
}>()
const promotionKeys = computed(() => {
if (!props.res || typeof props.res !== 'object') return []
return Object.keys(props.res).filter((key) =>
['FULL_DISCOUNT', 'PINTUAN', 'SECKILL', 'POINTS_GOODS', 'KANJIA'].includes(getPromType(key))
)
})
function getPromType(key: string) {
return key.split('-')[0]
}
function handClickToJoinPromotion(val: string) {
const type = getPromType(val)
const promotionMap: Record<string, string> = {
POINTS_GOODS: `/pages/promotion/point/detail?id=${props.res[val].id}`,
KANJIA: `/pages/promotion/bargain/detail?id=${props.res[val].id}`,
}
const url = promotionMap[type]
if (url) {
uni.navigateTo({ url })
}
}
</script>
<style lang="scss" scoped>
.deg_tag {
flex-shrink: 0;
color: $price-color;
padding: 4rpx 12rpx;
border: 2rpx solid $price-color;
border-radius: 6rpx;
font-size: 22rpx;
line-height: 1.4;
white-space: nowrap;
}
.pro-text {
flex: 1;
min-width: 0;
font-size: 26rpx;
line-height: 1.6;
color: #333333;
}
.wrapper {
display: block;
}
.res_prom_item {
display: flex;
align-items: flex-start;
gap: 16rpx;
margin: 20rpx 0;
}
.price {
color: $price-color;
}
.href {
color: $main-color;
}
</style>
<template>
<view class="wrapper" v-if="res">
<view v-for="prom in promotionKeys" :key="prom">
<view v-if="getPromType(prom) == 'FULL_DISCOUNT'">
<view class="res_prom_item" v-if="res[prom].fullMinus">
<view class="deg_tag">满减</view>
<text class="pro-text">
满{{ res[prom].fullMoney }}元 立减现金
<text class="price">{{ res[prom].fullMinus }}元</text>
<text v-if="res[prom].couponFlag"> 赠送优惠券</text>
<text v-if="res[prom].pointFlag"> 赠送{{ res[prom].point }}积分</text>
<text v-if="res[prom].giftFlag"> 赠送商品</text>
<text v-if="res[prom].freeFreightFlag"> 赠送包邮服务</text>
</text>
</view>
<view class="res_prom_item" v-if="res[prom].fullRate && res[prom].fullRateFlag">
<view class="deg_tag">打折</view>
<text class="pro-text">
满{{ res[prom].fullMoney }}元,立享
<text class="price">{{ res[prom].fullRate }}折</text>
优惠
</text>
</view>
</view>
<view v-if="getPromType(prom) == 'PINTUAN'">
<view class="res_prom_item" v-if="res[prom].requiredNum">
<view class="deg_tag">拼团</view>
<text class="pro-text">
{{ res[prom].requiredNum }}人拼团 限购
<text class="price">{{ res[prom].limitNum }}件</text>
</text>
</view>
</view>
<view v-if="getPromType(prom) == 'SECKILL'">
<view class="res_prom_item">
<view class="deg_tag">限时抢购</view>
<text class="pro-text">限时抢购</text>
</view>
</view>
<view v-if="getPromType(prom) == 'POINTS_GOODS'">
<view class="res_prom_item">
<view class="deg_tag">积分活动</view>
<text class="pro-text">
当前商品参与积分活动。
<text @tap="handClickToJoinPromotion(prom)" class="href">点击此处参与活动</text>
</text>
</view>
</view>
<view v-if="getPromType(prom) == 'KANJIA'">
<view class="res_prom_item">
<view class="deg_tag">砍价活动</view>
<text class="pro-text">
当前商品参与砍价活动。
<text @tap="handClickToJoinPromotion(prom)" class="href">点击此处参与活动</text>
</text>
</view>
</view>
</view>
<view v-if="!promotionKeys.length">暂无促销活动</view>
</view>
</template>
<script setup lang="ts">
import { computed } from 'vue'
const props = defineProps<{
res?: any
}>()
const promotionKeys = computed(() => {
if (!props.res || typeof props.res !== 'object') return []
return Object.keys(props.res).filter((key) =>
['FULL_DISCOUNT', 'PINTUAN', 'SECKILL', 'POINTS_GOODS', 'KANJIA'].includes(getPromType(key))
)
})
function getPromType(key: string) {
return key.split('-')[0]
}
function handClickToJoinPromotion(val: string) {
const type = getPromType(val)
const promotionMap: Record<string, string> = {
POINTS_GOODS: `/pages/promotion/point/detail?id=${props.res[val].id}`,
KANJIA: `/pages/promotion/bargain/detail?id=${props.res[val].id}`,
}
const url = promotionMap[type]
if (url) {
uni.navigateTo({ url })
}
}
</script>
<style lang="scss" scoped>
.deg_tag {
flex-shrink: 0;
color: $price-color;
padding: 4rpx 12rpx;
border: 2rpx solid $price-color;
border-radius: 6rpx;
font-size: 22rpx;
line-height: 1.4;
white-space: nowrap;
}
.pro-text {
flex: 1;
min-width: 0;
font-size: 26rpx;
line-height: 1.6;
color: #333333;
}
.wrapper {
display: block;
}
.res_prom_item {
display: flex;
align-items: flex-start;
gap: 16rpx;
margin: 20rpx 0;
}
.price {
color: $price-color;
}
.href {
color: $main-color;
}
</style>

View File

@@ -69,6 +69,13 @@
<!-- 下方主内容卡片区域 -->
<view class="main-container">
<navigator v-if="showPaidMemberEntry" class="paid-entry" :style="{ color: paidEntryColor }" url="/pages/mine/paidMember" hover-class="none">
<image v-if="paidEntryBackground" class="entry-bg" :src="paidEntryBackground" mode="aspectFill" />
<view class="entry-content">
<view><text class="entry-title">{{ paidEntryTitle }}</text><text class="entry-subtitle">{{ paidEntrySubtitle }}</text></view>
<u-icon name="arrow-right" size="14" :color="paidEntryColor" />
</view>
</navigator>
<!-- 我的订单卡片 -->
<view class="card-box order-box">
<view class="card-title-bar">
@@ -132,6 +139,7 @@ import {
onNavigationBarButtonTap,
} from '@dcloudio/uni-app'
import tool from '@/pages/tabbar/user/utils/tool.vue'
import { getPaidMember } from '@/api/paid-member'
import { getCouponsNum, getFootprintNum } from '@/api/members.js'
import { getUserWallet } from '@/api/members'
import configs from '@/config/config'
@@ -154,6 +162,22 @@ const aiderLightColor = computed(() => store.getters.aiderLightColor)
const userImage = configs.defaultUserPhoto
const userInfo = ref<any>({})
const paidMemberInfo = ref<any>(null)
let paidMemberRequestId = 0
const showPaidMemberEntry = computed(() => !!paidMemberInfo.value?.config
&& !!(paidMemberInfo.value.config.enabled || paidMemberInfo.value.active || paidMemberInfo.value.status === 'EXPIRED'))
const paidEntryTitle = computed(() => paidMemberInfo.value?.active
? paidMemberInfo.value.config?.openedText || '我的付费会员'
: paidMemberInfo.value?.config?.unopenedText || '开通付费会员,享专属权益')
const paidEntryColor = computed(() => (paidMemberInfo.value?.active
? paidMemberInfo.value.config?.openedFontColor
: paidMemberInfo.value?.config?.unopenedFontColor) || '#f4dfb9')
const paidEntryBackground = computed(() => paidMemberInfo.value?.active
? paidMemberInfo.value.config?.openedBackground
: paidMemberInfo.value?.config?.unopenedBackground)
const paidEntrySubtitle = computed(() => paidMemberInfo.value?.active
? '有效期至 ' + paidMemberInfo.value.endTime
: paidMemberInfo.value?.status === 'EXPIRED' ? '会员已到期,续费继续享权益' : '开通享商品优惠与专属权益')
const couponNum = ref<string | number>('')
const footNum = ref<string | number>('')
const walletNum = ref<string | number>('')
@@ -189,6 +213,26 @@ function resetMemberGrade() {
gradeIconFailed.value = false
}
/** 个人中心显示时读取会员配置及资格;退出或切换账号后丢弃旧请求结果。 */
async function loadPaidMemberInfo() {
const requestId = ++paidMemberRequestId
const memberId = String(userInfo.value.id || '')
paidMemberInfo.value = null
if (!memberId) return
try {
const res = await getPaidMember()
if (requestId !== paidMemberRequestId
|| String(userInfo.value.id || '') !== memberId
|| String((isLogin() || {}).id || '') !== memberId) return
if (!res.data?.success) throw new Error(res.data?.message || '会员服务返回异常')
paidMemberInfo.value = res.data.result || null
} catch (error: any) {
if (requestId === paidMemberRequestId) {
console.warn('[付费会员] 入口加载失败', error?.message || '请求失败')
}
}
}
function onGradeBackgroundError() {
gradeBackgroundFailed.value = true
gradeBackgroundLoaded.value = false
@@ -218,6 +262,8 @@ watch(() => [store.state.userInfo?.id, store.state.hasLogin], () => {
if (String(account.id || '') !== String(userInfo.value.id || '')) {
userInfo.value = account
resetMemberGrade()
paidMemberRequestId++
paidMemberInfo.value = null
walletNum.value = 0
couponNum.value = 0
footNum.value = 0
@@ -256,9 +302,11 @@ async function refreshUserPage() {
userInfo.value = isLogin() || {}
try {
if (isLogin('auth')) {
await Promise.allSettled([loadMemberGrade(), getUserOrderNum()])
await Promise.allSettled([loadMemberGrade(), loadPaidMemberInfo(), getUserOrderNum()])
} else {
resetMemberGrade()
paidMemberRequestId++
paidMemberInfo.value = null
walletNum.value = 0
couponNum.value = 0
footNum.value = 0
@@ -313,6 +361,11 @@ async function getUserOrderNum() {
</script>
<style lang="scss" scoped>
.paid-entry { position: relative; overflow: hidden; border-radius: 20rpx; background: linear-gradient(110deg, #423c36, #756149); margin-bottom: 20rpx; }
.entry-bg { position: absolute; inset: 0; width: 100%; height: 100%; }
.entry-content { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20rpx; padding: 25rpx 28rpx; }
.entry-title { font-size: 27rpx; font-weight: 600; display: block; }
.entry-subtitle { font-size: 21rpx; opacity: .75; display: block; margin-top: 8rpx; }
.user-page {
min-height: 100vh;
background-color: #f5f6f9;