From e3a99a619f6ed9311517c879f871fa9936492153 Mon Sep 17 00:00:00 2001
From: significative <163999932+significative@users.noreply.github.com>
Date: Wed, 25 Sep 2024 12:48:28 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A1=B9=E7=9B=AE=E5=90=8D=E7=A7=B0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=EF=BC=8C=E5=AF=B9=E6=8E=A5=E6=8E=A5=E5=8F=A3=EF=BC=8C?=
 =?UTF-8?q?=E9=A1=B5=E9=9D=A2=E4=BA=92=E5=8A=A8?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/api/person.ts                         |   9 +-
 src/permissions.ts                        |   9 +-
 src/router/module/constRouter/index.ts    |  10 ++
 src/views/competition/index.vue           |  73 +++++++--
 src/views/projectName/index.vue           | 174 ++++++++++++++++++++++
 src/views/registrationPersonage/index.vue |  22 ++-
 6 files changed, 273 insertions(+), 24 deletions(-)
 create mode 100644 src/views/projectName/index.vue

diff --git a/src/api/person.ts b/src/api/person.ts
index 7c42fa0..9abd9e8 100644
--- a/src/api/person.ts
+++ b/src/api/person.ts
@@ -9,7 +9,9 @@ request.interceptors.response.use(response => {
 enum api {
     liststu = '/abilityEvaluation/personalAbilityEvaluationCollect/liststu', // 个人能力评价列表
     integral = '/annualScore/personalCompTotalScore/liststu', // 个人积分列表
-    PAGE_XSFXBG = '/annualcompetitionprojectregistration/annualCompetitionProjectRegistration/xsfxbg',
+    PAGE_XSFXBG = '/annualcompetitionprojectregistration/annualCompetitionProjectRegistration/xsfxbg', // 个人能力报告
+    competition = '/AnnualCompPoint/annualCompPoint/findcompp', // 比赛项目列表
+    competitionOne = '/AnnualCompPoint/annualCompPoint/findcomppxq', // 比赛项目单个
 }
 export const getlEvaluateApi = (params: Record<'pageNo' | 'pageSize', number>) => request.get(api.liststu, { params });
 export const getlIntegralApi = (params: Record<'pageNo' | 'pageSize', number>) => request.get(api.integral, { params });
@@ -18,4 +20,7 @@ export const getXsfxbgApi = (params = {}) => {
     const par = { recreateFlag: false, annualid: '' };
     Object.assign(par, params);
     return request.get(api.PAGE_XSFXBG, { params: par });
-};
\ No newline at end of file
+};
+
+export const getCompetitionApi = (id: string) => request.get(api.competition, { params: { id } });
+export const getCompetitionOneApi = (id: string) => request.get(api.competitionOne, { params: { id } });
\ No newline at end of file
diff --git a/src/permissions.ts b/src/permissions.ts
index 28a22d8..6ae7270 100644
--- a/src/permissions.ts
+++ b/src/permissions.ts
@@ -4,6 +4,8 @@ import userStore from './store/module/user'
 router.beforeEach(async (to, form, next) => {
   const useuserStore = userStore()
 
+
+
   if (useuserStore.token) {
     if (to.path === '/login') {
       next({ path: '/' })
@@ -12,12 +14,13 @@ router.beforeEach(async (to, form, next) => {
         useuserStore.getUserInfo()
         next()
 
-      }else{
+      } else {
         next()
       }
     }
-  }else{
-    next()
+  } else {
+    if (to.path === '/registrationPersonage') next({ path: '/login' });
+    else next();
   }
 })
 export default router
diff --git a/src/router/module/constRouter/index.ts b/src/router/module/constRouter/index.ts
index a64940d..5f092e8 100644
--- a/src/router/module/constRouter/index.ts
+++ b/src/router/module/constRouter/index.ts
@@ -162,5 +162,15 @@ export const constRouter: any = {
         hidden: true,
       },
     },
+    {
+      path: '/projectName',
+      name: 'ProjectName',
+      component: () => import('@/views/projectName/index.vue'),
+      meta: {
+        icon: '',
+        title: '比赛项目名称',
+        hidden: true,
+      },
+    },
   ],
 }
diff --git a/src/views/competition/index.vue b/src/views/competition/index.vue
index 7d2afb9..2ef84f1 100644
--- a/src/views/competition/index.vue
+++ b/src/views/competition/index.vue
@@ -4,7 +4,7 @@
     <div class="banner">
         <img src="../../assets/images/banner2.png" alt="">
     </div>
-    <div class="competition">
+    <div class="competition" v-loading="loading">
         <!-- 简介 -->
         <div class="synopsis">
             <div class="name">年度比赛名称</div>
@@ -27,32 +27,35 @@
                 </div>
 
                 <div class="card-list">
