threeonecheck_web/pages/login/enterprise.vue

<template>
	<view>
		<view class="padding solid radius margin">
		<up-form labelPosition="left" :model="state.model1" :rules="state.rules" ref="form1">
					<up-form-item :required="true" label="企业名称" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="90">
						<up-input border="none" placeholder="请填写营业执照上的企业名称" inputAlign="right"></up-input>
					</up-form-item>
					<up-form-item :required="true" label="管理员姓名" prop="userInfo.name" :borderBottom="true" ref="item1" label-width="120">
						<up-input border="none" placeholder="请输入管理员姓名" inputAlign="right" ></up-input>
					</up-form-item>
				
			</up-form>
			 
			<view class="margin-top-xl">
				<button class="round" :class="state.isAgreed ? 'bg-blue' : 'bg-gray'" 
				        :disabled="!state.isAgreed" @click="handleRegister">
					申请注册
				</button>
			</view>
			<!-- 用户协议复选框 -->
			<view class="protocol-agreement">
				<view class="protocol-checkbox" @click="toggleAgreement">
					<view class="checkbox" :class="{ 'checked': state.isAgreed }">
						<text class="checkmark" v-if="state.isAgreed">✓</text>
					</view>
					<text class="protocol-text">
						我已阅读并接受
						<text class="protocol-link" @click.stop="showProtocol('user')">《服务协议》</text>
						和
						<text class="protocol-link" @click.stop="showProtocol('privacy')">《隐私政策》</text>
					</text>
				</view>
			</view>
			
			<!-- 协议弹窗 -->
			<view class="container">
			        <lsl-protocol-popup 
			        	title="用户协议和隐私政策" 
			        	predesc="为了更好地保护您的个人信息和合法权益，在使用我们的服务前，请您务必仔细阅读并充分理解以下协议条款。" 
			        	subdesc='请您详细阅读各条款内容，特别是免除或限制责任的条款。如您同意以下协议条款，请点击"同意并继续"开始使用我们的服务。' 
			        	color="#007AFF" 
			        	:onNeed='state.showProtocolPopup' 
			        	@agree="handleAgreeProtocol" 
			        	@close="closeProtocolPopup"
			        	:other="other"  
			        	open_type='getPhoneNumber|agreePrivacyAuthorization'>
			        </lsl-protocol-popup>
			    </view>
		</view>
	</view>
</template>

<script setup>
	import { ref, computed, onUnmounted,reactive } from 'vue';
			// 使用 reactive 创建响应式状态
		const state = reactive({
			showSex: false,
			isAgreed: false, // 用户是否同意协议
			showProtocolPopup: false, // 是否显示协议弹窗
			model1: {
				userInfo: {
					name: 'uview-plus UI',
					sex: '',
				},
			},
			rules: {
				'userInfo.name': {
					type: 'string',
					required: true,
					message: '请填写姓名',
					trigger: ['blur', 'change'],
				},
			},
		});
		
		// 切换协议同意状态
		const toggleAgreement = () => {
			state.isAgreed = !state.isAgreed;
		};
		
		// 显示协议内容
		const showProtocol = (type) => {
			if (type === 'user') {
				// 跳转到用户协议页面
				uni.navigateTo({
					url: '/pages/login/agreement'
				});
			} else if (type === 'privacy') {
				// 显示隐私政策弹窗
				state.showProtocolPopup = true;
			}
		};
		
		// 处理注册按钮点击
		const handleRegister = () => {
			if (!state.isAgreed) {
				uni.showToast({
					title: '请先阅读并同意用户协议和隐私政策',
					icon: 'none',
					duration: 2000
				});
				return;
			}
			// 这里可以添加注册逻辑
			console.log('开始注册流程');
		};
		
		// 同意协议回调
		const handleAgreeProtocol = () => {
			state.isAgreed = true;
			state.showProtocolPopup = false;
			uni.showToast({
				title: '已同意协议条款',
				icon: 'success',
				duration: 1500
			});
		};
		
		// 关闭协议弹窗
		const closeProtocolPopup = () => {
			state.showProtocolPopup = false;
		};
		
		// 获取列表（原方法保留）
		const getList = () => {
			console.log('获取列表');
		};
		
		// 用户协议配置
		const other = [
		  [
		    {
		      tit: '《服务协议》',
		      type: 'page', // doc自行下载打开文档 page跳转页面
		      content: '/pages/login/agreement', // 文档地址/页面跳转地址
		    },
		    {
		      tit: '《隐私政策》',
		      type: 'page', // doc自行下载打开文档 page跳转页面
		      content: '/pages/login/privacy', // 文档地址/页面跳转地址
		    }
		  ]
		]
</script>

<style scoped>
/* 协议同意区域 */
.protocol-agreement {
	padding: 30rpx 0;
}

.protocol-checkbox {
	display: flex;
	align-items: flex-start;
	gap: 15rpx;
}

.checkbox {
	width: 32rpx;
	height: 32rpx;
	border: 2rpx solid #ddd;
	border-radius: 6rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	transition: all 0.3s ease;
	margin-top: 2rpx;
}

.checkbox.checked {
	background-color: #007AFF;
	border-color: #007AFF;
}

.checkmark {
	color: white;
	font-size: 20rpx;
	font-weight: bold;
}

.protocol-text {
	font-size: 28rpx;
	color: #666;
	line-height: 1.6;
	flex: 1;
}

.protocol-link {
	color: #007AFF;
	text-decoration: underline;
}

/* 注册按钮样式 */
.bg-gray {
	background-color: #ccc !important;
	color: #999 !important;
}

.bg-blue {
	background-color: #007AFF !important;
	color: white !important;
}

button[disabled] {
	opacity: 0.6;
	cursor: not-allowed;
}

button:not([disabled]):active {
	transform: scale(0.98);
	transition: transform 0.1s ease;
}
</style>