|
@@ -0,0 +1,256 @@
|
|
|
+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 IconXueli from '@common/images/icon-xueli.png'
|
|
|
+import IconJiaozi from '@common/images/icon-jiaozi.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: ''
|
|
|
+ }
|
|
|
+ },
|
|
|
+ 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: {
|
|
|
+ // 检验是否有对应徽章
|
|
|
+ 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
|
|
|
+ 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('VIP') && styles.avatarActive
|
|
|
+ ]}
|
|
|
+ round
|
|
|
+ src={this.userInfo.heardUrl || iconTeacher}
|
|
|
+ fit="cover"
|
|
|
+ />
|
|
|
+
|
|
|
+ {this.userInfo.liveing === 1 && (
|
|
|
+ <p class={styles.liveTag}>直播中</p>
|
|
|
+ )}
|
|
|
+
|
|
|
+ <Image
|
|
|
+ class={styles.teacherIconVip}
|
|
|
+ src={
|
|
|
+ this.checkBadge('VIP')
|
|
|
+ ? getAssetsHomeFile('vip_active.png')
|
|
|
+ : getAssetsHomeFile('vip_default.png')
|
|
|
+ }
|
|
|
+ />
|
|
|
+ </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>
|
|
|
+
|
|
|
+ <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>
|
|
|
+ </>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|