fix:登录页面修改,完善功能。

This commit is contained in:
tianyongbao
2026-06-26 11:34:07 +08:00
parent 8bdb9699e5
commit a2b891671a
6 changed files with 195 additions and 56 deletions

View File

@@ -32,4 +32,14 @@
<style lang="scss"> <style lang="scss">
@import "uview-plus/index.scss"; @import "uview-plus/index.scss";
@import '@/static/scss/index.scss'; @import '@/static/scss/index.scss';
/* 修复 uView u-input 在 disabled/readonly/select 状态(渲染为 u-input--selectlike)时
只能点右侧图标、无法整行点击的问题:
框架仅把 u-input 内部元素设为 pointer-events:none但根节点 .u-input 仍拦截点击,
导致点击无法穿透到父级 u-form-item 触发其 @click 选择事件。
这里让整个 selectlike 态 u-input 都不接收指针事件,使点击穿透到 u-form-item
从而实现整行点击均可弹出下拉/选择。全局生效,无需逐页面修改。 */
.u-input--selectlike {
pointer-events: none !important;
}
</style> </style>

View File

@@ -19,23 +19,31 @@
<input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" /> <input v-model="loginForm.username" class="input" type="text" placeholder="请输入账号" maxlength="30" />
</view> </view>
<view class="input-item"> <view class="input-item password-item">
<view class="input-icon"> <view class="input-icon">
<uni-icons type="locked" size="20" color="#667eea"></uni-icons> <uni-icons type="locked" size="20" color="#667eea"></uni-icons>
</view> </view>
<input v-model="loginForm.password" type="password" class="input" placeholder="请输入密码" maxlength="20" /> <input v-model="loginForm.password" type="text" password class="input" placeholder="请输入密码" maxlength="20" />
<view v-if="isH5" class="pwd-remember" @click.stop="rememberMeChange">
<text class="pwd-remember-text">记住密码</text>
<view :class="['mini-switch', rememberMe ? 'on' : '']">
<view class="mini-switch-dot"></view>
</view>
</view>
</view> </view>
<view class="remember-section"> <view class="agreement-box">
<up-checkbox <view class="agreement-line">
:customStyle="{marginBottom: '8px'}" <view class="agreement-row agree-part" @click="agreeChange">
label="记住密码" <view :class="['checkbox-small', agree ? 'checked' : '']">
name="agree" <uni-icons v-if="agree" type="checkmarkempty" size="16" color="#ffffff"></uni-icons>
usedAlone </view>
@change="rememberMeChange()" <text class="agreement-text">已阅读并同意</text>
v-model:checked="rememberMe" <text class="link-text" @click.stop="handleUserAgrement">用户协议</text>
> <text class="agreement-text"></text>
</up-checkbox> <text class="link-text" @click.stop="handlePrivacy">隐私协议</text>
</view>
</view>
</view> </view>
<view class="action-btn"> <view class="action-btn">
@@ -43,15 +51,15 @@
<text class="btn-text">登录</text> <text class="btn-text">登录</text>
</button> </button>
</view> </view>
<view class="register-btn" @click="handleRegister">
<text>立即注册</text>
</view>
</view> </view>
</view> </view>
<view class="footer-links"> <view class="copyright">
<text @click="handleRegister" class="link-item">立即注册</text> <text>Copyright © 2026 qdintc All Rights Reserved.</text>
<text class="separator">·</text>
<text @click="handleWebsite" class="link-item">官方网站</text>
<text class="separator">·</text>
<text @click="handleUserAgrement" class="link-item">服务协议</text>
</view> </view>
</view> </view>
</template> </template>
@@ -66,12 +74,19 @@ import { getWxCode } from '@/utils/geek';
import { wxLogin } from '@/api/oauth'; import { wxLogin } from '@/api/oauth';
import { setToken } from '@/utils/auth'; import { setToken } from '@/utils/auth';
import { encrypt, decrypt } from '@/utils/jsencrypt' import { encrypt, decrypt } from '@/utils/jsencrypt'
let isH5 = false
// #ifdef H5
isH5 = true
// #endif
const userStore = useUserStore() const userStore = useUserStore()
const codeUrl = ref(""); const codeUrl = ref("");
const captchaEnabled = ref(true); // 是否开启验证码 const captchaEnabled = ref(true); // 是否开启验证码
const useWxLogin = ref(false); // 是否使用微信登录 const useWxLogin = ref(false); // 是否使用微信登录
const globalConfig = ref(config); const globalConfig = ref(config);
const rememberMe = ref(false); const rememberMe = ref(false);
const agree = ref(true);
const loginForm = ref({ const loginForm = ref({
username: "", username: "",
password: "", password: "",
@@ -92,6 +107,9 @@ if (useWxLogin.value) {
} }
// 页面加载时检查是否记住了密码 // 页面加载时检查是否记住了密码
onMounted(() => { onMounted(() => {
if (!isH5) {
return
}
const username = localStorage.getItem('username'); const username = localStorage.getItem('username');
const password = localStorage.getItem('password'); const password = localStorage.getItem('password');
@@ -123,6 +141,8 @@ async function handleLogin() {
modal.msgError("请输入您的账号") modal.msgError("请输入您的账号")
} else if (loginForm.value.password === "") { } else if (loginForm.value.password === "") {
modal.msgError("请输入您的密码") modal.msgError("请输入您的密码")
} else if (!agree.value) {
modal.msgError("请先阅读并同意用户协议和隐私协议")
} else { } else {
modal.loading("登录中,请等待...") modal.loading("登录中,请等待...")
pwdLogin() pwdLogin()
@@ -141,7 +161,9 @@ async function pwdLogin() {
}) })
}; };
function loginSuccess(result) { function loginSuccess(result) {
if (rememberMe.value) { if (!isH5) {
rememberMe.value = false
} else if (rememberMe.value) {
localStorage.setItem('username', loginForm.value.username); localStorage.setItem('username', loginForm.value.username);
localStorage.setItem('password', encrypt(loginForm.value.password)); localStorage.setItem('password', encrypt(loginForm.value.password));
} else { } else {
@@ -161,6 +183,16 @@ function rememberMeChange(){
rememberMe.value = !rememberMe.value; rememberMe.value = !rememberMe.value;
} }
function agreeChange() {
agree.value = !agree.value
}
function handlePrivacy() {
uni.navigateTo({
url: '/pages/common/privacy/index'
})
}
// 官方网址 // 官方网址
function handleWebsite() { function handleWebsite() {
let site = globalConfig.value.appInfo.site_url; let site = globalConfig.value.appInfo.site_url;
@@ -219,9 +251,9 @@ page {
width: 140rpx; width: 140rpx;
height: 140rpx; height: 140rpx;
border-radius: 28rpx; border-radius: 28rpx;
box-shadow: 0 16rpx 48rpx rgba(0, 0, 0, 0.2); box-shadow: 0 15rpx 28rpx rgba(0, 0, 0, 0.2);
background: #ffffff; background: #ffffff;
padding: 20rpx; padding: 0rpx;
} }
} }
@@ -285,13 +317,100 @@ page {
color: #c0c4cc; color: #c0c4cc;
} }
} }
.pwd-remember {
display: flex;
align-items: center;
margin-left: 16rpx;
flex-shrink: 0;
padding: 6rpx 4rpx;
.pwd-remember-text {
font-size: 22rpx;
color: #909399;
margin-right: 10rpx;
line-height: 1;
}
.mini-switch {
width: 56rpx;
height: 30rpx;
border-radius: 15rpx;
background: #dcdfe6;
position: relative;
transition: background 0.25s ease;
&.on {
background: #667eea;
}
.mini-switch-dot {
position: absolute;
top: 3rpx;
left: 3rpx;
width: 24rpx;
height: 24rpx;
border-radius: 50%;
background: #ffffff;
transition: transform 0.25s ease;
box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.15);
}
&.on .mini-switch-dot {
transform: translateX(26rpx);
}
}
}
} }
.remember-section { .agreement-box {
margin-bottom: 40rpx; margin-bottom: 32rpx;
padding-left: 8rpx; margin-top: 24rpx;
padding-left: 8rpx;
.agreement-line {
display: flex;
align-items: center;
flex-wrap: wrap;
} }
.agreement-row {
display: flex;
align-items: center;
flex-wrap: wrap;
line-height: 1.6;
.checkbox-small {
width: 28rpx;
height: 28rpx;
border: 2rpx solid #dcdfe6;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 10rpx;
flex-shrink: 0;
&.checked {
background: #667eea;
border-color: #667eea;
}
}
.agreement-text {
font-size: 24rpx;
color: #606266;
line-height: 1.6;
}
.link-text {
font-size: 24rpx;
color: #667eea;
line-height: 1.6;
}
}
}
.action-btn { .action-btn {
margin-top: 48rpx; margin-top: 48rpx;
@@ -323,31 +442,38 @@ page {
} }
} }
} }
}
.footer-links { .register-btn {
text-align: center; width: 100%;
padding: 60rpx 0 80rpx; height: 88rpx;
position: relative; background: transparent;
z-index: 1; border: 2rpx solid #667eea;
display: flex; border-radius: 44rpx;
align-items: center; display: flex;
justify-content: center; align-items: center;
gap: 16rpx; justify-content: center;
margin-top: 24rpx;
.link-item { text {
color: rgba(255, 255, 255, 0.9); font-size: 32rpx;
font-size: 26rpx; color: #667eea;
transition: all 0.3s ease; font-weight: 500;
}
&:active { &:active {
opacity: 0.7; opacity: 0.8;
background: rgba(102, 126, 234, 0.05);
} }
} }
}
.separator { .copyright {
color: rgba(255, 255, 255, 0.5); text-align: center;
font-size: 26rpx; padding: 40rpx 0 60rpx;
text {
font-size: 22rpx;
color: rgba(255, 255, 255, 0.7);
} }
} }
} }

