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

<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" />
      <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" />
        </view>
        <view v-if="phonenumber" class="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="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>
    </view>
  </view>
</template>
<script lang="ts" setup>
import { useUserStore } from '@/store/userStore';
import { useTransferPage } from '@/hooks/useTransferPage';
const userStore = useUserStore();
const { transferTo } = useTransferPage();
const avatar = computed(() => userStore.avatar);
const nickName = computed(() => userStore.nickName);
const phonenumber = computed(() => userStore.anonymousPhoneNumber);
const isVip = computed(() => userStore.isVip);
const vipInfo = computed(() => userStore.vipInfo);
const handleHeaderClick = async () => {
  // 不询问直接跳转登录
  const isLogin = await userStore.checkLogin({ askToLogin: false });
}
const handleSettingClick = async () => {
  const isLogin = await userStore.checkLogin({ askToLogin: true });
  if (isLogin) {
    transferTo('/pagesOther/pages/personal-center/setting/setting');
  }
}
</script>
<style lang="scss" scoped></style>