Skip to content

M
million
Commit efe262dd authored by 沈良进's avatar 沈良进
Browse files
Options

登录注册功能开发

parent 0f75a373
Hide whitespace changes
Inline Side-by-side
Showing with 341 additions and 141 deletions
src/css/app.scss
View file @ efe262dd
...@@ -102,6 +102,9 @@ ...@@ -102,6 +102,9 @@
.f30 { .f30 {
font-size: 30px; font-size: 30px;
} }
.f34 {
font-size: 34px;
}
.f36 { .f36 {
font-size: 36px; font-size: 36px;
} }
......
src/index.template.html
View file @ efe262dd
...@@ -20,6 +20,7 @@ ...@@ -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 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 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="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> <script>
function countryCb(r) { function countryCb(r) {
if (!r) { if (!r) {
......
src/pages/detailsHotal.vue
View file @ efe262dd
...@@ -23,7 +23,7 @@ ...@@ -23,7 +23,7 @@
class="col product-price text-subtitle1 text-weight-bold f30" class="col product-price text-subtitle1 text-weight-bold f30"
style="text-align: left" 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 class="q-ml-sm f16 text-grey-7">起</span>
</span> </span>
<q-btn <q-btn
...@@ -156,9 +156,9 @@ ...@@ -156,9 +156,9 @@
$q.platform.is.mobile, $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：{{ dataList. }} -->
CNY：{{ moneyFormat(dataList.MinPrice, 0) }} CNY：{{ moneyFormat(MinPrice, 0) }}
<span class="f16 text-grey-6 normal">起</span> <span class="f16 text-grey-6 normal">起</span>
</div> </div>
<div v-else class="text-subtitle1 f30 bold text-grey-6">暫無報價</div> <div v-else class="text-subtitle1 f30 bold text-grey-6">暫無報價</div>
...@@ -309,7 +309,7 @@ ...@@ -309,7 +309,7 @@
</template> </template>
</div> --> </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 class="text-h6 q-pt-lg" v-if="$q.platform.is.mobile">
所選方案詳情 所選方案詳情
</div> </div>
...@@ -616,6 +616,7 @@ export default { ...@@ -616,6 +616,7 @@ export default {
}, },
data() { data() {
return { return {
MinPrice: 0,
selectedCar: "", selectedCar: "",
tab: "", tab: "",
searchDate: "", searchDate: "",
...@@ -816,8 +817,10 @@ export default { ...@@ -816,8 +817,10 @@ export default {
console.log("getData", r); console.log("getData", r);
this.dataList = r.data.data; this.dataList = r.data.data;
this.dataList.FacilityServices = JSON.parse(this.dataList.FacilityServices) 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.isShow = true;
this.isDirect = this.dataList.isDirect; this.isDirect = this.dataList.isDirect;
if (this.dataList.videoStr && this.dataList.videoStr != "") { if (this.dataList.videoStr && this.dataList.videoStr != "") {
......
src/pages/hotel/selectRoom.vue
View file @ efe262dd
...@@ -341,6 +341,7 @@ export default { ...@@ -341,6 +341,7 @@ export default {
if(!this.startDate && arr.length) { if(!this.startDate && arr.length) {
this.startDate = day.DateStr this.startDate = day.DateStr
this.minPrice = Math.min(...arr) this.minPrice = Math.min(...arr)
this.$emit('change', this.minPrice)
} }
return { return {
min: Math.min(...arr), min: Math.min(...arr),
......
src/pages/login.vue
View file @ efe262dd
<style> <style>
.login-box { .login-box {
max-width: 420px; max-width: 436px;
padding: 50px 40px; padding: 30px 40px;
margin: 40px auto; margin: 40px auto;
background-color: #fff; background-clip: padding-box;
border-radius: 5px; background: #ffffff;
background-clip: padding-box; border-radius: 18px;
box-shadow: 0 2px 4px 0 rgba(10, 8, 8, .5); }
}
.login-box .tw_logo { .login-box .tw_logo {
margin: 0 auto 20px; margin: 0 auto 20px;
display: block; display: block;
height: 45px; height: 45px;
width: auto; width: auto;
} }
.login-box .tip-text { .login-box .tip-text {
font-size: 16px; font-size: 16px;
margin-bottom: 15px; margin-bottom: 15px;
color: #999; color: #999;
text-align: center; text-align: center;
} }
.login-box .tip-text a { .login-box .tip-text a {
color: #00afff; color: #00afff;
} }
.login_row { .login_row {
width: 100%; width: 100%;
} }
.form-group { .form-group {
position: relative; position: relative;
margin-bottom: 15px; margin-bottom: 15px;
} }
.login_labelName { .login_labelName {
margin-bottom: 10px; margin-top: 34px;
font-size: 15px; font-size: 16px;
} margin-bottom: 16px;
}
.form-group i { .form-group i {
position: absolute; position: absolute;
right: 6px; right: 6px;
bottom: 0; bottom: 0;
z-index: 2; z-index: 2;
width: 46px; width: 46px;
height: 46px; height: 46px;
text-align: center; text-align: center;
line-height: 46px; line-height: 46px;
color: #999; color: #999;
font-size: 28px; font-size: 28px;
cursor: pointer; cursor: pointer;
} }
.login-box .q-field__control {
height: 46px;
}
.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> </style>
<template> <template>
<div class="login"> <div class="login">
<div class="login-box"> <div class="login-box">
<img :src="logo" class="tw_logo" /> <!-- <img :src="logo" class="tw_logo" /> -->
<p class="tip-text"> <!-- <p class="tip-text">
還沒有帳號嗎？立即<a style="cursor:pointer;" @click="CommonJump('/register',{})">免費加入</a> 還沒有帳號嗎？立即<a style="cursor:pointer;" @click="CommonJump('/register',{})">免費加入</a>
</p> </p> -->
<div class="login_row"> <div v-if="loginType !== 'wechat'">
<div class="form-group"> <div class="flex items-end justify-between">
<div class="login_labelName">電子郵件</div> <div class="f34 bold">{{ isLogin ? "登錄" : "註冊" }}</div>
<q-input outlined v-model="loginMsg.account" class="bg-grey-1" /> <div class="f16 bold cursor-pointer" @click="loginToRegister">
</div> {{ isLogin ? "註冊賬號" : "返回登錄" }}
<div class="form-group"> </div>
<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>
</div> </div>
<div> <div class="login_row">
<q-btn color="primary" unelevated style="width:100%;height:50px;margin-top:20px;" filled :label="mylabel" <div class="form-group">
@click="login" /> <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> </div>
<!-- 微信扫码页面 -->
<div v-else>
<div class="bold f34">微信登錄</div>
<!-- <qrcode-vue></qrcode-vue> -->
<div id="login_container"></div>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
export default { import QrcodeVue from "qrcode.vue";
name: "Login", export default {
components: { 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 { methods: {
loginMsg: { getOpenInfo() {
RB_Group_Id: 0, this.apipost(
account: "", "GetOpenInfo_post",
password: "" {},
(r) => {
this.openInfo = r.data;
this.setWechatCode()
}, },
logo: '', null
flag: 2, );
mylabel:'登入'
};
}, },
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() { sendVerify() {
var jObj = JSON.parse(localStorage.getItem('groupinfo')); if (this.verifyEmail()) {
this.loginMsg.RB_Group_Id = jObj.GroupId; this.isSend = true;
//获取网站基础配置 this.cutDown = 60;
if (localStorage.baseifo) { this.startCutDown();
var jObj = JSON.parse(window.localStorage.getItem('baseifo'));
this.logo = jObj.Config.Logo;
} }
}, },
methods: { startCutDown() {
login() { this.timer = setTimeout(() => {
if (this.loginMsg.account == '') { this.cutDown--;
this.$q.notify({ if (this.cutDown) {
type: 'negative', this.startCutDown();
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='提交中...'; }, 1000);
this.apipost( },
"b2b_post_Login", this.loginMsg, resetInfo() {
res => { this.isSend = false;
this.mylabel='登入'; this.tips = false;
if (res.data.resultCode == 1) { this.loginMsg = {
var jsonData = JSON.stringify(res.data.data); RB_Group_Id: 0,
window.localStorage.setItem("b2bUser", jsonData); account: "",
this.CommonJump('/index', {}) password: "",
} else { verify: "",
this.$q.notify({ };
type: 'negative', if (this.timer) {
message: res.data.message, clearTimeout(this.timer);
position: 'top',
timeout: 2000, // 以毫秒为单位; 0意味着没有超时
})
}
},
err => {}
);
} }
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> </script>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment