diff --git a/pages/mine/vip.vue b/pages/mine/vip.vue
index a8932ad..744a811 100644
--- a/pages/mine/vip.vue
+++ b/pages/mine/vip.vue
@@ -170,19 +170,49 @@ const selectPlan = (index) => {
 };
 
 const handlePurchase = async () => {
-  const plan = plans.value[selectedPlanIndex.value || 0];
-  console.log("plan", plan);
-  const orderRes = await createOrder({
-    planId: plan.id,
-  });
-  if (orderRes?.payParams) {
-    wx.requestPayment({
-      ...orderRes.payParams,
-      success(res) {
-        // 等后端回调，不要直接认为支付成功
-      },
-      fail(res) {},
+  if (selectedPlanIndex.value < 0 || !plans.value[selectedPlanIndex.value]) {
+    uni.showToast({ title: "请选择会员方案", icon: "none" });
+    return;
+  }
+
+  const plan = plans.value[selectedPlanIndex.value];
+
+  uni.showLoading({ title: "正在发起支付...", mask: true });
+
+  try {
+    const orderRes = await createOrder({
+      planId: plan.id,
     });
+
+    if (orderRes?.payParams) {
+      uni.requestPayment({
+        provider: "wxpay",
+        ...orderRes.payParams,
+        success(res) {
+          uni.showToast({ title: "支付成功", icon: "success" });
+          // 支付成功后可以刷新用户信息
+          // userStore.getUserInfo();
+        },
+        fail(err) {
+          console.log("payment fail", err);
+          if (err.errMsg.indexOf("cancel") > -1) {
+            uni.showToast({ title: "支付已取消", icon: "none" });
+          } else {
+            uni.showToast({ title: "支付失败", icon: "none" });
+          }
+        },
+        complete() {
+          uni.hideLoading();
+        },
+      });
+    } else {
+      uni.hideLoading();
+      uni.showToast({ title: "获取支付参数失败", icon: "none" });
+    }
+  } catch (e) {
+    uni.hideLoading();
+    uni.showToast({ title: "创建订单失败", icon: "none" });
+    console.error(e);
   }
 };
 </script>