产权交易手机登录优化

src/api/login/index.js

@@ -71,10 +71,12 @@ export function getCodeImg() {
 }
 
 // 发送短信验证码
-export function getSmsCode(mobile) {
+export function getSmsCode(mobile,code,uuid) {
 
   const data = {
-    mobile
+    mobile,
+    code,
+    uuid
   }
 
   return request({

src/views/login.vue

@@ -39,7 +39,7 @@
               placeholder="密码"
             />
             <van-field
-              v-model="formData.code"
+              v-model="code"
               center
               clearable
               label="验证码"
@@ -51,7 +51,7 @@
               </template>
             </van-field>
             <van-checkbox style="float: left;margin-top:10px;margin-left:20px;" v-model="formData.rememberMe" shape="square">{{showMessage ? "记住手机号" : "记住密码"}}</van-checkbox>
-            <p style="float: right;margin-top:10px;margin-right:20px;color:#1D6FE9 ">忘记密码</p>
+<!--            <p style="float: right;margin-top:10px;margin-right:20px;color:#1D6FE9 ">忘记密码</p>-->
             <div class="clear"></div>
           </div>
           <div v-show="isSmsLogin">
@@ -60,6 +60,17 @@
               label="手机号"
               placeholder="请输入手机号码"
             />
+            <van-field
+              v-model="mobileCode"
+              center
+              clearable
+              label="验证码"
+              placeholder="图形验证码"
+            >
+              <template #button>
+                <img class="code-img" :src="codeUrlPhone" @click="getCodePhone" />
+              </template>
+            </van-field>
             <van-field
               v-model="formData.smsCode"
               center
@@ -133,6 +144,9 @@ export default {
       },
       loading: false,
       codeUrl: "", //验证码
+      codeUrlPhone: "", //验证码
+      mobileCode:null,
+      code:null,
       isSmsLogin: false, //是否手机验证码
       computeTime: 0,
       height:0
@@ -140,6 +154,7 @@ export default {
   },
   created() {
     this.getCode();
+    this.getCodePhone();
     this.height = document.body.clientHeight
     this.getCookie();
     //调用微信公众号方法
@@ -160,6 +175,12 @@ export default {
         this.codeUrl = "data:image/gif;base64," + res.img;
       });
     },
+    getCodePhone() {
+      getCodeImg().then((res) => {
+        this.formData.uuid = res.uuid;
+        this.codeUrlPhone = "data:image/gif;base64," + res.img;
+      });
+    },
     getCookie() {
       const username = Cookies.get("username");
       const password = Cookies.get("password");
@@ -181,12 +202,12 @@ export default {
           });
           return false;
         }
-        getSmsCode(this.formData.mobile).then((res) => {
+        getSmsCode(this.formData.mobile,this.mobileCode,this.formData.uuid).then((res) => {
           if (res.code === 200) {
              this.$dialog.alert({
               message: '验证码已发送',
             });
-            this.loginForm.uuid = res.uuid;
+            this.formData.uuid = res.uuid;
             this.computeTime = 60;
             this.timer = setInterval(() => {
               this.computeTime--;
@@ -213,8 +234,14 @@ export default {
               message: '短信验证码不能为空',
             });
           return false;
+        } else if (this.mobileCode == "") {
+          this.$dialog.alert({
+              message: '验证码不能为空',
+            });
+          return false;
         }
         this.loading = true;
+        this.formData.code = this.mobileCode;
         this.$store
           .dispatch("SmsLogin", this.formData)
           .then(() => {
@@ -244,12 +271,13 @@ export default {
               message: '密码不能为空',
           });
           return false;
-        } else if (this.formData.code == "") {
+        } else if (this.code == "") {
           this.$dialog.alert({
               message: '图片验证码不能为空',
           });
           return false;
         }
+        this.formData.code = this.code;
         this.$store
           .dispatch("Login", this.formData)
           .then(() => {