|
|
@@ -1,37 +1,44 @@
|
|
|
<template>
|
|
|
<view class="mx-30 mt-80">
|
|
|
<view class="flex items-center justify-between gap-x-20" @click="handleHeaderClick">
|
|
|
- <ie-image :src="avatar" custom-class="w-128 h-128" :round="999" />
|
|
|
+ <ie-image :src="avatar" custom-class="w-134 h-134" :round="999" />
|
|
|
<view class="flex-1 min-w-1">
|
|
|
<view class="text-40 text-fore-title flex items-center gap-x-20">
|
|
|
<text class="font-bold">{{ nickName }}</text>
|
|
|
- <ie-image v-if="isVip" src="/static/personal/vip_tag.png" custom-class="w-100 h-36" />
|
|
|
+ <!-- <ie-image v-if="isVip" src="/static/personal/vip_tag.png" custom-class="w-100 h-36" /> -->
|
|
|
+ <view v-if="isLogin" class="bg-[#EBF4FC] pl-6 pr-20 py-6 rounded-20 flex items-center">
|
|
|
+ <ie-image src="/static/personal/icon-role.png" custom-class="w-30 h-30" />
|
|
|
+ <text class="ml-10 text-20 text-primary">{{ roleDesc }}</text>
|
|
|
+ </view>
|
|
|
</view>
|
|
|
- <view v-if="phonenumber" class="text-30 text-fore-subcontent">{{ phonenumber }}</view>
|
|
|
+ <view v-if="!isLogin" class="mt-8 text-34 text-[#666666]">注册/登录</view>
|
|
|
+ <view v-else-if="phonenumber" class="mt-8 text-30 text-fore-subcontent">{{ phonenumber }}</view>
|
|
|
</view>
|
|
|
<view>
|
|
|
<ie-image src="/static/personal/setting.png" custom-class="w-48 h-48" @click.stop="handleSettingClick" />
|
|
|
</view>
|
|
|
</view>
|
|
|
- <!-- <view class="my-30 flex items-center text-center">
|
|
|
- <view class="flex-1">
|
|
|
- <view class="text-30 text-fore-title font-bold">0</view>
|
|
|
- <view class="mt-10 text-26 text-fore-subcontent">做题数量</view>
|
|
|
- </view>
|
|
|
- <view class="flex-1">
|
|
|
- <view class="text-30 text-fore-title font-bold">0</view>
|
|
|
- <view class="mt-10 text-26 text-fore-subcontent">视频观看时长</view>
|
|
|
- </view>
|
|
|
- <view class="flex-1">
|
|
|
- <view class="text-30 text-fore-title font-bold">0</view>
|
|
|
- <view class="mt-10 text-26 text-fore-subcontent">登录次数</view>
|
|
|
- </view>
|
|
|
- </view> -->
|
|
|
- <view v-if="isVip" class="mt-30 relative">
|
|
|
- <ie-image src="/static/personal/buy_vip.png" custom-class="w-full h-96" />
|
|
|
- <view class="absolute left-100 right-20 top-0 h-full flex items-center justify-between">
|
|
|
- <view class="text-26 text-fore-title">已开通会员,享受权益中</view>
|
|
|
- <view class="text-26 text-fore-subcontent">{{ vipInfo.outDate }} 到期</view>
|
|
|
+
|
|
|
+ <view v-if="isVip"
|
|
|
+ class="mt-50 h-184 rounded-15 relative bg-gradient-to-r from-[#253045] to-[#141D2F] overflow-hidden">
|
|
|
+ <ie-image src="/static/personal/bg-vip-card.png"
|
|
|
+ custom-class="w-276 h-full absolute left-1/2 top-0 -translate-x-1/2 z-0" mode="heightFix" />
|
|
|
+ <view class="h-full box-border px-45 flex items-center justify-between relative z-1">
|
|
|
+ <view class="flex-1 min-w-1">
|
|
|
+ <view class="flex items-center justify-between">
|
|
|
+ <ie-image src="/static/personal/icon-vip.png" custom-class="w-210 h-46" />
|
|
|
+ <view v-if="!isVip" class="flex items-center justify-center px-20 py-10 rounded-22"
|
|
|
+ style="background: radial-gradient( 0% 0% at 0% 0%, #FEE8BD 0%, #EFCC8D 100%);">
|
|
|
+ <text class="mr-4 text-24 text-[#532F12] font-bold leading-23">开通会员</text>
|
|
|
+ <uv-icon name="arrow-right" size="13" color="#532F12" />
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="mt-16 text-26 text-[#FEECCB]">{{ isVip ? `使用有效期至 ${vipInfo.outDate}` : '开通VIP会员,享受更多专属权益' }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <view class="shrink-0">
|
|
|
+ <ie-image v-if="isVip" src="/static/personal/icon-vip2.png" custom-class="w-160 h-168" mode="heightFix" />
|
|
|
+ </view>
|
|
|
</view>
|
|
|
</view>
|
|
|
</view>
|
|
|
@@ -45,7 +52,24 @@ const avatar = computed(() => userStore.avatar);
|
|
|
const nickName = computed(() => userStore.nickName);
|
|
|
const phonenumber = computed(() => userStore.anonymousPhoneNumber);
|
|
|
const isVip = computed(() => userStore.isVip);
|
|
|
+const isLogin = computed(() => userStore.isLogin);
|
|
|
const vipInfo = computed(() => userStore.vipInfo);
|
|
|
+const roleDesc = computed(() => {
|
|
|
+ if (isLogin.value && !isVip && !userStore.isStudent) {
|
|
|
+ return '普通会员';
|
|
|
+ }
|
|
|
+ if (isVip.value) {
|
|
|
+ return 'VIP会员';
|
|
|
+ }
|
|
|
+ if (userStore.isAgent) {
|
|
|
+ return '内部账号';
|
|
|
+ }
|
|
|
+ if (userStore.isTeacher) {
|
|
|
+ return '教师账号';
|
|
|
+ }
|
|
|
+ return '普通会员';
|
|
|
+});
|
|
|
+
|
|
|
const handleHeaderClick = async () => {
|
|
|
// 不询问直接跳转登录
|
|
|
const isLogin = await userStore.checkLogin({ askToLogin: false });
|