完成支付功能

src/apis.js

@@ -26,6 +26,14 @@ function request(method, url, data = {}) {
               resolve({});
               return;
             }
+            if (message === "ERROR_ORDER_UNPAY") {
+              uni.showToast({
+                title: "当前有未支付订单",
+                icon: "none",
+              });
+              resolve({});
+              return;
+            }
             uni.showToast({
               title: message,
               icon: "none",
@@ -260,7 +268,6 @@ export const createOrderAPI = (vipId) => {
   return request("POST", "/user/order/create", {
     vipId,
     quanity: 1,
-    mockTest: true,
     tradeType: "mini",
     payType: "wxpay",
   });
@@ -269,7 +276,6 @@ export const createOrderAPI = (vipId) => {
 export const payOrderAPI = (id) => {
   return request("POST", "/user/order/pay", {
     id,
-    mockTest: true,
     tradeType: "mini",
     payType: "wxpay",
   });

src/constants.js

@@ -19,6 +19,7 @@ export const MESSAGETYPES = {
   HalfTimeOver: 388606440,
   BackToGame: 1899960424,
   FinalShootResult: 3813452544,
+  PaySuccess: 3793388244,
 };
 
 export const topThreeColors = ["#FFD947", "#D2D2D2", "#FFA515"];

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
       );
+      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: "创建成功",
+              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":
+    case 1:
-      return "#35CD67";
-    case "5":
       return "#EF4848";
+    case 4:
+      return "#35CD67";
     default:
       return "#999999";
   }

src/util.js

@@ -1,12 +1,12 @@
 import websocket from "@/websocket";
 
 export const formatTimestamp = (timestamp) => {
-  const date = new Date(timestamp);
+  const date = new Date(timestamp * 1000);
   const year = date.getFullYear();
   const month = date.getMonth() + 1;
   const day = date.getDate();
 
-  return `${year}.${month}.${day}`;
+  return `${year}年${month}月${day}号`;
 };
 
 export const checkConnection = () => {

src/websocket.js

@@ -32,10 +32,11 @@ function createWebSocket(token, onMessage) {
   // 接收消息
   uni.onSocketMessage((res) => {
     const data = JSON.parse(res.data);
-    if(data.event === 'pong' || !data.data.updates) return;
+    if (data.event === "pong" || !data.data.updates) return;
     if (onMessage) onMessage(data.data.updates);
     const msg = data.data.updates[0];
-    if (msg && msg.constructor === MESSAGETYPES.BackToGame) {
+    if (!msg) return;
+    if (msg.constructor === MESSAGETYPES.BackToGame) {
       const { battleInfo } = msg;
       uni.setStorageSync(`battle-${battleInfo.id}`, battleInfo);
       // 约战
@@ -57,6 +58,9 @@ function createWebSocket(token, onMessage) {
         }
       }
     }
+    if (msg.constructor === MESSAGETYPES.PaySuccess) {
+      console.log(1111111, msg);
+    }
   });
 
   // 错误处理