signPreview.vue
6.84 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
<template>
<div>
<div class="box ph-30">
<el-card class="mb20">
<el-steps :active="activeStep" align-center>
<el-step title="团队信息"/>
<el-step title="教练/领队/其他"/>
<el-step title="选手报名"/>
<el-step title="提交审核"/>
</el-steps>
</el-card>
<el-card>
<div class="border-info">
<el-row>
<el-col :lg="8">
<div class="item"><label>赛事名称</label>{{ matchInfo.name }}</div>
</el-col>
<el-col :lg="8">
<div class="item"><label>赛事类型</label>{{ matchInfo.name }}</div>
</el-col>
<el-col :lg="8">
<div class="item"><label>赛事时间</label>{{ matchInfo.beginTime?.slice(0, 10) }} 至
{{ matchInfo.endTime?.slice(0, 10) }}
</div>
</el-col>
<el-col :lg="8">
<div class="item"><label>报名时间</label>{{ matchInfo.signBeginTime?.slice(0, 10) }}
至{{ matchInfo.signEndTime?.slice(0, 10) }}
</div>
</el-col>
<el-col :lg="16">
<div class="item"><label>比赛地址</label>{{ matchInfo.address }}</div>
</el-col>
</el-row>
</div>
<div class="border-info gray mt20">
<el-row>
<el-col :lg="8">
<img/>
<div class="item"><label>团队名称</label>{{ matchInfo.signFee }}</div>
<div class="item"><label>团队类型</label>{{ matchInfo.signFee }}</div>
</el-col>
<el-col :lg="8">
<div class="item"><label>负责人姓名</label>{{ matchInfo.signFee }}</div>
<div class="item"><label>参赛队名称</label>{{ matchInfo.signFee }}</div>
</el-col>
<el-col :lg="8">
<div class="item"><label>邮箱</label>{{ matchInfo.signFee }}</div>
<div class="item"><label>详细地址</label>{{ matchInfo.signFee }}</div>
</el-col>
</el-row>
</div>
<div class="border-info mt20">
<el-row>
<el-col :lg="8">
<div class="item"><label>教练</label>{{ matchInfo.signFee }}</div>
<div class="item"><label>翻译</label>{{ matchInfo.signFee }}</div>
</el-col>
<el-col :lg="8">
<div class="item"><label>领队</label>{{ matchInfo.signFee }}</div>
<div class="item"><label>官员</label>{{ matchInfo.signFee }}</div>
</el-col>
<el-col :lg="8">
<div class="item"><label>队医</label>{{ matchInfo.signFee }}</div>
<div class="item"><label>其他</label>{{ matchInfo.signFee }}</div>
</el-col>
</el-row>
</div>
<div class="mt20">
<div class="leftboderTT">参赛人员清单</div>
<el-table :data="tableData" border style="width: 100%" class="mt20" :span-method="arraySpanMethod">
<el-table-column label="所属国家"/>
<el-table-column prop="name" label="姓氏" width="180" align="center"></el-table-column>
<el-table-column label="名"/>
<el-table-column label="短名"/>
<el-table-column prop="sex" label="性别" width="180" align="center"></el-table-column>
<el-table-column prop="age" label="年龄" width="180" align="center"></el-table-column>
<el-table-column label="出生日期" align="center"/>
<el-table-column prop="phone" label="手机号码" width="180" align="center"></el-table-column>
<el-table-column label="邮箱"/>
<el-table-column label="证件类型" align="center"/>
<el-table-column label="证件号码"/>
<el-table-column label="报项" fixed="right">
<template #default="scope">
<ol>
<li v-for="item in scope.row.items" :key="item.id">{{ item.name }}</li>
</ol>
</template>
</el-table-column>
<el-table-column label="保险费" fixed="right" align="center">
<template #default="scope">
<span class="text-primary">¥{{ scope.row.signFee }}/人</span>
</template>
</el-table-column>
</el-table>
</div>
<div class="mt20">
<div class="leftboderTT">设项报名清单</div>
<!-- 报项列表-->
<el-table :data="tableData" border style="width: 100%" class="mt20">
<el-table-column label="组别代码" align="center"/>
<el-table-column label="组别" align="center"/>
<el-table-column label="舞种" align="center"/>
<el-table-column label="参赛说明"/>
<el-table-column label="参赛运动员"/>
<el-table-column label="补充信息"/>
<el-table-column label="报名费" align="center">
<template #default="scope">
<span class="text-primary">¥{{ scope.row.signFee }}/人</span>
</template>
</el-table-column>
</el-table>
</div>
</el-card>
<el-card class="mt20" :body-style="{padding: '0px'}">
<el-row class="priceBar">
<el-col :lg="16" :xs="24" class="pd20">
<div class="flex">
<div class="item"><label>报名费：</label><span>¥3000</span></div>
<div class="item"><label>保险费：</label><span>¥3000</span></div>
<div class="item"><label>费用总计：</label><span>¥6000</span></div>
</div>
</el-col>
<el-col :lg="8" :xs="24" class="text-right pd20">
<el-link type="primary"><el-icon><Upload /></el-icon>导出参赛人员清单</el-link>
<el-link type="primary"><el-icon><Upload /></el-icon>导出设项报名清单</el-link>
</el-col>
</el-row>
<div class="text-center pd20">
<el-button type="primary" class="" plain round @click="goPrev()">上一步</el-button>
<el-button type="primary" class="" plain round @click="submitForm()">保存暂不提交审核</el-button>
<el-button type="primary" class="btn-lineG w200px" round @click="submitForm()">提交审核</el-button>
</div>
</el-card>
</div>
</div>
</template>
<script setup>
import {ref} from "vue"
const activeStep = ref(3)
const matchInfo = ref({})
</script>
<style scoped lang="scss">
.leftboderTT{font-weight: 600;
font-size: 16px;
color: #453DEA;}
.bg-lineg {
height: 40px;
line-height: 40px;
font-size: 18px;
text-align: center;
}
.priceBar{
background: #FAFBFD;
.flex{display: flex;
.item{font-size: 16px;margin-right: 15px;
label{color: #95A1A6;}
}
}
}
.text-right{text-align: right;
a{margin-left: 20px;}
}
</style>