pay.vue 5.62 KB
<template>
  <div>
    <div class="box">
      <el-card :body-style="{ padding: '0px' }" class="mt20 mb60">
        <div slot="header">
          <div class="bg-lineg">报名缴费清单</div>
        </div>
        <div class="pd20">
          <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">
                <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>
        </div>

      </el-card>

    </div>

  </div>
</template>

<script setup>
import {ref} from 'vue'

const matchInfo = ref({})
const tableData = 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;
}
</style>