报名确认/个人

src/api/person.ts

@@ -12,6 +12,7 @@ enum api {
     PAGE_XSFXBG = '/annualcompetitionprojectregistration/annualCompetitionProjectRegistration/xsfxbg', // 个人能力报告
     competition = '/AnnualCompPoint/annualCompPoint/findcompp', // 比赛项目列表
     competitionOne = '/AnnualCompPoint/annualCompPoint/findcomppxq', // 比赛项目单个
+    signUp = '/annualcompetitionprojectregistration/annualCompetitionProjectRegistration/edit', // 年度比赛项目报名 POST 
 }
 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 });
@@ -23,4 +24,13 @@ export const getXsfxbgApi = (params = {}) => {
 };
 
 export const getCompetitionApi = (id: string) => request.get(api.competition, { params: { id } });
-export const getCompetitionOneApi = (id: string) => request.get(api.competitionOne, { params: { id } });
+export const getCompetitionOneApi = (id: string) => request.get(api.competitionOne, { params: { id } });
+
+interface SignUpData {
+    annualCompid: string,
+    entryFormat: '团队' | '个人',
+    id: string,
+    instructorSheetList?: any[],
+    teamManagementList?: any[],
+}
+export const getSignUpApi = (data: SignUpData) => request.post(api.signUp, data);

src/permissions.ts

