Gods
/
go_fish_web
8
0
Fork 0
Code Issues Pull Requests Packages Projects Releases 1 Wiki Activity

Compare commits

base: Gods:main
Branches Tags
Gods:main
Gods:1.0.0.1
..
compare: Gods:1.0.0.1
Branches Tags
Gods:main
Gods:1.0.0.1

No commits in common. 'main' and '1.0.0.1' have entirely different histories.
main ... 1.0.0.1

16 changed files with 702 additions and 2568 deletions
Show Stats

11
Dockerfile
Unescape Escape View File

@ -1,11 +0,0 @@
FROM nginx:1.25.3-alpine
# 从构建阶段复制构建结果到nginx目录
ADD go_fish_web.tar.gz /usr/share/nginx/html
# 复制nginx配置
COPY ./nginx.conf /etc/nginx/conf.d/default.conf
EXPOSE 80
CMD ["nginx", "-g", "daemon off;"]

64
Jenkinsfile vendored
Unescape Escape View File

@ -1,64 +0,0 @@
pipeline {
agent any
stages {
stage('📄文件信息') {
steps {
sh 'pwd'
sh 'ls -al'
echo '🚀开始推送文件到坤爷服务器'
sh 'scp Dockerfile root@47.109.22.188:~/go_fish_web'
sh 'scp nginx.conf root@47.109.22.188:~/go_fish_web'
echo '✨推送完成'
}
}
stage('🛠️构建项目') {
steps {
withDockerContainer('node:18-alpine') {
sh 'npm -v'
sh 'npm config set registry https://registry.npmmirror.com'
sh 'npm install'
sh 'npm run build'
sh 'ls -al'
}
}
}
stage('🎁打包制品'){
steps {
dir('dist') {
sh 'ls -al'
sh 'tar -zcvf go_fish_web.tar.gz *'
archiveArtifacts artifacts: 'go_fish_web.tar.gz',
allowEmptyArchive: true,
fingerprint: true,
onlyIfSuccessful: true
sh 'ls -al'
echo '🚀开始推送制品到坤爷服务器'
sh 'scp go_fish_web.tar.gz root@47.109.22.188:~/go_fish_web'
echo '✨推送完成'
}
}
}
stage('🏓远程部署') {
steps {
echo '🚀开始远程部署'
sh 'ssh root@47.109.22.188 "docker stop go_fish_web && docker rm go_fish_web && docker rmi go_fish_web && docker build -t go_fish_web ~/go_fish_web"'
sh 'ssh root@47.109.22.188 "docker run --restart=always --name go_fish_web -d -p 30030:80 -v /etc/localtime:/etc/localtime:ro go_fish_web"'
sh 'ssh root@47.109.22.188 "docker ps -a"'
echo '✨远程部署完成'
}
}
}
post {
success {
echo 'Deployment successful!'
}
failure {
echo 'Deployment failed.'
}
}
}

33
nginx.conf
Unescape Escape View File

@ -1,33 +0,0 @@
server {
listen 80;
server_name localhost;
# 启用gzip压缩
gzip on;
gzip_min_length 1k;
gzip_comp_level 6;
gzip_types text/plain text/css text/javascript application/json application/javascript application/x-javascript application/xml;
gzip_vary on;
gzip_disable "MSIE [1-6]\.";
# 设置根目录
root /usr/share/nginx/html;
index index.html;
# 启用 CORS
location / {
try_files $uri $uri/ /index.html;
add_header 'Access-Control-Allow-Origin' '*';
add_header 'Access-Control-Allow-Methods' 'GET, POST, OPTIONS';
add_header 'Access-Control-Allow-Headers' 'Authorization, Content-Type';
}
# 处理 404 页面
error_page 404 /index.html;
# 缓存静态资源
location ~* \.(?:ico|css|js|gif|jpe?g|png|woff2?|eot|ttf|svg|json)$ {
expires max;
access_log off;
}
}

170
src/assets/fishing-scene.svg
Unescape Escape View File

@ -1,170 +0,0 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="400" height="300" viewBox="0 0 400 300" xmlns="http://www.w3.org/2000/svg">
<!-- 渐变定义 -->
<defs>
<linearGradient id="skyGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#87CEEB"/>
<stop offset="100%" style="stop-color:#4FC3F7"/>
</linearGradient>
<linearGradient id="waterGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#29B6F6" stop-opacity="0.8"/>
<stop offset="100%" style="stop-color:#0288D1" stop-opacity="0.9"/>
</linearGradient>
<linearGradient id="groundGradient" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:#8D6E63"/>
<stop offset="100%" style="stop-color:#5D4037"/>
</linearGradient>
<!-- 水波纹动画效果 -->
<filter id="water-ripple">
<feTurbulence type="turbulence" baseFrequency="0.01" numOctaves="3" result="turbulence">
<animate attributeName="baseFrequency" dur="30s" values="0.01;0.015;0.01" repeatCount="indefinite"/>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" in2="turbulence" scale="10" xChannelSelector="R" yChannelSelector="G"/>
</filter>
<!-- 光影效果 -->
<filter id="soft-light">
<feGaussianBlur in="SourceGraphic" stdDeviation="2" result="blur"/>
<feComposite in="SourceGraphic" in2="blur" operator="arithmetic" k1="1" k2="0.5" k3="0" k4="0"/>
</filter>
</defs>
<!-- 天空背景 -->
<rect x="0" y="0" width="400" height="200" fill="url(#skyGradient)"/>
<!-- 云朵 -->
<g>
<path d="M50,50 q20,-20 40,0 t40,0 t40,0 q20,20 0,40 h-120 q-20,-20 0,-40" fill="white" opacity="0.8">
<animateTransform attributeName="transform" type="translate" from="-100,0" to="500,0" dur="60s" repeatCount="indefinite"/>
</path>
<path d="M80,80 q15,-15 30,0 t30,0 t30,0 q15,15 0,30 h-90 q-15,-15 0,-30" fill="white" opacity="0.6">
<animateTransform attributeName="transform" type="translate" from="-100,0" to="500,0" dur="45s" repeatCount="indefinite"/>
</path>
</g>
<!-- 远处的树木和山丘 -->
<g transform="translate(20,150)">
<path d="M0,0 c-20,-40 -15,-45 0,-60 c15,15 20,20 0,60" fill="#2E7D32"/>
<rect x="-2" y="0" width="4" height="10" fill="#5D4037"/>
</g>
<g transform="translate(350,140)">
<path d="M0,0 c-25,-50 -20,-55 0,-70 c20,15 25,20 0,70" fill="#2E7D32"/>
<rect x="-3" y="0" width="6" height="15" fill="#5D4037"/>
</g>
<path d="M320,160 Q360,140 400,160" fill="#8D6E63" opacity="0.6"/>
<!-- 河岸和石头 -->
<path d="M0,180 Q100,170 200,180 T400,180 L400,200 L0,200 Z" fill="url(#groundGradient)"/>
<g transform="translate(100,175)">
<path d="M0,0 Q5,-5 10,0 Q15,-3 20,0" fill="#795548"/>
</g>
<g transform="translate(250,178)">
<path d="M0,0 Q8,-8 16,0 Q24,-5 32,0" fill="#795548"/>
</g>
<!-- 草丛装饰 -->
<g transform="translate(30,170)">
<path d="M0,0 Q5,-12 10,0 M5,0 Q10,-18 15,0 M10,0 Q15,-10 20,0" stroke="#4CAF50" stroke-width="2" fill="none"/>
<path d="M2,-2 Q7,-8 12,-2" stroke="#81C784" stroke-width="1.5" fill="none"/>
</g>
<g transform="translate(150,175)">
<path d="M0,0 Q5,-15 10,0 M5,0 Q10,-20 15,0 M10,0 Q15,-12 20,0" stroke="#4CAF50" stroke-width="2" fill="none"/>
<path d="M3,-3 Q8,-10 13,-3" stroke="#81C784" stroke-width="1.5" fill="none"/>
</g>
<g transform="translate(280,172)">
<path d="M0,0 Q5,-12 10,0 M5,0 Q10,-18 15,0 M10,0 Q15,-10 20,0" stroke="#4CAF50" stroke-width="2" fill="none"/>
<path d="M2,-2 Q7,-8 12,-2" stroke="#81C784" stroke-width="1.5" fill="none"/>
</g>
<!-- 水面 -->
<g>
<rect x="0" y="200" width="400" height="100" fill="url(#waterGradient)" filter="url(#water-ripple)"/>
<!-- 水面反光效果 -->
<path d="M50,220 Q200,210 350,220" stroke="white" stroke-width="1" fill="none" opacity="0.3">
<animate attributeName="d" dur="5s" repeatCount="indefinite"
values="M50,220 Q200,210 350,220;M50,220 Q200,230 350,220;M50,220 Q200,210 350,220"/>
</path>
<path d="M80,240 Q200,235 320,240" stroke="white" stroke-width="0.8" fill="none" opacity="0.2">
<animate attributeName="d" dur="7s" repeatCount="indefinite"
values="M80,240 Q200,235 320,240;M80,240 Q200,245 320,240;M80,240 Q200,235 320,240"/>
</path>
</g>
<!-- 钓鱼的人 -->
<g transform="translate(150,160)">
<!-- 腿 -->
<path d="M-8,0 C-8,5 -7,10 -5,15 M8,0 C8,5 7,10 5,15" stroke="#5D4037" stroke-width="4" stroke-linecap="round"/>
<!-- 鞋子 -->
<path d="M-7,15 Q-5,14 -3,15 L-3,17 L-7,17 Q-8,16 -7,15 Z" fill="#3E2723"/>
<path d="M3,15 Q5,14 7,15 L7,17 L3,17 Q2,16 3,15 Z" fill="#3E2723"/>
<!-- 身体 -->
<path d="M-5,-25 C-8,-20 -8,-10 -5,0 L5,0 C8,-10 8,-20 5,-25 Z" fill="#795548">
<!-- 衣服褶皱和纹理 -->
<path d="M-3,-20 C-1,-19 1,-19 3,-20" stroke="#6D4C41" stroke-width="0.5" fill="none"/>
<path d="M-4,-15 C-2,-14 2,-14 4,-15" stroke="#6D4C41" stroke-width="0.5" fill="none"/>
<path d="M-3,-10 C-1,-9 1,-9 3,-10" stroke="#6D4C41" stroke-width="0.5" fill="none"/>
<path d="M-2,-5 C0,-4 2,-4 4,-5" stroke="#6D4C41" stroke-width="0.5" fill="none"/>
</path>
<!-- 头 -->
<circle cx="0" cy="-35" r="10" fill="#FFA726"/>
<!-- 表情 -->
<path d="M-3,-37 Q0,-35 3,-37" stroke="#5D4037" stroke-width="0.5" fill="none">
<animate attributeName="d" dur="4s" repeatCount="indefinite"
values="M-3,-37 Q0,-35 3,-37;M-3,-36 Q0,-34 3,-36;M-3,-37 Q0,-35 3,-37"/>
</path>
<circle cx="-4" cy="-38" r="0.8" fill="#5D4037"/>
<circle cx="4" cy="-38" r="0.8" fill="#5D4037"/>
<!-- 帽子 -->
<path d="M-12,-38 C-8,-45 8,-45 12,-38 L0,-45 Z" fill="#8D6E63">
<path d="M-8,-41 L8,-41" stroke="#6D4C41" stroke-width="0.5" fill="none"/>
</path>
<!-- 手臂 -->
<path d="M5,-20 Q15,-18 20,-15" stroke="#795548" stroke-width="4" stroke-linecap="round">
<animate attributeName="d" dur="4s" repeatCount="indefinite"
values="M5,-20 Q15,-18 20,-15;M5,-20 Q15,-17 20,-14;M5,-20 Q15,-18 20,-15"/>
</path>
</g>
<!-- 钓鱼竿 -->
<g transform="translate(170,145)">
<!-- 手柄 -->
<path d="M0,0 L10,-5" stroke="#5D4037" stroke-width="3" stroke-linecap="round"/>
<!-- 主杆 -->
<line x1="10" y1="-5" x2="30" y2="-20" stroke="#8D6E63" stroke-width="2" stroke-linecap="round"/>
<!-- 导环 -->
<circle cx="15" cy="-8" r="1" fill="none" stroke="#424242" stroke-width="0.5"/>
<circle cx="22" cy="-13" r="1" fill="none" stroke="#424242" stroke-width="0.5"/>
<!-- 鱼线轮 -->
<path d="M5,-3 A3,3 0 1,1 5,3" fill="#424242"/>
<!-- 伸出部分 -->
<line x1="30" y1="-20" x2="60" y2="40" stroke="#8D6E63" stroke-width="1.5" stroke-linecap="round">
<animate attributeName="x2" dur="4s" repeatCount="indefinite"
values="60;61;60"/>
<animate attributeName="y2" dur="4s" repeatCount="indefinite"
values="40;41;40"/>
</line>
<!-- 鱼线 -->
<path d="M60,40 C60,45 60,50 60,60" stroke="#A7FFEB" stroke-width="0.5" fill="none">
<animate attributeName="d" dur="2s" repeatCount="indefinite"
values="M60,40 C60,45 60,50 60,60;M60,40 C61,45 61,50 61,65;M60,40 C60,45 60,50 60,60"/>
</path>
<!-- 浮标 -->
<circle cx="60" cy="55" r="1.5" fill="#F44336">
<animate attributeName="cy" dur="2s" repeatCount="indefinite"
values="55;60;55"/>
</circle>
</g>
<!-- 水中的鱼 -->
<g transform="translate(250,250)">
<path d="M0,0 C2,-3 8,-3 10,0 L12,0 L10,2 C8,5 2,5 0,2 L-2,0 Z" fill="#FFB74D">
<animateTransform attributeName="transform" type="translate" values="-50,0;50,0;-50,0" dur="10s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.6;0.8;0.6" dur="10s" repeatCount="indefinite"/>
</path>
</g>
<g transform="translate(180,270)">
<path d="M0,0 C1,-2 4,-2 5,0 L6,0 L5,1 C4,3 1,3 0,1 L-1,0 Z" fill="#FFB74D">
<animateTransform attributeName="transform" type="translate" values="-30,0;30,0;-30,0" dur="8s" repeatCount="indefinite"/>
<animate attributeName="opacity" values="0.4;0.6;0.4" dur="8s" repeatCount="indefinite"/>
</path>
</g>
</svg>
Side by Side

