<!--
*@Author wangliang
*@date 20220729
-->
<template>
<div style="background-color: #FFFFFF">
<div class="rarle">
<!--上部分-->
<div style="width:100%;height: calc(25vh);background: linear-gradient(90deg, #76befa 0%, #3672f1 99%);">
<tatle-bar :tatle="titleName" :tatleflag="titleflag" >
</tatle-bar>
<div style="margin-top: 10%">
<van-row style="text-align: center;">
<van-col span="5">
<van-col span="24" style="text-align: right;z-index: 0"><img :src="choiceA?require('@/assets/svg/u1275.svg'):require('@/assets/svg/u1280.svg')"/></van-col>
<van-col span="24" style="z-index: 1;margin-top: -28%;margin-left: 26px;color: #1890FF"><span >1</span></van-col>
<!-- <van-col span="24" style="text-align: right;margin-top: 10px;color: #FFFFFF">授权书确认</van-col>-->
</van-col>
<van-col span="5"><img :src="require('@/assets/svg/u1283.svg')"/></van-col>
<van-col span="4">
<van-col span="24"><img :src="choiceB?require('@/assets/svg/u1275.svg'):require('@/assets/svg/u1280.svg')"/></van-col>
<van-col span="24" style="z-index: 1;margin-top: -34%;margin-left: 0px;color: #1890FF"><span >2</span></van-col>
<!-- <van-col span="24" style="margin-top: 10px;color: #FFFFFF">授信合同录入</van-col>-->
</van-col>
<van-col span="5"><img :src="require('@/assets/svg/u1283.svg')"/></van-col>
<van-col span="5" style="text-align: left">
<van-col span="24"><img :src="choiceC?require('@/assets/svg/u1275.svg'):require('@/assets/svg/u1280.svg')"/></van-col>
<van-col span="24" style="z-index: 1;margin-top: -28%;margin-left: 8px;color: #1890FF"><span >3</span></van-col>
<!-- <van-col span="24" style="text-align: left;margin-top: 10px;color: #FFFFFF">合同确认</van-col>-->
</van-col>
</van-row>
<van-row style="text-align: center">
<van-col span="8" :class="choiceA?'wordType':'wordTypeB'">授权书确认</van-col>
<van-col span="8" :class="choiceB?'wordType':'wordTypeB'">授信合同录入</van-col>
<van-col span="8" :class="choiceC?'wordType':'wordTypeB'">合同确认</van-col>
</van-row>
</div>
</div>
<div v-if="show">
<div style="background-color: #FFFFFF;text-align: center;margin-top: 10%">
<img :src="require('@/assets/images/shouquanwenjian.png')" style="width: 40%;height: 40%;"/>
</div>
<div style="margin-top: 10%;text-align: center;color: #3478E4">
《xxxxx授权书》
</div>
<div style="margin-top: 4%;text-align: center;color: #3478E4">
《xxxxxxxxxx授权书》
</div>
<div style="margin-top: 4%;text-align: center;color: #3478E4">
《xxxxxxxxxx授权书》
</div>
<div style="margin-top: 4%;text-align: center;color: #3478E4">
《xxxxxxxxxxxxx授权书》
</div>
<div>
<van-button style=" width: 90%;
margin-left: 5%;
background-color: rgb(24, 144, 255);
position: absolute;
margin-top: 14%;
height: 5%;
border-radius: 5px;" type="primary" @click="countB">下一步</van-button> </div>
</div>
<div v-if="showB">
<div class="layout">
<scroller-view v-calculate-height :pulldown="pulldown" :pullup="pullup">
<van-row type="flex" class="CoolName">
<van-col span="24" class="coollayout" style="color: black;font-size: 14px;font-weight: bolder;margin-top: 10px;margin-left: 10px;">个人信息</van-col>
</van-row>
<div class="layoutbody">
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-field label="身份证号" :value="idcard" input-align="right" />
</van-cell-group>
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-field label="姓名" :value="name" input-align="right" />
</van-cell-group>
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-field label="手机号码" :value="phone" input-align="right" />
</van-cell-group>
</van-col>
</van-row>
</div>
<van-row type="flex" class="CoolName">
<van-col span="24" class="coollayout" style="color: black;font-size: 14px;font-weight: bolder;margin-top: 10px;margin-left: 10px;">借款信息</van-col>
</van-row>
<div class="layoutbody">
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-field label="贷款品种" :value="varieties" input-align="right" />
</van-cell-group>
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-field label="借款金额" :value="amount" input-align="right" />
</van-cell-group>
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-field label="借款期限" :value="borrow" input-align="right" />
</van-cell-group>
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-field label="借款用途" :value="purposes" input-align="right" />
</van-cell-group>
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field is-link readonly label="业务办理地区" placeholder="请选择所在地区" @click="show = true" />
<van-popup v-model="show" round position="bottom">
<van-cascader title="请选择所在地区" :options="options" @close="show = false"
/>
</van-popup>
</van-col>
</van-row>
<!-- <van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-field label="客户经理电话" :value="phoneCard" input-align="right" />
</van-cell-group>
</van-col>
</van-row>-->
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field is-link readonly label="意向机构" placeholder="请选择" @click="show = true" />
<van-popup v-model="show" round position="bottom">
<van-cascader title="请选择所在地区" :options="options" @close="show = false"
/>
</van-popup>
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-field label="客户经理" :value="customer" input-align="right" />
</van-cell-group>
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="12">
<van-button style="width: 80%;height: 35px;margin-left: 10%;margin-top: 10px" plain block type="info" @click="beforeStep()">上一步</van-button>
</van-col>
<van-col span="12">
<van-button block type="info" style="width: 80%;height: 35px;margin-left: 10%;margin-top: 10px" @click="nextStep()">下一步</van-button>
</van-col>
</van-row>
</div>
</scroller-view>
</div>
</div>
<div v-if="showC">
<div style="background-color: #FFFFFF;text-align: center;margin-top: 10%">
<img :src="require('@/assets/images/shouquanwenjian.png')" style="width: 60%;height: 60%;"/>
</div>
<van-row type="flex" class="layoutName" style="margin-top: 30%">
<van-col span="12">
<van-button style="width: 80%;height: 35px;margin-left: 10%;margin-top: 10px" plain block type="info" @click="countB()">上一步</van-button>
</van-col>
<van-col span="12">
<van-button block type="info" style="width: 80%;height: 35px;margin-left: 10%;margin-top: 10px" @click="confirm()">确认</van-button>
</van-col>
</van-row>
</div>
</div>
<!-- <div v-show=" style="background-color: #b80c0c;width: 90%;height: 50%;">
<van-password-input
:value="value"
:mask="false"
:focused="showKeyboard"
@focus="showKeyboard = true"
/>
</div>-->
<!-- <a-modal v-model:visible="showDialog" title="请输入短信验证码" cancelText="取消" okText="确定" @ok="handleOk">
<p>{{phoneNo}}</p>
<a-input placeholder="请输入验证码"></a-input>
<p style="color: #00c6ff">发送验证码</p>
</a-modal>-->
<a-modal v-model:visible="showDialog" title="请输入短信验证码">
<template #footer>
<a-button key="submit" type="primary" :loading="loading" @click="handleOk">确定</a-button>
</template>
<p>{{phoneNo}}</p>
<a-input placeholder="请输入验证码"></a-input>
<p style="color: #00c6ff">发送验证码</p>
</a-modal>
</div>
</template>
<script lang="ts">
import {Component, Vue} from "vue-property-decorator";
@Component({
name: "SelfHelpLoan",
})
export default class SelfHelpLoan extends Vue{
phoneNo="17703111111";
showDialog=false;
showC=false;
pullup=true;
pulldown=true;
choiceA=true;
choiceB=false;
choiceC=false;
titleName="自助贷款";
titleflag=true;
show=true;
showB=false;
countB() {
this.show=false;
this.showB=true;
this.showC=false;
this.choiceA=false;
this.choiceB=true;
this.choiceC=false;
}
//身份证
idcard = "23232111978211";
//姓名
name = "刘明明";
//电话
phone = "15665025053";
//贷款详情
varieties = "一般经营性贷款"
//借款金融
amount = "500万"
//借款期限
borrow = "24月"
//借款用途
purposes = "经营"
//业务办理地区
area = "黑龙江省-哈尔滨市-松北区"
//意向机构
intentions = "哈尔滨农信社松北区枝江大道分社"
//客户经理
customer = "赵恒请"
nextStep() {
this.show=false;
this.showB=false;
this.showC=true;
this.choiceA=false;
this.choiceB=false;
this.choiceC=true;
}
beforeStep() {
this.show=true;
this.showB=false;
this.showC=false;
this.choiceA=true;
this.choiceB=false;
this.choiceC=false;
}
confirm() {
this.showDialog=true;
}
handleOk() {
this.$router.push({
name: "ApplyResult",
});
}
}
</script>
<style scoped lang="scss">
.layout {
background: rgba(249, 249, 249, 1);
}
.coollayout {
margin: 3%;
}
.CoolName {
font-family: 'Arial Negreta', 'Arial Normal', 'Arial';
font-weight: 700;
font-style: normal;
font-size: 16px;
}
.layoutName {
font-family: 'Arial Normal', 'Arial';
font-weight: 400;
font-style: normal;
font-size: 13px;
color: #333333;
}
.wordType{
margin-top: 10px;color: #FFFFFF
}
.wordTypeB{
margin-top: 10px;color: rgba(255, 255, 255, 0.75)
}
:root {
--van-dialog-message-max-height: 60vh
}
</style>