From 0c25889ad6aae7015f5800b080c8a91ade339e8b Mon Sep 17 00:00:00 2001
From: Zy <1448159279@qq.com>
Date: Tue, 12 May 2026 17:43:34 +0800
Subject: [PATCH] =?UTF-8?q?=E8=B0=83=E6=95=B4=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../pageSubPack/loginSub/login.vue            | 695 +++++++++---------
 1 file changed, 359 insertions(+), 336 deletions(-)

diff --git a/wuye-manager-uniapp/pageSubPack/loginSub/login.vue b/wuye-manager-uniapp/pageSubPack/loginSub/login.vue
index 953d470..0890001 100644
--- a/wuye-manager-uniapp/pageSubPack/loginSub/login.vue
+++ b/wuye-manager-uniapp/pageSubPack/loginSub/login.vue
@@ -1,373 +1,396 @@
 <template>
-	<view class="login-page">
-		<view class="status_bar"></view>
-		<!-- 登录标题 -->
-		<view class="login-title">手机验证码登录</view>
+  <view class="login-page">
+    <view class="status_bar"></view>
+    <!-- 登录标题 -->
+    <view class="login-title">手机验证码登录</view>
 
-		<!-- 手机号输入框 -->
-		<view class="input-item">
-			<view class="input-icon">
-				<!-- <uni-icons type="phone" size="24" color="#999"></uni-icons> -->
-				<image src="http://47.104.199.163:9090/images/login/phone.png" mode=""
-					style="height: 100%;width: 100%;"></image>
-			</view>
-			<uni-easyinput class="input-content" type="number" v-model="phoneNumber" placeholder="请输入手机号"
-				:inputBorder="false" maxlength="11" :placeholderStyle="placeholderStyle">
-			</uni-easyinput>
-		</view>
+    <!-- 手机号输入框 -->
+    <view class="input-item">
+      <view class="input-icon">
+        <!-- <uni-icons type="phone" size="24" color="#999"></uni-icons> -->
+        <image
+          src="http://47.104.199.163:9090/images/login/phone.png"
+          mode=""
+          style="height: 100%; width: 100%"
+        ></image>
+      </view>
+      <uni-easyinput
+        class="input-content"
+        type="number"
+        v-model="phoneNumber"
+        placeholder="请输入手机号"
+        :inputBorder="false"
+        maxlength="11"
+        :placeholderStyle="placeholderStyle"
+      >
+      </uni-easyinput>
+    </view>
 
