<template>
|
<div class="wrap">
|
<div class="choice">
|
<van-button
|
class="btnSize"
|
size="large"
|
type="primary"
|
@click="toPhoneLogin"
|
>手机号登录/注册</van-button
|
>
|
<van-button
|
class="btnSize"
|
size="large"
|
type="info"
|
@click="weChatLogin()"
|
>微信登录/注册</van-button
|
>
|
</div>
|
<div class="checkbox">
|
<van-checkbox v-model="checked" shape="square"
|
>我已阅读并同意
|
<span
|
style="color: #3586ff; z-index: 1"
|
@click.stop="dialogVisible = true"
|
>用户条款</span
|
>与<span
|
style="color: #3586ff; z-index: 1"
|
@click.stop="privacyDialogVisible = true"
|
>隐私协议</span
|
>
|
</van-checkbox>
|
</div>
|
<div class="tips">
|
<span class="reminder">温馨提示</span>
|
<div class="block"></div>
|
</div>
|
|
<div class="annotation">
|
<p>如果您已注册过旅游教育出版社PC端账户：</p>
|
<p>1. 请使用手机号登录，登录后将自动绑定当前微信。</p>
|
<p>2. 继续使用微信登录将创建独立微信账号。</p>
|
</div>
|
|
<van-dialog
|
v-model="dialogVisible"
|
title="《用户条款》"
|
width="90%"
|
confirmButtonColor="#3586ff"
|
messageAlign="left"
|
>
|
<div>
|
<div class="protocolBox" v-html="protocolTxt"></div>
|
</div>
|
</van-dialog>
|
|
<van-dialog
|
v-model="privacyDialogVisible"
|
title="《隐私协议》"
|
width="90%"
|
confirmButtonColor="#3586ff"
|
messageAlign="left"
|
>
|
<div>
|
<div class="protocolBox" v-html="privacyTxt"></div>
|
</div>
|
</van-dialog>
|
</div>
|
</template>
|
<script>
|
import Vue from "vue";
|
import { Toast } from "vant";
|
Vue.use(Toast);
|
export default {
|
/**
|
* .农大社移动端增加登录方式选择
|
* 增加手机号的登录，微信登录 移动端 登陆方式选择，
|
* 手机号登录 -> 获取微信code 静默绑定微信
|
* 微信登录 -> 让绑定手机号。
|
*/
|
data() {
|
return {
|
checked: false,
|
dialogVisible: false,
|
protocolTxt: "",
|
privacyTxt: "",
|
privacyDialogVisible: false
|
};
|
},
|
created() {
|
this.getProtocol();
|
},
|
methods: {
|
toPhoneLogin() {
|
if (!this.checked) {
|
Toast("请同意用户协议与隐私协议后再进行登录");
|
return false;
|
}
|
this.$router.push({
|
name: "login"
|
});
|
},
|
weChatLogin() {
|
if (!this.checked) {
|
Toast("请同意用户协议与隐私协议后再进行登录");
|
return false;
|
}
|
// 重新获取code，类型为微信登录
|
// 重新获取code，类型为微信登录
|
this.WeChat.getCode("weChatLogin");
|
},
|
getProtocol() {
|
var that = this;
|
that.MG.resource
|
.getItem({
|
path: "tourism_protocol",
|
fields: {
|
tourism_content: []
|
}
|
})
|
.then(res => {
|
try {
|
const data = res.datas.find(
|
e => e.refCode == "tourism_userRegistrationAgreement"
|
);
|
const privacyTxtData = res.datas.find(
|
e => e.refCode == "tourism_privacyPolicy"
|
);
|
this.protocolTxt = data ? data.tourism_content : "暂无协议";
|
this.privacyTxt = privacyTxtData
|
? privacyTxtData.tourism_content
|
: "暂无协议";
|
} catch (error) {
|
this.protocolTxt = "暂无协议";
|
this.privacyTxt = "暂无协议";
|
}
|
});
|
}
|
}
|
};
|
</script>
|
<style lang="less" scoped>
|
.wrap {
|
width: 100%;
|
height: 100vh;
|
overflow: auto;
|
box-sizing: border-box;
|
padding: 20px;
|
background-color: #fff;
|
font-size: 12px;
|
display: flex;
|
flex-direction: column;
|
align-self: center;
|
.backgroundImg {
|
margin-top: 50px;
|
margin-bottom: 30px;
|
font-size: 30px;
|
text-align: center;
|
}
|
.tips {
|
margin: 0 auto;
|
font-size: 14px;
|
color: #666;
|
position: relative;
|
margin-top: 50px;
|
.reminder {
|
color: #7e6ba2;
|
font-size: 18px;
|
text-align: center;
|
}
|
.block {
|
width: 130px;
|
height: 10px;
|
background-color: yellow;
|
position: absolute;
|
top: 22px;
|
left: 50%;
|
transform: translateX(-50%);
|
}
|
}
|
.annotation {
|
// width: 550px;
|
margin-top: 230px;
|
margin: 0 auto;
|
font-size: 16px;
|
color: #666;
|
margin-top: 20px;
|
text-align: left;
|
font-size: 14px;
|
}
|
.choice {
|
// width: 500px;
|
// margin: 0 auto;
|
margin-top: 300px;
|
.btnSize {
|
height: 50px;
|
border-radius: 10px;
|
margin-bottom: 20px;
|
}
|
}
|
.checkbox {
|
display: flex;
|
justify-content: center;
|
}
|
.protocolBox {
|
height: 60vh;
|
padding: 10px 20px;
|
box-sizing: border-box;
|
overflow: auto;
|
}
|
}
|
</style>
|
