colexiu-project/src/views/student-info/components/users/index.tsx

import { defineComponent } from 'vue'
import iconTeacher from '@/common/images/icon_teacher.png'
import { ElButton, ElDialog, ElTag } from 'element-plus'
import { state } from '@/state'
import { getUserType } from '@/helpers/utils'
import styles from './index.module.less'
import OpenMember from '@/views/user-info/components/open-member'

export const getAssetsHomeFile = (fileName: string) => {
  const path = `../../../user-info/images/${fileName}`
  const modules = import.meta.globEager('../../../user-info/images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'users',
  computed: {
    userInfo() {
      return state.user.data
    }
  },
  data() {
    return {
      memberStatus: false
    }
  },
  methods: {
    // 检验是否有对应徽章
    checkBadge(type: string) {
      // tag : 老师点亮图标
      // STYLE:个人风采
      // VIDEO：视频课
      // LIVE：直播课，
      // MUSIC：曲目 逗号隔开
      let status = false
      const { userInfo } = this
      console.log(userInfo, 'userInfo')
      switch (type) {
        case 'STYLE':
        case 'VIDEO':
        case 'LIVE':
        case 'MUSIC':
          if (userInfo.tag) {
            status = userInfo.tag.indexOf(type) > -1
          }
          break
        case 'VIP':
          status = userInfo.userVip?.vipType === 'VIP'
          break
        case 'SVIP':
          status =
            userInfo.userVip?.vipType === 'SVIP' ||
            userInfo.userVip?.vipType === 'PERMANENT_SVIP'
          break
        default:
          status = false
          break
      }
      return status
    }
  },
  render() {
    return (
      <div class={['text-center pb-8 relative overflow-hidden', styles.users]}>
        <div class="bg-[#FFE7CF] absolute left-6 top-0 text-[#AB5400] text-xs py-0.5 px-2 rounded-[10px]">
          学生
        </div>

        <img
          src={this.userInfo.heardUrl || iconTeacher}
          class="w-[68px] h-[68px] rounded-full border-2 border-[#2DC7AA] border-solid mt-6 mx-auto object-cover"
        />

        <p class="text-[#333] text-lg font-semibold pt-4 flex items-center justify-center">
          {this.userInfo.username}

          {(this.checkBadge('SVIP') || this.checkBadge('VIP')) && (
            <img
              src={
                this.checkBadge('SVIP')
                  ? getAssetsHomeFile('icon_svip.png')
                  : this.checkBadge('VIP')
                  ? getAssetsHomeFile('icon_vip.png')
                  : ''
              }
              class="w-[42px] ml-1"
            />
          )}
          {/* <img
            src={
              this.userInfo.isVip
                ? getAssetsHomeFile('icon_vip.png')
                : getAssetsHomeFile('icon_vip_default.png')
            }
            class="h-[26px]"
          /> */}
        </p>

        <div class={this.userInfo.isVip !== 1 ? 'mt-5' : ''}>
          {this.userInfo.isVip !== 1 && (
            <ElButton
              round
              type="primary"
              size="large"
              class="!px-4"
              onClick={() => {
                this.memberStatus = true
              }}
            >
              开通会员
            </ElButton>
          )}
        </div>

        <div class="text-base text-[#999] mx-[25px] mt-9 flex items-center justify-center pt-10 border-t border-solid border-[#E7E6E6]">
          <span
            class="flex items-center justify-center flex-col leading-6 cursor-pointer flex-1"
            onClick={() => {
              this.$router.push('/studentInfo/myFollow')
            }}
          >
            <b class="text-[#333333] text-[28px] pl-1 pb-1">
              {this.userInfo.starTeacherNum || 0}
            </b>
            关注
          </span>
        </div>

        <ElDialog
          modelValue={this.memberStatus}
          onUpdate:modelValue={val => (this.memberStatus = val)}
          closeOnClickModal={false}
          closeOnPressEscape={false}
        >
          <OpenMember />
        </ElDialog>
      </div>
    )
  }
})