Before

Width:  |  Height:  |  Size: 8.1 KiB

87
src/components/FishingLog.vue
Unescape Escape View File

@ -1,87 +0,0 @@
<template>
<div class="fishing-log">
<h2>钓鱼日志</h2>
<el-scrollbar height="300px">
<div v-if="logs.length > 0" class="log-list">
<div v-for="(log, index) in logs" :key="index" class="log-item" :class="{ rare: log.isRare }">
<div class="log-time">{{ formatTime(log.time) }}</div>
<div class="log-content">
<el-tag :type="log.isRare ? 'warning' : 'info'" effect="plain">
{{ log.fishName }}
</el-tag>
<span class="log-weight">{{ log.weight }}</span>
</div>
</div>
</div>
<el-empty v-else description="暂无钓鱼记录" />
</el-scrollbar>
</div>
</template>
<script setup>
import { ref } from 'vue'
const props = defineProps({
logs: {
type: Array,
default: () => []
}
})
const formatTime = (time) => {
return new Date(time).toLocaleString()
}
</script>
<style scoped>
.fishing-log {
background: #fff;
border-radius: 8px;
padding: 20px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}
.log-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.log-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
border-radius: 4px;
background: #f5f7fa;
transition: all 0.3s ease;
}
.log-item:hover {
transform: translateX(5px);
background: #ecf5ff;
}
.log-time {
color: #909399;
font-size: 14px;
}
.log-content {
display: flex;
align-items: center;
gap: 10px;
}
.log-weight {
color: #606266;
}
.rare {
background: #fdf6ec;
}
.rare:hover {
background: #faecd8;
}
</style>

297
src/pages/equipments/Equipments.vue
Unescape Escape View File

