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'

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 && (
                  <p class={styles.liveTag}>直播中</p>
                )}

                {(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.teacherOperation}>
                <Button
                  type="primary"
                  size="small"
                  plain
                  round
                  class={[
                    styles.btn,
                    this.userInfo.isStar ? styles.btnStar : ''
                  ]}
                  onClick={this.onStart}
                >
                  {/* {!this.userInfo.isStar && <Icon name="plus" />} */}

                  {this.userInfo.isStar ? '已关注' : '关注'}
                </Button>
                <Button
                  type="primary"
                  size="small"
                  round
                  style={{ marginLeft: '5px' }}
                  class={styles.btn}
                  icon={IconChat}
                  onClick={() => {
                    postMessage({
                      api: 'joinChatGroup',
                      content: {
                        type: 'single', // single 单人 multi 多人
                        id: this.userInfo.imUserId
                        // id: this.teacherId
                      }
                    })
                  }}
                >
                  {/* <Icon name={} size="16" style={{ marginRight: '3px' }} /> */}
                  聊天
                </Button>
              </div>
            </div>
            <div class={styles.teacherInfo}>
              <div class={styles.teacherInfoName}>
                {this.userInfo.username || `游客${this.userInfo.userId || ''}`}
              </div>
              {this.userInfo.degreeFlag ? <img src={IconXueli} /> : null}
              {this.userInfo.teacherFlag ? <img src={IconJiaozi} /> : null}
            </div>
            <div class={styles.teacherHonor}>
              <div>勋章：</div>
              <div class={styles.teacherIcons} onClick={this.openTeacherIcon}>
                <Image
                  class={styles.iconOther}
                  src={
                    this.checkBadge('STYLE')
                      ? getAssetsHomeFile('cert_active.png')
                      : getAssetsHomeFile('cert_default.png')
                  }
                />
                <Image
                  class={styles.iconOther}
                  src={
                    this.checkBadge('VIDEO')
                      ? getAssetsHomeFile('video_active.png')
                      : getAssetsHomeFile('video_default.png')
                  }
                />
                <Image
                  class={styles.iconOther}
                  src={
                    this.checkBadge('LIVE')
                      ? getAssetsHomeFile('live_active.png')
                      : getAssetsHomeFile('live_default.png')
                  }
                />
                <Image
                  class={styles.iconOther}
                  src={
                    this.checkBadge('MUSIC')
                      ? getAssetsHomeFile('music_active.png')
                      : getAssetsHomeFile('music_default.png')
                  }
                />
              </div>
              <div class={styles.score}>评分：</div>
              <div class={styles.level}>
                {this.starGrade ? (
                  <Rate
                    readonly
                    modelValue={this.starGrade}
                    iconPrefix="iconfont"
                    color="#FFC459"
                    void-icon="star_default"
                    icon="star_active"
                    size={15}
                  />
                ) : (
                  <span style={{ fontSize: '12px', color: '#999999' }}>
                    暂无评分
                  </span>
                )}
              </div>
            </div>
            <div class={styles.piNameSubject}>
              <Image
                class={styles.subjectSection}
                src={getAssetsHomeFile('icon_subject.png')}
                fit="contain"
              />
              <div class={styles.subjectList}>
                {this.subjectNameList.map((item: any) => (
                  <span class={styles.subject}>{item}</span>
                ))}
              </div>
            </div>
            <div class={styles['teacher-bottom']}>
              <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>
        <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>
      </>
    )
  }
})