|
|
<template name='tpl'>
<view class="page">
<view class="a_box">
<view class="a_one">
<text class="a_bt">必填信息</text>
</view>
<view class="a_one">
<text class="a_zi">姓名</text>
<input class="a_int" data-id="loanName" placeholder="请填写姓名" value={loanName} maxlength="4" oninput="insertInput"></input>
</view>
<view class="a_one">
<text class="a_zi">性别</text>
<radio-group class="radio-group" data-id="sex" onChange={this.radiogroupChanged}>
<label>
<radio color="#ffad00" id="man" value="0" />
<text>男</text>
</label>
<label>
<radio color="#ffad00" id="female" value="1" />
<text>女</text>
</label>
</radio-group>
</view>
<view class="a_one">
<text class="a_zi">年龄</text>
<input class="a_int" data-id="age" placeholder="请填写年龄" value={age} keyboard-type="number" maxlength="2" oninput="insertInput"></input>
</view>
<view class="a_one">
<text class="a_jj">紧急联系人1</text>
</view>
<view class="a_one">
<text class="a_zi">姓名</text>
<input class="a_int" data-id="contactFirstName" placeholder="请填写姓名" value={contactFirstName} maxlength="6" oninput="insertInput" ></input>
</view>
<view class="a_one">
<text class="a_zi">电话</text>
<input class="a_int" data-id="contactFirst" placeholder="请填写电话" value={contactFirst} maxlength="11" keyboard-type="number" oninput="insertInput" ></input>
</view>
<view class="a_one">
<text class="a_zi">关系</text>
<input class="a_int" data-id="contactFirstRelation" placeholder="请填写关系" value={contactFirstRelation} maxlength="10" oninput="insertInput" ></input>
</view>
<view class="a_one">
<text class="a_jj">紧急联系人2</text>
</view>
<view class="a_one">
<text class="a_zi">姓名</text>
<input class="a_int" data-id="contactSecondName" placeholder="请填写姓名" value={contactSecondName} maxlength="6" oninput="insertInput" ></input>
</view>
<view class="a_one">
<text class="a_zi">电话</text>
<input class="a_int" data-id="contactSecondPhone" placeholder="请填写电话" value={contactSecondPhone} maxlength="11" keyboard-type="number" oninput="insertInput" ></input>
</view>
<view class="a_one">
<text class="a_zi">关系</text>
<input class="a_int" data-id="contactSecondRelation" placeholder="请填写关系" value={contactSecondRelation} maxlength="6" oninput="insertInput" ></input>
</view>
<view class="a_one">
<text class="a_zi">芝麻分</text>
<input class="a_int" data-id="sesameScore" placeholder="请填写芝麻分" value={sesameScore} keyboard-type="number" maxlength="10" oninput="insertInput" ></input>
</view>
<view class="item_box">
<text class="title">{'上传芝麻分截图（'+zmThumbs.length+'/1）'}</text>
<view class="img_box">
<view class="img_one" v-for="(item,index) in zmThumbs">
<image class="image" style={'width:'+imgHeight+'px;height:'+imgHeight+'px;'} src={item} mode="aspectFill"></image>
<view class="del_img_box" onclick="del_zm_image" data-index={index}>
<image class="del_img" src="../../images/main4/del_img.png"></image>
</view>
</view>
<view class="img_one add_img" onclick="fnZmChooseImage" v-if={zmThumbs.length < 1}>
<image class="image" style={'width:'+imgHeight+'px;height:'+imgHeight+'px;'} src="../../images/main4/add_img.png"></image>
</view>
</view>
</view>
<view class="a_one">
<text class="a_zi">身份证号</text>
<input class="a_int" data-id="certificateNo" placeholder="请填写证件号" value={certificateNo} maxlength="18" oninput="insertInput" ></input>
</view>
<view class="item_box">
<text class="title">{uploadCertTps}</text>
<view class="img_box">
<view class="img_one" v-if={certificateFront != ''}>
<image class="image" style={'width:'+imgHeight+'px;height:'+imgHeight+'px;'} src={certificateFront} mode="aspectFill"></image>
<view class="del_img_box" onclick="del_image" data-index='1'>
<image class="del_img" src="../../images/main4/del_img.png"></image>
</view>
</view>
<view class="img_one" v-if={certificateBack != ''}>
<image class="image" style={'width:'+imgHeight+'px;height:'+imgHeight+'px;'} src={certificateBack} mode="aspectFill"></image>
<view class="del_img_box" onclick="del_image" data-index='2'>
<image class="del_img" src="../../images/main4/del_img.png"></image>
</view>
</view>
<view class="img_one" v-if={certificateHandler != ''}>
<image class="image" style={'width:'+imgHeight+'px;height:'+imgHeight+'px;'} src={certificateHandler} mode="aspectFill"></image>
<view class="del_img_box" onclick="del_image" data-index='3'>
<image class="del_img" src="../../images/main4/del_img.png"></image>
</view>
</view>
<view class="img_one add_img" onclick="fnChooseImage(1)" v-if={!certificateFront}>
<image class="image" style={'width:'+imgHeight+'px;height:'+imgHeight+'px;'} src="../../images/main4/add_img.png"></image>
</view>
<view class="img_one add_img" onclick="fnChooseImage(2)" v-if={!certificateBack}>
<image class="image" style={'width:'+imgHeight+'px;height:'+imgHeight+'px;'} src="../../images/main4/add_img.png"></image>
</view>
<view class="img_one add_img" onclick="fnChooseImage(3)" v-if={!certificateHandler}>
<image class="image" style={'width:'+imgHeight+'px;height:'+imgHeight+'px;'} src="../../images/main4/add_img.png"></image>
</view>
</view>
</view>
</view>
<!-- btn -->
<view class="flex1"></view>
<view class="footer">
<text v class="btn btn_orange" onclick="fnSubmit">去完善证件信息</text>
</view>
<input style = "display:none" id="sexValue"/>
</view>
</template>
<script>
import $util from '../../utils/util.js'
import {md5} from '../../script/md5.js'
export default {
name: 'address_edit',
data() {
return{
id: null,
reSubmit: false,
certificateFront: '',
sesameScore: '',
sesameImg: '',
certificateNo: '',
certificateBack: '',
certificateHandler: '',
uploadCertTps: '请上传：-证件正面-证件反面-手持证件-',
zmThumbs: [],
frontThumbs: [],
backThumbs: [],
handlerThumbs: [],
loanName: '',
sesameScore: '',
productId: null,
formId: null,
sex: '',
age: '',
reSubmit: false,
showProgress: false,
contactFirstName: '',
contactFirstRelation: '',
contactFirst: '',
contactSecondName: '',
contactSecondRelation: '',
contactSecondPhone: '',
postdata: {}
}
},
computed:{
imgHeight(){
return Math.floor((api.winWidth - 4*15)/3);
}
},
methods: {
apiready(){
this.data.ip = api.loadSecureValue({ sync: true, key: 'devIp' });
let pageParam = api.pageParam;
console.log("id"+pageParam.id)
this.data.productId = pageParam.id;
$util.showProgress();
showProgress = true;
let url = this.data.ip+"/api/user/getLoan";
let arr = new Array(5);
let clientType = api.systemType;
let version = api.appVersion;
let device = api.deviceId;
let devicetype = api.deviceModel;
arr[0] = 'clienttype=' + clientType;
arr[1] = 'version=' + version;
arr[2] = 'device=' + device;
arr[3] = 'devicetype=' + devicetype;
arr.sort();
arr[4] = 'wisdom';
var jmstr = arr.toString().replace(/,/g, '');
var sign = md5(jmstr);
let bodydata = {'productId': this.data.productId}
let that = this
$util.ajax({
url: url,
method: 'post',
headers: {
'clienttype': api.systemType,
'version': api.appVersion,
'device': api.deviceId,
'devicetype': api.deviceModel,
'sign': sign,
'jmstr': jmstr,
},
data: {body: bodydata}
}, function(res, err){
if (res) {
if (res.code == 200 && res.data) {
let result = res.data;
that.data.contactSecondName=result.contactSecondName;
that.data.contactFirstRelation= result.contactFirstRelation;
that.data.loanName=result.loanName;
that.data.contactSecondRelation= result.contactSecondRelation
that.data.contactFirstName= result.contactFirstName;
that.data.contactFirst= result.contactFirst;
that.data.contactSecondPhone= result.contactSecondPhone;
that.data.sex= result.sex;
if(that.data.sex == '男'){
document.getElementById("man").checked = true
}else{
document.getElementById("female").checked = true
}
document.getElementById('sexValue').value=that.data.sex
that.data.formId= result.id;
that.data.age= result.age;
}else{
document.getElementById("man").checked = true
}
}
$util.hideProgress();
showProgress = false;
});
},
radiogroupChanged(e) {
let that = this
console.log("值"+e.detail.value)
let value = e.detail.value
value = value=='0'?'男':'女'
document.getElementById('sexValue').value=value
// let ss = document.getElementById('sexValue').value
},
insertInput(e){
let id = e.currentTarget.dataset.id;
let value = e.detail.value;
if (id == 'loanName') {
this.data.loanName = value;
} else if (id == 'sex') {
this.data.sex = value;
} else if (id == 'contactSecondPhone') {
this.data.contactSecondPhone = value;
} else if (id == 'contactSecondRelation') {
this.data.contactSecondRelation = value;
} else if (id == 'contactSecondName') {
this.data.contactSecondName = value;
} else if (id == 'contactFirst') {
this.data.contactFirst = value;
} else if (id == 'contactFirstRelation') {
this.data.contactFirstRelation = value;
} else if (id == 'contactFirstName') {
this.data.contactFirstName = value;
} else if (id == 'age') {
this.data.age = value;
}
},
fnChooseStr(e){
let code = e.detail.code;
let val = e.detail.value;
this.data.quid = code.join(",");
this.data.qustr = val.join(",");
},
onswitchchange(e){
this.data.def = e.detail.value;
},
isMobile(str) {
var mobileReg = /^1(3[0-9|4[0-9|5[0-9|6[0-9|7[0-9|8[0-9|9[0-9])\d{8}$/;
return mobileReg.test(str);
},
fnSubmit(){
if(showProgress){
$util.toast('数据正在加载中')
return
}
if(this.data.reSubmit){
$util.toast('不可重复提交')
return
}
let loanName = this.data.loanName ;
let sex = document.getElementById('sexValue').value ;
let age = this.data.age ;
let contactSecondPhone = this.data.contactSecondPhone;
let contactSecondRelation = this.data.contactSecondRelation;
let contactSecondName = this.data.contactSecondName;
let contactFirst = this.data.contactFirst;
let contactFirstRelation = this.data.contactFirstRelation;
let contactFirstName = this.data.contactFirstName;
if (!loanName) {
$util.toast('请输入本人姓名~');
return;
}
if (!age) {
$util.toast('请输入年龄~');
return;
}
if (!contactSecondRelation) {
$util.toast('请输入与联系人2关系~');
return;
}
if (loanName.length > 4) {
$util.toast('姓名不得超过4个字符~');
return;
}
if (loanName.length < 2) {
$util.toast('姓名不得少于2个字符~');
return;
}
if (!sex) {
$util.toast('请选择性别~');
return;
}
if (!this.isMobile(contactSecondPhone)) {
$util.toast('请输入正确的联系人2手机号~');
return;
}
if (!this.isMobile(contactFirst)) {
$util.toast('请输入正确的联系人1手机号~');
return;
}
if (!contactFirstName) {
$util.toast('请输入联系人1姓名');
return;
}
if (!contactFirstRelation) {
$util.toast('请输入联系人1关系~');
return;
}
if (!contactSecondName) {
$util.toast('请输入联系人2姓名~');
return;
}
this.data.postdata.contactSecondName=contactSecondName;
this.data.postdata.contactFirstRelation= contactFirstRelation;
this.data.postdata.loanName=loanName;
this.data.postdata.contactSecondRelation= contactSecondRelation
this.data.postdata.contactFirstName= contactFirstName;
this.data.postdata.contactFirst= contactFirst;
this.data.postdata.contactSecondPhone= contactSecondPhone;
this.data.postdata.sex= sex;
this.data.postdata.age= age;
this.data.postdata.productId = api.pageParam.id;
this.data.postdata.formId= this.data.formId;
this.data.reSubmit = true;
let url = this.data.ip+"/api/user/loan";
let arr = new Array(5);
let clientType = api.systemType;
let version = api.appVersion;
let device = api.deviceId;
let devicetype = api.deviceModel;
arr[0] = 'clienttype=' + clientType;
arr[1] = 'version=' + version;
arr[2] = 'device=' + device;
arr[3] = 'devicetype=' + devicetype;
arr.sort();
arr[4] = 'wisdom';
var jmstr = arr.toString().replace(/,/g, '');
var sign = md5(jmstr);
let bodydata = this.data.postdata
let that = this
$util.ajax({
url: url,
method: 'post',
headers: {
'clienttype': api.systemType,
'version': api.appVersion,
'device': api.deviceId,
'devicetype': api.deviceModel,
'sign': sign,
'jmstr': jmstr,
},
data: {body: bodydata}
}, function(res, err){
that.data.reSubmit = false
if (res) {
if (res.code == 200) {
bodydata.formId = res.data;
$util.openWin({
name: 'apply_'+bodydata.formId,
url: '../sfz/sfz.stml',
title: '上传证件',
pageParam: {
productId: api.pageParam.id
}
});
} else {
$util.toast(res.msg);
}
} else {
$util.toast('网络错误');
}
});
}
}
}
</script>
<style>
.radio-group {
flex-direction:row;
}
label {
margin: 5px;
}
.page {
height: 100%;
background-color: #f6f6f6;
}
.a_box{
padding: 0 15px;
background-color: white;
}
.a_one{
flex-direction: row;
justify-content: space-between;
align-items: center;
height: 51px;
border-top: 1px solid #f8f8f8;
}
.a_img{
height: 65px;
}
.a_zi{
font-size: 16px;
color: #333333;
}
.a_bt{
font-size: 16px;
color: #ffad00;
}
.a_jj{
font-size: 12px;
color: #ffad00;
}
.a_int{
width: 210px;
height: 30px;
text-align: right;
color: #333333;
border: none;
}
.qu_box{
flex-direction: row;
align-items: center;
}
.a_picker{
flex-direction: row;
justify-content: flex-end;
align-items: center;
}
.a_gor{
width: 10px;
height: 10px;
margin-left: 8px;
}
/* 备注 */
.bei_zi{
font-size: 14px;
margin: 15px 15px 4px;
color: #6C7279;
}
.bei_box{
height: 122px;
box-sizing: border-box;
padding: 15px;
background-color: white;
}
.bei_area{
width: 100%;
height: 100%;
border: none;
}
.flex1{
flex: 1;
}
/* btn */
.footer{
flex-direction: row;
padding: 15px;
}
.btn{
flex: 1;
height: 45px;
border-radius: 4px;
font-weight:bold;
text-align: center;
line-height: 45px;
font-size: 16px;
color: white;
}
.btn:active{
opacity: 0.7;
}
.btn_orange{
background-color: #ffad00;
margin-right: 15px;
}
.btn_red{
background-color: #ff6600;
}
.image{
margin-left: 15px;
margin-top: 15px;
}
.item_box{
border-top: 1px solid #f8f8f8;
margin-top: 15px;
height: 200px;
}
.title{
margin-left: 15px;
margin-bottom: 4px;
font-size: 14px;
color: #6C7279;
}
.img_box{
flex-direction: row;
background: #ffffff;
padding: 15px 15px 15px 0;
box-sizing: border-box;
}
.image{
margin-left: 15px;
}
.del_img_box{
justify-content: center;
align-items: center;
width: 36px;
height: 36px;
position: absolute;
top: 0;
right: 0;
}
.del_img{
width: 16px;
height: 16px;
}
</style>
|
|
显示全部楼层
QQ空间
新浪微博
微信扫一扫