@ -1,267 +1,68 @@
<!--
* @Descripttion:
* @version: 1.0.0
* @Author: LyMy
* @Date: 2025-04-11 16:51:41
* @LastEditors: LyMy
* @LastEditTime: 2025-04-11 17:32:02
* @FilePath: \go_fish_web\src\pages\equipments\Equipments.vue
-->
<template>
<div class="equipments-page">
<div class="content">
<div class="title-container">
<h1 class="title">我的装备库</h1>
<p class="subtitle">管理你的钓鱼装备</p>
</div>
<div class="equipment-grid">
<div
v-for="item in equipmentList"
:key="item.id"
class="equipment-card"
>
<div class="equipment-icon">
<span v-if="item.name.indexOf('竿') != -1" class="emoji-icon"
>🎣</span
>
<span v-else-if="item.name === '蚯蚓'" class="emoji-icon">🪱</span>
<span v-else-if="item.name === '积分'" class="emoji-icon">󠀻🏳</span>
<span v-else-if="item.name === '渔具箱'" class="emoji-icon"
>🧰</span
>
<span v-else class="emoji-icon">📦</span>
</div>
<div class="equipment-info">
<h3 class="equipment-name">{{ item.name }}</h3>
<div class="equipment-type">{{ item.type }}</div>
<p class="equipment-description">{{ item.description }}</p>
<div class="equipment-stats">
<span class="quantity">数量: {{ item.quantity }}</span>
<el-tag
:type="item.isEquipped ? 'success' : 'info'"
class="status-tag"
effect="dark"
>
{{ item.isEquipped ? "已装备" : "未装备" }}
</el-tag>
</div>
<el-button
type="primary"
class="equip-button"
:class="{ 'is-equipped': item.isEquipped }"
@click="handleEquip(item.id, item.quantity)"
:disabled="item.isEquipped || item.quantity <= 0"
>
{{
item.isEquipped
? "已装备"
: item.quantity <= 0
? "数量不足"
: "装备"
}}
</el-button>
</div>
</div>
</div>
<div class="back-button">
<el-button @click="$router.push({ name: 'Home' })" size="small" type="">返回首页</el-button>
</div>
<div class="equipments-page">
<h1>查看装备</h1>
<el-table :data="equipmentList" style="width: 100%">
<el-table-column prop="id" label="ID" width="80" />
<el-table-column prop="name" label="名称" />
<el-table-column prop="type" label="类型" width="150" />
<el-table-column prop="description" label="描述" />
<el-table-column prop="quantity" label="数量" width="150" />
<el-table-column label="是否已装备" width="120">
<template #default="scope">
<el-tag type="success" v-if="scope.row.isEquipped">已装备</el-tag>
<el-tag type="info" v-else>未装备</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" width="120">
<template #default="scope">
<el-button type="primary" size="small" @click="handleEquip(scope.row.id)" :disabled="scope.row.isEquipped">
装备
</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { ElMessage } from "element-plus";
import { getEquipments, equip } from "@/api/equipments/equipments";
import { ref, onMounted } from 'vue'
import { ElMessage } from 'element-plus'
import { getEquipments, equip } from '@/api/equipments/equipments'
// 数据列表
const equipmentList = ref([]);
const equipmentList = ref([])
// 初始化加载
onMounted(async () => {
const res = await getEquipments();
equipmentList.value = res || [];
});
const res = await getEquipments()
equipmentList.value = res || []
})
// 点击装备
const handleEquip = async (id, quantity) => {
try {
if (quantity <= 0) {
ElMessage.warning("装备数量不足，无法装备！");
return;
const handleEquip = async (id) => {
try {
await equip(id)
ElMessage.success('装备成功！')
// 重新加载数据
const res = await getEquipments()
equipmentList.value = res || []
} catch (err) {
ElMessage.error('装备失败！')
}
await equip(id);
ElMessage.success("装备成功！🎯");
// 重新加载数据
const res = await getEquipments();
equipmentList.value = res || [];
} catch (err) {
ElMessage.error("装备失败！");
}
};
}
</script>
<style scoped>
.equipments-page {
min-height: 100vh;
background: var(--bg-gradient-primary);
padding: 20px;
}
.content {
max-width: 1200px;
margin: 0 auto;
padding: 20px;
}
.title-container {
text-align: center;
margin-bottom: 40px;
}
.title {
font-size: 2.5rem;
font-weight: bold;
color: var(--text-primary);
margin-bottom: 10px;
text-shadow: var(--glow-primary);
}
.subtitle {
font-size: 1.2rem;
color: var(--text-secondary);
margin: 0;
text-shadow: var(--glow-secondary);
}
.equipment-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
.equipment-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 20px;
transition: all 0.3s ease;
transform-style: preserve-3d;
cursor: pointer;
}
.equipment-card:hover {
transform: translateY(-5px);
background: rgba(255, 255, 255, 0.15);
border-color: var(--primary-color);
box-shadow: 0 8px 32px rgba(var(--primary-rgb), 0.2);
}
.equipment-icon {
width: 60px;
height: 60px;
margin: 0 auto 15px;
padding: 12px;
background: rgba(var(--primary-rgb), 0.1);
border-radius: 50%;
color: var(--primary-color);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
}
.emoji-icon {
font-size: 32px;
line-height: 1;
}
.equipment-card:hover .equipment-icon {
transform: scale(1.1);
background: rgba(var(--primary-rgb), 0.2);
color: var(--primary-dark);
}
.equipment-info {
text-align: center;
}
.equipment-name {
font-size: 1.4rem;
font-weight: 600;
color: var(--text-primary);
margin: 0 0 8px;
}
.equipment-type {
font-size: 0.9rem;
color: var(--primary-color);
margin-bottom: 12px;
font-weight: 500;
}
.equipment-description {
font-size: 0.95rem;
color: var(--text-secondary);
margin: 0 0 15px;
line-height: 1.4;
}
.equipment-stats {
display: flex;
justify-content: center;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.quantity {
font-size: 0.9rem;
color: var(--text-secondary);
}
.status-tag {
font-size: 0.8rem;
}
.equip-button {
width: 100%;
border-radius: 12px;
transition: all 0.3s ease;
}
.equip-button.is-equipped {
background-color: var(--success-color);
border-color: var(--success-color);
opacity: 0.8;
cursor: not-allowed;
}
.back-button {
text-align: center;
margin-top: 20px;
}
@media (max-width: 768px) {
.title {
font-size: 2rem;
}
.subtitle {
font-size: 1rem;
}
.equipment-grid {
grid-template-columns: 1fr;
gap: 15px;
}
.equipment-card {
padding: 15px;
}
.equipment-name {
font-size: 1.2rem;
}
.equipment-description {
font-size: 0.9rem;
}
text-align: center;
}
</style>

401
src/pages/fishbaskets/Fishbaskets.vue
Unescape Escape View File

@ -1,176 +1,105 @@
<template>
<div class="fishbaskets-page">
<div class="content">
<div class="title-container">
<h1 class="title">🎣 我的鱼篓</h1>
<p class="subtitle">管理你的渔获</p>
</div>
<!-- 处理按钮 -->
<div class="action-buttons">
<el-button type="primary" @click="fetchFishList" icon="Refresh"
>刷新</el-button
>
<el-button type="success" @click="handleProcessFish" icon="Check"
>一键处理普通鱼</el-button
>
</div>
<el-tabs v-model="activeTab" type="card" class="custom-tabs">
<el-tab-pane label="所有鱼" name="all" />
<el-tab-pane label="普通鱼" name="ordinary" />
<el-tab-pane label="稀有鱼" name="rare" />
</el-tabs>
<el-table
:data="filteredFish"
class="custom-table"
height="calc(100vh - 300px)"
border
v-loading="loading"
element-loading-text="正在加载..."
element-loading-background="rgba(255, 255, 255, 0.1)"
>
<el-table-column prop="id" label="ID" align="center" width="100" />
<el-table-column prop="name" label="鱼名" align="center" width="200">
<template #default="{ row }">
<span class="fish-name">{{ row.name }}</span>
</template>
</el-table-column>
<el-table-column prop="weight" label="重量" align="right" width="150">
<template #default="{ row }">
<span class="fish-weight">{{ row.weight }}</span>
</template>
</el-table-column>
<el-table-column prop="description" label="描述">
<template #default="{ row }">
<span class="fish-description">{{ row.description }}</span>
</template>
</el-table-column>
<el-table-column label="稀有度" align="center" width="150">
<template #default="{ row }">
<el-tag
:type="row.isRare ? 'danger' : 'info'"
effect="dark"
class="rarity-tag"
>
{{ row.isRare ? "稀有" : "普通" }}
</el-tag>
</template>
</el-table-column>
<el-table-column label="操作" align="center" width="180">
<template #default="{ row }">
<div class="action-buttons">
<el-button
:loading="loading"
type="primary"
@click="handleFish(row.id)"
size="small"
>处理</el-button
>
<el-button
v-if="row.isRare"
type="danger"
@click="handleSell(row)"
size="small"
>出售</el-button
>
</div>
</template>
</el-table-column>
</el-table>
<!-- 空状态 -->
<el-empty
v-if="!filteredFish.length"
description="暂无渔获"
class="empty-state"
>
<template #image>
<span class="empty-icon">🎣</span>
</template>
</el-empty>
<div class="equipments-page">
<h1>🎣 我的鱼篓</h1>
<!-- 处理按钮 -->
<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">
<el-tab-pane label="所有鱼" name="all" />
<el-tab-pane label="普通鱼" name="ordinary" />
<el-tab-pane label="稀有鱼" name="rare" />
</el-tabs>
<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" />
<el-table-column prop="description" label="描述" />
<el-table-column label="稀有度" align="center" width="150">
<template #default="{ row }">
<el-tag :type="row.isRare ? 'danger' : 'info'">
{{ row.isRare ? '稀有' : '普通' }}
</el-tag>
</template>
</el-table-column>
<!-- 出售按钮 -->
<el-table-column label="操作" align="center" width="180">
<template #default="{ row }">
<el-button :loading="loading" type="primary" @click="handleFish(row.id)">处理</el-button>
<el-button v-if="row.isRare" type="danger" @click="handleSell(row)">出售</el-button>
</template>
</el-table-column>
</el-table>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, computed } from "vue";
import { useRouter } from "vue-router";
import {
myFishBaskets,
handleFishById,
sellFish,
autoHandleFish,
} from "@/api/fishbaskets/fishbaskets";
import { ElMessage, ElInput, ElMessageBox } from "element-plus";
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import { myFishBaskets, handleFishById, sellFish, autoHandleFish } from '@/api/fishbaskets/fishbaskets'
import { ElMessage, ElInput, ElMessageBox } from 'element-plus'
const loading = ref(false);
const activeTab = ref("all");
const fishList = ref([]);
const router = useRouter();
const loading = ref(false)
const activeTab = ref('all')
const fishList = ref([])
const router = useRouter()
const fetchFishList = async () => {
try {
loading.value = true;
const res = await myFishBaskets();
if (res) {
fishList.value = res;
try {
const res = await myFishBaskets()
if (res) {
fishList.value = res;
}
} catch (err) {
ElMessage.warning('请检查网络或重试')
}
} catch (err) {
ElMessage.warning("请检查网络或重试 🌐");
} finally {
loading.value = false;
}
};
}
// 根据选中的标签筛选数据
const filteredFish = computed(() => {
switch (activeTab.value) {
case "all":
return fishList.value;
case "ordinary":
return fishList.value.filter((f) => !f.isRare);
case "rare":
return fishList.value.filter((f) => f.isRare);
default:
return [];
}
});
switch (activeTab.value) {
case 'all':
return fishList.value;
case 'ordinary':
return fishList.value.filter(f => !f.isRare);
case 'rare':
return fishList.value.filter(f => f.isRare);
}
})
// 一键处理鱼的接口调用
const handleProcessFish = async () => {
try {
loading.value = true;
const res = await autoHandleFish();
if (res) {
ElMessage.success(res + " 🎉");
await fetchFishList();
try {
const res = await autoHandleFish()
if (res) {
ElMessage.success(res)
fetchFishList()
}
} catch (err) {
console.log('====================================');
console.log(err);
console.log('====================================');
ElMessage.warning('处理失败，请稍后再试')
}
} catch (err) {
ElMessage.warning("处理失败，请稍后再试 ⏳");
} finally {
loading.value = false;
}
};
}
// 手动处理鱼
const handleFish = async (fishId) => {
loading.value = true
try {
const res = await handleFishById(fishId)
if (res.success) {
ElMessage.success(res.message + ' 🎉')
if (res) {
ElMessage.success(res)
fetchFishList()
}
else{
ElMessage.error(res.message + ' 😢')
}
} catch (err) {
console.log('====================================');
console.log(err);
console.log('====================================');
ElMessage.warning('处理失败，请稍后再试 ⏳')
ElMessage.warning('处理失败，请稍后再试')
}
finally {
loading.value = false
@ -179,171 +108,41 @@ const handleFish = async (fishId) => {
// 处理出售操作
const handleSell = async (fish) => {
try {
const { value: price } = await ElMessageBox.prompt(
"请输入出售价格",
`出售鱼 (${fish.name})`,
{
confirmButtonText: "确认",
cancelButtonText: "取消",
const { value: price } = await ElMessageBox.prompt('请输入出售价格', `出售鱼 （${fish.name}）`, {
confirmButtonText: '确认',
cancelButtonText: '取消',
inputPattern: /^\d+(\.\d{1,2})?$/,
inputErrorMessage: "请输入合法的价格",
}
);
inputErrorMessage: '请输入合法的价格'
})
if (price) {
const res = await sellFish({ FishBagId: fish.id, Points: price });
if (res.success) {
ElMessage.success(res.message + " 🎉");
await fetchFishList();
} else {
ElMessage.error("出售失败 " + res.message + " 😢");
}
}
} catch (err) {
if (err !== "cancel") {
ElMessage.error("出售失败，请稍后再试 🛒");
try {
const res = await sellFish({ FishBagId: fish.id, Points: price })
if (res.success) {
ElMessage.success(res.message)
fetchFishList()
} else {
ElMessage.error('出售失败 ' + res.message);
}
} catch (err) {
ElMessage.error('出售失败，请稍后再试')
}
}
}
};
}
onMounted(() => {
fetchFishList();
});
fetchFishList()
})
</script>
<style scoped>
.fishbaskets-page {
min-height: 100vh;
background: var(--bg-gradient-primary);
padding: 20px;
.equipments-page {
text-align: center;
margin-top: 50px;
}
.content {
max-width: 1200px;
margin: 0 auto;
padding: 15px;
}
.title-container {
text-align: center;
margin-bottom: 20px;
}
.title {
font-size: 2.5rem;
font-weight: bold;
color: var(--text-primary);
margin-bottom: 10px;
text-shadow: var(--glow-primary);
}
.subtitle {
font-size: 1.2rem;
color: var(--text-secondary);
margin: 0;
text-shadow: var(--glow-secondary);
}
.action-buttons {
display: flex;
justify-content: flex-end;
gap: 10px;
margin-bottom: 20px;
}
.custom-tabs {
margin-bottom: 20px;
:deep(.el-tabs__header) {
margin-bottom: 20px;
border-bottom: none;
}
:deep(.el-tabs__nav) {
border: none;
}
:deep(.el-tabs__item) {
color: var(--text-secondary);
&.is-active {
color: var(--primary-color);
}
}
}
.custom-table {
height: calc(100vh - 250px);
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 12px;
overflow: hidden;
transition: all 0.3s ease;
:deep(.el-table__header-wrapper) {
th {
background-color: rgba(var(--primary-rgb), 0.1);
color: var(--text-primary);
font-weight: 600;
}
}
:deep(.el-table__body-wrapper) {
td {
background-color: transparent;
color: var(--text-secondary);
}
}
:deep(.el-table__row) {
transition: all 0.3s ease;
&:hover {
background-color: rgba(255, 255, 255, 0.05);
}
}
}
.fish-name {
font-weight: 600;
color: var(--text-primary);
}
.fish-weight {
color: var(--primary-color);
font-family: monospace;
}
.fish-description {
color: var(--text-secondary);
font-size: 0.9rem;
}
.rarity-tag {
font-size: 0.8rem;
padding: 4px 8px;
}
.empty-state {
margin-top: 40px;
.empty-icon {
font-size: 48px;
}
}
@media (max-width: 768px) {
.title {
font-size: 2rem;
}
.subtitle {
font-size: 1rem;
}
.action-buttons {
flex-direction: column;
}
.custom-table {
:deep(.el-table__body-wrapper) {
overflow-x: auto;
}
}
.result {
margin-top: 20px;
font-size: 16px;
}
</style>

382
src/pages/fishing/Fishing.vue
Unescape Escape View File

@ -1,376 +1,68 @@
<template>
<div class="fishing-page">
<div class="fishing-container">
<div class="fishing-area">
<div class="fishing-animation" :class="{
'fishing-active': isFishing,
reeling: isReeling,
}">
<div class="fishing-scene" @click="handleFish"></div>
<div class="ripple"></div>
</div>
<div class="result" v-if="resultMessage || nextPullTime">
<el-alert v-if="resultMessage" :title="resultMessage" :type="currentCatch.length > 0 ? 'success' : 'info'"
:closable="false" show-icon />
<el-alert v-if="nextPullTime" :title="`下次可钓鱼时间：${nextPullTime}`" type="warning" :closable="false" show-icon />
</div>
</div>
<div class="log-area">
<FishingLog :logs="fishingLogs" />
<div class="back-button">
<el-button @click="goHome" size="small" type="">返回首页</el-button>
</div>
<div class="equipments-page">
<h1>钓鱼</h1>
<div style="margin-top: 200px;">
<el-button type="primary" @click="handleFish">开始钓鱼</el-button>
<el-button @click="goHome" style="margin-left: 10px">返回</el-button>
<div class="result">
<p v-if="resultMessage">{{ resultMessage }}</p>
<p v-if="nextPullTime">下次可钓鱼时间：{{ nextPullTime }}</p>
</div>
</div>
</div>
</template>
<script setup>
import { ref, onMounted, onBeforeUnmount } from "vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { fishingClick } from "@/api/fishing/fishing";
import FishingLog from "@/components/FishingLog.vue";
const router = useRouter();
const resultMessage = ref("");
const nextPullTime = ref("");
const isFishing = ref(false);
const currentCatch = ref([]); // 改为数组
const fishingLogs = ref([]);
const isWaiting = ref(false);
const isReeling = ref(false);
const fishEscapeTimer = ref(null);
// 从localStorage加载缓存的钓鱼日志
const loadCachedLogs = () => {
const cachedLogs = localStorage.getItem("fishingLogs");
if (cachedLogs) {
fishingLogs.value = JSON.parse(cachedLogs);
}
};
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { fishingClick } from '@/api/fishing/fishing'
// 保存钓鱼日志到localStorage
const saveLogs = () => {
localStorage.setItem("fishingLogs", JSON.stringify(fishingLogs.value));
};
// 生成随机等待时间（1-3秒）
const generateWaitTime = () => {
return Math.floor(Math.random() * 2000) + 1000;
};
// 生成随机逃跑概率（10%）
const willFishEscape = () => {
return Math.random() < 0.1;
};
// 生成随机提竿失败概率（20%）
const willReelFail = () => {
return Math.random() < 0.2;
};
// 组件挂载时加载缓存的日志
onMounted(() => {
loadCachedLogs();
});
// 组件卸载时清除定时器
onBeforeUnmount(() => {
if (fishEscapeTimer.value) {
clearTimeout(fishEscapeTimer.value);
}
});
const router = useRouter()
const resultMessage = ref('')
const nextPullTime = ref('')
const handleFish = async () => {
// 下杆前校验：如果设置了下次钓鱼时间，则判断当前时间是否在等待中
if (nextPullTime.value) {
// 尝试将 nextPullTime 转换为 Date 对象
const nextTime = new Date(nextPullTime.value);
if (Date.now() < nextTime.getTime()) {
ElMessage.warning(
`还未到下杆时间，请在 ${nextTime.toLocaleTimeString()} 后尝试`
);
return;
}
}
// 如果正在钓鱼且还处于等待上钩阶段，不允许操作
if (isFishing.value && !isWaiting.value) return;
// 第一阶段：开始钓鱼
if (!isWaiting.value) {
isFishing.value = true;
resultMessage.value = "放下鱼竿，等待不知好歹的🐟";
// 随机等待时间后判断是否有鱼上钩
setTimeout(() => {
if (willFishEscape()) {
resultMessage.value = "鱼儿警觉地游走了... 🐟";
isFishing.value = false;
return;
}
isWaiting.value = true;
resultMessage.value = "鱼儿上钩啦！速速收杆！速速速速速速";
isReeling.value = true;
// 设置逃跑计时器
fishEscapeTimer.value = setTimeout(() => {
if (isWaiting.value && isFishing.value) {
isWaiting.value = false;
isFishing.value = false;
resultMessage.value = "鱼儿挣脱逃走了！";
}
}, 5000); // 5秒内必须完成提竿
}, generateWaitTime());
return;
}
// 清除逃跑计时器
if (fishEscapeTimer.value) {
clearTimeout(fishEscapeTimer.value);
fishEscapeTimer.value = null;
}
// 第二阶段：达到目标点击次数，判断是否提竿成功
isWaiting.value = false;
isReeling.value = false;
if (willReelFail()) {
isFishing.value = false;
resultMessage.value = "提竿时机不对，鱼儿溜走了！";
return;
}
// 调用钓鱼接口
currentCatch.value = [];
resultMessage.value = "正在钓鱼中...";
try {
const res = await fishingClick();
if (res.success && res.data) {
const items = res.data.items || [];
if (res.data.nextPullTime) {
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
}
const res = await fishingClick()
if (res.success) {
const items = res.data.items
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString()
if (items.length > 0) {
currentCatch.value = items;
// 构建展示信息
const messageList = items.map(
(fish) =>
`「${fish.isRare ? "稀有的" : ""}${fish.fishName}」，重量 ${fish.weight
}`
);
resultMessage.value = `你钓到了：\n${messageList.join("\n")}`;
// 根据钓到的鱼的数量显示不同的消息和动画效果
if (items.length > 1) {
ElMessage({
message: `太棒了！一次钓到${items.length}条鱼！🎣✨`,
type: "success",
duration: 5000,
showClose: true,
customClass: "multi-catch-message",
});
// 添加额外的动画类
document
.querySelector(".fishing-animation")
.classList.add("multi-catch");
setTimeout(() => {
document
.querySelector(".fishing-animation")
.classList.remove("multi-catch");
}, 3000);
} else {
ElMessage.success("钓鱼成功！🎣");
}
// 添加所有钓到的鱼到日志
const newLogs = items.map((fish) => ({
time: new Date(),
fishName: fish.fishName,
weight: fish.weight,
isRare: fish.isRare,
}));
fishingLogs.value.unshift(...newLogs);
saveLogs();
const fish = items[0]
resultMessage.value = `你钓到了一条${fish.isRare ? '稀有的' : ''}「${fish.fishName}」，重量 ${fish.weight}`
ElMessage.success('钓鱼成功！')
} else {
resultMessage.value = "什么也没钓到，下次好运 🍀";
ElMessage.warning("什么也没钓到，下次好运 🍀");
resultMessage.value = '什么也没钓到，下次好运 🍀'
ElMessage.warning('什么也没钓到，下次好运 🍀')
}
} else {
resultMessage.value = res.message || "钓鱼失败";
if (res.data?.nextPullTime) {
nextPullTime.value = new Date(res.data.nextPullTime).toLocaleString();
}
ElMessage.error(res.message || "钓鱼失败 🎣");
nextPullTime.value = res.message
resultMessage.value = ''
ElMessage.error(res.message || '钓鱼失败')
}
} catch (err) {
resultMessage.value = "钓鱼出错，请稍后重试";
ElMessage.error("钓鱼出错，请稍后重试 🌊");
console.error(err);
} finally {
isFishing.value = false;
ElMessage.error('钓鱼出错，请稍后重试')
console.error(err)
}
};
}
const goHome = () => {
router.push("/");
};
router.push('/')
}
</script>
<style scoped>
.fishing-page {
padding: 20px;
}
.fishing-container {
display: grid;
grid-template-columns: 1fr 400px;
gap: 20px;
max-width: 1200px;
margin: 0 auto;
min-height: calc(100vh - 40px);
}
.back-button {
margin-top: 20px;
.equipments-page {
text-align: center;
}
.fishing-area {
text-align: center;
background: #fff;
padding: 20px;
border-radius: 8px;
box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
position: relative;
}
.fishing-animation {
height: 500px;
position: relative;
margin: 20px 0;
overflow: hidden;
border-radius: 8px;
background: #fff;
cursor: pointer;
}
.fishing-scene {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
background: url("@/assets/fishing-scene.svg") no-repeat center;
background-size: cover;
transition: transform 0.2s ease;
cursor: pointer;
}
.fishing-active .fishing-scene {
animation: scene-active 3s ease-in-out infinite;
}
.reeling .fishing-scene {
animation: reel 0.2s ease-in-out;
}
.ripple {
position: absolute;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.7);
border-radius: 50%;
left: 60%;
top: 70%;
transform: translate(-50%, -50%) scale(0);
opacity: 0;
}
.fishing-active .ripple {
animation: ripple 2s infinite;
margin-top: 50px;
}
.result {
margin-top: 20px;
}
@keyframes ripple {
0% {
transform: translate(-50%, -50%) scale(0);
opacity: 1;
}
100% {
transform: translate(-50%, -50%) scale(4);
opacity: 0;
}
}
@keyframes scene-active {
0%,
100% {
transform: scale(1) rotate(0deg);
filter: brightness(1);
}
25% {
transform: scale(1.05) rotate(-2deg);
filter: brightness(1.2);
}
75% {
transform: scale(1.05) rotate(2deg);
filter: brightness(1.2);
}
}
@keyframes reel {
0% {
transform: rotate(0deg) scale(1);
}
50% {
transform: rotate(-8deg) scale(1.1);
}
100% {
transform: rotate(0deg) scale(1);
}
}
/* 多条鱼时的特殊动画效果 */
@keyframes multi-catch {
0%,
100% {
transform: scale(1) rotate(0deg);
filter: brightness(1) contrast(1);
}
25% {
transform: scale(1.15) rotate(-5deg);
filter: brightness(1.3) contrast(1.1);
}
75% {
transform: scale(1.15) rotate(5deg);
filter: brightness(1.3) contrast(1.1);
}
}
.multi-catch {
animation: multi-catch 1s ease-in-out 3 !important;
}
.multi-catch-message {
font-size: 16px !important;
font-weight: bold !important;
background: linear-gradient(45deg, #4caf50, #2196f3) !important;
color: white !important;
}
.fishing-scene:active {
transform: scale(0.98);
}
.fishing-animation:not(.fishing-active) .fishing-scene:hover {
transform: scale(1.02);
font-size: 16px;
}
</style>

399
src/pages/login/Login.vue
Unescape Escape View File

@ -1,289 +1,190 @@
<template>
<div class="login-page">
<el-card class="login-card">
<h1 class="title">钓鱼大冒险</h1>
<!-- 登录表单 -->
<el-form
v-if="isLogin"
:model="form"
:rules="rules"
ref="formRef"
@submit.prevent="handleLogin"
label-width="90px"
>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item prop="Name" label="用户名">
<el-input
v-model="form.Name"
placeholder="请输入用户名"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item prop="Password" label="密码">
<el-input
v-model="form.Password"
type="password"
placeholder="请输入密码"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="">
<el-button type="primary" block native-type="submit"
>登录</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 注册表单 -->
<el-form
v-if="!isLogin"
:model="form"
:rules="rules"
ref="formRef"
@submit.prevent="handleRegister"
label-width="90px"
>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item prop="Name" label="用户名">
<el-input
v-model="form.Name"
placeholder="请输入用户名"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item prop="Email" label="邮箱">
<el-input
v-model="form.Email"
placeholder="请输入邮箱"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item prop="Password" label="密码">
<el-input
v-model="form.Password"
type="password"
placeholder="请输入密码"
></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="">
<el-button type="primary" block native-type="submit"
>注册</el-button
>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 切换按钮 -->
<div class="toggle-link">
<span v-if="isLogin">没有账号？</span>
<span v-if="!isLogin">已经有账号？</span>
<el-button type="text" @click="toggleForm">{{
isLogin ? "注册" : "登录"
}}</el-button>
</div>
</el-card>
</div>
<div class="login-page">
<el-card class="login-card">
<h1 class="title">钓鱼大冒险</h1>
<!-- 登录表单 -->
<el-form v-if="isLogin" :model="form" :rules="rules" ref="formRef" @submit.prevent="handleLogin" label-width="90px">
<el-row :gutter="24">
<el-col :span="24">
<el-form-item prop="Name" label="用户名">
<el-input v-model="form.Name" placeholder="请输入用户名"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item prop="Password" label="密码">
<el-input v-model="form.Password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="">
<el-button type="primary" block native-type="submit">登录</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 注册表单 -->
<el-form v-if="!isLogin" :model="form" :rules="rules" ref="formRef" @submit.prevent="handleRegister" label-width="90px">
<el-row :gutter="24">
<el-col :span="24">
<el-form-item prop="Name" label="用户名">
<el-input v-model="form.Name" placeholder="请输入用户名"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item prop="Password" label="密码">
<el-input v-model="form.Password" type="password" placeholder="请输入密码"></el-input>
</el-form-item>
</el-col>
</el-row>
<el-row :gutter="24">
<el-col :span="24">
<el-form-item label="">
<el-button type="primary" block native-type="submit">注册</el-button>
</el-form-item>
</el-col>
</el-row>
</el-form>
<!-- 切换按钮 -->
<div class="toggle-link">
<span v-if="isLogin">没有账号？</span>
<span v-if="!isLogin">已经有账号？</span>
<el-button type="text" @click="toggleForm">{{ isLogin ? '注册' : '登录' }}</el-button>
</div>
</el-card>
</div>
</template>
<script setup>
import { ref } from "vue";
import { login, register } from "@/api/login/login"; // 假设你有注册接口
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import { ref } from 'vue'
import { login, register } from '@/api/login/login' // 假设你有注册接口
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter();
const router = useRouter()
const formRef = ref(null);
const formRef = ref(null)
const form = ref({
Name: "",
Password: "",
});
Name: '',
Password: ''
})
const isLogin = ref(true); // 控制当前显示的是登录还是注册表单
const isLogin = ref(true) // 控制当前显示的是登录还是注册表单
const rules = {
Password: [{ required: true, message: "请输入密码", trigger: "blur" }],
Name: [{ required: true, message: "请输入用户名", trigger: "blur" }],
};
async function handleLogin() {
await formRef.value.validate(async (valid) => {
if (valid) {
try {
const res = await login({
Name: form.value.Name,
Password: form.value.Password,
});
if (res && res.token) {
localStorage.setItem("token", res.token);
router.push("/");
Password: [
{ required: true, message: '请输入密码', trigger: 'blur' }
],
Name: [
{ required: true, message: '请输入用户名', trigger: 'blur' }
]
}
async function handleLogin () {
await formRef.value.validate(async (valid) => {
if (valid) {
try {
const res = await login({
Name: form.value.Name,
Password: form.value.Password
})
if (res && res.token) {
localStorage.setItem('token', res.token)
router.push('/')
} else {
ElMessage.error('登录失败，未返回token')
}
} catch (err) {
ElMessage.error('登录失败，请检查网络或重试')
console.error('登录错误:', err)
}
} else {
ElMessage.error("登录失败，未返回token 🔑");
ElMessage.warning('请完整填写表单')
}
} catch (err) {
//ElMessage.error('登录失败，请检查网络或重试')
console.error("登录错误:", err);
}
} else {
ElMessage.warning("请完整填写表单");
}
});
}
async function handleRegister() {
await formRef.value.validate(async (valid) => {
if (valid) {
try {
const res = await register({
Name: form.value.Name,
Email: form.value.Email,
Password: form.value.Password,
});
if (res) {
ElMessage.success("注册成功 😀😀");
toggleForm(); // 注册成功后切换到登录表单
})
}
async function handleRegister () {
await formRef.value.validate(async (valid) => {
if (valid) {
try {
const res = await register({
Name: form.value.Name,
Password: form.value.Password
})
if (res) {
ElMessage.success('注册成功')
} else {
ElMessage.error('注册失败')
}
} catch (err) {
ElMessage.error('注册失败，请检查网络或重试')
console.error('注册失败:', err)
}
} else {
ElMessage.error("注册失败 😢😢");
ElMessage.warning('请完整填写表单')
}
} catch (err) {
ElMessage.error("注册失败，请检查网络或重试 📶");
console.error("注册失败:", err);
}
} else {
ElMessage.warning("请完整填写表单");
}
});
})
}
function toggleForm() {
isLogin.value = !isLogin.value; // 切换登录和注册表单
form.value = {
Name: "",
Password: "",
};
formRef.value?.resetFields(); // 重置表单验证状态
function toggleForm () {
isLogin.value = !isLogin.value // 切换登录和注册表单
}
</script>
<style scoped>
.login-page {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: var(--bg-gradient-secondary);
margin: 0;
padding: 20px;
box-sizing: border-box;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background-color: #f5f5f5;
}
.login-card {
width: 100%;
max-width: 420px;
background: var(--bg-card);
border: 1px solid var(--border-color);
border-radius: 12px;
box-shadow: var(--shadow-lg);
backdrop-filter: blur(10px);
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.login-card:hover {
transform: translateY(-5px);
/* box-shadow: var(--shadow-lg), var(--glow-secondary); */
width: 500px;
padding: 20px;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
.title {
text-align: center;
color: var(--text-primary);
font-size: 2em;
margin-bottom: 1.5em;
text-shadow: var(--glow-secondary);
text-align: center;
margin-bottom: 30px;
font-size: 2rem;
color: #409eff;
font-weight: bold;
}
:deep(.el-input__wrapper) {
background: rgba(255, 255, 255, 0.1);
border: 1px solid var(--border-color);
transition: all 0.3s ease;
.el-input {
width: 100%;
}
:deep(.el-input__wrapper:hover) {
background: rgba(255, 255, 255, 0.25);
border-color: var(--primary-color);
box-shadow: 0 0 10px rgba(255, 255, 255, 0.2), var(--glow-secondary);
.el-button {
width: 100%;
}
:deep(.el-input__wrapper.is-focus) {
background: rgba(255, 255, 255, 0.3);
border-color: var(--primary-color);
box-shadow: 0 0 15px rgba(255, 255, 255, 0.3), var(--glow-primary);
}
:deep(.el-input__inner) {
color: var(--text-primary);
}
:deep(.el-input__inner::placeholder) {
color: var(--text-muted);
}
:deep(.el-form-item__label) {
color: var(--text-secondary);
}
:deep(.el-button--primary) {
background: var(--primary-dark);
border-color: var(--primary-dark);
height: 40px;
font-size: 16px;
transition: all 0.3s ease;
color: var(--text-primary);
}
:deep(.el-button--primary:hover) {
background: var(--primary-dark);
border-color: var(--primary-dark);
transform: translateY(-2px);
box-shadow: var(--glow-primary);
color: var(--text-white);
}
:deep(.el-button--text) {
color: var(--primary-color);
transition: all 0.3s ease;
.toggle-link {
margin-top: 15px;
text-align: center;
}
:deep(.el-button--text:hover) {
color: var(--primary-light);
text-shadow: var(--glow-secondary);
.toggle-link span {
margin-right: 5px;
}
.toggle-link {
text-align: center;
margin-top: 1em;
color: var(--text-secondary);
.toggle-link el-button {
padding: 0;
font-size: 14px;
}
</style>

395
src/pages/main/Home.vue
Unescape Escape View File

@ -1,326 +1,131 @@
<template>
<div class="home-page">
<!-- 粒子背景 -->
<Particles id="tsparticles" :options="particlesOptions" />
<!-- 页面内容 -->
<div class="content">
<div class="title-container">
<h1 class="title">欢迎来到钓鱼大冒险</h1>
<p class="subtitle">开启你的海洋探索之旅</p>
</div>
<div class="menu-grid">
<div
v-for="item in menuItems"
:key="item.name"
class="menu-item"
@click="navigateTo(item.route)"
>
<div class="menu-card">
<div class="menu-icon" v-html="item.icon"></div>
<h3 class="menu-title">{{ item.label }}</h3>
<p class="menu-description">{{ item.description }}</p>
</div>
<div class="home-page">
<!-- 粒子背景 -->
<Particles id="tsparticles" :options="particlesOptions" />
<!-- 页面内容 -->
<div class="content">
<h1 class="title">欢迎来到钓鱼大冒险</h1>
<el-card class="menu-card">
<el-row :gutter="20" justify="center">
<el-col :span="8" v-for="item in menuItems" :key="item.name">
<el-button type="primary" size="large" class="menu-btn" @click="navigateTo(item.route)" plain>
{{ item.label }}
</el-button>
</el-col>
</el-row>
</el-card>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { useRouter } from "vue-router";
import { useRouter } from 'vue-router'
const router = useRouter();
const router = useRouter()
const menuItems = [
{
label: "查看装备",
route: "equipments",
icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M20 7h-5V4c0-1.1-.9-2-2-2h-2C9.9 2 9 2.9 9 4v3H4c-1.1 0-2 .9-2 2v11c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V9c0-1.1-.9-2-2-2zM9 12c.83 0 1.5.67 1.5 1.5S9.83 15 9 15s-1.5-.67-1.5-1.5S8.17 12 9 12zm6 6H9v-.75c0-1 2-1.5 3-1.5s3 .5 3 1.5V18z"/></svg>`,
description: "管理你的钓鱼装备和道具",
},
{
label: "拉竿钓鱼",
route: "fishing",
icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M12 12.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5zm0 4a1.5 1.5 0 1 1 0-3 1.5 1.5 0 0 1 0 3zm1-7.5V5.7c3.4-.4 6-3.2 6-6.7h-2c0 2.8-2.2 5-5 5S7 1.8 7 -1H5c0 3.5 2.6 6.3 6 6.7V9H9v2h6V9h-2z"/></svg>`,
description: "开始一场精彩的钓鱼冒险",
},
{
label: "查看鱼篓",
route: "fishbaskets",
icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M18.5 11c.17 0 .34.01.5.03V7c0-1.1-.9-2-2-2h-1V3c0-.55-.45-1-1-1h-6c-.55 0-1 .45-1 1v2H7c-1.1 0-2 .9-2 2v4.03c.16-.02.33-.03.5-.03.83 0 1.58.34 2.12.88.54-.54 1.29-.88 2.12-.88.83 0 1.58.34 2.12.88.54-.54 1.29-.88 2.12-.88M9 4h6v1H9zm10 16H5c-.55 0-1-.45-1-1v-8.51c.42-.34.75-.77.93-1.27.18-.5.19-1.03.03-1.53-.22-.67-.74-1.19-1.41-1.41-.21-.07-.43-.11-.65-.13V7c0-.55.45-1 1-1h1v2c0 .55.45 1 1 1h8c.55 0 1-.45 1-1V6h1c.55 0 1 .45 1 1v.14c-.22.02-.44.06-.65.13-.67.22-1.19.74-1.41 1.41-.16.5-.15 1.03.03 1.53.18.5.51.93.93 1.27V19c0 .55-.45 1-1 1z"/></svg>`,
description: "查看你的渔获和战利品",
},
{
label: "道具商店",
route: "shop",
icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M7 18c-1.1 0-1.99.9-1.99 2S5.9 22 7 22s2-.9 2-2-.9-2-2-2zM1 2v2h2l3.6 7.59-1.35 2.45c-.16.28-.25.61-.25.96 0 1.1.9 2 2 2h12v-2H7.42c-.14 0-.25-.11-.25-.25l.03-.12.9-1.63h7.45c.75 0 1.41-.41 1.75-1.03l3.58-6.49c.08-.14.12-.31.12-.48 0-.55-.45-1-1-1H5.21l-.94-2H1zm16 16c-1.1 0-1.99.9-1.99 2s.89 2 1.99 2 2-.9 2-2-.9-2-2-2z"/></svg>`,
description: "购买钓鱼装备和特殊道具",
},
{
label: "市场信息",
route: "market",
icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M3.5 18.49l6-6.01 4 4L22 6.92l-1.41-1.41-7.09 7.97-4-4L2 16.99z"/></svg>`,
description: "了解最新的市场行情和价格",
},
{
label: "游戏排名",
route: "ranking",
icon: `<svg viewBox="0 0 24 24" width="32" height="32"><path fill="currentColor" d="M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM7 10.82C5.84 10.4 5 9.3 5 8V7h2v3.82zM19 8c0 1.3-.84 2.4-2 2.82V7h2v1z"/></svg>`,
description: "查看玩家排行榜和成就",
},
];
{ label: '🎒 查看装备', route: 'equipments' },
{ label: '🎣 拉竿钓鱼', route: 'fishing' },
{ label: '🐟 查看鱼篓', route: 'fishbaskets' },
{ label: '🛒 道具商店', route: 'shop' },
{ label: '💰 市场信息', route: 'market' },
{ label: '🏆 游戏排名', route: 'ranking' }
]
const navigateTo = (page) => {
router.push({ name: page });
};
router.push({ name: page })
}
const particlesOptions = {
background: {
color: { value: "transparent" },
},
particles: {
number: { value: 50, density: { enable: true, area: 800 } },
color: {
value: [
"var(--primary-color)",
"var(--primary-dark)",
"var(--text-primary)",
],
},
shape: { type: ["circle", "star"] },
opacity: {
value: 0.6,
random: true,
anim: {
enable: true,
speed: 0.3,
opacity_min: 0.2,
sync: false,
},
},
size: {
value: 4,
random: true,
anim: {
enable: true,
speed: 1,
size_min: 0.2,
sync: false,
},
background: {
color: { value: "#001f3f" }
},
move: {
enable: true,
speed: 1,
direction: "none",
random: true,
straight: false,
outModes: { default: "bounce" },
attract: {
enable: true,
rotateX: 600,
rotateY: 1200,
},
particles: {
number: { value: 40, density: { enable: true, area: 800 } },
color: { value: "#00d9ff" },
shape: { type: "circle" },
opacity: {
value: 0.7,
random: true,
anim: {
enable: true,
speed: 0.5,
opacity_min: 0.3,
sync: false
}
},
size: {
value: 6,
random: true,
anim: {
enable: true,
speed: 2,
size_min: 0.3,
sync: false
}
},
move: {
enable: true,
speed: 1.5,
direction: "top",
outModes: { default: "out" }
}
},
links: {
enable: true,
distance: 150,
color: "var(--primary-color)",
opacity: 0.2,
width: 1,
interactivity: {
events: {
onHover: { enable: true, mode: "bubble" },
resize: true
},
modes: {
bubble: {
distance: 150,
size: 12,
duration: 2,
opacity: 1,
speed: 3
}
}
},
},
interactivity: {
events: {
onHover: { enable: true, mode: ["grab", "bubble"] },
onClick: { enable: true, mode: "push" },
resize: true,
},
modes: {
grab: {
distance: 200,
links: { opacity: 0.8 },
},
bubble: {
distance: 200,
size: 6,
duration: 2,
opacity: 0.8,
speed: 3,
},
push: {
quantity: 4,
},
},
},
detectRetina: true,
};
detectRetina: true
}
</script>
<style scoped>
.home-page {
position: relative;
min-height: 100vh;
overflow: hidden;
background: var(--bg-gradient-primary);
display: flex;
align-items: center;
justify-content: center;
position: relative;
height: 100vh;
overflow: hidden;
}
#tsparticles {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 0;
}
.content {
position: relative;
z-index: 1;
width: 100%;
max-width: 1200px;
margin: 20px auto;
padding: 10px;
position: relative;
z-index: 1;
max-width: 800px;
margin: 60px auto;
text-align: center;
}
.title-container {
text-align: center;
margin-bottom: 60px;
}
.title {
font-size: 3rem;
font-weight: bold;
color: var(--text-primary);
margin-bottom: 15px;
text-shadow: var(--glow-primary);
animation: glow 2s ease-in-out infinite alternate;
}
.subtitle {
font-size: 1.5rem;
color: var(--text-secondary);
margin-top: -10px;
text-shadow: var(--glow-secondary);
font-size: 2.5rem;
font-weight: bold;
margin-bottom: 30px;
color: #ffffff;
}
.menu-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 12px;
padding: 8px;
max-width: 100%;
}
.menu-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(15px);
border-radius: 20px;
border: 1px solid rgba(255, 255, 255, 0.2);
padding: 20px 16px;
height: 100%;
min-height: 150px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform-style: preserve-3d;
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
cursor: pointer;
}
.menu-icon {
margin-bottom: 12px;
color: var(--primary-color);
transition: all 0.3s ease;
padding: 10px;
background: rgba(var(--primary-rgb), 0.1);
border-radius: 50%;
background-color: rgba(255, 255, 255, 0.85);
border-radius: 12px;
}
.menu-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 8px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.menu-description {
font-size: 0.9rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.4;
opacity: 0.9;
transition: opacity 0.3s ease;
}
.menu-card:hover {
transform: translateY(-8px);
background: rgba(255, 255, 255, 0.15);
border-color: var(--primary-color);
box-shadow: 0 12px 40px rgba(var(--primary-rgb), 0.2);
}
.menu-card:hover .menu-icon {
transform: scale(1.1);
color: var(--primary-dark);
background: rgba(var(--primary-rgb), 0.2);
}
.menu-title {
font-size: 1.4rem;
font-weight: 700;
color: var(--text-primary);
margin-bottom: 12px;
text-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
.menu-description {
font-size: 1rem;
color: var(--text-secondary);
margin: 0;
line-height: 1.5;
opacity: 0.9;
transition: opacity 0.3s ease;
}
.menu-card:hover .menu-description {
opacity: 1;
}
@media (max-width: 768px) {
.title {
font-size: 2rem;
}
.subtitle {
font-size: 1rem;
}
.menu-grid {
grid-template-columns: 1fr;
padding: 6px;
gap: 10px;
}
.menu-card {
min-height: 140px;
padding: 16px 10px;
}
.menu-title {
font-size: 1.2rem;
}
.menu-description {
font-size: 0.85rem;
}
.menu-btn {
width: 100%;
margin-bottom: 15px;
font-size: 16px;
}
</style>

442
src/pages/market/Market.vue
Unescape Escape View File

@ -1,356 +1,162 @@
<template>
<div class="market-page">
<div class="market-header">
<h1 class="title">🛒 京海鱼市交易中心</h1>
<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="卖家" width="200" />
<el-table-column prop="points" label="价格（点数）" width="150" align="right" />
<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="挂售价格" align="right" />
<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>
<div class="market-controls">
<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>
<div v-if="activeTab !== 'history'" class="search-filters">
<div class="search-box">
<el-input
v-model="searchQuery"
placeholder="搜索鱼类..."
prefix-icon="Search"
clearable
/>
</div>
<div class="sort-control">
<el-select v-model="sortBy" placeholder="排序方式">
<el-option label="价格从低到高" value="priceAsc" />
<el-option label="价格从高到低" value="priceDesc" />
</el-select>
</div>
</div>
</div>
<!-- 鱼市展示 -->
<div v-if="activeTab === 'all'" class="market-grid">
<el-empty v-if="filteredMarketList.length === 0" description="暂无商品" />
<el-card
v-for="item in filteredMarketList"
:key="item.id"
class="fish-card"
>
<div class="fish-icon">🐟</div>
<h3 class="fish-name">{{ item.fishName }}</h3>
<div class="seller-info">
<span class="seller-label">卖家：</span>
<span class="seller-name">{{ item.sellerName }}</span>
</div>
<div class="price-tag">
<span class="points-icon">💰</span>
<span class="points-value">{{ item.points }}</span>
</div>
<div class="card-action">
<el-button type="primary" @click="buyFish(item)">购买</el-button>
</div>
</el-card>
</div>
<!-- 我的市场 -->
<div v-if="activeTab === 'mine'" class="market-grid">
<el-empty
v-if="filteredMyMarketList.length === 0"
description="暂无挂售商品"
/>
<el-card
v-for="item in filteredMyMarketList"
:key="item.id"
class="fish-card my-listing"
>
<div class="fish-icon">🐟</div>
<h3 class="fish-name">{{ item.fishName }}</h3>
<div class="price-tag">
<span class="points-icon">💰</span>
<span class="points-value">{{ item.points }}</span>
</div>
<div class="card-action">
<el-button type="danger" @click="removeMyListing(item)"
>下架</el-button
>
</div>
</el-card>
</div>
<!-- 历史记录 -->
<el-card v-if="activeTab === 'history'" class="history-box">
<div v-if="historyList.length" class="history-list">
<div
v-for="(item, index) in historyList"
:key="index"
class="history-item"
>
{{ item }}
</div>
</div>
<el-empty v-else description="暂无交易记录" />
</el-card>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import {
getAllMarketplace,
getMyMarketplace,
getMarketplaceHistory,
buyFromMarketplace,
downMyFish,
} from "@/api/market/market";
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 searchQuery = ref("");
const sortBy = ref("priceAsc");
const activeTab = ref('all')
const marketList = ref([]);
const myMarketList = ref([]);
const historyList = ref([]);
// 过滤和排序市场列表
const filteredMarketList = computed(() => {
let filtered = marketList.value.filter((item) =>
item.fishName.toLowerCase().includes(searchQuery.value.toLowerCase())
);
return filtered.sort((a, b) => {
if (sortBy.value === "priceAsc") {
return a.points - b.points;
} else {
return b.points - a.points;
}
});
});
// 过滤我的市场列表
const filteredMyMarketList = computed(() => {
return myMarketList.value.filter((item) =>
item.fishName.toLowerCase().includes(searchQuery.value.toLowerCase())
);
});
const marketList = ref([])
const myMarketList = ref([])
const historyList = ref([])
// 切换标签
const handleTabChange = () => {
searchQuery.value = "";
if (activeTab.value === "all") {
fetchAllMarketplace();
} else if (activeTab.value === "mine") {
fetchMyMarketplace();
} else if (activeTab.value === "history") {
fetchHistory();
}
};
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("获取鱼市数据失败");
}
};
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("获取我的市场数据失败");
}
};
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("获取历史记录失败");
}
};
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("购买过程中出错");
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("操作失败");
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();
});
fetchAllMarketplace()
})
</script>
<style scoped>
.market-page {
padding: 20px;
min-height: 100vh;
background: var(--bg-gradient-primary);
}
.market-header {
margin-bottom: 30px;
}
.title {
font-size: 2.5rem;
color: var(--text-primary);
margin: 0;
text-shadow: var(--glow-primary);
}
.market-controls {
margin-bottom: 30px;
}
.search-filters {
display: flex;
gap: 20px;
margin-top: 20px;
}
.search-box {
flex: 1;
}
.market-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
padding: 20px 0;
}
.fish-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: none;
transition: all 0.3s ease;
&:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
}
.fish-icon {
font-size: 2.5rem;
text-align: center;
margin-bottom: 15px;
}
.fish-name {
color: var(--text-primary);
margin: 0 0 10px 0;
font-size: 1.2rem;
text-align: center;
}
.seller-info {
text-align: center;
margin-bottom: 15px;
color: var(--text-secondary);
}
.price-tag {
display: flex;
justify-content: center;
align-items: center;
gap: 5px;
margin-bottom: 15px;
}
.points-value {
color: var(--primary-color);
font-size: 1.2rem;
font-weight: bold;
}
.card-action {
text-align: center;
padding: 20px;
}
.history-box {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
}
.history-list {
display: flex;
flex-direction: column;
gap: 10px;
}
.history-item {
padding: 10px;
border-radius: 8px;
background: rgba(255, 255, 255, 0.05);
color: var(--text-secondary);
}
@media (max-width: 768px) {
.title {
font-size: 2rem;
}
.search-filters {
flex-direction: column;
}
.market-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
margin-top: 20px;
line-height: 1.8;
}
</style>

