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

调整样式

Browse Source
This commit is contained in:
Zy
2026-05-12 17:43:34 +08:00
parent 94efe74695
commit 0c25889ad6
1 changed files with 359 additions and 336 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -8,24 +8,49 @@
<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>
<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
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
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
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">
<button
class="get-verify-btn"
:disabled="!canGetVerify || countDown > 0"
@click="getVerifyCode"
>
{{ countDown > 0 ? `${countDown}s后重新获取` : '获取验证码' }}
</button>
</view>
@@ -33,19 +58,23 @@
<!-- 协议勾选 -->
<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-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="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">
@@ -56,28 +85,21 @@
</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 phoneNumber = ref('')
// 验证码
const verifyCode = ref('');
const verifyCode = ref('')
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)
@@ -85,39 +107,41 @@
// 是否可以获取验证码（手机号格式正确）
const canGetVerify = computed(() => {
// 手机号正则：11位数字，以1开头
const phoneReg = /^1[3-9]\d{9}$/;
return phoneReg.test(phoneNumber.value);
});
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 phoneReg = /^1[3-9]\d{9}$/
const verifyReg = /^\d{6}$/
return (
phoneReg.test(phoneNumber.value) && verifyReg.test(verifyCode.value) && agreeAgreement.value
)
})
// ========== 方法 ==========
// 检查表单状态
const checkForm = () => {
// 无需额外逻辑，计算属性已实时监听
};
}
// 切换协议勾选状态
const toggleAgreement = () => {
agreeAgreement.value = !agreeAgreement.value;
};
agreeAgreement.value = !agreeAgreement.value
}
// 跳转隐私协议
const goToPrivacy = () => {
// 点击变色
// isClicked.value = true
uni.navigateTo({
url:'/pageSubPack/loginSub/privacy',
url: '/pageSubPack/loginSub/privacy'
})
}
// 获取验证码
const getVerifyCode = () => {
if (!canGetVerify.value) return;
if (!canGetVerify.value) return
let params = {
phone: phoneNumber.value,
scene: 'butler_login'
@@ -125,106 +149,105 @@
uni.showLoading({
title: '发送中...',
mask: true
});
getSendCode(params).then(res => {
})
getSendCode(params)
.then(res => {
if (res.code === 200) {
uni.hideLoading();
uni.hideLoading()
uni.showToast({
title: '验证码已发送',
icon: 'success'
});
})
// 开始60秒倒计时
countDown.value = 60;
countDown.value = 60
timer = setInterval(() => {
countDown.value--;
countDown.value--
if (countDown.value <= 0) {
clearInterval(timer);
timer = null;
clearInterval(timer)
timer = null
}
}, 1000);
}, 1000)
} else {
uni.showToast({
title: '验证码发送失败',
icon: 'error'
});
})
}
}).catch(err => {
})
.catch(err => {
uni.showToast({
title: err.msg,
icon: 'error'
});
})
};
})
}
// 登录处理
const handleLogin = () => {
if (!canLogin.value) return;
if (!canLogin.value) return
uni.showLoading({
title: '登录中...',
mask: true
});
})
let params = {
phone: phoneNumber.value,
smsCode: verifyCode.value,
scene: 'butler_login',
scene: 'butler_login'
}
getLoginBySms(params).then(res => {
getLoginBySms(params)
.then(res => {
if (res.code === 200) {
if (res.data) {
uni.setStorageSync('token', res.data.token);
uni.setStorageSync('token', res.data.token)
// 存用户ID
if (res.data.userId) {
uni.setStorageSync('userId', res.data.userId);
uni.setStorageSync('userId', res.data.userId)
}
// 存当前绑定的小区ID，0 表示未绑定
const currentVillageId = res.data.currentVillageId || 0;
uni.setStorageSync('currentVillageId', currentVillageId);
uni.hideLoading();
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 => {
})
.catch(err => {
uni.showToast({
title: err.msg,
icon: 'error'
});
})
})
// 模拟登录请求
// uni.showLoading({
// title: '登录中...'
// });
};
}
// ========== 生命周期 ==========
// 页面卸载时清除定时器
onUnmounted(() => {
if (timer) {
clearInterval(timer);
clearInterval(timer)
}
});
})
</script>
<style scoped>
@@ -233,7 +256,7 @@
padding: 80rpx 40rpx 40rpx;
/* background-color: #f8f9fa; */
min-height: 100vh;
background: repeating-linear-gradient(to bottom, #E2F0FF, #F6FAFF);
background: repeating-linear-gradient(to bottom, #e2f0ff, #f6faff);
}
.status_bar {
@@ -298,7 +321,7 @@
width: 200rpx;
height: 70rpx;
line-height: 70rpx;
background-color: #4D5DFA;
background-color: #4d5dfa;
color: #fff;
border-radius: 35rpx;
font-size: 26rpx;
@@ -331,14 +354,14 @@
margin-left: 10rpx;
}
.agreePrivacy {
color: #4D5DFA;
color: #4d5dfa;
}
/* 登录按钮 */
.login-btn {
width: 100%;
height: 88rpx;
line-height: 88rpx;
background-color: #4D5DFA;
background-color: #4d5dfa;
color: #fff;
border-radius: 8rpx;
font-size: 28rpx;
@@ -367,7 +390,7 @@
/* 链接项 */
.link-item {
font-size: 28rpx;
color: #4D5DFA;
color: #4d5dfa;
text-decoration: none;
}
</style>