xiongmao/pages/my/real-name-certification/real-name-certification.vue

<!-- 实名认证 -->
<template>
	<view class="wrap">
		<view class="label">请上传身份证正反面</view>
		<view class="module-wrap">
			<view class="module">
				<view class="left-sidebar">
					<text>头像面</text>
					<text>上传您的身份证头像面</text>
				</view>
				<view class="right-sidebar" @tap="uploadImg('imgA')">
					<image v-if="imgA.length === 0" src="../../../static/add-2.png" class="add-img" mode=""></image>
					<image v-else :src="imgA" mode="" class="add-img"></image>
				</view>
			</view>
			<view class="module">
				<view class="left-sidebar">
					<text>国徽面</text>
					<text>上传您的身份证国徽面</text>
				</view>
				<view class="right-sidebar" @tap="uploadImg('imgB')">
					<image v-if="imgB.length === 0" src="../../../static/add-1.png" class="add-img" mode=""></image>
					<image v-else :src="imgB" mode="" class="add-img"></image>
				</view>
			</view>
		</view>
		<view class="label">请完善您的个人信息</view>
		<view class="column">
			<view class="row">
				<text class="row-name">真实姓名</text>
				<input type="text" value="" class="input" placeholder="请输入姓名" placeholder-class="placeholder" />
			</view>
			<view class="row">
				<text class="row-name">身份证号</text>
				<input type="text" value="" class="input" placeholder="请输入身份证号" placeholder-class="placeholder" />
			</view>
		</view>
		<view class="btn-box">
			<button type="default" class="active">认证</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgA: '',
				imgB: '',
			}
		},
		methods: {
			uploadImg() {
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: res => {
						this.imgA = res.tempFilePaths
						this.imgB = res.tempFilePaths
						console.log(JSON.stringify(res.tempFilePaths));
					}
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import "./real-name-certification.css";
</style>