You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
281 lines
6.3 KiB
281 lines
6.3 KiB
<template>
|
|
<view class="content">
|
|
<mNavbar title="实名认证" :leftClick="leftClick" />
|
|
|
|
<view class="item-card">
|
|
<view class="flex">
|
|
<view class="head-line"/>
|
|
<view class="tt">姓名</view>
|
|
</view>
|
|
<view class="from-line">
|
|
<input placeholder="请输入姓名" v-model="form.name"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item-card">
|
|
<view class="flex">
|
|
<view class="head-line"/>
|
|
<view class="tt">身份证号码</view>
|
|
</view>
|
|
<view class="from-line">
|
|
<input placeholder="请输入身份证号码" v-model="form.idCard"/>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item-card">
|
|
<view class="flex">
|
|
<view class="head-line"/>
|
|
<view class="tt">身份证正面上传</view>
|
|
</view>
|
|
<view :class="{ii : !form.idImg}" style="width: 172rpx;
|
|
margin-top: 40rpx;" @click="selectImage('idImg')">
|
|
<image :src="form.idImg" mode="aspectFill" class="ii-image"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item-card">
|
|
<view class="flex">
|
|
<view class="head-line"/>
|
|
<view class="tt">身份证反面上传</view>
|
|
</view>
|
|
<view :class="{ii : !form.idImg2}" style="width: 172rpx;
|
|
margin-top: 40rpx;" @click="selectImage('idImg2')">
|
|
<image :src="form.idImg2" mode="aspectFill" class="ii-image"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item-card">
|
|
<view class="flex">
|
|
<view class="head-line"/>
|
|
<view class="tt">健康证上传</view>
|
|
</view>
|
|
<view :class="{ii : !form.idImage}" style="width: 172rpx;
|
|
margin-top: 40rpx;" @click="selectImage('idImage')">
|
|
<image :src="form.idImage" mode="aspectFill" class="ii-image"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="item-card">
|
|
<view class="flex">
|
|
<view class="head-line"/>
|
|
<view class="tt">营业证上传</view>
|
|
</view>
|
|
<view :class="{ii : !form.idImage2}" style="width: 172rpx;
|
|
margin-top: 40rpx;" @click="selectImage('idImage2')">
|
|
<image :src="form.idImage2" mode="aspectFill" class="ii-image"></image>
|
|
</view>
|
|
</view>
|
|
|
|
<view class="b-fiexd">
|
|
<view class="button-submit" @click="submit">提交</view>
|
|
</view>
|
|
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import mNavbar from '@/components/base/m-navbar.vue'
|
|
export default {
|
|
components: {
|
|
mNavbar,
|
|
},
|
|
data() {
|
|
return {
|
|
form : {
|
|
idImage : '',
|
|
idImg : '',
|
|
idImg2 : '',
|
|
idCard : '',
|
|
name : '',
|
|
idImage2 : ''
|
|
}
|
|
}
|
|
},
|
|
onShow() {
|
|
this.getTenRealName()
|
|
},
|
|
methods: {
|
|
getTenRealName(){
|
|
this.$api('getTenRealName', {}, res => {
|
|
if(res.code == 200 && res.result){
|
|
this.form = res.result
|
|
}
|
|
})
|
|
},
|
|
selectImage(key){
|
|
uni.chooseImage({
|
|
count: 1, // 默认9，设置为1表示单选
|
|
sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
|
|
sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
|
|
success: (res) => {
|
|
//上传单张图片逻辑
|
|
this.uploadFileToOSS(res.tempFiles[0]).then(imgPath => {
|
|
this.form[key] = imgPath;
|
|
})
|
|
}
|
|
});
|
|
},
|
|
parameterVerification(){ //验证用户参数合法性
|
|
let { name , idCard , idImage , idImg , idImg2 , idImage2 } = this.form
|
|
if(name && name.trim() == ''){
|
|
return { title : '请填写用户名' , auth : false }
|
|
}else if(idCard && idCard.trim() == ''){
|
|
return { title : '请填写身份证号码' , auth : false }
|
|
}else if(!idImg || idImg.trim() == ''){
|
|
return { title : '请上传身份证正面' , auth : false }
|
|
}else if(!idImg2 || idImg2.trim() == ''){
|
|
return { title : '请上传身份证反面' , auth : false }
|
|
}else if(!idImage || idImage.trim() == ''){
|
|
return { title : '请上传健康证' , auth : false }
|
|
}else if(!idImage2 || idImage2.trim() == ''){
|
|
return { title : '请上传营业证' , auth : false }
|
|
}
|
|
return { title : '验证通过' , auth : true }
|
|
},
|
|
submit(){
|
|
let isOk = this.parameterVerification()
|
|
if(!isOk.auth){
|
|
return uni.showToast({
|
|
title : isOk.title,
|
|
icon : 'none'
|
|
})
|
|
}
|
|
this.$api('tenRealName', this.form, res => {
|
|
if (res.code == 200) {
|
|
uni.showToast({
|
|
title : '认证成功',
|
|
icon : 'none'
|
|
})
|
|
setTimeout(() => {
|
|
uni.switchTab({
|
|
url: '/pages/index/center'
|
|
})
|
|
}, 1000)
|
|
}
|
|
})
|
|
},
|
|
|
|
clickBanner(){ uni.navigateTo({ url: '/pages/login/login' }) },
|
|
clickInfo(id){ uni.navigateTo({ url: `/pages/index/infod?id=${id}`}) },
|
|
leftClick(){ uni.switchTab({
|
|
url: '/pages/index/center'
|
|
}) },
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
|
|
.content{
|
|
padding-bottom: 100rpx;
|
|
}
|
|
|
|
body{
|
|
background-color: #f3f3f3;
|
|
}
|
|
.from-line {
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.from-body{
|
|
background-color: #fff;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
}
|
|
|
|
.from-body input {
|
|
width: 612rpx;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
background: #f5f5f5;
|
|
border-radius: 46rpx;
|
|
|
|
padding: 0 50rpx;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC-Regular;
|
|
font-weight: 400;
|
|
text-align: left;
|
|
color: #333;
|
|
margin: 10rpx;
|
|
}
|
|
.head-line{
|
|
width: 8rpx;
|
|
height: 34rpx;
|
|
background: #60bda2;
|
|
border-radius: 4rpx;
|
|
margin: 8rpx 0;
|
|
}
|
|
|
|
.item-card{
|
|
position: relative;
|
|
padding: 40rpx 48rpx;
|
|
background-color: #fff;
|
|
margin-bottom: 20rpx;
|
|
width: 100vw;
|
|
border-radius: 15rpx;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.button-submit{
|
|
width: 596rpx;
|
|
height: 90rpx;
|
|
line-height: 90rpx;
|
|
background: linear-gradient(180deg,#6fdfbe, #5ac796);
|
|
border-radius: 46rpx;
|
|
|
|
margin: 20rpx auto;
|
|
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC-Regular;
|
|
font-weight: 400;
|
|
text-align: center;
|
|
color: #ffffff;
|
|
}
|
|
|
|
.tt{
|
|
line-height: 48rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFang SC, PingFang SC-Bold;
|
|
font-weight: 700;
|
|
text-align: left;
|
|
color: #333333;
|
|
|
|
padding-left: 14rpx;
|
|
}
|
|
|
|
.ii{
|
|
width: 172rpx;
|
|
height: 172rpx;
|
|
background-color: #f4f4f4;
|
|
border-radius: 16rpx;
|
|
|
|
margin-top: 40rpx;
|
|
position: relative;
|
|
}
|
|
.ii-image{
|
|
width: 172rpx;
|
|
height: 172rpx;
|
|
}
|
|
.ii::after{
|
|
content: " ";
|
|
width: 8rpx;
|
|
height: 50rpx;
|
|
background-color: #dfdfdf;
|
|
|
|
position: absolute;
|
|
top: calc(172rpx / 2 - 25rpx);
|
|
left: calc(172rpx / 2 - 4rpx);
|
|
}
|
|
.ii::before{
|
|
content: " ";
|
|
width: 50rpx;
|
|
height: 8rpx;
|
|
background-color: #dfdfdf;
|
|
|
|
position: absolute;
|
|
top: calc(172rpx / 2 - 4rpx);
|
|
left: calc(172rpx / 2 - 25rpx);
|
|
}
|
|
</style>
|