学校注册添加验证码

src/components/m-img-code/index.tsx

@@ -23,16 +23,17 @@ export default defineComponent({
   },
   emits: ['close', 'sendCode'],
   data() {
+    const origin = window.location.origin;
     return {
-      isSuffix: '/api-school',
+      isSuffix: '/api-web',
       showStatus: false,
-      identifyingCode: null as any,
-      code: null
+      identifyingCode:
+        origin + '/api-web/code/getLoginImage?phone=' + this.phone,
+      code: ''
     };
   },
   mounted() {
     this.showStatus = this.value;
-    this.sendImgCode();
   },
   watch: {
     value(val: any) {
@@ -45,30 +46,19 @@ export default defineComponent({
     }
   },
   methods: {
-    async sendImgCode() {
-      const { data } = await request.get(this.isSuffix + '/open/sendImgCode', {
-        requestType: 'form',
-        hideLoading: true,
-        params: {
-          phone: this.phone
-        }
-      });
-      this.identifyingCode = data;
-    },
     async updateIdentifyingCode() {
-      this.sendImgCode();
       // 刷新token
-      // const origin = window.location.origin
-      // this.identifyingCode = `${origin}${this.isSuffix}/code/getImageCode?phone=${
-      //   this.phone
-      // }&token=${Math.random()}`
+      const origin = window.location.origin;
+      this.identifyingCode = `${origin}/api-web/code/getLoginImage?phone=${
+        this.phone
+      }&token=${Math.random()}`;
     },
     async checkVerifyLoginImage() {
       try {
         if ((this as any).code.length < 4) {
           return;
         }
-        await request.post(`${this.isSuffix}/open/verifyImgCode`, {
+        await request.post(`${this.isSuffix}/code/verifyLoginImage`, {
           requestType: 'form',
           hideLoading: true,
           data: {
@@ -76,13 +66,11 @@ export default defineComponent({
             code: this.code
           }
         });
-        await request.post(`${this.isSuffix}/open/sendSms`, {
+        await request.post(`${this.isSuffix}/code/sendSms`, {
           requestType: 'form',
           hideLoading: true,
           data: {
-            mobile: this.phone,
-            type: this.type,
-            clientId: 'SYSTEM'
+            mobile: this.phone
           }
         });
         setTimeout(() => {
@@ -91,6 +79,7 @@ export default defineComponent({
         this.$emit('close');
         this.$emit('sendCode');
       } catch {
+        this.code = '';
         this.updateIdentifyingCode();
       }
     }

src/components/m-protocol/index.tsx

@@ -50,6 +50,9 @@ export default defineComponent({
   watch: {
     checked(val) {
       this.$emit('update:modelValue', val);
+    },
+    modelValue() {
+      this.checked = this.modelValue;
     }
   },
   methods: {

src/router/routes-common.ts

@@ -81,6 +81,14 @@ export default [
         meta: {
           title: '巡堂评价'
         }
+      },
+      {
+        path: '/schedule-manage',
+        name: 'schedule-manage',
+        component: () => import('@/views/schedule-manage'),
+        meta: {
+          title: '待办事项'
+        }
       }
     ]
   },

src/views/schedule-manage/index.tsx

@@ -0,0 +1,8 @@
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'schedule-manage',
+  set() {
+    return () => <>待办事项</>;
+  }
+});

src/views/school-register/index.module.less

@@ -1,13 +1,19 @@
 .school-register {
   --van-cell-font-size: 16px;
 
+  .codeText {
+    color: var(--k-font-primary);
+  }
+
   .banner {
     position: relative;
     width: 100%;
+
     img {
       width: inherit;
     }
   }
+
   .bannerContainer {
     position: absolute;
     top: 30px;
@@ -19,12 +25,14 @@
       line-height: 40px;
       text-shadow: 0px 2px 4px #17af92;
     }
+
     .bannerSchool {
       padding-top: 10px;
       display: flex;
       align-items: flex-start;
       max-width: 180px;
     }
+
     .iconSchool {
       display: inline-block;
       width: 16px;
@@ -32,6 +40,7 @@
       margin-right: 6px;
       margin-top: 2px;
     }
+
     .schoolName {
       font-size: 14px;
       font-weight: 500;
@@ -39,14 +48,17 @@
       line-height: 20px;
     }
   }
+
   .required {
     color: #ff5a56;
   }
+
   :global {
     .van-field__label {
       color: var(--k-gray-1);
       font-size: 16px;
     }
+
     .van-cell-group {
       margin-top: 12px;
     }
@@ -76,6 +88,7 @@
   border-radius: 8px;
   overflow: inherit;
   margin-top: -20px;
+
   .popupContainer {
     position: relative;
 
@@ -94,10 +107,12 @@
       font-size: 14px;
       color: var(--k-gray-3);
       line-height: 20px;
+
       span {
         color: var(--k-font-primary);
       }
     }
+
     .popupBtn {
       display: block;
       margin: 0 auto 24px;
@@ -105,8 +120,9 @@
       --van-button-normal-font-size: 16px;
     }
   }
+
   .bannerPopup {
     width: 100%;
     margin-top: -22px;
   }
-}
+}

src/views/school-register/index.tsx

@@ -1,6 +1,14 @@
-import { defineComponent, onMounted, reactive } from 'vue';
+import { defineComponent, nextTick, onMounted, reactive, ref } from 'vue';
 import styles from './index.module.less';
-import { Button, Cell, CellGroup, Field, Popup, showToast } from 'vant';
+import {
+  Button,
+  Cell,
+  CellGroup,
+  CountDown,
+  Field,
+  Popup,
+  showToast
+} from 'vant';
 import banner from './images/banner.png';
 import iconSchool from './images/icon-school.png';
 import iconTips from './images/icon-tips.png';
@@ -11,6 +19,7 @@ import { useRoute, useRouter } from 'vue-router';
 import request from '@/helpers/request';
 import { checkPhone } from '@/helpers/utils';
 import { EShoolStaffType } from '@/helpers/constant';
+import MImgCode from '@/components/m-img-code';
 
 export default defineComponent({
   name: 'school-register',
@@ -19,13 +28,18 @@ export default defineComponent({
     const router = useRouter();
     const forms = reactive({
       id: route.query.id,
+      imgCodeStatus: false,
       type: (route.query.type || '') as string,
       username: '',
       phone: '',
       isAgree: false,
+      smsCode: '',
       registerStatus: false,
-      schoolDetail: {} as any
+      countDownStatus: true,
+      schoolDetail: {} as any,
+      countDownTime: 1000 * 120 // 倒计时时间
     });
+    const countDownRef = ref();
 
     const getDetail = async () => {
       try {
@@ -35,13 +49,17 @@ export default defineComponent({
           }
         });
         forms.schoolDetail = data || {};
-        console.log(data, 'data');
       } catch {
         //
       }
     };
 
     const onSubmit = async () => {
+      console.log(forms.isAgree, 'forms.isAgree');
+      if (!forms.isAgree) {
+        showToast('请阅读并同意注册协议');
+        return;
+      }
       if (!forms.username) {
         showToast('请输入真实姓名');
         return;
@@ -51,22 +69,30 @@ export default defineComponent({
         return;
       }
 
-      if (!forms.isAgree) {
-        showToast('请阅读并同意注册协议');
+      if (!forms.smsCode) {
+        showToast('请输入验证码');
         return;
       }
+
       try {
-        await request.post('/api-web/open/school/staffSave', {
+        const res = await request.post('/api-web/open/school/staffSave', {
           hideLoading: false,
           data: {
-            schoolId: forms.schoolDetail.id,
+            schoolId: forms.id,
             userType: forms.type,
             username: forms.username,
-            mobile: forms.phone
+            mobile: forms.phone,
+            code: forms.smsCode
           }
         });
-
-        forms.registerStatus = true;
+        if (res.code === 999) {
+          setTimeout(() => {
+            showToast('您已注册');
+            router.push('/download');
+          }, 100);
+        } else {
+          forms.registerStatus = true;
+        }
       } catch {
         //
       }
@@ -77,6 +103,26 @@ export default defineComponent({
       router.push('/download');
     };
 
+    const onCodeSend = () => {
+      forms.countDownStatus = false;
+      nextTick(() => {
+        countDownRef.value.start();
+      });
+    };
+
+    const onSendCode = () => {
+      // 发送验证码
+      if (!checkPhone(forms.phone)) {
+        return showToast('请输入正确的手机号码');
+      }
+      forms.imgCodeStatus = true;
+    };
+
+    const onFinished = () => {
+      forms.countDownStatus = true;
+      countDownRef.value.reset();
+    };
+
     onMounted(() => {
       if (!forms.id) {
         showToast('链接有误');
@@ -94,7 +140,9 @@ export default defineComponent({
             </div>
             <div class={styles.bannerSchool}>
               <img src={iconSchool} class={styles.iconSchool} />
-              <p class={styles.schoolName}>{forms.schoolDetail.name}</p>
+              <p class={styles.schoolName}>
+                {forms.schoolDetail?.cooperation?.name}
+              </p>
             </div>
           </div>
         </div>
@@ -104,7 +152,8 @@ export default defineComponent({
             labelAlign="top"
             class="border"
             v-model={forms.username}
-            placeholder="请填写谷尚居的真实姓名"
+            placeholder="请填写您的真实姓名"
+            autocomplete="off"
             maxlength={8}>
             {{
               label: () => (
@@ -118,6 +167,7 @@ export default defineComponent({
             labelAlign="top"
             v-model={forms.phone}
             placeholder="请填写您的手机号码"
+            autocomplete="off"
             maxlength={11}>
             {{
               label: () => (
@@ -134,6 +184,35 @@ export default defineComponent({
               提示：手机号码将成为您管乐迷学校端登录账户
             </div>
           </Cell>
+          <Field
+            labelAlign="top"
+            class="border"
+            v-model={forms.smsCode}
+            placeholder="请输入验证码"
+            autocomplete="off"
+            maxlength={6}>
+            {{
+              label: () => (
+                <>
+                  验证码<i class={styles.required}>*</i>
+                </>
+              ),
+              button: () =>
+                forms.countDownStatus ? (
+                  <span class={styles.codeText} onClick={onSendCode}>
+                    获取验证码
+                  </span>
+                ) : (
+                  <CountDown
+                    ref={(e: any) => (countDownRef.value = e)}
+                    auto-start={false}
+                    time={forms.countDownTime}
+                    onFinish={onFinished}
+                    format="ss秒"
+                  />
+                )
+            }}
+          </Field>
         </CellGroup>
 
         <MSticky position="bottom">
@@ -170,6 +249,17 @@ export default defineComponent({
             </Button>
           </div>
         </Popup>
+
+        {forms.imgCodeStatus ? (
+          <MImgCode
+            v-model:value={forms.imgCodeStatus}
+            phone={forms.phone}
+            onClose={() => {
+              forms.imgCodeStatus = false;
+            }}
+            onSendCode={onCodeSend}
+          />
+        ) : null}
       </div>
     );
   }