feat: 登录界面完善，新增我的装备界面

2025-04-11 18:05:59 +08:00
parent 7b27f3baa5
commit 1911630efb
6 changed files with 254 additions and 53 deletions
@@ -10,6 +10,7 @@
  },
  "dependencies": {
    "axios": "^1.8.4",
+    "element-plus": "^2.9.7",
    "vue": "^3.5.13",
    "vue-router": "^4.5.0"
  },
@@ -0,0 +1,15 @@
+import request from '@/utils/request'
+
+/**
+ * 我的装备
+ */
+export function getEquipments () {
+    return request.get('/Fishing/my-equipment')
+}
+
+/**
+ * 装备道具
+ */
+export function equip (equipmentId) {
+    return request.put(`/Fishing/equip/${equipmentId}`)
+}
@@ -1,15 +1,11 @@
-/*
- * @Descripttion: 
- * @version: 1.0.0
- * @Author: LyMy
- * @Date: 2025-04-11 15:56:41
- * @LastEditors: LyMy
- * @LastEditTime: 2025-04-11 15:58:45
- * @FilePath: \fish_game\src\api\login\login.js
- */
 import request from '@/utils/request'

 // 登录接口
 export function login(data) {
  return request.post('/Account/login', data)
+}
+
+// 注册
+export function register(data) {
+  return request.post('/Account/register', data)
 }
@@ -1,5 +1,13 @@
 import { createApp } from 'vue'
 import App from './App.vue'
 import router from './router'
+import ElementPlus from 'element-plus'
+import 'element-plus/dist/index.css'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(ElementPlus)
+
+app.mount('#app')

-createApp(App).use(router).mount('#app')
@@ -1,15 +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">
-    <h1>查看装备</h1>
-    <p>这是装备页面的内容。</p>
-  </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>
 </template>

 <script setup>
+import { ref, onMounted } from 'vue'
+import { ElMessage } from 'element-plus'
+import { getEquipments, equip } from '@/api/equipments/equipments'
+
+// 数据列表
+const equipmentList = ref([])
+
+// 初始化加载
+onMounted(async () => {
+    const res = await getEquipments()
+    equipmentList.value = res || []
+})
+
+// 点击装备
+const handleEquip = async (id) => {
+    try {
+        await equip(id)
+        ElMessage.success('装备成功！')
+        // 重新加载数据
+        const res = await getEquipments()
+        equipmentList.value = res || []
+    } catch (err) {
+        ElMessage.error('装备失败！')
+    }
+}
 </script>

 <style scoped>
 .equipments-page {
-  text-align: center;
+    text-align: center;
 }
 </style>
@@ -1,62 +1,190 @@
-<!--
- * @Descripttion: 
- * @version: 1.0.0
- * @Author: LyMy
- * @Date: 2025-04-11 15:46:41
- * @LastEditors: LyMy
- * @LastEditTime: 2025-04-11 16:23:46
- * @FilePath: \fish_game\src\pages\login\Login.vue
-->
 <template>
    <div class="login-page">
-        <h1>登录</h1>
-        <form @submit.prevent="handleLogin">
-            <input v-model="Name" placeholder="用户名" />
-            <input v-model="Password" type="password" placeholder="密码" />
-            <button type="submit">登录</button>
-        </form>
+        <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 } from '@/api/login/login'
+import { login, register } from '@/api/login/login'  // 假设你有注册接口
 import { useRouter } from 'vue-router'
+import { ElMessage } from 'element-plus'

 const router = useRouter()
-const Name = ref('')
-const Password = ref('')
+
+const formRef = ref(null)
+
+const form = ref({
+    Name: '',
+    Password: ''
+})
+
+const isLogin = ref(true)  // 控制当前显示的是登录还是注册表单
+
+const rules = {
+    Password: [
+        { required: true, message: '请输入密码', trigger: 'blur' }
+    ],
+    Name: [
+        { required: true, message: '请输入用户名', trigger: 'blur' }
+    ]
+}

 async function handleLogin () {
-    try {
-        const res = await login({ Name: Name.value, Password: Password.value })
-        if (res && res.token) {
-            localStorage.setItem('token', res.token)
-            router.push('/')
+    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 {
-            alert('登录失败，未返回token')
+            ElMessage.warning('请完整填写表单')
        }
-    } catch (err) {
-        alert('登录失败，请检查网络或重试')
-        console.error('登录错误:', err)
-    }
+    })
+}
+
+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.warning('请完整填写表单')
+        }
+    })
+}
+
+function toggleForm () {
+    isLogin.value = !isLogin.value  // 切换登录和注册表单
 }
 </script>

-
 <style scoped>
 .login-page {
-    max-width: 400px;
-    margin: 100px auto;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-color: #f5f5f5;
+}
+
+.login-card {
+    width: 500px;
+    padding: 20px;
+    background-color: #ffffff;
+    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+}
+
+.title {
+    text-align: center;
+    margin-bottom: 30px;
+    font-size: 2rem;
+    color: #409eff;
+    font-weight: bold;
+}
+
+.el-input {
+    width: 100%;
+}
+
+.el-button {
+    width: 100%;
+}
+
+.toggle-link {
+    margin-top: 15px;
    text-align: center;
 }
-input {
-    display: block;
-    margin: 10px auto;
-    padding: 8px;
-    width: 80%;
+
+.toggle-link span {
+    margin-right: 5px;
 }
-button {
-    padding: 10px 20px;
+
+.toggle-link el-button {
+    padding: 0;
+    font-size: 14px;
 }
 </style>