完成登录、注册、修改密码的对接

pages/users/login.vue

@@ -81,7 +81,13 @@
           {{timing}}
         </yun-div>
       </yun-div>
-      <yun-button :disabled="isClick" :size="[584,86]" :style="{backgroundColor:commonReturnPrimaryColor(opacity)}">登 录
+      <yun-button
+        :disabled="isClick"
+        :size="[584,86]"
+        :style="{backgroundColor:commonReturnPrimaryColor(opacity)}"
+        v-tap="handleLogin"
+      >
+        登 录
       </yun-button>
       <yun-div
         :show-ske="false"
@@ -125,6 +131,10 @@ import dingding from '../../assets/svg/dingding.svg'
 import Logo from '../../assets/svg/logo.svg'
 import PageFooter from "../../components/moblie/pageFooter";
 
+import config from '../../action/config'
+
+const Cookie = process.client ? require('js-cookie') : null;
+
 export default {
   components: {PageFooter},
   layout: 'blank',
@@ -196,18 +206,115 @@ export default {
       this.isPassword = false
       this.inputKey = 'codeLogin'
     },
-    sendSms() {
+
+    async getCode() {
+      let smsResponse = await this.$axios.$get(config.api.get.Sms.send, {
+        params: {
+          mobile: this.account
+        }
+      });
+      if (smsResponse.code === 0) {
+        this.$message({
+          type: 'success',
+          message: '短信发送成功！'
+        });
+        return true
+      } else {
+        this.$message({
+          type: 'info',
+          message: smsResponse.msg
+        });
+        return false
+      }
+    },
+
+    async sendSms() {
+      if (this.account === '') {
+        this.$message({
+          type: 'info',
+          message: '手机号不能为空'
+        });
+        return false
+      }
       if (this.timing === '发送验证码') {
-        console.log('发送验证码');
-        let time = 60;
-        let timer = setInterval(() => {
-          this.timing = `${time}秒`
-          time --;
-        }, 1000);
-        setTimeout(() => {
-          clearInterval(timer)
-          this.timing = '发送验证码'
-        }, 60000)
+        let res = await this.getCode();
+        // console.log(res);
+        if (res) {
+          let time = 60;
+          let timer = setInterval(() => {
+            this.timing = `${time}秒`;
+            time--;
+          }, 1000);
+          setTimeout(() => {
+            clearInterval(timer);
+            this.timing = '发送验证码'
+          }, 60000)
+        }
+      }
+    },
+    async handleLogin() {
+      if (!this.isClick) {
+        let authResponse;
+        // 两种登录方式
+        if (this.isPassword) {
+          authResponse = await this.$axios.$post(config.api.post.Authentication.accountAuth, {
+            account: this.account,
+            password: this.password
+          });
+        } else if (!this.isPassword) {
+          authResponse = await this.$axios.$post(config.api.post.Authentication.smsAuth, {
+            mobile: this.account,
+            verifyCode: this.VerificationCode
+          });
+        }
+
+        // 认证成功
+        if (authResponse !== undefined && authResponse.code === 0) {
+          // 获取token
+          const token = authResponse.data.accessToken;
+          const store = this.$store;
+
+          // 设置认证信息
+          store.commit('auth/login', token);
+
+          // 获取用户信息
+          const userInfoResponse = await this.$axios.$get(config.api.get.User.myInfo);
+          if (userInfoResponse.code === 0) {
+            // 存储用户信息
+            store.commit('userProfile/setUser', userInfoResponse.data);
+
+            // 若登录和获取用户信息都成功，则存储认证信息到cookie
+            Cookie.set(config.default_data.KEY_COOKIE_TOKEN, token);
+
+            // 获取未读消息数量
+            const messageResponse = await this.$axios.$get(config.api.get.Message.count);
+            store.commit('message/setUnReadCount', messageResponse.data.unReadCount)
+
+            // 跳转到主页
+            this.$message({
+              type: 'success',
+              message: '登录成功！'
+            });
+            if (!this.from || this.from === '/users/register' || this.from === '/users/reset') {
+              this.$router.push('/')
+            } else {
+              this.$router.push(this.from)
+            }
+          } else {
+            store.commit('auth/logout');
+            store.commit('userProfile/removeUser')
+          }
+        } else if (authResponse !== undefined) {
+          // 认证失败
+          // errorCode(authResponse);
+          if (authResponse.code === -2) {
+            authResponse.msg = authResponse.data.errMsg
+          }
+          this.$message({
+            type: 'error',
+            message: authResponse.msg
+          });
+        }
       }
     }
   }

pages/users/register.vue

@@ -92,7 +92,12 @@
           {{timing}}
         </yun-div>
       </yun-div>
-      <yun-button :disabled="isClick" :size="[584,86]" :style="{backgroundColor:commonReturnPrimaryColor(opacity)}">
+      <yun-button
+        :disabled="isClick"
+        :size="[584,86]"
+        :style="{backgroundColor:commonReturnPrimaryColor(opacity)}"
+        v-tap="handleRegister"
+      >
         注 册
       </yun-button>
       <yun-div
@@ -133,7 +138,7 @@
       :border-r="[8]"
       bg-color-v="#fff"
       :flex-v="['column','flex-start','center']"
-      v-if="false"
+      v-if="success"
     >
       <yun-icon name="success" :size="80" color="#75D098" :style="{lineHeight: commonReturnFlexedLength(40)}"></yun-icon>
       <yun-div :font-style="[26,35,500,'#75D098','center']" :margin-v="[19,0,0]">注册成功</yun-div>
@@ -158,6 +163,7 @@ import wechat from '../../assets/svg/wechat.svg'
 import dingding from '../../assets/svg/dingding.svg'
 import PageFooter from "../../components/moblie/pageFooter";
 import Logo from "../../assets/svg/logo.svg";
+import config from "../../action/config";
 
 export default {
   layout: 'blank',
@@ -202,7 +208,8 @@ export default {
       opacity: 0.2,
       isPhone: true,
       timing: '发送验证码',
-      inputKey: 'registerPhonePassword'
+      inputKey: 'registerPhonePassword',
+      success: false
     }
   },
   computed: {
@@ -246,18 +253,104 @@ export default {
       this.isPhone = false
       this.inputKey = 'registerEmailPassword'
     },
-    sendSms() {
+    async getCode() {
+      let smsResponse = await this.$axios.$get(config.api.get.Sms.send, {
+        params: {
+          mobile: this.account
+        }
+      });
+      if (smsResponse.code === 0) {
+        this.$message({
+          type: 'success',
+          message: '短信发送成功！'
+        });
+        return true
+      } else {
+        this.$message({
+          type: 'info',
+          message: smsResponse.msg
+        });
+        return false
+      }
+    },
+
+    async sendSms() {
+      if (this.account === '') {
+        this.$message({
+          type: 'info',
+          message: '手机号不能为空'
+        });
+        return false
+      }
       if (this.timing === '发送验证码') {
-        console.log('发送验证码');
-        let time = 60;
-        let timer = setInterval(() => {
-          this.timing = `${time}秒`
-          time --;
-        }, 1000);
-        setTimeout(() => {
-          clearInterval(timer)
-          this.timing = '发送验证码'
-        }, 60000)
+        let res = await this.getCode();
+        if (res) {
+          let time = 60;
+          let timer = setInterval(() => {
+            this.timing = `${time}秒`;
+            time--;
+          }, 1000);
+          setTimeout(() => {
+            clearInterval(timer);
+            this.timing = '发送验证码'
+          }, 60000)
+        }
+      }
+    },
+    // 判断是否同意协议
+    checkAgreement(isAgreement) {
+      if (isAgreement) return true;
+      else {
+        this.$message({
+          type: 'info',
+          message: '请同意用户协议和隐私政策'
+        })
+      }
+    },
+    async handleRegister() {
+      if (!this.isClick && this.checkAgreement(this.isSelect)) {
+        let registerResponse;
+
+        if (this.isPhone) {
+          registerResponse = await this.$axios.$post(config.api.post.User.registerPhone, {
+            mobile: this.account,
+            password: this.password,
+            verifyCode: this.VerificationCode
+          })
+        } else if (!this.isPhone) {
+          // 邮箱注册
+          registerResponse = await this.$axios.$post(config.api.post.User.registerEmail, {
+            email: this.account,
+            password: this.password
+          })
+        }
+
+        // 注册成功
+        if (registerResponse !== undefined && registerResponse.code === 0) {
+          this.$message({
+            type:'success',
+            message:'注册成功，请登录！'
+          })
+
+          if (!this.isPhone) {
+            this.success = true;
+            setTimeout(() => {
+              this.$router.push('/users/login');
+            }, 2500)
+          } else {
+            this.$router.push('/users/login');
+          }
+
+        } else if(registerResponse !== undefined) {
+          // 注册失败
+          if (registerResponse.code === -2) {
+            registerResponse.msg = registerResponse.data.errMsg
+          }
+          this.$message({
+            type: 'error',
+            message: registerResponse.msg
+          });
+        }
       }
     }
   }

pages/users/reset.vue

@@ -76,7 +76,12 @@
           {{timing}}
         </yun-div>
       </yun-div>
-      <yun-button :disabled="isClick" :size="[584,86]" :style="{backgroundColor:commonReturnPrimaryColor(opacity)}">
+      <yun-button
+        :disabled="isClick"
+        :size="[584,86]"
+        :style="{backgroundColor:commonReturnPrimaryColor(opacity)}"
+        v-tap="handleReset"
+      >
         重置账号
       </yun-button>
       <yun-div
@@ -124,6 +129,7 @@ import wechat from '../../assets/svg/wechat.svg'
 import dingding from '../../assets/svg/dingding.svg'
 import Logo from "../../assets/svg/logo.svg";
 import PageFooter from "../../components/moblie/pageFooter";
+import config from "../../action/config";
 
 export default {
   layout: 'blank',
@@ -186,18 +192,77 @@ export default {
       this.inputType = this.inputType === 'password' ? 'text' : 'password'
       this.iconName = this.iconName === 'invisible' ? 'visible' : 'invisible'
     },
-    sendSms() {
+    async getCode() {
+      let smsResponse = await this.$axios.$get(config.api.get.Sms.send, {
+        params: {
+          mobile: this.account
+        }
+      });
+      if (smsResponse.code === 0) {
+        this.$message({
+          type: 'success',
+          message: '短信发送成功！'
+        });
+        return true
+      } else {
+        this.$message({
+          type: 'info',
+          message: smsResponse.msg
+        });
+        return false
+      }
+    },
+
+    async sendSms() {
+      if (this.account === '') {
+        this.$message({
+          type: 'info',
+          message: '手机号不能为空'
+        });
+        return false
+      }
       if (this.timing === '发送验证码') {
-        console.log('发送验证码');
-        let time = 60;
-        let timer = setInterval(() => {
-          this.timing = `${time}秒`
-          time --;
-        }, 1000);
-        setTimeout(() => {
-          clearInterval(timer)
-          this.timing = '发送验证码'
-        }, 60000)
+        let res = await this.getCode();
+        if (res) {
+          let time = 60;
+          let timer = setInterval(() => {
+            this.timing = `${time}秒`;
+            time--;
+          }, 1000);
+          setTimeout(() => {
+            clearInterval(timer);
+            this.timing = '发送验证码'
+          }, 60000)
+        }
+      }
+    },
+    async handleReset() {
+      if (!this.isClick) {
+        let resetResponse;
+
+        resetResponse = await this.$axios.$put(config.api.put.User.revisePassword, {
+          mobile: this.account,
+          password: this.password,
+          verifyCode: this.VerificationCode
+        });
+
+        // 修改密码成功
+        if (resetResponse !== undefined && resetResponse.code === 0) {
+          this.$message({
+            type: 'success',
+            message: resetResponse.msg
+          });
+          this.$router.push('/users/login');
+        } else if(resetResponse !== undefined) {
+          // 修改密码失败
+          if (resetResponse.code === -2) {
+            resetResponse.msg = resetResponse.data.errMsg
+          }
+          this.$message({
+            type: 'error',
+            message: resetResponse.msg
+          });
+        }
       }
     }
   }