code input

src/views/components/CodeInputPopup.vue

@@ -0,0 +1,73 @@
+<template>
+  <el-dialog :visible.sync="localShow" width="350px" modal-append-to-body append-to-body>
+    <div class="fx-column fx-cen-cen pt30 pb30 bg-white gap-20">
+      <div class="fx-row ai-cen gap-20">
+        <el-image :src="img" style="height: 48px;" />
+        <i class="el-icon-refresh f24" @click="loadCodeImage(true)" />
+      </div>
+      <div>
+        <el-input v-model="code" placeholder="请输入上图结果" />
+      </div>
+      <el-button type="primary" @click="handleConfirm">确认</el-button>
+    </div>
+  </el-dialog>
+</template>
+
+<script>
+import { getCodeImg } from '@/api/login'
+
+export default {
+  name: 'CodeInputPopup',
+  props: {
+    show: {
+      type: Boolean,
+      default: false
+    }
+  },
+  data() {
+    return {
+      localShow: this.show || false,
+      img: '',
+      uuid: '',
+      code: ''
+    }
+  },
+  watch: {
+    show: function(val) {
+      this.localShow = val
+      if (val) this.loadCodeImage()
+    },
+    localShow: function(val) {
+      this.$emit('update:show', val)
+    }
+  },
+  methods: {
+    loadCodeImage: async function(force) {
+      if (!force && this.uuid && this.img) return
+      const res = await getCodeImg()
+      this.uuid = res.uuid
+      this.img = 'data:image/gif;base64,' + res.img
+    },
+    reset: function() {
+      this.uuid = ''
+      this.img = ''
+      this.code = ''
+    },
+    handleConfirm: function() {
+      if (!this.code) {
+        return this.msgError('请输入验证码')
+      }
+      this.localShow = false
+      const { code, uuid } = this
+      this.$emit('complete', { code, uuid })
+      this.$nextTick(() => this.reset())
+    }
+  }
+}
+</script>
+
+<style scoped>
+.gap-20 {
+  gap: 20px;
+}
+</style>

src/views/components/forget-pwd.vue

@@ -24,17 +24,21 @@
     <div class="mx-buttons">
       <el-button type="primary" @click="submitAction">确认修改</el-button>
     </div>
+    <code-input-popup :show.sync="showCodeInput" @complete="confirmCodeInput"/>
   </el-form>
 </template>
 
 <script>
 import { resetCardPassword, sendSmsNoValidation } from '@/api/login'
+import CodeInputPopup from "@/views/components/CodeInputPopup.vue";
 
 export default {
   name: 'forgetPassword',
+  components: {CodeInputPopup},
   data() {
     return {
       countdown: 0,
+      showCodeInput: false,
       model: {
         mobile: '',
         smsCode: '',
@@ -81,19 +85,23 @@ export default {
       this.$refs.form.validateField('mobile', (error) => {
         // validate success
         if (!error) {
-          sendSmsNoValidation({
-            mobile: this.model.mobile,
-            smsType: 1
-          }).then(res => {
-            // send code success
-            this.msgSuccess('发送成功')
-            this.beginCountDown()
-          })
+          this.showCodeInput = true
         } else {
           this.msgError(error)
         }
       })
     },
+    confirmCodeInput(events) {
+      sendSmsNoValidation({
+        mobile: this.model.mobile,
+        smsType: 1,
+        ...events
+      }).then(res => {
+        // send code success
+        this.msgSuccess('发送成功')
+        this.beginCountDown()
+      })
+    },
     submitAction: function() {
       this.$refs.form.validate(valid => {
         if (valid) {