<!--
* @Author: jiangzaicheng jiangzaicheng_jzc@163.com
* @Date: 2022-07-07 16:13:13
* @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
* @LastEditTime: 2022-07-28 14:56:06
* @FilePath: \mcep-h5\src\components\common\Bottom.vue
* @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
<div class="body">
<div class="rarle">
<tatle-bar :tatle="tatleName"></tatle-bar>
</div>
<div>
<div class="layout">
<van-row type="flex" class="CoolName">
<van-col span="24" class="coollayout">个人信息</van-col>
</van-row>
<div class="layoutbody">
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-field label="身份证号" v-model="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="姓名" v-model="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="电话" v-model="phone" input-align="right" />
</van-cell-group>
</van-col>
</van-row>
</div>
<van-row type="flex" class="CoolName">
<van-col span="24" class="coollayout">借款信息</van-col>
</van-row>
<div class="layoutbody">
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-field label="贷款品种" v-model="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="借款金额" v-model="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-field is-link readonly :value="loanValue" label="借款用途" input-align="right" placeholder="请选择借款用途" @click="showLoan = true" />
<van-popup v-model="showLoan" round position="bottom">
<van-picker
show-toolbar
:columns="loanList"
@cancel="showLoan = false"
@confirm="onConfirmLoan"
/>
</van-popup>
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field :value="outcsinfo.place" is-link readonly label="意向地区" input-align="right" placeholder="请选择所在地区" @click="onAddress" />
<van-popup
v-model="showAddress"
position="bottom"
>
<van-area
title="请选择地区"
@confirm="changeAddress"
:area-list="areaList"
columns-num="3"
/>
</van-popup>
</van-col>
</van-row>
<van-divider :style="{ margin: 0 }"></van-divider>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field is-link readonly :value="orgValue" label="意向机构" input-align="right" placeholder="请选择意向机构" @click="showOrg = true" />
<van-popup v-model="showOrg" round position="bottom">
<van-picker
show-toolbar
:columns="orgList"
@cancel="showOrg = false"
@confirm="onConfirmOrg"
/>
</van-popup>
</van-col>
</van-row>
<van-divider :style="{ margin: 0 }"></van-divider>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-field is-link readonly :value="mangerValue" label="意向客户经理" input-align="right" placeholder="请选择意向客户经理" @click="showManager = true" />
<van-popup v-model="showManager" round position="bottom">
<van-picker
show-toolbar
:columns="mangerList"
@cancel="showManager = false"
@confirm="onConfirmManager"
/>
</van-popup>
</van-col>
</van-row>
<van-divider :style="{ margin: 0 }"></van-divider>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-field readonly label="客户经理电话" :value="phoneCard" input-align="right" />
</van-cell-group>
</van-col>
</van-row>
<van-row type="flex" class="layoutName">
<van-col span="24">
<van-cell-group>
<van-button class="vbutton" block type="info" @click="recognition()">立即提交</van-button>
</van-cell-group>
</van-col>
</van-row>
</div>
</div>
</div>
</div>
</template>
<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
import { Picker } from "vant";
import { area } from "../../model/domain/areaData";
import { Area } from "vant";
Vue.use(Picker);
@Component({
name: "Intention",
})
export default class Intention extends Vue {
tatleName = "产品意向申请";
//身份证
idcard = "23232111978211";
//姓名
name = "刘明明";
//电话
phone = "15665025053";
//贷款详情
varieties = "一般经营性贷款";
//借款金融
amount = "";
//借款期限
// borrow = "24月"
//借款用途
purposes = "经营";
//业务办理地区
// area = "黑龙江省-哈尔滨市-松北区"
//意向机构
intentions = "哈尔滨农信社松北区枝江大道分社";
//客户经理
customer = "赵恒请";
//客户经理电话
phoneCard = "15673989898";
//地区
show = false;
fieldValue = "";
cascaderValue = "";
showOrg = false;
orgValue = "";
showManager = false;
mangerValue = "";
mangerList = ["吕晨涛", "龙易轩","范丽","雷娟","郝芳"];
//机构列表
orgList = ["哈尔滨道里区支行", "哈尔滨松北区支行"];
areaList = area;
outcsinfo = {
place: "请选择地区", //出行地点
};
showAddress = false;
//借款用途
loanValue =''
showLoan = false
loanList = ["消费", "经营"];
onAddress() {
this.showAddress = true;
}
// 点击地址选择框的确认
changeAddress(event: any) {
// console.log(event,'返回格式数组')
this.showAddress = false;
let st = "";
event.forEach((item: any) => {
st = st + item.name;
});
this.outcsinfo.place = st;
}
onConfirmLoan(loanValue: string) {
this.loanValue = loanValue;
this.showLoan = false;
}
onConfirmOrg(orgValue: string) {
this.orgValue = orgValue;
this.showOrg = false;
}
onConfirmManager(mangerValue: string) {
this.mangerValue = mangerValue;
this.showManager = false;
}
// 选项列表，children 代表子选项，支持多级嵌套
// options = [
// {
// text: '浙江省',
// value: '330000',
// children: [{ text: '杭州市', value: '330100' }],
// },
// {
// text: '江苏省',
// value: '320000',
// children: [{ text: '南京市', value: '320100' }],
// },
// ]
// onFinish() {
// this.show = false;
// this.fieldValue = selectedOptions.map((option) => option.text).join('/');
// }
recognition() {
this.$router.push({
name: "LinSuccess",
});
}
}
</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;
}
</style>