登录注册页面开发

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/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: () =>