-		<!-- 验证码输入框 + 获取验证码按钮 -->
-		<view class="input-item verify-item">
-			<view class="input-icon">
-				<image src="http://47.104.199.163:9090/images/login/code.png" mode="" style="height: 100%;width: 100%;">
-				</image>
-			</view>
-			<uni-easyinput class="input-content verify-input" type="number" v-model="verifyCode" placeholder="请输入验证码"
-				:inputBorder="false" maxlength="6" :placeholderStyle="placeholderStyle">
-			</uni-easyinput>
-			<button class="get-verify-btn" :disabled="!canGetVerify || countDown > 0" @click="getVerifyCode">
-				{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
-			</button>
-		</view>
+    <!-- 验证码输入框 + 获取验证码按钮 -->
+    <view class="input-item verify-item">
+      <view class="input-icon">
+        <image
+          src="http://47.104.199.163:9090/images/login/code.png"
+          mode=""
+          style="height: 100%; width: 100%"
+        >
+        </image>
+      </view>
+      <uni-easyinput
+        class="input-content verify-input"
+        type="number"
+        v-model="verifyCode"
+        placeholder="请输入验证码"
+        :inputBorder="false"
+        maxlength="6"
+        :placeholderStyle="placeholderStyle"
+      >
+      </uni-easyinput>
+      <button
+        class="get-verify-btn"
+        :disabled="!canGetVerify || countDown > 0"
+        @click="getVerifyCode"
+      >
+        {{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
+      </button>
+    </view>
 
-		<!-- 协议勾选 -->
-		<view class="agreement-item" >
-			<view @click="toggleAgreement">
-				<uni-icons type="checkbox-filled" size="24" color="#4D5DFA" v-if="agreeAgreement"></uni-icons>
-				<uni-icons type="checkbox" size="24" color="#999" v-else></uni-icons>
-			</view>
+    <!-- 协议勾选 -->
+    <view class="agreement-item">
+      <view @click="toggleAgreement">
+        <uni-icons
+          type="checkbox-filled"
+          size="24"
+          color="#4D5DFA"
+          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">《用户隐私政策》</text>
-			</text>
-		</view>
+      <text class="agreement-text" @click.stop="goToPrivacy"
+        >我已阅读并同意
+        <text class="agreePrivacy">《用户隐私政策》</text>
+      </text>
+    </view>
 
-		<!-- 登录按钮 -->
-		<button class="login-btn" :disabled="!canLogin" @click="handleLogin">
-			登录
-		</button>
+    <!-- 登录按钮 -->
+    <button class="login-btn" :disabled="!canLogin" @click="handleLogin">登录</button>
 
-		<!-- 底部链接 -->
-		<view class="bottom-link">
-			<navigator class="link-item" url="/pageSubPack/loginSub/pwd-login">账号密码登录</navigator>
-			<!-- <navigator class="link-item" url="/pageSubPack/loginSub/register-new-user">注册新用户</navigator> -->
-		</view>
-	</view>
+    <!-- 底部链接 -->
+    <view class="bottom-link">
+      <navigator class="link-item" url="/pageSubPack/loginSub/pwd-login">账号密码登录</navigator>
+      <!-- <navigator class="link-item" url="/pageSubPack/loginSub/register-new-user">注册新用户</navigator> -->
+    </view>
+  </view>
 </template>
 
 <script setup>
-	import {
-		ref,
-		computed,
-		onUnmounted
-	} from 'vue';
-	import {
-		getLoginBySms,
-		getSendCode
-	} from '../../api/api.js'
+import { ref, computed, onUnmounted } from 'vue'
+import { getLoginBySms, getSendCode } from '../../api/api.js'
 
-	// ========== 响应式数据 ==========
-	// 手机号
-	const phoneNumber = ref('');
-	// 验证码
-	const verifyCode = ref('');
-	const placeholderStyle = ref('font-size:24rpx')
-	// 是否同意协议
-	const agreeAgreement = ref(false); // 默认勾选
-	// 倒计时（秒）
-	const countDown = ref(0);
-	// 定时器
-	let timer = null;
-	// 控制点击变色
-	// const isClicked = ref(false)
+// ========== 响应式数据 ==========
+// 手机号
+const phoneNumber = ref('')
+// 验证码
+const verifyCode = ref('')
+const placeholderStyle = ref('font-size:24rpx')
+// 是否同意协议
+const agreeAgreement = ref(false) // 默认勾选
+// 倒计时（秒）
+const countDown = ref(0)
+// 定时器
+let timer = null
+// 控制点击变色
+// const isClicked = ref(false)
 
-	// ========== 计算属性 ==========
-	// 是否可以获取验证码（手机号格式正确）
-	const canGetVerify = computed(() => {
-		// 手机号正则：11位数字，以1开头
-		const phoneReg = /^1[3-9]\d{9}$/;
-		return phoneReg.test(phoneNumber.value);
-	});
+// ========== 计算属性 ==========
+// 是否可以获取验证码（手机号格式正确）
+const canGetVerify = computed(() => {
+  // 手机号正则：11位数字，以1开头
+  const phoneReg = /^1[3-9]\d{9}$/
+  return phoneReg.test(phoneNumber.value)
+})
 
-	// 是否可以登录（手机号+验证码+协议都满足）
-	const canLogin = computed(() => {
-		const phoneReg = /^1[3-9]\d{9}$/;
-		const verifyReg = /^\d{6}$/;
-		return phoneReg.test(phoneNumber.value) && verifyReg.test(verifyCode.value) && agreeAgreement.value;
-	});
+// 是否可以登录（手机号+验证码+协议都满足）
+const canLogin = computed(() => {
+  const phoneReg = /^1[3-9]\d{9}$/
+  const verifyReg = /^\d{6}$/
+  return (
+    phoneReg.test(phoneNumber.value) && verifyReg.test(verifyCode.value) && agreeAgreement.value
+  )
+})
 
-	// ========== 方法 ==========
-	// 检查表单状态
-	const checkForm = () => {
-		// 无需额外逻辑，计算属性已实时监听
-	};
+// ========== 方法 ==========
+// 检查表单状态
+const checkForm = () => {
+  // 无需额外逻辑，计算属性已实时监听
+}
 
-	// 切换协议勾选状态
-	const toggleAgreement = () => {
-		agreeAgreement.value = !agreeAgreement.value;
-	};
-	// 跳转隐私协议
-	const goToPrivacy = () => {
-	  // 点击变色
-	  // isClicked.value = true
-	  uni.navigateTo({
-	    url:'/pageSubPack/loginSub/privacy',
-	  })
-	}
+// 切换协议勾选状态
+const toggleAgreement = () => {
+  agreeAgreement.value = !agreeAgreement.value
+}
+// 跳转隐私协议
+const goToPrivacy = () => {
+  // 点击变色
+  // isClicked.value = true
+  uni.navigateTo({
+    url: '/pageSubPack/loginSub/privacy'
+  })
+}
 
-	// 获取验证码
-	const getVerifyCode = () => {
-		if (!canGetVerify.value) return;
-		let params = {
-			phone: phoneNumber.value,
-			scene: 'butler_login'
-		}
-		uni.showLoading({
-			title: '发送中...',
-			mask: true
-		});
-		getSendCode(params).then(res => {
-			if (res.code === 200) {
-				uni.hideLoading();
-				uni.showToast({
-					title: '验证码已发送',
-					icon: 'success'
-				});
-				// 开始60秒倒计时
-				countDown.value = 60;
-				timer = setInterval(() => {
-					countDown.value--;
-					if (countDown.value <= 0) {
-						clearInterval(timer);
-						timer = null;
-					}
-				}, 1000);
-			} else {
-				uni.showToast({
-					title: '验证码发送失败',
-					icon: 'error'
-				});
-			}
-		}).catch(err => {
-			uni.showToast({
-				title: err.msg,
-				icon: 'error'
-			});
-		})
+// 获取验证码
+const getVerifyCode = () => {
+  if (!canGetVerify.value) return
+  let params = {
+    phone: phoneNumber.value,
+    scene: 'butler_login'
+  }
+  uni.showLoading({
+    title: '发送中...',
+    mask: true
+  })
+  getSendCode(params)
+    .then(res => {
+      if (res.code === 200) {
+        uni.hideLoading()
+        uni.showToast({
+          title: '验证码已发送',
+          icon: 'success'
+        })
+        // 开始60秒倒计时
+        countDown.value = 60
+        timer = setInterval(() => {
+          countDown.value--
+          if (countDown.value <= 0) {
+            clearInterval(timer)
+            timer = null
+          }
+        }, 1000)
+      } else {
+        uni.showToast({
+          title: '验证码发送失败',
+          icon: 'error'
+        })
+      }
+    })
+    .catch(err => {
+      uni.showToast({
+        title: err.msg,
+        icon: 'error'
+      })
+    })
+}
 
-	};
+// 登录处理
+const handleLogin = () => {
+  if (!canLogin.value) return
+  uni.showLoading({
+    title: '登录中...',
+    mask: true
+  })
+  let params = {
+    phone: phoneNumber.value,
+    smsCode: verifyCode.value,
+    scene: 'butler_login'
+  }
+  getLoginBySms(params)
+    .then(res => {
+      if (res.code === 200) {
+        if (res.data) {
+          uni.setStorageSync('token', res.data.token)
+          // 存用户ID
+          if (res.data.userId) {
+            uni.setStorageSync('userId', res.data.userId)
+          }
+          // 存当前绑定的小区ID，0 表示未绑定
+          const currentVillageId = res.data.currentVillageId || 0
+          uni.setStorageSync('currentVillageId', currentVillageId)
+          uni.hideLoading()
+          uni.showToast({
+            title: '登录成功',
+            icon: 'success'
+          })
+          setTimeout(() => {
+            uni.switchTab({
+              url: '/pages/index/index'
+            })
+          }, 1500)
+        } else {
+          uni.showToast({
+            title: '登录失败',
+            icon: 'error'
+          })
+        }
+      } else {
+        uni.showToast({
+          title: '登录失败',
+          icon: 'error'
+        })
+      }
+    })
+    .catch(err => {
+      uni.showToast({
+        title: err.msg,
+        icon: 'error'
+      })
+    })
+  // 模拟登录请求
+  // uni.showLoading({
+  //   title: '登录中...'
+  // });
+}
 
-	// 登录处理
-	const handleLogin = () => {
-		if (!canLogin.value) return;
-		uni.showLoading({
-			title: '登录中...',
-			mask: true
-		});
-		let params = {
-			phone: phoneNumber.value,
-			smsCode: verifyCode.value,
-			scene: 'butler_login',
-		}
-		getLoginBySms(params).then(res => {
-			if (res.code === 200) {
-				if (res.data) {
-					uni.setStorageSync('token', res.data.token);
-					// 存用户ID
-					if (res.data.userId) {
-						uni.setStorageSync('userId', res.data.userId);
-					}
-					// 存当前绑定的小区ID，0 表示未绑定
-					const currentVillageId = res.data.currentVillageId || 0;
-					uni.setStorageSync('currentVillageId', currentVillageId);
-					uni.hideLoading();
-					uni.showToast({
-						title: '登录成功',
-						icon: 'success'
-					});
-					setTimeout(() => {
-						uni.switchTab({
-							url: '/pages/index/index'
-						});
-					}, 1500)
-				} else {
-					uni.showToast({
-						title: '登录失败',
-						icon: 'error'
-					});
-				}
-
-			} else {
-				uni.showToast({
-					title: '登录失败',
-					icon: 'error'
-				});
-			}
-
-		}).catch(err => {
-			uni.showToast({
-				title: err.msg,
-				icon: 'error'
-			});
-		})
-
-
-		// 模拟登录请求
-		// uni.showLoading({
-		//   title: '登录中...'
-		// });
-	};
-
-	// ========== 生命周期 ==========
-	// 页面卸载时清除定时器
-	onUnmounted(() => {
-		if (timer) {
-			clearInterval(timer);
-		}
-	});
+// ========== 生命周期 ==========
+// 页面卸载时清除定时器
+onUnmounted(() => {
+  if (timer) {
+    clearInterval(timer)
+  }
+})
 </script>
 
 <style scoped>
-	/* 页面容器 */
-	.login-page {
-		padding: 80rpx 40rpx 40rpx;
-		/* background-color: #f8f9fa; */
-		min-height: 100vh;
-		background: repeating-linear-gradient(to bottom, #E2F0FF, #F6FAFF);
-	}
+/* 页面容器 */
+.login-page {
+  padding: 80rpx 40rpx 40rpx;
+  /* background-color: #f8f9fa; */
+  min-height: 100vh;
+  background: repeating-linear-gradient(to bottom, #e2f0ff, #f6faff);
+}
 
-	.status_bar {
-		height: 160px;
-		width: 100%;
-	}
+.status_bar {
+  height: 160px;
+  width: 100%;
+}
 
-	/* 登录标题 */
-	.login-title {
-		font-size: 52rpx;
-		font-weight: 600;
-		color: #333;
-		text-align: center;
-		margin-bottom: 142rpx;
-	}
+/* 登录标题 */
+.login-title {
+  font-size: 52rpx;
+  font-weight: 600;
+  color: #333;
+  text-align: center;
+  margin-bottom: 142rpx;
+}
 
-	/* 输入框项 */
-	.input-item {
-		display: flex;
-		align-items: center;
-		background-color: #fff;
-		border-radius: 40rpx;
-		padding: 0 30rpx;
-		height: 88rpx;
-		margin-bottom: 30rpx;
-		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
-	}
+/* 输入框项 */
+.input-item {
+  display: flex;
+  align-items: center;
+  background-color: #fff;
+  border-radius: 40rpx;
+  padding: 0 30rpx;
+  height: 88rpx;
+  margin-bottom: 30rpx;
+  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
+}
 
-	/* 验证码输入项（特殊布局） */
-	.verify-item {
-		position: relative;
-		padding-right: 220rpx;
-	}
+/* 验证码输入项（特殊布局） */
+.verify-item {
+  position: relative;
+  padding-right: 220rpx;
+}
 
-	/* 输入框图标 */
-	.input-icon {
-		width: 50rpx;
-		height: 50rpx;
-		margin-right: 20rpx;
-		color: #999;
-	}
+/* 输入框图标 */
+.input-icon {
+  width: 50rpx;
+  height: 50rpx;
+  margin-right: 20rpx;
+  color: #999;
+}
 
-	/* 输入框内容 */
-	.input-content {
-		flex: 1;
-		font-size: 32rpx;
-		color: #333;
-		height: 100%;
-	}
+/* 输入框内容 */
+.input-content {
+  flex: 1;
+  font-size: 32rpx;
+  color: #333;
+  height: 100%;
+}
 
-	/* 验证码输入框 */
-	.verify-input {
-		padding-right: 20rpx;
-	}
+/* 验证码输入框 */
+.verify-input {
+  padding-right: 20rpx;
+}
 
-	/* 获取验证码按钮 */
-	.get-verify-btn {
-		position: absolute;
-		right: 10rpx;
-		top: 50%;
-		transform: translateY(-50%);
-		width: 200rpx;
-		height: 70rpx;
-		line-height: 70rpx;
-		background-color: #4D5DFA;
-		color: #fff;
-		border-radius: 35rpx;
-		font-size: 26rpx;
-		padding: 0;
-		margin: 0;
-	}
+/* 获取验证码按钮 */
+.get-verify-btn {
+  position: absolute;
+  right: 10rpx;
+  top: 50%;
+  transform: translateY(-50%);
+  width: 200rpx;
+  height: 70rpx;
+  line-height: 70rpx;
+  background-color: #4d5dfa;
+  color: #fff;
+  border-radius: 35rpx;
+  font-size: 26rpx;
+  padding: 0;
+  margin: 0;
+}
 
-	/* 获取验证码按钮禁用状态 */
-	.get-verify-btn:disabled {
-		background-color: #ccc;
-		color: #fff;
-		border-radius: 50px;
-	}
-  .get-verify-btn:after{
-      border-radius: 50px;
-  }
+/* 获取验证码按钮禁用状态 */
+.get-verify-btn:disabled {
+  background-color: #ccc;
+  color: #fff;
+  border-radius: 50px;
+}
+.get-verify-btn:after {
+  border-radius: 50px;
+}
 
-	/* 协议勾选项 */
-	.agreement-item {
-		display: flex;
-		align-items: center;
-		margin: 70rpx 0 28rpx 0;
-		padding-left: 10rpx;
-	}
+/* 协议勾选项 */
+.agreement-item {
+  display: flex;
+  align-items: center;
+  margin: 70rpx 0 28rpx 0;
+  padding-left: 10rpx;
+}
 
-	/* 协议文本 */
-	.agreement-text {
-		font-size: 24rpx;
-		color: #666;
-		margin-left: 10rpx;
-	}
-	.agreePrivacy{
-		color: #4D5DFA;
-	}
-	/* 登录按钮 */
-	.login-btn {
-		width: 100%;
-		height: 88rpx;
-		line-height: 88rpx;
-		background-color: #4D5DFA;
-		color: #fff;
-		border-radius: 8rpx;
-		font-size: 28rpx;
-		margin-bottom: 40rpx;
-	}
+/* 协议文本 */
+.agreement-text {
+  font-size: 24rpx;
+  color: #666;
+  margin-left: 10rpx;
+}
+.agreePrivacy {
+  color: #4d5dfa;
+}
+/* 登录按钮 */
+.login-btn {
+  width: 100%;
+  height: 88rpx;
+  line-height: 88rpx;
+  background-color: #4d5dfa;
+  color: #fff;
+  border-radius: 8rpx;
+  font-size: 28rpx;
+  margin-bottom: 40rpx;
+}
 
-	/* 登录按钮禁用状态 */
-	.login-btn:disabled {
-		background-color: #99c8ff;
-		color: #fff;
-		/* border-radius: 50px; */
-	}
+/* 登录按钮禁用状态 */
+.login-btn:disabled {
+  background-color: #99c8ff;
+  color: #fff;
+  /* border-radius: 50px; */
+}
 
-	/* 禁用按钮边框 */
-	button:after {
-		border-radius: 8px;
-	}
+/* 禁用按钮边框 */
+button:after {
+  border-radius: 8px;
+}
 
-	/* 底部链接 */
-	.bottom-link {
-		display: flex;
-		justify-content: center;
-		padding: 0 20rpx;
-	}
+/* 底部链接 */
+.bottom-link {
+  display: flex;
+  justify-content: center;
+  padding: 0 20rpx;
+}
 
-	/* 链接项 */
-	.link-item {
-		font-size: 28rpx;
-		color: #4D5DFA;
-		text-decoration: none;
-	}
+/* 链接项 */
+.link-item {
+  font-size: 28rpx;
+  color: #4d5dfa;
+  text-decoration: none;
+}
 </style>