feat: 道具商城

src/api/shop/shop.js

@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+/**
+ * 我能买的道具
+ */
+export function whatCanIBuy () {
+    return request.get('/Trade/what-can-i-buy')
+}
+
+/**
+ * 购买道具
+ */
+export function buy (data) {
+    return request.post('/Trade/buy',data)
+}

src/pages/fishbaskets/Fishbaskets.vue

@@ -6,7 +6,6 @@
         <div style="text-align: right; margin-bottom: 20px;">
             <el-button type="primary" @click="fetchFishList">刷新</el-button>
             <el-button type="primary" @click="handleProcessFish">一键处理鱼</el-button>
-
         </div>
 
         <el-tabs v-model="activeTab" type="card">
@@ -15,7 +14,7 @@
             <el-tab-pane label="稀有鱼" name="rare" />
         </el-tabs>
 
-        <el-table :data="filteredFish" style="width: 100%;height:(100vh-200px)" border>
+        <el-table :data="filteredFish" style="width: 100%;" height="calc(100vh - 240px)" border>
             <el-table-column prop="id" label="id" align="center" width="100" />
             <el-table-column prop="name" label="鱼名" align="center" width="200" />
             <el-table-column prop="weight" label="重量" align="right" width="150" />
@@ -34,7 +33,6 @@
                 </template>
             </el-table-column>
         </el-table>
-
     </div>
 </template>
 

src/pages/main/Home.vue

@@ -29,7 +29,7 @@ const menuItems = [
     { label: '🎒 查看装备', route: 'equipments' },
     { label: '🎣 拉竿钓鱼', route: 'fishing' },
     { label: '🐟 查看鱼篓', route: 'fishbaskets' },
-    { label: '🛒 商店售卖', route: 'shop' },
+    { label: '🛒 道具商店', route: 'shop' },
     { label: '💰 市场信息', route: 'market' },
     { label: '🏆 游戏排名', route: 'ranking' }
 ]

src/pages/shop/Shop.vue

@@ -1,24 +1,85 @@
-<!--
- * @Descripttion: 
- * @version: 1.0.0
- * @Author: LyMy
- * @Date: 2025-04-11 16:33:21
- * @LastEditors: LyMy
- * @LastEditTime: 2025-04-11 16:36:40
- * @FilePath: \fish_game\src\pages\fishbaskets\Fishbaskets.vue
--->
 <template>
-  <div class="equipments-page">
-    <h1>商店</h1>
-    <p>这是商店内容。</p>
+    <div class="shop-page">
+        <h1>商店 - 您当前拥有 {{ points }} 积分</h1>
+
+        <el-table :data="items" style="width: 100%;" height="calc(100vh - 110px)" border>
+            <el-table-column label="ID" prop="id" width="100" align="center"/>
+            <el-table-column label="名称" prop="name" width="200" align="center" />
+            <el-table-column label="描述" prop="description" />
+            <el-table-column label="价格(积分)" prop="points" width="150" align="right"/>
+            <el-table-column label="您已拥有" prop="myQuantity" width="150" align="right"/>
+            <el-table-column label="操作" width="180" align="center">
+                <template #default="{ row }">
+                    <el-button v-if="row.points <= points" type="primary" @click="buyItem(row)" :disabled="row.myQuantity >= 1">
+                        {{ row.myQuantity >= 1 ? '已拥有' : '购买' }}
+                    </el-button>
+                    <el-button v-else type="warning" disabled>
+                        积分不足
+                    </el-button>
+                </template>
+            </el-table-column>
+        </el-table>
     </div>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
+import { whatCanIBuy, buy } from '@/api/shop/shop'
+import { ElButton, ElTable, ElTableColumn, ElMessage } from 'element-plus'
+
+const points = ref(0)  // 当前用户的积分
+const items = ref([])  // 商店物品列表
+
+// 获取当前用户的积分和商店商品信息
+const fetchData = async () => {
+    try {
+        // 假设获取积分的接口
+        const pointsRes = await whatCanIBuy()
+        points.value = pointsRes.points
+        items.value = pointsRes.items
+    } catch (err) {
+        console.log('====================================');
+        console.log(err);
+        console.log('====================================');
+        ElMessage.error('加载数据失败，请重试')
+    }
+}
+
+// 购买物品
+const buyItem = async (item) => {
+    try {
+        const res = await buy({ EquipmentId: item.id, Quantity: 1 })
+        if (res.success) {
+            item.myQuantity += 1
+            points.value -= item.points
+            ElMessage.success(res.message)
+        } else {
+            ElMessage.error(res.message)
+        }
+    } catch (err) {
+        console.log('====================================');
+        console.log(err);
+        console.log('====================================');
+        ElMessage.error('购买过程中出错，请稍后再试')
+    }
+}
+
+// 页面加载时获取数据
+onMounted(() => {
+    fetchData()
+})
 </script>
 
 <style scoped>
-.equipments-page {
-  text-align: center;
+.shop-page {
+    margin: 20px;
+}
+
+.el-table {
+    margin-top: 20px;
+}
+
+.el-button {
+    margin-top: 10px;
 }
 </style>