feat: 添加等级界面

Yi.Bbs.Vue3/src/apis/levelApi.js

@@ -0,0 +1,9 @@
+import request from "@/config/axios/service";
+
+export function getList(data) {
+  return request({
+    url: "/level",
+    method: "get",
+    params: data,
+  });
+}

Yi.Bbs.Vue3/src/layout/activity/components/ActivityNav.vue

@@ -4,20 +4,25 @@
         class="el-menu-vertical-demo"
         @open="handleOpen"
         @close="handleClose"
+        router
       >
-      <el-menu-item index="1">
+      <el-menu-item index="1"  :route="{path:'/activity/sign'}">
         <el-icon><Present /></el-icon>
           <span>每日签到</span>
         </el-menu-item>
-        <el-menu-item index="2">
+        <el-menu-item index="2" :route="{path:'/activity/level'}">
+          <el-icon><Ticket /></el-icon>
+          <span>等级</span>
+        </el-menu-item>
+        <el-menu-item index="3" :route="{path:'/activity/sign'}">
             <el-icon><Memo /></el-icon>
           <span>任务列表</span>
         </el-menu-item>
-        <el-menu-item index="3">
+        <el-menu-item index="4" :route="{path:'/activity/sign'}">
             <el-icon><HelpFilled /></el-icon>
           <span>大转盘</span>
         </el-menu-item>
-        <el-menu-item index="4">
+        <el-menu-item index="5" :route="{path:'/activity/sign'}">
             <el-icon><Sunrise /></el-icon>
           <span>娱乐城</span>
         </el-menu-item>

Yi.Bbs.Vue3/src/router/index.js

@@ -113,6 +113,15 @@ const router = createRouter({
             title: "每日签到",
           },
         },
+
+        {
+          name: "level",
+          path: "level",
+          component: () => import("../views/level/Index.vue"),
+          meta: {
+            title: "等级",
+          },
+        },
       ],
     },
     { path: "/:pathMatch(.*)*", name: "NotFound", component: NotFound },

Yi.Bbs.Vue3/src/views/level/Index.vue

@@ -0,0 +1,76 @@
+<template>
+    <div class="container">
+        <div class="top">
+        <h4>当前等级: 1-小白</h4>
+        <h4>当前钱钱: 100</h4>
+        <div class="title">
+            <div class="left">当前等级经验:</div>
+            <div class="right"> 
+                <el-progress  :percentage="50" :stroke-width="15" striped  striped-flow />
+                <div>1623/2000</div>
+            </div>
+        </div>
+      
+        </div>
+
+        <div class="bottom">
+            <el-input-number v-model="num" :min="1" :max="10000" />
+            
+            <el-button type="primary">升级</el-button>
+
+            <span>所需钱钱：50</span>
+        </div>
+
+
+        <el-table :data="levelData" border style="width: 100%"  >
+    <el-table-column prop="currentLevel" label="等级" width="80" align="center" />
+    <el-table-column prop="name" label="称号" width="180" align="center" />
+    <el-table-column prop="minExperience" label="所需经验"  width="180" align="center" />
+    <el-table-column prop="nick" label="其他"  align="center" />
+  </el-table>
+
+
+    </div>
+    
+</template>
+<script  setup>
+import {getList} from '@/apis/levelApi.js'
+import { ref,onMounted, reactive } from 'vue'
+
+const levelData =ref([]);
+const num=ref(1);
+
+const query=reactive({
+    skipCount:0,
+    maxResultCount:20
+})
+onMounted(async () => {
+   await loadLevelData();
+})
+
+const loadLevelData=  async () => {
+   const {data:{items}} = await getList(query);
+    levelData.value = items;
+}
+</script>
+<style lang="scss" scoped >
+.container{
+padding: 20px 20px;
+.title{
+    display: flex;
+    .left{
+        width: 15%;
+    }
+    .right{
+        width: 60%;
+    }
+}
+.bottom{
+    margin: 20px 0px;
+        .el-button{
+            margin-left: 10px;
+            margin-right: 10px;
+        }
+}
+}
+</style>>