更新

src/components/imgCode/index.module.less

@@ -0,0 +1,45 @@
+.imgCode {
+  padding: 16px;
+
+  .codeTitle {
+    text-align: center;
+    font-size: 16px;
+    color: #4F4F4F;
+    margin: 0;
+    padding-bottom: 16px;
+  }
+
+  .img {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .imgChange {
+    display: block;
+    color: #AAAAAA;
+    font-size: 12px;
+    text-align: center;
+    padding-top: 5px;
+  }
+
+  .field {
+    background: #F4F4F4;
+    padding: 10px 12px;
+  }
+}
+
+.imgCodePopup {
+  width: 90%;
+  border-radius: 5px;
+  overflow: inherit;
+
+  :global {
+    .van-popup__close-icon {
+      top: -37px !important;
+      right: 0 !important;
+      font-size: 25px;
+      color: #fff;
+    }
+  }
+}

src/components/imgCode/index.tsx

@@ -0,0 +1,96 @@
+import { defineComponent } from "vue";
+import { Col, Popup, Row, Image as VanImage, Loading, Field, Toast } from "vant";
+import styles from './index.module.less'
+import request from "@/helpers/request";
+
+export default defineComponent({
+  name: "imgCode",
+  props: {
+    value: Boolean,
+    phone: [String, Number],
+    onClose: {
+      type: Function,
+      default: () => {},
+    },
+    onSendCode: {
+      type: Function,
+      default: () => {},
+    },
+  },
+  data() {
+    let origin = window.location.origin
+    return {
+      showStatus: false,
+      identifyingCode: origin + '/api-student/code/getLoginImage?phone=' + this.phone,
+      code: null,
+    }
+  },
+  mounted() {
+    this.showStatus = this.value;
+  },
+  watch: {
+    value(val: any) {
+      this.showStatus = val
+    },
+    code(val: any) {
+      if(val.length >= 4) {
+        this.checkVerifyLoginImage();
+      }
+    }
+  },
+  methods: {
+    async updateIdentifyingCode() { // 刷新token
+      let origin = window.location.origin
+      this.identifyingCode = `${origin}/api-student/code/getLoginImage?phone=${this.phone}&token=${Math.random()}`
+    },
+    async checkVerifyLoginImage() {
+      try {
+          if((this as any).code.length < 4) {
+              return
+          }
+          await request('/api-student/code/verifyLoginImage', {
+            data: {
+              phone: this.phone,
+              code: this.code
+            }
+          })
+          await request('/api-student/code/sendSms', {
+            data: {
+              mobile: this.phone
+            }
+          })
+          Toast('验证码已发送')
+          this.onClose();
+          this.onSendCode();
+      } catch {
+          this.updateIdentifyingCode()
+      }
+    },
+  },
+  render() {
+    return (
+      <Popup show={this.showStatus} class={styles.imgCodePopup} closeOnClickOverlay={false} onClose={this.onClose} closeable closeIcon="close">
+        <div class={styles.imgCode}>
+          <p class={styles.codeTitle}>输入图形验证码</p>
+          <Row>
+            <Col span="14">
+              <Field placeholder="请输入验证码" v-model={this.code} class={styles.field} />
+            </Col>
+            <Col span="10" class={styles.img}>
+              <VanImage src={this.identifyingCode} onClick={() => this.updateIdentifyingCode()}
+                // @ts-ignore
+                vSlots={{
+                  loading: () => <Loading type="spinner" size="20" />
+                }} />
+            </Col>
+          </Row>
+          <Row style={{ display: 'flex', justifyContent: 'end' }}>
+            <Col span="10">
+              <span class={styles.imgChange} onClick={() => this.updateIdentifyingCode()}>看不清？换一换</span>
+            </Col>
+          </Row>
+        </div>
+      </Popup>
+    )
+  }
+})

src/helpers/validate.ts

@@ -1,15 +1,19 @@
-// 学生地址
-export function vaildStudentUrl() {
-    let url = window.location.href
-    let returnUrl = ''
-    if (/online/.test(url)) { //线上
-      returnUrl = 'https://mstuonline.dayaedu.com'
-    } else if (/dev/.test(url)) { // dev 环境
-      returnUrl = 'http://mstudev.dayaedu.com'
-    } else if (/test/.test(url)) { // dev 环境
-      returnUrl = 'http://mstutest.dayaedu.com'
-    } else { // 默认dev环境
-      returnUrl = 'http://mstudev.dayaedu.com'
-    }
-    return returnUrl
-  }
+// 学生地址
+export function vaildStudentUrl() {
+  const url = window.location.href;
+  let returnUrl = '';
+  if (/online/.test(url)) {
+    //线上
+    returnUrl = 'https://mstuonline.dayaedu.com';
+  } else if (/dev/.test(url)) {
+    // dev 环境
+    returnUrl = 'http://mstudev.dayaedu.com';
+  } else if (/test/.test(url)) {
+    // dev 环境
+    returnUrl = 'http://mstutest.dayaedu.com';
+  } else {
+    // 默认dev环境
+    returnUrl = 'http://mstudev.dayaedu.com';
+  }
+  return returnUrl;
+}

src/student/layout/auth.tsx

@@ -20,7 +20,6 @@ export default defineComponent({
     }
   },
   mounted() {
-    console.log(1111)
     this.setAuth();
   },
   methods: {

src/student/layout/login.tsx

@@ -1,5 +1,6 @@
 import { defineComponent } from "vue";
 import { CellGroup, Field, Button, CountDown } from "vant";
+import ImgCode from "@/components/imgCode";
 import request from "@/helpers/request";
 import { setLogin, state } from "@/student/state";
 import { removeAuth, setAuth } from "@/helpers/utils";
@@ -9,13 +10,14 @@ export default defineComponent({
   name: 'login',
   data() {
     return {
-      loginType: 'PWD' as loginType,
+      loginType: 'SMS' as loginType,
       username: '',
       password: '',
       smsCode: '',
       countDownStatus: true, // 是否发送验证码
       countDownTime: 1000 * 120, // 倒计时时间
       countDownRef: null as any, // 倒计时实例
+      imgCodeStatus: false,
     }
   },
   computed: {
@@ -26,7 +28,6 @@ export default defineComponent({
       } else {
         this.username && this.smsCode && (status = false);
       }
-      console.log(status, this.loginType)
       return status;
     },
   },
@@ -83,6 +84,12 @@ export default defineComponent({
 
       }
     },
+    async onSendCode() { // 发送验证码
+      // if(!checkPhone(this.phoneNumber)) {
+      //     return
+      // }
+      this.imgCodeStatus = true
+    },
     onCodeSend() {
       this.countDownStatus = false;
       this.countDownRef.start();
@@ -97,7 +104,7 @@ export default defineComponent({
       } else if(this.loginType === 'SMS') {
         this.loginType = 'PWD'
       }
-    }
+    },
   },
   render() {
     return (
@@ -127,7 +134,7 @@ export default defineComponent({
             // @ts-ignore
             vSlots={{
               button: () => (
-                this.countDownStatus ? <Button size="small" round type="primary" onClick={this.onCodeSend}>发送验证码</Button> :  <CountDown ref={this.countDownRef} auto-start="false" time={this.countDownTime} onFinish={this.onFinished} format="ss秒" />
+                this.countDownStatus ? <Button size="small" round type="primary" onClick={this.onSendCode}>发送验证码</Button> :  <CountDown ref={this.countDownRef} auto-start="false" time={this.countDownTime} onFinish={this.onFinished} format="ss秒" />
               )
             }}
           /> }
@@ -139,6 +146,8 @@ export default defineComponent({
           </Button>
           <Button plain onClick={this.onChange}>{ this.loginType === 'PWD' ? '验证码登录' : '密码登录' }</Button>
         </div>
+
+        { this.imgCodeStatus ? <ImgCode v-model:value={this.imgCodeStatus} phone={this.username} onClose={() => { this.imgCodeStatus = false }} onSendCode={this.onCodeSend} /> : null }
       </div>
     )
   }