修改

src/router/routes-common.ts

@@ -78,6 +78,22 @@ export const router: RouteRecordRaw[] = [
     meta: {
       title: '帮助中心'
     }
+  },
+  {
+    path: '/unit-test',
+    name: 'unit-test',
+    component: () => import('@/views/unit-test'),
+    meta: {
+      title: '单元测验'
+    }
+  },
+  {
+    path: '/unit-detail',
+    name: 'unit-detail',
+    component: () => import('@/views/unit-test/unit-detail'),
+    meta: {
+      title: '测验详情'
+    }
   }
 ]
 

src/student/music-group/layout/index.module.less

@@ -74,29 +74,41 @@
     }
   }
 
+  .wxPopupDialog {
+    position: relative;
+    overflow: inherit;
+    &::before {
+      position: absolute;
+      content: ' ';
+      top: -73px;
+      left: 50%;
+      margin-left: -86px;
+      display: inline-block;
+      background: url('../pre-apply/images/wx-no-top.png') no-repeat top center;
+      background-size: contain;
+      width: 172px;
+      height: 154px;
+    }
+  }
   .popupContainer {
-    .dialogTitle {
-      i {
-        display: inline-block;
-        width: 4px;
-        height: 14px;
-        background: #ff8057;
-        border-radius: 2px;
-        margin-right: 6px;
-      }
-
-      text-align: left;
+    background: url('../pre-apply/images/wx-no-bg.png') no-repeat top center !important;
+    background-size: cover;
+    border-radius: 20px;
+    overflow: hidden;
+    .title {
+      padding-top: 57px;
+      text-align: center;
       font-size: 18px;
       font-weight: 500;
-      color: #333333;
-      line-height: 25px;
-      padding: 20px 0 20px 25px;
+      color: #3b2300;
     }
-
     .popupTips {
+      padding-top: 12px;
+      padding-bottom: 47px;
       text-align: center;
-      padding: 15px 0 45px;
-      font-size: 16px;
+      font-size: 15px;
+      color: #777777;
+      line-height: 21px;
     }
   }
 }

src/student/music-group/layout/login.tsx

