englishread-front/subPages/login/login.vue

<template>
	<view class="login-container">
		<!-- 背景图 -->
		<!-- <image class="bg-image" src="@/subPages/static/登录_背景图.png" mode="aspectFill"></image> -->
		
		<!-- 主要内容 -->
		<view class="content">
			<!-- Logo和标题区域 -->
			<view class="logo-section">
				<image class="logo" :src="configParamContent('login_logo')" mode="aspectFit"></image>
				<text class="title-text">{{ configParamContent('app_name') }}</text>
			</view>
			
			<!-- 登录按钮区域 -->
			<view class="login-section">
				<button class="login-btn" @click="handleLogin">
					登录
				</button>
				
				<button class="guest-btn" @click="handleGuestLogin">
					取消登录
				</button>
				
				<!-- 协议文本 -->
				<view class="agreement-text">
					<view class="agreement-content">
						<view class="checkbox-container" @click="toggleAgreement">
							<view class="checkbox" :class="{ 'checked': isAgreed }">
								<view class="checkbox-inner" v-if="isAgreed"></view>
							</view>
						</view>
						<text >我已阅读并同意
							<text class="link-text" @click="showServiceAgreement">《服务协议》</text>
							<text>和</text>
							<text class="link-text" @click="showPrivacyPolicy">《隐私政策》</text>
						</text>
					</view>
				</view>
			</view>
		</view>

		<!-- 用户协议和隐私政策弹窗 -->
    <uv-modal ref="serviceModal" title="《服务协议与隐私条款》" :show-cancel-button="false" confirm-text="我知道了" confirm-color="#06DADC" @confirm="isAgreed = true">
      <view class="privacy-content">
        <!-- 如果是富文本 -->
        <uv-parse :content="configParamContent('privacy_policy')"></uv-parse>
      </view>
    </uv-modal>

		<!-- 用户协议和隐私政策弹窗 -->
    <uv-modal ref="guideModal" title="《个人信息保护指引》" :show-cancel-button="false" confirm-text="我知道了" confirm-color="#06DADC" @confirm="isAgreed = true">
      <view class="privacy-content">
        <!-- 如果是富文本 -->
        <uv-parse :content="configParamContent('user_agreement')"></uv-parse>
      </view>
    </uv-modal>
	</view>
</template>

<script>
export default {
	name: 'Login',
	data() {
		return {
			isAgreed: false
		}
	},
	methods: {
		// 授权登录
		handleLogin() {

			if (!this.isAgreed) {
				this.$refs.serviceModal.open();
				this.$refs.guideModal.open();
				return
			}

			uni.login({
				provider: 'weixin',
				success: async (res) => {
					console.log('登录成功', res);
					const obj = { }
					if (uni.getStorageSync('inviter')){
						obj.inviter = uni.getStorageSync('inviter')
					}
					const { result: loginRes } = await this.$api.login.login({
						code: res.code,
						...obj
					})

					uni.setStorageSync('token', loginRes.token)
					
					const userInfo = loginRes.userInfo
					
					// 存储用户信息到store
					this.$store.dispatch('updateUserInfo', userInfo)
					
					if ( !userInfo.avatar || !userInfo.name || !userInfo.phone ){
						uni.navigateTo({
							url: '/subPages/login/userInfo'
						})
						return
					}else {
						uni.showToast({
							title: '登录成功',
							icon: 'success'
						})
						uni.switchTab({
							url: '/pages/index/home'
						});
					}
					// 登录成功后可以调用后端接口保存用户信息
				},
				fail: (err) => {
					console.log('登录失败', err);
				}
			})
			
		},
		
		// 游客登录
		handleGuestLogin() {
			console.log('暂不登录');
			// 跳转到主页
			uni.switchTab({
				url: '/pages/index/home'
			});
		},
		
		// 显示服务协议
		showServiceAgreement() {
			this.$refs.serviceModal.open();
			console.log('查看服务协议');
			// 这里可以跳转到协议页面或显示弹窗
		},
		
		// 显示隐私政策
		showPrivacyPolicy() {
			this.$refs.guideModal.open();
			console.log('查看隐私条款');
			// 这里可以跳转到隐私政策页面或显示弹窗
		},
		
		// 切换协议同意状态
		toggleAgreement() {
			this.isAgreed = !this.isAgreed;
		}
	}
}
</script>

<style lang="scss" scoped>
.login-container {
	position: relative;
	width: 100vw;
	height: 100vh;
	overflow: hidden;
	background: #E8FBFB;
	.bg-image {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
	}
	
	.content {
		position: relative;
		z-index: 2;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 0 60rpx;
		
		.logo-section {
			display: flex;
			flex-direction: column;
			align-items: center;
			margin-bottom: 120rpx;
			
			.logo {
				width: 120rpx;
				height: 120rpx;
				margin-bottom: 40rpx;
			}
			
			.title-text {
				font-size: 36rpx;
				font-weight: 600;
				color: $primary-text-color;
				text-align: center;
			}
		}
		
		.login-section {
			width: 100%;
			display: flex;
			flex-direction: column;
			align-items: center;
			
			.login-btn {
				width: 630rpx;
				height: 88rpx;
				margin-bottom: 30rpx;
				background-color: $primary-color;
				border: none;
				border-radius: 44rpx;
				color: white;
				font-size: 32rpx;
				font-weight: 500;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.guest-btn {
				width: 630rpx;
				height: 88rpx;
				margin-bottom: 60rpx;
				border: 2rpx solid $primary-color;
				border-radius: 44rpx;
				color: $primary-color;
				font-size: 32rpx;
				font-weight: 400;
				background-color: transparent;
				display: flex;
				align-items: center;
				justify-content: center;
			}
			
			.agreement-text {
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: $secondary-text-color;
				line-height: 1.5;
				
				.checkbox-container {
					margin-right: 12rpx;
					cursor: pointer;
					
					.checkbox {
						width: 29rpx;
						height: 29rpx;
						border: 1rpx solid $secondary-text-color;
						border-radius: 50%;
						display: flex;
						align-items: center;
						justify-content: center;
						transition: all 0.3s ease;
						
						&.checked {
							border-color: $primary-color;
							background-color: $primary-color;
						}
						
						.checkbox-inner {
							width: 16rpx;
							height: 16rpx;
							background-color: white;
							border-radius: 50%;
						}
					}
				}
				
				.agreement-content {
					flex: 1;
					text-align: left;
					display: flex;
					.link-text {
						color: $primary-color;
						// text-decoration: underline;
					}
				}
			}
		}
	}
}
</style>