添加页面

src/components/col-upload-video/index.tsx

@@ -198,7 +198,7 @@ export default defineComponent({
                       ref="videoUpload"
                       class={styles.uploadImg}
                       src={this.modelValue + '#t=1,4'}
-                      // poster={iconUploadPoster}
+                      // poster={this.posterUrl || ''}
                     />
                   ) : (
                     <div class={styles.uploader}>

src/teacher/teacher-cert/cert-two.module.less

@@ -12,6 +12,14 @@
   .tag-list {
     margin-top: 12px;
   }
+
+  .upload {
+    width: 150px;
+    height: 85px;
+    border-radius: 10px;
+    overflow: hidden;
+    // margin: 0 0 12px;
+  }
 }
 
 .itemSubject {

src/teacher/teacher-cert/cert-two.tsx

@@ -2,7 +2,7 @@ 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, Dialog, Field, Icon, Popup, Tag } from 'vant'
+import { Button, Col, Dialog, Field, Icon, Popup, Row, Tag } from 'vant'
 import { teacherState } from './teacherState'
 
 import icon1 from './images/icon_1.png'
@@ -10,6 +10,8 @@ import icon2 from './images/icon_2.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',
@@ -143,6 +145,60 @@ export default defineComponent({
           </ColField>
         </ColFieldGroup>
 
+        <ColFieldGroup class={styles.items}>
+          {teacherState.teacherCert.styleVideoJson.map((item: any) => (
+            <ColField title="个人风采视频及视频封面" required border={false}>
+              <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}

src/teacher/teacher-cert/teacherState.ts

@@ -16,6 +16,12 @@ export const teacherState = reactive({
     subject: null,
     gradCertificate: null,
     degreeCertificate: null,
-    teacherCertificate: null
+    teacherCertificate: null,
+    styleVideoJson: [
+      {
+        videoUrl: '',
+        cover: ''
+      }
+    ]
   }
 })