更新图形验证码

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

@@ -1,137 +1,138 @@
-import { defineComponent } from 'vue'
-import { Col, Popup, Row, Image as VanImage, Loading, Field, Toast, showToast } from 'vant'
-import styles from './index.module.less'
-import request from '@/helpers/request'
-import { state } from '@/state'
-
-export default defineComponent({
-  name: 'o-img-code',
-  props: {
-    value: Boolean,
-    phone: [String, Number],
-    onClose: {
-      type: Function,
-      // (...args: any[]) => any) | undefined
-      default: () => {}
-    },
-    onSendCode: {
-      type: Function,
-      default: () => {}
-    },
-    type: {
-      type: String,
-      default: 'LOGIN'
-    }
-  },
-  data() {
-    const origin = window.location.origin
-    const suffix = state.platformApi
-    return {
-      isSuffix: suffix,
-      showStatus: false,
-      identifyingCode: null as any,
-      code: null
-    }
-  },
-  mounted() {
-    this.showStatus = this.value
-    this.sendImgCode()
-  },
-  watch: {
-    value(val: any) {
-      this.showStatus = val
-    },
-    code(val: any) {
-      if (val.length >= 4) {
-        this.checkVerifyLoginImage()
-      }
-    }
-  },
-  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()}`
-    },
-    async checkVerifyLoginImage() {
-      try {
-        if ((this as any).code.length < 4) {
-          return
-        }
-        await request.post(`${this.isSuffix}/open/verifyImgCode`, {
-          requestType: 'form',
-          hideLoading: true,
-          data: {
-            phone: this.phone,
-            code: this.code
-          }
-        })
-        console.log(state.clientId, state.platformType)
-        await request.post(`${this.isSuffix}/open/sendSms`, {
-          requestType: 'form',
-          hideLoading: true,
-          data: {
-            mobile: this.phone,
-            type: this.type,
-            clientId: state.clientId[state.platformType]
-          }
-        })
-        setTimeout(() => {
-          showToast('验证码已发送')
-        }, 100)
-        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()}>
-                {{ loading: () => <Loading type="spinner" size="20" /> }}
-              </VanImage>
-            </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, showToast } from 'vant'
+import styles from './index.module.less'
+import request from '@/helpers/request'
+import { state } from '@/state'
+
+export default defineComponent({
+  name: 'o-img-code',
+  props: {
+    value: Boolean,
+    phone: [String, Number],
+    onClose: {
+      type: Function,
+      // (...args: any[]) => any) | undefined
+      default: () => {}
+    },
+    onSendCode: {
+      type: Function,
+      default: () => {}
+    },
+    type: {
+      type: String,
+      default: 'LOGIN'
+    }
+  },
+  data() {
+    const origin = window.location.origin
+    const suffix = state.platformApi
+    return {
+      isSuffix: suffix,
+      showStatus: false,
+      identifyingCode: null as any,
+      code: null
+    }
+  },
+  mounted() {
+    this.showStatus = this.value
+    this.sendImgCode()
+  },
+  watch: {
+    value(val: any) {
+      this.showStatus = val
+    },
+    code(val: any) {
+      if (val.length >= 4) {
+        this.checkVerifyLoginImage()
+      }
+    }
+  },
+  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()}`
+    },
+    async checkVerifyLoginImage() {
+      try {
+        if ((this as any).code.length < 4) {
+          return
+        }
+        // await request.post(`${this.isSuffix}/open/verifyImgCode`, {
+        //   requestType: 'form',
+        //   hideLoading: true,
+        //   data: {
+        //     phone: this.phone,
+        //     code: this.code
+        //   }
+        // })
+        // console.log(state.clientId, state.platformType)
+        await request.post(`${this.isSuffix}/open/sendSmsVerify`, {
+          requestType: 'form',
+          hideLoading: true,
+          data: {
+            mobile: this.phone,
+            type: this.type,
+            code: this.code,
+            clientId: state.clientId[state.platformType]
+          }
+        })
+        setTimeout(() => {
+          showToast('验证码已发送')
+        }, 100)
+        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()}>
+                {{ loading: () => <Loading type="spinner" size="20" /> }}
+              </VanImage>
+            </Col>
+          </Row>
+          <Row style={{ display: 'flex', justifyContent: 'end' }}>
+            <Col span="10">
+              <span class={styles.imgChange} onClick={() => this.updateIdentifyingCode()}>
+                看不清？换一换
+              </span>
+            </Col>
+          </Row>
+        </div>
+      </Popup>
+    )
+  }
+})