|
<template>
<div class="pay">
<div v-show="showMain">
<p>考试缴费</p>
<el-table
ref="multipleTable"
border
:header-cell-style="headStyle"
:data="tableData"
>
<el-table-column prop="number" label="序号" width="50">
<template slot-scope="scope">{{ scope.$index+1 }}</template>
</el-table-column>
<el-table-column prop="exam_name" label="考试名称" width="180">
</el-table-column>
<el-table-column prop="series_name" label="考试系列" width="120">
</el-table-column>
<el-table-column prop="level_name" label="考试级别" width="80">
</el-table-column>
<el-table-column prop="subject_name" label="考试科目" width="120">
</el-table-column>
<el-table-column prop="create_time" label="申请日期" width="160">
</el-table-column>
<el-table-column prop="pay_state" label="缴费状态" width="100">
</el-table-column>
<el-table-column label="操作" show-overflow-tooltip>
<template slot-scope="scope">
<el-button size="mini" type="primary" @click="check(scope.row)">
查看
</el-button>
</template>
</el-table-column>
</el-table>
</div>
<div v-show="!showMain">
<el-form class="myform" ref="form" :model="form" label-width="90px" status-icon>
<el-form-item label="姓名：">
<el-input class="myinput" v-model="studentData.name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="身份证号：">
<el-input class="myinput" v-model="studentData.card_num" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="考试名称：">
<el-input class="myinput" v-model="form.exam_name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="考试系列：">
<el-input class="myinput" v-model="form.series_name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="考试级别：">
<el-input class="myinput" v-model="form.level_name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="考试科目：">
<el-input class="myinput" v-model="form.subject_name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="考试时间：">
<el-input class="myinput" v-model="form.time" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="申请时间：">
<el-input class="myinput" v-model="form.create_time" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="拟报考点：">
<el-input class="myinput" v-model="form.want_place_name" :disabled="true"></el-input>
</el-form-item>
<el-form-item label="缴费方式：">
<el-select class="myinput" v-model="form.year" placeholder="请选择">
<el-option label="11" value="11"></el-option>
</el-select>
</el-form-item>
</el-form>
<div class="myfooter">
<img src="../../assets/img/erweima.svg">
<el-button type="primary" @click="printChange">已完成缴费</el-button>
</div>
</div>
</div>
</template>
<script>
import {
getStudentInfo, //个人资料
getPayList, //列表
} from "@/api/home";
export default {
data() {
return {
tableData: [],
studentData: [],
form: {},
showMain: true,
}
},
created() {
this.getStudent();
this.getPay();
},
methods: {
// 获取考生个人资料
async getStudent() {
let res = await getStudentInfo({
student_id: 2,
});
// 解构数据
let { code, data } = res;
// 赋值渲染
if (code === 200) {
this.studentData = data.res.student;
}
},
// 获取列表
async getPay() {
let res = await getPayList({
student_id: 2,
});
// 解构数据
let { code, data } = res;
// 赋值渲染
if (code === 200) {
this.tableData = data.myEnroll;
}
},
// 表格头部样式回调
headStyle() {
return "backgroundColor:#ddd;fontSize:14px;color:#666;fontWeight:700";
},
printChange() {
this.$emit('print',true);
this.showMain = true;
},
check(row) {
this.showMain = false;
for(let item in this.tableData){
if(row.uuid == this.tableData[item].uuid){
this.form = this.tableData[item]
}
}
},
}
}
</script>
<style lang="less" scoped>
.pay {
width: 100%;
padding: 20px;
.el-table::before {
height: 0;
}
.el-table--border, .el-table--group {
border: 0;
}
.el-table--border::after, .el-table--group::after {
height: 0;
}
p{
font-size: 18px;
margin: 0 0 20px 0;
}
}
.myform{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.myinput{
width: 200px;
}
.myfooter{
width: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
img{
width: 200px;
height: 200px;
margin-bottom: 20px;
}
}
</style>
|