完成支付功能

src/pages/be-vip.vue

@@ -5,12 +5,13 @@ import Avatar from "@/components/Avatar.vue";
 import SButton from "@/components/SButton.vue";
 import SModal from "@/components/SModal.vue";
 import Signin from "@/components/Signin.vue";
-import { createOrderAPI } from "@/apis";
+import { createOrderAPI, getHomeData } from "@/apis";
 import { formatTimestamp } from "@/util";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
 const { user, config } = storeToRefs(store);
+const { updateUser } = store;
 
 const selectedVIP = ref(0);
 const showModal = ref(false);
@@ -23,10 +24,28 @@ const onPay = async () => {
       const result = await createOrderAPI(
         config.value.vipMenus[selectedVIP.value].id
       );
-      uni.showToast({
-        title: "创建成功",
-        icon: "none",
-      });
+      if (!result.pay) return;
+      const params = result.pay.order.jsApi.params;
+      if (params) {
+        wx.requestPayment({
+          timeStamp: params.timeStamp, // 时间戳
+          nonceStr: params.nonceStr, // 随机字符串
+          package: params.package, // 统一下单接口返回的 prepay_id 参数值，格式：prepay_id=***
+          paySign: params.paySign, // 签名
+          signType: "RSA", // 签名类型，默认为RSA
+          async success(res) {
+            const result = await getHomeData();
+            if (result.user) updateUser(result.user);
+            uni.showToast({
+              title: "支付成功",
+              icon: "none",
+            });
+          },
+          fail(res) {
+            console.log("pay error", res);
+          },
+        });
+      }
     }
   }
 };

src/pages/order-detail.vue

@@ -2,10 +2,14 @@
 import { ref, onMounted } from "vue";
 import Container from "@/components/Container.vue";
 import SButton from "@/components/SButton.vue";
-import { payOrderAPI, cancelOrderListAPI } from "@/apis";
+import { payOrderAPI, cancelOrderListAPI, getHomeData } from "@/apis";
 import { orderStatusNames } from "@/constants";
+import useStore from "@/store";
+const store = useStore();
+const { updateUser } = store;
 
 const data = ref({});
+const loading = ref(false);
 
 onMounted(() => {
   const order = uni.getStorageSync("order");
@@ -14,6 +18,29 @@ onMounted(() => {
 
 const goPay = async () => {
   const result = await payOrderAPI(data.value.orderId);
+  const params = result.jsApi.params;
+  if (params) {
+    loading.value = true;
+    wx.requestPayment({
+      timeStamp: params.timeStamp, // 时间戳
+      nonceStr: params.nonceStr, // 随机字符串
+      package: params.package, // 统一下单接口返回的 prepay_id 参数值，格式：prepay_id=***
+      paySign: params.paySign, // 签名
+      signType: "RSA", // 签名类型，默认为RSA
+      async success(res) {
+        const result = await getHomeData();
+        if (result.user) updateUser(result.user);
+        uni.showToast({
+          title: "支付成功",
+          icon: "none",
+        });
+      },
+      fail(res) {
+        loading.value = false;
+        console.log("pay error", res);
+      },
+    });
+  }
 };
 
 const cancelOrder = async () => {
@@ -36,6 +63,7 @@ const cancelOrder = async () => {
         </view>
         <view v-if="data.orderStatus === 1">
           <SButton :onClick="goPay">去支付</SButton>
+          <view :style="{ height: '10px' }" />
           <SButton :onClick="cancelOrder">取消订单</SButton>
         </view>
       </view>

src/pages/orders.vue

@@ -11,10 +11,10 @@ const { user, config } = storeToRefs(store);
 
 const getStatusColor = (status) => {
   switch (status) {
-    case "4":
-      return "#35CD67";
-    case "5":
+    case 1:
       return "#EF4848";
+    case 4:
+      return "#35CD67";
     default:
       return "#999999";
   }