115
src/pages/ranking/Ranking.vue
Unescape Escape View File

@ -8,90 +8,81 @@
* @FilePath: \go_fish_web\src\pages\ranking\Ranking.vue
-->
<template>
<div class="ranking-page">
<h1>🏆 钓鱼排行榜</h1>
<div class="ranking-page">
<h1>🏆 钓鱼排行榜</h1>
<!-- 我的信息 -->
<el-card class="my-info-card" shadow="hover">
<template #header>🎣 我的钓鱼成绩</template>
<div class="my-info">
<p><strong>得分：</strong>{{ myScore?.score || "暂无得分" }}</p>
<p><strong>描述：</strong>{{ myScore?.description || "暂无描述" }}</p>
</div>
</el-card>
<!-- 我的信息 -->
<el-card class="my-info-card" shadow="hover">
<template #header>🎣 我的钓鱼成绩</template>
<div class="my-info">
<p><strong>得分：</strong>{{ myScore?.score }}</p>
<p><strong>描述：</strong>{{ myScore?.description }}</p>
</div>
</el-card>
<!-- 排名列表 -->
<el-table
v-if="rankings?.items?.length"
:data="rankings.items"
border
style="width: 100%; margin-top: 20px"
>
<el-table-column label="名次" width="80">
<template #default="{ $index }">
{{ $index + 1 }}
</template>
</el-table-column>
<el-table-column prop="name" label="玩家名称" />
<el-table-column prop="score" label="得分" width="120" />
<el-table-column prop="count" label="钓鱼数" width="120" />
<el-table-column label="最大鱼" min-width="250">
<template #default="{ row }">
{{ row.maxFishName }} - {{ row.maxWeight }}
</template>
</el-table-column>
</el-table>
<!-- 排名列表 -->
<el-table v-if="rankings?.items?.length" :data="rankings.items" border style="width: 100%; margin-top: 20px">
<el-table-column prop="rank" label="名次" width="80" />
<el-table-column prop="name" label="玩家名称" />
<el-table-column prop="score" label="得分" width="120" />
<el-table-column prop="count" label="钓鱼数" width="120" />
<el-table-column label="最大鱼" min-width="250">
<template #default="{ row }">
{{ row.maxFishName }} - {{ row.maxWeight }}
</template>
</el-table-column>
</el-table>
<el-empty v-else description="暂无排行榜数据" style="margin-top: 30px" />
</div>
<el-empty v-else description="暂无排行榜数据" style="margin-top: 30px" />
</div>
</template>
<script setup>
import { ref, onMounted } from "vue";
import { myRanking, globalRanking } from "@/api/ranking/ranking";
import { ElMessage } from "element-plus";
import { ref, onMounted } from 'vue'
import { myRanking, globalRanking } from '@/api/ranking/ranking'
import { ElMessage } from 'element-plus'
const rankings = ref(null);
const myScore = ref(null);
const rankings = ref(null)
const myScore = ref(null)
const fetchRankings = async () => {
try {
const res = await globalRanking();
rankings.value = res;
} catch (err) {
ElMessage.error("获取排行榜失败 🏆");
}
};
try {
const res = await globalRanking()
rankings.value = res
} catch (err) {
ElMessage.error('获取排行榜失败')
}
}
const fetchMyScore = async () => {
try {
const res = await myRanking();
myScore.value = res;
} catch (err) {
ElMessage.error("获取我的得分失败 📊");
}
};
try {
const res = await myRanking()
myScore.value = res
} catch (err) {
ElMessage.error('获取我的得分失败')
}
}
onMounted(() => {
document.title = "钓鱼排行榜";
fetchRankings();
fetchMyScore();
});
document.title = '钓鱼排行榜'
fetchRankings()
fetchMyScore()
})
</script>
<style scoped>
.ranking-page {
padding: 20px;
max-width: 900px;
margin: 0 auto;
padding: 20px;
max-width: 900px;
margin: 0 auto;
}
.my-info-card {
margin-bottom: 20px;
margin-bottom: 20px;
}
.my-info p {
margin: 8px 0;
font-size: 16px;
margin: 8px 0;
font-size: 16px;
}
</style>

