162 lines
3.9 KiB
Vue
162 lines
3.9 KiB
Vue
<template>
|
||
<view class="authentication_warp">
|
||
<view class="data_common_warp">
|
||
<view class="data_msg">请填写商户本人的相关信息</view>
|
||
<view
|
||
:class="item.id < formList.length ?'add_form_item add_form_item_but':'add_form_item'"
|
||
v-for="item in formList"
|
||
:key="item.id"
|
||
>
|
||
<view class="add_form_title">{{item.title}}</view>
|
||
<up-input
|
||
:placeholder="item.placeholder"
|
||
border="surround"
|
||
v-model="form[item.formName]"
|
||
:customStyle="inputCss"
|
||
></up-input>
|
||
</view>
|
||
</view>
|
||
<view class="data_common_warp">
|
||
<view class="ID_card_title">上传证件照</view>
|
||
<view class="ID_card_msg">（请务必上传本人证件照，生活照、艺术照将会被驳回）</view>
|
||
<view class="ID_card_upload">
|
||
<view class="upload_item">
|
||
<up-image src="/static/common/ID_rx.png" width="100%" height="90" bgColor="#f1f6ff00"></up-image>
|
||
<view class="upload_msg">点击上传身份证人像面</view>
|
||
</view>
|
||
<view class="upload_item">
|
||
<up-image src="/static/common/ID_gq.png" width="100%" height="90" bgColor="#f1f6ff00"></up-image>
|
||
<view class="upload_msg">点击上传身份国旗面</view>
|
||
</view>
|
||
</view>
|
||
<view class="ID_card_upload_templ">
|
||
<view class="templ_title">上传标准</view>
|
||
<view class="templ_img_list">
|
||
<view class="templ_img_item" v-for="item in uploadTemplList" :key="item.id">
|
||
<up-image :src="item.url" width="100%" height="50" bgColor="#f1f6ff00"></up-image>
|
||
<view class="templ_img_item_msg">
|
||
<up-image :src="item.isOk ? '/static/common/ID_ok_1.png' :'/static/common/ID_error.png'" width="10" height="10" bgColor="#f1f6ff00"></up-image>
|
||
<view class="templ_img_item_msg_title">{{item.title}}</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view class="add_but" @click="addAuthentication">
|
||
提交
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
data() {
|
||
return {
|
||
inputCss:{
|
||
"height":'80rpx',
|
||
"border-radius": "30rpx",
|
||
"border": "0rpx",
|
||
},
|
||
form:{
|
||
name:null,
|
||
mobile:null,
|
||
number:null,// 银行名称
|
||
},
|
||
formList:[
|
||
{
|
||
id:1,
|
||
title:"真实姓名",
|
||
formName:"name",
|
||
placeholder:"请输入您的真实姓名",
|
||
},{
|
||
id:2,
|
||
title:"手机号",
|
||
formName:"mobile",
|
||
placeholder:"请输入手机号",
|
||
},{
|
||
id:3,
|
||
title:"证件号码",
|
||
formName:"number",
|
||
placeholder:"请输入证件号码",
|
||
}
|
||
],
|
||
uploadTemplList:[
|
||
{
|
||
id:1,
|
||
title:"标准",
|
||
isOk:true,
|
||
url:"/static/common/ID_ok.png",
|
||
},{
|
||
id:2,
|
||
title:"边框缺失",
|
||
isOk:false,
|
||
url:"/static/common/ID_error_1.png",
|
||
},{
|
||
id:3,
|
||
title:"照片模糊",
|
||
isOk:false,
|
||
url:"/static/common/ID_error_2.png",
|
||
},{
|
||
id:4,
|
||
title:"闪光强烈",
|
||
isOk:false,
|
||
url:"/static/common/ID_error_3.png",
|
||
}
|
||
]
|
||
}
|
||
},
|
||
methods: {
|
||
addAuthentication(){
|
||
const params={
|
||
...this.form
|
||
}
|
||
if(!params.name){
|
||
this.$refs.uToastRef.show({
|
||
type: 'error',
|
||
message: "请输入您的真实姓名",
|
||
});
|
||
return;
|
||
}
|
||
if(!params.mobile){
|
||
this.$refs.uToastRef.show({
|
||
type: 'error',
|
||
message: "请输入手机号",
|
||
});
|
||
return;
|
||
}
|
||
if(!params.number){
|
||
this.$refs.uToastRef.show({
|
||
type: 'error',
|
||
message: "请输入证件号码",
|
||
});
|
||
return;
|
||
}
|
||
console.log("params",params);
|
||
uni.navigateTo({
|
||
url:'/pages/mine_authentication_ok/mine_authentication_ok',
|
||
})
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.authentication_warp{
|
||
height: calc(100vh - 58rpx);
|
||
background-color: $app-bj;
|
||
padding: 30rpx;
|
||
.data_common_warp{
|
||
background: #FFFFFF;
|
||
border-radius: 30rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 30rpx;
|
||
}
|
||
.data_msg{
|
||
font-weight: 500;
|
||
font-size: 26rpx;
|
||
color: #F34343;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
}
|
||
</style>
|