功能完善

src/apis.js

@@ -240,3 +240,36 @@ export const getBattleListAPI = async (page, battleType) => {
 export const getRankListAPI = () => {
   return request("GET", "/index/ranklist");
 };
+
+export const createOrderAPI = (vipId) => {
+  return request("POST", "/user/order/create", {
+    vipId,
+    quanity: 1,
+    mockTest: true,
+    tradeType: "mini",
+    payType: "wxpay",
+  });
+};
+
+export const payOrderAPI = (id) => {
+  return request("POST", "/user/order/pay", {
+    id,
+    mockTest: true,
+    tradeType: "mini",
+    payType: "wxpay",
+  });
+};
+
+export const getOrderListAPI = async (page) => {
+  const reuslt = await request("GET", `/user/order/list?page${page}`);
+  return reuslt.items || [];
+};
+
+export const cancelOrderListAPI = async (id) => {
+  return request("POST", "/user/order/cancelOrder", { id });
+};
+
+export const isGamingAPI = async () => {
+  const result = await request("GET", "/user/isGaming");
+  return result.gaming || false;
+};

src/components/ScrollList.vue

@@ -3,7 +3,7 @@ import { ref, watch } from "vue";
 const props = defineProps({
   show: {
     type: Boolean,
-    default: false,
+    default: true,
   },
   onLoading: {
     type: Function,

src/constants.js

@@ -51,3 +51,15 @@ export const meleeAvatarColors = [
   "#9BA969",
   "#DCCE6D",
 ];
+
+export const orderStatusNames = {
+  1: "待付款",
+  2: "已付款",
+  3: "已发货",
+  4: "已完成",
+  5: "已关闭",
+  6: "申请退款",
+  7: "退款中",
+  8: "已退款",
+  9: "拒绝退款",
+};

src/pages/be-vip.vue

@@ -5,6 +5,7 @@ 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 useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -13,14 +14,19 @@ const { user, config } = storeToRefs(store);
 const selectedVIP = ref(0);
 const showModal = ref(false);
 
-const chooseVip = (index) => {
-  selectedVIP.value = index;
-};
-
-const onPay = () => {
+const onPay = async () => {
   if (!user.value.id) {
     showModal.value = true;
-  } else {
+  } else if (config.value.vipMenus[selectedVIP.value]) {
+    if (config.value.vipMenus[selectedVIP.value].id) {
+      const result = await createOrderAPI(
+        config.value.vipMenus[selectedVIP.value].id
+      );
+      uni.showToast({
+        title: "创建成功",
+        icon: "none",
+      });
+    }
   }
 };
 </script>
@@ -70,7 +76,7 @@ const onPay = () => {
                   ? '#FF7D57'
                   : 'linear-gradient(180deg, #fbfbfb 0%, #f5f5f5 100%)',
             }"
-            @click="chooseVip(index)"
+            @click="() => (selectedVIP = index)"
           >
             {{ item.name }}
           </view>
@@ -141,6 +147,7 @@ const onPay = () => {
 .content > view:nth-child(2) > text {
   display: block;
   margin-top: 10px;
+  color: #000;
 }
 .vip-items {
   width: 100%;

src/pages/friend-battle.vue

@@ -6,7 +6,7 @@ import Guide from "@/components/Guide.vue";
 import SButton from "@/components/SButton.vue";
 import SModal from "@/components/SModal.vue";
 import CreateRoom from "@/components/CreateRoom.vue";
-import { getRoomAPI, joinRoomAPI } from "@/apis";
+import { getRoomAPI, joinRoomAPI, isGamingAPI } from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -18,6 +18,7 @@ const warnning = ref("");
 const roomNumber = ref("");
 
 const enterRoom = debounce(async () => {
+  // const isGaming = await isGamingAPI();
   if (!roomNumber.value) {
     warnning.value = "请输入房间号";
     showModal.value = true;

src/pages/melee-match.vue

@@ -12,6 +12,7 @@ import SButton from "@/components/SButton.vue";
 import Avatar from "@/components/Avatar.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import Matching from "@/components/Matching.vue";
+import SModal from "@/components/SModal.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
@@ -34,6 +35,7 @@ const players = ref([]);
 const playersScores = ref({});
 const halfTimeTip = ref(false);
 const onComplete = ref(null);
+const showModal = ref(false);
 
 onLoad(async (options) => {
   gameType.value = options.gameType;
@@ -109,6 +111,16 @@ async function onReceiveMessage(messages = []) {
     }
   });
 }
+const onBack = () => {
+  if (battleId.value) {
+    showModal.value = true;
+  } else {
+    uni.navigateBack();
+  }
+};
+const exitRoom = async () => {
+  uni.navigateBack();
+};
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
 });
@@ -121,7 +133,11 @@ onUnmounted(() => {
 </script>
 
 <template>
-  <Container :title="battleId ? '大乱斗排位赛' : '搜索对手...'" :bgType="1">
+  <Container
+    :title="battleId ? '大乱斗排位赛' : '搜索对手...'"
+    :bgType="1"
+    :onBack="onBack"
+  >
     <view class="container">
       <block v-if="battleId">
         <BattleHeader v-if="players.length" :players="players" />
@@ -183,6 +199,13 @@ onUnmounted(() => {
           :onComplete="onComplete"
         />
       </block>
+      <SModal :show="showModal" :onClose="() => (showModal = false)">
+        <view class="modal">
+          <SButton :onClick="exitRoom" width="200px" :rounded="20">
+            退出比赛
+          </SButton>
+        </view>
+      </SModal>
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>

src/pages/order-detail.vue

@@ -1,25 +1,43 @@
 <script setup>
-import { ref } from "vue";
-import { onLoad } from "@dcloudio/uni-app";
+import { ref, onMounted } from "vue";
 import Container from "@/components/Container.vue";
+import SButton from "@/components/SButton.vue";
+import { payOrderAPI, cancelOrderListAPI } from "@/apis";
+import { orderStatusNames } from "@/constants";
 
-const id = ref("");
+const data = ref({});
 
-onLoad((options) => {
-  id.value = options.id;
+onMounted(() => {
+  const order = uni.getStorageSync("order");
+  data.value = order || {};
 });
+
+const goPay = async () => {
+  const result = await payOrderAPI(data.value.orderId);
+};
+
+const cancelOrder = async () => {
+  const result = await cancelOrderListAPI(data.value.orderId);
+  data.value = result;
+};
 </script>
 
 <template>
   <Container title="订单详情">
     <view class="container">
       <view class="order">
-        <text>商品名：会员一个月</text>
-        <text>订单号：20250131HY1M0000</text>
-        <text>下单时间：2025-01-31 09:27:34</text>
+        <view>
+          <text>商品名：{{ data.vipName }}</text>
+          <text>订单号：{{ data.orderId }}</text>
+          <text>下单时间：{{ data.vipCreateAt }}</text>
           <text>支付时间：2025-01-31 09:27:34</text>
-        <text>金额：10 元</text>
-        <text>支付方式：支付宝</text>
+          <text>金额：{{ data.vipPrice }} 元</text>
+          <text>支付方式：微信</text>
+        </view>
+        <view v-if="data.orderStatus === 1">
+          <SButton :onClick="goPay">去支付</SButton>
+          <SButton :onClick="cancelOrder">取消订单</SButton>
+        </view>
       </view>
     </view>
   </Container>
@@ -36,17 +54,25 @@ onLoad((options) => {
   width: 100%;
   height: 100%;
   background-color: #fff;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+.order > view:first-child {
   display: flex;
   flex-direction: column;
   padding: 15px;
 }
-.order > text:first-child {
+.order > view:first-child > text:first-child {
   color: #000;
   font-size: 16px;
 }
-.order > text {
+.order > view:first-child > text {
   color: #666666;
   font-size: 13px;
   margin-top: 5px;
 }
+.order > view:last-child {
+  margin-bottom: 20px;
+}
 </style>

src/pages/orders.vue

@@ -1,43 +1,67 @@
 <script setup>
+import { ref } from "vue";
 import Container from "@/components/Container.vue";
-
-const orders = ["已生效", "已失效"];
+import ScrollList from "@/components/ScrollList.vue";
+import { getOrderListAPI } from "@/apis";
+import useStore from "@/store";
+import { orderStatusNames } from "@/constants";
+import { storeToRefs } from "pinia";
+const store = useStore();
+const { user, config } = storeToRefs(store);
 
 const getStatusColor = (status) => {
   switch (status) {
-    case "已生效":
+    case "4":
       return "#35CD67";
-    case "已失效":
+    case "5":
       return "#EF4848";
     default:
       return "#999999";
   }
 };
 
-const toDetailPage = (id) => {
+const toDetailPage = (detail) => {
+  uni.setStorageSync("order", detail);
   uni.navigateTo({
-    url: `/pages/order-detail?id=${id}`,
+    url: `/pages/order-detail`,
   });
 };
+
+const list = ref([]);
+
+const onLoading = async (page) => {
+  const result = await getOrderListAPI(page);
+  if (page === 1) {
+    list.value = result;
+  } else {
+    list.value = list.value.concat(result);
+  }
+  return result.length;
+};
 </script>
 
 <template>
   <Container title="订单">
     <view class="container">
+      <ScrollList :onLoading="onLoading">
         <view
-        v-for="(item, index) in orders"
+          v-for="(item, index) in list"
           :key="index"
           class="order-item"
           @click="() => toDetailPage(item)"
         >
-        <view :style="{ backgroundColor: getStatusColor(item) }">{{
-          item
-        }}</view>
-        <text>会员一个月</text>
+          <view
+            :style="{ backgroundColor: getStatusColor(item.orderStatus) }"
+            >{{ orderStatusNames[item.orderStatus] }}</view
+          >
+          <text>{{ item.vipName }}</text>
+          <!-- <text>订单号：{{ item.orderId }}</text> -->
+          <!-- <text>创建时间：{{ item.vipCreateAt }}</text> -->
           <text>支付时间：2025-01-31 09:27:34</text>
-        <text>金额：10 元</text>
-        <text>支付方式：支付宝</text>
+          <text>金额：{{ item.vipPrice }} 元</text>
+          <text>支付方式：微信</text>
         </view>
+      </ScrollList>
     </view>
   </Container>
 </template>

src/pages/practise-one.vue

@@ -49,7 +49,6 @@ async function onReceiveMessage(messages = []) {
           ...msg.practice,
           arrows: JSON.parse(msg.practice.arrows),
         };
-        console.log(2222, practiseResult.value);
         generateCanvasImage("shareCanvas", 2, user.value, practiseResult.value);
       }
     }

src/pages/team-match.vue

@@ -12,6 +12,7 @@ import BattleFooter from "@/components/BattleFooter.vue";
 import ScreenHint from "@/components/ScreenHint.vue";
 import SButton from "@/components/SButton.vue";
 import Matching from "@/components/Matching.vue";
+import SModal from "@/components/SModal.vue";
 import { matchGameAPI, readyGameAPI } from "@/apis";
 import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
 import useStore from "@/store";
@@ -40,6 +41,7 @@ const redPoints = ref(0);
 const bluePoints = ref(0);
 const showRoundTip = ref(false);
 const onComplete = ref(null);
+const showModal = ref(false);
 
 onLoad(async (options) => {
   gameType.value = options.gameType;
@@ -130,19 +132,33 @@ async function onReceiveMessage(messages = []) {
     }
   });
 }
+const onBack = () => {
+  if (battleId.value) {
+    showModal.value = true;
+  } else {
+    uni.navigateBack();
+  }
+};
+const exitRoom = async () => {
+  uni.navigateBack();
+};
 onMounted(() => {
   uni.$on("socket-inbox", onReceiveMessage);
 });
 onUnmounted(() => {
   uni.$off("socket-inbox", onReceiveMessage);
-  if (gameType.value && teamSize.value) {
-    matchGameAPI(true, gameType.value, teamSize.value);
+  if (gameType.value && teamSize.value && !battleId.value) {
+    matchGameAPI(false, gameType.value, teamSize.value);
   }
 });
 </script>
 
 <template>
-  <Container :title="battleId ? '1V1排位赛' : '搜索对手...'" :bgType="1">
+  <Container
+    :title="battleId ? '1V1排位赛' : '搜索对手...'"
+    :bgType="1"
+    :onBack="onBack"
+  >
     <view class="container">
       <block v-if="battleId">
         <BattleHeader
@@ -214,6 +230,13 @@ onUnmounted(() => {
           :onComplete="onComplete"
         />
       </block>
+      <SModal :show="showModal" :onClose="() => (showModal = false)">
+        <view class="modal">
+          <SButton :onClick="exitRoom" width="200px" :rounded="20">
+            退出比赛
+          </SButton>
+        </view>
+      </SModal>
     </view>
     <view :style="{ marginBottom: '20px' }">
       <SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
@@ -226,4 +249,11 @@ onUnmounted(() => {
   width: 100%;
   height: 100%;
 }
+.modal {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
 </style>