|
|
@@ -14,11 +14,19 @@ definePage({
|
|
|
})
|
|
|
const { userMemberInfo } = storeToRefs(useUserStore())
|
|
|
const rightsInfo = ref()
|
|
|
+const showRightsContent = computed(() => userMemberInfo.value.active || userMemberInfo.value.memberStatus === 'EXPIRED')
|
|
|
+const isMemberExpired = computed(() => userMemberInfo.value.memberStatus === 'EXPIRED')
|
|
|
onMounted(() => {
|
|
|
useUserStore().getUserInfo()
|
|
|
opcity.value = 0
|
|
|
- rightsInfo.value = JSON.parse(userMemberInfo.value.benefitConfigJson || '')
|
|
|
- console.log(JSON.parse(userMemberInfo.value.benefitConfigJson || ''), '解析出的json')
|
|
|
+ try {
|
|
|
+ rightsInfo.value = userMemberInfo.value.benefitConfigJson
|
|
|
+ ? JSON.parse(userMemberInfo.value.benefitConfigJson)
|
|
|
+ : null
|
|
|
+ }
|
|
|
+ catch {
|
|
|
+ rightsInfo.value = null
|
|
|
+ }
|
|
|
})
|
|
|
|
|
|
onPageScroll((e) => {
|
|
|
@@ -27,11 +35,15 @@ onPageScroll((e) => {
|
|
|
})
|
|
|
|
|
|
function toUse() {
|
|
|
+ if (isMemberExpired.value)
|
|
|
+ return
|
|
|
wx.openOfficialAccountArticle({
|
|
|
url: 'https://mp.weixin.qq.com/s/lxpdZ6DUhgqg00AT9klu5Q',
|
|
|
})
|
|
|
}
|
|
|
function toShoppingList() {
|
|
|
+ if (isMemberExpired.value)
|
|
|
+ return
|
|
|
if (!userMemberInfo?.value.giftReceived) {
|
|
|
router.push({ name: 'smqjh-giveaways-vip' })
|
|
|
}
|
|
|
@@ -39,16 +51,23 @@ function toShoppingList() {
|
|
|
useGlobalToast().show({ msg: '您已经领取过咯~~' })
|
|
|
}
|
|
|
}
|
|
|
+function handleRightsClick(callback: () => void) {
|
|
|
+ if (isMemberExpired.value) {
|
|
|
+ useGlobalToast().show({ msg: '会员已失效,请重新开通' })
|
|
|
+ return
|
|
|
+ }
|
|
|
+ callback()
|
|
|
+}
|
|
|
</script>
|
|
|
|
|
|
<template>
|
|
|
- <view class="min-h-screen" :class="userMemberInfo.active ? 'bg-[linear-gradient(225deg,#13141D_0%,#55565D_34.72%,#15161F_100%)]' : ''">
|
|
|
+ <view class="min-h-screen" :class="showRightsContent ? 'bg-[linear-gradient(225deg,#13141D_0%,#55565D_34.72%,#15161F_100%)]' : ''">
|
|
|
<wd-navbar
|
|
|
title="会员中心" :custom-style="`background-color: rgba(226, 255, 145, ${opcity});color: ${opcity > 0.5 ? '#000' : '#FFF'};`"
|
|
|
:bordered="false" :z-index="999" safe-area-inset-top left-arrow fixed @click-left="router.back()"
|
|
|
/>
|
|
|
<view :style="{ paddingTop: `${(Number(statusBarHeight) || 44) + MenuButtonHeight + 12}px` }" />
|
|
|
- <view v-if="userMemberInfo.active" class="px24rpx">
|
|
|
+ <view v-if="showRightsContent" class="px24rpx">
|
|
|
<view class="mt-54rpx">
|
|
|
<image :src="`${StaticUrl}/vip-welcome.png`" class="h-46rpx w-339rpx" />
|
|
|
<view class="mt-36rpx text-28rpx text-#b5b5b5">
|
|
|
@@ -112,7 +131,7 @@ function toShoppingList() {
|
|
|
<view class="text-28rpx text-#b5b5b5">
|
|
|
每升立减{{ rightsInfo?.oilPerLiterDiscount }}元
|
|
|
</view>
|
|
|
- <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="toUse">
|
|
|
+ <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx text-center text-24rpx text-#7F5935 line-height-42rpx" :class="isMemberExpired ? 'bg-#999 text-#ccc' : 'bg-#F4E5BD'" @click="toUse">
|
|
|
去使用
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -128,7 +147,7 @@ function toShoppingList() {
|
|
|
<view class="text-28rpx text-#b5b5b5">
|
|
|
折扣率{{ rightsInfo?.mallDiscountRate }}折
|
|
|
</view>
|
|
|
- <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="router.push({ name: 'xsb-homeTabbar' })">
|
|
|
+ <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx text-center text-24rpx text-#7F5935 line-height-42rpx" :class="isMemberExpired ? 'bg-#999 text-#ccc' : 'bg-#F4E5BD'" @click="handleRightsClick(() => router.push({ name: 'xsb-homeTabbar' }))">
|
|
|
去使用
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -144,7 +163,7 @@ function toShoppingList() {
|
|
|
<view class="text-28rpx text-#b5b5b5">
|
|
|
每度电立减{{ rightsInfo?.chargePerKwhDiscount }}元
|
|
|
</view>
|
|
|
- <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="router.push({ name: 'charge-index' })">
|
|
|
+ <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx text-center text-24rpx text-#7F5935 line-height-42rpx" :class="isMemberExpired ? 'bg-#999 text-#ccc' : 'bg-#F4E5BD'" @click="handleRightsClick(() => router.push({ name: 'charge-index' }))">
|
|
|
去使用
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -160,14 +179,14 @@ function toShoppingList() {
|
|
|
<view class="text-28rpx text-#b5b5b5">
|
|
|
折扣率{{ rightsInfo?.parkingDiscountRate }}折
|
|
|
</view>
|
|
|
- <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="router.push({ name: rightsInfo?.parkingRoutePath })">
|
|
|
+ <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx text-center text-24rpx text-#7F5935 line-height-42rpx" :class="isMemberExpired ? 'bg-#999 text-#ccc' : 'bg-#F4E5BD'" @click="handleRightsClick(() => router.push({ name: rightsInfo?.parkingRoutePath }))">
|
|
|
去使用
|
|
|
</view>
|
|
|
</view>
|
|
|
<image :src="rightsInfo?.parkingIcon" class="h-80rpx w-80rpx" />
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-if="userMemberInfo?.couponConfig.length > 0" class="w-304rpx border-[1rpx_solid_#F4E5BD] rounded-32rpx bg-[rgba(255,255,255,0.3)] p-20rpx">
|
|
|
+ <view v-if="userMemberInfo?.couponConfig?.length > 0" class="w-304rpx border-[1rpx_solid_#F4E5BD] rounded-32rpx bg-[rgba(255,255,255,0.3)] p-20rpx">
|
|
|
<view class="text-28rpx text-#FEE3AD font-bold">
|
|
|
优惠券
|
|
|
</view>
|
|
|
@@ -176,14 +195,14 @@ function toShoppingList() {
|
|
|
<view class="text-28rpx text-#b5b5b5">
|
|
|
优惠券{{ userMemberInfo?.couponCount }}张
|
|
|
</view>
|
|
|
- <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="router.push({ name: 'xsb-coupon', params: { type: 'VIP' } })">
|
|
|
+ <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx text-center text-24rpx text-#7F5935 line-height-42rpx" :class="isMemberExpired ? 'bg-#999 text-#ccc' : 'bg-#F4E5BD'" @click="handleRightsClick(() => router.push({ name: 'xsb-coupon', params: { type: 'VIP' } }))">
|
|
|
去查看
|
|
|
</view>
|
|
|
</view>
|
|
|
- <image :src="userMemberInfo?.couponConfig[0].icon" class="h-80rpx w-80rpx" />
|
|
|
+ <image :src="userMemberInfo?.couponConfig?.[0]?.icon" class="h-80rpx w-80rpx" />
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view v-if="userMemberInfo?.giftConfig.length > 0" class="w-304rpx border-[1rpx_solid_#F4E5BD] rounded-32rpx bg-[rgba(255,255,255,0.3)] p-20rpx">
|
|
|
+ <view v-if="userMemberInfo?.giftConfig?.length > 0" class="w-304rpx border-[1rpx_solid_#F4E5BD] rounded-32rpx bg-[rgba(255,255,255,0.3)] p-20rpx">
|
|
|
<view class="text-28rpx text-#FEE3AD font-bold">
|
|
|
自选赠品
|
|
|
</view>
|
|
|
@@ -192,11 +211,11 @@ function toShoppingList() {
|
|
|
<view class="text-28rpx text-#b5b5b5">
|
|
|
自选赠品{{ userMemberInfo?.giftCount }}个
|
|
|
</view>
|
|
|
- <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="toShoppingList">
|
|
|
+ <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx text-center text-24rpx text-#7F5935 line-height-42rpx" :class="isMemberExpired ? 'bg-#999 text-#ccc' : 'bg-#F4E5BD'" @click="toShoppingList">
|
|
|
{{ userMemberInfo?.giftReceived ? '已领取' : '待领取' }}
|
|
|
</view>
|
|
|
</view>
|
|
|
- <image :src="userMemberInfo?.giftConfig[0].icon" class="h-80rpx w-80rpx" />
|
|
|
+ <image :src="userMemberInfo?.giftConfig?.[0]?.icon" class="h-80rpx w-80rpx" />
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|