View File

@@ -123,15 +123,14 @@
methods: { methods: {
handleRegister() { handleRegister() {
this.$refs.form.validate().then(res => { this.$refs.form.validate().then(res => {
register(this.user) register(this.user).then(() => {
.then((res) => { uni.showToast({
uni.showToast({ title: '注册成功,请登录',
title: '注册成功,请登录', icon: 'success',
icon: 'success', duration: 2000
duration: 2000 })
}); uni.redirectTo({ url: '/pages/login' })
uni.navigateTo({ url: `/pages/login` }) })
})
}) })
} }

View File

@@ -114,8 +114,12 @@
<text class="info-label">地点</text> <text class="info-label">地点</text>
<text class="info-location">{{ item.locationAddress || item.locationName }}</text> <text class="info-location">{{ item.locationAddress || item.locationName }}</text>
</view> </view>
<view class="info-item info-item-remark" v-if="item.remark && !(item.locationAddress || item.locationName)">
<text class="info-label">备注</text>
<text class="info-remark">{{ item.remark }}</text>
</view>
</view> </view>
<view class="info-row info-row-extra" v-if="item.remark"> <view class="info-row info-row-extra" v-if="item.remark && (item.locationAddress || item.locationName)">
<view class="info-item info-item-remark"> <view class="info-item info-item-remark">
<text class="info-label">备注</text> <text class="info-label">备注</text>
<text class="info-remark">{{ item.remark }}</text> <text class="info-remark">{{ item.remark }}</text>

Binary file not shown.

Before

Width:  |  Height:  |  Size: 17 KiB

After

Width:  |  Height:  |  Size: 76 KiB

BIN
src/static/logo2.jpg Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 17 KiB