登录注册页面开发

src/boot/utils.js

@@ -20,7 +20,8 @@ Vue.prototype.domainManager = function() {
             domainUrl = "http://testapi.oytour.com";
         } else if (domainNameUrl.indexOf('oytour') !== -1) {
             domainUrl = "http://reborn.oytour.com";
-            domainUrl = 'http://192.168.10.11:8083'
+            // domainUrl = 'http://192.168.10.11:8083'
+            domainUrl = 'http://192.168.10.206:8015' // 吴春
         }
         var obj = {
             //主地址

src/css/app.scss

@@ -124,4 +124,7 @@
   display:-webkit-box; /* 盒模型 */
   -webkit-line-clamp:2; /* 限制文本行数 */
   -webkit-box-orient:vertical; /* 盒内子元素布局方向 */
+}
+.primary {
+    color: $primary;
 }
\ No newline at end of file

src/pages/login.vue

 <style>
+.login {
+  background: url('../assets/img/login-bg.png');background-size: cover;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
 .login-box {
   max-width: 436px;
   padding: 30px 40px;
-  margin: 40px auto;
+  margin: 100px auto;
+  position: absolute;
+  right: 360px;
   background-clip: padding-box;
   background: #ffffff;
   border-radius: 18px;
@@ -79,32 +91,32 @@
       <div v-if="loginType !== 'wechat'">
         <div class="flex items-end justify-between">
           <div class="f34 bold">{{ isLogin ? "登錄" : "註冊" }}</div>
-          <div class="f16 bold cursor-pointer" @click="loginToRegister">
+          <div class="f16 bold cursor-pointer" v-if="loginType !== 'bindEmail'" @click="loginToRegister">
             {{ isLogin ? "註冊賬號" : "返回登錄" }}
           </div>
         </div>
         <div class="login_row">
           <div class="form-group">
             <div class="login_labelName">輸入郵箱</div>
-            <q-input outlined v-model="loginMsg.account" />
-            <div class="main" v-show="tips">邮箱格式有误,请核实</div>
+            <q-input outlined v-model="loginMsg.Mailbox" />
+            <div class="primary q-mt-sm" v-show="tips">邮箱格式有误,请核实</div>
           </div>
-          <div class="form-group" v-if="loginType === 'password'">
+          <div class="form-group" v-if="loginType === 'PassWord'">
             <div class="login_labelName flex justify-between items-center">
-              密碼<span class="text-grey-6 cursor-pointer">忘記密碼</span>
+              密碼<span class="text-grey-6 cursor-pointer" @click="resetPassword">忘記密碼</span>
             </div>
             <q-input
               v-if="flag == 1"
               outlined
-              v-model="loginMsg.password"
+              v-model="loginMsg.PassWord"
               type="text"
               ref="pwd"
             />
             <q-input
               v-if="flag == 2"
               outlined
-              v-model="loginMsg.password"
-              type="password"
+              v-model="loginMsg.PassWord"
+              type="PassWord"
               ref="pwd"
             />
             <i
@@ -118,19 +130,19 @@
               @click="flag = 1"
             ></i>
           </div>
-          <div v-if="loginType === 'verify'">
+          <div v-else-if="loginType === 'MailCode'|| loginType === 'bindEmail'">
             <q-btn
-              v-if="!isSend"
-              color="primary"
+              v-if="!isSend" class="q-mb-lg"
               unelevated
-              style="width: 100%; height: 50px; margin-top: 20px"
+              color="grey-3"
+              style="width: 100%; color: #8B8B8B !important; height: 50px; margin-top: 20px"
               filled
               label="发送验证码"
               @click="sendVerify"
             />
-            <div v-else>
-              <q-input outlined v-model="loginMsg.verify" type="text" />
-              <div>
+            <div v-else class="mt q-mb-sm">
+              <q-input outlined v-model="loginMsg.MailCode" type="text" />
+              <div class="q-mt-sm" :class="cutDown ? 'text-grey-6' : ''">
                 {{ cutDown ? cutDown + "秒后可重新发送" : "重新發送驗證碼" }}
               </div>
             </div>
@@ -141,7 +153,7 @@
             @click="changeLoginType"
           >
             {{
-              loginType === "password" ? "使用郵箱驗證登陸" : "使用賬號密碼登陸"
+              loginType === "PassWord" ? "使用郵箱驗證登陸" : "使用賬號密碼登陸"
             }}
           </div>
           <div class="q-mb-xl">
@@ -183,7 +195,7 @@
         </div>
       </div>
       <!-- 微信扫码页面 -->
-      <div v-else>
+      <div v-show="loginType === 'wechat'">
         <div class="bold f34">微信登錄</div>
         <!-- <qrcode-vue></qrcode-vue> -->
         <div id="login_container"></div>
@@ -204,14 +216,14 @@ export default {
       isSend: false,
       tips: false,
       cutDown: 0,
-      loginType: "password", // password 邮箱密码，verify，邮箱验证码，wechat微信登录 微信登录没有绑定邮箱时跳转绑定邮箱业务逻辑
+      loginType: "PassWord", // PassWord 邮箱密码，verify，邮箱验证码，wechat微信登录 微信登录没有绑定邮箱时跳转绑定邮箱业务逻辑
       isAgree: false,
       isLogin: true,
       loginMsg: {
         RB_Group_Id: 0,
-        account: "",
-        password: "",
-        verify: "",
+        Mailbox: "",
+        PassWord: "",
+        MailCode: "",
       },
       // , 'google', 'facebook', 'apple'
       typeList: ["wechat"],
@@ -222,6 +234,14 @@ export default {
   },
   created() {},
   mounted() {
+    console.log('login', this.$route.query)
+    const {code, state} = this.$route.query
+    if(code) {
+      this.fetchLoginInfo(code, state)
+      this.isLogin = false
+            this.loginType = 'bindEmail'
+    }
+    this.getOpenInfo()
     var jObj = JSON.parse(localStorage.getItem("groupinfo"));
     this.loginMsg.RB_Group_Id = jObj.GroupId;
     //获取网站基础配置
@@ -236,13 +256,32 @@ export default {
     },
   },
   methods: {
+    fetchLoginInfo(code, state) {this.apipost(
+        'getWXToken_post',
+        {
+          code,
+          state
+        },
+        (res) => {
+          const {type, id } = res.data.data
+          if(type === 1) {
+this.CommonJump("/index", {});
+          } else {
+      this.isLogin = false
+            // 绑定邮箱
+            this.loginType = 'bindEmail'
+            this.userId = id
+          }
+        },
+        (err) => {}
+      );
+    },
     getOpenInfo() {
       this.apipost(
         "GetOpenInfo_post",
         {},
         (r) => {
-          this.openInfo = r.data;
-          this.setWechatCode()
+          this.openInfo = r.data.data;
         },
         null
       );
@@ -250,7 +289,7 @@ export default {
     setWechatCode() {
       const { AppID, State, OpenRedirectUri } = this.openInfo;
       const obj = new WxLogin({
-        self_redirect: true,
+        self_redirect: false,
         id: "login_container",
         appid: AppID,
         scope: "snsapi_login",
@@ -262,6 +301,12 @@ export default {
     },
     loginToRegister() {
       this.isLogin = !this.isLogin;
+      if(!this.isLogin) {
+        this.mylabel = "注册";
+        this.loginType = 'MailCode'
+      } else {
+        this.mylabel = "登录"
+      }
     },
     sendVerify() {
       if (this.verifyEmail()) {
@@ -283,9 +328,9 @@ export default {
       this.tips = false;
       this.loginMsg = {
         RB_Group_Id: 0,
-        account: "",
-        password: "",
-        verify: "",
+        Mailbox: "",
+        PassWord: "",
+        MailCode: "",
       };
       if (this.timer) {
         clearTimeout(this.timer);
@@ -293,7 +338,7 @@ export default {
       this.cutDown = 0;
     },
     verifyEmail() {
-      if (/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(this.loginMsg.account)) {
+      if (/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(this.loginMsg.Mailbox)) {
         this.tips = false;
         return true;
       } else {
@@ -303,18 +348,38 @@ export default {
       }
     },
     changeLoginType() {
-      if (this.loginType === "password") {
-        this.loginType = "verify";
+      if (this.loginType === "PassWord") {
+        this.loginType = "MailCode";
       } else {
-        this.loginType = "password";
+        this.loginType = "PassWord";
       }
     },
     useWechatLogin() {
-      this.loginType = "wechat";
-      this.setWechatCode()
+      // this.loginType = "wechat";
+      // this.setWechatCode()
+      const { AppID, State, OpenRedirectUri } = this.openInfo;
+      console.log("encodeURI('http://localhost:9090/login')", OpenRedirectUri)
+      let redirect_uri = OpenRedirectUri
+      const url = `https://open.weixin.qq.com/connect/qrconnect?appid=${AppID}&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_login&state=${State}&wechat_redirect=${redirect_uri}`
+      // this.windowObjectReference = window.open(url, 'wechat', 'left: 20,top: 20,width:200,height:200,')
+      // console.log('windowObjectReference', this.windowObjectReference)
+      // setTimeout(() => {console.log(this.windowObjectReference.close())}, 1000)
+      window.location.href = url
     },
     login() {
-      if (this.loginMsg.account == "") {
+      if(this.mylabel === "提交中...") {
+        return
+      }
+      if (!this.isAgree) {
+        this.$q.notify({
+          type: "negative",
+          message: "请先同意平台使用协议",
+          position: "top",
+          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+        });
+        return;
+      }
+      if (this.loginMsg.Mailbox == "") {
         this.$q.notify({
           type: "negative",
           message: "请输入账号",
@@ -323,7 +388,7 @@ export default {
         });
         return;
       }
-      if (this.loginMsg.password == "") {
+      if (this.loginMsg.PassWord == "" && (this.loginType === 'PassWord')) {
         this.$q.notify({
           type: "negative",
           message: "请输入密码",
@@ -332,10 +397,30 @@ export default {
         });
         return;
       }
+      if (this.loginMsg.MailCode == "" && (this.loginType === 'MailCode' || this.loginType === 'bindEmail')) {
+        this.$q.notify({
+          type: "negative",
+          message: "请输入邮箱验证码",
+          position: "top",
+          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+        });
+        return;
+      }
+      let params = {...this.loginMsg}
+      let url = 'MailboxPwdLogin_post' // 密码登录
+      if(!this.isLogin) {
+        url = 'directCustomer_post_MailRegister'
+      } else if(this.loginType === 'MailBox') {
+        ulr = 'MailboxLogin_post'
+      }
+      if(this.loginType === 'bindEmail') {
+        url = 'BindMailByOpenId_post'
+        params.Unoinid = this.userId
+      }
       this.mylabel = "提交中...";
       this.apipost(
-        "b2b_post_Login",
-        this.loginMsg,
+        url,
+        params,
         (res) => {
           this.mylabel = "登入";
           if (res.data.resultCode == 1) {
@@ -354,6 +439,9 @@ export default {
         (err) => {}
       );
     },
+    resetPassword() {
+this.CommonJump("/resetPassword", {});
+    }
   },
 };
 </script>

src/pages/resetPassword.vue

+<style>
+.login {
+  background: url('../assets/img/login-bg.png');background-size: cover;
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+}
+.login-box {
+  width: 436px;
+  padding: 30px 40px;
+  margin: 100px auto;
+  position: absolute;
+  right: 360px;
+  background-clip: padding-box;
+  background: #ffffff;
+  border-radius: 18px;
+}
+
+.login-box .tw_logo {
+  margin: 0 auto 20px;
+  display: block;
+  height: 45px;
+  width: auto;
+}
+
+.login-box .tip-text {
+  font-size: 16px;
+  margin-bottom: 15px;
+  color: #999;
+  text-align: center;
+}
+
+.login-box .tip-text a {
+  color: #00afff;
+}
+
+.login_row {
+  width: 100%;
+}
+
+.form-group {
+  position: relative;
+  margin-bottom: 15px;
+}
+
+.login_labelName {
+  margin-top: 34px;
+  font-size: 16px;
+  margin-bottom: 16px;
+}
+
+.form-group i {
+  position: absolute;
+  right: 6px;
+  bottom: 0;
+  z-index: 2;
+  width: 46px;
+  height: 46px;
+  text-align: center;
+  line-height: 46px;
+  color: #999;
+  font-size: 28px;
+  cursor: pointer;
+}
+
+.login-box .q-field__control {
+  height: 46px;
+}
+.type-item {
+  width: 50px;
+  height: 50px;
+  background: #f5f5f5;
+  border-radius: 25px;
+}
+.type-item img {
+  width: 28px;
+  height: 28px;
+}
+</style>
+<template>
+  <div class="login">
+    <div class="login-box">
+          <div class="f34 bold">重置密码</div>
+        <div class="login_row">
+          <div class="form-group">
+            <div class="login_labelName">輸入郵箱</div>
+            <q-input outlined v-model="loginMsg.Mailbox" />
+            <div class="primary q-mt-sm" v-show="tips">邮箱格式有误,请核实</div>
+          </div>
+          <div>
+            <q-btn
+              v-if="!isSend" class="q-mb-lg"
+              unelevated
+              color="grey-3"
+              style="width: 100%; color: #8B8B8B !important; height: 50px; margin-top: 20px"
+              filled
+              label="发送验证码"
+              @click="sendVerify"
+            />
+            <div v-else class="mt q-mb-sm">
+              <q-input outlined v-model="loginMsg.MailCode" type="text" />
+              <div class="q-mt-sm" :class="cutDown ? 'text-grey-6' : ''">
+                {{ cutDown ? cutDown + "秒后可重新发送" : "重新發送驗證碼" }}
+              </div>
+            </div>
+          </div>
+          <div class="form-group">
+            <div class="login_labelName flex justify-between items-center">
+              密碼
+            </div>
+            <q-input
+              v-if="flag == 1"
+              outlined
+              v-model="loginMsg.PassWord"
+              type="text"
+              ref="pwd"
+            />
+            <q-input
+              v-if="flag == 2"
+              outlined
+              v-model="loginMsg.PassWord"
+              type="PassWord"
+              ref="pwd"
+            />
+            <i
+              class="iconfont iconyanjing_xianshi"
+              v-if="flag == 1"
+              @click="flag = 2"
+            ></i>
+            <i
+              class="iconfont iconbiyan"
+              v-if="flag == 2"
+              @click="flag = 1"
+            ></i>
+          </div>
+          <div class="q-mb-xl">
+            <q-btn
+              color="primary"
+              unelevated
+              style="width: 100%; height: 50px; margin-top: 20px"
+              filled
+              :label="mylabel"
+              @click="login"
+            />
+          </div>
+        </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import QrcodeVue from "qrcode.vue";
+export default {
+  name: "Login",
+  components: {
+    QrcodeVue,
+  },
+  data() {
+    return {
+      isSend: false,
+      tips: false,
+      cutDown: 0,
+      isAgree: false,
+      isLogin: true,
+      loginMsg: {
+        Mailbox: "",
+        PassWord: "",
+        MailCode: "",
+      },
+      // , 'google', 'facebook', 'apple'
+      typeList: ["wechat"],
+      logo: "",
+      flag: 2,
+      mylabel: "重置密码",
+    };
+  },
+  created() {},
+  mounted() {
+  },
+  methods: {
+    sendVerify() {
+      if (this.verifyEmail()) {
+        this.isSend = true;
+        this.cutDown = 60;
+        this.startCutDown();
+      }
+    },
+    startCutDown() {
+      this.timer = setTimeout(() => {
+        this.cutDown--;
+        if (this.cutDown) {
+          this.startCutDown();
+        }
+      }, 1000);
+    },
+    verifyEmail() {
+      if (/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(this.loginMsg.Mailbox)) {
+        this.tips = false;
+        return true;
+      } else {
+        // 提示用户邮箱格式有误
+        this.tips = true;
+        return false;
+      }
+    },
+    login() {
+      if(this.mylabel === "提交中...") {
+        return
+      }
+      
+      if (this.loginMsg.Mailbox == "") {
+        this.$q.notify({
+          type: "negative",
+          message: "请输入账号",
+          position: "top",
+          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+        });
+        return;
+      }
+      if (this.loginMsg.PassWord == "") {
+        this.$q.notify({
+          type: "negative",
+          message: "请输入密码",
+          position: "top",
+          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+        });
+        return;
+      }
+      if (this.loginMsg.MailCode == "") {
+        this.$q.notify({
+          type: "negative",
+          message: "请输入邮箱验证码",
+          position: "top",
+          timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+        });
+        return;
+      }
+      this.mylabel = "提交中...";
+      this.apipost(
+        'MailboxPwdLogin_post',
+        this.loginMsg,
+        (res) => {
+          this.mylabel = "重置密码";
+          if (res.data.resultCode == 1) {
+            this.CommonJump("/login", {});
+          } else {
+            this.$q.notify({
+              type: "negative",
+              message: res.data.message,
+              position: "top",
+              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+            });
+          }
+        },
+        (err) => {}
+      );
+    },
+  },
+};
+</script>

src/router/routes.js

@@ -103,6 +103,16 @@ const routes = [{
                 import ('pages/login.vue')
         }]
     },
+    {
+        path: '/resetPassword',
+        component: () =>
+            import ('pages/resetPassword.vue'),
+        children: [{
+            path: '/resetPassword',
+            component: () =>
+                import ('pages/resetPassword.vue')
+        }]
+    },
     {
         path: '/newTrip',
         component: () =>