h5-colexiu/src/student/teacher-dependent/model/teacher-header.tsx

import { Button, Cell, Icon, Image, Popup, Rate, Toast } from 'vant'
import { defineComponent } from 'vue'
import styles from './teacher-header.module.less'
import { postMessage } from '@/helpers/native-message'
import iconTeacher from '@common/images/icon_teacher.png'
import request from '@/helpers/request'
// import IconXueli from '@common/images/icon-xueli.png'
// import IconJiaozi from '@common/images/icon-jiaozi.png'
// import IconChat from '../images/icon-chat.png'
import iconSmallLive from '../images/icon-small-live.png'

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

export default defineComponent({
  name: 'teacher-header',
  props: {
    userInfo: {
      type: Object,
      default: () => ({})
    },
    teacherId: {
      type: String || Number,
      default: ''
    }
  },
  emits: ['star'],
  data() {
    return {
      iconShow: false
    }
  },
  computed: {
    subjectNameList() {
      const userInfo: any = this.userInfo
      const subjectName = userInfo.subjectName
      return subjectName ? subjectName.split(',') : []
    },
    starGrade() {
      const { starGrade } = this.userInfo as any
      return Number(starGrade) || 0
    }
  },
  methods: {
    async onStart() {
      // 关注与取消关注
      try {
        const star = this.userInfo.isStar ? 0 : 1
        await request.get('/api-student/teacher/starOrUnStar', {
          params: {
            userId: this.teacherId,
            starStatus: star
          }
        })
        // const str = star ? '关注成功' : '已取消关注'
        // this.userInfo.isStar = star
        const count = star
          ? this.userInfo.fansNum + 1
          : this.userInfo.fansNum - 1
        // this.userInfo.fansNum = count <= 0 ? 0 : count
        this.$emit('star', {
          isStar: star,
          fansNum: count <= 0 ? 0 : count
        })

        // Toast(str)
      } catch {
        //
      }
    },
    // 检验是否有对应徽章
    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.userVip?.vipType === 'VIP'
          break
        case 'SVIP':
          status =
            userInfo.userVip?.vipType === 'SVIP' ||
            userInfo.userVip?.vipType === 'PERMANENT_SVIP'
          break
        default:
          status = false
          break
      }
      return status
    },

    openTeacherIcon() {
      this.iconShow = true
    }
  },
  render() {
    const iconList = [
      {
        icon: 'cert_active.png',
        title: '演奏Mlog老师',
        des: '个人风采中上传老师风采视频并通过审核'
      },
      {
        icon: 'video_active.png',
        title: '教学视频老师',
        des: '发布您制作的教学视频课程并通过审核'
      },
      {
        icon: 'live_active.png',
        title: '直播up老师',
        des: '达到开通直播权限标准并开通直播功能'
      },
      {
        icon: 'music_active.png',
        title: '乐谱歌单老师',
        des: '上传您制作的乐谱并通过审核'
      }
    ]
    return (
      <>
        <div class={styles.headerContent}>
          <div class={styles.headerCount}>
            <div class={styles.teacherContent}>
              <div
                class={styles.teacherIcon}
                onClick={() => {
                  // 判断是否在直播中
                  if (this.userInfo.liveing === 1) {
                    postMessage({
                      api: 'joinLiveRoom',
                      content: {
                        roomId: this.userInfo.roomUid,
                        teacherId: this.userInfo.userId
                      }
                    })
                  }
                }}
              >
                {/* iy */}
                <Image
                  class={[
                    styles.avatar,
                    (this.checkBadge('SVIP') || this.checkBadge('VIP')) &&
                      styles.avatarActive
                  ]}
                  round
                  src={this.userInfo.heardUrl || iconTeacher}
                  fit="cover"
                />

                {this.userInfo.liveing === 1 && (
                  <img src={iconSmallLive}  class={styles.liveTag} />
                )}

                {(this.checkBadge('SVIP') || this.checkBadge('VIP')) && (
                  <Image
                    class={styles.teacherIconVip}
                    src={
                      this.checkBadge('SVIP')
                        ? getAssetsHomeFile('svip_active.png')
                        : this.checkBadge('VIP')
                        ? getAssetsHomeFile('vip_active.png')
                        : ''
                    }
                  />
                )}
              </div>
              <div class={styles.teacherUs}>
                <div class={styles.teacherInfo}>
                  <div class={styles.teacherInfoName}>
                    {this.userInfo.username ||
                      `游客${this.userInfo.userId || ''}`}
                  </div>
                  <div class={styles.teacherHonor}>
                    <div class={styles.level}>
                      {this.starGrade ? (
                        <Rate
                          readonly
                          modelValue={this.starGrade}
                          iconPrefix="iconfont"
                          color="#FFC459"
                          void-icon="star_default"
                          icon="star_active"
                          size={15}
                        />
                      ) : (
                        ''
                      )}
                    </div>
                  </div>
                </div>
                <div class={styles['teacher-bottom']}>
                  <img src={getAssetsHomeFile('icon-cert.png')} class={styles.iconCert} />
                  <div class={styles['teacher-data']}>
                    <div class={styles['teacher-data_item']}>
                      粉丝 <span>{this.userInfo.fansNum || 0}</span>
                    </div>
                    <div class={styles['teacher-data_item']}>
                      已上课时 <span>{this.userInfo.expTime || 0}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class={styles.piNameSubject}>
                <Image
                  class={styles.subjectSection}
                  src={getAssetsHomeFile('icon_subject1.png')}
                  fit="contain"
                />
                <div class={styles.subjectList}>
                  {this.subjectNameList.map((item: any) => (
                    <span class={styles.subject}>{item}</span>
                  ))}
                </div>
              </div>
            <div class={styles.teacherOperation}>
              <Button
                type="primary"
                size="small"
                class={[styles.btn, !this.userInfo.isStar && styles.btnStar]}
                onClick={this.onStart}
              >
                {!this.userInfo.isStar ? <img src={getAssetsHomeFile('icon-add.png')} /> : <img src={getAssetsHomeFile('icon-add-star.png')} />}
                {/* <img src={getAssetsHomeFile('icon-add.png')} /> */}
                {this.userInfo.isStar ? '已关注' : '关注'}
              </Button>
              <Button
                type="primary"
                size="small"
                class={styles.btn}
                onClick={() => {
                  postMessage({
                    api: 'joinChatGroup',
                    content: {
                      type: 'single', // single 单人 multi 多人
                      id: this.userInfo.imUserId
                      // id: this.teacherId
                    }
                  })
                }}
              >
                <img src={getAssetsHomeFile('icon-message.png')} />
                聊天
              </Button>
            </div>
          </div>
        </div>
        {/* <Popup class={styles['teaherPopup']} v-model:show={this.iconShow}>
          <Image src={getAssetsHomeFile('teacher-icon.png')} />
          <div class={styles.teacherIconWrap}>
            {iconList.map(n => {
              return (
                <div class={styles.teacherIconItem}>
                  <div class={styles.teacherIconItemTop}>
                    <Image src={getAssetsHomeFile(n.icon)} />
                    <div class={styles.teacherIconTitle}>{n.title}</div>
                  </div>
                  <div class={styles.teacherIconDes}>{n.des}</div>
                </div>
              )
            })}
          </div>
          <Image
            onClick={() => (this.iconShow = false)}
            class={styles.closeIcon}
            src={getAssetsHomeFile('icon-close.png')}
          />
        </Popup> */}
      </>
    )
  }
})