colexiu-project/src/views/user-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 styles from './index.module.less'
import OpenMember from '../open-member'

// import musicDefault from '../../images/music_default.png'
// import musicActive from '../../images/music_active.png'
// import entryDefault from '../../images/entry_default.png'
// import entryActive from '../../images/entry_active.png'
export const getAssetsHomeFile = (fileName: string) => {
  const path = `../../images/${fileName}`
  const modules = import.meta.globEager('../../images/*')
  return modules[path].default
}

export default defineComponent({
  name: 'users',
  computed: {
    userInfo() {
      return state.user.data
    }
  },
  data() {
    return {
      memberStatus: false
    }
  },
  methods: {
    onDetail(type: string) {
      if (type === 'entry') {
        this.$router.push({
          path: '/teacherAuth'
        })
      } else if (type === 'music') {
        this.$router.push({
          path: '/musicAuth'
        })
      }
    },
    // 检验是否有对应徽章
    checkBadge(type: string) {
      // tag : 老师点亮图标
      // STYLE:个人风采
      // VIDEO：视频课
      // LIVE：直播课，
      // MUSIC：曲目 逗号隔开
      let status = false
      const { userInfo } = this
      switch (type) {
        case 'STYLE':
        case 'VIDEO':
        case 'LIVE':
        case 'MUSIC':
          if (userInfo.tag) {
            status = userInfo.tag.indexOf(type) > -1
          }
          break
        case 'VIP':
          status = userInfo.isVip > 0
          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-[#CFF2FF] absolute left-6 top-0 text-[#0089B9] 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"
            />
          )}
        </p>

        <div class="flex items-center justify-center pt-2 pb-10">
          <span class="text-base text-[#999]">勋章</span>
          <img
            src={
              this.checkBadge('SVIP') || this.checkBadge('VIP')
                ? getAssetsHomeFile('icon_member.png')
                : getAssetsHomeFile('icon_member_default.png')
            }
            class="h-[26px] px-1"
          />
          <img
            src={
              this.checkBadge('STYLE')
                ? getAssetsHomeFile('icon_cert.png')
                : getAssetsHomeFile('icon_cert_default.png')
            }
            class="h-[26px] px-1"
          />
          <img
            src={
              this.checkBadge('VIDEO')
                ? getAssetsHomeFile('icon_video.png')
                : getAssetsHomeFile('icon_video_default.png')
            }
            class="h-[26px] px-1"
          />
          <img
            src={
              this.checkBadge('LIVE')
                ? getAssetsHomeFile('icon_live.png')
                : getAssetsHomeFile('icon_live_default.png')
            }
            class="h-[26px] px-1"
          />
          <img
            src={
              this.checkBadge('MUSIC')
                ? getAssetsHomeFile('icon_music.png')
                : getAssetsHomeFile('icon_music_default.png')
            }
            class="h-[26px] px-1"
          />
        </div>

        {/* <div class="pt-3 pb-6 flex">
          {this.userInfo.entryFlag === 1 ? (
            <img
              src={entryActive}
              class="h-[26px] cursor-pointer pr-2"
              onClick={() => {
                this.onDetail('entry')
              }}
            />
          ) : (
            <img
              src={entryDefault}
              class="h-[26px] cursor-pointer pr-2"
              onClick={() => {
                this.onDetail('entry')
              }}
            />
          )}
          {this.userInfo.musicianFlag === 1 ? (
            <img
              src={musicActive}
              class="h-[26px] cursor-pointer"
              onClick={() => {
                this.onDetail('music')
              }}
            />
          ) : (
            <img
              src={musicDefault}
              class="h-[26px] cursor-pointer"
              onClick={() => {
                this.onDetail('music')
              }}
            />
          )}
        </div> */}

        <div
          class={
            this.userInfo.entryFlag !== 1 || !this.checkBadge('VIP')
              ? 'mb-9'
              : ''
          }
        >
          {this.userInfo.entryFlag !== 1 && (
            <ElButton
              round
              type="primary"
              size="large"
              plain
              class="!px-4 !bg-white hover:!bg-[#2DC7AA]"
              onClick={() => {
                this.onDetail('entry')
              }}
            >
              达人认证
            </ElButton>
          )}

          {!this.checkBadge('VIP') && (
            <ElButton
              round
              type="primary"
              size="large"
              class="!px-4"
              onClick={() => (this.memberStatus = true)}
            >
              开通会员
            </ElButton>
          )}
        </div>

        <div class="text-base text-[#999] mx-[25px] 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 border-r border-solid border-[#E7E6E6]"
            onClick={() => {
              this.$router.push('/userInfo/myFans')
            }}
          >
            <b class="text-[#333333] text-[28px] pl-1 pb-1">
              {this.userInfo.fansNum || 0}
            </b>
            粉丝
          </span>
          <span
            class="pl-3 flex items-center flex-col justify-center leading-6 cursor-pointer flex-1"
            onClick={() => {
              this.$router.push('/userInfo/musicClass')
            }}
          >
            <b class="text-[#333333] text-[28px] pl-1 pb-1">
              {this.userInfo.musicSheetNum || 0}
            </b>
            乐谱
          </span>
        </div>

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