Merge branch 'master' into jenkins

public/project/css/companionTeacher.css

@@ -158,6 +158,7 @@ span {
   margin: 0 auto;
   min-height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .banner,

public/project/css/initiation.css

@@ -15,6 +15,7 @@ span {
   margin: 0 auto;
   min-height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .banner,

public/project/css/manageTeacher.css

@@ -158,6 +158,7 @@ span {
   margin: 0 auto;
   min-height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .banner,

public/project/css/preRegister.css

@@ -15,6 +15,7 @@ span {
   margin: 0 auto;
   min-height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .banner,

public/project/css/schoolRegister.css

@@ -158,6 +158,7 @@ span {
   margin: 0 auto;
   min-height: 100vh;
   overflow: hidden;
+  position: relative;
 }
 
 .banner,

public/project/schoolRegister.html

@@ -136,7 +136,7 @@
 
     <van-popup v-model:show="showPicker" position="bottom" round>
       <van-picker show-toolbar :columns="columns" @cancel="showPicker = false" @confirm="onConfirm"
-        :columns-field-names="{ text: 'name', value: 'code', children: 'areas' }" />
+        :columns-field-names="{ text: 'name', value: 'code' }" />
     </van-popup>
 
     <van-popup v-model:show="submitStatus" round style="width: 75%" :close-on-click-overlay="false">
@@ -155,7 +155,7 @@
   <!-- <script src="https://cdn.jsdelivr.net/npm/umi-request@1.4.0/dist/index.min.js"></script> -->
   <script src="./js/axios.js"></script>
   <script type="text/javascript" src="./js/utils.js"></script>
-  <script type="text/javascript" src="./js/area.js"></script>
+  <!-- <script type="text/javascript" src="./js/area.js"></script> -->
   <script>
     // 乐团交付，乐团停止或关闭，有新的交付团；则不允许报名
     var classList = []
@@ -196,25 +196,30 @@
         }
         try {
           this.setLoading(true)
-          console.log(areas)
-          const tempareas = []
-          areas.forEach(item => {
-            const temp = {
-              name: item.name,
-              code: item.code,
-              areas: []
-            }
-            if (item.areas && item.areas.length > 0) {
-              item.areas.forEach(child => {
-                temp.areas.push({
-                  name: child.name,
-                  code: child.code,
-                })
-              })
-            }
-            tempareas.push(temp)
-          })
-          this.columns = tempareas || []
+          // console.log(areas)
+          // const tempareas = []
+          // areas.forEach(item => {
+          //   const temp = {
+          //     name: item.name,
+          //     code: item.code,
+          //     areas: []
+          //   }
+          //   if (item.areas && item.areas.length > 0) {
+          //     item.areas.forEach(child => {
+          //       temp.areas.push({
+          //         name: child.name,
+          //         code: child.code,
+          //       })
+          //     })
+          //   }
+          //   tempareas.push(temp)
+          // })
+          // this.columns = tempareas || []
+
+          var res = await axios.get('/api-school/open/school/city')
+          if (res.data.code === 200) {
+            this.columns = res.data.data || []
+          }
         } catch {
           vant.showDialog({
             message: '信息获取失败，请联系老师',

src/helpers/date.ts

@@ -0,0 +1,33 @@
+import dayjs from 'dayjs'
+export function addFormMinute(timerStr, time = 0) {
+  const timer = dayjs('2021-12-17' + ' ' + timerStr).add(time, 'minute')
+  return timer.format('HH:mm:ss')
+}
+export function addFormMinuteAddS(timerStr, time = 0) {
+  const timer = dayjs('2021-12-17' + ' ' + timerStr)
+    .add(time, 'minute')
+    .add(1, 'second')
+  return timer.format('HH:mm:ss')
+}
+export function addFormMinuteMS(timerStr, time = 0) {
+  const timer = dayjs('2021-12-17' + ' ' + timerStr)
+    .add(time, 'minute')
+    .subtract(1, 'second')
+  return timer.format('HH:mm:ss')
+}
+export function reduceFormMinute(timerStr, time = 0) {
+  const timer = dayjs('2021-12-17' + ' ' + timerStr).subtract(time, 'minute')
+  return timer.format('HH:mm:ss')
+}
+export function reduceFormMinuteAddS(timerStr, time = 0) {
+  const timer = dayjs('2021-12-17' + ' ' + timerStr)
+    .subtract(time, 'minute')
+    .add(1, 'second')
+  return timer.format('HH:mm:ss')
+}
+export function reduceFormMinuteMS(timerStr, time = 0) {
+  const timer = dayjs('2021-12-17' + ' ' + timerStr)
+    .subtract(time, 'minute')
+    .subtract(1, 'second')
+  return timer.format('HH:mm:ss')
+}

src/school/companion-teacher/companion-detail.tsx

@@ -248,7 +248,7 @@ export default defineComponent({
                     postMessage({
                       api: 'callPhone',
                       content: {
-                        id: state.detail.phone
+                        phone: state.detail.phone
                       }
                     })
                     state.showMessage = false

src/school/companion-teacher/index.tsx

@@ -356,7 +356,7 @@ export default defineComponent({
                     postMessage({
                       api: 'callPhone',
                       content: {
-                        id: form.selectItem.phone
+                        phone: form.selectItem.phone
                       }
                     })
                     form.showMessage = false

src/student/music-group/pre-apply/component/apply.tsx

@@ -73,7 +73,6 @@ export default defineComponent({
         )
         const detail = data || {}
 
-        console.log(detail, 'detail')
         state.detail = detail
 
         const grade: any = state.currentGrade.find((item: any) => item.value == detail.currentGrade)
@@ -109,7 +108,6 @@ export default defineComponent({
             }
           }
         )
-        console.log(subjects, 'subject')
         const rows = subjects.data.rows || []
         rows.forEach((item: any) => {
           state.subjectList.push({
@@ -185,6 +183,14 @@ export default defineComponent({
               v-model={forms.username}
               maxlength={15}
               rules={[{ validator, message }]}
+              // onBlur={() => {
+              //   setTimeout(function () {
+              //     const scrollHeight =
+              //       document.documentElement.scrollTop || document.body.scrollTop || 0
+
+              //     window.scrollTo(0, Math.max(scrollHeight - 1, 0))
+              //   }, 100)
+              // }}
             />
             <Field
               required
@@ -278,6 +284,7 @@ export default defineComponent({
               placeholder="请输入手机号"
               v-model={forms.phone}
               maxlength={11}
+              type="tel"
               rules={[{ pattern: state.pattern, message: '输入监护人手机号码有误' }]}
             />
           </CellGroup>
@@ -290,7 +297,14 @@ export default defineComponent({
         </Form>
 
         {/* 年级 */}
-        <Popup v-model:show={state.gradeStatus} position="bottom" round>
+        <Popup
+          v-model:show={state.gradeStatus}
+          position="bottom"
+          round
+          safeAreaInsetBottom
+          // duration={0}
+          lazyRender={false}
+        >
           <Picker
             showToolbar
             columns={state.currentGrade}

src/student/music-group/pre-apply/component/order.tsx

@@ -118,18 +118,33 @@ export default defineComponent({
         }
 
         const refundReason = form.resionList.find((item: any) => item.value === form.checked)
-
+        console.log({
+          merOrderNo: form.refundSelect.orderNo,
+          refundReason: refundReason.text
+        })
+        // return
         await request.post('/api-student/userPaymentOrder/refundPayment', {
           data: {
             merOrderNo: form.refundSelect.orderNo,
             refundReason: refundReason.text
           }
         })
+        form.refundStatus = false
+        onSearch()
       } catch {
         //
       }
     }
 
+    const onSearch = () => {
+      form.params.page = 1
+      form.list = []
+      form.listState.dataShow = true // 判断是否有数据
+      form.listState.loading = false
+      form.listState.finished = false
+      getList()
+    }
+
     onMounted(() => {
       getDefaultParams()
       getList()
@@ -197,7 +212,10 @@ export default defineComponent({
                             round
                             plain
                             color="#AAAAAA"
-                            onClick={() => (form.refundStatus = true)}
+                            onClick={() => {
+                              form.refundSelect = item
+                              form.refundStatus = true
+                            }}
                           >
                             申请退款
                           </Button>
@@ -215,7 +233,7 @@ export default defineComponent({
 
         <Popup v-model:show={form.refundStatus} round style={{ width: '90%' }}>
           <div class={styles.container}>
-            <div class={styles.dialogTitle}>
+            <div class={[styles.dialogTitle, styles.dialogRefund]}>
               <i></i>
               申请退款
             </div>

src/student/music-group/pre-apply/index.tsx

@@ -1,4 +1,4 @@
-import { defineComponent, onMounted, reactive, ref } from 'vue'
+import { defineComponent, onMounted, reactive, ref, nextTick } from 'vue'
 import { Image, showDialog, Sticky, Tab, Tabs } from 'vant'
 import styles from './index.module.less'
 // import { useRect } from '@vant/use'
@@ -27,7 +27,10 @@ export default defineComponent({
       if (name === 'payment') {
         await getRegisterStatus()
       }
-      state.tabValue = name
+
+      nextTick(() => {
+        state.tabValue = name
+      })
     }
 
     const getRegisterStatus = async () => {
@@ -40,13 +43,17 @@ export default defineComponent({
         // 判断是否报名注册过
         state.register = data.register
         if (data.register) {
-          state.tabValue = 'payment'
+          nextTick(() => {
+            state.tabValue = 'payment'
+          })
         }
 
         // 	购买状态, 判断是否已经购买完了
         if (data.purchase) {
-          state.tabValue = 'order'
           state.purchase = data.purchase
+          nextTick(() => {
+            state.tabValue = 'order'
+          })
         }
 
         // INITIATION_SURVEY: '启蒙调查',

src/student/my-orchestra/index.tsx

@@ -9,6 +9,7 @@ export default defineComponent({
   name: 'my-orchestra',
   setup() {
     const router = useRouter()
+
     return () => (
       <div class={styles.myOrchestra}>
         <OHeader
@@ -19,7 +20,7 @@ export default defineComponent({
         />
 
         <div class={[styles.gridContainer, styles.gridClass]}>
-          {[1, 2, 3, 4, 5].map((item: any) => (
+          {[1, 2].map((item: any) => (
             <CellGroup class={styles.classCellGroup}>
               <Cell center titleStyle={{ flex: '0 auto' }} valueClass={styles.classCheckbox}>
                 {{
@@ -27,9 +28,8 @@ export default defineComponent({
                   title: () => (
                     <div class={styles.content}>
                       <div class={styles.teacherName}>
-                        {item.teacherName} <Tag type="primary">{item.name}</Tag>
+                        1211212 <Tag type="primary">长笛班</Tag>
                       </div>
-                      <div class={styles.orchestraName}>{item.orchestraName}</div>
                     </div>
                   )
                 }}

src/student/trade-record/component/paid-list.tsx

@@ -164,6 +164,9 @@ export default defineComponent({
             refundReason: refundReason.text
           }
         })
+
+        form.refundStatus = false
+        onSearch()
       } catch {
         //
       }

src/views/attendance-rule/index.tsx

@@ -1,22 +1,47 @@
 import OHeader from '@/components/o-header'
 import OSticky from '@/components/o-sticky'
-import { useRect } from '@vant/use'
-
-import { Collapse, CollapseItem, dividerProps } from 'vant'
-import { defineComponent, onMounted, reactive, ref, nextTick } from 'vue'
-import { useRouter } from 'vue-router'
+import { Collapse, CollapseItem } from 'vant'
+import { defineComponent, reactive, onMounted } from 'vue'
 import clockIcon from './images/clock-icon.png'
 import styles from './index.module.less'
-const activeName = ref('student')
+import request from '@/helpers/request'
+import {
+  addFormMinute,
+  addFormMinuteAddS,
+  reduceFormMinute,
+  reduceFormMinuteAddS,
+  addFormMinuteMS,
+  reduceFormMinuteMS
+} from '@/helpers/date'
 export default defineComponent({
   name: 'attendance-rule',
   setup() {
-    const router = useRouter()
     const state = reactive({
-      activeNames: ['1']
+      activeNames: ['1', '2', '3']
+    })
+    const forms = reactive({} as any)
+    const getRules = async () => {
+      try {
+        const { data } = await request.post('/api-backend/sysParamConfig/page', {
+          data: {
+            page: 1,
+            rows: 999,
+            group: 'ATTENDANCE'
+          }
+        })
+        if (data.rows) {
+          data.rows.forEach((item: any) => {
+            forms[item.id] = item.paramValue
+          })
+        }
+        console.log(forms)
+      } catch (e) {
+        console.log(e)
+      }
+    }
+    onMounted(() => {
+      getRules()
     })
-    const stickyRef = ref()
-
     return () => (
       <>
         <OSticky position="top" background="#F8F8F8">
@@ -44,51 +69,72 @@ export default defineComponent({
                 <div class={styles.textWrap}>
                   <h4>可签到时间范围：</h4>
                   <p>
-                    课程<span>开始前60分钟</span>至课程<span>结束前</span>
+                    课程<span>开始前{forms[15] ? forms[15] : 0}分钟</span>至课程<span>结束前</span>
                   </p>
-                  <p>时间段：11:00:00 ~ 13:00</p>
+                  <p>时间段：{reduceFormMinute('12:00:00', forms[15])} ~13:00:00 </p>
                 </div>
 
                 <div class={styles.textWrap}>
                   <h4>正常签到：</h4>
                   <p>
-                    课程<span>开始前60分钟</span>至课程<span>开始前20分钟</span>
-                    签到GPS定位点在教学点<span>1000米内</span>
+                    课程<span>开始前{forms[15] ? forms[15] : 0}分钟</span>至课程
+                    <span>开始前{forms[16] ? forms[16] : 0}分钟</span>
+                    签到GPS定位点在教学点<span>{forms[10] ? forms[10] : 0}米内</span>
+                  </p>
+                  <p>
+                    时间段：{reduceFormMinute('12:00:00', forms[15])} ~{' '}
+                    {reduceFormMinute('12:00:00', forms[16])}
                   </p>
-                  <p>时间段：11:00:00 ~ 11:40:00</p>
                 </div>
 
                 <div class={styles.textWrap}>
                   <h4>异常签到：</h4>
                   <p>
-                    课程<span>开始前20分钟</span>后至课程<span>开始前</span>
-                    签到GPS定位点在教学点<span>1000米外</span>
+                    课程<span>开始前{forms[17] ? forms[17] : 0}分钟</span>后至课程
+                    <span>开始前</span>
+                    签到GPS定位点在教学点<span>{forms[10] ? forms[10] : 0}米外</span>
                   </p>
-                  <p>时间段：11:00:00 ~ 11:40:00</p>
+                  <p>时间段：{reduceFormMinute('12:00:00', forms[17])} ~ 12:00:00</p>
                   <p>
-                    扣除训练补助：<span>-50元</span>
+                    扣除训练补助：
+                    <span>
+                      -{forms[18] ? forms[18] : 0}
+                      {forms[19] == 'MONEY' ? '元' : '%'}
+                    </span>
                   </p>
                 </div>
 
                 <div class={styles.textWrap}>
                   <h4>迟到：</h4>
                   <p>
-                    课程<span>开始后30分钟</span>内签到
+                    课程<span>开始后{forms[20] ? forms[20] : 0}分钟</span>内签到
                   </p>
-                  <p>时间段：12:00:00 ~ 12:30:00</p>
+                  <p>时间段：12:00:00 ~ {addFormMinute('12:00:00', forms[20])}</p>
                   <p>
-                    扣除训练补助：<span>-100%</span>
+                    扣除训练补助：
+                    <span>
+                      -{forms[21] ? forms[21] : 0}
+                      {forms[22] == 'MONEY' ? '元' : '%'}
+                    </span>
                   </p>
                 </div>
 
                 <div class={styles.textWrap}>
                   <h4>旷课：</h4>
                   <p>
-                    课程<span>开始后30分钟</span>至课程<span>结束前</span>签到
+                    课程<span>开始后{forms[23] ? forms[23] : 0}分钟</span>至课程<span>结束前</span>
+                    签到
                   </p>
-                  <p>时间段：11:30:00后签到（含11:30:00）</p>
                   <p>
-                    扣除训练补助：<span>-100%</span>
+                    时间段：{addFormMinute('12:00:00', forms[23])}后签到（含
+                    {addFormMinute('12:00:00', forms[23])}）
+                  </p>
+                  <p>
+                    扣除训练补助：
+                    <span>
+                      -{forms[24] ? forms[24] : 0}
+                      {forms[25] == 'MONEY' ? '元' : '%'}
+                    </span>
                   </p>
                 </div>
 
@@ -96,7 +142,10 @@ export default defineComponent({
                   <h4>未签到：</h4>
                   <p>未进行【签到】操作</p>
                   <p>
-                    扣除训练补助：<span>-100%</span>
+                    扣除训练补助：
+                    <span>
+                      -{forms[26] ? forms[26] : 0} {forms[27] == 'MONEY' ? '元' : '%'}
+                    </span>
                   </p>
                 </div>
               </div>
@@ -121,58 +170,61 @@ export default defineComponent({
                 <div class={styles.textWrap}>
                   <h4>可签退时间范围：</h4>
                   <p>
-                    课程<span>开始后</span>至课程当天24点前
+                    课程<span>结束后</span>至课程当天24点前
                   </p>
-                  <p>时间段：12:00:00 ~ 23:59:59</p>
+                  <p>时间段：13:00:00 ~ 23:59:59</p>
                 </div>
 
                 <div class={styles.textWrap}>
                   <h4>正常签退：</h4>
                   <p>
-                    课程<span>结束后</span>至课程<span>开始后360分钟</span>
-                    签退GPS定位点在教学点<span>1000米内</span>
+                    课程<span>结束后</span>至课程<span>结束后{forms[28] ? forms[28] : 0}分钟</span>
+                    签退GPS定位点在教学点<span>{forms[10] ? forms[10] : 0}米内</span>
                   </p>
-                  <p>时间段：13:00:00 ~ 19:00:00</p>
+                  <p>时间段：13:00:00 ~ {addFormMinute('13:00:00', forms[28])}</p>
                 </div>
                 <div class={styles.textWrap}>
                   <h4>早退：</h4>
                   <p>
-                    课程<span>开始后30分钟</span>内签到
+                    课程<span>结束前{forms[32] ? forms[32] : 0}分钟</span>内签退
                   </p>
-                  <p>时间段：12:00:00 ~ 12:30:00</p>
                   <p>
-                    扣除训练补助：<span>-100%</span>
+                    时间段：{reduceFormMinute('13:00:00', forms[32])}前签退（含
+                    {reduceFormMinute('13:00:00', forms[32])}）{' '}
                   </p>
-                </div>
-
-                <div class={styles.textWrap}>
-                  <h4>异常签到：</h4>
-                  <p>
-                    课程<span>开始前20分钟</span>后至课程<span>开始前</span>
-                    签到GPS定位点在教学点<span>1000米外</span>
-                  </p>
-                  <p>时间段：11:00:00 ~ 11:40:00</p>
                   <p>
-                    扣除训练补助：<span>-50元</span>
+                    扣除训练补助：
+                    <span>
+                      -{forms[33] ? forms[33] : 0}
+                      {forms[34] == 'MONEY' ? '元' : '%'}
+                    </span>
                   </p>
                 </div>
 
                 <div class={styles.textWrap}>
-                  <h4>旷课：</h4>
+                  <h4>异常签退：</h4>
                   <p>
-                    课程<span>开始后30分钟</span>至课程<span>结束前</span>签到
+                    课程<span>结束前{forms[29] ? forms[29] : 0}分钟</span>至<span>课程结束前</span>
+                    或GPS定位点在教学点<span> {forms[10] ? forms[10] : 0}米外</span>
                   </p>
-                  <p>时间段：11:30:00后签到（含11:30:00）</p>
+                  <p>时间段：{reduceFormMinute('13:00:00', forms[29])} ~ 12:59:59</p>
                   <p>
-                    扣除训练补助：<span>-100%</span>
+                    扣除训练补助：
+                    <span>
+                      -{forms[30] ? forms[30] : 0} {forms[31] == 'MONEY' ? '元' : '%'}
+                    </span>
                   </p>
                 </div>
 
                 <div class={styles.textWrap}>
-                  <h4>未签到：</h4>
-                  <p>未进行【签到】操作</p>
+                  <h4>未签退：</h4>
+                  <p>未进行【签退】操作</p>
                   <p>
-                    扣除训练补助：<span>-100%</span>
+                    扣除训练补助：
+                    <span>
+                      -{forms[45] ? forms[45] : 0}
+                      {forms[38] == 'MONEY' ? '元' : '%'}
+                    </span>
                   </p>
                 </div>
               </div>
@@ -184,11 +236,44 @@ export default defineComponent({
                 title: () => (
                   <div class={styles.collapseTitle}>
                     <span class={styles.dot}></span>
-                    签到规则
+                    GPS定位
                   </div>
                 )
               }}
-            ></CollapseItem>
+            >
+              <div>
+                <div class={styles.textWrap}>
+                  <p>
+                    <span>
+                      若签到时间在正常范围内 但同时GPS定位在教学点{forms[10] ? forms[10] : 0}
+                      米外
+                    </span>
+                  </p>
+                  <p>
+                    扣除训练补助：
+                    <span>
+                      - {forms[11] ? forms[11] : 0}
+                      {forms[12] == 'MONEY' ? '元' : '%'}
+                    </span>
+                  </p>
+                </div>
+                <div class={styles.textWrap}>
+                  <p>
+                    <span>
+                      若签退时间在正常范围内 但同时GPS定位在教学点{forms[10] ? forms[10] : 0}
+                      米外
+                    </span>
+                  </p>
+                  <p>
+                    扣除训练补助：
+                    <span>
+                      - {forms[13] ? forms[13] : 0}
+                      {forms[14] == 'MONEY' ? '元' : '%'}
+                    </span>
+                  </p>
+                </div>
+              </div>
+            </CollapseItem>
           </Collapse>
         </div>
       </>

src/views/coursewarePlay/index.module.less

@@ -1,15 +1,15 @@
 .coursewarePlay {
   position: relative;
-  min-height: 100vh;
+  height: 100vh;
   background-color: rgba(89, 98, 126, 0.2);
 }
 .backBtn {
   position: absolute;
   left: 40px;
-  top: 10Px;
+  top: 10px;
   color: #fff;
-  width: 40Px;
-  height: 26Px;
+  width: 40px;
+  height: 26px;
   display: flex;
   justify-content: space-between;
   align-items: center;
@@ -17,42 +17,80 @@
 }
 .menu {
   position: absolute;
-  top: 10Px;
-  left: 140Px;
-  right: 84Px;
+  top: 10px;
+  left: 140px;
+  right: 84px;
   z-index: 10;
+  .menuLine {
+    position: absolute;
+    left: 0;
+    top: 0;
+    height: 100%;
+    z-index: -1;
+    background: #ff8057;
+    transition: width 0.3s;
+  }
   :global {
     .van-tabs__content,
     .van-tabs__line {
       display: none;
     }
     .van-tabs__wrap {
-      height: 26Px;
+      height: 26px;
     }
     .van-tabs__nav {
       padding: 0;
       background: rgba(255, 128, 87, 0.5);
       .van-tab {
         color: #fff;
-        font-size: 14Px;
+        font-size: 14px;
+      }
+      .van-tab:not(:first-child) {
+        // border-left: 1px solid #fff;
       }
-      .van-tab--active.van-tab {
-        background: #ff8057;
+      .van-tab.van-tab--active {
+        background: var(--van-primary);
       }
     }
   }
 }
-.videoItem{
-    width: 100vw;
-    height: 100vh;
-    --plyr-color-main: var(--van-primary);
-    video{
-        width: 100%;
-        height: 100%;
+.tabsContent {
+  :global {
+    .van-tabs__wrap {
+      display: none !important;
     }
-    :global{
-        .plyr{
-            height: 100%;
-        }
+    .van-tabs__content {
+      width: 100vw;
+      height: 100vh;
+      .van-swipe {
+        width: 100vw;
+        height: 100vh;
+      }
     }
+  }
+}
+.videoItem {
+  width: 100vw;
+  height: 100vh;
+  --plyr-color-main: var(--van-primary);
+  video {
+    width: 100%;
+    height: 100%;
+  }
+  :global {
+    .plyr {
+      height: 100%;
+    }
+  }
+}
+.imgItem {
+  width: 100vw;
+  height: 100vh;
+}
+.songItem {
+  width: 100vw;
+  height: 100vh;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }

src/views/coursewarePlay/index.tsx

@@ -1,5 +1,5 @@
 import { Icon, Swipe, SwipeItem, Tab, Tabs } from 'vant'
-import { defineComponent, onMounted, reactive } from 'vue'
+import { defineComponent, onMounted, reactive, nextTick } from 'vue'
 import iconBack from './image/back.svg'
 import styles from './index.module.less'
 import Plyr from 'plyr'
@@ -13,31 +13,38 @@ export default defineComponent({
   setup() {
     const route = useRoute()
     const data = reactive({
-      detail: null
+      detail: null,
+      active: '',
+      knowledgePointList: [] as any
     })
     const getDetail = async () => {
       try {
-        const res: any = await request.get(state.platformApi + `/lessonCoursewareDetail/detail/${route.query.id}`)
+        const res: any = await request.get(
+          state.platformApi + `/lessonCoursewareDetail/detail/${route.query.id}`
+        )
         if (Array.isArray(res?.data)) {
           data.detail = res.data
         }
+        if (Array.isArray(res?.data?.knowledgePointList)) {
+          data.knowledgePointList = res.data.knowledgePointList
+        }
+        console.log('数据加载完成')
       } catch (error) {}
+      nextTick(() => {
+        console.log('开始加载视频')
+        videoInit()
+      })
     }
-    onMounted(() => {
-      getDetail()
-      const nodeList = document.querySelectorAll('.player')
-      console.log('🚀 ~ nodeList', nodeList)
-      //   const player = Plyr.setup('.player', {
-      //     debug: false,
-      //     ratio: '16:9'
-      //   })
-      const player = new Plyr('#player1', {
-        autoplay: true
+    const videoInit = () => {
+      console.log(document.querySelectorAll('.player'))
+      const player = Plyr.setup('.player', {
+        debug: false,
+        ratio: '16:9'
       })
-      setTimeout(() => {
-        // player.togglePlay()
-      }, 1000)
       console.log('🚀 ~ player', player)
+    }
+    onMounted(() => {
+      getDetail()
     })
     const goback = () => {
       history.go(-1)
@@ -49,57 +56,47 @@ export default defineComponent({
           返回
         </div>
         <div class={styles.menu}>
-          <Tabs>
-            <Tab title="前言"></Tab>
-            <Tab title="嘴形+长振"></Tab>
-            <Tab title="吐音"></Tab>
-            <Tab title="号角发音"></Tab>
-            <Tab title="发音练习"></Tab>
-            <Tab title="结束语"></Tab>
+          <Tabs v-model:active={data.active} ellipsis={false}>
+            {{
+              default: () => {
+                return data.knowledgePointList.map((n: any) => {
+                  return <Tab title={n.name} name={n.id}></Tab>
+                })
+              }
+              // 'nav-right': () => <div style={{width: '40%'}} class={styles.menuLine}></div>
+            }}
           </Tabs>
         </div>
-        <Swipe vertical>
-          <SwipeItem>
-            <div class={styles.videoItem}>
-              <video class="player" id="player1" autoplay>
-                <source
-                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
-                  type="video/mp4"
-                />
-              </video>
-            </div>
-          </SwipeItem>
-          <SwipeItem>
-            <div class={styles.videoItem}>
-              <video class="player" controls>
-                <source
-                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
-                  type="video/mp4"
-                />
-              </video>
-            </div>
-          </SwipeItem>
-          <SwipeItem>
-            <div class={styles.videoItem}>
-              <video class="player" controls>
-                <source
-                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
-                  type="video/mp4"
-                />
-              </video>
-            </div>
-          </SwipeItem>
-          <SwipeItem>
-            <div class={styles.videoItem}>
-              <video class="player" controls>
-                <source
-                  src="https://daya.ks3-cn-beijing.ksyuncs.com/12/1672210184164.mp4"
-                  type="video/mp4"
-                />
-              </video>
-            </div>
-          </SwipeItem>
-        </Swipe>
+        <Tabs class={styles.tabsContent} animated lazyRender={false} v-model:active={data.active}>
+          {data.knowledgePointList.map((item: any) => {
+            return (
+              <Tab name={item.id}>
+                <Swipe vertical lazyRender={false}>
+                  {Array.isArray(item?.materialList) &&
+                    item.materialList.map((m: any) => {
+                      return (
+                        <SwipeItem>
+                          {m.type === 'VIDEO' ? (
+                            <div class={styles.videoItem}>
+                              <video class="player" controls>
+                                <source src={m.content} type="video/mp4" />
+                              </video>
+                            </div>
+                          ) : m.type === 'IMG' ? (
+                            <div class={styles.imgItem}>
+                              <img src={m.content} />
+                            </div>
+                          ) : (
+                            <div class={styles.songItem}>曲谱</div>
+                          )}
+                        </SwipeItem>
+                      )
+                    })}
+                </Swipe>
+              </Tab>
+            )
+          })}
+        </Tabs>
       </div>
     )
   }