Huanyuyuehui/pages/users/real_name_authentication/index.vue

<template>
	<view class="content" :style="viewColor">
		<view class="title">
			身份证信息
		</view>
		<view class="input-items">
			<view class="item">
				<text class="input-name">姓名</text>
				<input type="text" v-model="name" placeholder="请输入姓名"/>
			</view>
			<view class="item">
				<text class="input-name">身份证号码</text>
				<input type="text" v-model="number" placeholder="请输入身份证号码"/>
			</view>
		</view>
		<view class="title">
			证件
		</view>
		<view class="photo-items">
			<view class="photo-top">
				<view class="real-left" v-if="image1.length==0" @click="uploadpic(image1)">
					<image src="@/static/images/sfz1.png" mode=""></image>
					<text>拍摄正面</text>
				</view>
				<view class="real-left" v-else>
					<image :src="image1[0]" mode="" @click="getPhotoClickIdx(image1,0)"></image>
					<text class='iconfont icon-guanbi1' @click.stop='DelPic(image1,0)'></text>
				</view>
				<view class="real-right" v-if="image2.length==0" @click.stop="uploadpic(image2)">
					<image src="@/static/images/sfz2.png" mode=""></image>
					<text>拍摄反面</text>
				</view>
				<view class="real-right" v-else>
					<image :src="image2[0]" mode="" @click="getPhotoClickIdx(image2,0)"></image>
					<text class='iconfont icon-guanbi1' @click='DelPic(image2,0)'></text>
				</view>
			</view>
			<view class="tips-title">
				拍摄须知
			</view>
			<view class="photo-bottom">
				<view class="photo-item">
					<image src="@/static/images/sfz3.png" mode=""></image>
					<view class="text"><image src="@/static/images/success.png" mode=""></image> 拍摄标准</view>
				</view>
				<view class="photo-item">
					<image src="@/static/images/sfz5.png" mode=""></image>
					<view class="text"><image src="@/static/images/close.png" mode=""></image> 边框缺失</view>
				</view>
				<view class="photo-item">
					<image src="@/static/images/sfz4.png" mode="" style="opacity: 0.7;"></image>
					<view class="text"><image src="@/static/images/close.png" mode=""></image> 照片模糊</view>
				</view>
				<view class="photo-item">
					<image src="@/static/images/sfz6.png" mode="" ></image>
					<view class="text"><image src="@/static/images/close.png" mode=""></image> 闪光强烈</view>
				</view>
				
			</view>
		</view>
		<view class="btn" @click="submitReal">
			提交认证
		</view>
	</view>
</template>

<script>
	import {userReal} from '@/api/api.js'
	import { mapGetters } from "vuex";
	export default {
		computed: mapGetters(['viewColor']),
		data(){
			return{
				name:'',
				number:'',
				image1:[],
				image2:[],
			}
		},
		methods:{
			async submitReal(){
				let data1={
					real_name:this.name,
					card_id:this.number,
					card_front:this.image1[0],
					card_back:this.image2[0],
				}
				await userReal(data1).then((res)=>{
					console.log('res: ',res);
					
				}).catch((err)=>{
					uni.showToast({
						icon:'none',
						title: err
					});
				})
			},
			/**
			 * 上传文件
			 *
			 */
			uploadpic(item) {
				let that = this;
				that.$util.uploadImageOne('upload/image', function(res) {
					item.push(res.data.path);
				});
			},
			/**
			 * 删除图片
			 *
			 */
			DelPic(item,index) {
				let that = this,
					pic = item[index];
				item.splice(index, 1);
			},
			// 图片预览
			// 获得相册 idx
			getPhotoClickIdx(item,index) {
				let _this = this;
				let idx = index;
				_this.imgPreview(item, idx);
			},
			// 图片预览
			imgPreview(list, idx) {
				// list：图片 url 数组
				if (list && list.length > 0) {
					uni.previewImage({
						current: list[idx], //  传 Number H5端出现不兼容
						urls: list
					});
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content{
		width: 100%;
		height: 100vh;
		background: #f2f2f7;
		.title{
			padding-top: 40rpx;
			padding-left: 28rpx;
		}
		.photo-items{
			width: 100%;
			background: white;
			margin: 20rpx auto;
			display: flex;
			flex-direction: column;
			grid-gap: 40rpx;
			padding: 40rpx 28rpx;
			.photo-top{
				display: flex;
				flex-direction: row;
				grid-column-gap: 88rpx;
				padding: 0 32rpx;
				.real-left{
					flex: 1;
					width: 276rpx;
					height: 240rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
					}
					text{
						color: white;
						text-align: center;
						position: relative;
						bottom: 50rpx;
						left: 80rpx;
					}
					.icon-guanbi1{
						width: 40rpx;
						height:40rpx;
						font-size: 40rpx;
						position: absolute;
						top: 0rpx;
						// right: -170rpx;
						left: 236rpx;
					}
				}
				.real-right{
					flex: 1;
					width: 276rpx;
					height: 240rpx;
					position: relative;
					image{
						width: 100%;
						height: 100%;
					}
					text{
						color: white;
						text-align: center;
						position: relative;
						bottom: 50rpx;
						left: 80rpx;
					}
					.icon-guanbi1{
						width: 40rpx;
						height:40rpx;
						position: absolute;
						top: 0rpx;
						// right: -170rpx;
						left: 236rpx;
					}
				}
			}
			.photo-bottom{
				width: 100%;
				background:#edf3ff;
				padding: 26rpx 16rpx;
				display: flex;
				flex-direction: row;
				grid-gap: 16rpx;
				border-radius: 10rpx;
				.photo-item{
					width: 100%;
					display: flex;
					flex-direction: column;
					image{
						width: 140rpx;
						height:88rpx;
					}
					.text{
						margin-top: 20rpx;
						image{
							width: 20rpx;
							height:20rpx;
							margin:0 4rpx;
						}
					}
				}
				
			}
			.tips-title{
				margin-top: 60rpx;
			}
		}
		.input-items{
			width: 100%;
			background: white;
			margin: 20rpx auto;
			display: flex;
			flex-direction: column;
			grid-gap: 40rpx;
			padding: 40rpx 28rpx;
			.item{
				display: flex;
				flex-direction: row;
				.input-name{
					flex: 1;
				}
				input{
					flex: 2;
				}
			}
		}
		.btn{
			width: 660rpx;
			height: 100rpx;
			background-color: var(--view-theme);
			border-radius: 60rpx;
			// background-color: red;
			color: white;
			font-size: 48rpx;
			text-align: center;
			line-height: 100rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			margin: 0 auto;
			margin-top: 100rpx;
		}
	}
</style>