<template>
|
<div class="container">
|
<div class="loginTop">
|
<div>新疆维吾尔自治区</div>
|
<div>特种作业缴费助手</div>
|
</div>
|
<div class="loginForm">
|
<el-form ref="dataForm" :model="dataForm" :rules="rules" label-position="right" label-width="80px">
|
<el-form-item label="身份证号" prop="idCard">
|
<el-input v-model.trim="dataForm.idCard"/>
|
</el-form-item>
|
<el-form-item label="电话" prop="phone">
|
<el-input v-model.trim="dataForm.phone"/>
|
</el-form-item>
|
<el-form-item label="类别" prop="type">
|
<el-select v-model="dataForm.type" placeholder="请选择">
|
<el-option key="1" label="非煤" :value="1"></el-option>
|
<el-option key="2" label="煤矿" :value="2"></el-option>
|
</el-select>
|
</el-form-item>
|
</el-form>
|
<div class="tipBox">
|
<span>提示：请使用报名时预留的手机号进行查询，如查询不到待缴费信息，请联系报名机构进行信息核实。</span>
|
</div>
|
<div class="btnBox">
|
<div @click="onSubmit">查询缴费项目</div>
|
</div>
|
</div>
|
<el-dialog
|
:title="dialogTitle"
|
:visible.sync="listVisible"
|
:modal-append-to-body="false"
|
fullscreen
|
class="myCustomDialog"
|
:before-close="handleClose"
|
>
|
<div v-if="hasInfo">
|
<div class="topInfo">
|
<el-row style="margin-bottom: 0">
|
<el-col :span="12">
|
<div><i class="el-icon-user-solid" style="font-size: 20px;color: #0fc7f0;margin-right: 6px"></i>{{info.name}}</div>
|
</el-col>
|
<el-col :span="12">
|
<div><i class="el-icon-phone" style="font-size: 20px;color: #0fc7f0;margin-right: 6px"></i>{{info.phone}}</div>
|
</el-col>
|
</el-row>
|
<div><i class="el-icon-s-finance" style="font-size: 20px;color: #0fc7f0;margin-right: 6px"></i>{{info.idCard}}</div>
|
</div>
|
<div v-if="this.dataForm.type == 1" class="feeList">
|
<div v-for="(item,index) in info.list" class="infoCard" :key="index">
|
<div>批次名称：<span class="cardCont">{{item.batchName }}</span></div>
|
<div>所属地区：<span class="cardCont">{{item.districtName }}</span></div>
|
<div>填报时间：<span class="cardCont">{{item.createTime}}</span></div>
|
<div>状态状态：
|
<el-tag v-if="item.payStatus == 0" type="danger" size="small">待缴费</el-tag>
|
<el-tag v-if="item.payStatus == 1" type="success" size="small">已缴费</el-tag>
|
</div>
|
<div v-if="item.nonCoalPayCategoryList && item.nonCoalPayCategoryList.find(i=>i.categoryType == 1)">
|
理论应缴：
|
<span class="cardCont">{{item.nonCoalPayCategoryList.find(i=>i.categoryType == 1).categoryAmount }}元</span>
|
</div>
|
<div v-if="item.nonCoalPayCategoryList && item.nonCoalPayCategoryList.find(i=>i.categoryType == 2)">
|
实操应缴：
|
<span class="cardCont">{{item.nonCoalPayCategoryList.find(i=>i.categoryType == 2).categoryAmount }}元</span>
|
</div>
|
<div>总计应缴：<span class="cardCont">{{ item.amount }}元</span></div>
|
<el-button style="margin-top: 5px" type="primary" size="small" v-if="item.payStatus == 0" @click="goPay(item)">去缴费</el-button>
|
<el-button style="margin-top: 5px" type="success" size="small" v-if="item.payStatus == 1" @click="checkTicket(item)">查看票据</el-button>
|
</div>
|
</div>
|
<div v-else class="feeList">
|
<div v-for="(item,index) in info.list" class="infoCard" :key="index">
|
<div>批次名称：<span class="cardCont" v-if="item.coalPays">{{item.coalPays.batchName }}</span></div>
|
<!-- <div>所属地区：<span class="cardCont">{{item.districtName }}</span></div>-->
|
<div>填报时间：<span class="cardCont" v-if="item.coalPays">{{item.coalPays.createTime}}</span></div>
|
<div>状态状态：
|
<el-tag v-if="item.payStatus == 0" type="danger" size="small">待缴费</el-tag>
|
<el-tag v-if="item.payStatus == 1" type="success" size="small">已缴费</el-tag>
|
</div>
|
<div v-if="item.coalPays && item.coalPays.coalCategoryList && item.coalPays.coalCategoryList.find(i=>i.categoryType == 1)">
|
理论应缴：
|
<span class="cardCont">{{item.coalPays.coalCategoryList.find(i=>i.categoryType == 1).amount }}元</span>
|
</div>
|
<div v-if="item.coalPays && item.coalPays.coalCategoryList && item.coalPays.coalCategoryList.find(i=>i.categoryType == 2)">
|
实操应缴：
|
<span class="cardCont">{{item.coalPays.coalCategoryList.find(i=>i.categoryType == 2).amount }}元</span>
|
</div>
|
<div>总计应缴：<span class="cardCont" v-if="item.coalPays">{{ item.coalPays.amount }}元</span></div>
|
<el-button style="margin-top: 5px" type="primary" size="small" v-if="item.payStatus == 0" @click="goPay(item)">去缴费</el-button>
|
<el-button style="margin-top: 5px" type="success" size="small" v-if="item.payStatus == 1" @click="checkTicket(item)">查看票据</el-button>
|
</div>
|
</div>
|
</div>
|
<div class="noData" v-else>
|
<el-image style="width: 150px; height: 150px" :src="noData" fit="contain"></el-image>
|
<span>该用户暂无数据</span>
|
</div>
|
</el-dialog>
|
<el-dialog
|
title="缴费"
|
:visible.sync="detailVisible"
|
:modal-append-to-body="false"
|
fullscreen
|
class="myCustomDialog"
|
>
|
<div class="topInfo">
|
<el-row style="margin-bottom: 0">
|
<el-col :span="12">
|
<div><i class="el-icon-user-solid" style="font-size: 20px;color: #0fc7f0;margin-right: 6px"></i>{{info.name}}</div>
|
</el-col>
|
<el-col :span="12">
|
<div><i class="el-icon-phone" style="font-size: 20px;color: #0fc7f0;margin-right: 6px"></i>{{info.phone}}</div>
|
</el-col>
|
</el-row>
|
<div><i class="el-icon-s-finance" style="font-size: 20px;color: #0fc7f0;margin-right: 6px"></i>{{info.idCard}}</div>
|
</div>
|
<div v-if="this.dataForm.type == 1" class="feeDetail">
|
<div class="topDetail">
|
<div>批次名称：<span class="cardCont">{{detailInfo.batchName }}</span></div>
|
<div>所属地区：<span class="cardCont">{{detailInfo.districtName }}</span></div>
|
</div>
|
<div class="midDetail">
|
<div>类别：<span>{{ detailInfo.payType == 1?'初训理论':detailInfo.payType == 2?'初训实操':detailInfo.payType == 3?'初训理论与实操':detailInfo.payType == 4?'复训理论':'' }}</span></div>
|
<div>组织架构：<span>{{detailInfo.deptName }}</span></div>
|
<div v-if="detailInfo.nonCoalPayCategoryList && detailInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 1)">
|
理论：
|
<span>{{detailInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 1).subjectName }}<span> {{detailInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 1).categoryAmount }} </span>元</span>
|
</div>
|
<div v-if="detailInfo.nonCoalPayCategoryList && detailInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 2)">
|
实操：
|
<span>{{detailInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 2).subjectName }}<span> {{detailInfo.nonCoalPayCategoryList.find(i=>i.categoryType == 2).categoryAmount }} </span>元</span>
|
</div>
|
</div>
|
<div class="bottomDetail">
|
应缴费金额：<span>{{detailInfo.amount}}</span>元
|
</div>
|
<div class="goPayBtn" @click="payBill()">立即缴费</div>
|
</div>
|
<div v-else class="feeDetail">
|
<div class="topDetail">
|
<div>批次名称：<span class="cardCont" v-if="detailInfo.coalPays">{{detailInfo.coalPays.batchName }}</span></div>
|
<!-- <div>所属地区：<span class="cardCont">{{detailInfo.districtName }}</span></div>-->
|
</div>
|
<div class="midDetail">
|
<div>类别：<span v-if="detailInfo.coalPays">{{ detailInfo.coalPays.payType == 1?'初训理论':detailInfo.coalPays.payType == 2?'初训实操':detailInfo.coalPays.payType == 3?'初训理论与实操':detailInfo.coalPays.payType == 4?'复训理论':'' }}</span></div>
|
<div>组织架构：<span v-if="detailInfo.coalPays">{{detailInfo.coalPays.deptName }}</span></div>
|
<div v-if="detailInfo.coalPays && detailInfo.coalPays.coalCategoryList && detailInfo.coalPays.coalCategoryList.find(i=>i.categoryType == 1)">
|
理论：
|
<span>{{detailInfo.coalPays.coalCategoryList.find(i=>i.categoryType == 1).subjectName }}<span> {{detailInfo.coalPays.coalCategoryList.find(i=>i.categoryType == 1).amount }} </span>元</span>
|
</div>
|
<div v-if="detailInfo.coalPays && detailInfo.coalPays.coalCategoryList && detailInfo.coalPays.coalCategoryList.find(i=>i.categoryType == 2)">
|
实操：
|
<span>{{detailInfo.coalPays.coalCategoryList.find(i=>i.categoryType == 2).subjectName }}<span> {{detailInfo.coalPays.coalCategoryList.find(i=>i.categoryType == 2).amount }} </span>元</span>
|
</div>
|
</div>
|
<div class="bottomDetail">
|
应缴费金额：<span v-if="detailInfo.coalPays">{{detailInfo.coalPays.amount}}</span>元
|
</div>
|
<div class="goPayBtn" @click="payBill()">立即缴费</div>
|
</div>
|
</el-dialog>
|
</div>
|
</template>
|
|
<script >
|
import {verifyIdCard, verifySimplePhone} from "@/utils/validate";
|
import {nonCoalSelectH5} from "@/api/specialOperationsPay/notCoalPay";
|
import {findStudent} from "@/api/specialOperationsPay/coalPay";
|
import noData from '@/assets/images/noData.png'
|
|
export default {
|
name: 'singlePage',
|
components: {
|
},
|
data() {
|
let validatePhone = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入手机号'))
|
}else{
|
if(!verifySimplePhone(value)){
|
callback(new Error('手机号格式有误'))
|
}else{
|
callback()
|
}
|
}
|
}
|
let verifyId = (rule, value, callback)=>{
|
if(value === ''){
|
callback(new Error('请输入身份证号'))
|
}else{
|
if(!verifyIdCard(value)){
|
callback(new Error('身份证号格式有误'))
|
}else{
|
callback()
|
}
|
}
|
}
|
return {
|
dataForm: {
|
idCard: '320322199509262810',
|
phone: '15261806176',
|
type: 1
|
},
|
rules: {
|
idCard: [{ required: true, validator: verifyId, trigger: 'blur' }],
|
phone:[{ required: true, validator: validatePhone, trigger: 'blur' }],
|
},
|
dialogTitle: '',
|
listVisible: false,
|
info: {},
|
hasInfo: true,
|
detailVisible: false,
|
detailInfo: {},
|
noData
|
}
|
},
|
created() {
|
|
},
|
methods: {
|
onSubmit() {
|
this.$refs["dataForm"].validate( async valid => {
|
if (valid) {
|
if(this.dataForm.type == 1){
|
this.dialogTitle = '缴费项目查询--非煤'
|
const {type,...data} = this.dataForm
|
this.info = data
|
const res = await nonCoalSelectH5(data);
|
if(res.code == 200) {
|
if(res.data && Array.isArray(res.data) && res.data.length>0){
|
this.info.list = res.data
|
this.info.name = res.data[0].studentName
|
this.hasInfo = true
|
}else{
|
this.hasInfo = false
|
}
|
this.listVisible = true
|
}else{
|
this.$message({
|
type:'warning',
|
message: res.msg
|
})
|
}
|
}else {
|
this.dialogTitle = '缴费项目查询--煤矿'
|
const {type,...data} = this.dataForm
|
this.info = data
|
const res = await findStudent(data);
|
if(res.code == 200) {
|
if(res.data && Array.isArray(res.data) && res.data.length>0){
|
this.info.list = res.data
|
this.info.name = res.data[0].name
|
this.hasInfo = true
|
}else{
|
this.hasInfo = false
|
}
|
this.listVisible = true
|
}else{
|
this.$message({
|
type:'warning',
|
message: res.msg
|
})
|
}
|
}
|
}
|
})
|
|
},
|
goPay(item){
|
this.detailInfo = item
|
this.detailVisible = true
|
},
|
payBill(){
|
console.log('立即付款')
|
},
|
resetDataForm() {
|
this.dataForm = {
|
}
|
},
|
handleClose(){
|
this.info = {}
|
this.listVisible = false
|
}
|
}
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
.container{
|
width: 100%;
|
height: 100%;
|
}
|
|
.loginTop{
|
width: 100%;
|
height: 20%;
|
display: flex;
|
flex-direction: column;
|
justify-content: center;
|
background: rgb(15,199,240);
|
color: #fff;
|
text-align: center;
|
|
div:first-of-type{
|
font-size: clamp(1.25rem, 1rem + 1.25vw, 2.5rem);
|
margin-bottom: 1rem;
|
}
|
div:last-of-type{
|
font-size: clamp(1.75rem, 1.1rem + 3.25vw, 5rem);
|
font-weight: 800;
|
}
|
}
|
|
.loginForm{
|
width: 100%;
|
height: 80%;
|
padding: 2rem 40px;
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
justify-content: left;
|
|
.el-form{
|
width: 100%;
|
|
.el-select{
|
width: 100%;
|
}
|
}
|
|
.tipBox{
|
width: 100%;
|
padding: 20px;
|
font-size: 14px;
|
background: rgb(236,251,253);
|
color: rgb(15,199,240);
|
border-radius: 10px;
|
margin-top: 18px;
|
margin-bottom: 40px;
|
}
|
.btnBox{
|
width: 100%;
|
|
div{
|
background: rgb(15,199,240);
|
color: #fff;
|
border-radius: 10px;
|
padding: 10px 0;
|
text-align: center;
|
cursor: pointer;
|
font-size: clamp(1rem, 0.85rem + 0.75vw, 1.75rem);
|
}
|
}
|
}
|
</style>
|
<style lang="scss">
|
.myCustomDialog{
|
.el-dialog .el-dialog__header{
|
height: 60px;
|
padding: 0;
|
line-height: 60px;
|
background-color: rgb(15,199,240);
|
text-align: center;
|
.el-dialog__title{
|
color: #FFF;
|
}
|
.el-dialog__close{
|
color: #fff;
|
}
|
}
|
.el-dialog__body{
|
padding: 20px;
|
height: calc(100% - 60px);
|
.noData{
|
display: flex;
|
flex-direction: column;
|
align-items: center;
|
span{
|
color: #999;
|
margin-top: 10px;
|
}
|
}
|
|
.topInfo{
|
width: 100%;
|
height: 90px;
|
font-size: 18px;
|
padding-bottom: 10px;
|
border-bottom: 1px solid #ccc;
|
background: #fff;
|
&>div{
|
margin-top: 10px;
|
}
|
}
|
.feeList{
|
width: 100%;
|
height: calc(100% - 90px);
|
overflow: hidden;
|
overflow-y: auto;
|
|
.infoCard{
|
padding: 15px 0;
|
border-bottom: 1px solid #e6e6e6;
|
&:last-of-type{
|
border-bottom: none;
|
}
|
&>div{
|
color: #999;
|
margin-bottom: 6px;
|
.cardCont{
|
color: #333;
|
}
|
}
|
}
|
}
|
.feeDetail{
|
.topDetail{
|
width: 100%;
|
padding: 20px;
|
font-size: 14px;
|
background: rgb(236,251,253);
|
color: #333;
|
border-radius: 10px;
|
margin: 20px 0;
|
div{
|
margin-bottom: 10px;
|
&:last-of-type{
|
margin-bottom: 0;
|
};
|
}
|
}
|
.midDetail{
|
width: 100%;
|
padding: 20px;
|
font-size: 14px;
|
background: rgb(251,248,231);
|
color: #333;
|
border-radius: 10px;
|
margin: 20px 0;
|
div{
|
margin-bottom: 10px;
|
&:last-of-type{
|
margin-bottom: 0;
|
};
|
&>span{
|
color: #0fc7f0;
|
span{
|
font-size: 18px;
|
font-weight: bolder;
|
color: rgb(219,120,14)
|
}
|
}
|
}
|
}
|
.bottomDetail{
|
width: 100%;
|
text-align: right;
|
span{
|
font-size: 40px;
|
color: rgb(240,69,2);
|
font-weight: bolder;
|
}
|
}
|
.goPayBtn{
|
margin-top: 20px;
|
background: rgb(5,185,23);
|
color: #fff;
|
border-radius: 10px;
|
padding: 10px 0;
|
text-align: center;
|
cursor: pointer;
|
font-size: clamp(1rem, 0.85rem + 0.75vw, 1.75rem);
|
}
|
}
|
}
|
}
|
</style>
|
