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

775
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> </u-navbar>
<view class="imgbox"> <view class="imgbox">
<image src="https://api.ccttiot.com/smartmeter/img/static/uGPwljIaEppyKAT1iQaW" mode=""></image> <image src="https://api.ccttiot.com/smartmeter/img/static/uGPwljIaEppyKAT1iQaW" mode=""></image>
</view> </view>
<button class="button" :disabled="!hasAgreed" :class="{ 'button-disabled': !hasAgreed }" @click="getPhoneNumber" > <button class="button" @click="getPhoneNumber">
授权登录 授权登录
</button> </button>
<view class="tip"> <view class="tip">
<view class="checkbox-container" @click="toggleAgreement"> <view class="checkbox-container" @click="toggleAgreement">
<view class="checkbox" :class="{ 'checked': hasAgreed }"> <view class="checkbox" :class="{ 'checked': hasAgreed }">
<text v-if="hasAgreed" class="checkmark">✓</text> <text v-if="hasAgreed" class="checkmark">✓</text>
</view> </view>
</view> </view>
<text>我已同意并阅读</text> <text>我已同意并阅读</text>
<text class="link-text" @click="showServiceTerms">《服务条款》</text> <text class="link-text" @click="showServiceTerms">《服务条款》</text>
<text class="link-text" @click="showPrivacyPolicy">《法律条款及隐私政策》</text> <text class="link-text" @click="showPrivacyPolicy">《法律条款及隐私政策》</text>
</view> </view>
<!-- 服务条款弹窗 --> <!-- 服务条款弹窗 -->
<u-popup v-model="showServiceTermsPopup" 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="closeServiceTermsPopup">×</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="serviceTermsContent"></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="agreeServiceTerms">同意</button> <text class="popup-tip">请仔细阅读服务条款，阅读完毕后点击同意</text>
</view> <button class="popup-btn" @click="agreeServiceTerms">同意</button>
</view> </view>
</u-popup> </view>
</u-popup>
<!-- 隐私政策弹窗 --> <!-- 隐私政策弹窗 -->
<u-popup v-model="showPrivacyPolicyPopup" mode="center" width="600rpx" height="800rpx" border-radius="20rpx"> <u-popup v-model="showPrivacyPolicyPopup" 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="closePrivacyPolicyPopup">×</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="privacyPolicyContent"></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="agreePrivacyPolicy">同意</button>
</view> </view>
</u-popup> </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;
this.closePrivacyPolicyPopup();
this.checkAgreementStatus();
// 显示页面loading // 如果服务条款还未阅读，自动显示服务条款
if (that.pageLoading) { if (!this.hasReadServiceTerms) {
that.pageLoading.show('登录中...') setTimeout(() => {
} this.showServiceTerms();
}, 500); // 延迟500ms，让用户看到隐私政策已同意
}
},
// 检查同意状态
checkAgreementStatus() {
if (this.hasReadServiceTerms && this.hasReadPrivacyPolicy) {
// 如果都读完了，自动勾选同意
this.hasAgreed = true;
}
},
wxLogin(data).then((res) => { // 显示未阅读的条款
// 确保清除loading async showUnreadTerms() {
if (that.pageLoading) { // 如果服务条款未阅读，先显示服务条款
that.pageLoading.hide() if (!this.hasReadServiceTerms) {
} await this.showServiceTerms();
forceHideLoading(); return;
}
if (res.code == 200) { // 如果隐私政策未阅读，显示隐私政策
console.log(res,'resres'); if (!this.hasReadPrivacyPolicy) {
uni.setStorageSync('token', res.token); await this.showPrivacyPolicy();
// 显示成功提示 return;
uni.showToast({ }
title: '登录成功', },
icon: 'success', getPhoneNumber() {
duration: 1500 // 检查是否已阅读条款
}); if (!this.hasReadServiceTerms || !this.hasReadPrivacyPolicy) {
// 延迟跳转，让用户看到成功提示 uni.showToast({
setTimeout(() => { title: '请先阅读服务条款和隐私政策',
that.ceshi() icon: 'none',
}, 1500); duration: 2000
} else { });
// 处理业务逻辑错误
uni.showToast({
title: res.msg || '登录失败',
icon: 'none'
});
}
}).catch((error) => {
// 确保清除loading
if (that.pageLoading) {
that.pageLoading.hide()
}
forceHideLoading();
console.error('登录失败:', error); // 自动弹出未阅读的条款
uni.showToast({ this.showUnreadTerms();
title: '登录失败', return;
icon: 'none' }
});
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() {
// 确保清除loading状态
if (this.pageLoading) {
this.pageLoading.hide()
}
forceHideLoading();
// 使用路由仓库跳转到首页 // 使用路由仓库跳转到首页
navigateToPage('index'); 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;
}
}
/* 自定义勾选按钮样式 */ .tip{
.checkbox-container { margin-top:128rpx ;
display: flex; display: flex;
align-items: center; flex-wrap: nowrap;
margin-right: 10rpx; align-items: center;
cursor: pointer; justify-content: center;
} font-weight: 400;
font-size: 20rpx;
color: #979797;
.link-text {
color: #4C97E7;
text-decoration: underline;
}
}
.checkbox { /* 自定义勾选按钮样式 */
width: 26rpx; .checkbox-container {
height: 26rpx; display: flex;
border: 2rpx solid #CCCCCC; align-items: center;
border-radius: 4rpx; margin-right: 10rpx;
display: flex; cursor: pointer;
align-items: center; }
justify-content: center;
background-color: #FFFFFF;
transition: all 0.3s ease;
}
.checkbox.checked { .checkbox {
background-color: #4C97E7; width: 26rpx;
border-color: #4C97E7; 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;
}
.checkmark { .checkbox.checked {
color: #FFFFFF; background-color: #4C97E7;
font-size: 16rpx; border-color: #4C97E7;
font-weight: bold; }
line-height: 1;
}
/* 弹窗样式 */ .checkmark {
.popup-content { color: #FFFFFF;
background: #fff; font-size: 16rpx;
border-radius: 20rpx; font-weight: bold;
overflow: hidden; line-height: 1;
display: flex; }
flex-direction: column;
height: 100%;
}
.popup-header { /* 弹窗样式 */
padding: 30rpx; .popup-content {
border-bottom: 1rpx solid #eee; background: #fff;
display: flex; border-radius: 20rpx;
justify-content: space-between; overflow: hidden;
align-items: center; display: flex;
background: #f8f8f8; flex-direction: column;
} height: 100%;
}
.popup-title { .popup-header {
font-size: 32rpx; padding: 30rpx;
font-weight: bold; border-bottom: 1rpx solid #eee;
color: #333; display: flex;
} justify-content: space-between;
align-items: center;
background: #f8f8f8;
}
.popup-close { .popup-title {
font-size: 40rpx; font-size: 32rpx;
color: #999; font-weight: bold;
cursor: pointer; color: #333;
padding: 10rpx; }
}
.popup-body { .popup-close {
flex: 1; font-size: 40rpx;
padding: 30rpx; color: #999;
line-height: 1.6; cursor: pointer;
font-size: 28rpx; padding: 10rpx;
color: #333; }
}
.popup-footer { .popup-body {
padding: 30rpx; flex: 1;
border-top: 1rpx solid #eee; padding: 30rpx;
background: #f8f8f8; line-height: 1.6;
} font-size: 28rpx;
color: #333;
}
.popup-btn { .popup-footer {
width: 100%; padding: 30rpx;
height: 80rpx; border-top: 1rpx solid #eee;
background: #4C97E7; background: #f8f8f8;
color: #fff; }
border: none;
border-radius: 40rpx; .popup-tip {
font-size: 30rpx; display: block;
font-weight: 500; 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>