sdz/ks-app-employment-service
Template
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

页面效果优化

Browse Source
This commit is contained in:
FengHui
2026-04-10 11:25:34 +08:00
parent 8bfc1dc683
commit 769bc23edb
3 changed files with 132 additions and 136 deletions
Download Patch File Download Diff File Expand all files Collapse all files

250
pages/login/sms-verify.vue
View File

@@ -1,20 +1,20 @@
<template>
<view class="sms-verify-page">
<!-- 顶部导航栏 -->
<view class="nav-bar">
<!-- <view class="nav-bar">
<view class="nav-back" @click="goBack">
<uni-icons type="arrowleft" size="24" color="#333"></uni-icons>
</view>
<view class="nav-title">短信验证</view>
<view class="nav-placeholder"></view>
</view>
</view> -->
<!-- 页面内容 -->
<view class="page-content">
<!-- 安全提示 -->
<view class="security-tip">
<view class="tip-icon">
<uni-icons type="auth-filled" size="32" color="#256BFA"></uni-icons>
<uni-icons type="auth-filled" size="36" color="#256BFA"></uni-icons>
</view>
<view class="tip-text">为了您的账户安全需要您进行验证</view>
</view>
@@ -54,12 +54,6 @@
<view v-else class="resend-text" @click="resendSms">
重新获取验证码
</view>
<view class="paste-section">
<view class="paste-text" @click="pasteFromClipboard">
<uni-icons type="clipboard" size="16" color="#256BFA"></uni-icons>
<text>粘贴验证码</text>
</view>
</view>
</view>
<!-- 提交按钮 -->
@@ -94,10 +88,7 @@ const autoFocus = ref(true); // 自动聚焦
// 格式化手机号：只显示前三位和后四位，中间用星号代替
const formattedPhone = computed(() => {
console.log('formattedPhone computed called, phone.value:', phone.value);
if (!phone.value || phone.value.trim() === '') {
console.log('手机号为空，显示未知号码');
return '未知号码';
}
@@ -105,37 +96,21 @@ const formattedPhone = computed(() => {
const cleanPhone = phone.value.replace(/\D/g, '');
if (cleanPhone.length < 11) {
console.log('手机号长度不足11位，显示原始值：', phone.value);
return phone.value;
}
const prefix = cleanPhone.substring(0, 3);
const suffix = cleanPhone.substring(cleanPhone.length - 4);
const formatted = `${prefix}****${suffix}`;
console.log('格式化后的手机号：', formatted);
return formatted;
return `${prefix}****${suffix}`;
});
// 是否可以提交
const canSubmit = computed(() => {
const can = smsCode.value.length === 6 && !loading.value;
console.log('canSubmit计算属性调用：', {
smsCodeLength: smsCode.value.length,
loading: loading.value,
canSubmit: can
});
return can;
return smsCode.value.length === 6 && !loading.value;
});
// 页面加载时获取参数
onLoad(async (options) => {
console.log('短信验证页面参数：', options);
console.log('所有参数键值对：');
Object.keys(options).forEach(key => {
console.log(` ${key}: ${options[key]}`);
});
// 尝试多种可能的手机号字段名（按优先级）
const possiblePhoneFields = [
'phone', 'mobile', 'phoneNumber', 'tel',
@@ -147,18 +122,15 @@ onLoad(async (options) => {
for (const field of possiblePhoneFields) {
if (options[field]) {
foundPhone = options[field];
console.log(`找到手机号字段 "${field}": ${foundPhone}`);
break;
}
}
// 如果没找到，尝试从URL参数中解析
if (!foundPhone) {
console.log('未在options中找到手机号字段，尝试从当前页面URL解析');
const currentPages = getCurrentPages();
if (currentPages.length > 0) {
const currentPage = currentPages[currentPages.length - 1];
console.log('当前页面对象：', currentPage);
// 尝试从页面路由参数中获取
if (currentPage.$page && currentPage.$page.fullPath) {
@@ -167,7 +139,6 @@ onLoad(async (options) => {
const value = urlParams.get(field);
if (value) {
foundPhone = value;
console.log(`从URL参数中找到手机号字段 "${field}": ${foundPhone}`);
break;
}
}
@@ -181,21 +152,8 @@ onLoad(async (options) => {
userType.value = options.userType || '';
orgType.value = options.orgType || '';
console.log('最终获取到的手机号：', phone.value);
console.log('手机号长度：', phone.value.length);
console.log('formattedPhone值：', formattedPhone.value);
// 检查所有可能包含手机号的字段
console.log('所有可能包含手机号的字段值：');
possiblePhoneFields.forEach(field => {
if (options[field]) {
console.log(` ${field}: ${options[field]}`);
}
});
// 如果手机号仍然为空，显示错误信息
if (!phone.value) {
console.error('无法获取手机号，请检查参数传递');
uni.showToast({ title: '无法获取手机号，请返回重试', icon: 'none' });
}
@@ -227,11 +185,16 @@ const startCountdown = () => {
const resendSms = async () => {
if (countdown.value > 0) return;
// 调用重新发送验证码接口（如果需要）
// 检查手机号是否为空
if (!phone.value) {
uni.showToast({ title: '手机号获取失败，请返回重试', icon: 'none' });
return;
}
uni.showLoading({ title: '发送中...' });
try {
// 假设有一个重新发送验证码的接口
// await $api.createRequest('/app/resendSms', { phone: phone.value }, 'post');
// 调用重新发送验证码接口
await $api.createRequest('/app/sendSmsAgain', { phone: phone.value }, 'post');
uni.hideLoading();
uni.showToast({ title: '验证码已发送', icon: 'success' });
startCountdown();
@@ -251,21 +214,12 @@ const onCodeInput = (e) => {
}
smsCode.value = value;
// 如果输入了6位数字，可以自动提交（可选）
if (value.length === 6) {
// 这里可以添加自动提交逻辑，或者让用户手动点击按钮
console.log('6位验证码已输入完整');
}
};
// 粘贴事件处理
const onPaste = (e) => {
console.log('onPaste event triggered', e);
// #ifdef MP-WEIXIN
// 微信小程序中，使用异步方式获取剪贴板
console.log('MP-WEIXIN: onPaste called, using async clipboard API');
setTimeout(() => {
pasteFromClipboard();
}, 50);
@@ -281,14 +235,12 @@ const onPaste = (e) => {
// #ifndef MP-WEIXIN
// 其他平台（H5/App）使用标准粘贴处理
console.log('Non-MP-WEIXIN: Standard paste handling');
e.preventDefault();
e.stopPropagation();
let pasteText = '';
if (e.clipboardData && e.clipboardData.getData) {
pasteText = e.clipboardData.getData('text');
console.log('Got pasteText from clipboardData:', pasteText);
}
if (pasteText) {
@@ -309,7 +261,6 @@ const onPaste = (e) => {
const handlePaste = (text) => {
// 提取数字
const digits = text.replace(/\D/g, '');
console.log('Extracted digits from paste:', digits);
if (digits.length === 0) {
uni.showToast({ title: '剪贴板中没有找到验证码', icon: 'none' });
@@ -321,25 +272,16 @@ const handlePaste = (text) => {
smsCode.value = code;
uni.showToast({ title: '已粘贴验证码', icon: 'success' });
// 如果粘贴了6位数字，可以自动提交（可选）
if (code.length === 6) {
console.log('6位验证码已通过粘贴输入完整');
}
};
// 从剪贴板粘贴验证码
const pasteFromClipboard = () => {
console.log('pasteFromClipboard called');
uni.getClipboardData({
success: (res) => {
console.log('getClipboardData success, data:', res.data);
const text = res.data || '';
handlePaste(text);
},
fail: (err) => {
console.error('读取剪贴板失败：', err);
fail: () => {
uni.showToast({ title: '读取剪贴板失败', icon: 'none' });
}
});
@@ -347,21 +289,15 @@ const pasteFromClipboard = () => {
// 提交验证
const submitVerification = async () => {
console.log('submitVerification called, canSubmit:', canSubmit.value, 'loading:', loading.value);
if (!canSubmit.value) {
console.log('不能提交，直接返回');
return;
}
console.log('开始提交验证，设置loading为true');
loading.value = true;
const code = smsCode.value;
console.log('提交的验证码：', code, '手机号：', phone.value);
// 检查手机号是否为空
if (!phone.value) {
console.error('手机号为空，无法提交验证');
uni.showToast({ title: '手机号获取失败，请返回重试', icon: 'none' });
loading.value = false;
return;
@@ -378,8 +314,6 @@ const submitVerification = async () => {
orgType: orgType.value
}, 'post');
console.log('短信验证接口返回：', res);
if (res.token) {
// 登录成功，存储token
const userStore = useUserStore();
@@ -402,12 +336,9 @@ const submitVerification = async () => {
uni.showToast({ title: res.msg || '验证失败', icon: 'none' });
}
} catch (error) {
console.error('短信验证失败：', error);
uni.showToast({ title: error.msg || '验证失败，请重试', icon: 'none' });
} finally {
console.log('submitVerification finally块执行，设置loading为false');
loading.value = false;
console.log('loading设置完成，当前loading值：', loading.value);
}
};
@@ -428,7 +359,7 @@ import useUserStore from '@/stores/useUserStore';
<style lang="stylus" scoped>
.sms-verify-page
min-height: 100vh
background: #FFFFFF
background: linear-gradient(135deg, #F7F9FF 0%, #FFFFFF 100%)
.nav-bar
display: flex
@@ -436,7 +367,8 @@ import useUserStore from '@/stores/useUserStore';
justify-content: space-between
height: 88rpx
padding: 0 32rpx
border-bottom: 1rpx solid #f5f5f5
background: #FFFFFF
box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04)
.nav-back
width: 60rpx
@@ -444,6 +376,11 @@ import useUserStore from '@/stores/useUserStore';
display: flex
align-items: center
justify-content: center
border-radius: 50%
transition: background-color 0.2s ease
&:active
background-color: #F5F5F5
.nav-title
font-size: 32rpx
@@ -454,127 +391,164 @@ import useUserStore from '@/stores/useUserStore';
width: 60rpx
.page-content
padding: 60rpx 40rpx 40rpx
padding: 80rpx 48rpx 48rpx
.security-tip
display: flex
flex-direction: column
align-items: center
justify-content: center
margin-bottom: 40rpx
margin-bottom: 60rpx
padding: 32rpx
background: linear-gradient(135deg, rgba(37, 107, 250, 0.08) 0%, rgba(30, 91, 255, 0.04) 100%)
border-radius: 24rpx
border: 1rpx solid rgba(37, 107, 250, 0.1)
.tip-icon
margin-right: 16rpx
margin-bottom: 20rpx
width: 64rpx
height: 64rpx
display: flex
align-items: center
justify-content: center
background: #FFFFFF
border-radius: 50%
box-shadow: 0 4rpx 16rpx rgba(37, 107, 250, 0.15)
.tip-text
font-size: 28rpx
font-weight: 500
color: #333333
color: #256BFA
text-align: center
line-height: 1.4
.phone-display
text-align: center
margin-bottom: 60rpx
margin-bottom: 80rpx
.phone-label
font-size: 26rpx
font-size: 28rpx
color: #666666
margin-bottom: 12rpx
margin-bottom: 16rpx
opacity: 0.8
.phone-number
font-size: 36rpx
font-weight: 600
font-size: 44rpx
font-weight: 700
color: #333333
letter-spacing: 2rpx
background: linear-gradient(135deg, #256BFA 0%, #1E5BFF 100%)
-webkit-background-clip: text
-webkit-text-fill-color: transparent
background-clip: text
.sms-input-area
margin-bottom: 40rpx
margin-bottom: 60rpx
.input-label
font-size: 28rpx
color: #666666
text-align: center
margin-bottom: 20rpx
margin-bottom: 24rpx
font-weight: 500
.single-input-container
margin-bottom: 16rpx
.single-input
width: 100%
height: 100rpx
border: 2rpx solid #E5E5E5
border-radius: 16rpx
font-size: 40rpx
font-weight: 600
height: 120rpx
border: 3rpx solid #E8ECF4
border-radius: 20rpx
font-size: 48rpx
font-weight: 700
color: #333333
background: #F7F8FA
background: #FFFFFF
text-align: center
padding: 0 32rpx
box-sizing: border-box
outline: none
caret-color: #256BFA
transition: all 0.3s ease
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05)
&:focus
border-color: #256BFA
background: #FFFFFF
box-shadow: 0 4rpx 12rpx rgba(37, 107, 250, 0.15)
box-shadow: 0 8rpx 32rpx rgba(37, 107, 250, 0.2)
transform: translateY(-2rpx)
&::placeholder
color: #999999
color: #CCCCCC
font-size: 32rpx
font-weight: normal
.input-hint
font-size: 24rpx
color: #999999
text-align: center
.countdown-section
text-align: center
margin-bottom: 60rpx
margin-bottom: 80rpx
.countdown-text
font-size: 26rpx
font-size: 28rpx
color: #999999
font-weight: 500
.resend-text
font-size: 26rpx
font-size: 28rpx
color: #256BFA
text-decoration: underline
font-weight: 600
cursor: pointer
.paste-section
margin-top: 20rpx
padding: 12rpx 24rpx
border-radius: 24rpx
background: rgba(37, 107, 250, 0.1)
display: inline-block
transition: all 0.2s ease
.paste-text
display: inline-flex
align-items: center
justify-content: center
font-size: 26rpx
color: #256BFA
cursor: pointer
text
margin-left: 8rpx
&:active
background: rgba(37, 107, 250, 0.2)
transform: scale(0.98)
.submit-btn
width: 100%
height: 88rpx
height: 96rpx
background: linear-gradient(135deg, #256BFA 0%, #1E5BFF 100%)
border-radius: 44rpx
border-radius: 48rpx
color: #FFFFFF
font-size: 32rpx
font-weight: 500
font-size: 34rpx
font-weight: 600
border: none
display: flex
align-items: center
justify-content: center
box-shadow: 0 8rpx 32rpx rgba(37, 107, 250, 0.3)
transition: all 0.3s ease
position: relative
overflow: hidden
&::before
content: ''
position: absolute
top: 0
left: -100%
width: 100%
height: 100%
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent)
transition: left 0.5s ease
&:not(:disabled):hover::before
left: 100%
&:not(:disabled):active
transform: translateY(2rpx)
box-shadow: 0 4rpx 16rpx rgba(37, 107, 250, 0.3)
&:disabled
opacity: 0.5
cursor: not-allowed
box-shadow: none
.loading-spinner
width: 40rpx
height: 40rpx
width: 48rpx
height: 48rpx
border: 4rpx solid rgba(255, 255, 255, 0.3)
border-radius: 50%
border-top: 4rpx solid #FFFFFF
@@ -590,4 +564,16 @@ button::after
transform: rotate(0deg)
100%
transform: rotate(360deg)
// 页面进入动画
.sms-verify-page
animation: fadeIn 0.4s ease-out
@keyframes fadeIn
from
opacity: 0
transform: translateY(20rpx)
to
opacity: 1
transform: translateY(0)
</style>