|
<template>
|
<div class='text-main'>
|
<van-nav-bar title="签约信息" left-arrow />
|
<van-form validate-first ref="credRef">
|
<van-field v-model.trim="dataObj.name" label="姓名：" readonly />
|
<van-field v-model.trim="dataObj.idNo" label="身份证号：" readonly />
|
<van-field v-model.trim="dataObj.mblNo" label="手机号：" readonly />
|
<van-field v-model.trim="dataObj.amt" label="租金金额：" readonly />
|
<van-field v-model.trim="dataObj.term" label="分期期数：" readonly />
|
<van-field v-model.trim="dataObj.payDay" label="还款日：" readonly />
|
<van-collapse v-model="activeName" accordion>
|
<van-collapse-item title="还款计划" name="1">
|
<table class="tab" cellspacing='0'>
|
<tr>
|
<th>期数</th>
|
<th>还款日期</th>
|
<th>还款金额</th>
|
</tr>
|
<tr v-for="(val,index) in dataObj.replyPlanInfItemVos" :key="index" align="center">
|
<td>{{val.term}}期</td>
|
<td>{{val.rpyDay}}</td>
|
<td>{{val.rpyAmt}}元</td>
|
</tr>
|
</table>
|
</van-collapse-item>
|
<van-field v-model.trim="dataForm.verCode" center clearable label="签约验证码" placeholder="请输入短信授权码">
|
<template #button>
|
<van-button size="small" color="#E43A28" @click.stop="getCode" :disabled="isdisabled">{{codeText}}</van-button>
|
</template>
|
</van-field>
|
</van-collapse>
|
<div class="index-title">
|
<van-checkbox v-model="checked" style="height:30px;margin-right:5px" checked-color="#E43A28"></van-checkbox>
|
<div> 本人已阅读并同意签署<span @click="show=true" style="border-bottom:1px solid #00F; color:#00F">《借款合同》</span>同意报送贷款<br>相关信息至金融信用信息基础数据库（人行征信系统）</div>
|
</div>
|
<div style="margin: 16px;margin-top:30px">
|
<van-button round block color="#E43A28" @click="onFailed" native-type="submit">立即签约</van-button>
|
</div>
|
</van-form>
|
<van-popup v-model="show">
|
<div class="agreenBox">
|
<div class="agreen-html" v-html="agreementext"></div>
|
<div class="close-agreen" @click="show = false">
|
<van-icon name="close" color="#c8c9cc" />
|
</div>
|
</div>
|
</van-popup>
|
<!-- <van-popup v-model="show" closeable ></van-popup> -->
|
</div>
|
</template>
|
|
<script>
|
//这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
|
//例如：import 《组件名称》 from '《组件路径》';
|
import { repstrh } from '../../../static/agreement1'
|
export default {
|
//import引入的组件需要注入到对象中才能使用
|
components: {},
|
data() {
|
//这里存放数据
|
return {
|
dataForm: {
|
idNo: '',
|
mblNo: '',
|
userName: '',
|
},
|
activeName: '0',
|
isdisabled: false,
|
tableinit:['还款期数','还款日期','还款金额'],
|
dataObj: {},
|
agreementext: repstrh(),
|
checked: false,
|
show: false,
|
codeText: '获取授权码',
|
};
|
},
|
//监听属性 类似于data概念
|
computed: {},
|
//监控data中的数据变化
|
watch: {},
|
//方法集合
|
methods: {
|
onFailed() {
|
// this.$api.checkVerifyCode()
|
// 验证通过
|
if (this.dataForm.verCode == undefined || this.dataForm.verCode == '') return this.$notify('请填写授权码')
|
this.$api.checkVerifyCode({ verifyCode: this.dataForm.verCode, orderId: this.$route.query.orderId }).then(res => {
|
if (!this.checked) return this.$notify('请阅读并勾选数据授权协议')
|
this.$api.signContract({ orderId: this.$route.query.orderId }).then(res => {
|
this.$router.push('/main/bancardsucces')
|
})
|
})
|
},
|
getCode: function (e) {
|
this.setTime()
|
},
|
setTime: function () {
|
let time = 60
|
let i = 0
|
let that = this
|
//1.在60秒之内，button上倒计时60秒，并显示
|
//2.向controller请求验证码，并发送到指定的手机号上面
|
let set = setInterval(function () {
|
that.codeText = --time + '秒后重发'
|
i++
|
//此变量用于标识只调用一次获取验证码的函数
|
if (i == 1) {
|
console.log('get code start1 ... ')
|
//使获取验证码按钮不可点击
|
that.isdisabled = true
|
that.getVerificationCode()
|
}
|
}, 1000)
|
|
//60秒之后需要做的事情
|
setTimeout(function () {
|
//恢复获取验证码按钮可点击
|
that.isdisabled = false
|
that.codeText = '获取授权码'
|
clearInterval(set) //清除计时器
|
}, time * 1000) //60000
|
},
|
getVerificationCode: function () {
|
// 向服务器获取验证码
|
this.$api.sendVerifyCode({ orderId: this.$route.query.orderId }).then(res => {
|
this.$notify_success('授权码发送成功！')
|
})
|
},
|
signInit() {
|
this.$api.signContractInfo({ orderId: this.$route.query.orderId }).then(res => {
|
console.log(res)
|
this.dataObj = res.body
|
})
|
}
|
},
|
//生命周期 - 创建完成（可以访问当前this实例）
|
created() {
|
this.signInit()
|
},
|
//生命周期 - 挂载完成（可以访问DOM元素）
|
mounted() {
|
|
}
|
}
|
</script>
|
<style lang="less" scoped>
|
.text-main {
|
background-color: @c-f5;
|
min-height: 100vh;
|
//padding-bottom: 44px;
|
.van-form {
|
margin-top: 5px;
|
}
|
.index-title {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 10px;
|
}
|
/deep/ .van-field__right-icon .van-icon {
|
font-size: 0.5rem;
|
}
|
/deep/.van-popup__close-icon {
|
color: #c8c9cc;
|
}
|
.van-cell__title {
|
color: #999999;
|
font-size: 12px;
|
}
|
}
|
.agreenBox {
|
width: 80vw;
|
height: 70vh;
|
padding: 60px 20px 30px 20px;
|
position: relative;
|
}
|
.agreen-html {
|
width: 100%;
|
height: 100%;
|
overflow: scroll;
|
box-sizing: border-box;
|
}
|
.close-agreen {
|
.lh(30px);
|
.flex(center, center);
|
|
.van-icon {
|
font-size: @font-16;
|
}
|
}
|
.tab{
|
width: 100%;
|
th{
|
background-color: #F9F7FC;
|
height: 35px;
|
color: #666666;
|
font-size: 13px;
|
}
|
td{
|
height: 35px;
|
font-size: 14px;
|
}
|
}
|
</style>
|
