reservation-uniapp-250509/service-uniapp-technician/pages/mine/authentication.vue

<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.idImage}" style="width: 172rpx;
			margin-top: 40rpx;" @click="selectImage('shopCard')">
				<image :src="form.businessPicture" 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 : '',
				businessPicture : ''
			}
        }
    },
    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 } = 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(!businessPicture || businessPicture.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>