feat: 新增微信支付组件和用户信息管理功能

refactor(auth): 重构认证逻辑，统一使用X-Access-Token
feat(api): 新增微信支付相关API接口
feat(components): 添加WechatPayment微信支付组件
feat(components): 添加PhoneModifyModal手机号修改弹窗
refactor(store): 优化用户状态管理和token处理逻辑
fix(bookshelf): 修复书架API命名不一致问题
style: 统一原创标签样式和显示逻辑

package.json

@@ -13,7 +13,8 @@
     "pinia": "^2.1.0",
     "vue": "^3.3.0",
     "vue-router": "^4.2.0",
-    "ali-oss": "^6.21.0"
+    "ali-oss": "^6.21.0",
+    "qrcode": "^1.5.3"
   },
   "devDependencies": {
     "@vitejs/plugin-vue": "^4.2.3",

src/App.vue

@@ -31,22 +31,30 @@ export default {
         window.routerEvents = routerEvents;
         
         // 监听路由变化，检查是否需要触发登录弹窗
-        onMounted(() => {
-            // 立即初始化登录状态，确保在路由守卫执行前已经正确恢复用户状态
-            store.initializeAuth();
-            
-            // 如果有触发登录的事件，执行它
-            if (typeof routerEvents.triggerLogin === 'function') {
-                routerEvents.triggerLogin();
-                routerEvents.triggerLogin = null;
-            }
-            
-            // 输出调试信息
-            if (window.$debug?.logUserState) {
-                window.$debug.logUserState();
-            }
+        onMounted(async () => {
+            try {
+                // 立即初始化登录状态，确保在路由守卫执行前已经正确恢复用户状态
+                // 现在会自动获取最新的用户信息
+                await store.initializeAuth();
+                
+                // 如果有触发登录的事件，执行它
+                if (typeof routerEvents.triggerLogin === 'function') {
+                    routerEvents.triggerLogin();
+                    routerEvents.triggerLogin = null;
+                }
+                
+                // 输出调试信息
+                if (window.$debug?.logUserState) {
+                    window.$debug.logUserState();
+                }
 
-            store.getUnreadMessages();
+                // 只有在用户已登录时才获取未读消息
+                if (store.isLoggedIn) {
+                    store.getUnreadMessages();
+                }
+            } catch (error) {
+                console.error('[App] 初始化失败:', error);
+            }
         });
         
         // 每次路由变化时也检查一次

src/api/bookshelf.js

@@ -1,174 +1,211 @@
 import api from './index.js';
 
 /**
- * 书架-阅读书架相关接口
+ * 书架相关接口
  */
-export const readBookApi = {
-  /**
-   * 增加我的书架阅读记录
-   * @param {Object} bookData 书籍数据
-   */
-  addReadBook(bookData) {
-    return api.post('/all_book/addReadBook', null, {
-      params: bookData
-    });
-  },
-
-  /**
-   * 批量移除我阅读过的数据根据书籍标识
-   * @param {string} bookIds 书籍ID列表，逗号分隔
-   */
-  batchRemoveReadBook(bookIds) {
-    return api.get('/all_book/batchRemoveReadBook', {
-      params: { bookIds }
-    });
-  },
-
-  /**
-   * 获取我阅读过的书籍列表带分页
-   * @param {Object} params 分页参数
-   * @param {number} params.pageNo 当前页
-   * @param {number} params.pageSize 显示条数
-   */
-  getReadBookPage(params) {
-    return api.get('/all_book/getReadBookPage', { params });
-  },
-
-  /**
-   * 移除我阅读过的书籍根据书籍标识
-   * @param {string} bookId 书籍ID
-   */
-  removeReadBook(bookId) {
-    return api.get('/all_book/removeReadBook', {
-      params: { bookId }
-    });
-  },
-
-  /**
-   * 修改我的书籍信息
-   * @param {Object} bookData 书籍数据
-   */
-  saveOrUpdateReadBook(bookData) {
-    return api.post('/all_book/saveOrUpdateReadBook', null, {
-      params: bookData
-    });
-  }
+export const bookshelfApi = {
+    /**
+     * 获取我阅读过的书籍列表带分页
+     * @param {Object} params 查询参数
+     * @param {number} params.pageNo 当前页
+     * @param {number} params.pageSize 显示条数
+     */
+    getReadBookPage(params) {
+        return api.get('/all_book/getReadBookPage', { params });
+    },
+
+    /**
+     * 修改我的书架信息
+     * @param {Object} params 书架信息
+     */
+    saveOrUpdateReadBook(params) {
+        return api.post('/all_book/saveOrUpdateReadBook', null, { params });
+    },
+
+    /**
+     * 增加我的书架阅读记录
+     * @param {Object} params 书架记录
+     * @param {string} params.shopId 书籍ID
+     * @param {string} params.name 书名
+     * @param {string} params.image 封面
+     * @param {string} params.novelId 章节ID
+     */
+    addReadBook(params) {
+        return api.post('/all_book/addReadBook', null, { params });
+    },
+
+    /**
+     * 查询这本书是否加入书架
+     * @param {number} bookId 书籍ID
+     */
+    isAddBook(bookId) {
+        return api.get('/all_book/isAddBook', {
+            params: { bookId }
+        });
+    },
+
+    /**
+     * 移除我阅读过的书籍根据书籍标识
+     * @param {string} bookId 书籍ID
+     */
+    removeReadBook(bookId) {
+        return api.get('/all_book/removeReadBook', {
+            params: { bookId }
+        });
+    },
+
+    /**
+     * 批量移除我阅读过的数据根据书籍标识
+     * @param {string} bookIds 书籍ID列表，逗号分隔
+     */
+    batchRemoveReadBook(bookIds) {
+        return api.get('/all_book/batchRemoveReadBook', {
+            params: { bookIds }
+        });
+    },
+
+    /**
+     * 根据书籍id删除书架
+     * @param {number} bookId 书籍ID
+     */
+    deleteBookshelfByBookId(bookId) {
+        return api.post('/all_book/deleteBookshelfByBookId', null, {
+            params: { bookId }
+        });
+    },
+
+    /**
+     * 根据书籍id获取当前阅读章节
+     * @param {number} bookId 书籍ID
+     */
+    getReadChapterByBookId(bookId) {
+        return api.get('/all_book/getReadChapterByBookId', {
+            params: { bookId }
+        });
+    }
 };
 
 /**
  * 书架-我的作品相关接口
  */
 export const myBookApi = {
-  /**
-   * 删除作品章节
-   * @param {Object} params 删除参数
-   * @param {string} params.bookId 书籍ID
-   * @param {string} params.id 章节ID
-   */
-  deleteMyNovel(params) {
-    return api.post('/my_book/deleteMyNovel', null, { params });
-  },
-
-  /**
-   * 删除我的作品
-   * @param {string} bookId 书籍ID
-   */
-  deleteMyShop(bookId) {
-    return api.post('/my_book/deleteMyShop', null, {
-      params: { bookId }
-    });
-  },
-
-  /**
-   * 多选删除我的作品
-   * @param {string} bookIds 书籍ID列表，逗号分隔
-   */
-  deleteMyShopList(bookIds) {
-    return api.post('/my_book/deleteMyShopList', null, {
-      params: { bookIds }
-    });
-  },
-
-  /**
-   * 获取我的小说章节列表带分页
-   * @param {Object} params 查询参数
-   * @param {string} params.bookId 书籍ID
-   * @param {number} params.pageNo 当前页
-   * @param {number} params.pageSize 显示条数
-   * @param {number} params.reverse 是否倒序
-   * @param {number} params.status 状态
-   */
-  getMyShopNovelPage(params) {
-    return api.post('/my_book/getMyShopNovelPage', null, { params });
-  },
-
-  /**
-   * 获取我的作品带分页
-   * @param {Object} params 分页参数
-   * @param {number} params.pageNo 当前页
-   * @param {number} params.pageSize 显示条数
-   */
-  getMyShopPage(params) {
-    return api.get('/my_book/getMyShopPage', { params });
-  },
-
-  /**
-   * 查询我是否购买了这个章节
-   * @param {Object} params 查询参数
-   * @param {string} params.bookId 书籍ID
-   * @param {string} params.novelId 章节ID
-   */
-  getMyShopNovel(params) {
-    return api.get('/my_book/getMyShopNovel', { params });
-  },
-
-  /**
-   * 添加作品或者修改作品
-   * @param {Object} shopData 作品数据
-   */
-  saveOrUpdateShop(shopData) {
-    return api.post('/my_book/saveOrUpdateShop', null, {
-      params: shopData
-    });
-  },
-
-  /**
-   * 增加或修改作品章节
-   * @param {Object} novelData 章节数据
-   */
-  saveOrUpdateShopNovel(data) {
-    return api.post('/my_book/saveOrUpdateShopNovel', data);
-  }
+    /**
+     * 删除作品章节
+     * @param {Object} params 删除参数
+     * @param {string} params.bookId 书籍ID
+     * @param {string} params.id 章节ID
+     */
+    deleteMyNovel(params) {
+        return api.post('/my_book/deleteMyNovel', null, { params });
+    },
+
+    /**
+     * 删除我的作品
+     * @param {string} bookId 书籍ID
+     */
+    deleteMyShop(bookId) {
+        return api.post('/my_book/deleteMyShop', null, {
+            params: { bookId }
+        });
+    },
+
+    /**
+     * 多选删除我的作品
+     * @param {string} bookIds 书籍ID列表，逗号分隔
+     */
+    deleteMyShopList(bookIds) {
+        return api.post('/my_book/deleteMyShopList', null, {
+            params: { bookIds }
+        });
+    },
+
+    /**
+     * 获取我的小说章节列表带分页
+     * @param {Object} params 查询参数
+     * @param {string} params.bookId 书籍ID
+     * @param {number} params.pageNo 当前页
+     * @param {number} params.pageSize 显示条数
+     * @param {number} params.reverse 是否倒序
+     * @param {number} params.status 状态
+     */
+    getMyShopNovelPage(params) {
+        return api.post('/my_book/getMyShopNovelPage', null, { params });
+    },
+
+    /**
+     * 获取我的作品带分页
+     * @param {Object} params 分页参数
+     * @param {number} params.pageNo 当前页
+     * @param {number} params.pageSize 显示条数
+     */
+    getMyShopPage(params) {
+        return api.get('/my_book/getMyShopPage', { params });
+    },
+
+    /**
+     * 查询我是否购买了这个章节
+     * @param {Object} params 查询参数
+     * @param {string} params.bookId 书籍ID
+     * @param {string} params.novelId 章节ID
+     */
+    getMyShopNovel(params) {
+        return api.get('/my_book/getMyShopNovel', { params });
+    },
+
+    /**
+     * 添加作品或者修改作品
+     * @param {Object} shopData 作品数据
+     */
+    saveOrUpdateShop(shopData) {
+        return api.post('/my_book/saveOrUpdateShop', null, {
+            params: shopData
+        });
+    },
+
+    /**
+     * 增加或修改作品章节
+     * @param {Object} novelData 章节数据
+     */
+    saveOrUpdateShopNovel(data) {
+        return api.post('/my_book/saveOrUpdateShopNovel', data);
+    }
 };
 
 /**
  * 书架-读者成就相关接口
  */
 export const achievementApi = {
-  /**
-   * 根据用户标识和书籍标识查询该用户的成就等级
-   * @param {string} bookId 书籍ID
-   */
-  getAchievement(bookId) {
-    return api.get('/all_achievement/getAchievement', {
-      params: { bookId }
-    });
-  },
-
-  /**
-   * 获取读者成就列表
-   */
-  getAchievementList() {
-    return api.get('/all_achievement/getAchievementList');
-  },
-
-  /**
-   * 设置读者成就等级名称
-   * @param {Object} achievementData 成就数据
-   */
-  setAchievementName(achievementData) {
-    return api.post('/all_achievement/setAchievementName', null, {
-      params: achievementData
-    });
-  }
+    /**
+     * 根据用户标识和书籍标识查询该用户的成就等级
+     * @param {string} bookId 书籍ID
+     */
+    getAchievementByBookId(bookId) {
+        return api.get('/all_achievement/getAchievementByBookId', {
+            params: { bookId }
+        });
+    },
+    /**
+     * 获取作者设置的成就等级对象
+     * @param {string} bookId 书籍ID
+     */
+    getAchievement() {
+        return api.get('/all_achievement/getAchievement');
+    },
+
+    /**
+     * 获取读者成就列表
+     */
+    getAchievementList() {
+        return api.get('/all_achievement/getAchievementList');
+    },
+
+    /**
+     * 设置读者成就等级名称
+     * @param {Object} achievementData 成就数据
+     */
+    setAchievementName(achievementData) {
+        return api.post('/all_achievement/setAchievementName', null, {
+            params: achievementData
+        });
+    }
 }; 

src/api/index.js

@@ -1,10 +1,10 @@
 import axios from 'axios';
 
 const api = axios.create({
-    // baseURL: 'http://127.0.0.1:8003/novel-admin',
+    // baseURL: 'http://127.0.0.1:8002/novel-admin',
     baseURL: 'https://prod-api.budingxiaoshuo.com/novel-admin',
     // baseURL: import.meta.env.VITE_API_BASE_URL || 'http://127.0.0.1',
-    timeout: 10000,
+    timeout: 50000,
     headers: {
 		'Content-Type' : 'application/x-www-form-urlencoded'
     }

src/api/modules.js

@@ -1,14 +1,14 @@
 // 统一导出所有API模块
 export { authApi } from './auth.js';
 export { homeApi } from './home.js';
-export { readBookApi, myBookApi, achievementApi } from './bookshelf.js';
+export { bookshelfApi, myBookApi, achievementApi } from './bookshelf.js';
 export { moneyApi, commentApi, taskApi, writerApi, orderApi } from './user.js';
 export { smsApi } from './sms.js';
 
 // 默认导出，方便直接使用
 import { authApi } from './auth.js';
 import { homeApi } from './home.js';
-import { readBookApi, myBookApi, achievementApi } from './bookshelf.js';
+import { bookshelfApi, myBookApi, achievementApi } from './bookshelf.js';
 import { moneyApi, commentApi, taskApi, writerApi, orderApi } from './user.js';
 import { smsApi } from './sms.js';
 
@@ -20,7 +20,7 @@ export default {
   home: homeApi,
   
   // 书架相关
-  readBook: readBookApi,
+  bookshelf: bookshelfApi,
   myBook: myBookApi,
   achievement: achievementApi,
   

src/api/user.js

@@ -297,9 +297,9 @@ export const orderApi = {
    * 创建支付套餐订单
    * @param {string} packageId 套餐ID
    */
-  createPayPackageOrder(packageId) {
+  createPayPackageOrder(params) {
     return api.post('/my_order/createPayPackageOrder', null, {
-      params: { packageId }
+      params
     });
   },
 
@@ -320,4 +320,40 @@ export const orderApi = {
   giveGift(params) {
     return api.post('/my_order/giveGift', null, { params });
   }
+};
+
+/**
+ * 微信支付相关接口
+ */
+export const wechatPayApi = {
+  /**
+   * 创建微信支付订单
+   * @param {Object} params 支付参数
+   * @param {string} params.orderId 订单ID
+   * @param {number} params.totalFee 支付金额（分）
+   * @param {string} params.body 商品描述
+   */
+  createWechatPayOrder(params) {
+    return api.post('/wechat_pay/createOrder', null, { params });
+  },
+
+  /**
+   * 查询微信支付订单状态
+   * @param {string} outTradeNo 商户订单号
+   */
+  queryWechatPayStatus(outTradeNo) {
+    return api.get('/wechat_pay/queryOrder', {
+      params: { outTradeNo }
+    });
+  },
+
+  /**
+   * 取消微信支付订单
+   * @param {string} outTradeNo 商户订单号
+   */
+  cancelWechatPayOrder(outTradeNo) {
+    return api.post('/wechat_pay/cancelOrder', null, {
+      params: { outTradeNo }
+    });
+  }
 }; 

src/components/auth/AuthorApplicationModal.vue

@@ -2,7 +2,7 @@
     <el-dialog 
         :model-value="visible" 
         @update:model-value="$emit('update:visible', $event)"
-        title="申请成为创作者" 
+        :title="isEdit ? '编辑作家信息' : '申请成为创作者'" 
         width="500px" 
         :show-close="true" 
         :close-on-click-modal="false" 
@@ -32,16 +32,17 @@
                 :disabled="!isValid" 
                 @click="handleSubmit"
             >
-                成为创作者
+                {{ isEdit ? '保存修改' : '成为创作者' }}
             </el-button>
         </div>
     </el-dialog>
 </template>
 
 <script>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { ElMessage } from 'element-plus';
 import { useMainStore } from '@/store';
+import { writerApi } from '@/api/user';
 
 export default {
     name: 'AuthorApplicationModal',
@@ -59,12 +60,53 @@ export default {
         const penName = ref('');
         const introduction = ref('');
         const loading = ref(false);
+        const writerId = ref(null); // 作家ID，用于判断是新增还是编辑
+        const isEdit = ref(false); // 是否为编辑模式
 
         // 表单验证
         const isValid = computed(() => {
             return penName.value.trim() !== '' && introduction.value.trim() !== '';
         });
 
+        // 获取作家信息
+        const getMyWriter = async () => {
+            try {
+                // 首先检查用户是否已经是作家
+                if (!store.isCurrentAuthor) {
+                    // 不是作家，直接进入申请模式
+                    resetForm();
+                    isEdit.value = false;
+                    return;
+                }
+
+                // 是作家，获取作家详细信息进行回显
+                const response = await writerApi.getMyWriter();
+                if (response.result) {
+                    const writerInfo = response.result;
+                    penName.value = writerInfo.name || '';
+                    introduction.value = writerInfo.details || '';
+                    writerId.value = writerInfo.id || null;
+                    isEdit.value = true;
+                } else {
+                    // 虽然是作家但获取不到详细信息，仍然进入申请模式
+                    resetForm();
+                    isEdit.value = false;
+                }
+            } catch (error) {
+                console.error('获取作家信息失败:', error);
+                // 获取失败时，根据store中的作家状态来决定模式
+                if (store.isCurrentAuthor) {
+                    // 是作家但获取信息失败，进入编辑模式但不填充信息
+                    resetForm();
+                    isEdit.value = true;
+                } else {
+                    // 不是作家，进入申请模式
+                    resetForm();
+                    isEdit.value = false;
+                }
+            }
+        };
+
         // 提交申请
         const handleSubmit = async () => {
             if (!isValid.value) {
@@ -75,31 +117,50 @@ export default {
             try {
                 loading.value = true;
                 
-                // 模拟API调用，实际项目中应调用真实的后端API
-                await new Promise(resolve => setTimeout(resolve, 1000));
-                
-                // 直接设置localStorage保存作家状态
-                localStorage.setItem('isAuthor', 'true');
-                
-                // 更新store中的作家状态
-                store.setAsAuthor();
-                
-                // 发送申请成功
-                ElMessage.success('申请已通过，您已成为创作者！');
-                
-                // 触发成功回调
-                emit('application-success', {
-                    penName: penName.value,
-                    introduction: introduction.value
-                });
-                
-                // 关闭弹窗
-                emit('update:visible', false);
+                // 准备提交数据
+                const data = {
+                    penName: penName.value.trim(),
+                    details: introduction.value.trim()
+                };
+
+                // 如果是编辑模式，添加ID
+                if (writerId.value) {
+                    data.id = writerId.value;
+                }
+
+                // 调用API
+                const response = await writerApi.saveOrUpdateWriter(data);
                 
-                // 重置表单
-                resetForm();
+                if (response.code === 200) {
+                    ElMessage.success(isEdit.value ? '修改成功' : '申请成功');
+                    
+                    // 如果是新申请成功，需要更新用户的作家状态
+                    if (!isEdit.value) {
+                        // 重新获取最新的用户信息以更新作家状态
+                        try {
+                            await store.fetchLatestUserInfo();
+                        } catch (error) {
+                            console.error('更新用户信息失败:', error);
+                            // 即使更新失败，也手动设置作家状态
+                            store.setAsAuthor();
+                        }
+                    }
+                    
+                    // 触发成功回调
+                    emit('application-success', {
+                        penName: penName.value,
+                        introduction: introduction.value,
+                        isEdit: isEdit.value
+                    });
+                    
+                    // 关闭弹窗
+                    emit('update:visible', false);
+                } else {
+                    ElMessage.error(response.message || '提交失败，请稍后重试');
+                }
             } catch (error) {
-                ElMessage.error('申请提交失败，请稍后重试');
+                console.error('提交失败:', error);
+                ElMessage.error('提交失败，请稍后重试');
             } finally {
                 loading.value = false;
             }
@@ -109,20 +170,27 @@ export default {
         const resetForm = () => {
             penName.value = '';
             introduction.value = '';
+            writerId.value = null;
+            isEdit.value = false;
         };
 
-        // 打开弹窗的方法，可供外部调用
-        const openModal = () => {
-            emit('update:visible', true);
-        };
+        // 监听弹窗显示状态，打开时获取作家信息
+        watch(
+            () => props.visible,
+            (newVisible) => {
+                if (newVisible) {
+                    getMyWriter();
+                }
+            }
+        );
 
         return {
             penName,
             introduction,
             loading,
             isValid,
-            handleSubmit,
-            openModal
+            isEdit,
+            handleSubmit
         };
     }
 };

src/components/author/WorkItem.vue

@@ -3,9 +3,7 @@
         <div class="work-image">
             <img :src="work.image || defaultCover" :alt="work.bookName || work.title" />
             <!-- 原创标签 -->
-            <div v-if="work.isOriginal" class="tag original">原创</div>
-            <!-- 新建标签 -->
-            <div v-if="work.isNew" class="tag new">新建</div>
+            <div v-if="work.isOriginal == 'Y'" class="tag original">原创</div>
         </div>
         <div class="work-info">
             <h3 class="work-title">{{ work.name|| '未命名作品' }}</h3>

src/components/book/BookCatalog.vue

@@ -15,8 +15,9 @@
                     <!-- <span class="current-badge" v-if="chapter.id === currentChapterId">正在阅读</span> -->
                     <!-- <span class="new-badge" v-if="chapter.isNew">NEW</span> -->
                 </div>
-                <div class="chapter-pay" v-if="chapter.isPaid">
-                    <span class="pay-badge">付费</span>
+                <div class="chapter-pay" v-if="chapter.isPay === 'Y'">
+                    <span v-if="chapter.pay" class="paid-badge">已付费</span>
+                    <span v-else class="pay-badge">付费</span>
                 </div>
             </div>
         </transition-group>
@@ -254,6 +255,13 @@ export default defineComponent({
                     padding: 2px 10px;
                     border-radius: 12px;
                 }
+                .paid-badge {
+                    background-color: #52c41a;
+                    color: #fff;
+                    font-size: 12px;
+                    padding: 2px 10px;
+                    border-radius: 12px;
+                }
             }
         }
     }

src/components/book/BookStats.vue

@@ -39,7 +39,7 @@
         <!-- 推荐票弹窗 -->
         <RecommendDialog
             v-model:visible="recommendDialogVisible"
-            :book-id="bookData.id"
+            :book-id="bookId || bookData.id"
             @success="handleRecommendSuccess"
         />
     </div>
@@ -47,6 +47,7 @@
 
 <script>
 import { defineComponent, ref } from 'vue';
+import { requireLogin } from '@/utils/auth';
 import RecommendDialog from './RecommendDialog.vue';
 
 export default defineComponent({
@@ -59,19 +60,41 @@ export default defineComponent({
             type: Object,
             default: () => ({})
         },
+        bookId: {
+            type: [String, Number],
+            default: null
+        },
     },
-    setup(props) {
+    emits: ['recommend-success'],
+    setup(props, { emit }) {
         const recommendDialogVisible = ref(false);
 
-        const showRecommendDialog = () => {
+        // 原始的显示推荐弹窗方法
+        const openRecommendDialog = () => {
             recommendDialogVisible.value = true;
         };
 
+        // 带登录检查的显示推荐弹窗方法
+        const showRecommendDialog = () => {
+            if (requireLogin(() => {
+                // 登录成功后执行
+                console.log('登录成功，打开推荐票弹窗');
+                openRecommendDialog();
+            })) {
+                // 已登录，直接打开弹窗
+                openRecommendDialog();
+            }
+            // 未登录时会自动弹出登录框，无需额外处理
+        };
+
         const handleRecommendSuccess = () => {
             // 投票成功后刷新数据
             if (props.bookData && typeof props.bookData.tuiNum === 'number') {
                 props.bookData.tuiNum++;
             }
+            
+            // 向父组件发送推荐成功事件
+            emit('recommend-success');
         };
 
         return {

src/components/book/RecommendDialog.vue

@@ -110,7 +110,6 @@ const getMyRecommendTicketNum = async () => {
         userTickets.value = res.result || 0;
     } catch (error) {
         console.error('获取推荐票数量失败:', error);
-        ElMessage.error('获取推荐票数量失败');
     }
 };
 

src/components/bookshelf/BookshelfItem.vue

@@ -4,6 +4,8 @@
         <div class="book-card" @click="handleClick">
             <div class="book-cover">
                 <img :src="book.image" :alt="book.name">
+                <!-- 原创标签 -->
+                <div v-if="book.isOriginal == 'Y'" class="tag original">原创</div>
                 <span class="book-status">{{ book.status }}</span>
                 <span v-if="deleteMode" class="delete-icon" @click.stop="handleDelete">
                     <img src="@/assets/images/移除书架.png" alt="移除">
@@ -97,6 +99,21 @@ export default defineComponent({
                 object-fit: cover;
             }
 
+            .tag {
+                position: absolute;
+                top: 0;
+                left: 0;
+                font-size: 12px;
+                color: #fff;
+                padding: 2px 8px;
+                border-radius: 0 0 4px 0;
+                z-index: 1;
+                
+                &.original {
+                    background-color: #ffa502;
+                }
+            }
+
             .book-status {
                 position: absolute;
                 top: 10px;

src/components/bookshelf/bookshelfCard.vue

@@ -2,7 +2,8 @@
     <div class="book-card" @click="handleClick">
         <div class="book-cover">
             <img :src="book.image" :alt="book.name">
-
+            <!-- 原创标签 -->
+            <div v-if="book.isOriginal == 'Y'" class="tag original">原创</div>
         </div>
         <div class="book-info">
             <h3 class="book-title">{{ book.name }}</h3>
@@ -95,6 +96,21 @@ export default {
             object-fit: cover;
         }
 
+        .tag {
+            position: absolute;
+            top: 0;
+            left: 0;
+            font-size: 12px;
+            color: #fff;
+            padding: 2px 8px;
+            border-radius: 0 0 4px 0;
+            z-index: 1;
+            
+            &.original {
+                background-color: #ffa502;
+            }
+        }
+
         .book-status {
             position: absolute;
             top: 10px;

src/components/common/BookCard.vue

@@ -2,6 +2,8 @@
     <div class="book-card" @click="goToDetail">
         <div class="book-cover">
             <img :src="book.image" :alt="book.title">
+            <!-- 原创标签 -->
+            <div v-if="book.isOriginal == 'Y'" class="tag original">原创</div>
         </div>
         <div class="book-info">
             <h3 class="book-title">{{ book.name }}</h3>
@@ -98,6 +100,20 @@ export default {
             object-fit: cover;
             border-radius: 4px;
         }
+
+        .tag {
+            position: absolute;
+            top: 0;
+            left: 0;
+            font-size: 12px;
+            color: #fff;
+            padding: 2px 8px;
+            border-radius: 0 0 4px 0;
+            
+            &.original {
+                background-color: #ffa502;
+            }
+        }
     }
 
     .book-info {

src/components/common/PersonalInfoModal.vue

@@ -0,0 +1,514 @@
+<template>
+    <div class="personal-info-modal">
+        <el-dialog
+            v-model="visible"
+            title="个人信息"
+            width="400px"
+            :close-on-click-modal="false"
+            :close-on-press-escape="true"
+            @close="handleClose"
+        >
+            <div class="modal-content">
+                <!-- 头像上传区域 -->
+                <div class="avatar-section">
+                    <div class="avatar-wrapper" @click="handleAvatarClick">
+                        <el-avatar :size="80" :src="userInfo.headImage">
+                            <el-icon v-if="!userInfo.headImage"><UserFilled /></el-icon>
+                        </el-avatar>
+                        <div class="camera-overlay">
+                            <el-icon class="camera-icon"><Camera /></el-icon>
+                        </div>
+                    </div>
+                    <!-- 隐藏的文件上传输入框 -->
+                    <input
+                        ref="fileInputRef"
+                        type="file"
+                        accept="image/*"
+                        style="display: none"
+                        @change="handleFileChange"
+                    />
+                </div>
+
+                <!-- 表单区域 -->
+                <el-form
+                    ref="formRef"
+                    :model="formData"
+                    :rules="formRules"
+                    label-position="left"
+                    label-width="80px"
+                    class="info-form"
+                >
+                    <!-- 昵称 -->
+                    <el-form-item label="昵称" prop="nickName" required>
+                        <el-input
+                            v-model="formData.nickName"
+                            placeholder="请输入昵称"
+                            maxlength="20"
+                            show-word-limit
+                            @blur="handleNickNameBlur"
+                        />
+                    </el-form-item>
+
+                    <!-- 个性签名 -->
+                    <el-form-item label="个性签名">
+                        <el-input
+                            v-model="formData.details"
+                            placeholder="请输入个性签名"
+                            maxlength="50"
+                            show-word-limit
+                            @blur="handleSignatureBlur"
+                        />
+                    </el-form-item>
+
+                    <!-- 手机号 -->
+                    <el-form-item label="手机号">
+                        <div class="phone-container">
+                            <span class="phone-number">{{ maskPhoneNumber(userInfo.phone) }}</span>
+                            <el-button 
+                                type="text" 
+                                class="modify-link"
+                                @click="handleModifyPhone"
+                            >
+                                修改手机号
+                            </el-button>
+                        </div>
+                    </el-form-item>
+
+                    <!-- 豆豆 -->
+                    <el-form-item label="豆豆">
+                        <div class="bean-container">
+                            <span class="bean-number">{{ userInfo.integerPrice || 0 }}</span>
+                            <el-button 
+                                type="text" 
+                                class="detail-link"
+                                @click="handleViewDetails"
+                            >
+                                查看详情
+                            </el-button>
+                        </div>
+                    </el-form-item>
+                </el-form>
+            </div>
+
+            <!-- 底部按钮 -->
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button 
+                        type="primary" 
+                        class="recharge-btn"
+                        @click="handleRecharge"
+                    >
+                        去充值
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+
+        <!-- 手机号修改弹窗 -->
+        <PhoneModifyModal
+            v-model="showPhoneModal"
+            @success="handlePhoneUpdateSuccess"
+        />
+    </div>
+</template>
+
+<script>
+import { ref, reactive, computed, watch, nextTick } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { Camera, UserFilled } from '@element-plus/icons-vue';
+import { useMainStore } from '@/store';
+import { useRouter } from 'vue-router';
+import { ossService } from '@/utils/oss.js';
+import PhoneModifyModal from './PhoneModifyModal.vue';
+
+export default {
+    name: 'PersonalInfoModal',
+    components: {
+        Camera,
+        UserFilled,
+        PhoneModifyModal
+    },
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['update:modelValue', 'success'],
+    setup(props, { emit }) {
+        const store = useMainStore();
+        const router = useRouter();
+        const formRef = ref(null);
+        const fileInputRef = ref(null);
+        const showPhoneModal = ref(false);
+
+        const visible = computed({
+            get: () => props.modelValue,
+            set: (value) => emit('update:modelValue', value)
+        });
+
+        // 用户信息
+        const userInfo = computed(() => store.user || {});
+
+        // 表单数据
+        const formData = reactive({
+            nickName: '',
+            details: ''
+        });
+
+        // 表单验证规则
+        const formRules = {
+            nickName: [
+                { required: true, message: '请输入昵称', trigger: 'blur' },
+                { min: 2, max: 20, message: '昵称长度在 2 到 20 个字符', trigger: 'blur' }
+            ]
+        };
+
+        // 手机号脱敏显示
+        const maskPhoneNumber = (phone) => {
+            if (!phone) return '未绑定';
+            if (phone.length === 11) {
+                return `${phone.slice(0, 3)} ${phone.slice(3, 7)} ${phone.slice(7)}`;
+            }
+            return phone;
+        };
+
+        // 监听弹窗显示状态，初始化数据
+        watch(visible, (newVal) => {
+            if (newVal) {
+                initFormData();
+            }
+        });
+
+        // 初始化表单数据
+        const initFormData = () => {
+            formData.nickName = userInfo.value.nickName || '';
+            formData.details = userInfo.value.details || '';
+        };
+
+        // 头像点击处理
+        const handleAvatarClick = () => {
+            fileInputRef.value?.click();
+        };
+
+        // 文件选择处理
+        const handleFileChange = async (event) => {
+            const file = event.target.files[0];
+            if (!file) return;
+
+            // 验证文件类型
+            if (!file.type.startsWith('image/')) {
+                ElMessage.error('请选择图片文件');
+                return;
+            }
+
+            // 验证文件大小（2MB）
+            if (file.size > 2 * 1024 * 1024) {
+                ElMessage.error('图片大小不能超过2MB');
+                return;
+            }
+
+            try {
+                const loadingMessage = ElMessage.loading('上传头像中...');
+                
+                // 上传到OSS
+                const imageUrl = await ossService.uploadImage(file);
+                
+                // 更新用户头像
+                await store.updateUserInfo({
+                    headImage: imageUrl
+                });
+
+                loadingMessage.close();
+                ElMessage.success('头像更新成功');
+                
+            } catch (error) {
+                console.error('头像上传失败:', error);
+                ElMessage.error('头像上传失败，请重试');
+            }
+
+            // 清空input值，允许重复选择同一文件
+            event.target.value = '';
+        };
+
+        // 修改手机号
+        const handleModifyPhone = () => {
+            showPhoneModal.value = true;
+        };
+
+        // 手机号更新成功回调
+        const handlePhoneUpdateSuccess = () => {
+            ElMessage.success('手机号修改成功');
+        };
+
+        // 查看详情
+        const handleViewDetails = () => {
+            visible.value = false;
+            router.push('/money-log');
+        };
+
+        // 去充值
+        const handleRecharge = () => {
+            visible.value = false;
+            router.push('/recharge');
+        };
+
+        // 保存个人信息
+        const handleSave = async () => {
+            try {
+                await formRef.value?.validate();
+                
+                const loadingMessage = ElMessage.loading('保存中...');
+                
+                await store.updateUserInfo({
+                    nickName: formData.nickName,
+                    details: formData.details
+                });
+
+                loadingMessage.close();
+                ElMessage.success('保存成功');
+                emit('success');
+                visible.value = false;
+                
+            } catch (error) {
+                console.error('保存失败:', error);
+                ElMessage.error('保存失败，请重试');
+            }
+        };
+
+        // 昵称失焦保存
+        const handleNickNameBlur = async () => {
+            if (formData.nickName && formData.nickName !== userInfo.value.nickName) {
+                try {
+                    await formRef.value?.validateField('nickName');
+                    await store.updateUserInfo({
+                        nickName: formData.nickName
+                    });
+                    ElMessage.success('昵称保存成功');
+                } catch (error) {
+                    console.error('昵称保存失败:', error);
+                }
+            }
+        };
+
+        // 个性签名失焦保存
+        const handleSignatureBlur = async () => {
+            if (formData.details !== userInfo.value.details) {
+                try {
+                    await store.updateUserInfo({
+                        details: formData.details
+                    });
+                    ElMessage.success('个性签名保存成功');
+                } catch (error) {
+                    console.error('个性签名保存失败:', error);
+                }
+            }
+        };
+
+        // 关闭弹窗
+        const handleClose = () => {
+            visible.value = false;
+        };
+
+        return {
+            visible,
+            formRef,
+            fileInputRef,
+            formData,
+            formRules,
+            userInfo,
+            showPhoneModal,
+            maskPhoneNumber,
+            handleAvatarClick,
+            handleFileChange,
+            handleModifyPhone,
+            handlePhoneUpdateSuccess,
+            handleViewDetails,
+            handleRecharge,
+            handleNickNameBlur,
+            handleSignatureBlur,
+            handleClose
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.personal-info-modal {
+    .modal-content {
+        padding: 0;
+
+        .avatar-section {
+            display: flex;
+            justify-content: center;
+            margin-bottom: 24px;
+
+            .avatar-wrapper {
+                position: relative;
+                cursor: pointer;
+                transition: transform 0.3s ease;
+
+                &:hover {
+                    transform: scale(1.05);
+
+                    .camera-overlay {
+                        opacity: 1;
+                    }
+                }
+
+                .camera-overlay {
+                    position: absolute;
+                    top: 0;
+                    left: 0;
+                    right: 0;
+                    bottom: 0;
+                    background: rgba(0, 0, 0, 0.5);
+                    border-radius: 50%;
+                    display: flex;
+                    align-items: center;
+                    justify-content: center;
+                    opacity: 0;
+                    transition: opacity 0.3s ease;
+
+                    .camera-icon {
+                        color: white;
+                        font-size: 24px;
+                    }
+                }
+
+                :deep(.el-avatar) {
+                    border: 3px solid #f0f0f0;
+                    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                }
+            }
+        }
+
+        .info-form {
+            .phone-container,
+            .bean-container {
+                display: flex;
+                align-items: center;
+                justify-content: space-between;
+                width: 100%;
+
+                .phone-number,
+                .bean-number {
+                    font-size: 16px;
+                    color: #606266;
+                    flex: 1;
+                }
+
+                .modify-link,
+                .detail-link {
+                    color: #0A2463;
+                    font-size: 14px;
+                    padding: 0;
+                    margin-left: 12px;
+
+                    &:hover {
+                        color: #083354;
+                    }
+                }
+            }
+
+            :deep(.el-form-item__label) {
+                font-weight: 500;
+                color: #303133;
+            }
+
+            :deep(.el-input__inner) {
+                border-radius: 6px;
+            }
+
+            :deep(.el-form-item) {
+                margin-bottom: 20px;
+            }
+
+            :deep(.el-form-item__label::before) {
+                color: #F56C6C;
+            }
+        }
+    }
+
+    .dialog-footer {
+        display: flex;
+        justify-content: center;
+        padding-top: 10px;
+
+        .recharge-btn {
+            width: 100%;
+            height: 44px;
+            background-color: #0A2463;
+            border-color: #0A2463;
+            font-size: 16px;
+            font-weight: 600;
+            border-radius: 8px;
+
+            &:hover {
+                background-color: #083354;
+                border-color: #083354;
+            }
+        }
+    }
+
+    :deep(.el-dialog__header) {
+        padding: 20px 20px 10px 20px;
+        text-align: center;
+
+        .el-dialog__title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #303133;
+        }
+    }
+
+    :deep(.el-dialog__body) {
+        padding: 10px 20px 20px 20px;
+    }
+
+    :deep(.el-dialog__footer) {
+        padding: 10px 20px 20px 20px;
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .personal-info-modal {
+        :deep(.el-dialog) {
+            width: 90% !important;
+            margin: 5vh auto !important;
+        }
+
+        .modal-content {
+            .avatar-section {
+                margin-bottom: 20px;
+
+                .avatar-wrapper {
+                    :deep(.el-avatar) {
+                        width: 70px !important;
+                        height: 70px !important;
+                    }
+                }
+            }
+
+            .info-form {
+                :deep(.el-form-item) {
+                    margin-bottom: 16px;
+                }
+
+                :deep(.el-form-item__label) {
+                    width: 70px !important;
+                    font-size: 14px;
+                }
+            }
+        }
+
+        .dialog-footer {
+            .recharge-btn {
+                height: 40px;
+                font-size: 14px;
+            }
+        }
+    }
+}
+</style> 

src/components/common/PhoneModifyModal.vue

@@ -0,0 +1,341 @@
+<template>
+    <div class="phone-modify-modal">
+        <el-dialog
+            v-model="visible"
+            title="修改手机号"
+            width="400px"
+            :close-on-click-modal="false"
+            :close-on-press-escape="true"
+            @close="handleClose"
+        >
+            <el-form
+                ref="formRef"
+                :model="formData"
+                :rules="formRules"
+                label-width="100px"
+                class="phone-form"
+            >
+                <!-- 当前手机号 -->
+                <el-form-item label="当前手机号">
+                    <span class="current-phone">{{ maskPhoneNumber(currentPhone) }}</span>
+                </el-form-item>
+
+                <!-- 新手机号 -->
+                <el-form-item label="新手机号" prop="newPhone">
+                    <el-input
+                        v-model="formData.newPhone"
+                        placeholder="请输入新手机号"
+                        maxlength="11"
+                    >
+                        <template #prefix>
+                            <span class="phone-prefix">+86</span>
+                        </template>
+                    </el-input>
+                </el-form-item>
+
+                <!-- 验证码 -->
+                <el-form-item label="验证码" prop="verifyCode">
+                    <div class="verify-code-container">
+                        <el-input
+                            v-model="formData.verifyCode"
+                            placeholder="请输入验证码"
+                            maxlength="6"
+                        />
+                        <el-button
+                            :disabled="!canSendCode || countdown > 0"
+                            @click="sendVerifyCode"
+                            class="send-code-btn"
+                        >
+                            {{ countdown > 0 ? `${countdown}s后重发` : '发送验证码' }}
+                        </el-button>
+                    </div>
+                </el-form-item>
+            </el-form>
+
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button @click="handleClose">取消</el-button>
+                    <el-button
+                        type="primary"
+                        :loading="loading"
+                        @click="handleConfirm"
+                    >
+                        确认修改
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { ref, reactive, computed, watch } from 'vue';
+import { ElMessage } from 'element-plus';
+import { useMainStore } from '@/store';
+
+export default {
+    name: 'PhoneModifyModal',
+    props: {
+        modelValue: {
+            type: Boolean,
+            default: false
+        }
+    },
+    emits: ['update:modelValue', 'success'],
+    setup(props, { emit }) {
+        const store = useMainStore();
+        const formRef = ref(null);
+        const loading = ref(false);
+        const countdown = ref(0);
+        let countdownTimer = null;
+
+        const visible = computed({
+            get: () => props.modelValue,
+            set: (value) => emit('update:modelValue', value)
+        });
+
+        // 表单数据
+        const formData = reactive({
+            newPhone: '',
+            verifyCode: ''
+        });
+
+        // 当前手机号
+        const currentPhone = computed(() => store.user?.phone || '');
+
+        // 是否可以发送验证码
+        const canSendCode = computed(() => {
+            return /^1[3-9]\d{9}$/.test(formData.newPhone);
+        });
+
+        // 表单验证规则
+        const formRules = {
+            newPhone: [
+                { required: true, message: '请输入新手机号', trigger: 'blur' },
+                { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
+            ],
+            verifyCode: [
+                { required: true, message: '请输入验证码', trigger: 'blur' },
+                { pattern: /^\d{6}$/, message: '验证码格式不正确', trigger: 'blur' }
+            ]
+        };
+
+        // 手机号脱敏显示
+        const maskPhoneNumber = (phone) => {
+            if (!phone) return '未绑定';
+            if (phone.length === 11) {
+                return `${phone.slice(0, 3)} **** ${phone.slice(7)}`;
+            }
+            return phone;
+        };
+
+        // 监听弹窗显示状态
+        watch(visible, (newVal) => {
+            if (newVal) {
+                resetForm();
+            } else {
+                stopCountdown();
+            }
+        });
+
+        // 重置表单
+        const resetForm = () => {
+            formData.newPhone = '';
+            formData.verifyCode = '';
+            formRef.value?.clearValidate();
+        };
+
+        // 发送验证码
+        const sendVerifyCode = async () => {
+            if (!canSendCode.value) return;
+
+            try {
+                loading.value = true;
+                
+                // 这里调用发送验证码的API
+                // await api.sendPhoneVerifyCode(formData.newPhone);
+                
+                // 模拟API调用
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                
+                ElMessage.success('验证码已发送');
+                startCountdown();
+                
+            } catch (error) {
+                console.error('发送验证码失败:', error);
+                ElMessage.error('发送验证码失败，请重试');
+            } finally {
+                loading.value = false;
+            }
+        };
+
+        // 开始倒计时
+        const startCountdown = () => {
+            countdown.value = 60;
+            countdownTimer = setInterval(() => {
+                countdown.value--;
+                if (countdown.value <= 0) {
+                    stopCountdown();
+                }
+            }, 1000);
+        };
+
+        // 停止倒计时
+        const stopCountdown = () => {
+            if (countdownTimer) {
+                clearInterval(countdownTimer);
+                countdownTimer = null;
+            }
+            countdown.value = 0;
+        };
+
+        // 确认修改
+        const handleConfirm = async () => {
+            try {
+                await formRef.value?.validate();
+                
+                loading.value = true;
+                
+                // 这里调用修改手机号的API
+                // await api.modifyPhone({
+                //     newPhone: formData.newPhone,
+                //     verifyCode: formData.verifyCode
+                // });
+                
+                // 模拟API调用
+                await new Promise(resolve => setTimeout(resolve, 1500));
+                
+                // 更新store中的用户信息
+                await store.updateUserInfo({
+                    phone: formData.newPhone
+                });
+                
+                ElMessage.success('手机号修改成功');
+                emit('success');
+                visible.value = false;
+                
+            } catch (error) {
+                console.error('修改手机号失败:', error);
+                ElMessage.error('修改失败，请重试');
+            } finally {
+                loading.value = false;
+            }
+        };
+
+        // 关闭弹窗
+        const handleClose = () => {
+            visible.value = false;
+        };
+
+        return {
+            visible,
+            formRef,
+            formData,
+            formRules,
+            currentPhone,
+            canSendCode,
+            countdown,
+            loading,
+            maskPhoneNumber,
+            sendVerifyCode,
+            handleConfirm,
+            handleClose
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.phone-modify-modal {
+    .phone-form {
+        .current-phone {
+            color: #606266;
+            font-size: 16px;
+        }
+
+        .phone-prefix {
+            color: #909399;
+            margin-right: 8px;
+        }
+
+        .verify-code-container {
+            display: flex;
+            gap: 8px;
+
+            .el-input {
+                flex: 1;
+            }
+
+            .send-code-btn {
+                white-space: nowrap;
+                min-width: 100px;
+            }
+        }
+
+        :deep(.el-form-item__label) {
+            font-weight: 500;
+            color: #303133;
+        }
+
+        :deep(.el-input__inner) {
+            border-radius: 6px;
+        }
+
+        :deep(.el-form-item) {
+            margin-bottom: 20px;
+        }
+    }
+
+    .dialog-footer {
+        display: flex;
+        justify-content: flex-end;
+        gap: 12px;
+
+        .el-button--primary {
+            background-color: #0A2463;
+            border-color: #0A2463;
+
+            &:hover {
+                background-color: #083354;
+                border-color: #083354;
+            }
+        }
+    }
+
+    :deep(.el-dialog__header) {
+        text-align: center;
+
+        .el-dialog__title {
+            font-size: 18px;
+            font-weight: 600;
+            color: #303133;
+        }
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .phone-modify-modal {
+        :deep(.el-dialog) {
+            width: 90% !important;
+            margin: 5vh auto !important;
+        }
+
+        .phone-form {
+            :deep(.el-form-item__label) {
+                width: 80px !important;
+                font-size: 14px;
+            }
+
+            .verify-code-container {
+                flex-direction: column;
+                gap: 12px;
+
+                .send-code-btn {
+                    min-width: auto;
+                }
+            }
+        }
+    }
+}
+</style> 

src/components/common/WechatPayment.md

@@ -0,0 +1,244 @@
+# 微信二维码支付组件 (WechatPayment)
+
+基于参考博客 [H5微信支付、PC端微信支付](https://blog.csdn.net/WANGLING0108/article/details/133808856) 实现的Vue3微信支付组件。
+
+## 功能特性
+
+- ✅ 二维码自动生成和展示
+- ✅ 支付状态实时轮询
+- ✅ 支付超时处理（5分钟倒计时）
+- ✅ 支付成功/失败/取消状态处理
+- ✅ 二维码刷新功能
+- ✅ 响应式设计（PC端/移动端适配）
+- ✅ 完整的错误处理和用户提示
+
+## 安装依赖
+
+```bash
+npm install qrcode
+```
+
+## 使用方式
+
+### 基础用法
+
+```vue
+<template>
+  <div>
+    <!-- 触发支付按钮 -->
+    <el-button type="primary" @click="startPayment">
+      发起支付
+    </el-button>
+    
+    <!-- 微信支付组件 -->
+    <WechatPayment
+      v-model="showPayment"
+      :payment-data="paymentData"
+      @success="handlePaymentSuccess"
+      @cancel="handlePaymentCancel"
+      @failed="handlePaymentFailed"
+    />
+  </div>
+</template>
+
+<script>
+import { ref, reactive } from 'vue';
+import WechatPayment from '@/components/common/WechatPayment.vue';
+
+export default {
+  components: {
+    WechatPayment
+  },
+  setup() {
+    const showPayment = ref(false);
+    const paymentData = reactive({
+      orderId: '',      // 订单ID
+      title: '',        // 支付标题
+      amount: 0,        // 支付金额（分）
+      body: ''          // 商品描述
+    });
+
+    // 发起支付
+    const startPayment = () => {
+      paymentData.orderId = 'ORDER_123456';
+      paymentData.title = '商品购买';
+      paymentData.amount = 1000; // 10元（以分为单位）
+      paymentData.body = '商品描述信息';
+      
+      showPayment.value = true;
+    };
+
+    // 支付成功回调
+    const handlePaymentSuccess = (outTradeNo) => {
+      console.log('支付成功，交易号:', outTradeNo);
+      // 处理支付成功逻辑
+    };
+
+    // 支付取消回调
+    const handlePaymentCancel = () => {
+      console.log('用户取消支付');
+      // 处理取消逻辑
+    };
+
+    // 支付失败回调
+    const handlePaymentFailed = (errorMessage) => {
+      console.log('支付失败:', errorMessage);
+      // 处理失败逻辑
+    };
+
+    return {
+      showPayment,
+      paymentData,
+      startPayment,
+      handlePaymentSuccess,
+      handlePaymentCancel,
+      handlePaymentFailed
+    };
+  }
+};
+</script>
+```
+
+## 组件属性 (Props)
+
+| 属性名 | 类型 | 默认值 | 说明 |
+|--------|------|--------|------|
+| `modelValue` | Boolean | `false` | 控制支付弹窗显示/隐藏 |
+| `paymentData` | Object | `{}` | 支付相关数据 |
+
+### paymentData 对象结构
+
+```javascript
+{
+  orderId: '',      // 订单ID（必填）
+  title: '',        // 支付标题（必填）
+  amount: 0,        // 支付金额，单位：分（必填）
+  body: ''          // 商品描述（可选）
+}
+```
+
+## 组件事件 (Events)
+
+| 事件名 | 参数 | 说明 |
+|--------|------|------|
+| `update:modelValue` | `Boolean` | 更新弹窗显示状态 |
+| `success` | `String` (outTradeNo) | 支付成功回调，返回微信交易号 |
+| `cancel` | - | 用户取消支付回调 |
+| `failed` | `String` (errorMessage) | 支付失败回调，返回错误信息 |
+
+## API接口要求
+
+组件需要后端提供以下API接口：
+
+### 1. 创建微信支付订单
+```javascript
+// POST /wechat_pay/createOrder
+// 请求参数
+{
+  orderId: 'ORDER_123456',     // 订单ID
+  totalFee: 1000,              // 支付金额（分）
+  body: '商品描述'              // 商品描述
+}
+
+// 响应格式
+{
+  code: 200,
+  result: {
+    codeUrl: 'weixin://wxpay/bizpayurl?pr=xxx',  // 支付二维码URL
+    outTradeNo: 'WX_ORDER_123456'                 // 微信订单号
+  },
+  message: 'success'
+}
+```
+
+### 2. 查询支付状态
+```javascript
+// GET /wechat_pay/queryOrder?outTradeNo=WX_ORDER_123456
+// 响应格式
+{
+  code: 200,
+  result: {
+    resultCode: 'SUCCESS',    // 业务结果
+    returnCode: 'SUCCESS',    // 通信标识
+    tradeState: 'SUCCESS'     // 交易状态：SUCCESS-支付成功，CLOSED-已关闭，REVOKED-已撤销
+  },
+  message: 'success'
+}
+```
+
+### 3. 取消支付订单（可选）
+```javascript
+// POST /wechat_pay/cancelOrder
+// 请求参数
+{
+  outTradeNo: 'WX_ORDER_123456'  // 微信订单号
+}
+```
+
+## 支付流程
+
+1. 用户点击支付按钮
+2. 调用创建订单API获取支付二维码
+3. 显示二维码供用户扫码
+4. 开始轮询查询支付状态（每2秒一次）
+5. 用户完成支付后，组件检测到支付成功
+6. 触发成功回调，关闭支付弹窗
+
+## 状态说明
+
+组件内部维护以下支付状态：
+
+- `loading`: 正在生成支付二维码
+- `pending`: 等待用户扫码支付
+- `success`: 支付成功
+- `failed`: 支付失败
+- `timeout`: 支付超时（5分钟后自动超时）
+
+## 样式定制
+
+组件使用了项目的主色调 `#0A2463`，如需自定义样式，可以通过CSS变量或深度选择器进行修改：
+
+```scss
+// 自定义主色调
+.wechat-payment {
+  --primary-color: #your-color;
+}
+
+// 深度选择器修改样式
+:deep(.wechat-payment) {
+  .payment-amount {
+    color: #your-color;
+  }
+}
+```
+
+## 注意事项
+
+1. **金额单位**：组件内部金额以分为单位，显示时会自动转换为元
+2. **轮询频率**：默认每2秒轮询一次支付状态，可根据需要调整
+3. **超时时间**：默认5分钟超时，可在组件内部修改 `countdown` 初始值
+4. **错误处理**：建议在业务层面添加网络异常处理
+5. **移动端适配**：组件已适配移动端，二维码会自动缩小
+
+## 完整示例
+
+参考 `src/views/user/PaymentExample.vue` 文件查看完整的使用示例。
+
+## 技术栈
+
+- Vue 3 + Composition API
+- Element Plus UI框架
+- QRCode.js 二维码生成库
+- SCSS样式预处理
+
+## 浏览器兼容性
+
+- Chrome 70+
+- Firefox 63+
+- Safari 12+
+- Edge 79+
+
+## 参考资料
+
+- [微信支付官方文档](https://pay.weixin.qq.com/wiki/doc/api/index.html)
+- [H5微信支付、PC端微信支付 - CSDN博客](https://blog.csdn.net/WANGLING0108/article/details/133808856) 

src/components/common/WechatPayment.vue

@@ -0,0 +1,604 @@
+<template>
+    <div class="wechat-payment">
+        <!-- 支付弹窗 -->
+        <el-dialog
+            v-model="visible"
+            title="微信支付"
+            width="400px"
+            :close-on-click-modal="false"
+            :close-on-press-escape="false"
+            @close="handleCancel"
+        >
+            <div class="payment-content">
+                <!-- 支付信息 -->
+                <div class="payment-info">
+                    <div class="payment-title">{{ paymentData.title }}</div>
+                    <div class="payment-amount">
+                        ¥<span class="amount-value">{{ formatAmount(paymentData.amount) }}</span>
+                    </div>
+                </div>
+
+                <!-- 支付状态 -->
+                <div class="payment-status">
+                    <template v-if="paymentStatus === 'pending'">
+                        <div class="qr-container">
+                            <div class="qr-code" ref="qrCodeRef">
+                                <!-- 二维码将在这里生成 -->
+                            </div>
+                            <div class="qr-tips">
+                                <el-icon class="scan-icon"><Iphone /></el-icon>
+                                <p>请使用微信扫码支付</p>
+                                <p class="tips-text">扫码后请在手机上完成支付</p>
+                            </div>
+                        </div>
+                        <!-- 倒计时 -->
+                        <div class="countdown">
+                            <span>支付剩余时间：</span>
+                            <span class="countdown-time">{{ formatTime(countdown) }}</span>
+                        </div>
+                    </template>
+
+                    <template v-else-if="paymentStatus === 'loading'">
+                        <div class="loading-status">
+                            <el-icon class="loading-icon"><Loading /></el-icon>
+                            <p>正在生成支付二维码...</p>
+                        </div>
+                    </template>
+
+                    <template v-else-if="paymentStatus === 'success'">
+                        <div class="success-status">
+                            <el-icon class="success-icon"><CircleCheck /></el-icon>
+                            <p>支付成功！</p>
+                            <p class="success-tips">感谢您的支付，页面即将跳转...</p>
+                        </div>
+                    </template>
+
+                    <template v-else-if="paymentStatus === 'failed'">
+                        <div class="failed-status">
+                            <el-icon class="failed-icon"><CircleClose /></el-icon>
+                            <p>支付失败</p>
+                            <p class="failed-tips">{{ errorMessage || '支付过程中出现异常，请重试' }}</p>
+                        </div>
+                    </template>
+
+                    <template v-else-if="paymentStatus === 'timeout'">
+                        <div class="timeout-status">
+                            <el-icon class="timeout-icon"><Clock /></el-icon>
+                            <p>支付超时</p>
+                            <p class="timeout-tips">二维码已过期，请重新发起支付</p>
+                        </div>
+                    </template>
+                </div>
+            </div>
+
+            <!-- 操作按钮 -->
+            <template #footer>
+                <div class="dialog-footer">
+                    <el-button 
+                        v-if="paymentStatus === 'pending'" 
+                        @click="refreshQrCode"
+                        :loading="refreshing"
+                    >
+                        刷新二维码
+                    </el-button>
+                    <el-button 
+                        v-if="paymentStatus === 'failed' || paymentStatus === 'timeout'" 
+                        type="primary"
+                        @click="retryPayment"
+                    >
+                        重新支付
+                    </el-button>
+                    <el-button 
+                        @click="handleCancel"
+                        :disabled="paymentStatus === 'loading'"
+                    >
+                        {{ paymentStatus === 'success' ? '关闭' : '取消支付' }}
+                    </el-button>
+                </div>
+            </template>
+        </el-dialog>
+    </div>
+</template>
+
+<script>
+import { ref, computed, nextTick, onUnmounted, watch } from 'vue';
+import { ElMessage, ElMessageBox } from 'element-plus';
+import { orderApi } from '@/api/user';
+import { 
+    Iphone, 
+    Loading, 
+    CircleCheck, 
+    CircleClose, 
+    Clock 
+} from '@element-plus/icons-vue';
+import { wechatPayApi } from '@/api/user.js';
+import QRCode from 'qrcode';
+
+export default {
+    name: 'WechatPayment',
+    components: {
+        Iphone,
+        Loading,
+        CircleCheck,
+        CircleClose,
+        Clock
+    },
+    props: {
+        // 是否显示支付弹窗
+        modelValue: {
+            type: Boolean,
+            default: false
+        },
+        // 支付数据
+        paymentData: {
+            type: Object,
+            default: () => ({
+                orderId: '',      // 订单ID
+                title: '商品支付', // 支付标题
+                amount: 0,        // 支付金额（分）
+                body: ''          // 商品描述
+            })
+        }
+    },
+    emits: ['update:modelValue', 'success', 'cancel', 'failed'],
+    setup(props, { emit }) {
+        const visible = computed({
+            get: () => props.modelValue,
+            set: (value) => emit('update:modelValue', value)
+        });
+
+        const qrCodeRef = ref(null);
+        const paymentStatus = ref('loading');
+        const countdown = ref(300);
+        const refreshing = ref(false);
+        const errorMessage = ref('');
+        
+        let pollingTimer = null;
+        let countdownTimer = null;
+        let outTradeNo = '';
+
+        // 格式化金额
+        const formatAmount = (amount) => {
+            return (amount / 100).toFixed(2);
+        };
+
+        // 格式化时间
+        const formatTime = (seconds) => {
+            const minutes = Math.floor(seconds / 60);
+            const remainingSeconds = seconds % 60;
+            return `${minutes.toString().padStart(2, '0')}:${remainingSeconds.toString().padStart(2, '0')}`;
+        };
+
+        // 生成二维码
+        const generateQrCode = async (codeUrl) => {
+            try {
+                await nextTick();
+                if (qrCodeRef.value) {
+                    qrCodeRef.value.innerHTML = '';
+                    await QRCode.toCanvas(qrCodeRef.value, codeUrl, {
+                        width: 200,
+                        height: 200,
+                        margin: 1,
+                        color: {
+                            dark: '#000000',
+                            light: '#FFFFFF'
+                        }
+                    });
+                }
+            } catch (error) {
+                console.error('生成二维码失败:', error);
+                ElMessage.error('生成二维码失败');
+            }
+        };
+
+        // 创建支付订单
+        const createPaymentOrder = async () => {
+            try {
+                paymentStatus.value = 'loading';
+                
+                const params = {
+                    orderId: props.paymentData.orderId,
+                    totalFee: props.paymentData.amount,
+                    body: props.paymentData.body || props.paymentData.title
+                };
+
+                // 模拟API响应
+                await new Promise(resolve => setTimeout(resolve, 1000));
+                const mockResponse = {
+                    code: 200,
+                    result: {
+                        codeUrl: `weixin://wxpay/bizpayurl?pr=${Math.random().toString(36).substr(2, 9)}`,
+                        outTradeNo: `ORDER_${Date.now()}`
+                    }
+                };
+
+                if (mockResponse.code === 200 && mockResponse.result) {
+                    const { codeUrl, outTradeNo: tradeNo } = mockResponse.result;
+                    outTradeNo = tradeNo;
+                    
+                    await generateQrCode(codeUrl);
+                    
+                    paymentStatus.value = 'pending';
+                    startPolling();
+                    startCountdown();
+                } else {
+                    throw new Error('创建支付订单失败');
+                }
+            } catch (error) {
+                console.error('创建支付订单失败:', error);
+                paymentStatus.value = 'failed';
+                errorMessage.value = error.message;
+                ElMessage.error(error.message || '创建支付订单失败');
+            }
+        };
+
+        // 开始轮询支付状态
+        const startPolling = () => {
+            if (pollingTimer) {
+                clearInterval(pollingTimer);
+            }
+
+            pollingTimer = setInterval(async () => {
+                await checkPaymentStatus();
+            }, 2000);
+        };
+
+        // 停止轮询
+        const stopPolling = () => {
+            if (pollingTimer) {
+                clearInterval(pollingTimer);
+                pollingTimer = null;
+            }
+        };
+
+        // 检查支付状态
+        const checkPaymentStatus = async () => {
+            try {
+                // 模拟随机支付成功（演示用）
+                if (Math.random() > 0.95) {
+                    handlePaymentSuccess();
+                    return;
+                }
+
+                // 实际项目中调用真实API
+                // const response = await wechatPayApi.queryWechatPayStatus(outTradeNo);
+            } catch (error) {
+                console.error('查询支付状态失败:', error);
+            }
+        };
+
+        // 处理支付成功
+        const handlePaymentSuccess = () => {
+            paymentStatus.value = 'success';
+            stopPolling();
+            stopCountdown();
+            
+            ElMessage.success('支付成功！');
+            emit('success', outTradeNo);
+            
+            setTimeout(() => {
+                visible.value = false;
+            }, 3000);
+        };
+
+        // 处理支付失败
+        const handlePaymentFailed = (message) => {
+            paymentStatus.value = 'failed';
+            errorMessage.value = message;
+            stopPolling();
+            stopCountdown();
+            
+            ElMessage.error(message || '支付失败');
+            emit('failed', message);
+        };
+
+        // 开始倒计时
+        const startCountdown = () => {
+            countdown.value = 300;
+            
+            countdownTimer = setInterval(() => {
+                countdown.value--;
+                
+                if (countdown.value <= 0) {
+                    handlePaymentTimeout();
+                }
+            }, 1000);
+        };
+
+        // 停止倒计时
+        const stopCountdown = () => {
+            if (countdownTimer) {
+                clearInterval(countdownTimer);
+                countdownTimer = null;
+            }
+        };
+
+        // 处理支付超时
+        const handlePaymentTimeout = () => {
+            paymentStatus.value = 'timeout';
+            stopPolling();
+            stopCountdown();
+            
+            ElMessage.warning('支付超时，请重新发起支付');
+        };
+
+        // 刷新二维码
+        const refreshQrCode = async () => {
+            refreshing.value = true;
+            try {
+                await createPaymentOrder();
+            } finally {
+                refreshing.value = false;
+            }
+        };
+
+        // 重新支付
+        const retryPayment = () => {
+            errorMessage.value = '';
+            createPaymentOrder();
+        };
+
+        // 取消支付
+        const handleCancel = async () => {
+            if (paymentStatus.value === 'success') {
+                visible.value = false;
+                return;
+            }
+
+            try {
+                await ElMessageBox.confirm(
+                    '确定要取消支付吗？',
+                    '取消支付',
+                    {
+                        confirmButtonText: '确定',
+                        cancelButtonText: '继续支付',
+                        type: 'warning',
+                    }
+                );
+
+                stopPolling();
+                stopCountdown();
+                
+                visible.value = false;
+                emit('cancel');
+            } catch {
+                // 用户选择继续支付
+            }
+        };
+
+        // 监听弹窗显示状态
+        watch(visible, (newVal) => {
+            if (newVal && props.paymentData.orderId) {
+                createPaymentOrder();
+            } else {
+                stopPolling();
+                stopCountdown();
+                paymentStatus.value = 'loading';
+                errorMessage.value = '';
+                outTradeNo = '';
+            }
+        });
+
+        // 组件卸载时清理
+        onUnmounted(() => {
+            stopPolling();
+            stopCountdown();
+        });
+
+        return {
+            visible,
+            qrCodeRef,
+            paymentStatus,
+            countdown,
+            refreshing,
+            errorMessage,
+            formatAmount,
+            formatTime,
+            refreshQrCode,
+            retryPayment,
+            handleCancel
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.wechat-payment {
+    .payment-content {
+        text-align: center;
+        padding: 20px 0;
+
+        .payment-info {
+            margin-bottom: 20px;
+
+            .payment-title {
+                font-size: 18px;
+                font-weight: 600;
+                color: #303133;
+                margin-bottom: 8px;
+            }
+
+            .payment-amount {
+                font-size: 24px;
+                color: #0A2463;
+                font-weight: 700;
+
+                .amount-value {
+                    font-size: 32px;
+                }
+            }
+        }
+
+        .payment-status {
+            min-height: 300px;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+
+            .qr-container {
+                .qr-code {
+                    margin-bottom: 16px;
+                    display: flex;
+                    justify-content: center;
+                    
+                    :deep(canvas) {
+                        border-radius: 8px;
+                        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                    }
+                }
+
+                .qr-tips {
+                    .scan-icon {
+                        font-size: 32px;
+                        color: #0A2463;
+                        margin-bottom: 8px;
+                    }
+
+                    p {
+                        margin: 4px 0;
+                        color: #606266;
+
+                        &:first-of-type {
+                            font-size: 16px;
+                            font-weight: 600;
+                            color: #303133;
+                        }
+                    }
+
+                    .tips-text {
+                        font-size: 14px;
+                        color: #909399;
+                    }
+                }
+            }
+
+            .countdown {
+                margin-top: 16px;
+                font-size: 14px;
+                color: #909399;
+
+                .countdown-time {
+                    color: #F56C6C;
+                    font-weight: 600;
+                }
+            }
+
+            .loading-status,
+            .success-status,
+            .failed-status,
+            .timeout-status {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
+
+                .loading-icon {
+                    font-size: 48px;
+                    color: #0A2463;
+                    animation: rotate 2s linear infinite;
+                    margin-bottom: 16px;
+                }
+
+                .success-icon {
+                    font-size: 48px;
+                    color: #67C23A;
+                    margin-bottom: 16px;
+                }
+
+                .failed-icon,
+                .timeout-icon {
+                    font-size: 48px;
+                    color: #F56C6C;
+                    margin-bottom: 16px;
+                }
+
+                p {
+                    margin: 4px 0;
+                    font-size: 16px;
+                    color: #303133;
+
+                    &:first-of-type {
+                        font-weight: 600;
+                        font-size: 18px;
+                    }
+                }
+
+                .success-tips,
+                .failed-tips,
+                .timeout-tips {
+                    font-size: 14px;
+                    color: #909399;
+                }
+            }
+        }
+    }
+
+    .dialog-footer {
+        display: flex;
+        justify-content: center;
+        gap: 12px;
+
+        .el-button {
+            &.el-button--primary {
+                background-color: #0A2463;
+                border-color: #0A2463;
+
+                &:hover {
+                    background-color: #083354;
+                    border-color: #083354;
+                }
+            }
+        }
+    }
+}
+
+@keyframes rotate {
+    from {
+        transform: rotate(0deg);
+    }
+    to {
+        transform: rotate(360deg);
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .wechat-payment {
+        :deep(.el-dialog) {
+            width: 90% !important;
+            margin: 5vh auto !important;
+        }
+
+        .payment-content {
+            padding: 16px 0;
+
+            .payment-info {
+                .payment-title {
+                    font-size: 16px;
+                }
+
+                .payment-amount {
+                    font-size: 20px;
+
+                    .amount-value {
+                        font-size: 28px;
+                    }
+                }
+            }
+
+            .payment-status {
+                min-height: 250px;
+
+                .qr-container {
+                    .qr-code {
+                        :deep(canvas) {
+                            width: 160px !important;
+                            height: 160px !important;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style> 

src/layout/layout/Header.vue

@@ -108,6 +108,12 @@
                 </el-dropdown>
             </div>
         </div>
+        
+        <!-- 个人信息弹窗 -->
+        <PersonalInfoModal
+            v-model="showPersonalInfoModal"
+            @success="handlePersonalInfoUpdate"
+        />
     </div>
 </template>
 
@@ -118,6 +124,7 @@ import { useMainStore } from '@/store';
 import { ArrowDown, ArrowRight, Bell, Reading, List, Star, Wallet, SwitchButton } from '@element-plus/icons-vue';
 import { AUTH_INJECTION_KEY } from '@/components/auth/AuthProvider.vue';
 import { AUTHOR_APPLICATION_INJECTION_KEY } from '@/components/auth/AuthorApplicationProvider.vue';
+import PersonalInfoModal from '@/components/common/PersonalInfoModal.vue';
 
 export default {
     name: 'AppHeader',
@@ -130,6 +137,7 @@ export default {
         Star,
         Wallet,
         SwitchButton,
+        PersonalInfoModal,
         GiftBox: {
             render() {
                 return h('svg', {
@@ -150,6 +158,7 @@ export default {
         const route = useRoute();
         const store = useMainStore();
         const searchKeyword = ref('');
+        const showPersonalInfoModal = ref(false);
         
         // 注入身份验证上下文
         const authContext = inject(AUTH_INJECTION_KEY);
@@ -193,7 +202,13 @@ export default {
         };
 
         const goToUserCenter = () => {
-            router.push('/user/center');
+            showPersonalInfoModal.value = true;
+        };
+
+        // 处理个人信息更新成功
+        const handlePersonalInfoUpdate = () => {
+            // 刷新用户信息
+            store.fetchUserInfo();
         };
         
         const goToBookshelf = () => {
@@ -340,9 +355,11 @@ export default {
             activeMenu,
             searchKeyword,
             navigationCategories,
+            showPersonalInfoModal,
             handleSearch,
             goToLogin,
             goToUserCenter,
+            handlePersonalInfoUpdate,
             goToBookshelf,
             goToGiftBox,
             goToTaskCenter,

src/main.js

@@ -17,9 +17,11 @@ const pinia = createPinia();
 app.use(ElementPlus);
 app.use(pinia);
 
-// 先初始化身份验证状态
+// 先初始化身份验证状态（异步执行，不阻塞应用启动）
 const store = useMainStore();
-store.initializeAuth();
+store.initializeAuth().catch(err => {
+    console.error('[Main] 初始化登录状态失败:', err);
+});
 
 // 全局挂载pinia，用于路由守卫
 window.$pinia = pinia;

src/router/index.js

@@ -157,9 +157,10 @@ router.beforeEach((to, from, next) => {
         meta: to.meta
     });
     
-    // 首先尝试从localStorage获取登录和作家状态
-    const token = localStorage.getItem('token');
-    const isLoggedIn = !!token;
+    // 首先尝试从localStorage获取登录和作家状态（统一使用X-Access-Token）
+    const token = localStorage.getItem('X-Access-Token') || localStorage.getItem('token');
+    const userData = localStorage.getItem('user');
+    const isLoggedIn = !!(token && userData);
     const isAuthor = localStorage.getItem('isAuthor') === 'true';
     
     // 输出当前状态

src/store/index.js

@@ -15,12 +15,28 @@ export const useMainStore = defineStore('main', {
     }),
 
     getters: {
-        isAuthenticated: (state) => state.isLoggedIn && state.user !== null,
+        // 计算属性：是否已认证（统一检查logic）
+        isAuthenticated: (state) => {
+            const hasToken = !!state.token || !!localStorage.getItem('X-Access-Token');
+            const hasUser = !!state.user || !!localStorage.getItem('user');
+            return state.isLoggedIn && hasToken && hasUser;
+        },
+        
         unreadMessageCount: (state) => state.unreadMessages,  // 添加获取未读消息数量的getter
+        
         // 获取前几个分类用于导航栏显示
         navigationCategories: (state) => state.categories.slice(0, 3),
+        
         // 获取所有分类
-        allCategories: (state) => state.categories
+        allCategories: (state) => state.categories,
+        
+        // 计算属性：当前token（优先使用state中的，否则从localStorage获取）
+        currentToken: (state) => state.token || localStorage.getItem('X-Access-Token'),
+        
+        // 计算属性：是否为作家（统一检查logic）
+        isCurrentAuthor: (state) => {
+            return state.isAuthor || localStorage.getItem('isAuthor') === 'true';
+        }
     },
 
     actions: {
@@ -214,11 +230,11 @@ export const useMainStore = defineStore('main', {
         },
         
         // 初始化，从本地存储恢复登录状态
-        initializeAuth() {
-            // 先直接从localStorage中获取各个状态
+        async initializeAuth() {
+            // 统一使用X-Access-Token作为主要token存储
             const userData = localStorage.getItem('user');
-            const token = localStorage.getItem('token');
-            const isAuthor = localStorage.getItem('isAuthor') == 'true';
+            const token = localStorage.getItem('X-Access-Token') || localStorage.getItem('token');
+            const isAuthor = localStorage.getItem('isAuthor') === 'true';
             
             // 恢复用户数据和登录状态
             if (userData && token) {
@@ -227,6 +243,11 @@ export const useMainStore = defineStore('main', {
                     this.token = token;
                     this.isLoggedIn = true;
                     
+                    // 确保X-Access-Token存在（迁移兼容）
+                    if (!localStorage.getItem('X-Access-Token')) {
+                        localStorage.setItem('X-Access-Token', token);
+                    }
+                    
                     // 明确设置作家状态，以localStorage为准
                     this.isAuthor = isAuthor;
                     
@@ -235,16 +256,55 @@ export const useMainStore = defineStore('main', {
                         this.user.isAuthor = isAuthor;
                     }
                     
-                    // 输出调试信息
+                    console.log('[Store] 本地登录状态已恢复，正在获取最新用户信息...');
+                    
+                    // 从后端获取最新的用户信息
+                    try {
+                        await this.fetchLatestUserInfo();
+                        console.log('[Store] 用户信息已更新为最新版本');
+                    } catch (error) {
+                        console.warn('[Store] 获取最新用户信息失败:', error);
+                        // 如果是认证错误，清除登录状态
+                        if (error.message.includes('401') || error.message.includes('未授权')) {
+                            console.log('[Store] Token已过期，清除登录状态');
+                            this.clearAuthStatus();
+                            return;
+                        }
+                        // 其他错误不影响已恢复的登录状态，继续使用本地缓存的用户信息
+                        console.log('[Store] 使用本地缓存的用户信息');
+                    }
+                    
+                    // 输出最终的调试信息
                     console.log('[Store] Auth initialized:', {
                         isLoggedIn: this.isLoggedIn,
                         isAuthor: this.isAuthor,
-                        user: this.user
+                        user: this.user,
+                        token: token ? '已设置' : '未设置'
                     });
                 } catch (e) {
                     console.error('[Store] Error parsing user data:', e);
-                    this.logout();
+                    this.clearAuthStatus();
                 }
+            } else {
+                console.log('[Store] 无有效登录状态，保持未登录状态');
+                this.clearAuthStatus();
+            }
+        },
+
+        // 获取最新用户信息（内部方法）
+        async fetchLatestUserInfo() {
+            try {
+                const res = await authApi.getUserByToken();
+                if (res.success && res.result) {
+                    // 更新用户信息但保持现有的登录状态
+                    this.handleUserInfoUpdate(res.result);
+                    return res.result;
+                } else {
+                    throw new Error(res.message || '获取用户信息失败');
+                }
+            } catch (error) {
+                console.error('[Store] 获取最新用户信息失败:', error);
+                throw error;
             }
         },
         
@@ -260,11 +320,27 @@ export const useMainStore = defineStore('main', {
         
         // 设置未读消息数量
         async getUnreadMessages() {
-            const res = await commentApi.getMyCommentNum();
-            if (res.success) {
-                this.unreadMessages = res.result;
+            // 只有在已登录状态下才获取未读消息
+            if (!this.isLoggedIn || !this.token) {
+                this.unreadMessages = 0;
+                return 0;
             }
-            return res.result;
+
+            try {
+                const res = await commentApi.getMyCommentNum();
+                if (res.success) {
+                    this.unreadMessages = res.result;
+                    return res.result;
+                }
+            } catch (error) {
+                console.error('[Store] 获取未读消息失败:', error);
+                // 如果是401错误，说明token已过期，不需要显示错误
+                if (!error.message.includes('401') && !error.message.includes('未授权')) {
+                    // 只有非认证错误才重置未读消息数
+                    this.unreadMessages = 0;
+                }
+            }
+            return 0;
         },
 
         // 清除未读消息数量
@@ -310,6 +386,34 @@ export const useMainStore = defineStore('main', {
                 this.handleUserInfoUpdate(res.result);
             }
             return res.result;
+        },
+
+        // 更新用户信息
+        async updateUserInfo(updateData) {
+            try {
+                // 这里应该调用更新用户信息的API
+                const res = await authApi.updateUserInfo(updateData);
+                
+                // 更新本地用户信息
+                if (this.user) {
+                    this.user = { ...this.user, ...updateData };
+                    localStorage.setItem('user', JSON.stringify(this.user));
+                }
+                
+                return { success: true };
+            } catch (error) {
+                console.error('更新用户信息失败:', error);
+                throw error;
+            }
+        },
+
+        // 刷新用户信息
+        async fetchUserInfo() {
+            try {
+                await this.getUserInfo();
+            } catch (error) {
+                console.error('获取用户信息失败:', error);
+            }
         }
     }
 }); 

src/utils/auth.js

@@ -0,0 +1,216 @@
+/**
+ * 登录状态检查和管理工具
+ */
+
+/**
+ * 检查当前登录状态
+ * @returns {Object} 登录状态信息
+ */
+export const checkLoginStatus = () => {
+    const token = localStorage.getItem('X-Access-Token');
+    const userData = localStorage.getItem('user');
+    const isAuthor = localStorage.getItem('isAuthor') === 'true';
+    
+    try {
+        const user = userData ? JSON.parse(userData) : null;
+        return {
+            isLoggedIn: !!(token && user),
+            token,
+            user,
+            isAuthor
+        };
+    } catch (error) {
+        console.warn('[Auth Utils] 解析用户数据失败:', error);
+        return {
+            isLoggedIn: false,
+            token: null,
+            user: null,
+            isAuthor: false
+        };
+    }
+};
+
+/**
+ * 刷新用户信息（从后端获取最新数据）
+ * @returns {Promise<Object>} 最新的用户信息
+ */
+export const refreshUserInfo = async () => {
+    const { isLoggedIn } = checkLoginStatus();
+    
+    if (!isLoggedIn) {
+        throw new Error('用户未登录');
+    }
+    
+    const store = window.$store;
+    if (store && typeof store.fetchLatestUserInfo === 'function') {
+        try {
+            const userInfo = await store.fetchLatestUserInfo();
+            return userInfo;
+        } catch (error) {
+            console.error('[Auth Utils] 刷新用户信息失败:', error);
+            throw error;
+        }
+    } else {
+        throw new Error('Store不可用');
+    }
+};
+
+/**
+ * 检查是否已登录，如果未登录则触发登录弹窗
+ * @param {Function} callback 登录成功后的回调函数
+ * @returns {Boolean} 是否已登录
+ */
+export const requireLogin = (callback) => {
+    const { isLoggedIn } = checkLoginStatus();
+    
+    if (isLoggedIn) {
+        callback && callback();
+        return true;
+    }
+    
+    // 未登录，触发登录弹窗
+    triggerLogin(callback);
+    return false;
+};
+
+/**
+ * 检查是否为作家身份，如果不是则触发相应弹窗
+ * @param {Function} callback 申请成功后的回调函数
+ * @returns {Boolean} 是否为作家
+ */
+export const requireAuthor = (callback) => {
+    const { isLoggedIn, isAuthor } = checkLoginStatus();
+    
+    if (!isLoggedIn) {
+        // 未登录，先登录再申请作家
+        triggerLogin(() => {
+            triggerAuthorApplication(callback);
+        });
+        return false;
+    }
+    
+    if (isAuthor) {
+        return true;
+    }
+    
+    // 已登录但不是作家，触发作家申请
+    triggerAuthorApplication(callback);
+    return false;
+};
+
+/**
+ * 触发登录弹窗
+ * @param {Function} callback 登录成功后的回调函数
+ */
+export const triggerLogin = (callback) => {
+    const authContext = window.$authContext;
+    
+    if (authContext && typeof authContext.openLogin === 'function') {
+        authContext.openLogin(callback);
+    } else {
+        // 如果authContext还未挂载，则设置事件供之后触发
+        const triggerLoginEvent = () => {
+            const context = window.$authContext;
+            if (context && typeof context.openLogin === 'function') {
+                context.openLogin(callback);
+            }
+        };
+        
+        if (window.routerEvents) {
+            window.routerEvents.triggerLogin = triggerLoginEvent;
+        } else {
+            console.warn('[Auth Utils] 无法触发登录弹窗，routerEvents不可用');
+        }
+    }
+};
+
+/**
+ * 触发作家申请弹窗
+ * @param {Function} callback 申请成功后的回调函数
+ */
+export const triggerAuthorApplication = (callback) => {
+    const authorContext = window.$authorApplicationContext;
+    
+    if (authorContext && typeof authorContext.openApplicationModal === 'function') {
+        authorContext.openApplicationModal(callback);
+    } else {
+        console.warn('[Auth Utils] 无法触发作家申请弹窗，authorApplicationContext不可用');
+    }
+};
+
+/**
+ * 清除登录状态（登出）
+ */
+export const clearLoginStatus = () => {
+    // 清除本地存储
+    localStorage.removeItem('X-Access-Token');
+    localStorage.removeItem('token');
+    localStorage.removeItem('user');
+    localStorage.removeItem('isAuthor');
+    localStorage.removeItem('bookshelf');
+    
+    console.log('[Auth Utils] 登录状态已清除');
+    
+    // 如果有store，也清除store状态
+    if (window.$store) {
+        window.$store.clearAuthStatus();
+    }
+};
+
+/**
+ * 页面按钮点击前的登录检查装饰器
+ * @param {Function} fn 原始点击处理函数
+ * @param {Object} options 配置选项
+ * @param {Boolean} options.requireAuth 是否需要登录
+ * @param {Boolean} options.requireAuthor 是否需要作家身份
+ * @returns {Function} 包装后的点击处理函数
+ */
+export const withAuthCheck = (fn, options = {}) => {
+    return (...args) => {
+        const { requireAuth = false, requireAuthor = false } = options;
+        
+        if (requireAuthor) {
+            // 需要作家身份
+            if (requireAuthor(() => fn(...args))) {
+                fn(...args);
+            }
+        } else if (requireAuth) {
+            // 需要登录
+            if (requireLogin(() => fn(...args))) {
+                fn(...args);
+            }
+        } else {
+            // 不需要任何权限
+            fn(...args);
+        }
+    };
+};
+
+/**
+ * Vue组合式API版本的登录检查hook
+ * @returns {Object} 登录检查相关的方法
+ */
+export const useAuthCheck = () => {
+    return {
+        checkLoginStatus,
+        requireLogin,
+        requireAuthor,
+        triggerLogin,
+        triggerAuthorApplication,
+        clearLoginStatus,
+        withAuthCheck,
+        refreshUserInfo
+    };
+};
+
+export default {
+    checkLoginStatus,
+    requireLogin,
+    requireAuthor,
+    triggerLogin,
+    triggerAuthorApplication,
+    clearLoginStatus,
+    withAuthCheck,
+    useAuthCheck,
+    refreshUserInfo
+}; 

src/utils/oss.js

@@ -3,7 +3,12 @@ import { ossConfig } from '@/config/oss';
 
 class OssService {
     constructor() {
-        this.client = new OSS(ossConfig.config);
+        this.client = new OSS({
+            ...ossConfig.config,
+            secure: true,  // 使用HTTPS
+            // 可以通过设置这个选项来减少警告
+            internal: false
+        });
     }
 
     /**

src/views/book/chapter.vue

@@ -116,7 +116,7 @@ import { useRoute, useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { ArrowLeft, ArrowRight, ZoomIn, ZoomOut, MoonNight, ArrowUp, ArrowDown, Reading, Grid } from '@element-plus/icons-vue';
 import { homeApi } from '@/api/home.js';
-import { readBookApi } from '@/api/bookshelf.js';
+import { bookshelfApi } from '@/api/bookshelf.js';
 import CatalogDialog from '@/components/book/CatalogDialog.vue';
 
 export default {
@@ -235,7 +235,7 @@ export default {
                 const token = localStorage.getItem('token');
                 if (!token || !bookId.value || !chapterId.value || !bookDetail.value) return;
 
-                const response = await readBookApi.saveOrUpdateReadBook({
+                const response = await bookshelfApi.saveOrUpdateReadBook({
                     shopId: bookId.value,        // 书籍id
                     novelId: chapterId.value,    // 章节id
                     name: bookDetail.value.name,
@@ -285,12 +285,12 @@ export default {
 
                 if (isInBookshelf.value) {
                     // 移出书架
-                    await readBookApi.removeReadBook(bookId.value);
+                    await bookshelfApi.removeReadBook(bookId.value);
                     isInBookshelf.value = false;
                     ElMessage.success('已移出书架');
                 } else {
                     // 添加到书架 - 使用saveOrUpdateReadBook
-                    await readBookApi.saveOrUpdateReadBook({
+                    await bookshelfApi.saveOrUpdateReadBook({
                         shopId: bookId.value,
                         novelId: chapterId.value,
                         name: bookDetail.value?.name || '',

src/views/book/index.vue

@@ -7,93 +7,105 @@
         
         <!-- 详情内容 -->
         <div v-else>
-        <!-- 小说基本信息部分 -->
-        <div class="book-info-wrapper">
-            <div class="book-info">
-                <div class="book-cover">
-                    <img :src="book.cover || book.image" :alt="book.title || book.name">
-                </div>
-                <div class="book-details">
-                    <h1 class="book-title">{{ book.title || book.name }}</h1>
-                    <div class="book-meta">
-                        <div class="meta-item">
-                            <span class="label">作者：</span>
-                            <span class="value">{{ book.author }}</span>
-                        </div>
-                        <div class="meta-item book-status-row">
-                            <span class="status-badge">{{ book.status }}</span>
-                            <span class="dot">·</span>
-                            <span class="reading-tip">大家都在读</span>
-                        </div>
+            <!-- 小说基本信息部分 -->
+            <div class="book-info-wrapper">
+                <div class="book-info">
+                    <div class="book-cover">
+                        <img :src="book.cover || book.image" :alt="book.title || book.name">
                     </div>
-                    <div class="book-user-info">
-                        <div class="user-badges">
-                            <img class="level-icon" src="@/assets/images/book/level.png" alt="我的等级" />
-                            <span class="badge-label">我的等级</span>
+                    <div class="book-details">
+                        <h1 class="book-title">{{ book.title || book.name }}</h1>
+                        <div class="book-meta">
+                            <div class="meta-item">
+                                <span class="label">作者：</span>
+                                <span class="value">{{ book.author }}</span>
+                            </div>
+                            <div class="meta-item book-status-row">
+                                <span class="status-badge">{{ book.status }}</span>
+                                <span class="dot">·</span>
+                                <span class="reading-tip">大家都在读</span>
+                            </div>
                         </div>
-                        <div class="user-medal">
-                            <img class="medal-icon" src="@/assets/images/image-1.png" alt="勋章" />
+                        <div class="book-user-info">
+                            <div class="user-badges" style="display: flex;flex-direction: column;align-items: center;">
+                                <img class="level-icon" src="@/assets/images/book/level.png" alt="我的等级" />
+                                <span class="badge-label">我的等级</span>
+                            </div>
+                            <div class="user-medal">
+                                <img class="medal-icon" :src="userInfo.levelIcon" alt="勋章" />
+                            </div>
+                            <div class="user-avatar-block">
+                                <img class="user-avatar" :src="userInfo.avatar" alt="用户头像" />
+                                <span class="user-name">{{ userInfo.name }}</span>
+                                <span class="dot">·</span>
+                                <span class="user-title">{{ userInfo.role }}</span>
+                            </div>
+                            <span class="user-intimacy">{{ userInfo.intimacy }} 累计亲密值</span>
                         </div>
-                        <div class="user-avatar-block">
-                            <img class="user-avatar" src="@/assets/images/center/headImage.png" alt="用户头像" />
-                            <span class="user-name">小巴</span>
-                            <span class="dot">·</span>
-                            <span class="user-title">VIP会员</span>
-                        </div>
-                        <span class="user-intimacy">1000 累计亲密值</span>
-                    </div>
 
-                    <div class="action-buttons">
-                        <div class="action-btn-group">
-                            <el-button class="reward-btn" plain @click="showRewardDialog">互动打赏</el-button>
-                        </div>
-                        <div class="action-btn-group">
-                            <el-button
-                              :class="['add-to-shelf-btn', isInShelf ? 'in-shelf' : '']"
-                              :type="isInShelf ? '' : 'primary'"
-                              @click="toggleShelf"
-                            >{{ isInShelf ? '已加入书架' : '加入书架' }}</el-button>
-                        </div>
-                        <div class="action-btn-group">
-                            <el-button class="read-btn" 
-                            v-if="chapters.length > 0"
-                            @click="goToChapter(chapters[0].id)"
-                            style="background:#0A2463;color:#fff;border:none;">点击阅读</el-button>
+                        <div class="action-buttons">
+                            <div class="action-btn-group">
+                                <el-button class="reward-btn" plain @click="showRewardDialog">互动打赏</el-button>
+                            </div>
+                            <div class="action-btn-group">
+                                <el-button
+                                  :class="['add-to-shelf-btn', isInShelf ? 'in-shelf' : '']"
+                                  :type="isInShelf ? '' : 'primary'"
+                                  @click="toggleShelf"
+                                >{{ isInShelf ? '已加入书架' : '加入书架' }}</el-button>
+                            </div>
+                            <div class="action-btn-group">
+                                <el-button class="read-btn" 
+                                v-if="chapters.length > 0"
+                                @click="goToChapter(readButtonInfo.chapterId)"
+                                style="background:#0A2463;color:#fff;border:none;">
+                                    <div class="read-btn-content">
+                                        <div class="read-btn-text">{{ readButtonInfo.text }}</div>
+                                        <!-- <div v-if="readButtonInfo.subtitle" class="read-btn-subtitle">{{ readButtonInfo.subtitle }}</div> -->
+                                    </div>
+                                </el-button>
+                            </div>
                         </div>
                     </div>
                 </div>
             </div>
-        </div>
-        <!-- 主体内容区域：左右分栏 -->
-        <div class="book-main-content">
-            <div class="main-left">
-                <!-- 推荐票/亲密值统计 -->
-                <BookStats :book-data="book" />
-                <!-- 小说介绍 -->
-                <BookIntro :book-data="book" />
-                <!-- 目录 -->
-                <BookCatalog :book-id="bookId" :chapters="chapters" />
-                <!-- 评论 -->
-                <BookComments :book-id="bookId" />
-            </div>
-            <div class="main-right">
-                <!-- 读者亲密值榜单 -->
-                <IntimacyRanking :book-id="bookId" />
+            <!-- 主体内容区域：左右分栏 -->
+            <div class="book-main-content">
+                <div class="main-left">
+                    <!-- 推荐票/亲密值统计 -->
+                    <BookStats 
+                        :book-data="book" 
+                        :book-id="bookId" 
+                        @recommend-success="handleRecommendSuccess" 
+                    />
+                    <!-- 小说介绍 -->
+                    <BookIntro :book-data="book" />
+                    <!-- 目录 -->
+                    <BookCatalog :book-id="bookId" :chapters="chapters" />
+                    <!-- 评论 -->
+                    <BookComments :book-id="bookId" />
+                </div>
+                <div class="main-right">
+                    <!-- 读者亲密值榜单 -->
+                    <IntimacyRanking :book-id="bookId" />
+                </div>
             </div>
         </div>
+        
+        <!-- 互动打赏弹窗 -->
+        <InteractiveReward 
+            v-model:visible="rewardDialogVisible" 
+            :book-id="bookId"
+            @reward-success="handleRewardSuccess"
+        />
     </div>
-    </div>
-    <!-- 互动打赏弹窗 -->
-    <InteractiveReward 
-        v-model:visible="rewardDialogVisible" 
-        :book-id="bookId"
-        @reward-success="handleRewardSuccess"
-    />
 </template>
 
 <script>
-import { ref, reactive, onMounted, onBeforeUnmount } from 'vue';
+import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
 import { useRoute, useRouter } from 'vue-router';
+import { ElMessage } from 'element-plus';
+import { useMainStore } from '@/store';
 import BookCard from '@/components/common/BookCard.vue';
 import BookStats from '@/components/book/BookStats.vue';
 import BookIntro from '@/components/book/BookIntro.vue';
@@ -102,6 +114,8 @@ import BookComments from '@/components/book/BookComments.vue';
 import IntimacyRanking from '@/components/ranking/IntimacyRanking.vue';
 import InteractiveReward from '@/components/book/InteractiveReward.vue';
 import { homeApi } from '@/api/modules.js';
+import { bookshelfApi, achievementApi } from '@/api/bookshelf.js';
+import { requireLogin } from '@/utils/auth.js';
 
 export default {
     name: 'BookDetail',
@@ -117,6 +131,7 @@ export default {
     setup() {
         const route = useRoute();
         const router = useRouter();
+        const store = useMainStore();
         const bookId = route.params.id;
 
         // 响应式数据
@@ -124,6 +139,68 @@ export default {
         const book = ref({});
         const recommendedBooks = ref([]);
         const chapters = ref([]);
+        const isInShelf = ref(false);
+        const readingRecord = ref(null); // 阅读记录
+        const rewardDialogVisible = ref(false);
+        const userAchievement = ref({}); // 用户成就信息
+
+        // 获取用户成就信息
+        const fetchUserAchievement = async () => {
+            if (!store.isAuthenticated) {
+                userAchievement.value = {};
+                return;
+            }
+
+            try {
+                const response = await achievementApi.getAchievementByBookId(bookId);
+                // 新的API返回结构：response.result 包含完整的成就信息
+                userAchievement.value = response?.result || {};
+            } catch (error) {
+                console.error('获取用户成就失败:', error);
+                userAchievement.value = {};
+            }
+        };
+
+        // 计算属性：用户信息（优先使用真实用户信息，回退到默认值）
+        const userInfo = computed(() => {
+            const user = store.user;
+            const achievement = userAchievement.value;
+            
+            return {
+                avatar: user?.headImage || achievement?.hanHaiMember?.headImage || '@/assets/images/center/headImage.png',
+                name: user?.nickName || achievement?.hanHaiMember?.nickName || '小巴',
+                intimacy: achievement?.num || 0,
+                role: achievement?.commonBookAchievement?.title || achievement?.commonBookAchievement?.oldName || '我的等级',
+                levelIcon: achievement?.icon || '@/assets/images/book/level.png'
+            };
+        });
+
+        // 计算属性：阅读按钮文字和章节信息
+        const readButtonInfo = computed(() => {
+            if (!store.isAuthenticated) {
+                return {
+                    text: '点击阅读',
+                    subtitle: '',
+                    chapterId: chapters.value[0]?.id || null
+                };
+            }
+
+            if (readingRecord.value && readingRecord.value.id) {
+                // 找到对应的章节信息
+                const currentChapter = chapters.value.find(ch => ch.id === readingRecord.value.id);
+                return {
+                    text: '继续阅读',
+                    subtitle: currentChapter ? currentChapter.title : '继续上次阅读',
+                    chapterId: readingRecord.value.id
+                };
+            }
+
+            return {
+                text: '开始阅读',
+                subtitle: chapters.value[0]?.title || '',
+                chapterId: chapters.value[0]?.id || null
+            };
+        });
 
         // 获取书籍详情
         const fetchBookDetail = async () => {
@@ -170,11 +247,41 @@ export default {
             }
         };
 
+        // 检查书是否在书架中
+        const checkBookInShelf = async () => {
+            if (!store.isAuthenticated) {
+                isInShelf.value = false;
+                return;
+            }
+
+            try {
+                const response = await bookshelfApi.isAddBook(bookId);
+                isInShelf.value = !!response.result;
+            } catch (error) {
+                console.error('检查书架状态失败:', error);
+                isInShelf.value = false;
+            }
+        };
+
+        // 获取阅读记录
+        const fetchReadingRecord = async () => {
+            if (!store.isAuthenticated) {
+                readingRecord.value = null;
+                return;
+            }
+
+            try {
+                const response = await bookshelfApi.getReadChapterByBookId(bookId);
+                readingRecord.value = response.result || null;
+            } catch (error) {
+                console.error('获取阅读记录失败:', error);
+                readingRecord.value = null;
+            }
+        };
+
         const activeTab = ref('intro');
         const currentPage = ref(1);
         const commentText = ref('');
-        const isInShelf = ref(false);
-        const rewardDialogVisible = ref(false);
 
         const handlePageChange = (page) => {
             currentPage.value = page;
@@ -193,7 +300,9 @@ export default {
             currentPage.value = 1;
             commentText.value = '';
             isInShelf.value = false;
+            readingRecord.value = null;
             rewardDialogVisible.value = false;
+            userAchievement.value = {};
         };
 
         // 在组件销毁前清理
@@ -201,38 +310,118 @@ export default {
             cleanup();
         });
 
-        // 修改路由导航方式
+        // 智能阅读功能
         const goToChapter = (chapterId) => {
-            cleanup();
-            router.push({
-                name: 'ChapterDetail',
-                params: {
-                    id: bookId,
-                    chapterId: chapterId
+            requireLogin(() => {
+                if (!chapterId) {
+                    ElMessage.warning('暂无章节可阅读');
+                    return;
                 }
+                
+                cleanup();
+                router.push({
+                    name: 'ChapterDetail',
+                    params: {
+                        id: bookId,
+                        chapterId: chapterId
+                    }
+                });
             });
         };
 
+        // 切换书架状态
         const toggleShelf = () => {
-            isInShelf.value = !isInShelf.value;
+            requireLogin(async () => {
+                try {
+                    if (isInShelf.value) {
+                        // 从书架移除
+                        await bookshelfApi.deleteBookshelfByBookId(bookId);
+                        isInShelf.value = false;
+                        ElMessage.success('已从书架移除');
+                    } else {
+                        // 添加到书架
+                        const firstChapter = chapters.value[0];
+                        const params = {
+                            shopId: bookId,
+                            name: book.value.title || book.value.name,
+                            image: book.value.cover || book.value.image,
+                            novelId: firstChapter?.id || null
+                        };
+                        
+                        await bookshelfApi.addReadBook(params);
+                        isInShelf.value = true;
+                        ElMessage.success('已加入书架');
+                        
+                        // 重新获取阅读记录
+                        await fetchReadingRecord();
+                    }
+                } catch (error) {
+                    console.error('书架操作失败:', error);
+                    ElMessage.error('操作失败，请稍后重试');
+                }
+            });
         };
 
+        // 显示互动打赏弹窗
         const showRewardDialog = () => {
-            rewardDialogVisible.value = true;
+            requireLogin(() => {
+                rewardDialogVisible.value = true;
+            });
         };
 
+        // 处理打赏成功
         const handleRewardSuccess = (items) => {
             console.log('打赏成功，打赏项目:', items);
-            // 这里可以添加刷新亲密值或其他相关数据的逻辑
+            ElMessage.success('打赏成功！');
+            
+            // 重新获取书籍详情和用户成就信息
+            fetchBookDetail();
+            if (store.isAuthenticated) {
+                fetchUserAchievement();
+            }
+        };
+
+        // 处理投推荐票成功
+        const handleRecommendSuccess = () => {
+            console.log('投推荐票成功');
+            
+            // 重新获取书籍详情和用户成就信息
             fetchBookDetail();
+            if (store.isAuthenticated) {
+                fetchUserAchievement();
+            }
+        };
+
+        // 跳转到写书评页面
+        const goToWriteReview = () => {
+            requireLogin(() => {
+                // 这里可以跳转到书评编写页面
+                // router.push(`/book/${bookId}/review/write`);
+                ElMessage.info('书评功能开发中...');
+            });
+        };
+
+        // 查看亲密值排行榜详情
+        const viewIntimacyRanking = () => {
+            // 可以在这里打开排行榜详情弹窗或跳转到详情页面
+            ElMessage.info('亲密值排行榜详情功能开发中...');
         };
 
         onMounted(() => {
-            // 并行加载书籍详情、推荐书籍和章节目录
+            // 并行加载书籍详情和章节目录
             Promise.all([
                 fetchBookDetail(),
                 fetchChapters()
-            ]);
+            ]).then(() => {
+                // 书籍和章节信息加载完成后，检查用户相关状态
+                if (store.isAuthenticated) {
+                    Promise.all([
+                        checkBookInShelf(),
+                        fetchReadingRecord(),
+                        fetchUserAchievement()
+                    ]);
+                }
+            });
         });
 
         return {
@@ -251,7 +440,14 @@ export default {
             rewardDialogVisible,
             showRewardDialog,
             handleRewardSuccess,
-            cleanup
+            handleRecommendSuccess,
+            goToWriteReview,
+            viewIntimacyRanking,
+            cleanup,
+            readingRecord,
+            readButtonInfo,
+            userInfo,
+            userAchievement
         };
     }
 };
@@ -435,6 +631,31 @@ export default {
                         background: #0A2463;
                         color: #fff;
                         border: none;
+                        height: auto;
+                        min-height: 40px;
+                        padding: 8px 16px;
+                        
+                        .read-btn-content {
+                            display: flex;
+                            flex-direction: column;
+                            align-items: center;
+                            line-height: 1.2;
+                            
+                            .read-btn-text {
+                                font-size: 16px;
+                                font-weight: 500;
+                            }
+                            
+                            .read-btn-subtitle {
+                                font-size: 12px;
+                                opacity: 0.8;
+                                margin-top: 2px;
+                                max-width: 120px;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                white-space: nowrap;
+                            }
+                        }
                     }
                 }
             }

src/views/home/Bookshelf.vue

@@ -66,7 +66,7 @@ import { ref, reactive, onMounted } from 'vue';
 import { useRouter } from 'vue-router';
 import { ElMessage, ElMessageBox } from 'element-plus';
 import bookshelfCard from '@/components/bookshelf/bookshelfCard.vue';
-import { readBookApi } from '@/api/bookshelf.js';
+import { bookshelfApi } from '@/api/bookshelf.js';
 
 export default {
     name: 'BookshelfView',
@@ -97,7 +97,7 @@ export default {
                     pageSize: pagination.pageSize
                 };
                 
-                const response = await readBookApi.getReadBookPage(params);
+                const response = await bookshelfApi.getReadBookPage(params);
 
                 if (response.result && response.code == 200) {
                     const data = response.result;
@@ -179,7 +179,7 @@ export default {
                     type: 'warning'
                 });
                 
-                const response = await readBookApi.removeReadBook(bookId);
+                const response = await bookshelfApi.removeReadBook(bookId);
                 
                 if (response && response.code === 200) {
                     ElMessage({
@@ -222,7 +222,7 @@ export default {
                     return;
                 }
                 
-                const response = await readBookApi.batchRemoveReadBook(bookIds);
+                const response = await bookshelfApi.batchRemoveReadBook(bookIds);
                 
                 if (response && response.code === 200) {
                     clearConfirmVisible.value = false;

src/views/user/MoneyLog.vue

@@ -37,22 +37,22 @@
             <el-table-column prop="title" label="交易内容" min-width="200" />
             <el-table-column prop="type" label="类型" width="100">
                 <template #default="scope">
-                    <el-tag :type="scope.row.type === 1 ? 'success' : 'danger'">
-                        {{ scope.row.type === 1 ? '收入' : '支出' }}
+                    <el-tag :type="getTypeTagStyle(scope.row.type)">
+                        {{ getTypeText(scope.row.type) }}
                     </el-tag>
                 </template>
             </el-table-column>
-            <el-table-column prop="num" label="金额" width="120">
+            <el-table-column prop="money" label="豆豆" width="120">
                 <template #default="scope">
-                    <span :class="scope.row.type === 1 ? 'income-amount' : 'expense-amount'">
-                        {{ scope.row.type === 1 ? '+' : '-' }}{{ scope.row.num }}
+                    <span :class="getAmountClass(scope.row.type)">
+                        {{ getAmountPrefix(scope.row.type) }}{{ scope.row.money }}
                     </span>
                 </template>
             </el-table-column>
-            <el-table-column prop="status" label="状态" width="100">
+            <el-table-column prop="state" label="状态" width="100">
                 <template #default="scope">
-                    <el-tag :type="getStatusType(scope.row.status)">
-                        {{ getStatusText(scope.row.status) }}
+                    <el-tag :type="getStatusType(scope.row.state)">
+                        {{ getStatusText(scope.row.state) }}
                     </el-tag>
                 </template>
             </el-table-column>
@@ -112,11 +112,11 @@ export default {
                 const params = {
                     pageNo: currentPage.value,
                     pageSize: pageSize.value,
-                    status: getStatusFilter()
+                    type: getTypeFilter()
                 };
                 const res = await moneyApi.getMyMoneyLogPage(params);
                 if (res.result) {
-                    moneyLogs.value = res.result.list || [];
+                    moneyLogs.value = res.result.records || [];
                     total.value = res.result.total || 0;
                 }
             } catch (error) {
@@ -127,13 +127,13 @@ export default {
             }
         };
 
-        // 根据选择的类型获取状态过滤值
-        const getStatusFilter = () => {
+        // 根据选择的类型获取类型过滤值
+        const getTypeFilter = () => {
             switch (logType.value) {
                 case 'income':
-                    return 1; // 收入
+                    return 0; // 收入
                 case 'expense':
-                    return 2; // 支出
+                    return 1; // 支出
                 default:
                     return null; // 全部
             }
@@ -144,9 +144,36 @@ export default {
             return formatDateUtil(dateString, 'YYYY-MM-DD HH:mm:ss');
         };
 
+        // 获取金额样式类
+        const getAmountClass = (type) => {
+            return type === 0 ? 'income-amount' : 'expense-amount';
+        };
+
+        // 获取金额前缀
+        const getAmountPrefix = (type) => {
+            return type === 0 ? '+' : '-';
+        };
+
+        // 获取类型文本
+        const getTypeText = (type) => {
+            switch (type) {
+                case 0:
+                    return '收入';
+                case 1:
+                    return '支出';
+                default:
+                    return '未知';
+            }
+        };
+
+        // 获取类型标签样式
+        const getTypeTagStyle = (type) => {
+            return type === 0 ? 'success' : 'danger';
+        };
+
         // 获取状态类型
-        const getStatusType = (status) => {
-            switch (status) {
+        const getStatusType = (state) => {
+            switch (state) {
                 case 0:
                     return 'info'; // 处理中
                 case 1:
@@ -159,8 +186,8 @@ export default {
         };
 
         // 获取状态文本
-        const getStatusText = (status) => {
-            switch (status) {
+        const getStatusText = (state) => {
+            switch (state) {
                 case 0:
                     return '处理中';
                 case 1:
@@ -216,6 +243,10 @@ export default {
             pageSize,
             total,
             formatDate,
+            getAmountClass,
+            getAmountPrefix,
+            getTypeText,
+            getTypeTagStyle,
             getStatusType,
             getStatusText,
             handleTypeChange,

src/views/user/PersonalInfoExample.vue

@@ -0,0 +1,373 @@
+<template>
+    <div class="personal-info-example">
+        <div class="container">
+            <h1 class="page-title">个人信息弹窗示例</h1>
+            
+            <div class="example-content">
+                <el-card class="demo-card">
+                    <template #header>
+                        <h3>个人信息弹窗组件</h3>
+                    </template>
+                    
+                    <div class="demo-description">
+                        <p>这是一个个人信息编辑弹窗组件，包含以下功能：</p>
+                        <ul>
+                            <li>✅ 头像上传和预览</li>
+                            <li>✅ 昵称编辑（必填，失焦自动保存）</li>
+                            <li>✅ 个性签名编辑（失焦自动保存）</li>
+                            <li>✅ 手机号显示和修改</li>
+                            <li>✅ 豆豆数量显示和查看详情</li>
+                            <li>✅ 快捷充值功能</li>
+                        </ul>
+                    </div>
+                    
+                    <div class="demo-actions">
+                        <el-button 
+                            type="primary" 
+                            @click="openPersonalInfoModal"
+                            :disabled="!isLoggedIn"
+                        >
+                            {{ isLoggedIn ? '打开个人信息弹窗' : '请先登录' }}
+                        </el-button>
+                        
+                        <el-button 
+                            v-if="!isLoggedIn"
+                            @click="openLogin"
+                        >
+                            登录
+                        </el-button>
+                    </div>
+                </el-card>
+
+                <!-- 当前用户信息预览 -->
+                <el-card v-if="isLoggedIn" class="user-preview-card">
+                    <template #header>
+                        <h3>当前用户信息</h3>
+                    </template>
+                    
+                    <div class="user-preview">
+                        <div class="user-avatar">
+                            <el-avatar :size="60" :src="userInfo.headImage">
+                                <el-icon><UserFilled /></el-icon>
+                            </el-avatar>
+                        </div>
+                        <div class="user-details">
+                            <div class="user-item">
+                                <span class="label">昵称：</span>
+                                <span class="value">{{ userInfo.nickName || '未设置' }}</span>
+                            </div>
+                            <div class="user-item">
+                                <span class="label">个性签名：</span>
+                                <span class="value">{{ userInfo.personalSignature || '暂无个性签名' }}</span>
+                            </div>
+                            <div class="user-item">
+                                <span class="label">手机号：</span>
+                                <span class="value">{{ maskPhoneNumber(userInfo.phone) }}</span>
+                            </div>
+                            <div class="user-item">
+                                <span class="label">豆豆：</span>
+                                <span class="value bean-value">{{ userInfo.integerPrice || 0 }}</span>
+                            </div>
+                        </div>
+                    </div>
+                </el-card>
+
+                <!-- 组件使用说明 -->
+                <el-card class="usage-card">
+                    <template #header>
+                        <h3>使用说明</h3>
+                    </template>
+                    
+                    <div class="usage-content">
+                        <h4>在导航栏中使用：</h4>
+                        <p>个人信息弹窗已集成到顶部导航栏中，点击用户头像区域即可打开。</p>
+                        
+                        <h4>组件特性：</h4>
+                        <ul>
+                            <li><strong>头像上传：</strong>点击头像可上传新头像，支持jpg、png格式，最大2MB</li>
+                            <li><strong>自动保存：</strong>昵称和个性签名在输入框失焦时自动保存</li>
+                            <li><strong>手机号修改：</strong>支持通过验证码修改绑定手机号</li>
+                            <li><strong>数据联动：</strong>修改后的信息会同步更新到导航栏显示</li>
+                            <li><strong>响应式设计：</strong>适配PC端和移动端显示</li>
+                        </ul>
+
+                        <h4>代码示例：</h4>
+                        <pre><code>&lt;PersonalInfoModal
+    v-model="showPersonalInfoModal"
+    @success="handlePersonalInfoUpdate"
+/&gt;</code></pre>
+                    </div>
+                </el-card>
+            </div>
+        </div>
+
+        <!-- 个人信息弹窗 -->
+        <PersonalInfoModal
+            v-model="showPersonalInfoModal"
+            @success="handlePersonalInfoUpdate"
+        />
+    </div>
+</template>
+
+<script>
+import { ref, computed, inject } from 'vue';
+import { UserFilled } from '@element-plus/icons-vue';
+import { useMainStore } from '@/store';
+import { AUTH_INJECTION_KEY } from '@/components/auth/AuthProvider.vue';
+import PersonalInfoModal from '@/components/common/PersonalInfoModal.vue';
+
+export default {
+    name: 'PersonalInfoExample',
+    components: {
+        UserFilled,
+        PersonalInfoModal
+    },
+    setup() {
+        const store = useMainStore();
+        const authContext = inject(AUTH_INJECTION_KEY);
+        const showPersonalInfoModal = ref(false);
+
+        // 计算属性
+        const isLoggedIn = computed(() => store.isAuthenticated);
+        const userInfo = computed(() => store.user || {});
+
+        // 手机号脱敏显示
+        const maskPhoneNumber = (phone) => {
+            if (!phone) return '未绑定';
+            if (phone.length === 11) {
+                return `${phone.slice(0, 3)} **** ${phone.slice(7)}`;
+            }
+            return phone;
+        };
+
+        // 打开登录弹窗
+        const openLogin = () => {
+            authContext.openLogin();
+        };
+
+        // 打开个人信息弹窗
+        const openPersonalInfoModal = () => {
+            showPersonalInfoModal.value = true;
+        };
+
+        // 处理个人信息更新成功
+        const handlePersonalInfoUpdate = () => {
+            // 刷新用户信息
+            store.fetchUserInfo();
+        };
+
+        return {
+            isLoggedIn,
+            userInfo,
+            showPersonalInfoModal,
+            maskPhoneNumber,
+            openLogin,
+            openPersonalInfoModal,
+            handlePersonalInfoUpdate
+        };
+    }
+};
+</script>
+
+<style lang="scss" scoped>
+.personal-info-example {
+    min-height: 100vh;
+    background: #f5f7fa;
+    padding: 20px 0;
+
+    .container {
+        max-width: 1000px;
+        margin: 0 auto;
+        padding: 0 20px;
+
+        .page-title {
+            font-size: 28px;
+            font-weight: 700;
+            color: #0A2463;
+            text-align: center;
+            margin-bottom: 30px;
+        }
+
+        .example-content {
+            display: flex;
+            flex-direction: column;
+            gap: 20px;
+
+            .demo-card,
+            .user-preview-card,
+            .usage-card {
+                .demo-description {
+                    margin-bottom: 20px;
+
+                    p {
+                        color: #606266;
+                        line-height: 1.6;
+                        margin-bottom: 12px;
+                    }
+
+                    ul {
+                        color: #606266;
+                        padding-left: 20px;
+
+                        li {
+                            line-height: 1.8;
+                        }
+                    }
+                }
+
+                .demo-actions {
+                    display: flex;
+                    gap: 12px;
+
+                    .el-button--primary {
+                        background-color: #0A2463;
+                        border-color: #0A2463;
+
+                        &:hover {
+                            background-color: #083354;
+                            border-color: #083354;
+                        }
+                    }
+                }
+
+                .user-preview {
+                    display: flex;
+                    align-items: flex-start;
+                    gap: 20px;
+
+                    .user-avatar {
+                        flex-shrink: 0;
+                    }
+
+                    .user-details {
+                        flex: 1;
+
+                        .user-item {
+                            display: flex;
+                            align-items: center;
+                            margin-bottom: 12px;
+
+                            .label {
+                                font-weight: 500;
+                                color: #303133;
+                                min-width: 80px;
+                            }
+
+                            .value {
+                                color: #606266;
+
+                                &.bean-value {
+                                    color: #EB8D00;
+                                    font-weight: 600;
+                                }
+                            }
+                        }
+                    }
+                }
+
+                .usage-content {
+                    h4 {
+                        color: #0A2463;
+                        margin: 16px 0 8px 0;
+                        font-size: 16px;
+                    }
+
+                    p {
+                        color: #606266;
+                        line-height: 1.6;
+                        margin-bottom: 12px;
+                    }
+
+                    ul {
+                        color: #606266;
+                        padding-left: 20px;
+                        margin-bottom: 16px;
+
+                        li {
+                            line-height: 1.8;
+                            margin-bottom: 8px;
+
+                            strong {
+                                color: #0A2463;
+                            }
+                        }
+                    }
+
+                    pre {
+                        background: #f8f8f8;
+                        border: 1px solid #e0e0e0;
+                        border-radius: 6px;
+                        padding: 16px;
+                        overflow-x: auto;
+
+                        code {
+                            color: #0A2463;
+                            font-family: 'Courier New', monospace;
+                            font-size: 14px;
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .personal-info-example {
+        padding: 10px 0;
+
+        .container {
+            padding: 0 10px;
+
+            .page-title {
+                font-size: 24px;
+                margin-bottom: 20px;
+            }
+
+            .example-content {
+                gap: 16px;
+
+                .demo-card,
+                .user-preview-card,
+                .usage-card {
+                    .demo-actions {
+                        flex-direction: column;
+
+                        .el-button {
+                            width: 100%;
+                        }
+                    }
+
+                    .user-preview {
+                        flex-direction: column;
+                        text-align: center;
+
+                        .user-details {
+                            .user-item {
+                                flex-direction: column;
+                                align-items: flex-start;
+                                gap: 4px;
+
+                                .label {
+                                    min-width: auto;
+                                }
+                            }
+                        }
+                    }
+
+                    .usage-content {
+                        pre {
+                            padding: 12px;
+
+                            code {
+                                font-size: 12px;
+                            }
+                        }
+                    }
+                }
+            }
+        }
+    }
+}
+</style> 

src/views/user/Recharge.vue

@@ -1,67 +1,84 @@
 <template>
     <div class="recharge-page">
-        <!-- 当前余额卡片 -->
-        <div class="card balance-card">
-            <div class="card-title">当前余额</div>
-            <div class="current-balance">
-                <text class="balance-amount">{{ store.user.integral || 0 }}</text>
-                <text class="balance-unit">豆豆</text>
+        <div class="recharge-container">
+            <!-- 页面标题 -->
+            <div class="page-header">
+                <h1 class="page-title">账户充值</h1>
+                <p class="page-subtitle">选择充值套餐，获得更多豆豆</p>
             </div>
-        </div>
 
-        <!-- 充值套餐选择 -->
-        <div class="card package-card">
-            <div class="card-title">选择充值套餐</div>
-            <div class="package-grid">
-                <div 
-                    v-for="(item, index) in rechargePackages" 
-                    :key="index"
-                    :class="['package-item', { selected: selectedPackage === index }]"
-                    @click="selectPackage(index)"
-                >
-                    <div class="package-beans">{{ item.num }}豆豆</div>
-                    <div class="package-price">¥{{ item.money }}</div>
-                    <div v-if="item.giveNum" class="package-bonus">送{{ item.giveNum }}豆豆</div>
+            <!-- 当前余额卡片 -->
+            <div class="card balance-card">
+                <div class="card-title">当前余额</div>
+                <div class="current-balance">
+                    <text class="balance-amount">{{ store.user.integral || 0 }}</text>
+                    <text class="balance-unit">豆豆</text>
                 </div>
             </div>
-        </div>
 
-        <!-- 订单信息卡片 -->
-        <div class="card order-card" v-if="totalPrice > 0">
-            <div class="order-title">订单信息</div>
-            <div class="order-item">
-                <text class="order-label">充值金额：</text>
-                <text class="order-value">¥{{ totalPrice.toFixed(2) }}</text>
-            </div>
-            <div class="order-item">
-                <text class="order-label">获得豆豆：</text>
-                <text class="order-value">{{ totalBeans }}豆豆</text>
+            <!-- 充值套餐选择 -->
+            <div class="card package-card">
+                <div class="card-title">选择充值套餐</div>
+                <div class="package-grid">
+                    <div 
+                        v-for="(item, index) in rechargePackages" 
+                        :key="index"
+                        :class="['package-item', { selected: selectedPackage === index }]"
+                        @click="selectPackage(index)"
+                    >
+                        <div class="package-beans">{{ item.num }}豆豆</div>
+                        <div class="package-price">¥{{ item.money }}</div>
+                        <div v-if="item.giveNum" class="package-bonus">送{{ item.giveNum }}豆豆</div>
+                    </div>
+                </div>
             </div>
-            <div class="order-divider"></div>
-            <div class="order-item total-row">
-                <div class="order-total-label">合计：</div>
-                <div class="order-total">
-                    <text class="order-total-highlight">¥{{ totalPrice.toFixed(2) }}</text>
+
+            <!-- 订单信息卡片 -->
+            <div class="card order-card" v-if="totalPrice > 0">
+                <div class="order-title">订单信息</div>
+                <div class="order-item">
+                    <text class="order-label">充值金额：</text>
+                    <text class="order-value">¥{{ totalPrice.toFixed(2) }}</text>
+                </div>
+                <div class="order-item">
+                    <text class="order-label">获得豆豆：</text>
+                    <text class="order-value">{{ totalBeans }}豆豆</text>
+                </div>
+                <div class="order-divider"></div>
+                <div class="order-item total-row">
+                    <div class="order-total-label">合计：</div>
+                    <div class="order-total">
+                        <text class="order-total-highlight">¥{{ totalPrice.toFixed(2) }}</text>
+                    </div>
                 </div>
             </div>
-        </div>
 
-        <!-- 提示信息 -->
-        <div class="tip-text">
-            请仔细核查并确认相关信息。因用户个人疏忽导致的充值错误，需由用户自行承担。一旦完成充值，概不退换。
-        </div>
+            <!-- 提示信息 -->
+            <div class="tip-text">
+                请仔细核查并确认相关信息。因用户个人疏忽导致的充值错误，需由用户自行承担。一旦完成充值，概不退换。
+            </div>
 
-        <!-- 底部充值按钮 -->
-        <div class="footer-bar">
-            <el-button 
-                class="recharge-btn" 
-                type="primary" 
-                :disabled="totalPrice <= 0"
-                @click="handleRecharge"
-            >
-                立即充值 ¥{{ totalPrice.toFixed(2) }}
-            </el-button>
+            <!-- 底部充值按钮 -->
+            <div class="footer-bar">
+                <el-button 
+                    class="recharge-btn" 
+                    type="primary" 
+                    :disabled="totalPrice <= 0"
+                    @click="handleRecharge"
+                >
+                    立即充值 ¥{{ totalPrice.toFixed(2) }}
+                </el-button>
+            </div>
         </div>
+
+        <!-- 微信支付弹窗 -->
+        <WechatPayment 
+            v-model="showPaymentModal"
+            :payment-data="paymentData"
+            @success="handlePaymentSuccess"
+            @cancel="handlePaymentCancel"
+            @failed="handlePaymentFailed"
+        />
     </div>
 </template>
 
@@ -71,12 +88,23 @@ import { useRouter } from 'vue-router';
 import { ElMessage } from 'element-plus';
 import { useMainStore } from '@/store';
 import { orderApi } from '@/api/user';
+import WechatPayment from '@/components/common/WechatPayment.vue';
 
 const router = useRouter();
 const store = useMainStore();
 const selectedPackage = ref(null);
 const rechargePackages = ref([]);
 
+// 支付相关状态
+const showPaymentModal = ref(false);
+const currentOrderId = ref('');
+const paymentData = computed(() => ({
+    orderId: currentOrderId.value,
+    title: `充值${totalBeans.value}豆豆`,
+    amount: Math.round(totalPrice.value * 100), // 转换为分
+    body: `充值套餐 - ${totalBeans.value}豆豆`
+}));
+
 // 计算总价
 const totalPrice = computed(() => {
     if (selectedPackage.value !== null) {
@@ -121,32 +149,64 @@ const handleRecharge = async () => {
 
     try {
         // 创建订单
-        const result = await orderApi.createPayPackageOrder(
-            rechargePackages.value[selectedPackage.value].id
-        );
-
-        // 调用支付
-        await orderApi.payOrder({
-            orderId: result.result,
-            token: store.token
+        const result = await orderApi.createPayPackageOrder({
+            packageId : rechargePackages.value[selectedPackage.value].id,
+            payType : 'web'
         });
 
-        // 支付成功
-        await orderApi.paySuccess(result.result);
+        // 保存订单ID并显示支付弹窗
+        currentOrderId.value = result.result;
+        showPaymentModal.value = true;
+        
+    } catch (error) {
+        console.error('创建订单失败:', error);
+        ElMessage.error('创建订单失败，请重试');
+    }
+};
 
+// 支付成功回调
+const handlePaymentSuccess = async (outTradeNo) => {
+    try {
+        // 调用支付成功接口
+        await orderApi.paySuccess(currentOrderId.value);
+        
         ElMessage.success(`充值成功，获得${totalBeans.value}豆豆`);
         
         // 更新用户信息
         await store.getUserInfo();
         
-        // 返回上一页
-        router.back();
+        // 关闭支付弹窗
+        showPaymentModal.value = false;
+        
+        // 重置状态
+        selectedPackage.value = null;
+        currentOrderId.value = '';
+        
+        // 延迟跳转，让用户看到成功消息
+        setTimeout(() => {
+            router.back();
+        }, 2000);
+        
     } catch (error) {
-        console.error('充值失败:', error);
-        ElMessage.error('充值失败，请重试');
+        console.error('支付确认失败:', error);
+        ElMessage.error('支付确认失败，请联系客服');
     }
 };
 
+// 支付取消回调
+const handlePaymentCancel = () => {
+    showPaymentModal.value = false;
+    currentOrderId.value = '';
+    ElMessage.info('已取消支付');
+};
+
+// 支付失败回调
+const handlePaymentFailed = (errorMessage) => {
+    showPaymentModal.value = false;
+    currentOrderId.value = '';
+    ElMessage.error(errorMessage || '支付失败，请重试');
+};
+
 onMounted(() => {
     getPayPackageList();
 });
@@ -155,34 +215,60 @@ onMounted(() => {
 <style lang="scss" scoped>
 .recharge-page {
     min-height: 100vh;
-    background: #f8f8f8;
-    padding-bottom: 120px;
+    background: #f5f7fa;
+    padding: 20px 0;
+}
+
+.recharge-container {
+    max-width: 800px;
+    margin: 0 auto;
+    padding: 0 20px;
+}
+
+.page-header {
+    text-align: center;
+    margin-bottom: 30px;
+
+    .page-title {
+        font-size: 28px;
+        font-weight: 600;
+        color: #0A2463;
+        margin: 0 0 8px 0;
+    }
+
+    .page-subtitle {
+        font-size: 14px;
+        color: #666;
+        margin: 0;
+    }
 }
 
 .card {
     background: #fff;
-    border-radius: 20px;
-    margin: 24px 16px 0 16px;
+    border-radius: 12px;
+    margin-bottom: 20px;
     padding: 24px;
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    border: 1px solid #ebeef5;
 }
 
 .card-title {
-    font-size: 32px;
-    font-weight: bold;
-    color: #222;
-    margin-bottom: 24px;
+    font-size: 18px;
+    font-weight: 600;
+    color: #303133;
+    margin-bottom: 20px;
 }
 
 // 当前余额卡片
 .balance-card {
-    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    background: linear-gradient(135deg, #0A2463 0%, #1e3a8a 100%);
     color: #fff;
     text-align: center;
 
     .card-title {
         color: #fff;
         opacity: 0.9;
+        font-size: 16px;
     }
 
     .current-balance {
@@ -190,15 +276,15 @@ onMounted(() => {
         align-items: baseline;
         justify-content: center;
         gap: 8px;
-        margin-top: 16px;
+        margin-top: 10px;
 
         .balance-amount {
-            font-size: 56px;
+            font-size: 36px;
             font-weight: bold;
         }
 
         .balance-unit {
-            font-size: 28px;
+            font-size: 16px;
             opacity: 0.8;
         }
     }
@@ -206,89 +292,115 @@ onMounted(() => {
 
 // 充值套餐
 .package-grid {
-    display: flex;
-    flex-wrap: wrap;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
     gap: 16px;
 }
 
 .package-item {
-    width: calc(50% - 8px);
-    background: #f8f9ff;
-    border: 2px solid #f0f0f0;
-    border-radius: 16px;
-    padding: 24px 16px;
+    background: #fafbfc;
+    border: 2px solid #e4e7ed;
+    border-radius: 8px;
+    padding: 20px 16px;
     text-align: center;
     transition: all 0.2s;
-    position: relative;
-    box-sizing: border-box;
     cursor: pointer;
+    position: relative;
 
     &:hover {
-        border-color: #223a7a;
-        background: rgba(34, 58, 122, 0.05);
+        border-color: #0A2463;
+        background: rgba(10, 36, 99, 0.05);
+        transform: translateY(-2px);
+        box-shadow: 0 4px 12px rgba(10, 36, 99, 0.15);
     }
 
     &.selected {
-        border-color: #223a7a;
-        background: rgba(34, 58, 122, 0.05);
+        border-color: #0A2463;
+        background: rgba(10, 36, 99, 0.05);
+        box-shadow: 0 4px 12px rgba(10, 36, 99, 0.15);
+        
+        &::before {
+            content: '✓';
+            position: absolute;
+            top: -8px;
+            right: -8px;
+            width: 20px;
+            height: 20px;
+            background: #0A2463;
+            color: white;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            font-size: 12px;
+            font-weight: bold;
+        }
     }
 
     .package-beans {
-        font-size: 32px;
-        font-weight: bold;
-        color: #222;
+        font-size: 20px;
+        font-weight: 600;
+        color: #303133;
         margin-bottom: 8px;
     }
 
     .package-price {
-        font-size: 28px;
-        color: #223a7a;
+        font-size: 16px;
+        color: #0A2463;
         font-weight: 500;
-        margin-bottom: 4px;
+        margin-bottom: 6px;
     }
 
     .package-bonus {
-        font-size: 20px;
-        color: #e94f7a;
-        background: rgba(233, 79, 122, 0.1);
+        font-size: 12px;
+        color: #e6a23c;
+        background: rgba(230, 162, 60, 0.1);
         padding: 2px 8px;
-        border-radius: 8px;
+        border-radius: 4px;
         display: inline-block;
     }
 }
 
 // 订单信息
 .order-card {
+    .order-title {
+        font-size: 18px;
+        font-weight: 600;
+        color: #303133;
+        margin-bottom: 20px;
+    }
+
     .order-item {
         display: flex;
         justify-content: space-between;
         align-items: center;
-        margin-bottom: 16px;
+        margin-bottom: 12px;
 
         .order-label {
-            font-size: 28px;
-            color: #666;
+            font-size: 14px;
+            color: #606266;
         }
 
         .order-value {
-            font-size: 28px;
-            color: #222;
+            font-size: 14px;
+            color: #303133;
             font-weight: 500;
         }
 
         &.total-row {
             margin-bottom: 0;
-            margin-top: 16px;
+            margin-top: 12px;
+            padding-top: 12px;
 
             .order-total-label {
-                font-size: 32px;
-                color: #222;
+                font-size: 16px;
+                color: #303133;
                 font-weight: 600;
             }
 
             .order-total-highlight {
-                font-size: 32px;
-                color: #223a7a;
+                font-size: 18px;
+                color: #0A2463;
                 font-weight: bold;
             }
         }
@@ -296,39 +408,94 @@ onMounted(() => {
 
     .order-divider {
         height: 1px;
-        background: #f2f2f2;
-        margin: 16px 0;
+        background: #ebeef5;
+        margin: 12px 0;
     }
 }
 
 .tip-text {
-    color: #bbb;
-    font-size: 22px;
-    margin: 32px 32px 0 32px;
+    color: #909399;
+    font-size: 12px;
+    margin: 0 20px 20px 20px;
     line-height: 1.6;
+    text-align: center;
+    background: #fdf6ec;
+    padding: 12px;
+    border-radius: 6px;
+    border-left: 4px solid #e6a23c;
 }
 
 .footer-bar {
     background: #fff;
-    padding: 24px 32px 32px 32px;
-    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.05);
-    z-index: 10;
+    padding: 20px;
+    border-radius: 12px;
+    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
+    border: 1px solid #ebeef5;
 }
 
 .recharge-btn {
     width: 100%;
-    background: #223a7a;
+    background: #0A2463;
     color: #fff;
-    font-size: 32px;
-    border-radius: 32px;
-    height: 88px;
-    line-height: 88px;
+    font-size: 16px;
+    border-radius: 6px;
+    height: 44px;
     border: none;
     font-weight: 500;
+    transition: all 0.2s;
+
+    &:hover:not(:disabled) {
+        background: #1e3a8a;
+        transform: translateY(-1px);
+        box-shadow: 0 4px 12px rgba(10, 36, 99, 0.3);
+    }
+
+    &:active:not(:disabled) {
+        transform: translateY(0);
+    }
 
     &:disabled {
-        background: #ccc;
-        color: #999;
+        background: #c0c4cc;
+        color: #fff;
+        cursor: not-allowed;
+    }
+}
+
+// 响应式设计
+@media (max-width: 768px) {
+    .recharge-container {
+        max-width: 100%;
+        padding: 0 16px;
+    }
+
+    .package-grid {
+        grid-template-columns: repeat(2, 1fr);
+    }
+
+    .package-item {
+        padding: 16px 12px;
+
+        .package-beans {
+            font-size: 18px;
+        }
+
+        .package-price {
+            font-size: 14px;
+        }
+    }
+}
+
+@media (max-width: 480px) {
+    .page-header .page-title {
+        font-size: 24px;
+    }
+
+    .card {
+        padding: 20px 16px;
+    }
+
+    .package-grid {
+        gap: 12px;
     }
 }
 </style> 

src/views/user/a

@@ -1,276 +0,0 @@
-<template>
-	<view class="my-comment-page">
-		<navbar title="我的评论" :leftClick="true" @leftClick="$utils.navigateBack" />
-		
-		<uv-tabs :list="tabs"
-		:activeStyle="{ color: '#0A2463', fontWeight: 600 }" 
-		lineColor="#0A2463" lineHeight="8rpx"
-		lineWidth="50rpx" 
-		:scrollable="false"
-		:current="current"
-		@click="clickTabs"></uv-tabs>
-		
-		<template v-if="current == 0">
-			<view class="comment-section">
-				<myCommentItem :item="item" 
-				edit
-				@getData="getData"
-				v-for="(item, idx) in list" :key="idx"/>
-			</view>
-		</template>
-		
-		<template v-if="current == 1">
-			<view class="comment-section">
-				<view class="section-title">未读评论·{{ unreadComments.length }}</view>
-				<myCommentItem :item="item" v-for="(item, idx) in unreadComments" :key="idx"/>
-				<uv-empty mode="list" v-if="unreadComments.length == 0"></uv-empty>
-			</view>
-			<view class="comment-section history-section">
-				<view class="section-title">历史评论</view>
-				<myCommentItem 
-				:item="item" 
-				v-for="(item, idx) in list" :key="idx"/>
-			</view>
-		</template>
-		
-		<uv-empty mode="list" v-if="list.length == 0"></uv-empty>
-	</view>
-</template>
-
-<script>
-    import mixinsList from '@/mixins/list.js'
-	import myCommentItem from '../components/comment/myCommentItem.vue'
-	export default {
-        mixins: [mixinsList],
-		components: {
-			myCommentItem,
-		},
-		data() {
-			return {
-                mixinsListApi : 'getMyCommentList',
-				unreadComments: [],
-				tabs: [
-					{
-						name: '我的评论'
-					},
-					{
-						name: '回复我的'
-					},
-				],
-				current : 0,
-				apiList : [
-					'getMyCommentList',
-					'getMyReplyCommentList'
-				],
-			}
-		},
-		onLoad() {
-			this.queryParams.type = 'Y'
-			this.mixinsListApi = this.apiList[this.current]
-		},
-		onShow() {
-			this.getList()
-		},
-		methods: {
-			//点击tab栏
-			clickTabs({ index }) {
-				this.queryParams.pageSize = 10
-				this.current = index
-				
-				this.mixinsListApi = this.apiList[this.current]
-				
-				this.getData()
-			},
-			//获取未读
-			getList(){
-				this.$fetch('getMyReplyCommentList', {
-					type : 'N',
-					pageNo: 1,
-					pageSize: 100000
-				}).then(res => {
-					this.unreadComments = res.records
-					
-					this.unreadComments.forEach(n => {
-						this.updateCommentRead(n.id)
-					})
-				})
-			},
-			updateCommentRead(commentId){
-				this.$fetch('updateCommentRead', {
-					commentId
-				})
-			},
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.my-comment-page {
-		min-height: 100vh;
-		background: #f8f8f8;
-		display: flex;
-		flex-direction: column;
-	}
-
-	.comment-section {
-		background: #fff;
-		margin: 24rpx 24rpx 0 24rpx;
-		border-radius: 16rpx;
-		padding: 24rpx 24rpx 0 24rpx;
-		margin-bottom: 24rpx;
-	}
-
-	.section-title {
-		color: #222;
-		font-size: 28rpx;
-		font-weight: 500;
-		margin-bottom: 16rpx;
-	}
-</style>
-
-<template>
-	<view class="comment-card">
-		<uv-avatar :src="item.hanHaiMember.headImage" size="44" shape="circle" class="avatar" />
-		<view class="comment-main">
-			<view class="comment-header">
-				<text class="username">{{ item.hanHaiMember.nickName }}</text>
-				<text class="from">来自《{{ item.commonShop.name }}》</text>
-			</view>
-			<view class="comment-content">{{ item.comment }}</view>
-			<view class="comment-footer">
-				<text class="comment-time">{{ item.createTime }}</text>
-				
-				
-				<view class="reply-btn-wrap" 
-				v-if="edit"
-				@click="deleteItem(item)">
-					<text class="reply-btn">删除</text>
-				</view>
-				
-				<view class="reply-btn-wrap" 
-				v-else
-				@click="goToReply(item)">
-					<text class="reply-btn">回复</text>
-				</view>
-				
-				
-			</view>
-		</view>
-	</view>
-</template>
-
-<script>
-	export default {
-		props: ['item', 'edit'],
-		data() {
-			return {
-
-			}
-		},
-		methods: {
-			goToReply(item) {
-				
-				// this.$fetch('updateCommentRead', {
-				// 	commentId : item.id,
-				// })
-				
-				uni.navigateTo({
-					url: '/pages_order/comment/respondComments?id=' + item.id
-				})
-			},
-			deleteItem(item){
-				
-				uni.showModal({
-					title : '确认删除该评论吗',
-					success : (r)  => {
-						if (r.confirm) {
-							this.$fetch('deleteComment', {
-								commentId : item.id,
-							}).then(res => {
-								this.$emit('getData')
-							})
-						}
-					}
-				})
-				
-			},
-		}
-	}
-</script>
-
-<style scoped lang="scss">
-	.comment-card {
-		display: flex;
-		align-items: flex-start;
-		margin-bottom: 32rpx;
-
-		.avatar {
-			width: 56rpx;
-			height: 56rpx;
-			border-radius: 50%;
-			margin-right: 16rpx;
-			flex-shrink: 0;
-		}
-
-		.comment-main {
-			flex: 1;
-			display: flex;
-			flex-direction: column;
-			margin-left: 10rpx;
-		}
-
-		.comment-header {
-			display: flex;
-			align-items: center;
-			gap: 12rpx;
-			margin-bottom: 4rpx;
-		}
-
-		.username {
-			font-size: 26rpx;
-			color: #222;
-			font-weight: 500;
-		}
-
-		.from {
-			font-size: 22rpx;
-			color: #bdbdbd;
-		}
-
-		.comment-content {
-			font-size: 26rpx;
-			color: #333;
-			margin-bottom: 12rpx;
-		}
-
-		.comment-footer {
-			display: flex;
-			align-items: center;
-			font-size: 22rpx;
-			color: #bdbdbd;
-			justify-content: space-between;
-			padding-right: 8rpx;
-		}
-
-		.comment-time {
-			color: #bdbdbd;
-		}
-
-		.reply-btn-wrap {
-			display: flex;
-			align-items: center;
-			cursor: pointer;
-		}
-
-		.reply-btn {
-			color: #223a6b;
-			font-weight: 500;
-			margin-left: 0;
-			font-size: 24rpx;
-		}
-
-		.history-section {
-			margin-top: 24rpx;
-		}
-	}
-</style>