|
@@ -1,220 +1,222 @@
|
|
|
-import { defineComponent } from 'vue'
|
|
|
-import ColField from '@/components/col-field'
|
|
|
-import SubjectModel from '../../business-components/subject-list'
|
|
|
-import styles from './cert-two.module.less'
|
|
|
-import { Button, Col, Dialog, Field, Icon, Popup, Row, Tag } from 'vant'
|
|
|
-import { teacherState } from './teacherState'
|
|
|
-
|
|
|
-import icon1 from './images/icon_1.png'
|
|
|
-import icon2 from './images/icon_2.png'
|
|
|
-import icon3 from './images/icon_3.png'
|
|
|
-import ColPopup from '@/components/col-popup'
|
|
|
-import request from '@/helpers/request'
|
|
|
-import ColFieldGroup from '@/components/col-field-group'
|
|
|
-import ColUploadVideo from '@/components/col-upload-video'
|
|
|
-import ColUpload from '@/components/col-upload'
|
|
|
-
|
|
|
-export default defineComponent({
|
|
|
- name: 'cert-two',
|
|
|
- data() {
|
|
|
- return {
|
|
|
- // choiceSubject: [],
|
|
|
- subjectStatus: false
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- choiceSubjectIds() {
|
|
|
- // 选择的科目编号
|
|
|
- let ids = teacherState.teacherCert.subjectId
|
|
|
- ? teacherState.teacherCert.subjectId.split(',')
|
|
|
- : []
|
|
|
- ids = ids.map((item: any) => Number(item))
|
|
|
- return ids
|
|
|
- },
|
|
|
- subjectList() {
|
|
|
- // 学科列表
|
|
|
- return teacherState.subjectList || []
|
|
|
- },
|
|
|
- choiceSubject() {
|
|
|
- // 选择的科目
|
|
|
- let tempArr: any[] = []
|
|
|
- console.log(this.choiceSubjectIds, this.subjectList)
|
|
|
- this.subjectList.forEach((parent: any) => {
|
|
|
- parent.subjects &&
|
|
|
- parent.subjects.forEach((sub: any) => {
|
|
|
- if (this.choiceSubjectIds.includes(sub.id)) {
|
|
|
- tempArr.push(sub as never)
|
|
|
- }
|
|
|
- })
|
|
|
- })
|
|
|
- console.log(tempArr, 'tempArr')
|
|
|
- return tempArr
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- onChoice(item: any) {
|
|
|
- teacherState.teacherCert.subjectId = item.join(',') || ''
|
|
|
-
|
|
|
- this.subjectStatus = false
|
|
|
- },
|
|
|
- async onSubjectOpen() {
|
|
|
- this.subjectStatus = true
|
|
|
- }
|
|
|
- },
|
|
|
- render() {
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <ColFieldGroup class={styles.items}>
|
|
|
- <ColField
|
|
|
- title="可教授乐器(可多选)"
|
|
|
- border={false}
|
|
|
- class={styles.itemSubject}
|
|
|
- required
|
|
|
- v-slots={{
|
|
|
- icon: () => <Icon name={icon1} size="24" />,
|
|
|
- right: () => (
|
|
|
- <Button
|
|
|
- class={styles.select}
|
|
|
- round
|
|
|
- type="primary"
|
|
|
- size="small"
|
|
|
- onClick={this.onSubjectOpen}
|
|
|
- >
|
|
|
- 选择
|
|
|
- </Button>
|
|
|
- )
|
|
|
- }}
|
|
|
- >
|
|
|
- {this.choiceSubject && this.choiceSubject.length > 0 ? (
|
|
|
- <div class={styles['tag-list']}>
|
|
|
- {this.choiceSubject.map((item: any) => (
|
|
|
- <Tag
|
|
|
- type="primary"
|
|
|
- plain
|
|
|
- round
|
|
|
- closeable
|
|
|
- size="large"
|
|
|
- style={{ backgroundColor: '#E9FFF8' }}
|
|
|
- onClose={() => {
|
|
|
- Dialog.confirm({
|
|
|
- title: '提示',
|
|
|
- message: '请确认是否删除?',
|
|
|
- confirmButtonColor: 'var(--van-primary)'
|
|
|
- }).then(() => {
|
|
|
- let ids = teacherState.teacherCert.subjectId
|
|
|
- ? teacherState.teacherCert.subjectId.split(',')
|
|
|
- : []
|
|
|
- ids = ids.map((item: any) => Number(item))
|
|
|
- const index = ids.indexOf(item.id)
|
|
|
- if (index !== -1) {
|
|
|
- ids.splice(index, 1)
|
|
|
- }
|
|
|
- teacherState.teacherCert.subjectId = ids.join(',')
|
|
|
- })
|
|
|
- }}
|
|
|
- >
|
|
|
- {item.name}
|
|
|
- </Tag>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
- ) : null}
|
|
|
- </ColField>
|
|
|
- </ColFieldGroup>
|
|
|
-
|
|
|
- <ColFieldGroup class={styles.items}>
|
|
|
- <ColField
|
|
|
- title="个人简介"
|
|
|
- border={false}
|
|
|
- v-slots={{
|
|
|
- icon: () => <Icon name={icon2} size="24" />,
|
|
|
- right: () => (
|
|
|
- <div class={styles.limit}>
|
|
|
- {teacherState.teacherCert.introduction?.length || 0}/200
|
|
|
- </div>
|
|
|
- )
|
|
|
- }}
|
|
|
- >
|
|
|
- <Field
|
|
|
- v-model={teacherState.teacherCert.introduction}
|
|
|
- rows="3"
|
|
|
- autosize
|
|
|
- maxlength={200}
|
|
|
- style={{ fontSize: '13px' }}
|
|
|
- type="textarea"
|
|
|
- placeholder="例:毕业于中国音乐学院长笛专业,曾获得中国青年管乐演奏大赛一等奖,具有8年教学经验,能够将专业知识通过简单易懂的方式教授给学员。"
|
|
|
- />
|
|
|
- </ColField>
|
|
|
- </ColFieldGroup>
|
|
|
-
|
|
|
- <ColFieldGroup class={styles.items}>
|
|
|
- {teacherState.teacherCert.styleVideo.map((item: any) => (
|
|
|
- <ColField
|
|
|
- title="个人风采"
|
|
|
- required
|
|
|
- border={false}
|
|
|
- v-slots={{
|
|
|
- icon: () => <Icon name={icon3} size="24" />
|
|
|
- }}
|
|
|
- >
|
|
|
- <Row
|
|
|
- justify="space-between"
|
|
|
- style={{ width: '100%', paddingTop: '12px' }}
|
|
|
- >
|
|
|
- <Col span={12}>
|
|
|
- <Field
|
|
|
- style={{ padding: 0 }}
|
|
|
- name="videoUrl"
|
|
|
- rules={[{ required: true, message: '请上传课程视频' }]}
|
|
|
- v-slots={{
|
|
|
- input: () => (
|
|
|
- <ColUploadVideo
|
|
|
- // bucket="video-course"
|
|
|
- v-model={item.videoUrl}
|
|
|
- // v-model:posterUrl={item.posterUrl}
|
|
|
- class={styles.upload}
|
|
|
- tips="点击上传视频"
|
|
|
- />
|
|
|
- )
|
|
|
- }}
|
|
|
- />
|
|
|
- </Col>
|
|
|
- <Col span={12}>
|
|
|
- <Field
|
|
|
- style={{ padding: 0 }}
|
|
|
- name="coverUrl"
|
|
|
- rules={[{ required: true, message: '请上传视频封面' }]}
|
|
|
- error
|
|
|
- v-slots={{
|
|
|
- input: () => (
|
|
|
- <ColUpload
|
|
|
- class={styles.upload}
|
|
|
- cropper
|
|
|
- // bucket="video-course"
|
|
|
- options={{
|
|
|
- fixedNumber: [1.77, 1],
|
|
|
- autoCropWidth: 750,
|
|
|
- autoCropHeight: 424
|
|
|
- }}
|
|
|
- v-model={item.cover}
|
|
|
- tips="点击上传视频封面"
|
|
|
- />
|
|
|
- )
|
|
|
- }}
|
|
|
- />
|
|
|
- </Col>
|
|
|
- </Row>
|
|
|
- </ColField>
|
|
|
- ))}
|
|
|
- </ColFieldGroup>
|
|
|
-
|
|
|
- <ColPopup v-model={this.subjectStatus} destroy>
|
|
|
- <SubjectModel
|
|
|
- subjectList={this.subjectList}
|
|
|
- choiceSubjectIds={this.choiceSubjectIds}
|
|
|
- onChoice={this.onChoice}
|
|
|
- />
|
|
|
- </ColPopup>
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
-})
|
|
|
+import { defineComponent } from 'vue'
|
|
|
+import ColField from '@/components/col-field'
|
|
|
+import SubjectModel from '../../business-components/subject-list'
|
|
|
+import styles from './cert-two.module.less'
|
|
|
+import { Button, Col, Dialog, Field, Icon, Popup, Row, Tag } from 'vant'
|
|
|
+import { teacherState } from './teacherState'
|
|
|
+
|
|
|
+import icon1 from './images/icon_1.png'
|
|
|
+import icon2 from './images/icon_2.png'
|
|
|
+import icon3 from './images/icon_3.png'
|
|
|
+import ColPopup from '@/components/col-popup'
|
|
|
+import request from '@/helpers/request'
|
|
|
+import ColFieldGroup from '@/components/col-field-group'
|
|
|
+import ColUploadVideo from '@/components/col-upload-video'
|
|
|
+import ColUpload from '@/components/col-upload'
|
|
|
+import ColHeader from '@/components/col-header'
|
|
|
+
|
|
|
+export default defineComponent({
|
|
|
+ name: 'cert-two',
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ // choiceSubject: [],
|
|
|
+ subjectStatus: false
|
|
|
+ }
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ choiceSubjectIds() {
|
|
|
+ // 选择的科目编号
|
|
|
+ let ids = teacherState.teacherCert.subjectId
|
|
|
+ ? teacherState.teacherCert.subjectId.split(',')
|
|
|
+ : []
|
|
|
+ ids = ids.map((item: any) => Number(item))
|
|
|
+ return ids
|
|
|
+ },
|
|
|
+ subjectList() {
|
|
|
+ // 学科列表
|
|
|
+ return teacherState.subjectList || []
|
|
|
+ },
|
|
|
+ choiceSubject() {
|
|
|
+ // 选择的科目
|
|
|
+ const tempArr: any[] = []
|
|
|
+ console.log(this.choiceSubjectIds, this.subjectList)
|
|
|
+ this.subjectList.forEach((parent: any) => {
|
|
|
+ parent.subjects &&
|
|
|
+ parent.subjects.forEach((sub: any) => {
|
|
|
+ if (this.choiceSubjectIds.includes(sub.id)) {
|
|
|
+ tempArr.push(sub as never)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ })
|
|
|
+ console.log(tempArr, 'tempArr')
|
|
|
+ return tempArr
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ onChoice(item: any) {
|
|
|
+ teacherState.teacherCert.subjectId = item.join(',') || ''
|
|
|
+
|
|
|
+ this.subjectStatus = false
|
|
|
+ },
|
|
|
+ async onSubjectOpen() {
|
|
|
+ this.subjectStatus = true
|
|
|
+ }
|
|
|
+ },
|
|
|
+ render() {
|
|
|
+ return (
|
|
|
+ <div>
|
|
|
+ <ColFieldGroup class={styles.items}>
|
|
|
+ <ColField
|
|
|
+ title="可教授乐器(可多选)"
|
|
|
+ border={false}
|
|
|
+ class={styles.itemSubject}
|
|
|
+ required
|
|
|
+ v-slots={{
|
|
|
+ icon: () => <Icon name={icon1} size="24" />,
|
|
|
+ right: () => (
|
|
|
+ <Button
|
|
|
+ class={styles.select}
|
|
|
+ round
|
|
|
+ type="primary"
|
|
|
+ size="small"
|
|
|
+ onClick={this.onSubjectOpen}
|
|
|
+ >
|
|
|
+ 选择
|
|
|
+ </Button>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {this.choiceSubject && this.choiceSubject.length > 0 ? (
|
|
|
+ <div class={styles['tag-list']}>
|
|
|
+ {this.choiceSubject.map((item: any) => (
|
|
|
+ <Tag
|
|
|
+ type="primary"
|
|
|
+ plain
|
|
|
+ round
|
|
|
+ closeable
|
|
|
+ size="large"
|
|
|
+ style={{ backgroundColor: '#E9FFF8' }}
|
|
|
+ onClose={() => {
|
|
|
+ Dialog.confirm({
|
|
|
+ title: '提示',
|
|
|
+ message: '请确认是否删除?',
|
|
|
+ confirmButtonColor: 'var(--van-primary)'
|
|
|
+ }).then(() => {
|
|
|
+ let ids = teacherState.teacherCert.subjectId
|
|
|
+ ? teacherState.teacherCert.subjectId.split(',')
|
|
|
+ : []
|
|
|
+ ids = ids.map((item: any) => Number(item))
|
|
|
+ const index = ids.indexOf(item.id)
|
|
|
+ if (index !== -1) {
|
|
|
+ ids.splice(index, 1)
|
|
|
+ }
|
|
|
+ teacherState.teacherCert.subjectId = ids.join(',')
|
|
|
+ })
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ {item.name}
|
|
|
+ </Tag>
|
|
|
+ ))}
|
|
|
+ </div>
|
|
|
+ ) : null}
|
|
|
+ </ColField>
|
|
|
+ </ColFieldGroup>
|
|
|
+
|
|
|
+ <ColFieldGroup class={styles.items}>
|
|
|
+ <ColField
|
|
|
+ title="个人简介"
|
|
|
+ border={false}
|
|
|
+ v-slots={{
|
|
|
+ icon: () => <Icon name={icon2} size="24" />,
|
|
|
+ right: () => (
|
|
|
+ <div class={styles.limit}>
|
|
|
+ {teacherState.teacherCert.introduction?.length || 0}/200
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Field
|
|
|
+ v-model={teacherState.teacherCert.introduction}
|
|
|
+ rows="3"
|
|
|
+ autosize
|
|
|
+ maxlength={200}
|
|
|
+ style={{ fontSize: '13px' }}
|
|
|
+ type="textarea"
|
|
|
+ placeholder="例:毕业于中国音乐学院长笛专业,曾获得中国青年管乐演奏大赛一等奖,具有8年教学经验,能够将专业知识通过简单易懂的方式教授给学员。"
|
|
|
+ />
|
|
|
+ </ColField>
|
|
|
+ </ColFieldGroup>
|
|
|
+
|
|
|
+ <ColFieldGroup class={styles.items}>
|
|
|
+ {teacherState.teacherCert.styleVideo.map((item: any) => (
|
|
|
+ <ColField
|
|
|
+ title="个人风采"
|
|
|
+ required
|
|
|
+ border={false}
|
|
|
+ v-slots={{
|
|
|
+ icon: () => <Icon name={icon3} size="24" />
|
|
|
+ }}
|
|
|
+ >
|
|
|
+ <Row
|
|
|
+ justify="space-between"
|
|
|
+ style={{ width: '100%', paddingTop: '12px' }}
|
|
|
+ >
|
|
|
+ <Col span={12}>
|
|
|
+ <Field
|
|
|
+ style={{ padding: 0 }}
|
|
|
+ name="videoUrl"
|
|
|
+ rules={[{ required: true, message: '请上传课程视频' }]}
|
|
|
+ v-slots={{
|
|
|
+ input: () => (
|
|
|
+ <ColUploadVideo
|
|
|
+ // bucket="video-course"
|
|
|
+ v-model={item.videoUrl}
|
|
|
+ // v-model:posterUrl={item.posterUrl}
|
|
|
+ class={styles.upload}
|
|
|
+ tips="点击上传视频"
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ <Col span={12}>
|
|
|
+ <Field
|
|
|
+ style={{ padding: 0 }}
|
|
|
+ name="coverUrl"
|
|
|
+ rules={[{ required: true, message: '请上传视频封面' }]}
|
|
|
+ error
|
|
|
+ v-slots={{
|
|
|
+ input: () => (
|
|
|
+ <ColUpload
|
|
|
+ class={styles.upload}
|
|
|
+ cropper
|
|
|
+ // bucket="video-course"
|
|
|
+ options={{
|
|
|
+ fixedNumber: [1.77, 1],
|
|
|
+ autoCropWidth: 750,
|
|
|
+ autoCropHeight: 424
|
|
|
+ }}
|
|
|
+ v-model={item.cover}
|
|
|
+ tips="点击上传视频封面"
|
|
|
+ />
|
|
|
+ )
|
|
|
+ }}
|
|
|
+ />
|
|
|
+ </Col>
|
|
|
+ </Row>
|
|
|
+ </ColField>
|
|
|
+ ))}
|
|
|
+ </ColFieldGroup>
|
|
|
+
|
|
|
+ <ColPopup v-model={this.subjectStatus} destroy>
|
|
|
+ <ColHeader />
|
|
|
+ <SubjectModel
|
|
|
+ subjectList={this.subjectList}
|
|
|
+ choiceSubjectIds={this.choiceSubjectIds}
|
|
|
+ onChoice={this.onChoice}
|
|
|
+ />
|
|
|
+ </ColPopup>
|
|
|
+ </div>
|
|
|
+ )
|
|
|
+ }
|
|
|
+})
|