页面效果优化

apiRc/login.js

@@ -83,3 +83,15 @@ export function getInfo() {
     method: 'get'
   })
 }
+
+// 重新发送验证码
+export function sendSmsAgain(data) {
+  return request({
+    method: 'post',
+    url: '/app/sendSmsAgain',
+    data,
+    headers: {
+      isToken: false
+    }
+  })
+}

pages.json

@@ -79,15 +79,13 @@
       {
         "path": "pages/login/wx-login",
         "style": {
-          "navigationBarTitleText": "登录",
+          "navigationBarTitleText": "登录"
-          "navigationStyle": "custom"
         }
       },
       {
         "path": "pages/login/sms-verify",
         "style": {
-          "navigationBarTitleText": "短信验证",
+          "navigationBarTitleText": "短信验证"
-          "navigationStyle": "custom"
         }
       },
       {

pages/login/sms-verify.vue

@@ -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}`;
+    return `${prefix}****${suffix}`;
-    
-    console.log('格式化后的手机号：', formatted);
-    return formatted;
 });
 
 // 是否可以提交
 const canSubmit = computed(() => {
-    const can = smsCode.value.length === 6 && !loading.value;
+    return smsCode.value.length === 6 && !loading.value;
-    console.log('canSubmit计算属性调用：', {
-        smsCodeLength: smsCode.value.length,
-        loading: loading.value,
-        canSubmit: can
-    });
-    return can;
 });
 
 // 页面加载时获取参数
 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) => {
+        fail: () => {
-            console.error('读取剪贴板失败：', err);
             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-size: 44rpx
-                font-weight: 600
+                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
+                    height: 120rpx
-                    border: 2rpx solid #E5E5E5
+                    border: 3rpx solid #E8ECF4
-                    border-radius: 16rpx
+                    border-radius: 20rpx
-                    font-size: 40rpx
+                    font-size: 48rpx
-                    font-weight: 600
+                    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
+                padding: 12rpx 24rpx
+                border-radius: 24rpx
+                background: rgba(37, 107, 250, 0.1)
+                display: inline-block
+                transition: all 0.2s ease
                 
-            .paste-section
+                &:active
-                margin-top: 20rpx
+                    background: rgba(37, 107, 250, 0.2)
-                
+                    transform: scale(0.98)
-                .paste-text
-                    display: inline-flex
-                    align-items: center
-                    justify-content: center
-                    font-size: 26rpx
-                    color: #256BFA
-                    cursor: pointer
-                    
-                    text
-                        margin-left: 8rpx
         
         .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-size: 34rpx
-            font-weight: 500
+            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
+                width: 48rpx
-                height: 40rpx
+                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>