399 lines
9.6 KiB
Vue
399 lines
9.6 KiB
Vue
<template>
|
||
<view class="container safe-area-inset-bottom">
|
||
<view class="none">
|
||
<!-- 授权登录 -->
|
||
<view class="conter">
|
||
<view class="title">
|
||
欢迎登录
|
||
</view>
|
||
<image src="@/static/empty/login.png" mode="aspectFit"></image>
|
||
|
||
<!-- 修改点1：移除 disabled 属性和 bg 样式判断，使其始终可点击且显示激活颜色 -->
|
||
<button class="btn" @click="handleLoginClick">一键登录</button>
|
||
|
||
<view class="word">
|
||
<u-icon size="35" :color="form['check']?'#2979FF':'#E5E5E5'" name="checkmark-circle-fill"
|
||
@click="form['check']=!form['check']"></u-icon>
|
||
<view class="agreement">
|
||
我已阅读并同意
|
||
<text @click="getInfo(1)">《用户服务协议》</text>
|
||
和
|
||
<text @click="getInfo(2)">《隐私政策》</text>
|
||
</view>
|
||
</view>
|
||
<view class="text" @click="back">取消登录</view>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 原有的协议内容展示弹窗 -->
|
||
<!-- 修复：添加 z-index 属性，确保协议详情弹窗层级高于确认弹窗(确认弹窗默认z-index较低) -->
|
||
<u-popup v-model="show" :safe-area-inset-bottom="true" mode="bottom" height="88%" border-radius="20"
|
||
:closeable="true" z-index="20000">
|
||
<view class="agreen">
|
||
<u-parse :html="content"></u-parse>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<!-- 修改点2：新增未勾选协议时的确认模态框 -->
|
||
<!-- 确认弹窗 z-index 保持默认或稍低，确保详情弹窗能覆盖它 -->
|
||
<u-popup v-model="showConfirm" mode="center" border-radius="24" width="600" z-index="10075">
|
||
<view class="confirm-modal">
|
||
<view class="confirm-title">服务协议和隐私政策</view>
|
||
<view class="confirm-desc">
|
||
请您在使用前仔细阅读并同意
|
||
<text class="link" @click="getInfo(1)">《用户服务协议》</text>
|
||
和
|
||
<text class="link" @click="getInfo(2)">《隐私政策》</text>
|
||
。
|
||
</view>
|
||
<view class="confirm-footer">
|
||
<button class="cancel-btn" @click="showConfirm = false">不同意</button>
|
||
<button class="agree-btn" @click="agreeAndLogin">同意并登录</button>
|
||
</view>
|
||
</view>
|
||
</u-popup>
|
||
|
||
<u-toast ref="uToast" />
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
import {
|
||
getAgreem,
|
||
getLogin,
|
||
getsLogin, storeChange
|
||
} from '../../request/api/api.js'
|
||
import {bindUserApi} from "@/request/api/salesperson";
|
||
|
||
export default {
|
||
data() {
|
||
return {
|
||
code: "",
|
||
form: {
|
||
check: false
|
||
},
|
||
encryptedData: "",
|
||
iv: "",
|
||
session_key: "",
|
||
show: false,
|
||
showConfirm: false, // 控制确认弹窗显示
|
||
content: ``,
|
||
type: 1,
|
||
id: 1,
|
||
isShow_envVersion: uni.getStorageSync('isShow_envVersion')
|
||
}
|
||
},
|
||
onLoad(e) {
|
||
this.type = e.type
|
||
this.id = e.id
|
||
uni.removeStorageSync('token')
|
||
uni.removeStorageSync('userinfo')
|
||
},
|
||
created() {
|
||
|
||
},
|
||
methods: {
|
||
back() {
|
||
uni.navigateTo({
|
||
url: "/pages/home/index",
|
||
fail: (e) => {
|
||
// console.log(e);
|
||
},
|
||
success() {
|
||
}
|
||
})
|
||
},
|
||
|
||
// 修改点3：处理登录点击逻辑
|
||
handleLoginClick() {
|
||
if (!this.form.check) {
|
||
// 如果未勾选，显示确认弹窗
|
||
this.showConfirm = true;
|
||
} else {
|
||
// 如果已勾选，直接登录
|
||
this.getToLogin();
|
||
}
|
||
},
|
||
|
||
// 修改点4：同意协议并登录
|
||
agreeAndLogin() {
|
||
this.form.check = true; // 勾选协议
|
||
this.showConfirm = false; // 关闭弹窗
|
||
this.getToLogin(); // 执行登录
|
||
},
|
||
|
||
getPhoneNumber(e) {
|
||
uni.loading({
|
||
title: "加载中"
|
||
});
|
||
|
||
setTimeout(function () {
|
||
uni.hideLoading();
|
||
}, 800)
|
||
return;
|
||
},
|
||
|
||
toLogon() {
|
||
uni.navigateTo({
|
||
url: '/pages/login/logon',
|
||
fail: function(res) {
|
||
// console.log(res);
|
||
}
|
||
})
|
||
},
|
||
|
||
// 协议
|
||
getInfo(e) {
|
||
this.show = true
|
||
|
||
getAgreem({
|
||
method: "post",
|
||
data: {
|
||
end: 1,
|
||
store_id: uni.getStorageSync('store_id') || '11001',
|
||
}
|
||
}).then((res) => {
|
||
if (e == 1) {
|
||
this.content = res.data.data[0].content
|
||
} else {
|
||
this.content = res.data.data[1].content
|
||
}
|
||
})
|
||
},
|
||
|
||
getToLogin(e) {
|
||
uni.showLoading({
|
||
title: "登录中"
|
||
});
|
||
|
||
uni.login({
|
||
provider: 'weixin',
|
||
success: (loginRes) => {
|
||
this.code = loginRes.code
|
||
getsLogin({
|
||
method: "post",
|
||
data: {
|
||
code: this.code,
|
||
status: 1
|
||
}
|
||
}).then((res) => {
|
||
|
||
uni.hideLoading();
|
||
if (res.data.errcode == 0) {
|
||
uni.setStorageSync('token', res.data.data.token) //存储token
|
||
uni.setStorageSync('user_id', res.data.data.data.user.id)
|
||
uni.setStorageSync('userinfo', res.data.data.data['user'])
|
||
|
||
|
||
if (uni.getStorageSync('salesperson_id')) {
|
||
bindUserApi({
|
||
user_id: res.data.data.data.user.id,
|
||
salesperson_id: uni.getStorageSync('salesperson_id'),
|
||
}).then((res) => {
|
||
console.log(res, 'bindUserApi', res);
|
||
})
|
||
}
|
||
if (uni.getStorageSync('store_id')) {
|
||
|
||
storeChange({
|
||
method: "post",
|
||
data: {
|
||
store_id: uni.getStorageSync('store_id')
|
||
}
|
||
})
|
||
} else {
|
||
uni.setStorageSync('store_id', res.data.data.data.store_id)
|
||
}
|
||
if (res.data.data.data.user.mobile != '') {
|
||
setTimeout(function () {
|
||
uni.reLaunch({
|
||
url: '/pages/home/home'
|
||
})
|
||
}, 500)
|
||
} else {
|
||
// this.getPhoneNumber(e);
|
||
}
|
||
|
||
} else if (res.data.errcode != 0) {
|
||
this.$refs.uToast.show({
|
||
title: res.data.msg,
|
||
type: 'default',
|
||
icon: false
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
},
|
||
mounted() {
|
||
const token = uni.getStorageSync('token')
|
||
const user_id = uni.getStorageSync('user_id')
|
||
const userInfo = uni.getStorageSync('userinfo')
|
||
const token_h5 = uni.getStorageSync('token_h5')
|
||
if (token && user_id && userInfo && token_h5) {
|
||
uni.reLaunch({
|
||
url: "/pages/home/home",
|
||
})
|
||
} else {
|
||
uni.removeStorageSync('token')
|
||
uni.removeStorageSync('user_id')
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.text {
|
||
margin-top: 20rpx;
|
||
color: #666;
|
||
}
|
||
.container {
|
||
width: 100vw;
|
||
height: 100vh;
|
||
padding-bottom: env(safe-area-inset-bottom);
|
||
|
||
.none {
|
||
width: 750rpx;
|
||
padding-top: 100rpx;
|
||
background: linear-gradient(180deg, #EAF2FF 0%, #FFFFFF 100%);
|
||
|
||
.conter {
|
||
display: flex;
|
||
flex-direction: column;
|
||
justify-content: center;
|
||
align-items: center;
|
||
margin: 0rpx auto 380rpx;
|
||
|
||
image {
|
||
width: 431rpx;
|
||
height: 339rpx;
|
||
vertical-align: middle;
|
||
margin-bottom: 110rpx;
|
||
}
|
||
|
||
.title {
|
||
font-size: 48rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #232323;
|
||
margin-bottom: 114rpx;
|
||
}
|
||
|
||
.word {
|
||
display: flex;
|
||
flex-direction: row;
|
||
color: #475569;
|
||
font-size: 28rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
margin-top: 34rpx;
|
||
|
||
.agreement {
|
||
font-size: 24rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #6C7380;
|
||
margin-left: 16rpx;
|
||
|
||
text {
|
||
color: #2979FF;
|
||
size: 24rpx;
|
||
}
|
||
}
|
||
}
|
||
|
||
.footer {
|
||
width: 710rpx;
|
||
height: 90rpx;
|
||
line-height: 90rpx;
|
||
position: fixed;
|
||
bottom: 60rpx;
|
||
left: 0;
|
||
text-align: center;
|
||
font-size: 26rpx;
|
||
font-family: PingFang SC-Regular, PingFang SC;
|
||
font-weight: 400;
|
||
color: #232323;
|
||
margin: 0 auto;
|
||
}
|
||
|
||
.btn {
|
||
width: 648rpx;
|
||
height: 88rpx;
|
||
background: #4175EE;
|
||
line-height: 88rpx;
|
||
font-size: 32rpx;
|
||
text-align: center;
|
||
font-family: PingFang SC-Medium, PingFang SC;
|
||
font-weight: 400;
|
||
color: #FFFFFF;
|
||
border-radius: 64rpx;
|
||
}
|
||
|
||
// 移除了 .bg 样式，因为现在按钮始终是激活颜色
|
||
}
|
||
|
||
}
|
||
|
||
.agreen {
|
||
padding: 60rpx 50rpx 20rpx;
|
||
}
|
||
|
||
// 确认弹窗样式
|
||
.confirm-modal {
|
||
padding: 40rpx 30rpx;
|
||
background: #fff;
|
||
|
||
.confirm-title {
|
||
font-size: 34rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
text-align: center;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
|
||
.confirm-desc {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
line-height: 1.6;
|
||
margin-bottom: 40rpx;
|
||
text-align: center;
|
||
|
||
.link {
|
||
color: #2979FF;
|
||
}
|
||
}
|
||
|
||
.confirm-footer {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
gap: 20rpx;
|
||
|
||
button {
|
||
flex: 1;
|
||
height: 80rpx;
|
||
line-height: 80rpx;
|
||
border-radius: 40rpx;
|
||
font-size: 30rpx;
|
||
border: none;
|
||
|
||
&::after {
|
||
border: none;
|
||
}
|
||
}
|
||
|
||
.cancel-btn {
|
||
background: #F5F7FA;
|
||
color: #909399;
|
||
}
|
||
|
||
.agree-btn {
|
||
background: #4175EE;
|
||
color: #FFFFFF;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
</style>
|