refactor(auth): 移除小程序登录接口并优化手机验证码发送

refactor(user): 重构充值流程，将订单创建移至支付组件

feat(login): 实现真实手机验证码发送接口并优化登录流程

refactor(payment): 重构微信支付组件，支持真实支付状态查询

style(api): 格式化用户相关API代码，移除无用接口

src/api/auth.js

@@ -4,24 +4,6 @@ import api from './index.js';
  * 授权登录相关接口
  */
 export const authApi = {
-  /**
-   * 微信小程序授权登录
-   * @param {Object} params 登录参数
-   * @param {string} params.code 参数信息
-   * @param {string} params.encryptedData 解密
-   * @param {string} params.headimgurl 用户头像
-   * @param {string} params.id 标识
-   * @param {string} params.iv 解密标签
-   * @param {string} params.nickName 用户姓名
-   * @param {string} params.openid 用户唯一标识
-   * @param {string} params.session_key 会话密钥
-   * @param {string} params.shareId 邀请者销售标识
-   * @param {string} params.state 类型
-   * @param {string} params.vid 参数信息
-   */
-  appletLogin(params) {
-    return api.get('/all_login/appletLogin', { params });
-  },
 
   /**
    * pc端手机号码验证码登录
@@ -34,13 +16,12 @@ export const authApi = {
   },
 
   /**
-   * 绑定手机号码
-   * @param {string} code 授权码
+   * 发送手机验证码
+   * @param {Object} params 参数
+   * @param {string} params.phone 手机号
    */
-  bindPhone(code) {
-    return api.get('/all_login/bindPhone', { 
-      params: { code } 
-    });
+  phoneSendCode(params) {
+    return api.get('/all_login/phoneSendCode', { params });
   },
 
   /**

src/api/user.js

@@ -4,356 +4,306 @@ import api from './index.js';
  * 我的-流水相关接口
  */
 export const moneyApi = {
-  /**
-   * 获取我的流水列表带分页
-   * @param {Object} params 查询参数
-   * @param {number} params.pageNo 当前页
-   * @param {number} params.pageSize 显示条数
-   * @param {number} params.status 状态
-   */
-  getMyMoneyLogPage(params) {
-    return api.get('/all_money/getMyMoneyLogPage', { params });
-  },
-
-  /**
-   * 获取我的可用积分数
-   */
-  getMyMoneyNum() {
-    return api.get('/all_money/getMyMoneyNum');
-  }
+    /**
+     * 获取我的流水列表带分页
+     * @param {Object} params 查询参数
+     * @param {number} params.pageNo 当前页
+     * @param {number} params.pageSize 显示条数
+     * @param {number} params.status 状态
+     */
+    getMyMoneyLogPage(params) {
+        return api.get('/all_money/getMyMoneyLogPage', { params });
+    },
+
+    /**
+     * 获取我的可用积分数
+     */
+    getMyMoneyNum() {
+        return api.get('/all_money/getMyMoneyNum');
+    }
 };
 
 /**
  * 我的-评论相关接口
  */
 export const commentApi = {
-  /**
-   * 删除评论信息
-   * @param {string} commentId 评论ID
-   */
-  deleteComment(commentId) {
-    return api.get('/my_comment/deleteComment', {
-      params: { commentId }
-    });
-  },
-
-  /**
-   * 获取评论详情
-   * @param {string} commentId 评论ID
-   */
-  getCommentDetail(commentId) {
-    return api.post('/my_comment/getCommentDetail', null, {
-      params: { commentId }
-    });
-  },
-
-  /**
-   * 根据书籍标识查询评论信息列表带分页
-   * @param {Object} params 查询参数
-   * @param {string} params.bookId 书籍ID
-   * @param {number} params.pageNo 当前页
-   * @param {number} params.pageSize 显示条数
-   */
-  getCommentList(params) {
-    return api.get('/my_comment/getCommentList', { params });
-  },
-
-  /**
-   * 获取我的评论列表
-   * @param {Object} params 分页参数
-   * @param {number} params.pageNo 当前页
-   * @param {number} params.pageSize 显示条数
-   * @param {string} params.type 类型
-   */
-  getMyCommentList(params) {
-    return api.get('/my_comment/getMyCommentList', { params });
-  },
-
-  /**
-   * 获取我的评论数
-   */
-  getMyCommentNum() {
-    return api.get('/my_comment/getMyCommentNum');
-  },
-
-  /**
-   * 获取回复我的评论列表
-   * @param {Object} params 分页参数
-   * @param {number} params.pageNo 当前页
-   * @param {number} params.pageSize 显示条数
-   * @param {string} params.type 类型 N-未读 Y-已读
-   */
-  getMyReplyCommentList(params) {
-    return api.get('/my_comment/getMyReplyCommentList', { params });
-  },
-
-  /**
-   * 回复评论信息
-   * @param {Object} params 回复参数
-   * @param {string} params.commentId 评论ID
-   * @param {string} params.content 回复内容
-   */
-  replyComment(params) {
-    return api.post('/my_comment/replyComment', null, { params });
-  },
-
-  /**
-   * 保存评论信息
-   * @param {Object} params 评论参数
-   * @param {string} params.bookId 书籍ID
-   * @param {string} params.content 评论内容
-   */
-  saveComment(params) {
-    return api.post('/my_comment/saveComment', null, { params });
-  },
-
-  /**
-   * 更新评论已读状态
-   * @param {string} commentId 评论ID
-   */
-  updateCommentRead() {
-    return api.post('/my_comment/updateCommentRead');
-  }
+    /**
+     * 删除评论信息
+     * @param {string} commentId 评论ID
+     */
+    deleteComment(commentId) {
+        return api.get('/my_comment/deleteComment', {
+            params: { commentId }
+        });
+    },
+
+    /**
+     * 获取评论详情
+     * @param {string} commentId 评论ID
+     */
+    getCommentDetail(commentId) {
+        return api.post('/my_comment/getCommentDetail', null, {
+            params: { commentId }
+        });
+    },
+
+    /**
+     * 根据书籍标识查询评论信息列表带分页
+     * @param {Object} params 查询参数
+     * @param {string} params.bookId 书籍ID
+     * @param {number} params.pageNo 当前页
+     * @param {number} params.pageSize 显示条数
+     */
+    getCommentList(params) {
+        return api.get('/my_comment/getCommentList', { params });
+    },
+
+    /**
+     * 获取我的评论列表
+     * @param {Object} params 分页参数
+     * @param {number} params.pageNo 当前页
+     * @param {number} params.pageSize 显示条数
+     * @param {string} params.type 类型
+     */
+    getMyCommentList(params) {
+        return api.get('/my_comment/getMyCommentList', { params });
+    },
+
+    /**
+     * 获取我的评论数
+     */
+    getMyCommentNum() {
+        return api.get('/my_comment/getMyCommentNum');
+    },
+
+    /**
+     * 获取回复我的评论列表
+     * @param {Object} params 分页参数
+     * @param {number} params.pageNo 当前页
+     * @param {number} params.pageSize 显示条数
+     * @param {string} params.type 类型 N-未读 Y-已读
+     */
+    getMyReplyCommentList(params) {
+        return api.get('/my_comment/getMyReplyCommentList', { params });
+    },
+
+    /**
+     * 回复评论信息
+     * @param {Object} params 回复参数
+     * @param {string} params.commentId 评论ID
+     * @param {string} params.content 回复内容
+     */
+    replyComment(params) {
+        return api.post('/my_comment/replyComment', null, { params });
+    },
+
+    /**
+     * 保存评论信息
+     * @param {Object} params 评论参数
+     * @param {string} params.bookId 书籍ID
+     * @param {string} params.content 评论内容
+     */
+    saveComment(params) {
+        return api.post('/my_comment/saveComment', null, { params });
+    },
+
+    /**
+     * 更新评论已读状态
+     * @param {string} commentId 评论ID
+     */
+    updateCommentRead() {
+        return api.post('/my_comment/updateCommentRead');
+    }
 };
 
 /**
  * 我的-任务中心相关接口
  */
 export const taskApi = {
-  /**
-   * 点击更多任务
-   * @param {string} taskId 任务ID
-   */
-  clickMoreTask(taskId) {
-    return api.post('/my_task/clickMoreTask', null, {
-      params: { taskId }
-    });
-  },
-
-  /**
-   * 点击签到任务
-   * @param {string} taskId 任务ID
-   */
-  clickSignTask(taskId) {
-    return api.get('/my_task/clickSignTask', {
-      params: { taskId }
-    });
-  },
-
-  /**
-   * 获取更多任务列表
-   * @param {string} token token
-   */
-  getMoreTaskList(token) {
-    return api.get('/my_task/getMoreTaskList', {
-      params: { token }
-    });
-  },
-
-  /**
-   * 获取更多任务记录列表
-   * @param {Object} params 分页参数
-   * @param {number} params.pageNo 当前页
-   * @param {number} params.pageSize 显示条数
-   */
-  getMoreTaskRecordPage(params) {
-    return api.get('/my_task/getMoreTaskRecordPage', { params });
-  },
-
-  /**
-   * 获取我的推荐票数
-   */
-  getMyRecommendTicketNum() {
-    return api.get('/my_task/getMyRecommendTicketNum');
-  },
-
-  /**
-   * 获取我的推荐任务列表
-   * @param {string} token token
-   */
-  getSignTaskList(token) {
-    return api.get('/my_task/getSignTaskList', {
-      params: { token }
-    });
-  },
-
-  /**
-   * 获取我的推荐任务记录列表
-   * @param {Object} params 分页参数
-   * @param {number} params.pageNo 当前页
-   * @param {number} params.pageSize 显示条数
-   */
-  getSignTaskRecordPage(params) {
-    return api.get('/my_task/getSignTaskRecordPage', { params });
-  },
-
-  /**
-   * 获取我当天是否已经签到
-   */
-  getSignTaskToday() {
-    return api.get('/my_task/getSignTaskToday');
-  }
+    /**
+     * 点击更多任务
+     * @param {string} taskId 任务ID
+     */
+    clickMoreTask(taskId) {
+        return api.post('/my_task/clickMoreTask', null, {
+            params: { taskId }
+        });
+    },
+
+    /**
+     * 点击签到任务
+     * @param {string} taskId 任务ID
+     */
+    clickSignTask(taskId) {
+        return api.get('/my_task/clickSignTask', {
+            params: { taskId }
+        });
+    },
+
+    /**
+     * 获取更多任务列表
+     * @param {string} token token
+     */
+    getMoreTaskList(token) {
+        return api.get('/my_task/getMoreTaskList', {
+            params: { token }
+        });
+    },
+
+    /**
+     * 获取更多任务记录列表
+     * @param {Object} params 分页参数
+     * @param {number} params.pageNo 当前页
+     * @param {number} params.pageSize 显示条数
+     */
+    getMoreTaskRecordPage(params) {
+        return api.get('/my_task/getMoreTaskRecordPage', { params });
+    },
+
+    /**
+     * 获取我的推荐票数
+     */
+    getMyRecommendTicketNum() {
+        return api.get('/my_task/getMyRecommendTicketNum');
+    },
+
+    /**
+     * 获取我的推荐任务列表
+     * @param {string} token token
+     */
+    getSignTaskList(token) {
+        return api.get('/my_task/getSignTaskList', {
+            params: { token }
+        });
+    },
+
+    /**
+     * 获取我的推荐任务记录列表
+     * @param {Object} params 分页参数
+     * @param {number} params.pageNo 当前页
+     * @param {number} params.pageSize 显示条数
+     */
+    getSignTaskRecordPage(params) {
+        return api.get('/my_task/getSignTaskRecordPage', { params });
+    },
+
+    /**
+     * 获取我当天是否已经签到
+     */
+    getSignTaskToday() {
+        return api.get('/my_task/getSignTaskToday');
+    }
 };
 
 /**
  * 我的-申请成为作家相关接口
  */
 export const writerApi = {
-  /**
-   * 查询我的笔名以及简介
-   */
-  getMyWriter() {
-    return api.get('/my_writer/getMyWriter');
-  },
-
-  /**
-   * 填写或修改笔名以及简介成为作家
-   * @param {Object} params 作家信息
-   * @param {string} params.details 简介
-   * @param {string} params.penName 笔名
-   */
-  saveOrUpdateWriter(params) {
-    return api.post('/my_writer/saveOrUpdateWriter', null, { params });
-  }
+    /**
+     * 查询我的笔名以及简介
+     */
+    getMyWriter() {
+        return api.get('/my_writer/getMyWriter');
+    },
+
+    /**
+     * 填写或修改笔名以及简介成为作家
+     * @param {Object} params 作家信息
+     * @param {string} params.details 简介
+     * @param {string} params.penName 笔名
+     */
+    saveOrUpdateWriter(params) {
+        return api.post('/my_writer/saveOrUpdateWriter', null, { params });
+    }
 };
 
 /**
  * 我的-礼物订阅接口
  */
 export const orderApi = {
-  /**
-   * 创建订单
-   * @param {Object} params 订单参数
-   * @param {string} params.giftId 礼物ID
-   * @param {number} params.num 数量
-   * @param {string} params.token token
-   */
-  createOrder(params) {
-    return api.post('/my_order/createOrder', null, { params });
-  },
-
-  /**
-   * 查询礼物详情
-   * @param {string} giftId 礼物ID
-   */
-  getGiftDetail(giftId) {
-    return api.get('/my_order/getGiftDetail', {
-      params: { giftId }
-    });
-  },
-
-  /**
-   * 查询互动打赏礼物信息列表
-   * @param {Object} params 分页参数
-   * @param {number} params.pageNo 当前页
-   * @param {number} params.pageSize 显示条数
-   */
-  getInteractionGiftList(params) {
-    return api.get('/my_order/getInteractionGiftList', { params });
-  },
-
-  /**
-   * 查询我的礼物包订单列表
-   * @param {Object} params 查询参数
-   * @param {number} params.pageNo 当前页
-   * @param {number} params.pageSize 显示条数
-   * @param {string} params.token token
-   */
-  getMyGiftList(params) {
-    return api.get('/my_order/getMyGiftList', { params });
-  },
-
-  /**
-   * 支付订单
-   * @param {Object} params 支付参数
-   * @param {string} params.orderId 订单ID
-   * @param {string} params.token token
-   */
-  payOrder(params) {
-    return api.post('/my_order/payOrder', null, { params });
-  },
 
-  /**
-   * 支付成功
-   * @param {string} orderId 订单ID
-   */
-  paySuccess(orderId) {
-    return api.post('/my_order/paySuccess', null, {
-      params: { orderId }
-    });
-  },
-
-  /**
-   * 购买章节
-   * @param {Object} params 购买参数
-   * @param {string} params.bookId 书籍ID
-   * @param {string} params.novelId 章节ID
-   */
-  buyNovel(params) {
-    return api.post('/my_order/buyNovel', null, { params });
-  },
-
-  /**
-   * 创建支付套餐订单
-   * @param {string} packageId 套餐ID
-   */
-  createPayPackageOrder(params) {
-    return api.post('/my_order/createPayPackageOrder', null, {
-      params
-    });
-  },
-
-  /**
-   * 充值套餐列表
-   */
-  getPayPackageList() {
-    return api.get('/my_order/getPayPackageList');
-  },
-
-  /**
-   * 根据书籍id，礼物id赠送礼物
-   * @param {Object} params 赠送参数
-   * @param {string} params.bookId 书籍ID
-   * @param {string} params.giftId 礼物ID
-   * @param {number} params.num 数量
-   */
-  giveGift(params) {
-    return api.post('/my_order/giveGift', null, { params });
-  }
+    /**
+     * 查询礼物详情
+     * @param {string} giftId 礼物ID
+     */
+    getGiftDetail(giftId) {
+        return api.get('/my_order/getGiftDetail', {
+            params: { giftId }
+        });
+    },
+
+    /**
+     * 查询互动打赏礼物信息列表
+     * @param {Object} params 分页参数
+     * @param {number} params.pageNo 当前页
+     * @param {number} params.pageSize 显示条数
+     */
+    getInteractionGiftList(params) {
+        return api.get('/my_order/getInteractionGiftList', { params });
+    },
+
+    /**
+     * 查询我的礼物包订单列表
+     * @param {Object} params 查询参数
+     * @param {number} params.pageNo 当前页
+     * @param {number} params.pageSize 显示条数
+     * @param {string} params.token token
+     */
+    getMyGiftList(params) {
+        return api.get('/my_order/getMyGiftList', { params });
+    },
+
+
+    /**
+     * 购买章节
+     * @param {Object} params 购买参数
+     * @param {string} params.bookId 书籍ID
+     * @param {string} params.novelId 章节ID
+     */
+    buyNovel(params) {
+        return api.post('/my_order/buyNovel', null, { params });
+    },
+
+    /**
+     * 创建支付套餐订单
+     * @param {string} packageId 套餐ID
+     */
+    createPayPackageOrder(params) {
+        return api.post('/my_order/createPayPackageOrder', null, {
+            params
+        });
+    },
+
+    /**
+     * 充值套餐列表
+     */
+    getPayPackageList() {
+        return api.get('/my_order/getPayPackageList');
+    },
+
+    /**
+     * 根据书籍id，礼物id赠送礼物
+     * @param {Object} params 赠送参数
+     * @param {string} params.bookId 书籍ID
+     * @param {string} params.giftId 礼物ID
+     * @param {number} params.num 数量
+     */
+    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 }
-    });
-  }
+    /**
+     * 查询微信支付订单状态
+     * @param {string} outTradeNo 商户订单号
+     */
+    queryWechatPayStatus(outTradeNo) {
+        return api.get('/my_order/queryOrder', {
+            params: { outTradeNo }
+        });
+    },
 }; 

