WindowBird/buddhism
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

登录界面的修正

Browse Source
This commit is contained in:
minimaxagent1 2025-08-04 15:16:25 +08:00
parent cc9768acc4
commit 9c189af1bd
1 changed files with 418 additions and 377 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

795
pages/login/login.vue
View File

@ -1,57 +1,59 @@
<template> <template>
<view class="page"> <view class="page">
<u-navbar :is-back="false" :title="titleTxt" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='36' > <u-navbar :is-back="false" :title="titleTxt" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' height='36' >
</u-navbar>
<view class="imgbox">
<image src="https://api.ccttiot.com/smartmeter/img/static/uGPwljIaEppyKAT1iQaW" mode=""></image>
</view>
<button class="button" :disabled="!hasAgreed" :class="{ 'button-disabled': !hasAgreed }" @click="getPhoneNumber" >
授权登录
</button>
<view class="tip">
<view class="checkbox-container" @click="toggleAgreement">
<view class="checkbox" :class="{ 'checked': hasAgreed }">
<text v-if="hasAgreed" class="checkmark">✓</text>
</view>
</view>
<text>我已同意并阅读</text>
<text class="link-text" @click="showServiceTerms">《服务条款》</text>
<text class="link-text" @click="showPrivacyPolicy">《法律条款及隐私政策》</text>
</view>
<!-- 服务条款弹窗 --> </u-navbar>
<u-popup v-model="showServiceTermsPopup" mode="center" width="600rpx" height="800rpx" border-radius="20rpx"> <view class="imgbox">
<view class="popup-content"> <image src="https://api.ccttiot.com/smartmeter/img/static/uGPwljIaEppyKAT1iQaW" mode=""></image>
<view class="popup-header"> </view>
<text class="popup-title">服务条款</text> <button class="button" @click="getPhoneNumber">
<text class="popup-close" @click="closeServiceTermsPopup">×</text> 授权登录
</view> </button>
<scroll-view class="popup-body" scroll-y> <view class="tip">
<rich-text :nodes="serviceTermsContent"></rich-text> <view class="checkbox-container" @click="toggleAgreement">
</scroll-view> <view class="checkbox" :class="{ 'checked': hasAgreed }">
<view class="popup-footer"> <text v-if="hasAgreed" class="checkmark">✓</text>
<button class="popup-btn" @click="agreeServiceTerms">同意</button> </view>
</view> </view>
</view> <text>我已同意并阅读</text>
</u-popup> <text class="link-text" @click="showServiceTerms">《服务条款》</text>
<text class="link-text" @click="showPrivacyPolicy">《法律条款及隐私政策》</text>
</view>
<!-- 隐私政策弹窗 --> <!-- 服务条款弹窗 -->
<u-popup v-model="showPrivacyPolicyPopup" mode="center" width="600rpx" height="800rpx" border-radius="20rpx"> <u-popup v-model="showServiceTermsPopup" mode="center" width="600rpx" height="800rpx" border-radius="20rpx">
<view class="popup-content"> <view class="popup-content">
<view class="popup-header"> <view class="popup-header">
<text class="popup-title">法律条款及隐私政策</text> <text class="popup-title">服务条款</text>
<text class="popup-close" @click="closePrivacyPolicyPopup">×</text> <text class="popup-close" @click="closeServiceTermsPopup">×</text>
</view> </view>
<scroll-view class="popup-body" scroll-y> <scroll-view class="popup-body" scroll-y>
<rich-text :nodes="privacyPolicyContent"></rich-text> <rich-text :nodes="serviceTermsContent"></rich-text>
</scroll-view> </scroll-view>
<view class="popup-footer"> <view class="popup-footer">
<button class="popup-btn" @click="agreePrivacyPolicy">同意</button> <text class="popup-tip">请仔细阅读服务条款，阅读完毕后点击同意</text>
</view> <button class="popup-btn" @click="agreeServiceTerms">同意</button>
</view> </view>
</u-popup> </view>
</view> </u-popup>
<!-- 隐私政策弹窗 -->
<u-popup v-model="showPrivacyPolicyPopup" mode="center" width="600rpx" height="800rpx" border-radius="20rpx">
<view class="popup-content">
<view class="popup-header">
<text class="popup-title">法律条款及隐私政策</text>
<text class="popup-close" @click="closePrivacyPolicyPopup">×</text>
</view>
<scroll-view class="popup-body" scroll-y>
<rich-text :nodes="privacyPolicyContent"></rich-text>
</scroll-view>
<view class="popup-footer">
<text class="popup-tip">请仔细阅读隐私政策，阅读完毕后点击同意</text>
<button class="popup-btn" @click="agreePrivacyPolicy">同意</button>
</view>
</view>
</u-popup>
</view>
</template> </template>
<script> <script>
@ -60,350 +62,389 @@ import { wxLogin } from "@/api/auth/auth.js";
import { forceHideLoading, AutoLoadingManager } from "@/utils/request.js"; import { forceHideLoading, AutoLoadingManager } from "@/utils/request.js";
import { getServiceTerms, getPrivacyPolicy } from "@/api/article/article.js"; import { getServiceTerms, getPrivacyPolicy } from "@/api/article/article.js";
export default { export default {
data() { data() {
return { return {
bgc: { bgc: {
backgroundColor: "#fff", backgroundColor: "#fff",
}, },
titleTxt:"登录", titleTxt:"登录",
chooseType:true, chooseType:true,
usertype:'', usertype:'',
login:false, login:false,
hasAgreed: false, // 是否同意条款 hasAgreed: false, // 是否同意条款
hasReadServiceTerms: false, // 是否已读服务条款 hasReadServiceTerms: false, // 是否已读服务条款
hasReadPrivacyPolicy: false, // 是否已读隐私政策 hasReadPrivacyPolicy: false, // 是否已读隐私政策
showServiceTermsPopup: false, // 服务条款弹窗 showServiceTermsPopup: false, // 服务条款弹窗
showPrivacyPolicyPopup: false, // 隐私政策弹窗 showPrivacyPolicyPopup: false, // 隐私政策弹窗
serviceTermsContent: '', // 服务条款内容 serviceTermsContent: '', // 服务条款内容
privacyPolicyContent: '', // 隐私政策内容 privacyPolicyContent: '', // 隐私政策内容
} }
}, },
onLoad() { onLoad() {
// 初始化页面loading管理器 // 初始化页面loading管理器
this.pageLoading = new AutoLoadingManager() this.pageLoading = new AutoLoadingManager()
}, },
onUnload() { onUnload() {
// 页面卸载时清除loading // 页面卸载时清除loading
forceHideLoading(); forceHideLoading();
if (this.pageLoading) { if (this.pageLoading) {
this.pageLoading.destroy() this.pageLoading.destroy()
} }
}, },
methods: { methods: {
userType(num){ userType(num){
this.chooseType=false this.chooseType=false
this.login=true this.login=true
if(num===1){ if(num===1){
this.usertype='01' this.usertype='01'
}else{ }else{
this.usertype='00' this.usertype='00'
} }
}, },
// 切换同意状态 // 切换同意状态
toggleAgreement() { toggleAgreement() {
if (this.hasReadServiceTerms && this.hasReadPrivacyPolicy) { if (this.hasReadServiceTerms && this.hasReadPrivacyPolicy) {
this.hasAgreed = !this.hasAgreed; this.hasAgreed = !this.hasAgreed;
} else { } else {
uni.showToast({ uni.showToast({
title: '请先阅读服务条款和隐私政策', title: '请先阅读服务条款和隐私政策',
icon: 'none' icon: 'none'
}); });
} }
}, },
// 显示服务条款 // 显示服务条款
async showServiceTerms() { async showServiceTerms() {
try { try {
const res = await getServiceTerms(); const res = await getServiceTerms();
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
this.serviceTermsContent = res.data.content || '暂无服务条款内容'; this.serviceTermsContent = res.data.content || '暂无服务条款内容';
this.showServiceTermsPopup = true; this.showServiceTermsPopup = true;
} else { } else {
uni.showToast({ uni.showToast({
title: '获取服务条款失败', title: '获取服务条款失败',
icon: 'none' icon: 'none'
}); });
} }
} catch (error) { } catch (error) {
console.error('获取服务条款失败:', error); console.error('获取服务条款失败:', error);
uni.showToast({ uni.showToast({
title: '获取服务条款失败', title: '获取服务条款失败',
icon: 'none' icon: 'none'
}); });
} }
}, },
// 显示隐私政策 // 显示隐私政策
async showPrivacyPolicy() { async showPrivacyPolicy() {
try { try {
const res = await getPrivacyPolicy(); const res = await getPrivacyPolicy();
if (res.code === 200 && res.data) { if (res.code === 200 && res.data) {
this.privacyPolicyContent = res.data.content || '暂无隐私政策内容'; this.privacyPolicyContent = res.data.content || '暂无隐私政策内容';
this.showPrivacyPolicyPopup = true; this.showPrivacyPolicyPopup = true;
} else { } else {
uni.showToast({ uni.showToast({
title: '获取隐私政策失败', title: '获取隐私政策失败',
icon: 'none' icon: 'none'
}); });
} }
} catch (error) { } catch (error) {
console.error('获取隐私政策失败:', error); console.error('获取隐私政策失败:', error);
uni.showToast({ uni.showToast({
title: '获取隐私政策失败', title: '获取隐私政策失败',
icon: 'none' icon: 'none'
}); });
} }
}, },
// 关闭服务条款弹窗 // 关闭服务条款弹窗
closeServiceTermsPopup() { closeServiceTermsPopup() {
this.showServiceTermsPopup = false; this.showServiceTermsPopup = false;
}, },
// 关闭隐私政策弹窗 // 关闭隐私政策弹窗
closePrivacyPolicyPopup() { closePrivacyPolicyPopup() {
this.showPrivacyPolicyPopup = false; this.showPrivacyPolicyPopup = false;
}, },
// 同意服务条款 // 同意服务条款
agreeServiceTerms() { async agreeServiceTerms() {
this.hasReadServiceTerms = true; this.hasReadServiceTerms = true;
this.closeServiceTermsPopup(); this.closeServiceTermsPopup();
this.checkAgreementStatus(); this.checkAgreementStatus();
},
// 同意隐私政策
agreePrivacyPolicy() {
this.hasReadPrivacyPolicy = true;
this.closePrivacyPolicyPopup();
this.checkAgreementStatus();
},
// 检查同意状态
checkAgreementStatus() {
if (this.hasReadServiceTerms && this.hasReadPrivacyPolicy) {
// 如果都读完了，自动勾选同意
this.hasAgreed = true;
}
},
getPhoneNumber() {
// 检查是否同意条款
if (!this.hasAgreed) {
uni.showToast({
title: '请先同意服务条款和隐私政策',
icon: 'none'
});
return;
}
let that = this; // 如果隐私政策还未阅读，自动显示隐私政策
uni.login({ if (!this.hasReadPrivacyPolicy) {
success(res) { setTimeout(() => {
if (res.code) { this.showPrivacyPolicy();
console.log('登录！', res); }, 500); // 延迟500ms，让用户看到服务条款已同意
let data = { }
loginCode: res.code, },
appId:1, // 同意隐私政策
}; async agreePrivacyPolicy() {
this.hasReadPrivacyPolicy = true;
// 显示页面loading this.closePrivacyPolicyPopup();
if (that.pageLoading) { this.checkAgreementStatus();
that.pageLoading.show('登录中...')
} // 如果服务条款还未阅读，自动显示服务条款
if (!this.hasReadServiceTerms) {
wxLogin(data).then((res) => { setTimeout(() => {
// 确保清除loading this.showServiceTerms();
if (that.pageLoading) { }, 500); // 延迟500ms，让用户看到隐私政策已同意
that.pageLoading.hide() }
} },
forceHideLoading(); // 检查同意状态
checkAgreementStatus() {
if (res.code == 200) { if (this.hasReadServiceTerms && this.hasReadPrivacyPolicy) {
console.log(res,'resres'); // 如果都读完了，自动勾选同意
uni.setStorageSync('token', res.token); this.hasAgreed = true;
// 显示成功提示 }
uni.showToast({ },
title: '登录成功',
icon: 'success', // 显示未阅读的条款
duration: 1500 async showUnreadTerms() {
}); // 如果服务条款未阅读，先显示服务条款
// 延迟跳转，让用户看到成功提示 if (!this.hasReadServiceTerms) {
setTimeout(() => { await this.showServiceTerms();
that.ceshi() return;
}, 1500); }
} else {
// 处理业务逻辑错误 // 如果隐私政策未阅读，显示隐私政策
uni.showToast({ if (!this.hasReadPrivacyPolicy) {
title: res.msg || '登录失败', await this.showPrivacyPolicy();
icon: 'none' return;
}); }
} },
}).catch((error) => { getPhoneNumber() {
// 确保清除loading // 检查是否已阅读条款
if (that.pageLoading) { if (!this.hasReadServiceTerms || !this.hasReadPrivacyPolicy) {
that.pageLoading.hide() uni.showToast({
} title: '请先阅读服务条款和隐私政策',
forceHideLoading(); icon: 'none',
duration: 2000
console.error('登录失败:', error); });
uni.showToast({
title: '登录失败', // 自动弹出未阅读的条款
icon: 'none' this.showUnreadTerms();
}); return;
}
let that = this;
uni.login({
success(res) {
if (res.code) {
console.log('登录！', res);
let data = {
loginCode: res.code,
appId:1,
};
// 显示页面loading
if (that.pageLoading) {
that.pageLoading.show('登录中...')
}
wxLogin(data).then((res) => {
// 确保清除loading
if (that.pageLoading) {
that.pageLoading.hide()
}
forceHideLoading();
if (res.code == 200) {
console.log(res,'resres');
uni.setStorageSync('token', res.token);
// 显示成功提示
uni.showToast({
title: '登录成功',
icon: 'success',
duration: 1500
});
// 延迟跳转，让用户看到成功提示
setTimeout(() => {
that.ceshi()
}, 1500);
} else {
// 处理业务逻辑错误
uni.showToast({
title: res.msg || '登录失败',
icon: 'none'
}); });
} }
}, }).catch((error) => {
fail(err) { // 确保清除loading
console.error('微信登录失败:', err); if (that.pageLoading) {
that.pageLoading.hide()
}
forceHideLoading();
console.error('登录失败:', error);
uni.showToast({ uni.showToast({
title: '微信登录失败', title: '登录失败',
icon: 'none' icon: 'none'
}); });
} });
}
},
fail(err) {
console.error('微信登录失败:', err);
uni.showToast({
title: '微信登录失败',
icon: 'none'
}); });
},
async ceshi() {
// 确保清除loading状态
if (this.pageLoading) {
this.pageLoading.hide()
} }
forceHideLoading(); });
},
// 使用路由仓库跳转到首页 async ceshi() {
navigateToPage('index'); // 确保清除loading状态
}, if (this.pageLoading) {
} this.pageLoading.hide()
} }
forceHideLoading();
// 使用路由仓库跳转到首页
navigateToPage('index');
},
}
}
</script> </script>
<style lang="scss" > <style lang="scss" >
page{ page{
background: #FFFFFF; background: #FFFFFF;
} }
.page { .page {
position: relative; /* 添加相对定位 */ position: relative; /* 添加相对定位 */
} }
.imgbox { .imgbox {
margin:102rpx auto ; margin:102rpx auto ;
width: 730rpx; width: 730rpx;
height: 422rpx; height: 422rpx;
z-index: 0; z-index: 0;
image { image {
width: 730rpx; width: 730rpx;
height: 422rpx; height: 422rpx;
} }
} }
.button{ .button{
margin-top: 200rpx; margin-top: 200rpx;
width: 586rpx; width: 586rpx;
height: 90rpx; height: 90rpx;
background: #4C97E7; background: #4C97E7;
border-radius: 54rpx 54rpx 54rpx 54rpx; border-radius: 54rpx 54rpx 54rpx 54rpx;
font-weight: 500; font-weight: 500;
font-size: 40rpx; font-size: 40rpx;
color: #FFFFFF; color: #FFFFFF;
} }
.button-disabled {
background: #CCCCCC !important;
color: #999999 !important;
}
.tip{
margin-top:128rpx ;
display: flex;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
font-weight: 400;
font-size: 20rpx;
color: #979797;
.link-text {
color: #4C97E7;
text-decoration: underline;
}
}
/* 自定义勾选按钮样式 */
.checkbox-container {
display: flex;
align-items: center;
margin-right: 10rpx;
cursor: pointer;
}
.checkbox {
width: 26rpx;
height: 26rpx;
border: 2rpx solid #CCCCCC;
border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
transition: all 0.3s ease;
}
.checkbox.checked {
background-color: #4C97E7;
border-color: #4C97E7;
}
.checkmark {
color: #FFFFFF;
font-size: 16rpx;
font-weight: bold;
line-height: 1;
}
/* 弹窗样式 */ .tip{
.popup-content { margin-top:128rpx ;
background: #fff; display: flex;
border-radius: 20rpx; flex-wrap: nowrap;
overflow: hidden; align-items: center;
display: flex; justify-content: center;
flex-direction: column; font-weight: 400;
height: 100%; font-size: 20rpx;
} color: #979797;
.link-text {
color: #4C97E7;
text-decoration: underline;
}
}
.popup-header { /* 自定义勾选按钮样式 */
padding: 30rpx; .checkbox-container {
border-bottom: 1rpx solid #eee; display: flex;
display: flex; align-items: center;
justify-content: space-between; margin-right: 10rpx;
align-items: center; cursor: pointer;
background: #f8f8f8; }
}
.popup-title { .checkbox {
font-size: 32rpx; width: 26rpx;
font-weight: bold; height: 26rpx;
color: #333; border: 2rpx solid #CCCCCC;
} border-radius: 4rpx;
display: flex;
align-items: center;
justify-content: center;
background-color: #FFFFFF;
transition: all 0.3s ease;
}
.popup-close { .checkbox.checked {
font-size: 40rpx; background-color: #4C97E7;
color: #999; border-color: #4C97E7;
cursor: pointer; }
padding: 10rpx;
}
.popup-body { .checkmark {
flex: 1; color: #FFFFFF;
padding: 30rpx; font-size: 16rpx;
line-height: 1.6; font-weight: bold;
font-size: 28rpx; line-height: 1;
color: #333; }
}
.popup-footer { /* 弹窗样式 */
padding: 30rpx; .popup-content {
border-top: 1rpx solid #eee; background: #fff;
background: #f8f8f8; border-radius: 20rpx;
} overflow: hidden;
display: flex;
flex-direction: column;
height: 100%;
}
.popup-btn { .popup-header {
width: 100%; padding: 30rpx;
height: 80rpx; border-bottom: 1rpx solid #eee;
background: #4C97E7; display: flex;
color: #fff; justify-content: space-between;
border: none; align-items: center;
border-radius: 40rpx; background: #f8f8f8;
font-size: 30rpx; }
font-weight: 500;
} .popup-title {
font-size: 32rpx;
font-weight: bold;
color: #333;
}
.popup-close {
font-size: 40rpx;
color: #999;
cursor: pointer;
padding: 10rpx;
}
.popup-body {
flex: 1;
padding: 30rpx;
line-height: 1.6;
font-size: 28rpx;
color: #333;
}
.popup-footer {
padding: 30rpx;
border-top: 1rpx solid #eee;
background: #f8f8f8;
}
.popup-tip {
display: block;
font-size: 24rpx;
color: #666;
text-align: center;
margin-bottom: 20rpx;
line-height: 1.4;
}
.popup-btn {
width: 100%;
height: 80rpx;
background: #4C97E7;
color: #fff;
border: none;
border-radius: 40rpx;
font-size: 30rpx;
font-weight: 500;
}
</style> </style>