-                    <template v-for="i in 16" :key="i">
-                        <div v-if="(i + 4) % 4 == 1" class="card" type="yellow">
-                            <div class="top">红色之旅赛道</div>
+                    <template v-for="o, i in dataList" :key="o.id">
+                        <div v-if="(i + 5) % 4 == 1" class="card" type="yellow">
+                            <div class="top" :title="o.objName">{{ o.objName }}</div>
                             <div class="bottom">
-                                <el-button class="btn">立即报名</el-button>
+                                <el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button>
                                 <el-link :underline="false" class="link">详情</el-link>
                             </div>
                         </div>
-                        <div v-if="(i + 4) % 4 == 2" class="card" type="purple">
-                            <div class="top">红色之旅赛道</div>
+
+                        <div v-else-if="(i + 5) % 4 == 2" class="card" type="purple">
+                            <div class="top" :title="o.objName">{{ o.objName }}</div>
                             <div class="bottom">
-                                <el-button class="btn">立即报名</el-button>
+                                <el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button>
                                 <el-link :underline="false" class="link">详情</el-link>
                             </div>
                         </div>
-                        <div v-if="(i + 4) % 4 == 3" class="card" type="cyan00">
-                            <div class="top">红色之旅赛道</div>
+
+                        <div v-else-if="(i + 5) % 4 == 3" class="card" type="cyan00">
+                            <div class="top" :title="o.objName">{{ o.objName }}</div>
                             <div class="bottom">
-                                <el-button class="btn">立即报名</el-button>
+                                <el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button>
                                 <el-link :underline="false" class="link">详情</el-link>
                             </div>
                         </div>
-                        <div v-if="(i + 4) % 4 == 0" class="card" type="orange">
-                            <div class="top">红色之旅赛道</div>
+
+                        <div v-else-if="(i + 5) % 4 == 0" class="card" type="orange">
+                            <div class="top" :title="o.objName">{{ o.objName }}</div>
                             <div class="bottom">
-                                <el-button class="btn">立即报名</el-button>
+                                <el-button class="btn" @click="goProjectName(o.id)">立即报名</el-button>
                                 <el-link :underline="false" class="link">详情</el-link>
                             </div>
                         </div>
@@ -87,7 +90,44 @@
     </div>
 </template>
 
