新增用户隐私协议

2026-04-28 08:50:00 +08:00
parent 5936da5547
commit d02af4a8b4
5 changed files with 199 additions and 117 deletions
--- a/property-uniapp-project/pageSubPack/loginSub/login.vue
+++ b/property-uniapp-project/pageSubPack/loginSub/login.vue
@@ -49,20 +49,22 @@
    </view>

    <!-- 协议勾选 -->
-    <view class="agreement-item" @click="toggleAgreement">
-      <uni-icons
-        type="checkbox-filled"
-        size="24"
-        color="#007aff"
-        v-if="agreeAgreement"
-      ></uni-icons>
-      <uni-icons
-        type="checkbox"
-        size="24"
-        color="#999"
-        v-else
-      ></uni-icons>
-      <text class="agreement-text">我已阅读并同意《用户隐私政策》</text>
+    <view class="agreement-item" >
+		<view @click="toggleAgreement">
+			<uni-icons
+			  type="checkbox-filled"
+			  size="24"
+			  color="#007aff"
+			  v-if="agreeAgreement"
+			></uni-icons>
+			<uni-icons
+			  type="checkbox"
+			  size="24"
+			  color="#999"
+			  v-else
+			></uni-icons>
+		</view>
+      <text class="agreement-text" @click.stop="goToPrivacy">我已阅读并同意<text class="agreePrivacy" :class="{active:isClicked}">《用户隐私政策》</text></text>
    </view>

    <!-- 登录按钮 -->
@@ -98,6 +100,8 @@ const agreeAgreement = ref(false); // 默认勾选
 const countDown = ref(0);
 // 定时器
 let timer = null;
+// 控制点击变色
+const isClicked = ref(false)

 // ========== 计算属性 ==========
 // 是否可以获取验证码（手机号格式正确）
