<template>
<div>
<div v-if="!isNoData">
<mt-header title="人工发放"></mt-header>
<div class="flex_center top_info">
<div>
<div class="netType_div"
:style="{background: (urlParamsDetail.netType == 1 ? '#13C2C2': '#1890FF')}"
>
<span>{{urlParamsDetail.netTypeName}}</span>
</div>
<div class="netNameTitle">{{urlParamsDetail.netName}}</div>
</div>
<div>
<img src="../../assets/img/Vector.png" style="width: 36px;height: 40px">
</div>
</div>
<div class="listTitle"><span class="listTitle_span">领取人信息</span></div>
<div class="inp_pad_resident">
<mt-field label="领取人姓名" placeholder="请输入领取人姓名(必填)" v-model="formData.residentName"></mt-field>
<mt-field label="身份证号" placeholder="请输入领取人身份证号" v-model="formData.idCar"></mt-field>
<mt-field label="手机号码" placeholder="请输入领取人手机号(必填)" v-model="formData.telephone"></mt-field>
<mt-field label="验证码" placeholder="请输入验证码(必填)" v-model="formData.code">
<span style="color: forestgreen;font-size: 12px" @click="getCode" v-if="sendFlag">发送验证码</span>
<span style="color: forestgreen;font-size: 12px" v-if="countDownTimeFlag" disabled>{{countDownTime}}s后重新获取</span>
<span style="color: forestgreen;font-size: 12px" @click="getCode" v-if="replaceSendFlag">重新获取验证码</span>
</mt-field>
</div>
<div class="bottom_btn">
<mt-button type="primary" @click="nextStep" size="large"> 下一步</mt-button>
</div>
</div>
<no-data v-if="isNoData">
<span slot="content">该网点目前非营业中...！</span>
<div slot="btn"></div>
</no-data>
</div>
</template>
<script>
import {Toast} from 'mint-ui'
import {getQueryVariable} from "../../utils/common";
import {getCheckShortMessage, getShortMessage} from "../../utils/api";
import NoData from "../component/noData";
export default {
components: {NoData},
data() {
return {
formData: {
residentName: undefined,
idCar: undefined,
telephone: undefined,
code: undefined
},
routerDetail: {},//路由信息
urlParamsDetail: {},//微信扫一扫所带参数信息
countDownTime: 60,
sendFlag: true,//发送显示
countDownTimeFlag: false,//倒计时显示
replaceSendFlag: false,//重新发送显示
isNoData: false,
}
},
created() {
// this.routerDetail = this.$route.query
// console.log( this.routerDetail)
// if (this.routerDetail.telephone) {
// this.formData = {
// residentName: this.routerDetail.residentName,
// idCar: this.routerDetail.idCar,
// telephone: this.routerDetail.telephone,
// }
// }
this.urltext()
},
methods: {
// 接收url后的数据
urltext() {
let id = getQueryVariable('id')
let netType = getQueryVariable('netType')
let netTypeName = getQueryVariable('netTypeName')
let netName = getQueryVariable('netName')
let netStauts = getQueryVariable('status')
let urlParams = {
id,
netType,
netTypeName,
netName,
status: netStauts
}
if (urlParams.status == 1) {
this.isNoData = true
}
this.urlParamsDetail = urlParams
},
getCode() {
var ckPhone = /^1(?:3[0-9]|4[5-9]|5[0-9]|6[12456]|7[0-8]|8[0-9]|9[0-9])[0-9]{8}$/;
var cktel = /^0[1-9][0-9]{1,2}-[2-8][0-9]{6,7}$/;
if (ckPhone.test(this.formData.telephone) || cktel.test(this.formData.telephone)) {
this.countDownTime = 60
this.sendFlag = false
this.countDownTimeFlag = true
this.replaceSendFlag = false
let par = {
mobile: this.formData.telephone
}
getShortMessage(par)
this.getTimeDown()
} else {
return Toast({
message: '请输入正确的手机号！',
duration: 2000
});
}
},
getTimeDown() {
this.timer = setInterval(() => {
this.countDownTime--
if (this.countDownTime == 0) {
this.replaceSendFlag = true
this.countDownTimeFlag = false
clearInterval(this.timer)
}
}, 1000)
},
nextStep() {
if (!this.formData.residentName || this.formData.residentName.trim() == '') {
return Toast({
message: '请输入领取人姓名！',
duration: 2000
});
}
if (this.formData.idCar) {
let result = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X)$/i.test(this.formData.idCar)
if (!result) {
return Toast({
message: '请输入正确的身份证号！',
duration: 2000
});
}
}
if (!this.formData.telephone) {
return Toast({
message: '请输入领取人手机号！',
duration: 2000
});
}
if (this.formData.telephone) {
var ckPhone = /^1(?:3[0-9]|4[5-9]|5[0-9]|6[12456]|7[0-8]|8[0-9]|9[0-9])[0-9]{8}$/;
var cktel = /^0[1-9][0-9]{1,2}-[2-8][0-9]{6,7}$/;
if (ckPhone.test(this.formData.telephone) || cktel.test(this.formData.telephone)) {}
else {
return Toast({
message: '请输入正确的手机号！',
duration: 2000
});
}
}
let params = {
code: this.formData.code,
mobile: this.formData.telephone
}
getCheckShortMessage(params).then(({data}) => {
if (data.data) {
let par = {
...this.urlParamsDetail,
...this.formData
}
this.$router.push({path:'/manualCollection', query: par})
} else {
return Toast({
message: '请输入正确的验证码！',
duration: 2000
});
}
})
},
}
}
</script>
<style lang="less">
.inp_pad_resident {
padding: 0px 16px!important;
color: #42526E!important;
span {
font-size: 14px!important;
margin-left: 5px;
}
.mint-cell {
border-bottom: 0.5px solid rgba(0, 0, 0, 0.05)!important;
/*.mint-cell-title {*/
/* width: 80px!important;*/
/* flex: none;*/
/*}*/
}
::-webkit-input-placeholder
{
text-align: right!important;
color: #C1C7D0!important;
font-size: 14px!important;
}
input[type=text] {
border: 0px!important;
}
input[type=text]:focus {
box-shadow: 0 0 0 0!important;
}
}
.bottom_btn {
position: fixed;
z-index: 2;
bottom: 0px;
width: 100%;
}
.top_info {
border: 1px solid #F3F3F3;
border-radius: 0px 0px 16px 16px;
padding: 12px;
box-shadow: darkgrey 0px 2px 20px -10px;
}
.netType_div {
text-align: center;
color: white;
border-radius: 8px 2px;
padding: 4px 9px;
/*width: 50px;*/
font-size: 10px
}
.netNameTitle {
font-size: 14px!important;
font-weight: 500;
margin-top: 11px
}
.listTitle {
margin: 20px 0px 12px 16px;
.listTitle_span {
font-weight: 600;
font-size: 16px;
line-height: 22px;
}
}
</style>