|
@@ -4,6 +4,8 @@ import styles from './teacher-home.module.less'
|
|
|
import { Button, Cell, Icon, Image, Rate, Sticky, Tab, Tabs, Toast } from 'vant'
|
|
|
|
|
|
import iconTeacher from '@common/images/icon_teacher.png'
|
|
|
+import musicCert from '@common/images/music_cert.png'
|
|
|
+import teacherCert from '@common/images/teacher_cert.png'
|
|
|
import Single from './components/single'
|
|
|
import Practice from './components/practice'
|
|
|
import Live from './components/live'
|
|
@@ -41,6 +43,22 @@ export default defineComponent({
|
|
|
// console.log(result)
|
|
|
} catch {}
|
|
|
},
|
|
|
+ computed: {
|
|
|
+ subjectNameList() {
|
|
|
+ const userInfo: any = this.userInfo
|
|
|
+ const subjectName = userInfo.subjectName
|
|
|
+ return subjectName ? subjectName.split(',') : []
|
|
|
+ }
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ const height = document.querySelector('.headContainer')?.clientHeight || 0
|
|
|
+ height &&
|
|
|
+ ((
|
|
|
+ document.querySelector('.headContainer') as any
|
|
|
+ ).style.height = `${height}px`)
|
|
|
+ })
|
|
|
+ },
|
|
|
methods: {
|
|
|
async onStart() {
|
|
|
// 关注与取消关注
|
|
@@ -63,7 +81,12 @@ export default defineComponent({
|
|
|
render() {
|
|
|
return (
|
|
|
<div class={styles['teacher-record']}>
|
|
|
- <Sticky position="top" offsetTop={0}>
|
|
|
+ {/* <div class={styles.headContainer}> */}
|
|
|
+ <Sticky
|
|
|
+ position="top"
|
|
|
+ offsetTop={0}
|
|
|
+ // style={{ position: 'fixed', left: 0, right: 0, zIndex: 999 }}
|
|
|
+ >
|
|
|
<ColHeader
|
|
|
class={styles.teacherHeader}
|
|
|
background="transparent"
|
|
@@ -78,6 +101,7 @@ export default defineComponent({
|
|
|
<Cell
|
|
|
class={styles['open-teacher-info']}
|
|
|
border={false}
|
|
|
+ center
|
|
|
v-slots={{
|
|
|
icon: () => (
|
|
|
<Image
|
|
@@ -90,28 +114,45 @@ export default defineComponent({
|
|
|
>
|
|
|
<div class={styles['teacher-info']}>
|
|
|
<div class={styles['teacher-name']}>
|
|
|
- {this.userInfo.username ||
|
|
|
- `游客${this.userInfo.userId || ''}`}
|
|
|
+ <div class={styles.teacherCert}>
|
|
|
+ <span style={{ display: 'inline-block' }}>
|
|
|
+ {this.userInfo.username ||
|
|
|
+ `游客${this.userInfo.userId || ''}`}
|
|
|
+ </span>
|
|
|
+
|
|
|
+ {this.userInfo.entryFlag === 1 && (
|
|
|
+ <Image
|
|
|
+ class={styles.cert}
|
|
|
+ src={teacherCert}
|
|
|
+ // fit="contain"
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ {this.userInfo.musicianFlag === 1 && (
|
|
|
+ <Image
|
|
|
+ class={styles.cert}
|
|
|
+ src={musicCert}
|
|
|
+ // fit="contain"
|
|
|
+ />
|
|
|
+ )}
|
|
|
+ </div>
|
|
|
+ <Button
|
|
|
+ type="primary"
|
|
|
+ size="mini"
|
|
|
+ plain={!!this.userInfo.isStar}
|
|
|
+ style={{ borderRadius: '5px', padding: '5px 10px' }}
|
|
|
+ onClick={this.onStart}
|
|
|
+ >
|
|
|
+ {!this.userInfo.isStar && <Icon name="plus" />}
|
|
|
+
|
|
|
+ {this.userInfo.isStar ? '已关注' : '关注'}
|
|
|
+ </Button>
|
|
|
</div>
|
|
|
<p class={styles.piNameSubject}>
|
|
|
- <span class={styles.subject}>
|
|
|
- {this.userInfo.subjectName}
|
|
|
- </span>
|
|
|
+ {this.subjectNameList.map((item: any) => (
|
|
|
+ <span class={styles.subject}>{item}</span>
|
|
|
+ ))}
|
|
|
</p>
|
|
|
</div>
|
|
|
- <div class={styles['teacher-desc']}>
|
|
|
- <Button
|
|
|
- type="primary"
|
|
|
- size="mini"
|
|
|
- plain={!!this.userInfo.isStar}
|
|
|
- style={{ borderRadius: '5px', padding: '5px 10px' }}
|
|
|
- onClick={this.onStart}
|
|
|
- >
|
|
|
- {!this.userInfo.isStar && <Icon name="plus" />}
|
|
|
-
|
|
|
- {this.userInfo.isStar ? '已关注' : '关注'}
|
|
|
- </Button>
|
|
|
- </div>
|
|
|
</Cell>
|
|
|
<div class={styles['teacher-bottom']}>
|
|
|
<div class={styles.level}>
|
|
@@ -154,6 +195,7 @@ export default defineComponent({
|
|
|
<Tab title="乐谱" name="music"></Tab>
|
|
|
</Tabs>
|
|
|
</Sticky>
|
|
|
+ {/* </div> */}
|
|
|
|
|
|
<div class={styles.container}>
|
|
|
{this.tabs === 'single' && <Single userInfo={this.userInfo} />}
|