340
src/pages/shop/Shop.vue
Unescape Escape View File

@ -1,301 +1,87 @@
<template>
<div class="shop-page">
<div class="shop-header">
<h1 class="title">🏪 商店</h1>
<div class="points-display">
<span class="points-icon">💰</span>
<span class="points-value">{{ points }}</span>
<span class="points-label">积分</span>
</div>
<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)">
购买
</el-button>
<el-button v-else type="warning" disabled>
积分不足
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div class="shop-controls">
<div class="search-box">
<el-input
v-model="searchQuery"
placeholder="搜索商品..."
prefix-icon="Search"
clearable
/>
</div>
<div class="category-tags">
<el-tag
:class="{ active: selectedCategory === 'all' }"
@click="selectedCategory = 'all'"
>全部</el-tag
>
<el-tag
v-for="category in categories"
:key="category"
:class="{ active: selectedCategory === category }"
@click="selectedCategory = category"
>{{ category }}</el-tag
>
</div>
</div>
<div class="items-grid">
<el-empty v-if="filteredItems.length === 0" description="暂无商品" />
<el-card
v-for="item in filteredItems"
:key="item.id"
class="item-card"
:class="{ 'insufficient-points': item.points > points }"
>
<div class="item-icon">
<span v-if="item.name.indexOf('竿') != -1" class="emoji-icon"
>🎣</span
>
<span v-else-if="item.name === '蚯蚓'" class="emoji-icon">🪱</span>
<span v-else-if="item.name === '积分'" class="emoji-icon">󠀻🏳</span>
<span v-else-if="item.name === '渔具箱'" class="emoji-icon">🧰</span>
<span v-else class="emoji-icon">📦</span>
</div>
<h3 class="item-name">{{ item.name }}</h3>
<p class="item-description">{{ item.description }}</p>
<div class="item-details">
<div class="points-cost">
<span class="points-icon">💰</span>
{{ item.points }}
</div>
<div class="owned-quantity">已拥有: {{ item.myQuantity }}</div>
</div>
<div class="item-action">
<el-button
type="primary"
:disabled="item.points > points"
@click="buyItem(item)"
>
{{ item.points <= points ? "购买" : "积分不足" }}
</el-button>
</div>
</el-card>
</div>
</div>
</template>
<script setup>
import { ref, computed, onMounted } from "vue";
import { whatCanIBuy, buy } from "@/api/shop/shop";
import {
ElButton,
ElCard,
ElTag,
ElInput,
ElMessage,
ElMessageBox,
ElEmpty,
} from "element-plus";
import { ref, onMounted } from 'vue'
import { whatCanIBuy, buy } from '@/api/shop/shop'
import { ElButton, ElTable, ElTableColumn, ElMessage, ElInput, ElMessageBox } from 'element-plus'
const points = ref(0);
const items = ref([]);
const searchQuery = ref("");
const selectedCategory = ref("all");
const points = ref(0) // 当前用户的积分
const items = ref([]) // 商店物品列表
// 模拟分类数据，实际应该从后端获取
const categories = ["装备", "道具", "特殊物品"];
// 过滤商品列表
const filteredItems = computed(() => {
return items.value.filter((item) => {
const matchesSearch =
item.name.toLowerCase().includes(searchQuery.value.toLowerCase()) ||
item.description.toLowerCase().includes(searchQuery.value.toLowerCase());
const matchesCategory =
selectedCategory.value === "all" ||
item.category === selectedCategory.value;
return matchesSearch && matchesCategory;
});
});
// 获取商店数据
// 获取当前用户的积分和商店商品信息
const fetchData = async () => {
try {
const pointsRes = await whatCanIBuy();
points.value = pointsRes.points;
items.value = pointsRes.items.map((item) => ({
...item,
category: categories[Math.floor(Math.random() * categories.length)], // 模拟分类数据
}));
} catch (err) {
ElMessage.error("加载数据失败，请重试 🛍️");
}
};
try {
const pointsRes = await whatCanIBuy()
points.value = pointsRes.points
items.value = pointsRes.items
} catch (err) {
ElMessage.error('加载数据失败，请重试')
}
}
// 购买操作
const buyItem = async (good) => {
const { value: count } = await ElMessageBox.prompt(
"请输入购买数量",
`购买 ${good.name}`,
{
confirmButtonText: "确认",
cancelButtonText: "取消",
inputPattern: /^(?:[1-9]\d{0,3}|10000)$/,
inputErrorMessage: "请输入 1 到 10000 之间的整数",
}
);
if (count) {
try {
const res = await buy({ EquipmentId: good.id, Quantity: count });
if (res) {
good.myQuantity += Number(count);
points.value -= good.points * count;
ElMessage.success("购买成功 🎉");
} else {
ElMessage.error(res.message + " 😞");
}
} catch (err) {
ElMessage.error("购买失败，请稍后再试 👿");
const { value: count } = await ElMessageBox.prompt('请输入购买数量', `物品名称 （${good.name}）`, {
confirmButtonText: '确认',
cancelButtonText: '取消',
inputPattern: /^(?:[1-9]\d{0,3}|10000)$/,
inputErrorMessage: '请输入 1 到 10000 之间的整数'
})
if (count) {
try {
const res = await await buy({ EquipmentId: good.id, Quantity: 1 })
if (res) {
good.myQuantity += 1
points.value -= good.points
ElMessage.success("购买成功")
} else {
ElMessage.error(res.message)
}
} catch (err) {
ElMessage.error('购买失败，请稍后再试')
}
}
}
};
}
// 页面加载时获取数据
onMounted(() => {
fetchData();
});
fetchData()
})
</script>
<style scoped>
.shop-page {
padding: 20px;
min-height: 100vh;
background: var(--bg-gradient-primary);
}
.shop-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 30px;
margin: 20px;
}
.title {
font-size: 2.5rem;
color: var(--text-primary);
margin: 0;
text-shadow: var(--glow-primary);
.el-table {
margin-top: 20px;
}
.points-display {
background: rgba(255, 255, 255, 0.1);
padding: 10px 20px;
border-radius: 12px;
backdrop-filter: blur(10px);
display: flex;
align-items: center;
gap: 8px;
}
.points-value {
font-size: 1.5rem;
color: var(--primary-color);
font-weight: bold;
}
.points-label {
color: var(--text-secondary);
}
.shop-controls {
margin-bottom: 30px;
}
.search-box {
margin-bottom: 20px;
}
.category-tags {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.el-tag {
cursor: pointer;
transition: all 0.3s ease;
&.active {
background-color: var(--primary-color);
color: white;
}
}
.items-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 20px;
padding: 20px 0;
}
.item-card {
background: rgba(255, 255, 255, 0.1);
backdrop-filter: blur(10px);
border: none;
transition: all 0.3s ease;
&:hover {
transform: translateY(-5px);
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
}
&.insufficient-points {
opacity: 0.7;
}
}
.item-icon {
font-size: 2.5rem;
text-align: center;
margin-bottom: 15px;
}
.item-name {
color: var(--text-primary);
margin: 0 0 10px 0;
font-size: 1.2rem;
text-align: center;
}
.item-description {
color: var(--text-secondary);
font-size: 0.9rem;
margin-bottom: 15px;
min-height: 40px;
}
.item-details {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
color: var(--text-secondary);
}
.points-cost {
display: flex;
align-items: center;
gap: 5px;
color: var(--primary-color);
font-weight: bold;
}
.item-action {
text-align: center;
}
@media (max-width: 768px) {
.shop-header {
flex-direction: column;
gap: 20px;
text-align: center;
}
.title {
font-size: 2rem;
}
.items-grid {
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
}
.el-button {
margin-top: 10px;
}
</style>

5
src/style.css
Unescape Escape View File

@ -24,9 +24,10 @@ a:hover {
body {
margin: 0;
display: flex;
place-items: center;
min-width: 320px;
height: 100vh;
overflow: hidden;
min-height: 100vh;
}
h1 {

35
src/styles/variables.css
Unescape Escape View File

@ -1,35 +0,0 @@
:root {
/* 主题色 */
--primary-color: #00d9ff;
--primary-light: #66b1ff;
--primary-dark: #0088cc;
/* 背景色 */
--bg-gradient-primary: linear-gradient(135deg, #001f3f 0%, #003366 100%);
--bg-gradient-secondary: linear-gradient(45deg, #0d47a1, #1976d2);
--bg-white: #ffffff;
--bg-light: #f5f7fa;
--bg-card: rgba(255, 255, 255, 0.1);
/* 文字颜色 */
--text-primary: #ffffff;
--text-secondary: rgba(255, 255, 255, 0.8);
--text-muted: rgba(255, 255, 255, 0.7);
--text-dark: #606266;
/* 边框和阴影 */
--border-color: rgba(255, 255, 255, 0.2);
--shadow-sm: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
--shadow-md: 0 4px 16px rgba(0, 0, 0, 0.06);
--shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.25);
/* 状态颜色 */
--success-color: #67c23a;
--warning-color: #e6a23c;
--danger-color: #f56c6c;
--info-color: #909399;
/* 特效 */
--glow-primary: 0 0 10px rgba(0, 217, 255, 0.5);
--glow-secondary: 0 0 5px rgba(0, 217, 255, 0.3);
}

94
src/utils/request.js
Unescape Escape View File

@ -7,106 +7,58 @@
* @LastEditTime: 2025-04-12 14:17:15
* @FilePath: \go_fish_web\src\utils\request.js
*/
import axios from "axios";
import { ElMessage } from "element-plus";
import router from "@/router";
import axios from 'axios'
import { ElMessage } from 'element-plus'
import router from '@/router'
let isRefreshing = false;
let requestQueue = [];
let isRefreshing = false
// 创建 axios 实例
// 清理登录状态的函数
export function clearLoginState() {
localStorage.removeItem("token");
localStorage.removeItem("fishingLogs");
}
const request = axios.create({
baseURL: "http://49.235.165.171:31001",
baseURL: 'http://49.235.165.171:31001',
timeout: 5000,
});
})
// 设置默认 Content-Type
request.defaults.headers["Content-Type"] = "application/json";
request.defaults.headers['Content-Type'] = 'application/json'
// 请求拦截器：添加 token
request.interceptors.request.use(
(config) => {
const token = localStorage.getItem("token");
const token = localStorage.getItem('token')
if (token) {
config.headers.Authorization = `Bearer ${token}`;
// 登录成功后重试队列中的请求
if (requestQueue.length > 0) {
requestQueue.forEach(({ resolve, config }) => {
resolve(request(config));
});
requestQueue = [];
}
config.headers.Authorization = `Bearer ${token}`
}
return config;
return config
},
(error) => Promise.reject(error)
);
)
// 响应拦截器
request.interceptors.response.use(
(response) => response.data,
(error) => {
console.dir(error);
const status = error.response?.status;
const config = error.config;
const status = error.response?.status
if (status === 400) {
// 处理400错误，解析并显示具体的验证错误信息
const errorData = error.response?.data;
if (errorData?.errors) {
// 收集所有错误信息
const errorMessages = [];
Object.entries(errorData.errors).forEach(([field, messages]) => {
if (Array.isArray(messages)) {
messages.forEach((msg) => errorMessages.push(msg));
}
});
// 显示合并后的错误信息
if (errorMessages.length > 0) {
ElMessage.error(errorMessages.join("\n"));
} else {
ElMessage.error("请求参数验证失败");
}
} else {
// 如果没有详细的错误信息，显示通用错误消息
ElMessage.error(errorData?.title || "请求参数错误");
}
return Promise.reject(error);
} else if (status === 401) {
if (status === 401) {
// 避免重复处理 401
if (!isRefreshing) {
isRefreshing = true;
ElMessage.warning("登录已过期，请重新登录");
clearLoginState();
// 清空请求队列
requestQueue = [];
router.push("/login");
isRefreshing = true
ElMessage.warning('登录已过期，请重新登录')
localStorage.removeItem('token')
router.push('/login')
// 重置标志位，避免死锁
setTimeout(() => {
isRefreshing = false;
}, 3000); // 避免多次跳转，给 3 秒冷却时间
isRefreshing = false
}, 3000) // 避免多次跳转，给 3 秒冷却时间
}
// 将请求加入队列
return new Promise((resolve) => {
requestQueue.push({
resolve,
config,
});
});
} else {
ElMessage.error(error.response?.data?.message || "请求失败，请稍后再试");
ElMessage.error(error.response?.data?.message || '请求失败，请稍后再试')
}
return Promise.reject(error);
return Promise.reject(error)
}
);
)
export default request;
export default request

Write Preview
Loading…
Cancel
Save