<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 v-if="item.payCode">财政缴款码：<span class="cardCont">{{item.payCode}}</span><el-button type="text" style="padding: 0;margin-left: 10px" @click="copyCode(item.payCode)">复制</el-button></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()">查看票据</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 v-if="item.payCode">财政缴款码：<span class="cardCont">{{item.payCode}}</span><el-button type="text" style="padding: 0;margin-left: 10px" @click="copyCode(item.payCode)">复制</el-button></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()">查看票据</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"
|
v-loading="payLoading"
|
element-loading-spinner="el-icon-loading"
|
element-loading-background="rgba(255, 255, 255, 0.8)"
|
element-loading-text="等待财政接口加解密返回结果，正在生成支付订单"
|
element-loading-customClass="payLoading"
|
@close="closePay"
|
>
|
<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 {nonCoalPersonPay, nonCoalSelectH5} from "@/api/specialOperationsPay/notCoalPay";
|
import {coalPersonPay, 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: '',
|
phone: '',
|
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,
|
payLoading: false
|
}
|
},
|
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
|
})
|
}
|
}
|
}
|
})
|
},
|
copyCode(code){
|
navigator.clipboard
|
.writeText(code)
|
.then(() => {
|
this.$message({
|
type:'success',
|
message: '缴款码已复制到剪贴板'
|
})
|
})
|
.catch((error) => {
|
this.$message({
|
type:'warning',
|
message: '缴款码复制失败'
|
})
|
});
|
},
|
goPay(item){
|
this.detailInfo = item
|
if((this.dataForm.type == 1 && this.detailInfo.payPersonType == 2) || (this.dataForm.type == 2 &&this.detailInfo.payType == 2)){
|
this.$message({
|
type:'warning',
|
message: '团体缴费类型无法生成缴费订单'
|
})
|
}else{
|
this.detailVisible = true
|
}
|
},
|
async payBill(){
|
this.payLoading = true
|
let device = 1
|
const userAgent = window.navigator.userAgent
|
if (/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(userAgent)) {
|
device = 2
|
} else {
|
device = 1
|
}
|
if(this.dataForm.type == 1){
|
const query = {
|
id: this.detailInfo.nonCoalStudentId,
|
payType: 1
|
}
|
const res = await nonCoalPersonPay(query)
|
if(res.code == 200) {
|
this.payLoading = false
|
window.open(`http://finpt.xjcz.gov.cn/fs-public/billQuery/findByOrderId.do?orderId=${res.msg}&deviceType=${device}`)
|
}else{
|
this.payLoading = false
|
this.$message({
|
type:'warning',
|
message: res.msg
|
})
|
}
|
}else{
|
const query = {
|
coalPayId: this.detailInfo.coalPays.id,
|
studentId: this.detailInfo.id
|
}
|
const res = await coalPersonPay(query)
|
if(res.code == 200) {
|
this.payLoading = false
|
window.open(`http://finpt.xjcz.gov.cn/fs-public/billQuery/findByOrderId.do?orderId=${res.msg}&deviceType=${device}`)
|
}else{
|
this.payLoading = false
|
this.$message({
|
type:'warning',
|
message: res.msg
|
})
|
}
|
}
|
},
|
checkTicket(){
|
window.open('http://finpt.xjcz.gov.cn/fs-public/index.do')
|
},
|
resetDataForm() {
|
this.dataForm = {
|
}
|
},
|
handleClose(){
|
this.info = {}
|
this.listVisible = false
|
},
|
closePay(){
|
this.detailVisible = false
|
this.payLoading = false
|
}
|
}
|
}
|
|
</script>
|
<style lang="scss" scoped>
|
.container{
|
width: 100%;
|
height: 100%;
|
max-width: 960px;
|
margin: 0 auto;
|
}
|
|
.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{
|
width: 100%;
|
max-width: 960px;
|
margin: 0 auto;
|
.el-loading-mask{
|
width: 60%;
|
height: 20%;
|
margin: 30vh auto;
|
border-radius: 20px;
|
padding: 10px;
|
.el-loading-spinner{
|
width: calc(100% - 20px);
|
top: 40%;
|
.el-icon-loading,.el-loading-text{
|
color: #000;
|
}
|
.el-icon-loading{
|
font-size: 24px;
|
}
|
}
|
}
|
.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>
|
