zhouyanli/property-manager-side
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge branch 'master' of http://gitea.bugtc.com/zhouyanli/property-manager-side

Browse Source
This commit is contained in:
zhouyanli
2026-05-13 17:49:16 +08:00
parent 7e5ee9d4e0 c590724ec4
commit 750260e21c
1 changed files with 436 additions and 353 deletions
Download Patch File Download Diff File Expand all files Collapse all files

445
wuye-manager-uniapp/pageSubPack/loginSub/login.vue
View File

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