-<script setup>
+<script lang="ts" setup>
+import { getCompetitionApi } from '@/api/person';
+import { ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { ElMessage, ElLoading } from 'element-plus';
+
+const route = useRoute();
+const router = useRouter();
+
+// loading
+const loading = ref(false);
+let loadingInstance: any;
+watch(loading, newVal => {
+    if (newVal) loadingInstance = ElLoading.service({ fullscreen: true });
+    else if (loadingInstance) loadingInstance.close();
+});
+
+// 数据列表
+const dataList = ref<any[]>([]);
+async function getList() {
+    try {
+        loading.value = true;
+        const res: any = await getCompetitionApi(route.query.id as string);
+        if (!res.result) return
+        dataList.value = res.result;
+    } catch (error) {
+        ElMessage.error('请求失败');
+    } finally {
+        loading.value = false;
+    }
+}
+
+getList();
+
+// 跳转项目名称
+function goProjectName(id: any) {
+    router.push(`/projectName?id=${id}`)
+}
 </script>
 
 <style lang="scss" scoped>
@@ -198,6 +238,9 @@
                         font-family: Microsoft YaHei UI, Microsoft YaHei UI;
                         font-weight: bold;
                         font-size: 24px;
+                        text-wrap: nowrap;
+                        text-overflow: ellipsis;
+                        overflow: hidden;
                     }
 
                     .bottom {
diff --git a/src/views/projectName/index.vue b/src/views/projectName/index.vue
new file mode 100644
index 0000000..3453585
--- /dev/null
+++ b/src/views/projectName/index.vue
@@ -0,0 +1,174 @@
+<!-- 比赛项目名称页面 -->
+<template>
+    <div class="fill"></div>
+    <div class="banner">
+        <img src="../../assets/images/banner2.png" alt="">
+    </div>
+
+    <div class="project-name">
+        <!-- 面包屑 -->
+        <div class="bread-box">
+            <el-breadcrumb separator-icon="ArrowRight">
+                <template v-for="r in route.matched" :key="r.path">
+                    <el-breadcrumb-item v-if="r.path !== '/projectName'" :to="{ path: r.path }">
+                        {{ r.meta.title }}
+                    </el-breadcrumb-item>
+                    <el-breadcrumb-item v-else>
+                        {{ r.meta.title }}
+                    </el-breadcrumb-item>
+                </template>
+
+            </el-breadcrumb>
+        </div>
+
+        <div class="content">
+            <div class="title">{{ data.objName }}</div>
+            <div class="text" v-html="data.introduce"></div>
+            <div class="foot">
+                <el-checkbox v-model="checked" label="我已完成阅读并全部知悉项目比赛规则" size="large" />
+            </div>
+        </div>
+
+        <div class="btn-box">
+            <el-btutton class="btn" @click="handleSub">立刻报名</el-btutton>
+        </div>
+    </div>
+</template>
+
+<script setup lang="ts">
+import { getCompetitionOneApi } from '@/api/person';
+import { ref, watch } from 'vue';
+import { useRoute, useRouter } from 'vue-router';
+import { ElMessage, ElLoading } from 'element-plus';
+
+const route = useRoute();
+const router = useRouter();
+
+// loading
+const loading = ref(false);
+let loadingInstance: any;
+watch(loading, newVal => {
+    if (newVal) loadingInstance = ElLoading.service({ fullscreen: true });
+    else if (loadingInstance) loadingInstance.close();
+});
+
+// 获取数据
+const data = ref<Record<any, any>>({});
+async function getData() {
+    if (!route.query.id) return
+    try {
+        loading.value = true;
+        const res: any = await getCompetitionOneApi(route.query.id as string);
+        if (!res.result) return
+        data.value = res.result;
+    } catch (error) {
+        ElMessage.error('请求失败');
+    } finally {
+        loading.value = false;
+    }
+}
+
+// 是否同意
+const checked = ref(false);
+
+// 立刻报名
+function handleSub() {
+    if (!checked.value) {
+        ElMessage({
+            message: '请先同意',
+            type: 'warning',
+        })
+        return
+    }
+    router.push({ path: '/registrationPersonage', query: { id: route.query.id } })
+}
+
+getData();
+</script>
+
+
+
+<style lang="scss" scoped>
+@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap');
+
+* {
+    font-family: "Roboto", sans-serif;
+    font-weight: 300;
+    font-style: normal;
+    line-height: 2;
+}
+
+.project-name {
+    margin: 0 auto;
+    width: $base-container-width;
+
+    .bread-box {
+        margin: 40px 0;
+    }
+
+    .content {
+        .title {
+            text-align: center;
+            font-size: 42px;
+            color: #333333;
+            margin: 20px 0;
+        }
+
+        .text {
+            font-size: 18px;
+            color: #666666;
+            text-indent: 2em;
+        }
+
+        .foot {
+            margin: 120px 0 20px;
+            display: flex;
+            align-items: center;
+            gap: 110px;
+        }
+    }
+
+    .btn-box {
+        display: flex;
+        justify-content: center;
+        margin-top: 80px;
+
+        .btn {
+            --color1: #00D0D0;
+            --color2: #42D9AC;
+            cursor: pointer;
+            text-align: center;
+            width: 470px;
+            height: 50px;
+            border-radius: 45px;
+            border: none;
+            font-weight: bold;
+            font-size: 24px;
+            color: #FFFFFF;
+            background: linear-gradient(to right, var(--color1), var(--color2));
+            box-shadow: 7px 7px 22px -10px rgba(0, 0, 0, 0.22);
+            transition: all 0.2s;
+
+            &:hover {
+                transform: scale(1.1);
+            }
+        }
+    }
+}
+
+.fill {
+    padding-top: 80px;
+}
+
+.banner {
+    width: 100%;
+    height: 367px;
+    border-radius: 0px 0px 0px 0px;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+    }
+}
+</style>
\ No newline at end of file
diff --git a/src/views/registrationPersonage/index.vue b/src/views/registrationPersonage/index.vue
index 1a326a3..3312568 100644
--- a/src/views/registrationPersonage/index.vue
+++ b/src/views/registrationPersonage/index.vue
@@ -84,22 +84,22 @@
                 </div>
                 <div class="info-box">
                     <div class="label">姓名</div>
-                    <div class="text">王不留行</div>
+                    <div class="text">{{ info.realname }}</div>
                 </div>
 
                 <div class="info-box">
                     <div class="label">姓别</div>
-                    <div class="text">男</div>
+                    <div class="text">{{ pasSex(info.sex) }}</div>
                 </div>
 
                 <div class="info-box">
                     <div class="label">学号</div>
-                    <div class="text">2023010236</div>
+                    <div class="text">{{ info.workNo }}</div>
                 </div>
 
                 <div class="info-box">
                     <div class="label">手机号</div>
-                    <div class="text">17725633652</div>
+                    <div class="text">{{ info.phone }}</div>
                 </div>
 
                 <div class="info-box">
@@ -137,6 +137,20 @@
 </template>
 
 <script lang="ts" setup>
+import { toRef } from 'vue';
+import userStore from '@/store/module/user';
+
+const user = userStore();
+
+const info = toRef(user.userInfo);
+console.log("🚀 ~ info:", user.userInfo)
+
+// 解析性别
+function pasSex(num: number) {
+    if (num == 1) return '男'
+    else if (num == 2) return '女'
+    else return '保密'
+}
 </script>
 
 <style lang="scss" scoped>