Bladeren bron

feat(profile): 完善个人信息页面功能与样式

- 修改登录后跳转路径至个人信息页面
- 更新完善信息页面标题并调整导航返回方式
- 优化地理定位功能,增加token认证与数据解析
- 改进页面布局与视觉效果,使用渐变背景与阴影
- 调整头像尺寸与圆角,提升视觉一致性
- 优化输入框与按钮样式,增强响应式与可用性
- 修复定位按钮文字与样式问题
mcbaiyun 2 maanden geleden
bovenliggende
commit
d0e254a7d1
2 gewijzigde bestanden met toevoegingen van 52 en 23 verwijderingen
  1. 2 2
      src/pages/login/login.vue
  2. 50 21
      src/pages/profile/complete-info.vue

+ 2 - 2
src/pages/login/login.vue

@@ -70,9 +70,9 @@ async function onSelectRole(role: number) {
     uni.setStorageSync('role', role)
     uni.hideLoading()
     uni.showToast({ title: '登录成功', icon: 'success' })
-    // 跳转到首页
+    // 跳转到个人信息页面
     setTimeout(() => {
-      uni.switchTab({ url: '/pages/index/index' })
+      uni.switchTab({ url: '/pages/profile/profile' })
     }, 1500)
   } catch (err) {
     console.error('Login error:', err)

+ 50 - 21
src/pages/profile/complete-info.vue

@@ -1,5 +1,5 @@
 <template>
-  <CustomNav title="完善信息" leftType="back" />
+  <CustomNav title="完善基本信息" leftType="home" />
   <view class="complete-container">
     <view class="form-section">
       <view class="avatar-section">
@@ -56,7 +56,7 @@
             <view class="picker">{{ region.join(' ') || '请选择省/市' }}</view>
           </picker>
           <button class="get-location-btn" @click="getCurrentLocation" :disabled="gettingLocation">
-            {{ gettingLocation ? '获取中...' : '自动获取' }}
+            {{ gettingLocation ? '获取中...' : '使用当前定位' }}
           </button>
         </view>
       </view>
@@ -155,16 +155,26 @@ const getCurrentLocation = async () => {
     console.log('getLocation success:', locationRes)
 
     // 调用用户自己的地理编码接口
+    const token = uni.getStorageSync('token')
     const geocodeRes = await uni.request({
-      url: `http://45.207.222.6/geo/nearest.php?latitude=${latitude}&longitude=${longitude}`,
-      method: 'GET'
+      url: `https://wx.baiyun.work/geo/nearest?latitude=${latitude}&longitude=${longitude}`,
+      method: 'GET',
+      header: {
+        'Authorization': `Bearer ${token}`
+      }
     })
 
     const data = geocodeRes.data as any
-    if (data && data.province && data.city) {
-      region.value = [data.province, data.city,data.district]
-      form.value.address = region.value.join(' ')
-      uni.showToast({ title: '位置获取成功', icon: 'success' })
+    if (data && data.code === 200 && data.data) {
+      // 解析 data 字段中的 JSON 字符串
+      const addressData = JSON.parse(data.data)
+      if (addressData && addressData.province && addressData.city) {
+        region.value = [addressData.province, addressData.city, addressData.district].filter(Boolean)
+        form.value.address = region.value.join(' ')
+        uni.showToast({ title: '位置获取成功', icon: 'success' })
+      } else {
+        throw new Error('Invalid address data')
+      }
     } else {
       throw new Error('Geocode failed')
     }
@@ -239,17 +249,28 @@ const onSubmit = async () => {
 <style>
 .complete-container {
   min-height: 100vh;
-  background-color: #f5f5f5;
-  padding-top: calc(var(--status-bar-height) + 44px);
-  padding-left: 40rpx;
+  /* 为固定在顶部的 CustomNav 留出空间(状态栏 + 导航栏 44px) */
+  padding-top: calc(var(--status-bar-height) + 44px + 40rpx);
+  /* 保留侧边与内部间距,使用 border-box 避免计算误差 */
   padding-right: 40rpx;
-  padding-bottom: 40rpx;
+  padding-left: 40rpx;
+  /* 底部安全区:使用项目中声明的 --window-bottom 或 fallback */
+  padding-bottom: calc(var(--window-bottom, 0px) + 40rpx);
+  box-sizing: border-box;
+  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
 }
 
 .form-section {
   background-color: #fff;
   border-radius: 20rpx;
   padding: 40rpx;
+  width: 100%;
+  max-width: 600rpx;
+  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.1);
 }
 
 .avatar-section {
@@ -259,9 +280,9 @@ const onSubmit = async () => {
 }
 
 .avatar {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 60rpx;
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 90rpx;
   background-color: #eee;
   display: flex;
   align-items: center;
@@ -269,9 +290,9 @@ const onSubmit = async () => {
 }
 
 .avatar-wrapper {
-  width: 120rpx;
-  height: 120rpx;
-  border-radius: 60rpx;
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 90rpx;
   overflow: hidden;
   display: flex;
   align-items: center;
@@ -324,6 +345,8 @@ const onSubmit = async () => {
   border-radius: 8rpx;
   padding: 0 20rpx;
   font-size: 32rpx;
+  box-sizing: border-box;
+  max-width: 100%;
 }
 
 .phone-section {
@@ -357,7 +380,7 @@ const onSubmit = async () => {
   color: #333;
 }
 
-.picker {
+picker {
   width: 100%;
   height: 80rpx;
   border: 1rpx solid #ddd;
@@ -366,7 +389,13 @@ const onSubmit = async () => {
   display: flex;
   align-items: center;
   font-size: 32rpx;
-  color: #333;
+  color: hsl(0, 0%, 20%);
+  box-sizing: border-box;
+  max-width: 100%;
+}
+
+.form-item, .picker, .input, .get-location-btn, .submit-btn {
+  box-sizing: border-box;
 }
 
 .location-section {
@@ -382,7 +411,7 @@ const onSubmit = async () => {
   color: #fff;
   border-radius: 8rpx;
   font-size: 28rpx;
-  padding: 0 30rpx;
+  padding: 0 10rpx;
   border: none;
 }