buddhism/pages/login/login.vue

<template>
	<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>
		<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-popup v-model="showServiceTermsPopup" 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="closeServiceTermsPopup">×</text>
				</view>
				<scroll-view class="popup-body" scroll-y>
					<rich-text :nodes="serviceTermsContent"></rich-text>
				</scroll-view>
				<view class="popup-footer">
					<button class="popup-btn" @click="agreeServiceTerms">同意</button>
				</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">
					<button class="popup-btn" @click="agreePrivacyPolicy">同意</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
import { navigateToPage } from "@/utils/router.js";
import { wxLogin } from "@/api/auth/auth.js";
import { forceHideLoading, AutoLoadingManager } from "@/utils/request.js";
import { getServiceTerms, getPrivacyPolicy } from "@/api/article/article.js";

	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#fff",
				},
				titleTxt:"登录",
				chooseType:true,
				usertype:'',
				login:false,
				hasAgreed: false, // 是否同意条款
				hasReadServiceTerms: false, // 是否已读服务条款
				hasReadPrivacyPolicy: false, // 是否已读隐私政策
				showServiceTermsPopup: false, // 服务条款弹窗
				showPrivacyPolicyPopup: false, // 隐私政策弹窗
				serviceTermsContent: '', // 服务条款内容
				privacyPolicyContent: '', // 隐私政策内容
			}
		},
		onLoad() {
			// 初始化页面loading管理器
			this.pageLoading = new AutoLoadingManager()
		},
		onUnload() {
			// 页面卸载时清除loading
			forceHideLoading();
			if (this.pageLoading) {
				this.pageLoading.destroy()
			}
		},
		methods: {
			userType(num){
				this.chooseType=false
				this.login=true
				if(num===1){
					this.usertype='01'
				}else{
					this.usertype='00'
				}
			},
			// 切换同意状态
			toggleAgreement() {
				if (this.hasReadServiceTerms && this.hasReadPrivacyPolicy) {
					this.hasAgreed = !this.hasAgreed;
				} else {
					uni.showToast({
						title: '请先阅读服务条款和隐私政策',
						icon: 'none'
					});
				}
			},
			// 显示服务条款
			async showServiceTerms() {
				try {
					const res = await getServiceTerms();
					if (res.code === 200 && res.data) {
						this.serviceTermsContent = res.data.content || '暂无服务条款内容';
						this.showServiceTermsPopup = true;
					} else {
						uni.showToast({
							title: '获取服务条款失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取服务条款失败:', error);
					uni.showToast({
						title: '获取服务条款失败',
						icon: 'none'
					});
				}
			},
			// 显示隐私政策
			async showPrivacyPolicy() {
				try {
					const res = await getPrivacyPolicy();
					if (res.code === 200 && res.data) {
						this.privacyPolicyContent = res.data.content || '暂无隐私政策内容';
						this.showPrivacyPolicyPopup = true;
					} else {
						uni.showToast({
							title: '获取隐私政策失败',
							icon: 'none'
						});
					}
				} catch (error) {
					console.error('获取隐私政策失败:', error);
					uni.showToast({
						title: '获取隐私政策失败',
						icon: 'none'
					});
				}
			},
			// 关闭服务条款弹窗
			closeServiceTermsPopup() {
				this.showServiceTermsPopup = false;
			},
			// 关闭隐私政策弹窗
			closePrivacyPolicyPopup() {
				this.showPrivacyPolicyPopup = false;
			},
			// 同意服务条款
			agreeServiceTerms() {
				this.hasReadServiceTerms = true;
				this.closeServiceTermsPopup();
				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({
            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) => {
                  // 确保清除loading
                  if (that.pageLoading) {
                    that.pageLoading.hide()
                  }
                  forceHideLoading();
                  
                  console.error('登录失败:', error);
                  uni.showToast({
                    title: '登录失败',
                    icon: 'none'
                  });
                });
              }
            },
            fail(err) {
              console.error('微信登录失败:', err);
              uni.showToast({
                title: '微信登录失败',
                icon: 'none'
              });
            }
          });
			},
      async ceshi() {
        // 确保清除loading状态
        if (this.pageLoading) {
          this.pageLoading.hide()
        }
        forceHideLoading();
        
        // 使用路由仓库跳转到首页
        navigateToPage('index');
      },
		}
	}
</script>

<style lang="scss" >
	page{
		background: #FFFFFF;
	}
	.page {
		position: relative; /* 添加相对定位 */
	}

	.imgbox {
		margin:102rpx auto ;
		width: 730rpx;
		height: 422rpx;
		z-index: 0;

		image {
			width: 730rpx;
			height: 422rpx;
		}
	}
	.button{
		margin-top: 200rpx;
		width: 586rpx;
		height: 90rpx;
		background: #4C97E7;
		border-radius: 54rpx 54rpx 54rpx 54rpx;
		font-weight: 500;
		font-size: 40rpx;
		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;
	}

	/* 弹窗样式 */
	.popup-content {
		background: #fff;
		border-radius: 20rpx;
		overflow: hidden;
		display: flex;
		flex-direction: column;
		height: 100%;
	}

	.popup-header {
		padding: 30rpx;
		border-bottom: 1rpx solid #eee;
		display: flex;
		justify-content: space-between;
		align-items: center;
		background: #f8f8f8;
	}

	.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-btn {
		width: 100%;
		height: 80rpx;
		background: #4C97E7;
		color: #fff;
		border: none;
		border-radius: 40rpx;
		font-size: 30rpx;
		font-weight: 500;
	}
</style>