ieplus-app/src/pagesMain/pages/me/components/me-info.vue

<template>
  <view class="mx-30 mt-80">
    <!-- #ifdef MP-WEIXIN -->
    <view class="h-70"></view>
    <!-- #endif -->
    <view class="flex items-center justify-between gap-x-20" @click="handleHeaderClick">
      <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>
          <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" mode="aspectFit" />
            <text class="ml-10 text-20 text-primary">{{ roleDesc }}</text>
          </view>
        </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 v-if="isStudent"
      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%);" @click="handleVip">
              <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>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/userStore';
import { useTransferPage } from '@/hooks/useTransferPage';

const userStore = useUserStore();
const { transferTo, routes } = useTransferPage();
const avatar = computed(() => userStore.avatar);
const nickName = computed(() => userStore.nickName);
const phonenumber = computed(() => userStore.anonymousPhoneNumber);
const isVip = computed(() => userStore.isVip);
const isStudent = computed(() => userStore.isStudent);
const isLogin = computed(() => userStore.isLogin);
const isExperienceVip = computed(() => userStore.isExperienceVip);
const vipInfo = computed(() => userStore.vipInfo);
const roleDesc = computed(() => {
  if (isLogin.value && !isVip && !userStore.isStudent) {
    return '普通会员';
  }
  if (isVip.value) {
    if (isExperienceVip.value) {
      return '体验会员';
    }
    return 'VIP会员';
  }
  if (userStore.isAgent) {
    return '内部账号';
  }
  if (userStore.isTeacher) {
    return '教师账号';
  }
  return '普通会员';
});

const handleHeaderClick = async () => {
  // 不询问直接跳转登录
  const isLogin = await userStore.checkLogin({ askToLogin: false });
  if (isLogin) {
    setTimeout(async () => {
      await userStore.checkInfoComplete();
    }, 500)
  }
}
const handleVip = () => {
  transferTo('/pagesSystem/pages/card-verify/card-verify')
}

const handleSettingClick = async () => {
  transferTo(routes.pageSetting);
}
</script>
<style lang="scss" scoped></style>