|
@@ -0,0 +1,126 @@
|
|
|
|
|
+<script setup lang="ts">
|
|
|
|
|
+import { rightsList } from './vip-data'
|
|
|
|
|
+import router from '@/router'
|
|
|
|
|
+import { StaticUrl } from '@/config'
|
|
|
|
|
+
|
|
|
|
|
+const { statusBarHeight, MenuButtonHeight, opcity } = storeToRefs(useSysStore())
|
|
|
|
|
+definePage({
|
|
|
|
|
+ name: 'smqjh-user-vip',
|
|
|
|
|
+ islogin: true,
|
|
|
|
|
+ style: {
|
|
|
|
|
+ navigationBarTitleText: '会员中心',
|
|
|
|
|
+ navigationStyle: 'custom',
|
|
|
|
|
+ },
|
|
|
|
|
+
|
|
|
|
|
+})
|
|
|
|
|
+onMounted(() => {
|
|
|
|
|
+ opcity.value = 0
|
|
|
|
|
+})
|
|
|
|
|
+const { userMemberInfo } = storeToRefs(useUserStore())
|
|
|
|
|
+onPageScroll((e) => {
|
|
|
|
|
+ const calculatedOpacity = e.scrollTop / 100
|
|
|
|
|
+ opcity.value = Math.min(1, Math.max(0.1, calculatedOpacity))
|
|
|
|
|
+})
|
|
|
|
|
+
|
|
|
|
|
+function toUse(value: any) {
|
|
|
|
|
+ if (value.id === 1) {
|
|
|
|
|
+ wx.openOfficialAccountArticle({
|
|
|
|
|
+ url: 'https://mp.weixin.qq.com/s/lxpdZ6DUhgqg00AT9klu5Q',
|
|
|
|
|
+ })
|
|
|
|
|
+ }
|
|
|
|
|
+ if (value.route === '') {
|
|
|
|
|
+ useGlobalToast().show('该权益正在快马加鞭赶来~')
|
|
|
|
|
+ }
|
|
|
|
|
+ else {
|
|
|
|
|
+ router.push({ name: value.route })
|
|
|
|
|
+ }
|
|
|
|
|
+}
|
|
|
|
|
+</script>
|
|
|
|
|
+
|
|
|
|
|
+<template>
|
|
|
|
|
+ <view class="min-h-screen" :class="userMemberInfo.active ? '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 class="mt-54rpx">
|
|
|
|
|
+ <image :src="`${StaticUrl}/vip-welcome.png`" class="h-46rpx w-339rpx" />
|
|
|
|
|
+ <view class="mt-36rpx text-28rpx text-#b5b5b5">
|
|
|
|
|
+ 甄选权益,开启您的购物之旅
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt-36rpx h-370rpx pl-50rpx" :style="{ backgroundImage: `url(${StaticUrl}/vip-card.png)`, backgroundSize: 'cover', backgroundPosition: 'center' }">
|
|
|
|
|
+ <image :src="`${StaticUrl}/vip-tags.png`" class="mt-72rpx h-54rpx w-238rpx" />
|
|
|
|
|
+ <view class="mt-20rpx text-24rpx text-#b5b5b5">
|
|
|
|
|
+ <text v-if="userMemberInfo.memberStatus === 'ACTIVE'">
|
|
|
|
|
+ 有效期至
|
|
|
|
|
+ </text>
|
|
|
|
|
+ <text v-if="userMemberInfo.memberStatus === 'PENDING_EXPIRE'">
|
|
|
|
|
+ 会员已退订
|
|
|
|
|
+ </text>
|
|
|
|
|
+ <text v-if="userMemberInfo.memberStatus === 'EXPIRED'">
|
|
|
|
|
+ 会员已失效
|
|
|
|
|
+ </text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt-20rpx text-28rpx text-#b5b5b5">
|
|
|
|
|
+ <text v-if="userMemberInfo.memberStatus === 'PENDING_EXPIRE'">
|
|
|
|
|
+ 权益将于
|
|
|
|
|
+ </text>
|
|
|
|
|
+ <text v-if="userMemberInfo.memberStatus === 'EXPIRED'">
|
|
|
|
|
+ 失效时间
|
|
|
|
|
+ </text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt-20rpx text-28rpx text-#b5b5b5">
|
|
|
|
|
+ {{ userMemberInfo.expireTime }}
|
|
|
|
|
+ <text v-if="userMemberInfo.memberStatus != 'ACTIVE'">
|
|
|
|
|
+ 失效
|
|
|
|
|
+ </text>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt-30rpx">
|
|
|
|
|
+ <view class="flex items-center justify-center gap-36rpx">
|
|
|
|
|
+ <view class="flex items-center gap-6rpx">
|
|
|
|
|
+ <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(30deg);" />
|
|
|
|
|
+ <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(30deg);" />
|
|
|
|
|
+ <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(30deg);" />
|
|
|
|
|
+ <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(30deg);" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="text-36rpx text-#FEE3AD font-800">
|
|
|
|
|
+ 我的权益
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="flex items-center gap-6rpx">
|
|
|
|
|
+ <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(-30deg);" />
|
|
|
|
|
+ <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(-30deg);" />
|
|
|
|
|
+ <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(-30deg);" />
|
|
|
|
|
+ <view class="h-16rpx w-8rpx bg-#FEE3AD" style="transform: skew(-30deg);" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt-44rpx flex flex-wrap gap-20rpx">
|
|
|
|
|
+ <view v-for="value in rightsList" :key="value.id" 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">
|
|
|
|
|
+ {{ value.title }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt-20rpx flex items-center justify-between">
|
|
|
|
|
+ <view>
|
|
|
|
|
+ <view class="text-28rpx text-#b5b5b5">
|
|
|
|
|
+ {{ value.desc }}
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <view class="mt-16rpx h-42rpx w-108rpx rounded-22rpx bg-#F4E5BD text-center text-24rpx text-#7F5935 line-height-42rpx" @click="toUse(value)">
|
|
|
|
|
+ 去使用
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <image :src="value.icon" class="h-80rpx w-80rpx" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ </view>
|
|
|
|
|
+ <StatusTip v-else image="vip-not-data.png" tip="敬请期待" />
|
|
|
|
|
+ </view>
|
|
|
|
|
+</template>
|
|
|
|
|
+
|
|
|
|
|
+<style lang="scss" scoped>
|
|
|
|
|
+
|
|
|
|
|
+</style>
|