接入两个接口

src/pages/friend-battle.vue

@@ -1,12 +1,13 @@
 <script setup>
 import { ref } from "vue";
+import { onShow } from "@dcloudio/uni-app";
 import Container from "@/components/Container.vue";
 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 Avatar from "@/components/Avatar.vue";
-import { getRoomAPI, joinRoomAPI, isGamingAPI } from "@/apis";
+import { getRoomAPI, joinRoomAPI, isGamingAPI, getBattleDataAPI } from "@/apis";
 import useStore from "@/store";
 import { storeToRefs } from "pinia";
 const store = useStore();
@@ -16,6 +17,7 @@ import { debounce } from "@/util";
 const showModal = ref(false);
 const warnning = ref("");
 const roomNumber = ref("");
+const data = ref({});
 
 const enterRoom = debounce(async () => {
   const isGaming = await isGamingAPI();
@@ -60,6 +62,10 @@ const onCreateRoom = async () => {
   warnning.value = "";
   showModal.value = true;
 };
+onShow(async () => {
+  const result = await getBattleDataAPI();
+  data.value = result;
+});
 </script>
 
 <template>
@@ -79,23 +85,33 @@ const onCreateRoom = async () => {
         <view>
           <view>
             <view>
-              <text>1111</text>
+              <text>{{ data.TotalBattle }}</text>
               <text>局</text>
             </view>
             <text>约战数量</text>
           </view>
           <view>
             <view>
-              <text>1111</text>
+              <text>{{ data.totalArrow }}</text>
               <text>箭</text>
             </view>
             <text>射箭量</text>
           </view>
           <view>
             <view class="stars">
-              <image src="../static/star-full.png" mode="widthFix" />
-              <image src="../static/star-full.png" mode="widthFix" />
-              <image src="../static/star-half.png" mode="widthFix" />
+              <block v-for="i in 5" :key="i">
+                <image
+                  v-if="data.totalWinningRate >= i * 0.2"
+                  src="../static/star-full.png"
+                  mode="widthFix"
+                />
+                <image
+                  v-else-if="data.totalWinningRate >= (i - 1) * 0.2 + 0.1"
+                  src="../static/star-half.png"
+                  mode="widthFix"
+                />
+                <image v-else src="../static/star-empty.png" mode="widthFix" />
+              </block>
             </view>
             <text>挑战难度</text>
           </view>
@@ -279,9 +295,9 @@ const onCreateRoom = async () => {
 }
 .my-data > view:last-child > view > view > text:first-child {
   color: #fff;
-  font-size: 17px;
+  font-size: 20px;
   margin-right: 5px;
-  transform: translateY(3px);
+  transform: translateY(4px);
 }
 .my-data > view:last-child > view:nth-child(2) {
   border-left: 1px solid #48494e;
@@ -293,7 +309,7 @@ const onCreateRoom = async () => {
   height: 20px;
 }
 .stars > image {
-  width: 5vw;
+  width: 4vw;
   margin: 0 1px;
 }
 </style>