登录第二版

common/styles/global/pages.scss

@@ -82,10 +82,20 @@
 
 // 用户协议弹窗
 .agree-sections-dialog{
+	width: 635rpx;height: 702rpx;padding: 360rpx 36rpx 42rpx;box-sizing: border-box;text-align: center;
+	background-image: url("@/static/images/login/agree-dialog-bj.png");@include ezy-no-repeat-cover;
+	.agree-title{color:#666;font-size: 32rpx;font-weight: 600;}
+	.agree-tip{color:#777;font-size: 28rpx;margin-top: 30rpx;}
+	.confirm-btn{width: 538rpx;height: 85rpx;@include ezy-no-repeat-cover;margin: 46rpx auto 0;
+	background-image: url("@/static/images/login/agree-confirm-btn.png");}
+	.not-confirm-btn{color:#888;font-size: 32rpx;padding: 16rpx 0;display: inline-block;}
+}
+// 用户协议详情弹窗
+.agree-content-dialog{
 	width: 100%;height: 100vh;overflow: auto;
-	.agree-sections-content{
+	.agree-content-box{
 		width: 684rpx;height: 1308rpx;@include ezy-no-repeat-cover;
-		background-image: url("@/static/images/login/agree-sections-bj.png");
+		background-image: url("@/static/images/login/agree-content-bj.png");
 		padding: 120rpx 0 64rpx;box-sizing: border-box;margin-top: 36%;
 		position: relative;text-align: justify;
 		display: flex;flex-direction: column;
@@ -96,10 +106,10 @@
 	background-image: url("@/static/images/login/agree-sections-close.png");}
 	.agree-section-box{font-size: 30rpx;line-height: 1.8;overflow: auto;flex: 1;padding: 0 46rpx;}
 	@media (max-height: 800px) {
-		.agree-sections-content{margin-top: 18%;}
+		.agree-content-box{margin-top: 18%;}
 	}
 	@media (max-height: 700px) {
-		.agree-sections-content{margin-top: var(--status-bar-height);}
+		.agree-content-box{margin-top: var(--status-bar-height);}
 	}
 }
 

pages/login/agreeContentDialog.vue

@@ -0,0 +1,38 @@
+<template>
+	  <uni-popup ref="agreeContentPopup" :animation="false" :is-mask-click="false"
+	  mask-background-color="rgba(255, 255, 255, 0.6);">
+	  <view class="agree-content-dialog">
+		<view class="agree-content-box">
+			<view class="agree-title">用户许可协议</view>
+			<view class="agree-close-btn" @click="handleClose"></view>
+			<view class="agree-section-box" v-html="formatText(agreementSections)"></view>
+		</view>
+	  </view>
+	 </uni-popup>
+</template>
+
+<script setup>
+import { ref } from 'vue';
+const agreeContentPopup = ref(null); // 索引
+// 模拟从图片中提取的协议内容，这里使用您提供的文字文本进行简单处理
+const agreementSections = ref(`一、总则
+      1.1 用户应当同意本协议的条款并按照提示完成全部的注册程序。用户在过程中点击或勾选“同意”按钮即表示用户与大连栋科软件工程有限公司(下称“栋科软件”)达成协议，完全接受本协议项下的全部条款。
+      1.2 用户注册成功后，栋科软件将给予每个用户一个用户帐号及相应的密码，该用户帐号和密码由用户负责保管;用户应当对以其用户帐号进行的所有活动和事件负法律责任。
+      1.3 栋科软件用户服务协议以及各个产品的单项服务条款和公告可由栋科软件随时更新，且无需另行通知。您在使用相关服务时，应关注并遵守其所适用的相关条款。
+      1.4 您在使用栋科软件提供的各项服务之前，应仔细阅读本服务协议。如您不同意本服务协议及，或随时对其的修改，您可以主动取消栋科软件提供的服务。
+    `);
+function formatText(text) {
+	return text.replace(/\n/g, '<br/>');
+}
+// 打开弹窗
+function handleShow() {
+	agreeContentPopup.value.open();
+}
+// 关闭弹窗
+function handleClose() {
+	agreeContentPopup.value.close();
+}
+defineExpose({
+		handleShow
+	})
+</script>

pages/login/agreeDialog.vue

@@ -1,38 +1,34 @@
 <template>
-	  <uni-popup ref="agreePopup" :animation="false" 
-	  mask-background-color="rgba(255, 255, 255, 0.5);">
-	  <view class="agree-sections-dialog">
-		<view class="agree-sections-content">
-			<view class="agree-title">用户许可协议</view>
-			<view class="agree-close-btn" @click="handleClose"></view>
-			<view class="agree-section-box" v-html="formatText(agreementSections)"></view>
-		</view>
-	  </view>
-	 </uni-popup>
+	<uni-popup ref="agreePopup" :animation="false" :is-mask-click="false"
+	 mask-background-color="rgba(255, 255, 255, 0.6);">
+	 <view class="agree-sections-dialog">
+			<view class="sections-content-box">
+				<view class="agree-title">用户协议及隐私保护</view>
+				<view class="agree-tip">我已阅读并同意《用户协议》和《隐私政策》</view>
+				<view class="confirm-btn" @click="confirmBtn"></view>
+				<text class="not-confirm-btn" @click="handleClose">不同意</text>
+			</view>
+	 </view>
+	</uni-popup>
 </template>
 
-<script setup>
-import { ref } from 'vue';
-const agreePopup = ref(null); // 索引
-// 模拟从图片中提取的协议内容，这里使用您提供的文字文本进行简单处理
-const agreementSections = ref(`一、总则
-      1.1 用户应当同意本协议的条款并按照提示完成全部的注册程序。用户在过程中点击或勾选“同意”按钮即表示用户与大连栋科软件工程有限公司(下称“栋科软件”)达成协议，完全接受本协议项下的全部条款。
-      1.2 用户注册成功后，栋科软件将给予每个用户一个用户帐号及相应的密码，该用户帐号和密码由用户负责保管;用户应当对以其用户帐号进行的所有活动和事件负法律责任。
-      1.3 栋科软件用户服务协议以及各个产品的单项服务条款和公告可由栋科软件随时更新，且无需另行通知。您在使用相关服务时，应关注并遵守其所适用的相关条款。
-      1.4 您在使用栋科软件提供的各项服务之前，应仔细阅读本服务协议。如您不同意本服务协议及，或随时对其的修改，您可以主动取消栋科软件提供的服务。
-    `);
-function formatText(text) {
-	return text.replace(/\n/g, '<br/>');
-}
-// 打开弹窗
-function handleShow() {
-	agreePopup.value.open();
-}
-// 关闭弹窗
-function handleClose() {
-	agreePopup.value.close();
-}
-defineExpose({
-		handleShow
-	})
+<script setup>
+	import { ref } from 'vue';
+	const agreePopup = ref(null); // 索引
+	// 打开弹窗
+	function handleShow() {
+		agreePopup.value.open();
+	}
+	// 关闭弹窗
+	function handleClose() {
+		agreePopup.value.close();
+	}
+	// 同意并登录按钮
+	function confirmBtn(){}
+	defineExpose({
+			handleShow
+		})
 </script>
+
+<style>
+</style>

pages/login/index.vue

@@ -12,7 +12,9 @@
 				    </view>
 					<!-- 协议勾选框和按钮 -->
 					<view class="agreement-checkbox-box">
-						<checkbox class="agreement-checkbox-input" color="#FFFFFF" :checked="indexData.isAgreed" @change="handleAgreementChange"/>
+						<checkbox-group @change="handleAgreementChange">
+							<checkbox class="agreement-checkbox-input" color="#FFFFFF" value="agree" :checked="indexData.isAgreed"/>
+						</checkbox-group>
 						<view class="agreement-text-box">
 						  我已阅读并同意<view class="agreement-text" @click="agreeBtn">《用户协议》</view>和<view @click="agreeBtn" class="agreement-text">《隐私政策》</view>
 						</view>
@@ -21,14 +23,31 @@
 				</view>
 				<view class="wx-btn-img"></view>
 		</view>
-	  <agreeDialog ref="agreeDialogRef"></agreeDialog>
+	  <agree-content-dialog ref="agreeContentDialogRef"></agree-content-dialog>
+	  <agree-dialog ref="agreeDialogRef"></agree-dialog>
   </view>
 </template>
 
 <script setup>
 	import {ref,reactive} from "vue"
 	import { onLoad,onReady } from '@dcloudio/uni-app';
+	import agreeContentDialog from './agreeContentDialog.vue';
 	import agreeDialog from './agreeDialog.vue'
+	// 定义复选框的选中状态
+	const isChecked = ref(false);
+	
+	// 处理复选框变化的事件
+	function onCheckboxChange(event) {
+	  // event.detail.value 会包含复选框的新状态
+	  isChecked.value = event.detail.value;
+	  
+	  // 根据新状态更新提示信息
+	  if (isChecked.value) {
+	    message.value = '选中了';
+	  } else {
+	    message.value = '未选中';
+	  }
+	}
 	
 	let indexData = reactive({
 		phoneNumber: null,
@@ -37,12 +56,13 @@
 		isAgreed: false,
 		sliderObj:{},
 	})
+	const agreeContentDialogRef = ref(null);
 	const agreeDialogRef = ref(null);
 
 	onLoad((options) => {})
 	
 	const getYzmBtn = () => {
-			
+			// agreeDialogRef.value.handleShow();
 		uni.navigateTo({
 			url: `/pages/login/login?telNum=${indexData.phoneNumber}`
 		})
@@ -75,14 +95,14 @@
 	}
 	
 	const agreeBtn = () => {
-		agreeDialogRef.value.handleShow();
+		agreeContentDialogRef.value.handleShow();
 	};
 
 	const handleAgreementChange= (event) => {
-		console.log(event,'event');
-
-		/* if(indexData.isAgreed){
-			indexData.isAgreed = !indexData.isAgreed;
-		} */
+		if(event.detail.value[0]==='agree'){
+			indexData.isAgreed = true;
+		}else{
+			indexData.isAgreed = false;
+		}
 	}
 </script>

pages/login/sliderDialog.vue

@@ -0,0 +1,70 @@
+<template>
+	<uni-popup ref="sliderPopup" :animation="false" :is-mask-click="false"
+	  mask-background-color="rgba(255, 255, 255, 0.6);">
+	  <view class="slider-check-dialog">
+		  <view class="slider-check-content">
+			<text>请通过滑块验证</text>
+			<view id="yzm-slider"></view>
+			<view @click="sliderClose">关闭</view>
+		  </view>
+	  </view>
+	</uni-popup>
+</template>
+
+<script setup>
+	import {ref,reactive} from "vue"
+	const sliderPopup = ref(null); // 索引
+	let sliderObj = reactive({
+		sessionId:'',
+		sig:'',
+		token:'',
+	})
+	
+	const getAWSC = () => {
+		AWSC.use("nc", function (state, module) {
+		                // 初始化
+		    window.nc = module.init({
+		            // 应用类型标识。它和使用场景标识（scene字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的appkey字段值，请务必正确填写。
+		            appkey: "FFFF0N00000000007EC0",
+		            //使用场景标识。它和应用类型标识（appkey字段）一起决定了滑动验证的业务场景与后端对应使用的策略模型。您可以在阿里云验证码控制台的配置管理页签找到对应的scene值，请务必正确填写。
+		            scene: "nc_message_h5",
+		            // 声明滑动验证需要渲染的目标ID。
+		            renderTo: "yzm-slider",
+		            //前端滑动验证通过时会触发该回调参数。您可以在该回调参数中将会话ID（sessionId）、签名串（sig）、请求唯一标识（token）字段记录下来，随业务请求一同发送至您的服务端调用验签。
+		            success: function (item) {
+						console.log(item,'item')
+					
+						// sliderObj.sessionId = item.sessionId
+						// sliderObj.sig = item.sig
+						// sliderObj.token = item.token
+						// Object.assign(sliderObj,item)
+						// console.log(sliderObj)
+		            },
+		            // 滑动验证失败时触发该回调参数。
+		            fail: function (failCode) {
+		                window.console && console.log('失败：'+failCode)
+		            },
+		            // 验证码加载出现异常时触发该回调参数。
+		            error: function (errorCode) {
+		                window.console && console.log('异常：'+ errorCode)
+		            }
+		        });
+		    })
+	}
+	
+	// 打开弹窗
+	function sliderShow() {
+		getAWSC();
+		sliderPopup.value.open();
+	}
+	// 关闭弹窗
+	function sliderClose() {
+		sliderPopup.value.close();
+	}
+	defineExpose({
+		sliderShow
+	})
+</script>
+
+<style>
+</style>