@@ -9,7 +9,7 @@ router.beforeEach(async (to, form, next) => {
   if (useuserStore.token) {
     if (to.path === '/login') {
       next({ path: '/' })
-    } else {
+    } else {      
       if (!Object.keys(useuserStore.userInfo).length) {
         useuserStore.getUserInfo()
         next()

src/utils/asyncHint.ts

@@ -0,0 +1,65 @@
+import { ElMessage, MessageOptions } from "element-plus";
+
+enum indexs {
+    fulfilled,
+    Rejected
+}
+
+interface Options {
+    onFulfilled?: Function;
+    onRejected?: Function;
+    onFinish?: Function;
+    // 是否需要提示：[ 成功时的 , 失败时的]。
+    // 默认：[true, true]
+    isNeedPrompts?: boolean[];
+    // 提示配置：[成功时的 , 失败时的]
+    msgObjs?: MessageOptions[];
+    // 提示配置的快捷message配置：[ 成功时的 , 失败时的]。
+    // 默认：['成功', '失败']
+    msgs?: string[];
+    [key: string]: any;
+}
+
+
+export function getHint(pro: Promise<any>, options: Options = {}) {
+    const ful = indexs.fulfilled;
+    const rej = indexs.Rejected;
+    const { isNeedPrompts, msgs } = options;
+
+    const opt: Options = {
+        ...options,
+        isNeedPrompts: Object.assign([true, true], isNeedPrompts),
+        msgs: Object.assign(['成功', '失败'], msgs),
+    }
+
+    const onFulfilled = (res: any) => {
+        if (opt.isNeedPrompts?.[ful]) {
+            ElMessage({
+                message: opt.msgs?.[ful],
+                type: 'success',
+                ...opt.msgObjs?.[ful]
+            });
+        }
+        if (opt.onFulfilled) opt.onFulfilled(res);
+    }
+    const onRejected = (err: Error) => {
+        if (opt.isNeedPrompts?.[rej]) {
+            ElMessage({
+                message: opt.msgs?.[rej],
+                type: 'error',
+                ...opt.msgObjs?.[rej]
+            });
+        }
+
+        if (opt.onRejected) opt.onRejected(err);
+    }
+    const onFinish = () => {
+        console.log(opt, opt.onFinish);
+
+        if (opt.onFinish) opt.onFinish();
+    }
+
+    pro.then(onFulfilled).catch(onRejected).finally(onFinish);
+
+    return pro;
+}

src/views/projectName/index.vue

@@ -80,7 +80,11 @@ function handleSub() {
         })
         return
     }
-    router.push({ path: '/registrationPersonage', query: { id: route.query.id } })
+    // Y:团队赛 N:个人赛
+    let path;
+    if (data.value.entryForm === 'Y') path = '/registrationGroup';
+    else path = '/registrationPersonage';
+    router.push({ path, query: { id: route.query.id } })
 }
 
 getData();

src/views/registrationGroup/index.vue

@@ -84,25 +84,29 @@
                 </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">
+                    <div class="label">邮箱</div>
+                    <div class="text">{{ info.email }}</div>
+                </div>
+                <!-- <div class="info-box">
                     <div class="label">院系</div>
                     <div class="text">国际教育学院</div>
                 </div>
@@ -125,7 +129,7 @@
                 <div class="info-box remark">
                     <div class="label">其它备注</div>
                     <div class="text">无</div>
-                </div>
+                </div> -->
             </div>
         </el-card>
         <el-card class="list" :body-style="{ padding: 0 }">
@@ -164,17 +168,22 @@
 </template>
 
 <script lang="ts" setup>
-import { reactive, ref } from 'vue';
+import { reactive, ref, toRefs } from 'vue';
+import userStore from '@/store/module/user';
+const user = userStore();
+
+// 用户信息
+const { userInfo: info } = toRefs(user);
+
+// 解析性别
+function pasSex(num: number) {
+    if (num == 1) return '男'
+    else if (num == 2) return '女'
+    else return '保密'
+}
 
 const input = ref('');
-interface User {
-    id: number          // id
-    stuNum: string      // 学号
-    name: string         // 姓名
-    department: string  // 院系
-    phone: string      // 手机号
-}
-const tableData: User[] = [
+const tableData = [
     {
         id: 1,
         stuNum: '20230101',
@@ -446,13 +455,13 @@ function handleChange(currentPage: number, pageSize: number) {
     }
 
     .center {
-        height: 388px;
+        // height: 388px;
         border-radius: 6px 6px 6px 6px;
         margin-bottom: 25px;
 
         .personage-info {
-            margin: 30px 0 0 32px;
-            width: 780px;
+            margin: 30px;
+            // width: 780px;
             display: flex;
             flex-wrap: wrap;
             justify-content: space-between;

src/views/registrationPersonage/index.vue

@@ -103,6 +103,10 @@
                 </div>
 
                 <div class="info-box">
+                    <div class="label">邮箱</div>
+                    <div class="text">{{ info.email }}</div>
+                </div>
+                <!-- <div class="info-box">
                     <div class="label">院系</div>
                     <div class="text">国际教育学院</div>
                 </div>
@@ -125,25 +129,27 @@
                 <div class="info-box remark">
                     <div class="label">其它备注</div>
                     <div class="text">无</div>
-                </div>
+                </div> -->
             </div>
         </el-card>
 
         <div class="bottom">
             <el-button class="btn">取消报名</el-button>
-            <el-button class="btn cyan">确认报名</el-button>
+            <el-button class="btn cyan" :loading="subLoading" @click="submit">确认报名</el-button>
         </div>
     </div>
 </template>
 
 <script lang="ts" setup>
-import { toRef } from 'vue';
+import { ref, toRefs, watch } from 'vue';
+import { getSignUpApi } from '@/api/person';
+import { getHint } from '@/utils/asyncHint';
+import { useRoute } from 'vue-router';
 import userStore from '@/store/module/user';
-
 const user = userStore();
+const route = useRoute();
 
-const info = toRef(user.userInfo);
-console.log("🚀 ~ info:", user.userInfo)
+const { userInfo: info } = toRefs(user);
 
 // 解析性别
 function pasSex(num: number) {
@@ -151,6 +157,27 @@ function pasSex(num: number) {
     else if (num == 2) return '女'
     else return '保密'
 }
+
+// 确认报名数据及逻辑
+const upData = ref<Parameters<typeof getSignUpApi>[0]>({
+    annualCompid: route.query.id as string,
+    entryFormat: '个人',
+    id: ''
+});
+watch(() => info.value.id, newVal => upData.value.id = newVal);
+
+const subLoading = ref(false);
+const options = {
+    onFinish() {
+        subLoading.value = false
+    },
+    msgs: ['报名成功', '报名失败,请重新报名']
+};
+
+async function submit() {
+    subLoading.value = true;
+    await getHint(getSignUpApi(upData.value), options);
+}
 </script>
 
 <style lang="scss" scoped>
@@ -348,14 +375,14 @@ function pasSex(num: number) {
     }
 
     .center {
-        height: 388px;
+        // height: 388px;
         border-radius: 6px 6px 6px 6px;
         margin-bottom: 25px;
         position: relative;
 
         .personage-info {
-            margin: 30px 0 0 32px;
-            width: 780px;
+            margin: 30px;
+            // width: 780px;
             display: flex;
             flex-wrap: wrap;
             justify-content: space-between;