添加测验

src/student/music-group/shop-address/address-operation.tsx

@@ -40,8 +40,8 @@ export default defineComponent({
           showToast('请选择收货人')
           return
         }
-        if (!state.phoneNumber) {
-          showToast('请输入手机号')
+        if (!state.phoneNumber && !/^1(3|4|5|6|7|8|9)\d{9}$/.test(state.phoneNumber as any)) {
+          showToast('手机号输入有误')
           return
         }
         if (!state.pcrStr) {

src/views/unit-test/index.tsx

@@ -69,7 +69,6 @@ export default defineComponent({
     return () => (
       <div class={styles.unitTest}>
         <OSticky position="top">
-          <OHeader />
           <OSearch
             placeholder="请输入测验名称"
             inputBackground="white"

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

@@ -27,3 +27,91 @@
     }
   }
 }
+
+.noticeContainer {
+  padding: 0 15px 30px;
+}
+
+.unitContainer {
+  background: #fff0e6;
+  border-radius: 10px;
+  margin-bottom: 30px;
+  .unitTitle {
+    display: flex;
+    align-items: center;
+    padding: 10px 12px;
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 22px;
+    color: #333333;
+    :global {
+      .van-tag {
+        margin-left: 8px;
+        font-size: 13px;
+        font-weight: 500;
+        color: #ffffff;
+        padding: 2px 8px;
+        flex-shrink: 0;
+      }
+    }
+  }
+  .gridScore {
+    :global {
+      .van-grid-item__content {
+        background-color: transparent;
+      }
+    }
+    .title {
+      font-size: 26px;
+      font-weight: bold;
+      color: #333333;
+      line-height: 30px;
+    }
+    .name {
+      padding-top: 4px;
+      font-size: 14px;
+      color: #333333;
+    }
+  }
+
+  .unitTimer {
+    display: flex;
+    align-items: center;
+    padding: 12px;
+    font-size: 14px;
+    color: #333333;
+    line-height: 20px;
+    :global {
+      .van-icon {
+        font-size: 16px;
+        margin-right: 4px;
+      }
+    }
+    &:after {
+      border-color: #ff8057;
+      opacity: 0.2;
+    }
+  }
+}
+
+.reminder {
+  .iconBell {
+    width: 15px;
+    height: 16px;
+    margin-right: 6px;
+  }
+  .rTitle {
+    display: flex;
+    align-items: center;
+    font-size: 16px;
+    font-weight: 500;
+    color: #f67146;
+    padding-bottom: 10px;
+  }
+  .rContent {
+    font-size: 14px;
+    color: #333333;
+    line-height: 21px;
+    text-align: justify;
+  }
+}

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

@@ -1,6 +1,8 @@
-import { Button } from 'vant'
+import { Button, Grid, GridItem, Icon, Tag } from 'vant'
 import { defineComponent } from 'vue'
 import styles from './index.module.less'
+import iconBell from '@/views/unit-test/images/icon-bell.png'
+import iconTimer from '@/views/unit-test/images/icon-timer.png'
 
 export default defineComponent({
   name: 'notice-start',
@@ -13,15 +15,65 @@ export default defineComponent({
           测验须知
         </div>
 
+        <div class={styles.noticeContainer}>
+          <div class={styles.unitContainer}>
+            <div class={styles.unitTitle}>
+              <span class={[styles.name, 'van-ellipsis']}>长笛level1上册测验一</span>
+              <Tag type="primary">长笛单技课</Tag>
+            </div>
+            <Grid border={false} columnNum={3} class={styles.gridScore}>
+              <GridItem>
+                <p class={styles.title}>20</p>
+                <p class={styles.name}>总分</p>
+              </GridItem>
+              <GridItem>
+                <p
+                  class={[styles.title]}
+                  style={{
+                    color: '#F67146'
+                  }}
+                >
+                  16
+                </p>
+                <p class={styles.name}>合格分</p>
+              </GridItem>
+              <GridItem>
+                <p class={styles.title}>4</p>
+                <p class={styles.name}>题目数量</p>
+              </GridItem>
+            </Grid>
+
+            <div class={[styles.unitTimer, 'van-hairline--top']}>
+              <Icon name={iconTimer} />
+              <span>测验时长：40:00</span>
+            </div>
+          </div>
+
+          <div class={styles.reminder}>
+            <div class={styles.rTitle}>
+              <Icon name={iconBell} class={styles.iconBell} />
+              <span>温馨提示：</span>
+            </div>
+
+            <p class={styles.rContent}>
+              1、单元测验仅可进行一次，请通过练习模式充分练习后再进行测试，以保障测验分数准确；
+              <br />
+              2、点击开始测验后开始测验计时，到达测验时长后自动完成；
+              <br />
+              3、开始测验后若中途退出，时长依然计算； <br /> 4、准备好后开始测验吧！
+            </p>
+          </div>
+        </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

@@ -1,20 +1,36 @@
 import { Popup } from 'vant'
 import { defineComponent, reactive } from 'vue'
+import { useRoute, useRouter } from 'vue-router'
 import NoticeStart from '../model/notice-start'
 import styles from './index.module.less'
 
 export default defineComponent({
   name: 'unit-detail',
   setup() {
+    const route = useRoute()
+    const router = useRouter()
     const state = reactive({
-      visiableNotice: true
+      visiableNotice: false
     })
     return () => (
       <div class={styles.unitDetail}>
         详情
         {/* 测验须知 */}
-        <Popup v-model:show={state.visiableNotice} round style={{ width: '90%' }}>
-          <NoticeStart />
+        <Popup
+          v-model:show={state.visiableNotice}
+          round
+          style={{ width: '90%' }}
+          closeOnClickOverlay={false}
+        >
+          <NoticeStart
+            onClose={() => {
+              state.visiableNotice = false
+              router.back()
+            }}
+            onConfirm={() => {
+              console.log('start')
+            }}
+          />
         </Popup>
       </div>
     )