src/components/auth/LoginRegisterModal.vue

@@ -6,9 +6,9 @@
             <div class="phone-input">
                 <el-select v-model="countryCode" class="country-code">
                     <el-option label="+86" value="+86" />
-                    <el-option label="+852" value="+852" />
+                    <!-- <el-option label="+852" value="+852" />
                     <el-option label="+853" value="+853" />
-                    <el-option label="+886" value="+886" />
+                    <el-option label="+886" value="+886" /> -->
                 </el-select>
                 <el-input v-model="phone" placeholder="手机号" />
             </div>
@@ -44,6 +44,7 @@
 import { ref, computed } from 'vue';
 import { ElMessage } from 'element-plus';
 import { useMainStore } from '@/store';
+import { authApi } from '@/api/auth';
 
 export default {
     name: 'LoginRegisterModal',
@@ -92,51 +93,83 @@ export default {
             return true;
         };
 
-        const sendVerificationCode = () => {
+        const sendVerificationCode = async () => {
             if (!phone.value) {
                 ElMessage.error('请输入手机号');
                 return;
             }
 
-            // 模拟发送验证码，实际项目中这里应该调用后端API
-            ElMessage.success(`验证码已发送至 ${countryCode.value}${phone.value}`);
+            // 简单的手机号格式验证
+            const phoneRegex = /^1[3-9]\d{9}$/;
+            if (!phoneRegex.test(phone.value)) {
+                ElMessage.error('请输入正确的手机号格式');
+                return;
+            }
 
-            // 开始倒计时
-            countdownActive.value = true;
-            countdown.value = 60;
+            try {
+                // 调用发送验证码接口
+                const response = await authApi.phoneSendCode({
+                    phone: phone.value
+                });
 
-            const timer = setInterval(() => {
-                countdown.value--;
-                if (countdown.value <= 0) {
-                    clearInterval(timer);
-                    countdownActive.value = false;
+                if (response.success) {
+                    ElMessage.success(`验证码已发送至 ${countryCode.value}${phone.value}`);
+                    
+                    // 开始倒计时
+                    countdownActive.value = true;
+                    countdown.value = 60;
+
+                    const timer = setInterval(() => {
+                        countdown.value--;
+                        if (countdown.value <= 0) {
+                            clearInterval(timer);
+                            countdownActive.value = false;
+                        }
+                    }, 1000);
+                } else {
+                    ElMessage.error(response.message || '发送验证码失败，请稍后重试');
                 }
-            }, 1000);
+            } catch (error) {
+                console.error('发送验证码失败:', error);
+                ElMessage.error('发送验证码失败，请稍后重试');
+            }
         };
 
         const handleSubmit = async () => {
             if (!validateForm()) return;
 
             try {
-                // 模拟API调用，实际项目中这里应该调用后端API
                 if (isLogin.value) {
-                    // 登录逻辑
-                    await store.login({
+                    // 登录逻辑 - 调用真实API
+                    const response = await authApi.phoneLogin({
                         phone: phone.value,
                         code: verificationCode.value
                     });
 
-                    emit('login-success');
-                    ElMessage.success('登录成功');
+                    if (response.success && response.result) {
+                        // 使用store的login方法处理登录成功后的逻辑
+                        await store.handleLoginSuccess(response.result);
+                        
+                        emit('login-success');
+                        ElMessage.success('登录成功');
+                    } else {
+                        throw new Error(response.message || '登录失败');
+                    }
                 } else {
-                    // 注册逻辑
-                    await store.register({
+                    // 注册逻辑 - 目前使用登录接口，如果后端有单独注册接口可以替换
+                    const response = await authApi.phoneLogin({
                         phone: phone.value,
                         code: verificationCode.value
                     });
 
-                    emit('register-success');
-                    ElMessage.success('注册成功');
+                    if (response.success && response.result) {
+                        await store.handleLoginSuccess(response.result);
+                        
+                        emit('register-success');
+                        ElMessage.success('注册成功');
+                    } else {
+                        throw new Error(response.message || '注册失败');
+                    }
                 }
 
                 // 关闭弹窗
@@ -145,6 +178,7 @@ export default {
                 // 重置表单
                 resetForm();
             } catch (error) {
+                console.error('登录/注册失败:', error);
                 ElMessage.error(error.message || '操作失败，请稍后重试');
             }
         };

src/components/common/WechatPayment.vue

@@ -7,7 +7,6 @@
             width="400px"
             :close-on-click-modal="false"
             :close-on-press-escape="false"
-            @close="handleCancel"
         >
             <div class="payment-content">
                 <!-- 支付信息 -->
@@ -24,6 +23,7 @@
                         <div class="qr-container">
                             <div class="qr-code" ref="qrCodeRef">
                                 <!-- 二维码将在这里生成 -->
+                                <div style="color: #999; font-size: 12px;">正在加载支付二维码...</div>
                             </div>
                             <div class="qr-tips">
                                 <el-icon class="scan-icon"><Iphone /></el-icon>
@@ -103,7 +103,7 @@
 <script>
 import { ref, computed, nextTick, onUnmounted, watch } from 'vue';
 import { ElMessage, ElMessageBox } from 'element-plus';
-import { orderApi } from '@/api/user';
+import { orderApi, wechatPayApi } from '@/api/user';
 import { 
     Iphone, 
     Loading, 
@@ -111,9 +111,9 @@ import {
     CircleClose, 
     Clock 
 } from '@element-plus/icons-vue';
-import { wechatPayApi } from '@/api/user.js';
 import QRCode from 'qrcode';
 
+
 export default {
     name: 'WechatPayment',
     components: {
@@ -133,10 +133,6 @@ export default {
         paymentData: {
             type: Object,
             default: () => ({
-                orderId: '',      // 订单ID
-                title: '商品支付', // 支付标题
-                amount: 0,        // 支付金额（分）
-                body: ''          // 商品描述
             })
         }
     },
@@ -156,6 +152,7 @@ export default {
         let pollingTimer = null;
         let countdownTimer = null;
         let outTradeNo = '';
+        let orderId = '';
 
         // 格式化金额
         const formatAmount = (amount) => {
@@ -172,22 +169,58 @@ export default {
         // 生成二维码
         const generateQrCode = async (codeUrl) => {
             try {
+                console.log('开始生成二维码');
+                
+                // 等待DOM更新
                 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'
-                        }
-                    });
+                
+                // 多次检查DOM元素是否存在
+                let retryCount = 0;
+                while (!qrCodeRef.value && retryCount < 20) {
+                    await new Promise(resolve => setTimeout(resolve, 100));
+                    retryCount++;
+                    await nextTick();
                 }
+                
+                if (!qrCodeRef.value) {
+                    throw new Error('二维码容器元素未找到');
+                }
+                
+                // 清空容器
+                qrCodeRef.value.innerHTML = '';
+                
+                // 生成二维码
+                const canvas = document.createElement('canvas');
+                await QRCode.toCanvas(canvas, codeUrl, {
+                    width: 200,
+                    height: 200,
+                    margin: 1,
+                    color: {
+                        dark: '#000000',
+                        light: '#FFFFFF'
+                    }
+                });
+                
+                // 将canvas添加到容器中
+                qrCodeRef.value.appendChild(canvas);
+                
+                console.log('二维码生成成功');
             } catch (error) {
                 console.error('生成二维码失败:', error);
-                ElMessage.error('生成二维码失败');
+                ElMessage.error(`生成二维码失败: ${error.message}`);
+                
+                // 如果二维码生成失败，显示错误信息
+                if (qrCodeRef.value) {
+                    qrCodeRef.value.innerHTML = `
+                        <div style="width: 200px; height: 200px; border: 2px dashed #ccc; display: flex; align-items: center; justify-content: center; color: #999; font-size: 14px; text-align: center;">
+                            二维码生成失败<br/>请点击刷新重试
+                        </div>
+                    `;
+                } else {
+                    // 如果容器都找不到，强制设置状态显示错误
+                    paymentStatus.value = 'failed';
+                    errorMessage.value = '二维码容器未找到，请刷新页面重试';
+                }
             }
         };
 
@@ -196,33 +229,36 @@ export default {
             try {
                 paymentStatus.value = 'loading';
                 
+                if (!props.paymentData.packageId) {
+                    throw new Error('缺少套餐ID');
+                }
+
                 const params = {
-                    orderId: props.paymentData.orderId,
-                    totalFee: props.paymentData.amount,
-                    body: props.paymentData.body || props.paymentData.title
+                    packageId: props.paymentData.packageId,
+                    payType: 'web'
                 };
 
-                // 模拟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()}`
-                    }
-                };
+                // 创建订单
+                const result = await orderApi.createPayPackageOrder(params);
 
-                if (mockResponse.code === 200 && mockResponse.result) {
-                    const { codeUrl, outTradeNo: tradeNo } = mockResponse.result;
-                    outTradeNo = tradeNo;
-                    
-                    await generateQrCode(codeUrl);
+                if (result.success && result.result) {
+                    const { codeURL, orderId: responseOrderId } = result.result;
+                    orderId = responseOrderId;
+                    outTradeNo = responseOrderId; // 使用orderId作为outTradeNo
                     
+                    // 先切换状态为pending，让DOM元素渲染出来
                     paymentStatus.value = 'pending';
+                    
+                    // 等待DOM更新完成后再生成二维码
+                    await nextTick();
+                    await new Promise(resolve => setTimeout(resolve, 100)); // 额外等待100ms确保DOM渲染完成
+                    
+                    await generateQrCode(codeURL);
+                    
                     startPolling();
                     startCountdown();
                 } else {
-                    throw new Error('创建支付订单失败');
+                    throw new Error(result.message || '创建支付订单失败');
                 }
             } catch (error) {
                 console.error('创建支付订单失败:', error);
@@ -254,19 +290,63 @@ export default {
         // 检查支付状态
         const checkPaymentStatus = async () => {
             try {
-                // 模拟随机支付成功（演示用）
-                if (Math.random() > 0.95) {
-                    handlePaymentSuccess();
+                if (!outTradeNo) {
                     return;
                 }
 
-                // 实际项目中调用真实API
-                // const response = await wechatPayApi.queryWechatPayStatus(outTradeNo);
+                // 调用微信支付状态查询接口
+                const response = await wechatPayApi.queryWechatPayStatus(outTradeNo);
+                
+                if (response.success) {
+                    const paymentState = response.result;
+                    
+                    console.log('支付状态查询结果:', paymentState);
+                    
+                    switch (paymentState) {
+                        case 'SUCCESS':
+                            // 支付成功
+                            handlePaymentSuccess();
+                            break;
+                        case 'CLOSED':
+                        case 'REVOKED':
+                        case 'PAYERROR':
+                            // 支付失败的状态
+                            handlePaymentFailed(getPaymentStateMessage(paymentState));
+                            break;
+                        case 'REFUND':
+                            // 已退款
+                            handlePaymentFailed('支付已退款');
+                            break;
+                        case 'NOTPAY':
+                        case 'USERPAYING':
+                            // 未支付或用户支付中，继续轮询
+                            console.log('支付状态:', getPaymentStateMessage(paymentState));
+                            break;
+                        default:
+                            console.log('未知支付状态:', paymentState);
+                            break;
+                    }
+                }
             } catch (error) {
                 console.error('查询支付状态失败:', error);
+                // 查询失败不影响轮询继续
             }
         };
 
+        // 获取支付状态的中文描述
+        const getPaymentStateMessage = (state) => {
+            const stateMap = {
+                'SUCCESS': '支付成功',
+                'REFUND': '转入退款',
+                'NOTPAY': '未支付',
+                'CLOSED': '已关闭',
+                'REVOKED': '已撤销',
+                'USERPAYING': '用户支付中',
+                'PAYERROR': '支付失败'
+            };
+            return stateMap[state] || `未知状态: ${state}`;
+        };
+
         // 处理支付成功
         const handlePaymentSuccess = () => {
             paymentStatus.value = 'success';
@@ -274,7 +354,7 @@ export default {
             stopCountdown();
             
             ElMessage.success('支付成功！');
-            emit('success', outTradeNo);
+            emit('success', orderId);
             
             setTimeout(() => {
                 visible.value = false;
@@ -368,7 +448,7 @@ export default {
 
         // 监听弹窗显示状态
         watch(visible, (newVal) => {
-            if (newVal && props.paymentData.orderId) {
+            if (newVal && props.paymentData.packageId) {
                 createPaymentOrder();
             } else {
                 stopPolling();
@@ -376,6 +456,7 @@ export default {
                 paymentStatus.value = 'loading';
                 errorMessage.value = '';
                 outTradeNo = '';
+                orderId = '';
             }
         });
 
@@ -441,11 +522,20 @@ export default {
                     margin-bottom: 16px;
                     display: flex;
                     justify-content: center;
+                    align-items: center;
+                    min-height: 200px;
+                    min-width: 200px;
                     
                     :deep(canvas) {
                         border-radius: 8px;
                         box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+                        max-width: 100%;
+                        height: auto;
                     }
+                    
+                    // 确保容器有背景，方便调试
+                    border: 1px solid #eee;
+                    border-radius: 8px;
                 }
 
                 .qr-tips {

src/views/user/Recharge.vue

@@ -97,12 +97,12 @@ 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}豆豆`
+    body: `充值套餐 - ${totalBeans.value}豆豆`,
+    packageId: selectedPackage.value !== null ? rechargePackages.value[selectedPackage.value].id : null
 }));
 
 // 计算总价
@@ -147,29 +147,24 @@ const handleRecharge = async () => {
         return;
     }
 
+    if (selectedPackage.value === null) {
+        ElMessage.warning('请选择充值套餐');
+        return;
+    }
+
     try {
-        // 创建订单
-        const result = await orderApi.createPayPackageOrder({
-            packageId : rechargePackages.value[selectedPackage.value].id,
-            payType : 'web'
-        });
-
-        // 保存订单ID并显示支付弹窗
-        currentOrderId.value = result.result;
+        // 显示支付弹窗，订单创建将在支付组件中处理
         showPaymentModal.value = true;
         
     } catch (error) {
-        console.error('创建订单失败:', error);
-        ElMessage.error('创建订单失败，请重试');
+        console.error('发起支付失败:', error);
+        ElMessage.error('发起支付失败，请重试');
     }
 };
 
 // 支付成功回调
-const handlePaymentSuccess = async (outTradeNo) => {
+const handlePaymentSuccess = async (orderId) => {
     try {
-        // 调用支付成功接口
-        await orderApi.paySuccess(currentOrderId.value);
-        
         ElMessage.success(`充值成功，获得${totalBeans.value}豆豆`);
         
         // 更新用户信息
@@ -180,7 +175,6 @@ const handlePaymentSuccess = async (outTradeNo) => {
         
         // 重置状态
         selectedPackage.value = null;
-        currentOrderId.value = '';
         
         // 延迟跳转，让用户看到成功消息
         setTimeout(() => {
@@ -188,22 +182,24 @@ const handlePaymentSuccess = async (outTradeNo) => {
         }, 2000);
         
     } catch (error) {
-        console.error('支付确认失败:', error);
-        ElMessage.error('支付确认失败，请联系客服');
+        console.error('更新用户信息失败:', error);
+        ElMessage.error('支付成功，但更新用户信息失败，请刷新页面');
+        
+        // 即使更新失败，也要关闭弹窗
+        showPaymentModal.value = false;
+        selectedPackage.value = null;
     }
 };
 
 // 支付取消回调
 const handlePaymentCancel = () => {
     showPaymentModal.value = false;
-    currentOrderId.value = '';
     ElMessage.info('已取消支付');
 };
 
 // 支付失败回调
 const handlePaymentFailed = (errorMessage) => {
     showPaymentModal.value = false;
-    currentOrderId.value = '';
     ElMessage.error(errorMessage || '支付失败，请重试');
 };