@@ -110,7 +110,7 @@ export default defineComponent({
           autoRegister: true,
           password: this.smsCode,
           loginType: 'SMS',
-          grant_type: 'SMS'
+          grant_type: 'password'
         }
 
         const { data } = await request.post('/api-oauth/userlogin', {
@@ -231,15 +231,12 @@ export default defineComponent({
         <Popup
           v-model:show={this.showPopup}
           round
-          style={{ width: '92%' }}
+          style={{ width: '88%' }}
           closeOnClickOverlay={false}
+          class={styles.wxPopupDialog}
         >
           <div class={styles.popupContainer}>
-            <div class={styles.dialogTitle}>
-              <i></i>
-              提示
-            </div>
-
+            <p class={styles.title}>温馨提示</p>
             <p class={styles.popupTips}>请使用微信打开</p>
           </div>
         </Popup>

src/views/layout/login.tsx

@@ -65,15 +65,15 @@ export default defineComponent({
           client_id: state.clientId[state.platformType],
           client_secret: state.clientId[state.platformType]
         }
-          console.log("🚀 ~ state.clientId", state.clientId,state.platformType)
+        console.log('🚀 ~ state.clientId', state.clientId, state.platformType)
         if (this.loginType === 'PWD') {
           forms.password = this.password
           forms.loginType = 'PASSWORD'
-          forms.grant_type = 'PASSWORD'
+          forms.grant_type = 'password'
         } else {
           forms.password = this.smsCode
           forms.loginType = 'SMS'
-          forms.grant_type = 'SMS'
+          forms.grant_type = 'password'
         }
         const { data } = await request.post('/api-oauth/userlogin', {
           requestType: 'form',

src/views/unit-test/index.module.less

@@ -0,0 +1,68 @@
+.unitTest {
+  .searchBand {
+    display: inline-block;
+    font-size: 14px;
+    font-weight: 500;
+    color: #333333;
+  }
+
+  .cellGroup {
+    margin-bottom: 12px;
+    :global {
+      .van-cell {
+        padding: 12px;
+        font-size: 16px;
+        font-weight: 500;
+      }
+    }
+
+    .img {
+      width: 18px;
+      height: 18px;
+      margin-right: 6px;
+    }
+    .unitTitle {
+      color: #333333;
+      max-width: 150px;
+      line-height: 22px;
+    }
+
+    .no-start {
+      color: #f44541;
+    }
+    .pass {
+      color: #4ab78e;
+    }
+  }
+
+  .unitSection {
+    padding-top: 15px !important;
+    padding-bottom: 20px !important;
+    .name {
+      font-size: 15px;
+      font-weight: 500;
+      color: #333333;
+      padding-bottom: 6px;
+    }
+    .endTime {
+      font-size: 13px;
+      color: #777777;
+    }
+  }
+
+  .unitBtnGroup {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 16px;
+    :global {
+      .van-button {
+        line-height: 40px;
+        height: 40px;
+        & + .van-button {
+          margin-left: 13px;
+        }
+      }
+    }
+  }
+}

src/views/unit-test/index.tsx

@@ -0,0 +1,169 @@
+import OEmpty from '@/components/o-empty'
+import OHeader from '@/components/o-header'
+import OSearch from '@/components/o-search'
+import OSticky from '@/components/o-sticky'
+import { ActionSheet, Button, Cell, CellGroup, Icon, Image, List } from 'vant'
+import { defineComponent, reactive } from 'vue'
+import styles from './index.module.less'
+import iconEdit from './images/icon-edit.png'
+import { useRouter } from 'vue-router'
+
+export default defineComponent({
+  name: 'unit-test',
+  setup() {
+    const router = useRouter()
+    const form = reactive({
+      oPopover: false,
+      list: [] as any,
+      listState: {
+        dataShow: true, // 判断是否有数据
+        loading: false,
+        finished: false
+      },
+      statusText: '全部测验',
+      params: {
+        keyword: null,
+        status: null,
+        page: 1,
+        rows: 20
+      },
+      isClick: false
+    })
+
+    const getList = async () => {
+      try {
+        if (form.isClick) return
+        form.isClick = true
+        // const res = await request.post('/api-school/schoolStaff/page', {
+        //   data: {
+        //     ...form.params,
+        //     schoolId: state.user.data.school.id
+        //   }
+        // })
+        // form.listState.loading = false
+        // const result = res.data || {}
+        // // 处理重复请求数据
+        // if (form.list.length > 0 && result.current === 1) {
+        //   return
+        // }
+        // form.list = form.list.concat(result.rows || [])
+        // form.listState.finished = result.current >= result.pages
+        // form.params.page = result.current + 1
+        // form.listState.dataShow = form.list.length > 0
+        form.isClick = false
+      } catch {
+        form.listState.dataShow = false
+        form.listState.finished = true
+        form.isClick = false
+      }
+    }
+
+    const onSearch = () => {
+      form.params.page = 1
+      form.list = []
+      form.listState.dataShow = true // 判断是否有数据
+      form.listState.loading = false
+      form.listState.finished = false
+      getList()
+    }
+    return () => (
+      <div class={styles.unitTest}>
+        <OSticky position="top">
+          <OHeader />
+          <OSearch
+            placeholder="请输入测验名称"
+            inputBackground="white"
+            background="#f6f8f9"
+            onSearch={(val: any) => {
+              form.params.keyword = val
+              onSearch()
+            }}
+            v-slots={{
+              left: () => (
+                <div
+                  class={styles.searchBand}
+                  style={{ marginRight: '13px' }}
+                  onClick={() => (form.oPopover = true)}
+                >
+                  {form.statusText} <Icon name={form.oPopover ? 'arrow-up' : 'arrow-down'} />
+                </div>
+              )
+            }}
+          />
+        </OSticky>
+
+        {form.listState.dataShow ? (
+          <List
+            v-model:loading={form.listState.loading}
+            finished={form.listState.finished}
+            finishedText=" "
+            class={[styles.liveList]}
+            onLoad={getList}
+            immediateCheck={false}
+          >
+            {[1, 2, 3, 4].map((item: any) => (
+              <CellGroup inset class={styles.cellGroup} border={false}>
+                <Cell center isLink clickable={false}>
+                  {{
+                    icon: () => <Image src={iconEdit} class={styles.img} />,
+                    title: () => (
+                      <span class={[styles.unitTitle, 'van-ellipsis']}>长笛班-第一次单元测验</span>
+                    ),
+                    value: () => <span class={styles['no-start']}>未完成</span>
+                  }}
+                </Cell>
+                <Cell center class={styles.unitSection}>
+                  {{
+                    title: () => (
+                      <div class={styles.unitInformation}>
+                        <div class={styles.name}>武汉小学2022标准团</div>
+                        <div class={styles.endTime}>截止时间：2022-10-24 21:00</div>
+
+                        <div class={styles.unitBtnGroup}>
+                          <Button color="#FFF0E6" round block style={{ color: '#F67146' }}>
+                            练习模式
+                          </Button>
+                          <Button
+                            type="primary"
+                            round
+                            block
+                            onClick={() => {
+                              router.push('/unit-detail')
+                            }}
+                          >
+                            开始测验
+                          </Button>
+                        </div>
+                      </div>
+                    )
+                  }}
+                </Cell>
+              </CellGroup>
+            ))}
+          </List>
+        ) : (
+          <OEmpty tips="暂无单元测验" />
+        )}
+
+        <ActionSheet
+          v-model:show={form.oPopover}
+          cancelText="取消"
+          actions={
+            [
+              { name: '全部测验', id: 'ALL' },
+              { name: '未完成', id: 'ING' },
+              { name: '不合格', id: 'LOCKED' },
+              { name: '合格', id: 'ACTIVATION' }
+            ] as any
+          }
+          onSelect={(val: any) => {
+            form.statusText = val.name
+            form.params.status = val.id === 'ALL' ? null : val.id
+            form.oPopover = false
+            onSearch()
+          }}
+        />
+      </div>
+    )
+  }
+})

src/views/unit-test/model/notice-start/index.module.less

@@ -0,0 +1,29 @@
+.dialogTitle {
+  i {
+    display: inline-block;
+    width: 4px;
+    height: 14px;
+    background: #ff8057;
+    border-radius: 2px;
+    margin-right: 6px;
+  }
+
+  text-align: left;
+  font-size: 18px;
+  font-weight: 500;
+  color: #333333;
+  line-height: 25px;
+  padding: 20px 15px 15px;
+}
+
+.btns {
+  :global {
+    .van-button {
+      font-size: 18px;
+      font-weight: 500;
+    }
+    .van-dialog__cancel {
+      color: #777;
+    }
+  }
+}

src/views/unit-test/model/notice-start/index.tsx

@@ -0,0 +1,30 @@
+import { Button } from 'vant'
+import { defineComponent } from 'vue'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'notice-start',
+  emits: ['close', 'confirm'],
+  setup(props, { emit }) {
+    return () => (
+      <div class={styles.noticeStart}>
+        <div class={styles.dialogTitle}>
+          <i></i>
+          测验须知
+        </div>
+
+        <div class={['van-hairline--top van-dialog__footer', styles.btns]}>
+          <Button onClick={() => emit('close')} class={['van-dialog__cancel']}>
+            取消
+          </Button>
+          <Button
+            onClick={() => emit('confirm')}
+            class={['van-dialog__confirm van-hairline--left']}
+          >
+            确认
+          </Button>
+        </div>
+      </div>
+    )
+  }
+})

src/views/unit-test/unit-detail/index.tsx

@@ -0,0 +1,22 @@
+import { Popup } from 'vant'
+import { defineComponent, reactive } from 'vue'
+import NoticeStart from '../model/notice-start'
+import styles from './index.module.less'
+
+export default defineComponent({
+  name: 'unit-detail',
+  setup() {
+    const state = reactive({
+      visiableNotice: true
+    })
+    return () => (
+      <div class={styles.unitDetail}>
+        详情
+        {/* 测验须知 */}
+        <Popup v-model:show={state.visiableNotice} round style={{ width: '90%' }}>
+          <NoticeStart />
+        </Popup>
+      </div>
+    )
+  }
+})