366 lines
8.1 KiB
Vue
366 lines
8.1 KiB
Vue
|
<!-- 智慧社区登录页 - 严格还原蓝湖设计图 -->
|
|||
|
|
<template>
|
|||
|
|
<view class="login-page">
|
|||
|
|
<!-- 状态栏占位 -->
|
|||
|
|
<view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>
|
|||
|
|
|
|||
|
|
<!-- 顶部Logo区域 -->
|
|||
|
|
<view class="logo-section">
|
|||
|
|
<image class="logo-img" src="/static/img/login_img.png" mode="aspectFit"></image>
|
|||
|
|
<text class="logo-title">智慧社区</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 表单区域 -->
|
|||
|
|
<view class="form-section">
|
|||
|
|
<!-- 手机号输入框 -->
|
|||
|
|
<view class="input-wrapper">
|
|||
|
|
<input
|
|||
|
|
class="form-input"
|
|||
|
|
type="number"
|
|||
|
|
maxlength="11"
|
|||
|
|
placeholder="请输入账号/手机号"
|
|||
|
|
placeholder-class="input-placeholder"
|
|||
|
|
v-model="formData.mobile"
|
|||
|
|
/>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 验证码输入框 -->
|
|||
|
|
<view class="input-wrapper">
|
|||
|
|
<input
|
|||
|
|
class="form-input"
|
|||
|
|
type="number"
|
|||
|
|
maxlength="4"
|
|||
|
|
placeholder="请输入验证码"
|
|||
|
|
placeholder-class="input-placeholder"
|
|||
|
|
v-model="formData.code"
|
|||
|
|
/>
|
|||
|
|
<view
|
|||
|
|
class="code-btn"
|
|||
|
|
:class="{ 'code-btn-disabled': !canSendCode }"
|
|||
|
|
@tap="handleSendCode"
|
|||
|
|
>
|
|||
|
|
{{ codeBtnText }}
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 登录按钮 -->
|
|||
|
|
<view class="login-btn" @tap="handleLogin">
|
|||
|
|
<text class="btn-text">登陆</text>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 隐私协议 -->
|
|||
|
|
<view class="agreement-box" @tap="toggleAgreement">
|
|||
|
|
<view class="checkbox" :class="{ checked: agreed }">
|
|||
|
|
<text v-if="agreed" class="check-icon">✓</text>
|
|||
|
|
</view>
|
|||
|
|
<text class="agreement-text">已充分阅读并同意隐私政策和用户协议</text>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
|
|||
|
|
<!-- 底部微信登录 -->
|
|||
|
|
<view class="wechat-login" @tap="wechatLogin">
|
|||
|
|
<image class="wechat-icon" src="/static/img/wx-icon.png" mode="aspectFit"></image>
|
|||
|
|
</view>
|
|||
|
|
</view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup>
|
|||
|
|
import { ref, reactive, computed } from 'vue';
|
|||
|
|
import { onLoad } from '@dcloudio/uni-app';
|
|||
|
|
import sheep from '@/sheep';
|
|||
|
|
import AuthUtil from '@/sheep/api/member/auth';
|
|||
|
|
import { getSmsTimer } from '@/sheep/hooks/useModal';
|
|||
|
|
|
|||
|
|
// 状态栏高度
|
|||
|
|
const statusBarHeight = ref(0);
|
|||
|
|
|
|||
|
|
// 表单数据
|
|||
|
|
const formData = reactive({
|
|||
|
|
mobile: '',
|
|||
|
|
code: '',
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 协议同意状态
|
|||
|
|
const agreed = ref(false);
|
|||
|
|
|
|||
|
|
// 倒计时相关
|
|||
|
|
const countdown = ref(0);
|
|||
|
|
let timer = null;
|
|||
|
|
|
|||
|
|
// 是否可以发送验证码
|
|||
|
|
const canSendCode = computed(() => countdown.value <= 0);
|
|||
|
|
|
|||
|
|
// 按钮文案
|
|||
|
|
const codeBtnText = computed(() => {
|
|||
|
|
if (countdown.value > 0) {
|
|||
|
|
return `${countdown.value}s`;
|
|||
|
|
}
|
|||
|
|
return '获取验证码';
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
onLoad(() => {
|
|||
|
|
// 获取状态栏高度
|
|||
|
|
const systemInfo = uni.getSystemInfoSync();
|
|||
|
|
statusBarHeight.value = systemInfo.statusBarHeight || 0;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
// 切换协议同意状态
|
|||
|
|
const toggleAgreement = () => {
|
|||
|
|
agreed.value = !agreed.value;
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 手机号格式校验
|
|||
|
|
const validateMobile = (mobile) => {
|
|||
|
|
return /^1[3-9]\d{9}$/.test(mobile);
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 发送验证码
|
|||
|
|
const handleSendCode = () => {
|
|||
|
|
if (!canSendCode.value) return;
|
|||
|
|
|
|||
|
|
if (!agreed.value) {
|
|||
|
|
uni.showToast({ title: '请先同意隐私政策和用户协议', icon: 'none' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!formData.mobile) {
|
|||
|
|
uni.showToast({ title: '请输入手机号', icon: 'none' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!validateMobile(formData.mobile)) {
|
|||
|
|
uni.showToast({ title: '手机号格式不正确', icon: 'none' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 调用发送验证码接口
|
|||
|
|
AuthUtil.sendSmsCode(formData.mobile, 1).then((res) => {
|
|||
|
|
if (res.code === 0) {
|
|||
|
|
// 开始倒计时
|
|||
|
|
countdown.value = 60;
|
|||
|
|
timer = setInterval(() => {
|
|||
|
|
countdown.value--;
|
|||
|
|
if (countdown.value <= 0) {
|
|||
|
|
clearInterval(timer);
|
|||
|
|
timer = null;
|
|||
|
|
}
|
|||
|
|
}, 1000);
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 登录处理
|
|||
|
|
const handleLogin = async () => {
|
|||
|
|
if (!agreed.value) {
|
|||
|
|
uni.showToast({ title: '请先同意隐私政策和用户协议', icon: 'none' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!formData.mobile) {
|
|||
|
|
uni.showToast({ title: '请输入手机号', icon: 'none' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!validateMobile(formData.mobile)) {
|
|||
|
|
uni.showToast({ title: '手机号格式不正确', icon: 'none' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
if (!formData.code) {
|
|||
|
|
uni.showToast({ title: '请输入验证码', icon: 'none' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 调用短信登录接口
|
|||
|
|
const { code } = await AuthUtil.smsLogin({
|
|||
|
|
mobile: formData.mobile,
|
|||
|
|
code: formData.code,
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
if (code === 0) {
|
|||
|
|
// 登录成功，获取用户信息
|
|||
|
|
await sheep.$store('user').getInfo();
|
|||
|
|
// 返回上一页
|
|||
|
|
uni.navigateBack();
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
|
|||
|
|
// 微信登录
|
|||
|
|
const wechatLogin = async () => {
|
|||
|
|
if (!agreed.value) {
|
|||
|
|
uni.showToast({ title: '请先同意隐私政策和用户协议', icon: 'none' });
|
|||
|
|
return;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 微信小程序环境下使用微信登录
|
|||
|
|
if (sheep.$platform.name === 'WechatMiniProgram') {
|
|||
|
|
const result = await sheep.$platform.useProvider('wechat').login();
|
|||
|
|
if (result) {
|
|||
|
|
await sheep.$store('user').getInfo();
|
|||
|
|
uni.navigateBack();
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({ title: '微信登录失败', icon: 'none' });
|
|||
|
|
}
|
|||
|
|
} else {
|
|||
|
|
uni.showToast({ title: '当前环境不支持微信登录', icon: 'none' });
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style lang="scss" scoped>
|
|||
|
|
// 页面容器 - flex布局，禁止滚动
|
|||
|
|
.login-page {
|
|||
|
|
height: 100vh;
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
background: linear-gradient(180deg, #F5F7FA 0%, #FFFFFF 100%);
|
|||
|
|
overflow: hidden;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 状态栏占位
|
|||
|
|
.status-bar {
|
|||
|
|
width: 100%;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
background: transparent;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 顶部Logo区域 - 可收缩
|
|||
|
|
.logo-section {
|
|||
|
|
display: flex;
|
|||
|
|
flex-direction: column;
|
|||
|
|
align-items: center;
|
|||
|
|
padding-top: 120rpx;
|
|||
|
|
padding-bottom: 80rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
|
|||
|
|
.logo-img {
|
|||
|
|
width: 280rpx;
|
|||
|
|
height: 280rpx;
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.logo-title {
|
|||
|
|
font-size: 48rpx;
|
|||
|
|
font-weight: 600;
|
|||
|
|
color: #333333;
|
|||
|
|
font-family: 'PingFang SC', sans-serif;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 表单区域 - 可收缩
|
|||
|
|
.form-section {
|
|||
|
|
padding: 0 59rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
|
|||
|
|
// 输入框容器
|
|||
|
|
.input-wrapper {
|
|||
|
|
width: 632rpx;
|
|||
|
|
height: 107rpx;
|
|||
|
|
background: #F7F8F9;
|
|||
|
|
border-radius: 15rpx;
|
|||
|
|
border: 2rpx solid #D9E1EF;
|
|||
|
|
margin-bottom: 32rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
padding: 0 32rpx;
|
|||
|
|
box-sizing: border-box;
|
|||
|
|
|
|||
|
|
.form-input {
|
|||
|
|
flex: 1;
|
|||
|
|
height: 100%;
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #333333;
|
|||
|
|
font-family: 'PingFang SC', sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.input-placeholder {
|
|||
|
|
font-size: 28rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
font-family: 'PingFang SC', sans-serif;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 获取验证码按钮
|
|||
|
|
.code-btn {
|
|||
|
|
font-size: 26rpx;
|
|||
|
|
color: #FD9568;
|
|||
|
|
font-family: 'PingFang SC', sans-serif;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
padding-left: 20rpx;
|
|||
|
|
|
|||
|
|
&.code-btn-disabled {
|
|||
|
|
color: #CCCCCC;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 登录按钮
|
|||
|
|
.login-btn {
|
|||
|
|
width: 632rpx;
|
|||
|
|
height: 107rpx;
|
|||
|
|
background: #FD9568;
|
|||
|
|
border-radius: 31rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-top: 48rpx;
|
|||
|
|
margin-bottom: 40rpx;
|
|||
|
|
|
|||
|
|
.btn-text {
|
|||
|
|
font-size: 32rpx;
|
|||
|
|
font-weight: 500;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
font-family: 'PingFang SC', sans-serif;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 隐私协议
|
|||
|
|
.agreement-box {
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
|
|||
|
|
.checkbox {
|
|||
|
|
width: 32rpx;
|
|||
|
|
height: 32rpx;
|
|||
|
|
border: 2rpx solid #D9E1EF;
|
|||
|
|
border-radius: 6rpx;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: center;
|
|||
|
|
justify-content: center;
|
|||
|
|
margin-right: 12rpx;
|
|||
|
|
flex-shrink: 0;
|
|||
|
|
|
|||
|
|
&.checked {
|
|||
|
|
background: #FD9568;
|
|||
|
|
border-color: #FD9568;
|
|||
|
|
|
|||
|
|
.check-icon {
|
|||
|
|
font-size: 20rpx;
|
|||
|
|
color: #FFFFFF;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.agreement-text {
|
|||
|
|
font-size: 24rpx;
|
|||
|
|
color: #999999;
|
|||
|
|
font-family: 'PingFang SC', sans-serif;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 底部微信登录 - 自动推到底部
|
|||
|
|
.wechat-login {
|
|||
|
|
flex: 1;
|
|||
|
|
display: flex;
|
|||
|
|
align-items: flex-end;
|
|||
|
|
justify-content: center;
|
|||
|
|
padding-bottom: 80rpx;
|
|||
|
|
|
|||
|
|
.wechat-icon {
|
|||
|
|
width: 88rpx;
|
|||
|
|
height: 88rpx;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
</style>
|