图形验证码更新

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

@@ -1,130 +1,132 @@
-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'
-import { state } from '@/state'
-
-export default defineComponent({
-  name: 'imgCode',
-  props: {
-    value: Boolean,
-    phone: [String, Number],
-    onClose: {
-      type: Function,
-      // (...args: any[]) => any) | undefined
-      default: () => {}
-    },
-    onSendCode: {
-      type: Function,
-      default: () => {}
-    }
-  },
-  data() {
-    let origin = window.location.origin
-    let suffix =
-      state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
-    return {
-      isSuffix: suffix,
-      showStatus: false,
-      identifyingCode:
-        origin + suffix + '/code/getImageCode?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}${
-        this.isSuffix
-      }/code/getImageCode?phone=${this.phone}&token=${Math.random()}`
-    },
-    async checkVerifyLoginImage() {
-      try {
-        if ((this as any).code.length < 4) {
-          return
-        }
-        await request.post(`${this.isSuffix}/code/verifyImageCode`, {
-          requestType: 'form',
-          data: {
-            phone: this.phone,
-            code: this.code
-          }
-        })
-        await request.post(`${this.isSuffix}/code/sendSmsCode`, {
-          requestType: 'form',
-          data: {
-            mobile: this.phone,
-            type: 'LOGIN'
-          }
-        })
-        Toast('验证码已发送')
-        this.onClose()
-        this.onSendCode()
-      } catch {
-        this.updateIdentifyingCode()
-      }
-    }
-  },
-  render() {
-    return (
-      // @ts-ignore
-      <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>
-    )
-  }
-})
+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'
+import { state } from '@/state'
+
+export default defineComponent({
+  name: 'imgCode',
+  props: {
+    value: Boolean,
+    phone: [String, Number],
+    onClose: {
+      type: Function,
+      // (...args: any[]) => any) | undefined
+      default: () => {}
+    },
+    onSendCode: {
+      type: Function,
+      default: () => {}
+    }
+  },
+  data() {
+    const origin = window.location.origin
+    const suffix =
+      state.platformType === 'STUDENT' ? '/api-student' : '/api-teacher'
+    return {
+      isSuffix: suffix,
+      showStatus: false,
+      identifyingCode:
+        origin + suffix + '/code/getImageCode?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
+      const origin = window.location.origin
+      this.identifyingCode = `${origin}${
+        this.isSuffix
+      }/code/getImageCode?phone=${this.phone}&token=${Math.random()}`
+    },
+    async checkVerifyLoginImage() {
+      try {
+        if ((this as any).code.length < 4) {
+          return
+        }
+        // await request.post(`${this.isSuffix}/code/verifyImageCode`, {
+        //   requestType: 'form',
+        //   data: {
+        //     phone: this.phone,
+        //     code: this.code
+        //   }
+        // })
+        await request.post(`${this.isSuffix}/code/sendSmsCode`, {
+          requestType: 'form',
+          data: {
+            mobile: this.phone,
+            type: 'LOGIN',
+            code: this.code
+          }
+        })
+        Toast('验证码已发送')
+        this.onClose()
+        this.onSendCode()
+      } catch {
+        this.updateIdentifyingCode()
+      }
+    }
+  },
+  render() {
+    return (
+      // @ts-ignore
+      <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}
+                autocomplete="off"
+              />
+            </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>
+    )
+  }
+})