@@ -124,6 +128,14 @@ const checkForm = () => {
 const toggleAgreement = () => {
  agreeAgreement.value = !agreeAgreement.value;
 };
+// 跳转隐私协议
+const goToPrivacy = () => {
+  // 点击变色
+  isClicked.value = true
+  uni.navigateTo({
+    url:'/pageSubPack/loginSub/privacy',
+  })
+}

 // 获取验证码
 const getVerifyCode = () => {
@@ -167,7 +179,7 @@ const getVerifyCode = () => {
 // 登录处理
 const handleLogin = () => {
  if (!canLogin.value) return;
-   uni.showLoading({ title: '登录中...', mask: true });
+   // uni.showLoading({ title: '登录中...', mask: true });
  let params = {
 	phone:phoneNumber.value,
 	smsCode:'123456',
@@ -327,7 +339,12 @@ onUnmounted(() => {
  color: #666;
  margin-left: 10rpx;
 }
-
+.agreePrivacy{
+	color: #666;
+}
+.agreePrivacy.active{
+	color: #2F77FD;
+}
 /* 登录按钮 */
 .login-btn {
  width: 100%;
--- a/property-uniapp-project/pageSubPack/loginSub/pwd-login.vue
+++ b/property-uniapp-project/pageSubPack/loginSub/pwd-login.vue
@@ -29,20 +29,25 @@

    <!-- 协议勾选 + 忘记密码 -->
    <view class="agreement-wrap">
-      <view class="agreement-item" @click="toggleAgreement">
-        <uni-icons
-          type="checkbox-filled"
-          size="24"
-          color="#007aff"
-          v-if="agreeAgreement"
-        ></uni-icons>
-        <uni-icons
-          type="checkbox"
-          size="24"
-          color="#999"
-          v-else
-        ></uni-icons>
-        <text class="agreement-text">我已阅读并同意《用户隐私政策》</text>
+      <view class="agreement-item">
+		  <view @click="toggleAgreement">
+			 <uni-icons
+			   type="checkbox-filled"
+			   size="24"
+			   color="#007aff"
+			   v-if="agreeAgreement"
+			 ></uni-icons>
+			 <uni-icons
+			   type="checkbox"
+			   size="24"
+			   color="#999"
+			   v-else
+			 ></uni-icons> 
+		  </view>
+   
+        <text class="agreement-text" @click.stop="goToPrivacy">我已阅读并同意
+			<text  class="agreePrivacy" :class="{ active:isClicked }">《用户隐私政策》</text>
+		</text>
      </view>
      <navigator class="forget-pwd" url="/pageSubPack/loginSub/forget-pwd">忘记密码？</navigator>
    </view>
@@ -74,6 +79,8 @@ const phoneNumber = ref('');
 const password = ref('');
 const agreeAgreement = ref(false); // 默认勾选
 const placeholderStyle = ref('font-size:24rpx')
+// 控制点击变色
+const isClicked = ref(false)

 // 计算属性：是否可登录（帐号+密码+协议都满足）
 const canLogin = computed(() => {
@@ -87,6 +94,15 @@ const toggleAgreement = () => {
  agreeAgreement.value = !agreeAgreement.value;
 };

+// 跳转隐私协议
+const goToPrivacy = () => {
+  // 点击变色
+  isClicked.value = true
+  uni.navigateTo({
+    url:'/pageSubPack/loginSub/privacy',
+  })
+}
+
 // 检查表单
 const checkForm = () => {};

@@ -113,7 +129,7 @@ const handleLogin = () => {
 	  uni.showToast({ title: '请勾选协议', icon: 'none' });
 	  return;
  }
-   uni.showLoading({ title: '登录中...', mask: true });
+   // uni.showLoading({ title: '登录中...', mask: true });
  	let params = {
  		username:phoneNumber.value,
  		password:password.value
@@ -220,6 +236,12 @@ const handleLogin = () => {
  color: #666;
  margin-left: 10rpx;
 }
+.agreePrivacy{
+	color: #666;
+}
+.agreePrivacy.active{
+	color: #2F77FD;
+}

 .forget-pwd {
  font-size: 28rpx;
--- a/property-uniapp-project/pageSubPack/visitor/visitor-add.vue
+++ b/property-uniapp-project/pageSubPack/visitor/visitor-add.vue
@@ -1,11 +1,5 @@
 <template>
  <view class="visitor-invite">
-    <!-- 顶部导航 -->
-    <!-- <view class="nav-bar">
-      <uni-icons type="left" size="20" color="#000" @click="navigateBack"></uni-icons>
-      <view class="nav-title">访客邀请</view>
-    </view> -->
-
    <!-- 标签切换：车辆来访/人员来访 -->
    <view class="tab-wrap">
      <view 
@@ -27,8 +21,8 @@
    <!-- 表单区域 -->
    <view class="form-wrap">
      <!-- 房屋信息 -->
+	  <view class="section-title">房屋信息</view>
      <view class="form-section">
-        <view class="section-title">房屋信息</view>
        <view class="form-item">
          <view class="label">
            <text class="required">*</text>来访地址
@@ -41,8 +35,9 @@
      </view>

      <!-- 访客信息 -->
+	   <view class="section-title">访客信息</view>
      <view class="form-section">
-        <view class="section-title">访客信息</view>
+       
        <view class="form-item">
          <view class="label">访客姓名</view>
          <input 
@@ -103,14 +98,15 @@
      </view>

      <!-- 有效期 -->
+	   <view class="section-title">有效期</view>
      <view class="form-section">
-        <view class="section-title">有效期</view>
+       
        <view class="form-item">
          <view class="label">
            <text class="required">*</text>来访时间
          </view>
          <view class="value">
-            <uni-datetime-picker type="datetime" v-model="visitTime" @change="changeLog" :border="false"/>
+            <uni-datetime-picker type="datetime" v-model="form.visitTime" @change="handleTimeChange('visit')" :border="false"/>
          </view>
        </view>
        <view class="form-item">
@@ -118,11 +114,11 @@
            <text class="required">*</text>离开时间
          </view>
          <view class="value">
-            <uni-datetime-picker type="datetime" v-model="leaveTime" @change="changeLog" :border="false"/>
+            <uni-datetime-picker type="datetime" v-model="form.leaveTime" @change="handleTimeChange('leave')" :border="false"/>
          </view>
        </view>
        <view class="tips">预计来访时间和预计离开时间间隔不能超过24小时</view>
-        <view class="tips">车辆停留请勿超出有效期，需及时驶出小区</view>
+        <view class="tips-2">车辆停留请勿超出有效期，需及时驶出小区</view>
      </view>
    </view>

@@ -176,31 +172,30 @@
        </view>
      </view>
    </uni-popup>
-
- 
  </view>
 </template>

 <script setup>
 import { ref, reactive} from 'vue';
 import{onLoad } from "@dcloudio/uni-app"
+import moment from 'moment';

 // 标签激活状态
 const activeTab = ref('car');

-// 表单数据
+// 表单数据（完全保留原有默认值）
 const form = reactive({
-  address: '桂花园（别墅）2号楼2层', // 来访地址默认值
-  name: '', // 访客姓名
-  gender: '男', // 性别默认值
-  phone: '', // 联系方式
-  carNumber: ['', '', '', '', '', '', ''], // 车牌号（7位）
-  peopleNum: '', // 随行人数
-  visitTime: '', // 来访时间默认值
-  leaveTime: '' // 离开时间
+  address: '', 
+  name: '', 
+  gender: '', 
+  phone: '', 
+  carNumber: ['', '', '', '', '', '', ''], 
+  peopleNum: '', 
+  visitTime: '', 
+  leaveTime: '' 
 });

-// 地址列表（模拟数据）
+// 地址列表（原数据不变）
 const addressList = ref([
  '桂花园（别墅）1号楼1层',
  '桂花园（别墅）2号楼2层'
@@ -209,31 +204,23 @@ const addressList = ref([
 // 性别列表
 const genderList = ref(['男', '女']);

-// 弹窗/选择器实例
+// 弹窗实例
 const addressModalRef = ref(null);
 const genderModalRef = ref(null);
-const timePickerRef = ref(null);
-// 标记当前选择的是来访/离开时间
-const currentTimeType = ref('');

 // 页面初始化
 onLoad(() => {
-  // 可在这里请求接口获取地址/默认时间等数据
+  // 用moment设置默认时间，格式与原逻辑一致
+  // const now = moment();
+  // form.visitTime = now.format('YYYY-MM-DD HH:mm');
+  // 默认离开时间为1小时后
+  // form.leaveTime = now.clone().add(1, 'hours').format('YYYY-MM-DD HH:mm');
 });
+
 // 切换tab
 const switchTab = (tab) => {
  activeTab.value = tab;
-  // 切换Tab后重置表单
  resetForm();
-  // nextTick(() =>{
-	 
-  // })
- 
-};
-
-// 返回上一页
-const navigateBack = () => {
-  uni.navigateBack();
 };

 // 打开地址弹窗
@@ -263,32 +250,69 @@ const selectGender = (item) => {
  genderModalRef.value.close();
 };

-// 打开时间选择器
-// const openTimePicker = (type) => {
-//   currentTimeType.value = type;
-//   timePickerRef.value.open();
-// };
-
-
-
-// 校验来访/离开时间间隔
-const checkTimeInterval = () => {
+// 用moment处理时间
+const handleTimeChange = (type) => {
  if (!form.visitTime || !form.leaveTime) return;
-  const visitTime = new Date(form.visitTime).getTime();
-  const leaveTime = new Date(form.leaveTime).getTime();
-  const diffHours = (leaveTime - visitTime) / (1000 * 60 * 60);
+  
+  const visitMoment = moment(form.visitTime);
+  const leaveMoment = moment(form.leaveTime);
+
+  // 校验1：离开时间不能早于来访时间
+  if (leaveMoment.isBefore(visitMoment)) {
+    uni.showToast({
+      title: '离开时间不能早于来访时间',
+      icon: 'none'
+    });
+    form.leaveTime = visitMoment.clone().add(1, 'hours').format('YYYY-MM-DD HH:mm');
+    return;
+  }
+
+  // 校验2：间隔不超过24小时
+  const diffHours = leaveMoment.diff(visitMoment, 'hours', true);
  if (diffHours > 24) {
    uni.showToast({
      title: '时间间隔不能超过24小时',
      icon: 'none'
    });
-    form.leaveTime = '';
+    form.leaveTime = visitMoment.clone().add(24, 'hours').format('YYYY-MM-DD HH:mm');
  }
 };

-// 表单提交
+// 提交前时间校验
+const checkTimeInterval = () => {
+  if (!form.visitTime) {
+    uni.showToast({ title: '请选择来访时间', icon: 'none' });
+    return false;
+  }
+  if (!form.leaveTime) {
+    uni.showToast({ title: '请选择离开时间', icon: 'none' });
+    return false;
+  }
+
+  const visitMoment = moment(form.visitTime);
+  const leaveMoment = moment(form.leaveTime);
+
+  if (!visitMoment.isValid() || !leaveMoment.isValid()) {
+    uni.showToast({ title: '时间格式错误，请重新选择', icon: 'none' });
+    return false;
+  }
+
+  if (leaveMoment.isBefore(visitMoment)) {
+    uni.showToast({ title: '离开时间不能早于来访时间', icon: 'none' });
+    return false;
+  }
+
+  const diffHours = leaveMoment.diff(visitMoment, 'hours', true);
+  if (diffHours > 24) {
+    uni.showToast({ title: '时间间隔不能超过24小时', icon: 'none' });
+    return false;
+  }
+
+  return true;
+};
+
+// 表单提交（仅替换时间校验逻辑，其余完全不变）
 const submitForm = () => {
-  // 必填项校验
  if (!form.phone) {
    uni.showToast({ title: '请输入访客联系方式', icon: 'none' });
    return;
@@ -297,7 +321,7 @@ const submitForm = () => {
    uni.showToast({ title: '请输入正确的手机号', icon: 'none' });
    return;
  }
-  if (activeTab === 'car' && form.carNumber.join('').length < 8) {
+  if (activeTab === 'car' && form.carNumber.join('').length < 7) {
    uni.showToast({ title: '请填写完整车牌号', icon: 'none' });
    return;
  }
@@ -309,10 +333,10 @@ const submitForm = () => {
    uni.showToast({ title: '请选择离开时间', icon: 'none' });
    return;
  }
-    checkTimeInterval();
-    if (!form.leaveTime) return; // 时间校验失败则终止提交
+  
+  // 时间校验
+  if (!checkTimeInterval()) return;

-  // 提交逻辑（替换为实际接口请求）
  uni.showLoading({ title: '提交中...' });
  setTimeout(() => {
    uni.hideLoading();
@@ -321,22 +345,22 @@ const submitForm = () => {
      icon: 'success'
    });
  }, 1000);
- 
 };
- // 重置表单
-  const resetForm = () => {
-    form.address = '';
-    form.name = '';
-    form.gender = '';
-    form.phone = '';
-    form.carNumber = '';
-    form.escortNum = '';
-    form.visitTime = '';
-    form.leaveTime = '';
-    form.carNumber = ['', '', '', '', '', '', '']; // 重置车牌号输入
-  };
+
+// 重置表单
+const resetForm = () => {
+  form.address = '';
+  form.name = '';
+  form.gender = '';
+  form.phone = '';
+  form.carNumber = ['', '', '', '', '', '', ''];
+  form.peopleNum = '';
+  form.visitTime = '';
+  form.leaveTime = '';
+};
 </script>

+
 <style scoped>
 .visitor-invite {
  background-color: #f5f5f5;
@@ -385,22 +409,23 @@ const submitForm = () => {
  padding: 20rpx 40rpx;
 }
 .section-title {
-  font-size: 32rpx;
+  font-size: 28rpx;
  font-weight: 500;
-  margin-bottom: 20rpx;
+  /* margin-bottom: 20rpx; */
+  margin: 30rpx 40rpx 10rpx;
 }
 .form-item {
  display: flex;
  align-items: center;
-  padding: 20rpx 0;
+  padding: 30rpx 0;
  border-bottom: 1rpx solid #f0f0f0;
 }
 .form-item:last-child {
  border-bottom: none;
 }
 .label {
-  width: 200rpx;
-  font-size: 30rpx;
+  width: 205rpx;
+  font-size: 32rpx;
  color: #333;
 }
 .required {
@@ -440,13 +465,19 @@ const submitForm = () => {
 .tips {
  font-size: 24rpx;
  color: #999;
-  margin-top: 10rpx;
+  margin-top: 44rpx;
  text-align: center;
 }
+.tips-2{
+	font-size: 24rpx;
+	color: #999;
+	margin: 20rpx;
+	text-align: center;
+}

 /* 底部按钮 */
 .btn-wrap {
-  padding: 20rpx;
+	padding: 20rpx 40rpx 50rpx;
 }
 .submit-btn {
  background-color: #007aff;