diff --git a/miniapp/api/user.js b/miniapp/api/user.js
index d9fcb4d..9a474ad 100644
--- a/miniapp/api/user.js
+++ b/miniapp/api/user.js
@@ -12,12 +12,17 @@ import { get, post } from './request'
  * 
  * @param {number} pageIndex - 页码
  * @param {number} pageSize - 每页数量
+ * @param {number} gender - 筛选性别（1=男，2=女，0=不限）
  * @returns {Promise<Object>} 推荐用户列表
  */
-export async function getRecommend(pageIndex = 1, pageSize = 10) {
+export async function getRecommend(pageIndex = 1, pageSize = 10, gender = 0) {
   // 如果用户已登录，发送token以便后端排除当前用户
   const token = uni.getStorageSync('token')
-  const response = await get('/users/recommend', { pageIndex, pageSize }, { needAuth: !!token })
+  const params = { pageIndex, pageSize }
+  if (gender > 0) {
+    params.gender = gender
+  }
+  const response = await get('/users/recommend', params, { needAuth: !!token })
   return response
 }
 
diff --git a/miniapp/config/index.js b/miniapp/config/index.js
index 6bdbd8d..7794e45 100644
--- a/miniapp/config/index.js
+++ b/miniapp/config/index.js
@@ -23,7 +23,7 @@ const ENV = {
 }
 
 // 当前环境 - 开发时使用 development，打包时改为 production
-const CURRENT_ENV = 'production'
+const CURRENT_ENV = 'development'
 
 // 导出配置
 export const config = {
diff --git a/miniapp/pages/index/index.vue b/miniapp/pages/index/index.vue
index f9329f8..a035f21 100644
--- a/miniapp/pages/index/index.vue
+++ b/miniapp/pages/index/index.vue
@@ -90,11 +90,7 @@
 
 			<!-- 推荐标题栏 -->
 			<view class="section-header">
-				<view class="section-title-wrapper">
-					<text class="section-title-main">今日优质推荐</text>
-					<text class="section-title-highlight">已更新</text>
-				</view>
-				<text class="section-subtitle">每天早上五点准时更新</text>
+				<image class="recommend-title-img" src="/static/recommend_title.png" mode="widthFix" />
 			</view>
 
 			<!-- 用户列表 -->
@@ -240,7 +236,9 @@
 						noMoreData.value = false
 					}
 
-					const res = await getRecommend(pageIndex.value, pageSize)
+					// 获取用户的性别偏好
+					const genderPref = userStore.genderPreference || 0
+					const res = await getRecommend(pageIndex.value, pageSize, genderPref)
 					if (res && res.code === 0 && res.data) {
 						const items = res.data.items || []
 						total.value = res.data.total || 0
@@ -569,7 +567,7 @@
 <style lang="scss" scoped>
 	.home-page {
 		height: 100vh;
-		background-color: #f8f8f8;
+		background-color: #F3F3F3;
 	}
 
 	// 整页滚动区域
@@ -654,7 +652,6 @@
 	// 金刚位导航
 	.kingkong-section {
 		padding: 20rpx;
-		background-color: #fff;
 
 		.kingkong-grid {
 			display: flex;
@@ -689,7 +686,10 @@
 		align-items: center;
 		justify-content: center;
 		padding: 5rpx 20rpx 24rpx;
-		background-color: #f8f8f8;
+
+		.recommend-title-img {
+			width: 410rpx;
+		}
 
 		.section-title-wrapper {
 			display: flex;
diff --git a/miniapp/pages/member/index.vue b/miniapp/pages/member/index.vue
index 350a2bd..85a34e3 100644
--- a/miniapp/pages/member/index.vue
+++ b/miniapp/pages/member/index.vue
@@ -430,7 +430,7 @@ export default {
 
     .tier-badge {
       position: absolute;
-      top: -2rpx;
+      top: -20rpx;
       right: -2rpx;
       padding: 6rpx 16rpx;
       background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
diff --git a/miniapp/pages/message/index.vue b/miniapp/pages/message/index.vue
index 19c3af3..b727039 100644
--- a/miniapp/pages/message/index.vue
+++ b/miniapp/pages/message/index.vue
@@ -206,16 +206,47 @@
 		if (!userStore.isLoggedIn) return
 
 		try {
+			// 获取本地存储的最后查看时间
+			const lastViewedTime = uni.getStorageSync('lastViewedMeTime') || 0
+			const lastFavoritedTime = uni.getStorageSync('lastFavoritedMeTime') || 0
+			const lastUnlockedTime = uni.getStorageSync('lastUnlockedMeTime') || 0
+
 			const [viewedRes, favoritedRes, unlockedRes] = await Promise.all([
-				getViewedMe(1, 1).catch(() => null),
-				getFavoritedMe(1, 1).catch(() => null),
-				getUnlockedMe(1, 1).catch(() => null)
+				getViewedMe(1, 100).catch(() => null),
+				getFavoritedMe(1, 100).catch(() => null),
+				getUnlockedMe(1, 100).catch(() => null)
 			])
 
+			// 计算新增数量（在最后查看时间之后的记录）
+			let viewedCount = 0
+			let favoritedCount = 0
+			let unlockedCount = 0
+
+			if (viewedRes?.data?.items) {
+				viewedCount = viewedRes.data.items.filter(item => {
+					const itemTime = new Date(item.viewTime || item.createTime).getTime()
+					return itemTime > lastViewedTime
+				}).length
+			}
+
+			if (favoritedRes?.data?.items) {
+				favoritedCount = favoritedRes.data.items.filter(item => {
+					const itemTime = new Date(item.favoriteTime || item.createTime).getTime()
+					return itemTime > lastFavoritedTime
+				}).length
+			}
+
+			if (unlockedRes?.data?.items) {
+				unlockedCount = unlockedRes.data.items.filter(item => {
+					const itemTime = new Date(item.unlockTime || item.createTime).getTime()
+					return itemTime > lastUnlockedTime
+				}).length
+			}
+
 			interactCounts.value = {
-				viewedMe: viewedRes?.data?.total || 0,
-				favoritedMe: favoritedRes?.data?.total || 0,
-				unlockedMe: unlockedRes?.data?.total || 0
+				viewedMe: viewedCount,
+				favoritedMe: favoritedCount,
+				unlockedMe: unlockedCount
 			}
 		} catch (error) {
 			console.error('加载互动统计失败:', error)
@@ -277,6 +308,19 @@
 
 	// 导航到互动页面
 	const navigateTo = (url) => {
+		// 记录最后查看时间
+		const now = Date.now()
+		if (url.includes('viewedMe')) {
+			uni.setStorageSync('lastViewedMeTime', now)
+			interactCounts.value.viewedMe = 0
+		} else if (url.includes('favoritedMe')) {
+			uni.setStorageSync('lastFavoritedMeTime', now)
+			interactCounts.value.favoritedMe = 0
+		} else if (url.includes('unlockedMe')) {
+			uni.setStorageSync('lastUnlockedMeTime', now)
+			interactCounts.value.unlockedMe = 0
+		}
+
 		uni.navigateTo({
 			url
 		})
diff --git a/miniapp/pages/mine/index.vue b/miniapp/pages/mine/index.vue
index b608443..3a6b32e 100644
--- a/miniapp/pages/mine/index.vue
+++ b/miniapp/pages/mine/index.vue
@@ -200,16 +200,47 @@ export default {
       if (!userStore.isLoggedIn) return
 
       try {
+        // 获取本地存储的最后查看时间
+        const lastViewedTime = uni.getStorageSync('lastViewedMeTime') || 0
+        const lastFavoritedTime = uni.getStorageSync('lastFavoritedMeTime') || 0
+        const lastUnlockedTime = uni.getStorageSync('lastUnlockedMeTime') || 0
+
         const [viewedRes, favoritedRes, unlockedRes] = await Promise.all([
-          getViewedMe(1, 1),
-          getFavoritedMe(1, 1),
-          getUnlockedMe(1, 1)
+          getViewedMe(1, 100).catch(() => null),
+          getFavoritedMe(1, 100).catch(() => null),
+          getUnlockedMe(1, 100).catch(() => null)
         ])
 
+        // 计算新增数量（在最后查看时间之后的记录）
+        let viewedCount = 0
+        let favoritedCount = 0
+        let unlockedCount = 0
+
+        if (viewedRes?.data?.items) {
+          viewedCount = viewedRes.data.items.filter(item => {
+            const itemTime = new Date(item.viewTime || item.createTime).getTime()
+            return itemTime > lastViewedTime
+          }).length
+        }
+
+        if (favoritedRes?.data?.items) {
+          favoritedCount = favoritedRes.data.items.filter(item => {
+            const itemTime = new Date(item.favoriteTime || item.createTime).getTime()
+            return itemTime > lastFavoritedTime
+          }).length
+        }
+
+        if (unlockedRes?.data?.items) {
+          unlockedCount = unlockedRes.data.items.filter(item => {
+            const itemTime = new Date(item.unlockTime || item.createTime).getTime()
+            return itemTime > lastUnlockedTime
+          }).length
+        }
+
         interactCounts.value = {
-          viewedMe: viewedRes?.data?.total || 0,
-          favoritedMe: favoritedRes?.data?.total || 0,
-          unlockedMe: unlockedRes?.data?.total || 0
+          viewedMe: viewedCount,
+          favoritedMe: favoritedCount,
+          unlockedMe: unlockedCount
         }
       } catch (error) {
         console.error('加载互动统计失败:', error)
@@ -299,8 +330,21 @@ export default {
       })
     }
 
-    // 导航
+    // 导航到互动页面
     const navigateTo = (url) => {
+      // 记录最后查看时间
+      const now = Date.now()
+      if (url.includes('viewedMe')) {
+        uni.setStorageSync('lastViewedMeTime', now)
+        interactCounts.value.viewedMe = 0
+      } else if (url.includes('favoritedMe')) {
+        uni.setStorageSync('lastFavoritedMeTime', now)
+        interactCounts.value.favoritedMe = 0
+      } else if (url.includes('unlockedMe')) {
+        uni.setStorageSync('lastUnlockedMeTime', now)
+        interactCounts.value.unlockedMe = 0
+      }
+
       uni.navigateTo({ url })
     }
 
diff --git a/miniapp/pages/profile/detail.vue b/miniapp/pages/profile/detail.vue
index 9ae130e..3076abd 100644
--- a/miniapp/pages/profile/detail.vue
+++ b/miniapp/pages/profile/detail.vue
@@ -138,13 +138,14 @@
               @click="previewPhoto(index)"
             >
               <image 
-                v-if="userDetail.isPhotoPublic || isUnlocked"
                 class="photo-image" 
+                :class="{ 'photo-blurred': !userDetail.isPhotoPublic && !isUnlocked }"
                 :src="photo.photoUrl" 
                 mode="aspectFill"
               />
-              <view v-else class="photo-blur">
-                <text class="blur-text">私密</text>
+              <view v-if="!userDetail.isPhotoPublic && !isUnlocked" class="photo-lock-overlay">
+                <text class="lock-icon">🔒</text>
+                <text class="lock-text">私密</text>
               </view>
             </view>
           </view>
@@ -936,10 +937,40 @@ onShareAppMessage(() => {
     aspect-ratio: 1;
     border-radius: 16rpx;
     overflow: hidden;
+    position: relative;
 
     .photo-image {
       width: 100%;
       height: 100%;
+
+      &.photo-blurred {
+        filter: blur(20px);
+        transform: scale(1.1);
+      }
+    }
+
+    .photo-lock-overlay {
+      position: absolute;
+      top: 0;
+      left: 0;
+      right: 0;
+      bottom: 0;
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      justify-content: center;
+      background: rgba(0, 0, 0, 0.2);
+
+      .lock-icon {
+        font-size: 40rpx;
+        margin-bottom: 8rpx;
+      }
+
+      .lock-text {
+        font-size: 24rpx;
+        color: #fff;
+        text-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3);
+      }
     }
 
     .photo-blur {
diff --git a/miniapp/pages/profile/personal.vue b/miniapp/pages/profile/personal.vue
index 3effdfb..ea6998f 100644
--- a/miniapp/pages/profile/personal.vue
+++ b/miniapp/pages/profile/personal.vue
@@ -18,32 +18,27 @@
 
     <!-- 头像区域 -->
     <view class="avatar-section" :style="{ marginTop: (statusBarHeight + 44) + 'px' }">
-      <view class="avatar-wrapper" @click="handleChangeAvatar">
-        <image 
-          class="avatar-img" 
-          :src="avatarLoadError ? defaultAvatar : (userInfo.avatar || defaultAvatar)" 
-          mode="aspectFill"
-          @error="onAvatarError"
-        />
-        <view class="avatar-edit-icon">
-          <text>✎</text>
+      <button class="avatar-wrapper-btn" open-type="chooseAvatar" @chooseavatar="handleChooseWxAvatar">
+        <view class="avatar-wrapper">
+          <image 
+            class="avatar-img" 
+            :src="avatarLoadError ? defaultAvatar : (userInfo.avatar || defaultAvatar)" 
+            mode="aspectFill"
+            @error="onAvatarError"
+          />
+          <view class="avatar-edit-icon">
+            <text>✎</text>
+          </view>
         </view>
-      </view>
+      </button>
     </view>
 
     <!-- 表单区域 -->
     <view class="form-section">
       <view class="form-item">
         <text class="form-label">用户名</text>
-        <view class="form-input">
-          <input 
-            type="text" 
-            :value="nickname"
-            @input="e => nickname = e.detail.value"
-            placeholder="请输入用户名" 
-            maxlength="20"
-            class="input-field"
-          />
+        <view class="form-input disabled">
+          <text>{{ userInfo.nickname || '未设置' }}</text>
         </view>
       </view>
       <view class="form-item">
@@ -57,7 +52,7 @@
 
     <!-- 保存按钮 -->
     <view class="btn-section">
-      <button class="btn-save" @click="handleSave">保存</button>
+      <button class="btn-save" @click="handleBack">返回</button>
     </view>
   </view>
 </template>
@@ -126,54 +121,66 @@ export default {
         sourceType: ['album', 'camera'],
         success: async (res) => {
           const tempFilePath = res.tempFilePaths[0]
-          
-          uni.showLoading({ title: '上传中...' })
-          
-          try {
-            // 上传图片（使用统一配置的地址）
-            const uploadRes = await new Promise((resolve, reject) => {
-              uni.uploadFile({
-                url: `${API_BASE_URL}/upload/image`,
-                filePath: tempFilePath,
-                name: 'file',
-                header: {
-                  Authorization: `Bearer ${userStore.token}`
-                },
-                success: (res) => {
-                  if (res.statusCode === 200) {
-                    resolve(JSON.parse(res.data))
-                  } else {
-                    reject(new Error('上传失败'))
-                  }
-                },
-                fail: reject
-              })
-            })
-
-            if (uploadRes.code === 0 && uploadRes.data?.url) {
-              // 调用后端API保存头像到数据库
-              const saveRes = await updateAvatar(uploadRes.data.url)
-              if (saveRes && saveRes.code === 0) {
-                // 更新 store 并重置头像加载错误状态
-                userStore.updateUserInfo({ avatar: uploadRes.data.url })
-                avatarLoadError.value = false
-                uni.showToast({ title: '头像更新成功', icon: 'success' })
-              } else {
-                uni.showToast({ title: saveRes?.message || '保存失败', icon: 'none' })
-              }
-            } else {
-              uni.showToast({ title: uploadRes.message || '上传失败', icon: 'none' })
-            }
-          } catch (error) {
-            console.error('上传头像失败:', error)
-            uni.showToast({ title: '上传失败', icon: 'none' })
-          } finally {
-            uni.hideLoading()
-          }
+          await uploadAvatarFile(tempFilePath)
         }
       })
     }
 
+    // 获取微信头像
+    const handleChooseWxAvatar = async (e) => {
+      const avatarUrl = e.detail.avatarUrl
+      if (avatarUrl) {
+        await uploadAvatarFile(avatarUrl)
+      }
+    }
+
+    // 上传头像文件
+    const uploadAvatarFile = async (tempFilePath) => {
+      uni.showLoading({ title: '上传中...' })
+      
+      try {
+        // 上传图片（使用统一配置的地址）
+        const uploadRes = await new Promise((resolve, reject) => {
+          uni.uploadFile({
+            url: `${API_BASE_URL}/upload/image`,
+            filePath: tempFilePath,
+            name: 'file',
+            header: {
+              Authorization: `Bearer ${userStore.token}`
+            },
+            success: (res) => {
+              if (res.statusCode === 200) {
+                resolve(JSON.parse(res.data))
+              } else {
+                reject(new Error('上传失败'))
+              }
+            },
+            fail: reject
+          })
+        })
+
+        if (uploadRes.code === 0 && uploadRes.data?.url) {
+          // 调用后端API保存头像到数据库
+          const saveRes = await updateAvatar(uploadRes.data.url)
+          if (saveRes && saveRes.code === 0) {
+            // 更新 store 并重置头像加载错误状态
+            userStore.updateUserInfo({ avatar: uploadRes.data.url })
+            avatarLoadError.value = false
+            uni.showToast({ title: '头像更新成功', icon: 'success' })
+          } else {
+            uni.showToast({ title: saveRes?.message || '保存失败', icon: 'none' })
+          }
+        } else {
+          uni.showToast({ title: uploadRes.message || '上传失败', icon: 'none' })
+        }
+      } catch (error) {
+        console.error('上传头像失败:', error)
+        uni.showToast({ title: '上传失败', icon: 'none' })
+      } finally {
+        uni.hideLoading()
+      }
+    }
+
     // 复制相亲编号
     const handleCopyXiangQinNo = () => {
       const xiangQinNo = userStore.xiangQinNo
@@ -258,6 +265,7 @@ export default {
       onAvatarError,
       handleBack,
       handleChangeAvatar,
+      handleChooseWxAvatar,
       handleCopyXiangQinNo,
       handleSave,
       initNickname
@@ -347,6 +355,18 @@ export default {
   justify-content: center;
   padding: 60rpx 0;
 
+  .avatar-wrapper-btn {
+    padding: 0;
+    margin: 0;
+    background: transparent;
+    border: none;
+    line-height: normal;
+
+    &::after {
+      border: none;
+    }
+  }
+
   .avatar-wrapper {
     position: relative;
     width: 180rpx;
diff --git a/miniapp/pages/realname/index.vue b/miniapp/pages/realname/index.vue
index ef99135..6e458e5 100644
--- a/miniapp/pages/realname/index.vue
+++ b/miniapp/pages/realname/index.vue
@@ -1,1213 +1,1469 @@
 <template>
-  <view class="realname-page">
-    <!-- 页面加载状态 -->
-    <Loading type="page" :loading="pageLoading" />
-    
-    <!-- 顶部背景图 -->
-    <view class="top-bg">
-      <image src="/static/title_bg.png" mode="aspectFill" class="bg-img" />
-    </view>
-    
-    <!-- 自定义导航栏 -->
-    <view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
-      <view class="navbar-content">
-        <view class="navbar-back" @click="handleBack">
-          <text class="back-icon">‹</text>
-        </view>
-        <text class="navbar-title">实名认证</text>
-        <view class="navbar-placeholder"></view>
-      </view>
-    </view>
-    
-    <!-- 已认证状态 (Requirements 12.4) -->
-    <view v-if="isVerified" class="verified-section" :style="{ paddingTop: (statusBarHeight + 44) + 'px' }">
-      <view class="verified-icon">✓</view>
-      <view class="verified-title">实名认证已完成</view>
-      <view class="verified-info">
-        <view class="info-item">
-          <text class="label">姓名：</text>
-          <text class="value">{{ maskedName }}</text>
-        </view>
-        <view class="info-item">
-          <text class="label">身份证号：</text>
-          <text class="value">{{ maskedIdNumber }}</text>
-        </view>
-      </view>
-      <view class="verified-badge">
-        <text class="badge-icon">🛡️</text>
-        <text class="badge-text">已实名认证</text>
-      </view>
-    </view>
-    
-    <!-- 未认证状态 - 分步骤显示 -->
-    <view v-else class="unverified-section">
-      <!-- 固定的步骤指示器 -->
-      <view class="step-header-fixed" :style="{ top: (statusBarHeight + 44) + 'px' }">
-        <view class="step-indicator">
-          <view class="step-item" :class="{ active: currentStep === 1, completed: currentStep > 1 }">
-            <view class="step-num">{{ currentStep > 1 ? '✓' : '1' }}</view>
-            <text class="step-text">支付费用</text>
-          </view>
-          <view class="step-line" :class="{ completed: currentStep > 1 }"></view>
-          <view class="step-item" :class="{ active: currentStep === 2, completed: currentStep > 2 }">
-            <view class="step-num">{{ currentStep > 2 ? '✓' : '2' }}</view>
-            <text class="step-text">上传证件</text>
-          </view>
-          <view class="step-line" :class="{ completed: currentStep > 2 }"></view>
-          <view class="step-item" :class="{ active: currentStep === 3 }">
-            <view class="step-num">3</view>
-            <text class="step-text">认证完成</text>
-          </view>
-        </view>
-      </view>
-      
-      <!-- 可滚动内容区域 -->
-      <scroll-view 
-        class="content-scroll" 
-        scroll-y 
-        :style="{ 
+	<view class="realname-page">
+		<!-- 页面加载状态 -->
+		<Loading type="page" :loading="pageLoading" />
+
+		<!-- 顶部背景图 -->
+		<view class="top-bg">
+			<image src="/static/title_bg.png" mode="aspectFill" class="bg-img" />
+		</view>
+
+		<!-- 自定义导航栏 -->
+		<view class="custom-navbar" :style="{ paddingTop: statusBarHeight + 'px' }">
+			<view class="navbar-content">
+				<view class="navbar-back" @click="handleBack">
+					<text class="back-icon">‹</text>
+				</view>
+				<text class="navbar-title">实名认证</text>
+				<view class="navbar-placeholder"></view>
+			</view>
+		</view>
+
+		<!-- 已认证状态 (Requirements 12.4) -->
+		<view v-if="isVerified" class="verified-section" :style="{ paddingTop: (statusBarHeight + 44) + 'px' }">
+			<view class="verified-icon">✓</view>
+			<view class="verified-title">实名认证已完成</view>
+			<view class="verified-info">
+				<view class="info-item">
+					<text class="label">姓名：</text>
+					<text class="value">{{ maskedName }}</text>
+				</view>
+				<view class="info-item">
+					<text class="label">身份证号：</text>
+					<text class="value">{{ maskedIdNumber }}</text>
+				</view>
+			</view>
+			<view class="verified-badge">
+				<text class="badge-icon">🛡️</text>
+				<text class="badge-text">已实名认证</text>
+			</view>
+		</view>
+
+		<!-- 未认证状态 - 分步骤显示 -->
+		<view v-else class="unverified-section">
+			<!-- 固定的步骤指示器 -->
+			<view class="step-header-fixed" :style="{ top: (statusBarHeight + 44) + 'px' }">
+				<view class="step-indicator">
+					<view class="step-item" :class="{ active: currentStep === 1, completed: currentStep > 1 }" @click="handleStepClick(1)">
+						<view class="step-num">{{ currentStep > 1 ? '✓' : '1' }}</view>
+						<text class="step-text">支付费用</text>
+					</view>
+					<view class="step-line" :class="{ completed: currentStep > 1 }"></view>
+					<view class="step-item" :class="{ active: currentStep === 2, completed: currentStep > 2 }" @click="handleStepClick(2)">
+						<view class="step-num">{{ currentStep > 2 ? '✓' : '2' }}</view>
+						<text class="step-text">上传证件</text>
+					</view>
+					<view class="step-line" :class="{ completed: currentStep > 2 }"></view>
+					<view class="step-item" :class="{ active: currentStep === 3 }" @click="handleStepClick(3)">
+						<view class="step-num">3</view>
+						<text class="step-text">认证完成</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- 可滚动内容区域 -->
+			<scroll-view class="content-scroll" scroll-y :style="{ 
           top: (statusBarHeight + 44 + 100) + 'px',
           height: 'calc(100vh - ' + (statusBarHeight + 44 + 100 + 120) + 'px)'
-        }"
-      >
-        <!-- 步骤1: 支付页面 (Requirements 12.1) -->
-        <view v-if="currentStep === 1" class="step-payment">
-          <view class="payment-content">
-            <view class="payment-icon">🛡️</view>
-            <view class="payment-title">实名认证</view>
-            <view class="payment-desc">完成实名认证，提升信任度，获得更多关注</view>
-            
-            <view class="payment-benefits">
-              <view class="benefit-item">
-                <text class="benefit-icon">✓</text>
-                <text class="benefit-text">展示"已实名"徽章</text>
-              </view>
-              <view class="benefit-item">
-                <text class="benefit-icon">✓</text>
-                <text class="benefit-text">提升资料可信度</text>
-              </view>
-              <view class="benefit-item">
-                <text class="benefit-icon">✓</text>
-                <text class="benefit-text">获得更多用户关注</text>
-              </view>
-            </view>
-            
-            <view class="payment-price">
-              <text class="price-label">认证费用</text>
-              <view class="price-value">
-                <text class="symbol">¥</text>
-                <text class="amount">{{ verificationFee }}</text>
-              </view>
-            </view>
-          </view>
-        </view>
-        
-        <!-- 步骤2: 身份证上传页面 (Requirements 12.2, 12.3) -->
-        <view v-if="currentStep === 2" class="step-upload">
-          <view class="upload-content">
-            <view class="upload-title">请上传身份证照片</view>
-            <view class="upload-desc">请确保照片清晰、完整，信息可辨认</view>
-            
-            <!-- 身份证正面 -->
-            <view class="upload-card">
-              <view class="card-label">身份证人像面</view>
-              <view 
-                class="card-upload"
-                :class="{ 'has-image': idCardFront }"
-                @click="chooseIdCardFront"
-              >
-                <image 
-                  v-if="idCardFront" 
-                  :src="idCardFront" 
-                  mode="aspectFill"
-                  class="card-image"
-                />
-                <view v-else class="card-placeholder">
-                  <text class="placeholder-icon">📷</text>
-                  <text class="placeholder-text">点击上传</text>
-                </view>
-              </view>
-            </view>
-            
-            <!-- 身份证反面 -->
-            <view class="upload-card">
-              <view class="card-label">身份证国徽面</view>
-              <view 
-                class="card-upload"
-                :class="{ 'has-image': idCardBack }"
-                @click="chooseIdCardBack"
-              >
-                <image 
-                  v-if="idCardBack" 
-                  :src="idCardBack" 
-                  mode="aspectFill"
-                  class="card-image"
-                />
-                <view v-else class="card-placeholder">
-                  <text class="placeholder-icon">📷</text>
-                  <text class="placeholder-text">点击上传</text>
-                </view>
-              </view>
-            </view>
-            
-            <view class="upload-tips">
-              <view class="tips-title">温馨提示：</view>
-              <view class="tips-item">• 请上传本人有效身份证照片</view>
-              <view class="tips-item">• 照片需清晰可辨，无遮挡</view>
-              <view class="tips-item">• 您的信息将被严格保密</view>
-            </view>
-          </view>
-        </view>
-        
-        <!-- 步骤3: 认证结果页面 (Requirements 12.4) -->
-        <view v-if="currentStep === 3" class="step-result">
-          <view class="result-content">
-            <view class="result-icon success">✓</view>
-            <view class="result-title">实名认证成功</view>
-            <view class="result-desc">您的身份信息已通过验证</view>
-            
-            <view class="result-info">
-              <view class="info-item">
-                <text class="label">姓名：</text>
-                <text class="value">{{ maskedName }}</text>
-              </view>
-              <view class="info-item">
-                <text class="label">身份证号：</text>
-                <text class="value">{{ maskedIdNumber }}</text>
-              </view>
-            </view>
-          </view>
-        </view>
-      </scroll-view>
-      
-      <!-- 底部操作按钮 -->
-      <view class="bottom-action">
-        <button 
-          v-if="currentStep === 1"
-          class="btn-pay" 
-          :disabled="paying"
-          @click="handlePayment"
-        >
-          <text v-if="paying">支付中...</text>
-          <text v-else>立即支付 ¥{{ verificationFee }}</text>
-        </button>
-        
-        <button 
-          v-if="currentStep === 2"
-          class="btn-submit" 
-          :disabled="!canSubmit || submitting"
-          @click="handleSubmitVerification"
-        >
-          <text v-if="submitting">提交中...</text>
-          <text v-else>提交认证</text>
-        </button>
-        
-        <button 
-          v-if="currentStep === 3"
-          class="btn-done" 
-          @click="handleDone"
-        >
-          完成
-        </button>
-      </view>
-    </view>
-  </view>
+        }">
+				<!-- 步骤1: 支付页面 (Requirements 12.1) -->
+				<view v-if="currentStep === 1" class="step-payment">
+					<view class="payment-content">
+						<image class="realname-title-img" src="/static/ic_real_name.png" mode="widthFix" />
+
+						<!-- 实名认证的好处 -->
+						<view class="benefits-section">
+							<view class="benefits-title">实名认证的好处</view>
+							<view class="benefits-list">
+								<view class="benefit-item">
+									<text class="benefit-num">1、</text>
+									<text class="benefit-text">资料中会显示"<text class="highlight">已实名</text>"标签；</text>
+								</view>
+								<view class="benefit-item">
+									<text class="benefit-num">2、</text>
+									<text class="benefit-text">赠送 <text class="highlight">1个</text> 联系次数:</text>
+								</view>
+								<view class="benefit-item">
+									<text class="benefit-num">3、</text>
+									<text class="benefit-text"><text class="highlight">同城优先</text> 被推荐；</text>
+								</view>
+								<view class="benefit-item">
+									<text class="benefit-num">4、</text>
+									<text class="benefit-text">享有"<text
+											class="highlight">实名相亲</text>"权益，开启后，只有完成实名认证的家长才能联系您。</text>
+								</view>
+							</view>
+						</view>
+
+						<!-- 联系客服 -->
+						<view class="contact-service" @click="handleContactService">
+							<image class="service-avatar" src="/static/ic_service.png" mode="aspectFill" />
+							<text class="service-text">联系客服</text>
+						</view>
+					</view>
+				</view>
+
+				<!-- 步骤2: 身份证上传页面 (Requirements 12.2, 12.3) -->
+				<view v-if="currentStep === 2" class="step-upload">
+					<view class="upload-content">
+						<!-- 提示文字 -->
+						<view class="upload-tip-text">
+							<text class="tip-main">请上传您的身份证正反面</text>
+							<text class="tip-sub">(我们仅用于实名认证)</text>
+						</view>
+
+						<!-- 身份证正面 -->
+						<view class="upload-card-new" @click="chooseIdCardFront">
+							<view class="card-frame">
+								<image v-if="idCardFront" :src="idCardFront" mode="aspectFill" class="card-image-uploaded" />
+								<image v-else src="/static/real_name_card_1.png" mode="aspectFit" class="card-placeholder-img" />
+							</view>
+							<text class="card-label-new">拍照上传身份证正面</text>
+						</view>
+
+						<!-- 身份证反面 -->
+						<view class="upload-card-new" @click="chooseIdCardBack">
+							<view class="card-frame">
+								<image v-if="idCardBack" :src="idCardBack" mode="aspectFill" class="card-image-uploaded" />
+								<image v-else src="/static/real_name_card_2.png" mode="aspectFit" class="card-placeholder-img" />
+							</view>
+							<text class="card-label-new">拍照上传身份证反面</text>
+						</view>
+					</view>
+				</view>
+
+				<!-- 步骤3: 认证结果页面 (Requirements 12.4) -->
+				<view v-if="currentStep === 3" class="step-result">
+					<view class="result-content">
+						<!-- 顶部图标 -->
+						<image class="result-shield-img" src="/static/ic_real_name.png" mode="widthFix" />
+
+						<!-- 已实名信息卡片 -->
+						<view class="result-info-card">
+							<view class="card-title">已实名信息</view>
+							<view class="info-row">
+								<text class="info-label">姓名</text>
+								<text class="info-value">{{ maskedName }}</text>
+							</view>
+							<view class="info-row">
+								<text class="info-label">身份证</text>
+								<text class="info-value">{{ maskedIdNumber }}</text>
+							</view>
+						</view>
+					</view>
+				</view>
+			</scroll-view>
+
+			<!-- 底部操作按钮 -->
+			<view class="bottom-action">
+				<!-- 步骤1的两个按钮 -->
+				<view v-if="currentStep === 1" class="step1-buttons">
+					<view class="btn-member-wrapper">
+						<button class="btn-member" @click="handleGoMember">
+							<text>开通会员 可免费认证</text>
+						</button>
+						<view class="btn-tag">更省钱</view>
+					</view>
+					<button class="btn-pay-simple" :disabled="paying" @click="handlePayment">
+						<text v-if="paying">支付中...</text>
+						<text v-else>{{ verificationFee }}元认证</text>
+					</button>
+				</view>
+
+				<button v-if="currentStep === 2" class="btn-submit" :disabled="!canSubmit || submitting"
+					@click="handleSubmitVerification">
+					<text v-if="submitting">提交中...</text>
+					<text v-else>提交认证</text>
+				</button>
+
+				<button v-if="currentStep === 3" class="btn-done" @click="handleDone">
+					<text>完成</text>
+				</button>
+			</view>
+		</view>
+	</view>
 </template>
 
 <script>
-import { ref, computed, onMounted } from 'vue'
-import { useUserStore } from '@/store/user.js'
-import { createOrder } from '@/api/order.js'
-import { maskName, maskIdNumber } from '@/utils/format.js'
-import { get } from '@/api/request.js'
-import { getToken } from '@/utils/storage.js'
-import Loading from '@/components/Loading/index.vue'
-import config from '@/config/index.js'
+	import {
+		ref,
+		computed,
+		onMounted
+	} from 'vue'
+	import {
+		useUserStore
+	} from '@/store/user.js'
+	import {
+		createOrder
+	} from '@/api/order.js'
+	import {
+		maskName,
+		maskIdNumber
+	} from '@/utils/format.js'
+	import {
+		get
+	} from '@/api/request.js'
+	import {
+		getToken
+	} from '@/utils/storage.js'
+	import Loading from '@/components/Loading/index.vue'
+	import config from '@/config/index.js'
 
-// 从统一配置获取 API 基础地址
-const BASE_URL = config.API_BASE_URL
+	// 从统一配置获取 API 基础地址
+	const BASE_URL = config.API_BASE_URL
 
-export default {
-  name: 'RealnamePage',
-  components: {
-    Loading
-  },
-  setup() {
-    const userStore = useUserStore()
-    
-    // 状态栏高度
-    const statusBarHeight = ref(20)
-    
-    // 页面状态
-    const pageLoading = ref(true)
-    const paying = ref(false)
-    const submitting = ref(false)
-    const currentStep = ref(1) // 1: 支付, 2: 上传, 3: 结果
-    
-    // 认证费用 (Requirements 12.1)
-    const verificationFee = ref(88)
-    
-    // 身份证照片
-    const idCardFront = ref('')
-    const idCardBack = ref('')
-    
-    // 认证结果
-    const verificationResult = ref(null)
-    
-    // 获取系统信息
-    const getSystemInfo = () => {
-      uni.getSystemInfo({
-        success: (res) => {
-          statusBarHeight.value = res.statusBarHeight || 20
-        }
-      })
-    }
-    
-    // 返回上一页
-    const handleBack = () => {
-      uni.navigateBack()
-    }
-    
-    // 计算属性
-    const isVerified = computed(() => userStore.isRealName)
-    
-    const canSubmit = computed(() => {
-      return idCardFront.value && idCardBack.value
-    })
-    
-    const maskedName = computed(() => {
-      if (verificationResult.value?.name) {
-        return maskName(verificationResult.value.name)
-      }
-      return '***'
-    })
-    
-    const maskedIdNumber = computed(() => {
-      if (verificationResult.value?.idNumber) {
-        return maskIdNumber(verificationResult.value.idNumber)
-      }
-      return '***************'
-    })
-    
-    /**
-     * 获取实名认证状态
-     */
-    const getRealNameStatus = async () => {
-      try {
-        const res = await get('/realname/status')
-        if (res && res.success && res.data) {
-          if (res.data.isVerified) {
-            userStore.setRealNameStatus(true)
-            verificationResult.value = {
-              name: res.data.name,
-              idNumber: res.data.idNumber
-            }
-          } else if (res.data.isPaid) {
-            // 已支付但未完成上传
-            currentStep.value = 2
-          }
-        }
-      } catch (error) {
-        console.error('获取实名状态失败:', error)
-      }
-    }
-    
-    /**
-     * 初始化页面
-     */
-    const initPage = async () => {
-      pageLoading.value = true
-      try {
-        getSystemInfo()
-        userStore.restoreFromStorage()
-        await getRealNameStatus()
-      } catch (error) {
-        console.error('初始化页面失败:', error)
-      } finally {
-        pageLoading.value = false
-      }
-    }
-    
-    /**
-     * 处理支付 (Requirements 12.1, 12.2)
-     */
-    const handlePayment = async () => {
-      if (paying.value) return
-      
-      paying.value = true
-      
-      try {
-        // 创建实名认证订单
-        const orderRes = await createOrder({
-          orderType: 2 // 实名认证订单
-        })
-        
-        if (!orderRes || !orderRes.success) {
-          uni.showToast({ 
-            title: orderRes?.message || '创建订单失败', 
-            icon: 'none' 
-          })
-          return
-        }
-        
-        const paymentParams = orderRes.data
-        
-        // 调用微信支付
-        await requestPayment(paymentParams)
-        
-        // 支付成功，进入上传步骤 (Requirements 12.2)
-        currentStep.value = 2
-        
-        uni.showToast({ 
-          title: '支付成功', 
-          icon: 'success' 
-        })
-        
-      } catch (error) {
-        console.error('支付失败:', error)
-        
-        if (error.errMsg && error.errMsg.includes('cancel')) {
-          uni.showToast({ title: '支付已取消', icon: 'none' })
-        } else {
-          uni.showToast({ 
-            title: error.message || '支付失败，请重试', 
-            icon: 'none' 
-          })
-        }
-      } finally {
-        paying.value = false
-      }
-    }
-    
-    /**
-     * 调用微信支付
-     */
-    const requestPayment = (params) => {
-      return new Promise((resolve, reject) => {
-        uni.requestPayment({
-          provider: 'wxpay',
-          timeStamp: params.timeStamp,
-          nonceStr: params.nonceStr,
-          package: params.package,
-          signType: params.signType || 'MD5',
-          paySign: params.paySign,
-          success: resolve,
-          fail: reject
-        })
-      })
-    }
-    
-    /**
-     * 选择身份证正面照片
-     */
-    const chooseIdCardFront = () => {
-      uni.chooseImage({
-        count: 1,
-        sizeType: ['compressed'],
-        sourceType: ['album', 'camera'],
-        success: (res) => {
-          idCardFront.value = res.tempFilePaths[0]
-        }
-      })
-    }
-    
-    /**
-     * 选择身份证反面照片
-     */
-    const chooseIdCardBack = () => {
-      uni.chooseImage({
-        count: 1,
-        sizeType: ['compressed'],
-        sourceType: ['album', 'camera'],
-        success: (res) => {
-          idCardBack.value = res.tempFilePaths[0]
-        }
-      })
-    }
-    
-    /**
-     * 提交实名认证 (Requirements 12.3)
-     */
-    const handleSubmitVerification = async () => {
-      if (!canSubmit.value || submitting.value) return
-      
-      submitting.value = true
-      
-      try {
-        // 上传身份证照片并提交认证
-        const result = await uploadIdCards()
-        
-        if (result && result.success) {
-          // 认证成功，更新状态
-          userStore.setRealNameStatus(true)
-          verificationResult.value = {
-            name: result.data.name,
-            idNumber: result.data.idNumber
-          }
-          
-          // 进入结果页面 (Requirements 12.4)
-          currentStep.value = 3
-          
-          uni.showToast({ 
-            title: '认证成功', 
-            icon: 'success' 
-          })
-        } else {
-          uni.showToast({ 
-            title: result?.message || '认证失败，请重试', 
-            icon: 'none' 
-          })
-        }
-      } catch (error) {
-        console.error('提交认证失败:', error)
-        uni.showToast({ 
-          title: error.message || '认证失败，请重试', 
-          icon: 'none' 
-        })
-      } finally {
-        submitting.value = false
-      }
-    }
-    
-    /**
-     * 上传身份证照片
-     */
-    const uploadIdCards = () => {
-      return new Promise((resolve, reject) => {
-        const token = getToken()
-        
-        // 先上传正面
-        uni.uploadFile({
-          url: `${BASE_URL}/realname/verify`,
-          filePath: idCardFront.value,
-          name: 'frontImage',
-          formData: {
-            backImagePath: idCardBack.value
-          },
-          header: {
-            'Authorization': `Bearer ${token}`
-          },
-          success: async (uploadRes) => {
-            if (uploadRes.statusCode === 200) {
-              try {
-                const data = JSON.parse(uploadRes.data)
-                
-                // 如果需要单独上传反面，再上传
-                if (data.needBackImage) {
-                  const backResult = await uploadBackImage(token)
-                  resolve(backResult)
-                } else {
-                  resolve(data)
-                }
-              } catch (e) {
-                reject(new Error('解析响应失败'))
-              }
-            } else if (uploadRes.statusCode === 401) {
-              reject(new Error('未授权，请重新登录'))
-            } else {
-              try {
-                const errorData = JSON.parse(uploadRes.data)
-                reject(new Error(errorData.message || '认证失败'))
-              } catch (e) {
-                reject(new Error('认证失败'))
-              }
-            }
-          },
-          fail: (err) => {
-            reject(new Error('网络连接失败'))
-          }
-        })
-      })
-    }
-    
-    /**
-     * 上传身份证反面
-     */
-    const uploadBackImage = (token) => {
-      return new Promise((resolve, reject) => {
-        uni.uploadFile({
-          url: `${BASE_URL}/realname/verify/back`,
-          filePath: idCardBack.value,
-          name: 'backImage',
-          header: {
-            'Authorization': `Bearer ${token}`
-          },
-          success: (uploadRes) => {
-            if (uploadRes.statusCode === 200) {
-              try {
-                const data = JSON.parse(uploadRes.data)
-                resolve(data)
-              } catch (e) {
-                reject(new Error('解析响应失败'))
-              }
-            } else {
-              reject(new Error('上传失败'))
-            }
-          },
-          fail: () => {
-            reject(new Error('网络连接失败'))
-          }
-        })
-      })
-    }
-    
-    /**
-     * 完成认证，返回上一页
-     */
-    const handleDone = () => {
-      uni.navigateBack()
-    }
-    
-    onMounted(() => {
-      initPage()
-    })
-    
-    return {
-      statusBarHeight,
-      pageLoading,
-      paying,
-      submitting,
-      currentStep,
-      verificationFee,
-      idCardFront,
-      idCardBack,
-      isVerified,
-      canSubmit,
-      maskedName,
-      maskedIdNumber,
-      handleBack,
-      handlePayment,
-      chooseIdCardFront,
-      chooseIdCardBack,
-      handleSubmitVerification,
-      handleDone
-    }
-  },
-  onShow() {
-    const userStore = useUserStore()
-    userStore.restoreFromStorage()
-  }
-}
+	export default {
+		name: 'RealnamePage',
+		components: {
+			Loading
+		},
+		setup() {
+			const userStore = useUserStore()
+
+			// 状态栏高度
+			const statusBarHeight = ref(20)
+
+			// 页面状态
+			const pageLoading = ref(true)
+			const paying = ref(false)
+			const submitting = ref(false)
+			const currentStep = ref(1) // 1: 支付, 2: 上传, 3: 结果
+
+			// 认证费用 (Requirements 12.1)
+			const verificationFee = ref(88)
+
+			// 身份证照片
+			const idCardFront = ref('')
+			const idCardBack = ref('')
+
+			// 认证结果
+			const verificationResult = ref(null)
+
+			// 获取系统信息
+			const getSystemInfo = () => {
+				uni.getSystemInfo({
+					success: (res) => {
+						statusBarHeight.value = res.statusBarHeight || 20
+					}
+				})
+			}
+
+			// 返回上一页
+			const handleBack = () => {
+				uni.navigateBack()
+			}
+
+			// 计算属性
+			const isVerified = computed(() => userStore.isRealName)
+
+			const canSubmit = computed(() => {
+				return idCardFront.value && idCardBack.value
+			})
+
+			const maskedName = computed(() => {
+				if (verificationResult.value?.name) {
+					return maskName(verificationResult.value.name)
+				}
+				return '***'
+			})
+
+			const maskedIdNumber = computed(() => {
+				if (verificationResult.value?.idNumber) {
+					return maskIdNumber(verificationResult.value.idNumber)
+				}
+				return '***************'
+			})
+
+			/**
+			 * 获取实名认证状态
+			 */
+			const getRealNameStatus = async () => {
+				try {
+					const res = await get('/realname/status')
+					if (res && res.success && res.data) {
+						if (res.data.isVerified) {
+							userStore.setRealNameStatus(true)
+							verificationResult.value = {
+								name: res.data.name,
+								idNumber: res.data.idNumber
+							}
+						} else if (res.data.isPaid) {
+							// 已支付但未完成上传
+							currentStep.value = 2
+						}
+					}
+				} catch (error) {
+					console.error('获取实名状态失败:', error)
+				}
+			}
+
+			/**
+			 * 初始化页面
+			 */
+			const initPage = async () => {
+				pageLoading.value = true
+				try {
+					getSystemInfo()
+					userStore.restoreFromStorage()
+					await getRealNameStatus()
+				} catch (error) {
+					console.error('初始化页面失败:', error)
+				} finally {
+					pageLoading.value = false
+				}
+			}
+
+			/**
+			 * 处理支付 (Requirements 12.1, 12.2)
+			 */
+			const handlePayment = async () => {
+				if (paying.value) return
+
+				paying.value = true
+
+				try {
+					// 创建实名认证订单
+					const orderRes = await createOrder({
+						orderType: 2 // 实名认证订单
+					})
+
+					if (!orderRes || !orderRes.success) {
+						uni.showToast({
+							title: orderRes?.message || '创建订单失败',
+							icon: 'none'
+						})
+						return
+					}
+
+					const paymentParams = orderRes.data
+
+					// 调用微信支付
+					await requestPayment(paymentParams)
+
+					// 支付成功，进入上传步骤 (Requirements 12.2)
+					currentStep.value = 2
+
+					uni.showToast({
+						title: '支付成功',
+						icon: 'success'
+					})
+
+				} catch (error) {
+					console.error('支付失败:', error)
+
+					if (error.errMsg && error.errMsg.includes('cancel')) {
+						uni.showToast({
+							title: '支付已取消',
+							icon: 'none'
+						})
+					} else {
+						uni.showToast({
+							title: error.message || '支付失败，请重试',
+							icon: 'none'
+						})
+					}
+				} finally {
+					paying.value = false
+				}
+			}
+
+			/**
+			 * 调用微信支付
+			 */
+			const requestPayment = (params) => {
+				return new Promise((resolve, reject) => {
+					uni.requestPayment({
+						provider: 'wxpay',
+						timeStamp: params.timeStamp,
+						nonceStr: params.nonceStr,
+						package: params.package,
+						signType: params.signType || 'MD5',
+						paySign: params.paySign,
+						success: resolve,
+						fail: reject
+					})
+				})
+			}
+
+			/**
+			 * 选择身份证正面照片
+			 */
+			const chooseIdCardFront = () => {
+				uni.chooseImage({
+					count: 1,
+					sizeType: ['compressed'],
+					sourceType: ['album', 'camera'],
+					success: (res) => {
+						idCardFront.value = res.tempFilePaths[0]
+					}
+				})
+			}
+
+			/**
+			 * 选择身份证反面照片
+			 */
+			const chooseIdCardBack = () => {
+				uni.chooseImage({
+					count: 1,
+					sizeType: ['compressed'],
+					sourceType: ['album', 'camera'],
+					success: (res) => {
+						idCardBack.value = res.tempFilePaths[0]
+					}
+				})
+			}
+
+			/**
+			 * 提交实名认证 (Requirements 12.3)
+			 */
+			const handleSubmitVerification = async () => {
+				if (!canSubmit.value || submitting.value) return
+
+				submitting.value = true
+
+				try {
+					// 上传身份证照片并提交认证
+					const result = await uploadIdCards()
+
+					if (result && result.success) {
+						// 认证成功，更新状态
+						userStore.setRealNameStatus(true)
+						verificationResult.value = {
+							name: result.data.name,
+							idNumber: result.data.idNumber
+						}
+
+						// 进入结果页面 (Requirements 12.4)
+						currentStep.value = 3
+
+						uni.showToast({
+							title: '认证成功',
+							icon: 'success'
+						})
+					} else {
+						uni.showToast({
+							title: result?.message || '认证失败，请重试',
+							icon: 'none'
+						})
+					}
+				} catch (error) {
+					console.error('提交认证失败:', error)
+					uni.showToast({
+						title: error.message || '认证失败，请重试',
+						icon: 'none'
+					})
+				} finally {
+					submitting.value = false
+				}
+			}
+
+			/**
+			 * 上传身份证照片
+			 */
+			const uploadIdCards = () => {
+				return new Promise((resolve, reject) => {
+					const token = getToken()
+
+					// 先上传正面
+					uni.uploadFile({
+						url: `${BASE_URL}/realname/verify`,
+						filePath: idCardFront.value,
+						name: 'frontImage',
+						formData: {
+							backImagePath: idCardBack.value
+						},
+						header: {
+							'Authorization': `Bearer ${token}`
+						},
+						success: async (uploadRes) => {
+							if (uploadRes.statusCode === 200) {
+								try {
+									const data = JSON.parse(uploadRes.data)
+
+									// 如果需要单独上传反面，再上传
+									if (data.needBackImage) {
+										const backResult = await uploadBackImage(token)
+										resolve(backResult)
+									} else {
+										resolve(data)
+									}
+								} catch (e) {
+									reject(new Error('解析响应失败'))
+								}
+							} else if (uploadRes.statusCode === 401) {
+								reject(new Error('未授权，请重新登录'))
+							} else {
+								try {
+									const errorData = JSON.parse(uploadRes.data)
+									reject(new Error(errorData.message || '认证失败'))
+								} catch (e) {
+									reject(new Error('认证失败'))
+								}
+							}
+						},
+						fail: (err) => {
+							reject(new Error('网络连接失败'))
+						}
+					})
+				})
+			}
+
+			/**
+			 * 上传身份证反面
+			 */
+			const uploadBackImage = (token) => {
+				return new Promise((resolve, reject) => {
+					uni.uploadFile({
+						url: `${BASE_URL}/realname/verify/back`,
+						filePath: idCardBack.value,
+						name: 'backImage',
+						header: {
+							'Authorization': `Bearer ${token}`
+						},
+						success: (uploadRes) => {
+							if (uploadRes.statusCode === 200) {
+								try {
+									const data = JSON.parse(uploadRes.data)
+									resolve(data)
+								} catch (e) {
+									reject(new Error('解析响应失败'))
+								}
+							} else {
+								reject(new Error('上传失败'))
+							}
+						},
+						fail: () => {
+							reject(new Error('网络连接失败'))
+						}
+					})
+				})
+			}
+
+			/**
+			 * 完成认证，返回上一页
+			 */
+			const handleDone = () => {
+				uni.navigateBack()
+			}
+
+			/**
+			 * 跳转会员页面
+			 */
+			const handleGoMember = () => {
+				uni.navigateTo({
+					url: '/pages/member/index'
+				})
+			}
+
+			/**
+			 * 联系客服
+			 */
+			const handleContactService = () => {
+				uni.navigateTo({
+					url: '/pages/butler/index'
+				})
+			}
+
+			/**
+			 * 点击步骤指示器跳转（测试用）
+			 */
+			const handleStepClick = (step) => {
+				currentStep.value = step
+			}
+
+			onMounted(() => {
+				initPage()
+			})
+
+			return {
+				statusBarHeight,
+				pageLoading,
+				paying,
+				submitting,
+				currentStep,
+				verificationFee,
+				idCardFront,
+				idCardBack,
+				isVerified,
+				canSubmit,
+				maskedName,
+				maskedIdNumber,
+				handleBack,
+				handlePayment,
+				handleGoMember,
+				handleContactService,
+				handleStepClick,
+				chooseIdCardFront,
+				chooseIdCardBack,
+				handleSubmitVerification,
+				handleDone
+			}
+		},
+		onShow() {
+			const userStore = useUserStore()
+			userStore.restoreFromStorage()
+		}
+	}
 </script>
 
 
 <style lang="scss" scoped>
-.realname-page {
-  height: 100vh;
-  background-color: #f8f8f8;
-}
+	.realname-page {
+		height: 100vh;
+		background-color: #f8f8f8;
+	}
 
-// 顶部背景图
-.top-bg {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  height: 400rpx;
-  z-index: 0;
+	// 顶部背景图
+	.top-bg {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		height: 400rpx;
+		z-index: 0;
 
-  .bg-img {
-    width: 100%;
-    height: 100%;
-  }
-}
+		.bg-img {
+			width: 100%;
+			height: 100%;
+		}
+	}
 
-// 自定义导航栏
-.custom-navbar {
-  position: fixed;
-  top: 0;
-  left: 0;
-  right: 0;
-  z-index: 200;
+	// 自定义导航栏
+	.custom-navbar {
+		position: fixed;
+		top: 0;
+		left: 0;
+		right: 0;
+		z-index: 200;
 
-  .navbar-content {
-    position: relative;
-    height: 44px;
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    padding: 0 24rpx;
+		.navbar-content {
+			position: relative;
+			height: 44px;
+			display: flex;
+			align-items: center;
+			justify-content: space-between;
+			padding: 0 24rpx;
 
-    .navbar-back {
-      width: 80rpx;
-      height: 80rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
+			.navbar-back {
+				width: 80rpx;
+				height: 80rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
 
-      .back-icon {
-        font-size: 56rpx;
-        color: #333;
-        font-weight: 300;
-      }
-    }
+				.back-icon {
+					font-size: 56rpx;
+					color: #333;
+					font-weight: 300;
+				}
+			}
 
-    .navbar-title {
-      font-size: 34rpx;
-      font-weight: 600;
-      color: #333;
-    }
+			.navbar-title {
+				font-size: 34rpx;
+				font-weight: 600;
+				color: #333;
+			}
 
-    .navbar-placeholder {
-      width: 80rpx;
-    }
-  }
-}
+			.navbar-placeholder {
+				width: 80rpx;
+			}
+		}
+	}
 
-// 已认证状态
-.verified-section {
-  padding: 60rpx 30rpx;
-  padding-top: 60rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  
-  .verified-icon {
-    width: 120rpx;
-    height: 120rpx;
-    background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
-    border-radius: 50%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 60rpx;
-    color: #fff;
-    margin-bottom: 30rpx;
-  }
-  
-  .verified-title {
-    font-size: 36rpx;
-    font-weight: 600;
-    color: #333;
-    margin-bottom: 40rpx;
-  }
-  
-  .verified-info {
-    width: 100%;
-    background: #fff;
-    border-radius: 16rpx;
-    padding: 30rpx;
-    margin-bottom: 30rpx;
-    
-    .info-item {
-      display: flex;
-      align-items: center;
-      padding: 20rpx 0;
-      border-bottom: 1rpx solid #f5f5f5;
-      
-      &:last-child {
-        border-bottom: none;
-      }
-      
-      .label {
-        font-size: 28rpx;
-        color: #666;
-        width: 160rpx;
-      }
-      
-      .value {
-        font-size: 28rpx;
-        color: #333;
-        font-weight: 500;
-      }
-    }
-  }
-  
-  .verified-badge {
-    display: flex;
-    align-items: center;
-    padding: 16rpx 32rpx;
-    background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
-    border-radius: 40rpx;
-    
-    .badge-icon {
-      font-size: 32rpx;
-      margin-right: 12rpx;
-    }
-    
-    .badge-text {
-      font-size: 26rpx;
-      color: #1890ff;
-      font-weight: 500;
-    }
-  }
-}
+	// 已认证状态
+	.verified-section {
+		padding: 60rpx 30rpx;
+		padding-top: 60rpx;
+		display: flex;
+		flex-direction: column;
+		align-items: center;
 
-// 未认证状态
-.unverified-section {
-  height: 100vh;
-  position: relative;
-  z-index: 1;
-  overflow: hidden;
-}
+		.verified-icon {
+			width: 120rpx;
+			height: 120rpx;
+			background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+			border-radius: 50%;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			font-size: 60rpx;
+			color: #fff;
+			margin-bottom: 30rpx;
+		}
 
-// 可滚动内容区域
-.content-scroll {
-  position: fixed;
-  left: 0;
-  right: 0;
-  background: transparent;
-}
+		.verified-title {
+			font-size: 36rpx;
+			font-weight: 600;
+			color: #333;
+			margin-bottom: 40rpx;
+		}
 
-// 步骤内容区域
-.step-payment,
-.step-upload,
-.step-result {
-  padding: 0;
-}
+		.verified-info {
+			width: 100%;
+			background: #fff;
+			border-radius: 16rpx;
+			padding: 30rpx;
+			margin-bottom: 30rpx;
 
-// 固定的步骤指示器
-.step-header-fixed {
-  position: fixed;
-  left: 0;
-  right: 0;
-  z-index: 99;
-  padding: 20rpx 30rpx;
-  background: transparent;
-  
-  .step-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #fff;
-    border-radius: 20rpx;
-    padding: 24rpx 20rpx;
-    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-    
-    .step-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      
-      .step-num {
-        width: 48rpx;
-        height: 48rpx;
-        border-radius: 50%;
-        background: #e0e0e0;
-        color: #999;
-        font-size: 24rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 12rpx;
-      }
-      
-      .step-text {
-        font-size: 22rpx;
-        color: #999;
-      }
-      
-      &.active {
-        .step-num {
-          background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
-          color: #fff;
-        }
-        
-        .step-text {
-          color: #ff6b6b;
-          font-weight: 500;
-        }
-      }
-      
-      &.completed {
-        .step-num {
-          background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
-          color: #fff;
-        }
-        
-        .step-text {
-          color: #52c41a;
-        }
-      }
-    }
-    
-    .step-line {
-      width: 80rpx;
-      height: 4rpx;
-      background: #e0e0e0;
-      margin: 0 16rpx;
-      margin-bottom: 30rpx;
-      
-      &.completed {
-        background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
-      }
-    }
-  }
-}
+			.info-item {
+				display: flex;
+				align-items: center;
+				padding: 20rpx 0;
+				border-bottom: 1rpx solid #f5f5f5;
 
-// 步骤指示器（保留旧样式兼容）
-.step-header {
-  padding: 30rpx;
-  padding-top: 20rpx;
-  
-  .step-indicator {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    background: #fff;
-    border-radius: 20rpx;
-    padding: 24rpx 20rpx;
-    box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
-    
-    .step-item {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      
-      .step-num {
-        width: 48rpx;
-        height: 48rpx;
-        border-radius: 50%;
-        background: #e0e0e0;
-        color: #999;
-        font-size: 24rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        margin-bottom: 12rpx;
-      }
-      
-      .step-text {
-        font-size: 22rpx;
-        color: #999;
-      }
-      
-      &.active {
-        .step-num {
-          background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
-          color: #fff;
-        }
-        
-        .step-text {
-          color: #52c41a;
-        }
-      }
-    }
-    
-    .step-line {
-      width: 80rpx;
-      height: 4rpx;
-      background: #e0e0e0;
-      margin: 0 16rpx;
-      margin-bottom: 30rpx;
-      
-      &.completed {
-        background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
-      }
-    }
-  }
-}
+				&:last-child {
+					border-bottom: none;
+				}
 
-// 步骤1: 支付页面
-.step-payment {
-  .payment-content {
-    padding: 40rpx 30rpx;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    
-    .payment-icon {
-      font-size: 100rpx;
-      margin-bottom: 24rpx;
-    }
-    
-    .payment-title {
-      font-size: 40rpx;
-      font-weight: 600;
-      color: #333;
-      margin-bottom: 16rpx;
-    }
-    
-    .payment-desc {
-      font-size: 28rpx;
-      color: #666;
-      margin-bottom: 40rpx;
-    }
-    
-    .payment-benefits {
-      width: 100%;
-      background: #fff;
-      border-radius: 16rpx;
-      padding: 30rpx;
-      margin-bottom: 40rpx;
-      
-      .benefit-item {
-        display: flex;
-        align-items: center;
-        padding: 16rpx 0;
-        
-        .benefit-icon {
-          width: 40rpx;
-          height: 40rpx;
-          background: #52c41a;
-          border-radius: 50%;
-          color: #fff;
-          font-size: 24rpx;
-          display: flex;
-          align-items: center;
-          justify-content: center;
-          margin-right: 20rpx;
-        }
-        
-        .benefit-text {
-          font-size: 28rpx;
-          color: #333;
-        }
-      }
-    }
-    
-    .payment-price {
-      display: flex;
-      flex-direction: column;
-      align-items: center;
-      
-      .price-label {
-        font-size: 26rpx;
-        color: #999;
-        margin-bottom: 12rpx;
-      }
-      
-      .price-value {
-        display: flex;
-        align-items: baseline;
-        
-        .symbol {
-          font-size: 32rpx;
-          color: #ff6b6b;
-          font-weight: 500;
-        }
-        
-        .amount {
-          font-size: 72rpx;
-          color: #ff6b6b;
-          font-weight: 700;
-        }
-      }
-    }
-  }
-}
+				.label {
+					font-size: 28rpx;
+					color: #666;
+					width: 160rpx;
+				}
 
-// 步骤2: 上传页面
-.step-upload {
-  .upload-content {
-    padding: 30rpx;
-    
-    .upload-title {
-      font-size: 32rpx;
-      font-weight: 600;
-      color: #333;
-      text-align: center;
-      margin-bottom: 12rpx;
-    }
-    
-    .upload-desc {
-      font-size: 26rpx;
-      color: #999;
-      text-align: center;
-      margin-bottom: 40rpx;
-    }
-    
-    .upload-card {
-      background: #fff;
-      border-radius: 16rpx;
-      padding: 24rpx;
-      margin-bottom: 24rpx;
-      
-      .card-label {
-        font-size: 28rpx;
-        font-weight: 500;
-        color: #333;
-        margin-bottom: 20rpx;
-      }
-      
-      .card-upload {
-        width: 100%;
-        height: 320rpx;
-        background: #f8f8f8;
-        border: 2rpx dashed #ddd;
-        border-radius: 12rpx;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        overflow: hidden;
-        
-        &.has-image {
-          border-style: solid;
-          border-color: #52c41a;
-        }
-        
-        .card-image {
-          width: 100%;
-          height: 100%;
-        }
-        
-        .card-placeholder {
-          display: flex;
-          flex-direction: column;
-          align-items: center;
-          
-          .placeholder-icon {
-            font-size: 60rpx;
-            margin-bottom: 16rpx;
-          }
-          
-          .placeholder-text {
-            font-size: 26rpx;
-            color: #999;
-          }
-        }
-      }
-    }
-    
-    .upload-tips {
-      background: #fffbe6;
-      border-radius: 12rpx;
-      padding: 24rpx;
-      margin-top: 20rpx;
-      
-      .tips-title {
-        font-size: 26rpx;
-        font-weight: 500;
-        color: #d48806;
-        margin-bottom: 12rpx;
-      }
-      
-      .tips-item {
-        font-size: 24rpx;
-        color: #d48806;
-        line-height: 1.8;
-      }
-    }
-  }
-}
+				.value {
+					font-size: 28rpx;
+					color: #333;
+					font-weight: 500;
+				}
+			}
+		}
 
-// 步骤3: 结果页面
-.step-result {
-  .result-content {
-    padding: 60rpx 30rpx;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    
-    .result-icon {
-      width: 120rpx;
-      height: 120rpx;
-      border-radius: 50%;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      font-size: 60rpx;
-      color: #fff;
-      margin-bottom: 30rpx;
-      
-      &.success {
-        background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
-      }
-    }
-    
-    .result-title {
-      font-size: 36rpx;
-      font-weight: 600;
-      color: #333;
-      margin-bottom: 16rpx;
-    }
-    
-    .result-desc {
-      font-size: 28rpx;
-      color: #666;
-      margin-bottom: 40rpx;
-    }
-    
-    .result-info {
-      width: 100%;
-      background: #fff;
-      border-radius: 16rpx;
-      padding: 30rpx;
-      
-      .info-item {
-        display: flex;
-        align-items: center;
-        padding: 20rpx 0;
-        border-bottom: 1rpx solid #f5f5f5;
-        
-        &:last-child {
-          border-bottom: none;
-        }
-        
-        .label {
-          font-size: 28rpx;
-          color: #666;
-          width: 160rpx;
-        }
-        
-        .value {
-          font-size: 28rpx;
-          color: #333;
-          font-weight: 500;
-        }
-      }
-    }
-  }
-}
+		.verified-badge {
+			display: flex;
+			align-items: center;
+			padding: 16rpx 32rpx;
+			background: linear-gradient(135deg, #e6f7ff 0%, #bae7ff 100%);
+			border-radius: 40rpx;
 
-// 底部操作按钮
-.bottom-action {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: 0;
-  background: #fff;
-  padding: 20rpx 30rpx;
-  padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
-  box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
-  
-  .btn-pay,
-  .btn-submit,
-  .btn-done {
-    width: 100%;
-    height: 96rpx;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border-radius: 48rpx;
-    border: none;
-    
-    &::after {
-      border: none;
-    }
-    
-    text {
-      font-size: 32rpx;
-      font-weight: 600;
-    }
-    
-    &[disabled] {
-      opacity: 0.6;
-    }
-  }
-  
-  .btn-pay {
-    background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
-    
-    text {
-      color: #fff;
-    }
-  }
-  
-  .btn-submit {
-    background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
-    
-    text {
-      color: #fff;
-    }
-  }
-  
-  .btn-done {
-    background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
-    
-    text {
-      color: #fff;
-    }
-  }
-}
-</style>
+			.badge-icon {
+				font-size: 32rpx;
+				margin-right: 12rpx;
+			}
+
+			.badge-text {
+				font-size: 26rpx;
+				color: #1890ff;
+				font-weight: 500;
+			}
+		}
+	}
+
+	// 未认证状态
+	.unverified-section {
+		height: 100vh;
+		position: relative;
+		z-index: 1;
+		overflow: hidden;
+	}
+
+	// 可滚动内容区域
+	.content-scroll {
+		position: fixed;
+		left: 0;
+		right: 0;
+		background: transparent;
+	}
+
+	// 步骤内容区域
+	.step-payment,
+	.step-upload,
+	.step-result {
+		padding: 0;
+	}
+
+	// 固定的步骤指示器
+	.step-header-fixed {
+		position: fixed;
+		left: 0;
+		right: 0;
+		z-index: 99;
+		padding: 20rpx 30rpx;
+		background: transparent;
+
+		.step-indicator {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: #fff;
+			border-radius: 20rpx;
+			padding: 24rpx 20rpx;
+			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+
+			.step-item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.step-num {
+					width: 48rpx;
+					height: 48rpx;
+					border-radius: 50%;
+					background: #e0e0e0;
+					color: #999;
+					font-size: 24rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-bottom: 12rpx;
+				}
+
+				.step-text {
+					font-size: 22rpx;
+					color: #999;
+				}
+
+				&.active {
+					.step-num {
+						background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
+						color: #fff;
+					}
+
+					.step-text {
+						color: #ff6b6b;
+						font-weight: 500;
+					}
+				}
+
+				&.completed {
+					.step-num {
+						background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+						color: #fff;
+					}
+
+					.step-text {
+						color: #52c41a;
+					}
+				}
+			}
+
+			.step-line {
+				width: 80rpx;
+				height: 4rpx;
+				background: #e0e0e0;
+				margin: 0 16rpx;
+				margin-bottom: 30rpx;
+
+				&.completed {
+					background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+				}
+			}
+		}
+	}
+
+	// 步骤指示器（保留旧样式兼容）
+	.step-header {
+		padding: 30rpx;
+		padding-top: 20rpx;
+
+		.step-indicator {
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			background: #fff;
+			border-radius: 20rpx;
+			padding: 24rpx 20rpx;
+			box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
+
+			.step-item {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.step-num {
+					width: 48rpx;
+					height: 48rpx;
+					border-radius: 50%;
+					background: #e0e0e0;
+					color: #999;
+					font-size: 24rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					margin-bottom: 12rpx;
+				}
+
+				.step-text {
+					font-size: 22rpx;
+					color: #999;
+				}
+
+				&.active {
+					.step-num {
+						background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+						color: #fff;
+					}
+
+					.step-text {
+						color: #52c41a;
+					}
+				}
+			}
+
+			.step-line {
+				width: 80rpx;
+				height: 4rpx;
+				background: #e0e0e0;
+				margin: 0 16rpx;
+				margin-bottom: 30rpx;
+
+				&.completed {
+					background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+				}
+			}
+		}
+	}
+
+	// 步骤1: 支付页面
+	.step-payment {
+		.payment-content {
+			padding: 40rpx 30rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+			position: relative;
+
+			.realname-title-img {
+				width: 500rpx;
+				margin-bottom: 40rpx;
+			}
+
+			// 实名认证的好处
+			.benefits-section {
+				width: 100%;
+				background: #fff;
+				border-radius: 24rpx;
+				padding: 40rpx;
+
+				.benefits-title {
+					font-size: 36rpx;
+					font-weight: 600;
+					color: #1890ff;
+					margin-bottom: 32rpx;
+				}
+
+				.benefits-list {
+					.benefit-item {
+						display: flex;
+						align-items: flex-start;
+						margin-bottom: 28rpx;
+						line-height: 1.6;
+
+						&:last-child {
+							margin-bottom: 0;
+						}
+
+						.benefit-num {
+							font-size: 30rpx;
+							color: #333;
+							flex-shrink: 0;
+						}
+
+						.benefit-text {
+							font-size: 30rpx;
+							color: #333;
+
+							.highlight {
+								color: #1890ff;
+								font-weight: 500;
+							}
+						}
+					}
+				}
+			}
+
+			// 联系客服
+			.contact-service {
+				position: absolute;
+				right: 30rpx;
+				top: 380rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.service-avatar {
+					width: 80rpx;
+					height: 80rpx;
+					border-radius: 50%;
+					margin-bottom: 8rpx;
+				}
+
+				.service-text {
+					font-size: 22rpx;
+					color: #666;
+				}
+			}
+
+			.payment-icon {
+				font-size: 100rpx;
+				margin-bottom: 24rpx;
+			}
+
+			.payment-title {
+				font-size: 40rpx;
+				font-weight: 600;
+				color: #333;
+				margin-bottom: 16rpx;
+			}
+
+			.payment-desc {
+				font-size: 28rpx;
+				color: #666;
+				margin-bottom: 40rpx;
+			}
+
+			.payment-benefits {
+				width: 100%;
+				background: #fff;
+				border-radius: 16rpx;
+				padding: 30rpx;
+				margin-bottom: 40rpx;
+
+				.benefit-item {
+					display: flex;
+					align-items: center;
+					padding: 16rpx 0;
+
+					.benefit-icon {
+						width: 40rpx;
+						height: 40rpx;
+						background: #52c41a;
+						border-radius: 50%;
+						color: #fff;
+						font-size: 24rpx;
+						display: flex;
+						align-items: center;
+						justify-content: center;
+						margin-right: 20rpx;
+					}
+
+					.benefit-text {
+						font-size: 28rpx;
+						color: #333;
+					}
+				}
+			}
+
+			.payment-price {
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.price-label {
+					font-size: 26rpx;
+					color: #999;
+					margin-bottom: 12rpx;
+				}
+
+				.price-value {
+					display: flex;
+					align-items: baseline;
+
+					.symbol {
+						font-size: 32rpx;
+						color: #ff6b6b;
+						font-weight: 500;
+					}
+
+					.amount {
+						font-size: 72rpx;
+						color: #ff6b6b;
+						font-weight: 700;
+					}
+				}
+			}
+		}
+	}
+
+	// 步骤2: 上传页面
+	.step-upload {
+		.upload-content {
+			padding: 40rpx 30rpx;
+			display: flex;
+			flex-direction: column;
+			gap: 40rpx;
+
+			.upload-tip-text {
+				display: flex;
+				align-items: baseline;
+				justify-content: center;
+				margin-bottom: 20rpx;
+
+				.tip-main {
+					font-size: 34rpx;
+					font-weight: 600;
+					color: #333;
+				}
+
+				.tip-sub {
+					font-size: 26rpx;
+					color: #999;
+					margin-left: 8rpx;
+				}
+			}
+
+			.upload-card-new {
+				background: #fff;
+				border-radius: 24rpx;
+				padding: 40rpx;
+				display: flex;
+				flex-direction: column;
+				align-items: center;
+
+				.card-frame {
+					width: 100%;
+					height: 320rpx;
+					background: #F6F8FA;
+					border-radius: 10rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+
+					.card-placeholder-img {
+						width: 400rpx;
+						height: 260rpx;
+					}
+
+					.card-image-uploaded {
+						width: 100%;
+						height: 100%;
+						border-radius: 10rpx;
+					}
+				}
+
+				.card-label-new {
+					margin-top: 24rpx;
+					font-size: 32rpx;
+					color: #333;
+					font-weight: 500;
+				}
+			}
+
+			.upload-title {
+				font-size: 32rpx;
+				font-weight: 600;
+				color: #333;
+				text-align: center;
+				margin-bottom: 12rpx;
+			}
+
+			.upload-desc {
+				font-size: 26rpx;
+				color: #999;
+				text-align: center;
+				margin-bottom: 40rpx;
+			}
+
+			.upload-card {
+				background: #fff;
+				border-radius: 16rpx;
+				padding: 24rpx;
+				margin-bottom: 24rpx;
+
+				.card-label {
+					font-size: 28rpx;
+					font-weight: 500;
+					color: #333;
+					margin-bottom: 20rpx;
+				}
+
+				.card-upload {
+					width: 100%;
+					height: 320rpx;
+					background: #f8f8f8;
+					border: 2rpx dashed #ddd;
+					border-radius: 12rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					overflow: hidden;
+
+					&.has-image {
+						border-style: solid;
+						border-color: #52c41a;
+					}
+
+					.card-image {
+						width: 100%;
+						height: 100%;
+					}
+
+					.card-placeholder {
+						display: flex;
+						flex-direction: column;
+						align-items: center;
+
+						.placeholder-icon {
+							font-size: 60rpx;
+							margin-bottom: 16rpx;
+						}
+
+						.placeholder-text {
+							font-size: 26rpx;
+							color: #999;
+						}
+					}
+				}
+			}
+
+			.upload-tips {
+				background: #fffbe6;
+				border-radius: 12rpx;
+				padding: 24rpx;
+				margin-top: 20rpx;
+
+				.tips-title {
+					font-size: 26rpx;
+					font-weight: 500;
+					color: #d48806;
+					margin-bottom: 12rpx;
+				}
+
+				.tips-item {
+					font-size: 24rpx;
+					color: #d48806;
+					line-height: 1.8;
+				}
+			}
+		}
+	}
+
+	// 步骤3: 结果页面
+	.step-result {
+		.result-content {
+			padding: 40rpx 30rpx;
+			display: flex;
+			flex-direction: column;
+			align-items: center;
+
+			.result-shield-img {
+				width: 400rpx;
+				margin-bottom: 60rpx;
+			}
+
+			.result-info-card {
+				width: 100%;
+				background: #fff;
+				border-radius: 24rpx;
+				padding: 40rpx;
+
+				.card-title {
+					font-size: 34rpx;
+					font-weight: 600;
+					color: #333;
+					margin-bottom: 32rpx;
+				}
+
+				.info-row {
+					display: flex;
+					align-items: center;
+					justify-content: space-between;
+					padding: 24rpx 0;
+					border-bottom: 1rpx solid #f5f5f5;
+
+					&:last-child {
+						border-bottom: none;
+					}
+
+					.info-label {
+						font-size: 30rpx;
+						color: #666;
+					}
+
+					.info-value {
+						font-size: 30rpx;
+						color: #333;
+					}
+				}
+			}
+
+			.result-icon {
+				width: 120rpx;
+				height: 120rpx;
+				border-radius: 50%;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				font-size: 60rpx;
+				color: #fff;
+				margin-bottom: 30rpx;
+
+				&.success {
+					background: linear-gradient(135deg, #52c41a 0%, #389e0d 100%);
+				}
+			}
+
+			.result-title {
+				font-size: 36rpx;
+				font-weight: 600;
+				color: #333;
+				margin-bottom: 16rpx;
+			}
+
+			.result-desc {
+				font-size: 28rpx;
+				color: #666;
+				margin-bottom: 40rpx;
+			}
+
+			.result-info {
+				width: 100%;
+				background: #fff;
+				border-radius: 16rpx;
+				padding: 30rpx;
+
+				.info-item {
+					display: flex;
+					align-items: center;
+					padding: 20rpx 0;
+					border-bottom: 1rpx solid #f5f5f5;
+
+					&:last-child {
+						border-bottom: none;
+					}
+
+					.label {
+						font-size: 28rpx;
+						color: #666;
+						width: 160rpx;
+					}
+
+					.value {
+						font-size: 28rpx;
+						color: #333;
+						font-weight: 500;
+					}
+				}
+			}
+		}
+	}
+
+	// 底部操作按钮
+	.bottom-action {
+		position: fixed;
+		left: 0;
+		right: 0;
+		bottom: 0;
+		background: #fff;
+		padding: 20rpx 30rpx;
+		padding-bottom: calc(20rpx + env(safe-area-inset-bottom));
+		box-shadow: 0 -4rpx 20rpx rgba(0, 0, 0, 0.05);
+
+		// 步骤1的两个按钮
+		.step1-buttons {
+			display: flex;
+			flex-direction: column;
+			gap: 20rpx;
+
+			.btn-member-wrapper {
+				position: relative;
+
+				.btn-member {
+					width: 100%;
+					height: 96rpx;
+					display: flex;
+					align-items: center;
+					justify-content: center;
+					border-radius: 48rpx;
+					border: none;
+					background: linear-gradient(135deg, #ABCEFF 0%, #156EFF 100%);
+
+					&::after {
+						border: none;
+					}
+
+					text {
+						font-size: 32rpx;
+						font-weight: 600;
+						color: #fff;
+					}
+				}
+
+				.btn-tag {
+					position: absolute;
+					right: 40rpx;
+					top: -16rpx;
+					background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
+					color: #fff;
+					font-size: 22rpx;
+					padding: 6rpx 16rpx;
+					border-radius: 16rpx;
+				}
+			}
+
+			.btn-pay-simple {
+				width: 100%;
+				height: 96rpx;
+				display: flex;
+				align-items: center;
+				justify-content: center;
+				border-radius: 48rpx;
+				border: 2rpx solid #0062FF;
+				background: #fff;
+
+				&::after {
+					border: none;
+				}
+
+				text {
+					font-size: 32rpx;
+					font-weight: 600;
+					color: #46A2FF;
+				}
+
+				&[disabled] {
+					opacity: 0.6;
+				}
+			}
+		}
+
+		.btn-pay,
+		.btn-submit,
+		.btn-done {
+			width: 100%;
+			height: 96rpx;
+			display: flex;
+			align-items: center;
+			justify-content: center;
+			border-radius: 48rpx;
+			border: none;
+
+			&::after {
+				border: none;
+			}
+
+			text {
+				font-size: 32rpx;
+				font-weight: 600;
+			}
+
+			&[disabled] {
+				opacity: 0.6;
+			}
+		}
+
+		.btn-pay {
+			background: linear-gradient(135deg, #ff6b6b 0%, #ff5252 100%);
+
+			text {
+				color: #fff;
+			}
+		}
+
+		.btn-submit {
+			background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+
+			text {
+				color: #fff;
+			}
+		}
+
+		.btn-done {
+			background: linear-gradient(135deg, #1890ff 0%, #096dd9 100%);
+
+			text {
+				color: #fff;
+			}
+		}
+	}
+</style>
\ No newline at end of file
diff --git a/miniapp/static/ic_real_name.png b/miniapp/static/ic_real_name.png
new file mode 100644
index 0000000..af49e5a
Binary files /dev/null and b/miniapp/static/ic_real_name.png differ
diff --git a/miniapp/static/real_name_card_1.png b/miniapp/static/real_name_card_1.png
new file mode 100644
index 0000000..f04fbec
Binary files /dev/null and b/miniapp/static/real_name_card_1.png differ
diff --git a/miniapp/static/real_name_card_2.png b/miniapp/static/real_name_card_2.png
new file mode 100644
index 0000000..0238f1e
Binary files /dev/null and b/miniapp/static/real_name_card_2.png differ
diff --git a/miniapp/static/recommend_title.png b/miniapp/static/recommend_title.png
new file mode 100644
index 0000000..53bfda4
Binary files /dev/null and b/miniapp/static/recommend_title.png differ
diff --git a/server/src/XiangYi.AppApi/Controllers/UserController.cs b/server/src/XiangYi.AppApi/Controllers/UserController.cs
index ec3c45d..0f5fd3a 100644
--- a/server/src/XiangYi.AppApi/Controllers/UserController.cs
+++ b/server/src/XiangYi.AppApi/Controllers/UserController.cs
@@ -45,13 +45,14 @@ public class UserController : ControllerBase
     /// </summary>
     /// <param name="pageIndex">页码</param>
     /// <param name="pageSize">每页数量</param>
+    /// <param name="gender">筛选性别（1=男，2=女，0=不限）</param>
     /// <returns>推荐用户列表</returns>
     [HttpGet("recommend")]
     [AllowAnonymous]
-    public async Task<ApiResponse<PagedResult<RecommendUserResponse>>> GetRecommend([FromQuery] int pageIndex = 1, [FromQuery] int pageSize = 10)
+    public async Task<ApiResponse<PagedResult<RecommendUserResponse>>> GetRecommend([FromQuery] int pageIndex = 1, [FromQuery] int pageSize = 10, [FromQuery] int gender = 0)
     {
         var userId = GetCurrentUserId();
-        var result = await _recommendService.GetDailyRecommendAsync(userId, pageIndex, pageSize);
+        var result = await _recommendService.GetDailyRecommendAsync(userId, pageIndex, pageSize, gender);
         return ApiResponse<PagedResult<RecommendUserResponse>>.Success(result);
     }
 
diff --git a/server/src/XiangYi.Application/Interfaces/IRecommendService.cs b/server/src/XiangYi.Application/Interfaces/IRecommendService.cs
index a40316e..d06c2ea 100644
--- a/server/src/XiangYi.Application/Interfaces/IRecommendService.cs
+++ b/server/src/XiangYi.Application/Interfaces/IRecommendService.cs
@@ -13,8 +13,9 @@ public interface IRecommendService
     /// <param name="userId">用户ID，0表示未登录</param>
     /// <param name="pageIndex">页码</param>
     /// <param name="pageSize">每页数量</param>
+    /// <param name="gender">筛选性别（1=男，2=女，0=不限）</param>
     /// <returns>分页推荐用户列表</returns>
-    Task<PagedResult<RecommendUserResponse>> GetDailyRecommendAsync(long userId, int pageIndex = 1, int pageSize = 10);
+    Task<PagedResult<RecommendUserResponse>> GetDailyRecommendAsync(long userId, int pageIndex = 1, int pageSize = 10, int gender = 0);
 
     /// <summary>
     /// 为指定用户生成每日推荐列表
diff --git a/server/src/XiangYi.Application/Services/ChatService.cs b/server/src/XiangYi.Application/Services/ChatService.cs
index 28f3662..61ad423 100644
--- a/server/src/XiangYi.Application/Services/ChatService.cs
+++ b/server/src/XiangYi.Application/Services/ChatService.cs
@@ -265,12 +265,7 @@ public class ChatService : IChatService
             !m.IsRead &&
             m.Status == (int)MessageStatus.Normal);
 
-        if (!unreadMessages.Any())
-        {
-            return 0;
-        }
-
-        // 标记为已读
+        // 标记消息为已读
         foreach (var message in unreadMessages)
         {
             message.IsRead = true;
@@ -278,17 +273,24 @@ public class ChatService : IChatService
             await _messageRepository.UpdateAsync(message);
         }
 
-        // 重置会话未读数
-        if (session.User1Id == userId)
+        // 始终重置会话未读数（即使没有未读消息，也确保未读数为0）
+        var needUpdateSession = false;
+        if (session.User1Id == userId && session.User1UnreadCount > 0)
         {
             session.User1UnreadCount = 0;
+            needUpdateSession = true;
         }
-        else
+        else if (session.User2Id == userId && session.User2UnreadCount > 0)
         {
             session.User2UnreadCount = 0;
+            needUpdateSession = true;
+        }
+        
+        if (needUpdateSession)
+        {
+            session.UpdateTime = DateTime.Now;
+            await _sessionRepository.UpdateAsync(session);
         }
-        session.UpdateTime = DateTime.Now;
-        await _sessionRepository.UpdateAsync(session);
 
         _logger.LogInformation("标记消息已读: SessionId={SessionId}, UserId={UserId}, Count={Count}",
             sessionId, userId, unreadMessages.Count);
diff --git a/server/src/XiangYi.Application/Services/RecommendService.cs b/server/src/XiangYi.Application/Services/RecommendService.cs
index f1a37b9..70e7fb9 100644
--- a/server/src/XiangYi.Application/Services/RecommendService.cs
+++ b/server/src/XiangYi.Application/Services/RecommendService.cs
@@ -76,14 +76,14 @@ public class RecommendService : IRecommendService
     }
 
     /// <inheritdoc />
-    public async Task<PagedResult<RecommendUserResponse>> GetDailyRecommendAsync(long userId, int pageIndex = 1, int pageSize = 10)
+    public async Task<PagedResult<RecommendUserResponse>> GetDailyRecommendAsync(long userId, int pageIndex = 1, int pageSize = 10, int gender = 0)
     {
         var today = DateTime.Today;
 
         // 未登录用户，返回默认推荐（随机推荐已审核通过的用户）
         if (userId <= 0)
         {
-            return await GetDefaultRecommendAsync(pageIndex, pageSize, 0);
+            return await GetDefaultRecommendAsync(pageIndex, pageSize, 0, gender);
         }
 
         // 获取今日推荐列表
@@ -98,7 +98,7 @@ public class RecommendService : IRecommendService
             // 如果生成失败（用户资料未完成等），返回默认推荐但排除当前用户
             if (generatedCount == 0)
             {
-                return await GetDefaultRecommendAsync(pageIndex, pageSize, userId);
+                return await GetDefaultRecommendAsync(pageIndex, pageSize, userId, gender);
             }
             
             recommends = await _recommendRepository.GetListAsync(
@@ -175,12 +175,19 @@ public class RecommendService : IRecommendService
     /// <param name="pageIndex">页码</param>
     /// <param name="pageSize">每页数量</param>
     /// <param name="excludeUserId">要排除的用户ID（当前登录用户）</param>
-    private async Task<PagedResult<RecommendUserResponse>> GetDefaultRecommendAsync(int pageIndex, int pageSize, long excludeUserId = 0)
+    /// <param name="gender">筛选性别（1=男，2=女，0=不限）</param>
+    private async Task<PagedResult<RecommendUserResponse>> GetDefaultRecommendAsync(int pageIndex, int pageSize, long excludeUserId = 0, int gender = 0)
     {
         // 获取已完成资料、状态正常的用户，排除当前用户
         var allUsers = await _userRepository.GetListAsync(
             u => u.IsProfileCompleted && u.Status == 1 && (excludeUserId == 0 || u.Id != excludeUserId));
 
+        // 如果指定了性别筛选，过滤用户
+        if (gender > 0)
+        {
+            allUsers = allUsers.Where(u => u.Gender == gender).ToList();
+        }
+
         // 过滤出审核通过的用户
         var validUsers = new List<(Core.Entities.Biz.User User, Core.Entities.Biz.UserProfile Profile)>();
         foreach (var user in allUsers.OrderByDescending(u => u.CreateTime))