Skip to content

M
mayi-mp-shop
Commit 0e1c6e36 by hxx
Options

协议优化

parent 8b64eaaa
Showing with 317 additions and 36 deletions
src/components/login/loginUserAgreement.vue
......@@ -6,7 +6,19 @@
<van-checkbox :value="checked" @click="conF1"
>{{text1}}</van-checkbox
>
<template v-if="userAgreement || privacyPolicy">
<div class="link" @click="handleDetail(0)">
<span @click.stop="handleDetail(0)" v-if="userAgreement">
《{{ userAgreement.agreementName }}》
</span>
<span @click.stop="handleDetail(userAgreement ? 1 : 0)" v-if="privacyPolicy">
《{{ privacyPolicy.agreementName }}》
</span>
</div>
</template>
<template v-else>
<p class="link" @click="contentShow = true">{{text2}}</p>
</template>
</div>
<van-popup
:show="contentShow"
......@@ -44,6 +56,14 @@ export default {
type: String,
default: "用户隐私协议",
},
userAgreement: {
type: Object,
default: () => {}
},
privacyPolicy: {
type: Object,
default: () => {}
}
},
data() {
return {
......@@ -89,6 +109,9 @@ export default {
if (!this.render) return;
this.contentShow = false;
},
handleDetail(index) {
this.$emit("onDetail", index);
},
},
};
</script>
......@@ -101,6 +124,7 @@ export default {
width: 100%;
font-size: 12px;
display: flex;
flex-wrap: wrap;
justify-content: center;
color: #1989fa;
align-items: center;
......
src/components/login/protocolDialog.vue 0 → 100644
<template>
<van-popup
:show="isShow"
position="bottom"
:close-on-click-overlay="closeOnClickOverlay"
>
<div class="protocol-container" :style="{ height }" v-if="reRerender">
<div class="protocol-header van-hairline--bottom">
<div class="protocol-header__title">{{ currentProtocol.agreementName }}</div>
<div class="protocol-header__icon" @click="handleClose">
<van-icon name="close" />
</div>
</div>
<div ref="content" class="protocol-content">
<div v-html="currentProtocol.agreementContent"></div>
</div>
<div class="protocol-footer" :style="{ background: themeColor['--main-color'],opacity: btnDisabled ? .5 : 1 }" v-if="isShowReadTime">
<div class="protocol-footer__btn" @click="handleNext">
<template v-if="currentIndex === (len - 1)">
{{ len === 1 ? '同意协议' : '同意全部协议' }}
</template>
<template v-else>
下一篇：{{ protocolList[currentIndex + 1].agreementName }}
</template>
<div v-if="btnDisabled">({{ restTime }}s)</div>
</div>
</div>
</div>
</van-popup>
</template>
<script>
import { themeColor } from "../../utils/mayi"
export default {
name: "protocol-dialog",
props: {
value: {
type: Boolean,
default: false,
},
height: {
type: String,
default: '80vh'
},
protocolList: {
type: Array,
default: () => []
},
index: {
type: Number,
default: 0
},
closeOnClickOverlay: {
type: Boolean,
default: false
},
isShowReadTime: {
type: Boolean,
default: true
}
},
data() {
return {
isShow: false,
reRerender: false,
currentProtocol: {},
currentIndex: 0,
bgcHeight: 0,
btnDisabled: false,
restTime: 0,
len: 0,
interval: null,
themeColor
}
},
watch: {
value(val) {
this.isShow = val;
if (val) {
this.reRerender = true;
this.len = 0;
this.initData();
}
},
isShow(val) {
this.$emit("input", val);
},
index(val) {
this.currentIndex = val;
},
protocolList(val) {
this.currentProtocol = val[this.index];
this.initData();
}
},
methods: {
initData() {
if (this.len !== 0 || !this.isShow) return;
this.len = this.protocolList.length;
this.changeData();
},
changeData() {
this.restTime = this.currentProtocol.readingTime;
if (this.restTime > 0) {
this.btnDisabled = true;
this.startCountDown();
}
this.$forceUpdate();
},
startCountDown() {
if (this.interval) clearInterval(this.interval);
this.interval = setInterval(() => {
this.restTime --;
if (this.restTime < 0) {
this.btnDisabled = false;
clearInterval(this.interval);
}
}, 1000)
},
handleClose() {
this.isShow = false;
setTimeout(() => {
this.reRerender = false;
if (this.interval) clearInterval(this.interval);
}, 300)
},
handleNext() {
if (this.btnDisabled) return;
if ((this.len - 1) === this.currentIndex) {
this.$emit('onAgree');
this.handleClose();
} else {
this.currentIndex += 1;
this.currentProtocol = this.protocolList[this.currentIndex];
this.changeData();
}
}
}
}
</script>
<style lang="scss" scoped>
.protocol-container {
display: flex;
flex-direction: column;
justify-content: space-between;
.protocol-header {
display: flex;
align-items: center;
justify-content: center;
padding: 15px 0;
background: #fff;
z-index: 1;
.protocol-header__title {
font-size: 17px;
font-weight: 600;
}
.protocol-header__icon {
position: absolute;
right: 0;
font-size: 17px;
border: 10px solid transparent;
}
}
.protocol-content {
padding: 0 15px 80px;
overflow: auto;
}
.protocol-footer {
padding: 15px;
color: #fff;
.protocol-footer__btn {
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
}
}
</style>
src/pages/login/index.vue
......@@ -50,11 +50,15 @@
></loginBox>
<!-- 用户协议模块 -->
<loginUserAgreement
ref="agreement"
v-if="item.componentCode=='login-userAgreement' && item.componentInfo.visible == 1"
:datas="item"
:render="true"
:content="content"
:userAgreement="userAgreement"
:privacyPolicy="privacyPolicy"
@conF="conF"
@onDetail="handleDetail"
></loginUserAgreement>
</div>
<div class="toCLogin1" v-if="isShowPhone">
......@@ -75,6 +79,7 @@
</div>
<!-- 选择企业 -->
<SelectEnterpriseAccount ref="SelectEnterpriseAccount" @confirm="getEnterpriseAccount"></SelectEnterpriseAccount>
<ProtocolDialog v-model="isShowProtocol" :index="currentIndex" :isShowReadTime="isShowReadTime" :protocolList="[userAgreement, privacyPolicy].filter(Boolean)" @onAgree="handleAgree" />
</div>
</template>
......@@ -89,6 +94,7 @@ import { createdUserJWTApi } from "@/api/daoke";
import loginLogo from '../../components/login/loginLogo.vue';
import loginBox from '../../components/login/loginBox.vue';
import loginUserAgreement from '../../components/login/loginUserAgreement.vue';
import ProtocolDialog from '../../components/login/protocolDialog.vue';
import ThemeDataPlant from "../../components/ThemeDataPlant"
import text from '@/components/content/text'
import richText from "../../components/basicTool/rich-text";
......@@ -107,7 +113,8 @@ export default {
loginLogo,
loginBox,
loginUserAgreement,
SelectEnterpriseAccount
SelectEnterpriseAccount,
ProtocolDialog
},
data() {
return {
......@@ -117,7 +124,6 @@ export default {
session_key: "",
shopName: "",
logoUrl: "",
isShow: false,
isShowPhone: false,
getPhone: false,
openid: "",
......@@ -151,6 +157,13 @@ export default {
hideBack: 0, //0显示返回按钮 1隐藏
selectEnterpriseAccountOpenType: 0, //0输入手机号登录 1微信一键登录 2一键登录后绑定手机号登录
sessionId: "",
isShowProtocol: false,
currentIndex: 0,
isShowReadTime: false,
userAgreement: {},
privacyPolicy: {},
tempData: null,
};
},
computed: {
......@@ -400,6 +413,15 @@ export default {
nickname: _this.userInfo.nickName,
headImgUrl: _this.userInfo.avatarUrl
};
if (this.checked) {
query.agreementIds = [];
if (this.userAgreement) {
query.agreementIds.push(this.userAgreement.id);
}
if (this.privacyPolicy) {
query.agreementIds.push(this.privacyPolicy.id);
}
}
login
.miniLogin(query)
.then(res => {
......@@ -439,18 +461,21 @@ export default {
},
getUserProfile() {
log.info('点击了微信一键登录');
let _this = this;
wx.showLoading({
title: '登录中...',
mask: true
})
if (this.tempData) {
if(this.content&&!this.checked) {
wx.showToast({
title: '您还未同意协议',
icon: "none"
});
return;
}
this.handleSuccess();
return
}
wx.showLoading({
title: '登录中...',
mask: true
})
// 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认
// 开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
wx.getUserProfile({
......@@ -459,8 +484,16 @@ export default {
this.userInfo = e.userInfo;
log.info('获取wx.getUserProfile用户信息',this.userInfo);
console.log(this.userInfo,'--this.userInfo')
this.initUser()
.then(res => {
this.initUserInfo();
},
fail: (e) => {
log.info('wx.getUserProfile-fail',e)
wx.hideLoading()
}
})
},
async initUserInfo() {
this.initUser().then(res => {
wx.hideLoading();
//存入openid
try {
......@@ -468,55 +501,70 @@ export default {
} catch (e) {
log.info('存入openid失败',e)
}
log.info(this.$store.state.mixid,'mixid------230')
// haveBindUserPhone
// 是否必须绑定手机号（0必须绑定,1不需要绑定
//有账号或不需要绑定手机号
// 有账号或不需要绑定手机号
this.appid = res.data.data.appid;
this.session_key = res.data.data.session_key;
this.openid = res.data.data.openid;
this.unionId = res.data.data.unionId || '';
this.sessionId = res.data.data.sessionId || '';
this.isShow = true;
if (res.data.data.isHaveUnion == "true" || this.mpApp.globalData.shopInfo.haveBindUserPhone == '1') {
this.tempData = res.data.data;
if(this.content&&!this.checked&&!res.data.isHaveUnion) {
let text = '';
if (this.userAgreement && this.privacyPolicy) {
text = `《${this.userAgreement.agreementName}》和《${this.privacyPolicy.agreementName}》`;
} else if (this.userAgreement) {
text = `《${this.userAgreement.agreementName}》`;
} else if (this.privacyPolicy) {
text = `《${this.privacyPolicy.agreementName}》`;
}
wx.showModal({
title: "协议阅读提示",
content: `为了更好地保护你的个人信息安全，请你仔细阅读并理解我们最新更新的${text}。若你点击同意，即表示你已阅读并同意上述条款，我们将严格按照${text}的各项条款使用和保护你的个人信息。`,
showCancel: true,
cancelText: "再想想",
confirmText: "查看协议",
success: (res) => {
if (res.confirm) {
this.handleDetail(0);
}
}
})
return;
}
}).catch(err => {
wx.hideLoading();
log.info("err", err);
wx.showToast({
title: err,
icon: "none"
});
});
},
handleSuccess() {
if (this.tempData.isHaveUnion == "true" || this.mpApp.globalData.shopInfo.haveBindUserPhone == '1') {
this.backParams += `&sessionid=${
res.data.data.sessionId
}&needCertified=${res.data.data.NEED_CERTIFIED}`;
this.NEED_CERTIFIED = res.data.data.NEED_CERTIFIED;
this.tempData.sessionId
}&needCertified=${this.tempData.NEED_CERTIFIED}`;
this.NEED_CERTIFIED = this.tempData.NEED_CERTIFIED;
this.isHaveUnion = true;
console.log(this.whetherOpenEnterprisesWantGoods == 1, res.data.data.masterAccount,'-----------------------------482')
if(this.whetherOpenEnterprisesWantGoods == 1 && res.data.data.masterAccount && res.data.data.masterAccount.length>0){
if(this.whetherOpenEnterprisesWantGoods == 1 && this.tempData.masterAccount && this.tempData.masterAccount.length>0){
this.selectEnterpriseAccountOpenType = 1;
this.$refs.SelectEnterpriseAccount.open(res.data.data.masterAccount);
this.$refs.SelectEnterpriseAccount.open(this.tempData.masterAccount);
} else {
wx.setStorage({
key: "sessionid",
data: res.data.data.sessionId
data: this.tempData.sessionId
});
this.checkLogin();
}
} else {
//需要绑定
this.isHaveUnion = false;
//checkLogind
this.checkLogin();
}
})
.catch(err => {
log.info("err", err);
wx.showToast({
title: err,
icon: "none"
});
wx.hideLoading();
});
},
fail: (e) => {
log.info('wx.getUserProfile-fail',e)
wx.hideLoading()
}
})
},
checkLogin() {
this.$store.commit('setUserInfo',this.userInfo)
......@@ -693,6 +741,15 @@ export default {
customerSourceType: wx.getStorageSync(this.$store.state.mixid+"articleId")?8:'',
customerSourceId: wx.getStorageSync(this.$store.state.mixid+"articleId") || ''
};
if (this.checked) {
query.agreementIds = [];
if (this.userAgreement) {
query.agreementIds.push(this.userAgreement.id);
}
if (this.privacyPolicy) {
query.agreementIds.push(this.privacyPolicy.id);
}
}
log.info(query,'bindUser-query-491')
log.info(this.$store.state.spokesmanGroupId,'bindUser-spokesmanGroupId')
log.info(this.$store.state.spokesmanRelId,'bindUser-spokesmanRelId')
......@@ -872,6 +929,8 @@ export default {
log.info('获取用户协议',res)
if(res.data.code == '200') {
this.content = res.data.data;
this.userAgreement = res.data.data.find(item => item.agreementType == 0);
this.privacyPolicy = res.data.data.find(item => item.agreementType == 1);
}
});
},
......@@ -890,6 +949,15 @@ export default {
this.checkLogin();
}
},
handleDetail(index) {
this.currentIndex = index;
this.isShowReadTime = !this.checked;
this.isShowProtocol = true;
},
handleAgree() {
this.checked = true;
this.$refs.agreement[0].checked = true;
}
}
};
</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