feat: 鱼市 获取数据/购买/下架

src/api/market/market.js

@@ -0,0 +1,45 @@
+/*
+ * @Descripttion: 
+ * @version: 1.0.0
+ * @Author: LyMy
+ * @Date: 2025-04-12 11:57:42
+ * @LastEditors: LyMy
+ * @LastEditTime: 2025-04-12 11:58:56
+ * @FilePath: \go_fish_web\src\api\market\market.js
+ */
+import request from '@/utils/request'
+
+/**
+ * 鱼市
+ */
+export function getAllMarketplace () {
+    return request.get('/Trade/all-marketplace')
+}
+
+/**
+ * 我的市场
+ */
+export function getMyMarketplace () {
+    return request.get('/Trade/my-marketplace')
+}
+
+/**
+ * 市场交易历史
+ */
+export function getMarketplaceHistory () {
+    return request.get('/Trade/marketplace-history')
+}
+
+/**
+ * 买鱼
+ */
+export function buyFromMarketplace (marketplaceId) {
+    return request.post(`/Trade/buy-from-marketplace/${marketplaceId}`)
+}
+
+/**
+ * 下架我的鱼
+ */
+export function downMyFish (marketplaceId) {
+    return request.delete(`/Trade/${marketplaceId}`)
+}

src/pages/market/Market.vue

@@ -1,24 +1,162 @@
-<!--
- * @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="market-page">
+        <h1>🛒 京海鱼市交易中心</h1>
+
+        <el-tabs v-model="activeTab" @tab-click="handleTabChange" type="border-card">
+            <el-tab-pane label="鱼市" name="all" />
+            <el-tab-pane label="我的市场" name="mine" />
+            <el-tab-pane label="交易记录" name="history" />
+        </el-tabs>
+
+        <!-- 鱼市表格 -->
+        <el-table v-if="activeTab === 'all'" :data="marketList" style="width: 100%" height="calc(100vh - 110px)" border>
+            <el-table-column prop="id" label="ID" width="80" />
+            <el-table-column prop="fishName" label="鱼名" />
+            <el-table-column prop="sellerName" label="卖家" />
+            <el-table-column prop="points" label="价格（点数）" width="150" />
+            <el-table-column label="操作" width="150">
+                <template #default="{ row }">
+                    <el-button type="success" @click="buyFish(row)">购买</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 我的市场表格 -->
+        <el-table v-if="activeTab === 'mine'" :data="myMarketList" style="width: 100%" height="calc(100vh - 110px)" border>
+            <el-table-column prop="id" label="ID" width="80" />
+            <el-table-column prop="fishName" label="鱼名" />
+            <el-table-column prop="points" label="挂售价格" />
+            <el-table-column label="操作">
+                <template #default="{ row }">
+                    <el-button type="danger" @click="removeMyListing(row)">下架</el-button>
+                </template>
+            </el-table-column>
+        </el-table>
+
+        <!-- 历史记录 -->
+        <el-card v-if="activeTab === 'history'" class="history-box">
+            <div v-if="historyList.length">
+                <p v-for="(item, index) in historyList" :key="index">{{ item }}</p>
+            </div>
+            <div v-else>
+                <el-empty description="暂无交易记录" />
+            </div>
+        </el-card>
     </div>
 </template>
 
 <script setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { getAllMarketplace, getMyMarketplace, getMarketplaceHistory, buyFromMarketplace, downMyFish } from '@/api/market/market'
+
+const activeTab = ref('all')
+
+const marketList = ref([])
+const myMarketList = ref([])
+const historyList = ref([])
+
+// 切换标签
+const handleTabChange = () => {
+    if (activeTab.value === 'all') {
+        fetchAllMarketplace()
+    } else if (activeTab.value === 'mine') {
+        fetchMyMarketplace()
+    } else if (activeTab.value === 'history') {
+        fetchHistory()
+    }
+}
+
+// 获取鱼市数据
+const fetchAllMarketplace = async () => {
+    try {
+        const res = await getAllMarketplace()
+        marketList.value = res
+    } catch {
+        ElMessage.error('获取鱼市数据失败')
+    }
+}
+
+// 获取我的市场数据
+const fetchMyMarketplace = async () => {
+    try {
+        const res = await getMyMarketplace()
+        myMarketList.value = res
+    } catch {
+        ElMessage.error('获取我的市场数据失败')
+    }
+}
+
+// 获取交易记录
+const fetchHistory = async () => {
+    try {
+        const res = await getMarketplaceHistory()
+        historyList.value = res
+    } catch {
+        ElMessage.error('获取历史记录失败')
+    }
+}
+
+// 购买鱼
+const buyFish = async (item) => {
+    try {
+        await ElMessageBox.confirm(
+            `是否确认花费 ${item.points} 点数购买 ${item.fishName}？`,
+            '确认购买',
+            {
+                confirmButtonText: '购买',
+                cancelButtonText: '取消',
+                type: 'warning',
+            }
+        )
+        const res = await buyFromMarketplace(item.id)
+        if (res.success) {
+            ElMessage.success('购买成功')
+            fetchAllMarketplace()
+        } else {
+            ElMessage.error(res.message || '购买失败')
+        }
+    } catch (err) {
+        if (err !== 'cancel') {
+            ElMessage.error('购买过程中出错')
+        }
+    }
+}
+
+// 下架自己挂售的鱼
+const removeMyListing = async (item) => {
+    try {
+        await ElMessageBox.confirm(`确定下架 ${item.fishName} 吗？`, '确认操作', {
+            confirmButtonText: '下架',
+            cancelButtonText: '取消',
+            type: 'warning',
+        })
+        const res = await downMyFish(item.id)
+        if (res.success) {
+            ElMessage.success('下架成功')
+            fetchMyMarketplace()
+        } else {
+            ElMessage.error(res.message || '操作失败')
+        }
+    } catch (err) {
+        if (err !== 'cancel') {
+            ElMessage.error('操作失败')
+        }
+    }
+}
+
+onMounted(() => {
+    fetchAllMarketplace()
+})
 </script>
 
 <style scoped>
-.equipments-page {
-  text-align: center;
+.market-page {
+    padding: 20px;
+}
+
+.history-box {
+    margin-top: 20px;
+    line-height: 1.8;
 }
 </style>