登录注册功能开发

src/css/app.scss

@@ -102,6 +102,9 @@
 .f30 {
     font-size: 30px;
 }
+.f34 {
+    font-size: 34px;
+}
 .f36 {
     font-size: 36px;
 }

src/index.template.html

@@ -20,6 +20,7 @@
     <!-- <script async defer crossorigin="anonymous" src="https://connect.facebook.net/zh_CN/sdk.js#xfbml=1&version=v7.0" nonce="bDrSmWhp"></script> -->
     <!-- <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=OBd2bhrqKUSbQGpniCZ996suti9YG7Bc"></script> -->
     <script src="https://api.map.baidu.com/api?type=webgl&v=2.0&ak=OBd2bhrqKUSbQGpniCZ996suti9YG7Bc"></script>
+    <script src="http://res.wx.qq.com/connect/zh_CN/htmledition/js/wxLogin.js"></script>
     <script>
         function countryCb(r) {
             if (!r) {

src/pages/detailsHotal.vue

@@ -23,7 +23,7 @@
           class="col product-price text-subtitle1 text-weight-bold f30"
           style="text-align: left"
         >
-          <span>CNY {{ moneyFormat(dataList.MinPrice, 0) }}</span>
+          <span>CNY {{ moneyFormat(MinPrice, 0) }}</span>
           <span class="q-ml-sm f16 text-grey-7">起</span>
         </span>
         <q-btn
@@ -156,9 +156,9 @@
               $q.platform.is.mobile,
           }"
         >
-          <div class="product-price f30 bold" v-if="dataList.MinPrice > 0">
+          <div class="product-price f30 bold" v-if="MinPrice > 0">
             <!-- CNY：{{ dataList. }} -->
-            CNY：{{ moneyFormat(dataList.MinPrice, 0) }}
+            CNY：{{ moneyFormat(MinPrice, 0) }}
             <span class="f16 text-grey-6 normal">起</span>
           </div>
           <div v-else class="text-subtitle1 f30 bold text-grey-6">暫無報價</div>
@@ -309,7 +309,7 @@
             </template>
           </div> -->
           <!--方案选择区 -->
-          <select-room :detail="dataList"></select-room>
+          <select-room @change="(value) => MinPrice = value" :detail="dataList"></select-room>
           <div class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
             所選方案詳情
           </div>
@@ -616,6 +616,7 @@ export default {
   },
   data() {
     return {
+      MinPrice: 0,
       selectedCar: "",
       tab: "",
       searchDate: "",
@@ -816,8 +817,10 @@ export default {
             console.log("getData", r);
             this.dataList = r.data.data;
             this.dataList.FacilityServices = JSON.parse(this.dataList.FacilityServices)
-            this.dataList.imgCover = this.dataList.ImageList;
-
+            this.dataList.imgCover = this.dataList.List.map(item => {
+              return item.Path
+            });
+            conosle.log(this.dataList.imgCover)
             this.isShow = true;
             this.isDirect = this.dataList.isDirect;
             if (this.dataList.videoStr && this.dataList.videoStr != "") {

src/pages/hotel/selectRoom.vue

@@ -341,6 +341,7 @@ export default {
       if(!this.startDate && arr.length) {
         this.startDate = day.DateStr
         this.minPrice = Math.min(...arr)
+        this.$emit('change', this.minPrice)
       }
       return {
         min: Math.min(...arr),

src/pages/login.vue

 <style>
-  .login-box {
-    max-width: 420px;
-    padding: 50px 40px;
-    margin: 40px auto;
-    background-color: #fff;
-    border-radius: 5px;
-    background-clip: padding-box;
-    box-shadow: 0 2px 4px 0 rgba(10, 8, 8, .5);
-  }
+.login-box {
+  max-width: 436px;
+  padding: 30px 40px;
+  margin: 40px auto;
+  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 .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 {
+  font-size: 16px;
+  margin-bottom: 15px;
+  color: #999;
+  text-align: center;
+}
 
-  .login-box .tip-text a {
-    color: #00afff;
-  }
+.login-box .tip-text a {
+  color: #00afff;
+}
 
-  .login_row {
-    width: 100%;
-  }
+.login_row {
+  width: 100%;
+}
 
-  .form-group {
-    position: relative;
-    margin-bottom: 15px;
-  }
+.form-group {
+  position: relative;
+  margin-bottom: 15px;
+}
 
-  .login_labelName {
-    margin-bottom: 10px;
-    font-size: 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;
-  }
+.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">
-      <img :src="logo" class="tw_logo" />
-      <p class="tip-text">
+      <!-- <img :src="logo" class="tw_logo" /> -->
+      <!-- <p class="tip-text">
         還沒有帳號嗎？立即<a style="cursor:pointer;" @click="CommonJump('/register',{})">免費加入</a>
-      </p>
-      <div class="login_row">
-        <div class="form-group">
-          <div class="login_labelName">電子郵件</div>
-          <q-input outlined v-model="loginMsg.account" class="bg-grey-1" />
-        </div>
-        <div class="form-group">
-          <div class="login_labelName">密碼</div>
-          <q-input v-if="flag==1" outlined v-model="loginMsg.password" type="text" ref="pwd"
-            class="bg-grey-1 login_pwd" />
-          <q-input v-if="flag==2" outlined v-model="loginMsg.password" type="password" ref="pwd"
-            class="bg-grey-1 login_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>
+      </p> -->
+      <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">
+            {{ isLogin ? "註冊賬號" : "返回登錄" }}
+          </div>
         </div>
-        <div>
-          <q-btn color="primary" unelevated style="width:100%;height:50px;margin-top:20px;" filled :label="mylabel"
-            @click="login" />
+        <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>
+          </div>
+          <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>
+            </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 v-if="loginType === 'verify'">
+            <q-btn
+              v-if="!isSend"
+              color="primary"
+              unelevated
+              style="width: 100%; height: 50px; margin-top: 20px"
+              filled
+              label="发送验证码"
+              @click="sendVerify"
+            />
+            <div v-else>
+              <q-input outlined v-model="loginMsg.verify" type="text" />
+              <div>
+                {{ cutDown ? cutDown + "秒后可重新发送" : "重新發送驗證碼" }}
+              </div>
+            </div>
+          </div>
+          <div
+            class="text-right f16 text-grey-6 cursor-pointer"
+            v-if="isLogin"
+            @click="changeLoginType"
+          >
+            {{
+              loginType === "password" ? "使用郵箱驗證登陸" : "使用賬號密碼登陸"
+            }}
+          </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 class="flex flex-center">
+            <div
+              class="text-center text-grey-6 q-px-lg inline-block bg-white"
+              style="z-index: 1; margin: 0 auto"
+            >
+              更多登录方式
+            </div>
+          </div>
+          <q-separator style="margin-top: -10px" />
+          <div class="flex flex-center q-mt-lg q-mb-xl">
+            <div
+              @click="useWechatLogin"
+              class="type-item flex flex-center cursor-pointer"
+              v-for="item in typeList"
+              :key="item"
+            >
+              <img :src="require(`src/assets/img/${item}.png`)" />
+            </div>
+          </div>
+          <div class="flex items-start no-wrap">
+            <div><q-checkbox v-model="isAgree"></q-checkbox></div>
+            <span
+              >在使用印象的产品和服务前，我已阅读
+              理解并同意印象的<a>《隐私政策》</a>和<a>《使用条款》</a></span
+            >
+          </div>
         </div>
       </div>
+      <!-- 微信扫码页面 -->
+      <div v-else>
+        <div class="bold f34">微信登錄</div>
+        <!-- <qrcode-vue></qrcode-vue> -->
+        <div id="login_container"></div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
-  export default {
-    name: "Login",
-    components: {
-
+import QrcodeVue from "qrcode.vue";
+export default {
+  name: "Login",
+  components: {
+    QrcodeVue,
+  },
+  data() {
+    return {
+      isSend: false,
+      tips: false,
+      cutDown: 0,
+      loginType: "password", // password 邮箱密码，verify，邮箱验证码，wechat微信登录 微信登录没有绑定邮箱时跳转绑定邮箱业务逻辑
+      isAgree: false,
+      isLogin: true,
+      loginMsg: {
+        RB_Group_Id: 0,
+        account: "",
+        password: "",
+        verify: "",
+      },
+      // , 'google', 'facebook', 'apple'
+      typeList: ["wechat"],
+      logo: "",
+      flag: 2,
+      mylabel: "登入",
+    };
+  },
+  created() {},
+  mounted() {
+    var jObj = JSON.parse(localStorage.getItem("groupinfo"));
+    this.loginMsg.RB_Group_Id = jObj.GroupId;
+    //获取网站基础配置
+    if (localStorage.baseifo) {
+      var jObj = JSON.parse(window.localStorage.getItem("baseifo"));
+      this.logo = jObj.Config.Logo;
+    }
+  },
+  watch: {
+    loginType: function () {
+      this.resetInfo();
     },
-    data() {
-      return {
-        loginMsg: {
-          RB_Group_Id: 0,
-          account: "",
-          password: ""
+  },
+  methods: {
+    getOpenInfo() {
+      this.apipost(
+        "GetOpenInfo_post",
+        {},
+        (r) => {
+          this.openInfo = r.data;
+          this.setWechatCode()
         },
-        logo: '',
-        flag: 2,
-        mylabel:'登入'
-      };
+        null
+      );
     },
-    created() {
-
+    setWechatCode() {
+      const { AppID, State, OpenRedirectUri } = this.openInfo;
+      const obj = new WxLogin({
+        self_redirect: true,
+        id: "login_container",
+        appid: AppID,
+        scope: "snsapi_login",
+        redirect_uri: OpenRedirectUri, // 是	重定向地址，需要进行UrlEncode
+        state: State,
+        style: "",
+        href: "",
+      });
+    },
+    loginToRegister() {
+      this.isLogin = !this.isLogin;
     },
-    mounted() {
-      var jObj = JSON.parse(localStorage.getItem('groupinfo'));
-      this.loginMsg.RB_Group_Id = jObj.GroupId;
-      //获取网站基础配置
-      if (localStorage.baseifo) {
-        var jObj = JSON.parse(window.localStorage.getItem('baseifo'));
-        this.logo = jObj.Config.Logo;
+    sendVerify() {
+      if (this.verifyEmail()) {
+        this.isSend = true;
+        this.cutDown = 60;
+        this.startCutDown();
       }
     },
-    methods: {
-      login() {
-        if (this.loginMsg.account == '') {
-          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;
+    startCutDown() {
+      this.timer = setTimeout(() => {
+        this.cutDown--;
+        if (this.cutDown) {
+          this.startCutDown();
         }
-        this.mylabel='提交中...';
-        this.apipost(
-          "b2b_post_Login", this.loginMsg,
-          res => {
-            this.mylabel='登入';
-            if (res.data.resultCode == 1) {
-              var jsonData = JSON.stringify(res.data.data);
-              window.localStorage.setItem("b2bUser", jsonData);
-              this.CommonJump('/index', {})
-            } else {
-              this.$q.notify({
-                type: 'negative',
-                message: res.data.message,
-                position: 'top',
-                timeout: 2000, // 以毫秒为单位; 0意味着没有超时
-              })
-            }
-          },
-          err => {}
-        );
+      }, 1000);
+    },
+    resetInfo() {
+      this.isSend = false;
+      this.tips = false;
+      this.loginMsg = {
+        RB_Group_Id: 0,
+        account: "",
+        password: "",
+        verify: "",
+      };
+      if (this.timer) {
+        clearTimeout(this.timer);
       }
+      this.cutDown = 0;
     },
-  };
-
+    verifyEmail() {
+      if (/^[^@\s]+@[^@\s]+\.[^@\s]+$/.test(this.loginMsg.account)) {
+        this.tips = false;
+        return true;
+      } else {
+        // 提示用户邮箱格式有误
+        this.tips = true;
+        return false;
+      }
+    },
+    changeLoginType() {
+      if (this.loginType === "password") {
+        this.loginType = "verify";
+      } else {
+        this.loginType = "password";
+      }
+    },
+    useWechatLogin() {
+      this.loginType = "wechat";
+      this.setWechatCode()
+    },
+    login() {
+      if (this.loginMsg.account == "") {
+        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;
+      }
+      this.mylabel = "提交中...";
+      this.apipost(
+        "b2b_post_Login",
+        this.loginMsg,
+        (res) => {
+          this.mylabel = "登入";
+          if (res.data.resultCode == 1) {
+            var jsonData = JSON.stringify(res.data.data);
+            window.localStorage.setItem("b2bUser", jsonData);
+            this.CommonJump("/index", {});
+          } else {
+            this.$q.notify({
+              type: "negative",
+              message: res.data.message,
+              position: "top",
+              timeout: 2000, // 以毫秒为单位; 0意味着没有超时
+            });
+          }
+        },
+        (err) => {}
+      );
+    },
+  },
+};
 </script>