<template>
	<view class="realName">
		<view class="title">
			实名认证
		</view>
		<view class="contail">
			<view class="bar">
				<view class="beforename">
					姓名：
				</view>
				<input type="text" placeholder="请输入" v-model="kname">
			</view>
			<view class="bar">
				<view class="beforename">
					身份证号：
				</view>
				<input type="text" placeholder="请输入" v-model="kidentity">
			</view>
			<view class="imgbar" @click="chooseImgs(1)">
				<view class="mytitle">身份证照片</view>
				<image class="image_s" :src="head_image" mode="" v-if="head_image"></image>
				<image class="image_s" src="../../static/img_card_b.png" mode="" v-else></image>
				<view class="tip">
					点击相机拍摄头像面
				</view>
				<image class="image_b" src="../../static/icon_square_cream.png" mode="" v-if="!head_image"></image>
			</view>
			<view class="imgbar" @click="chooseImgs(2)">
				<image class="image_s" :src="last_image" mode="" v-if="last_image"></image>
				<image class="image_s" src="../../static/img_card_a.png" mode="" v-else></image>
				<view class="tip">
					点击相机拍摄国徽面
				</view>
				<image class="image_b"></image>
				<image class="image_b" src="../../static/icon_square_cream.png" mode="" v-if="!last_image"></image>
			</view>
		</view>
		<view class="btn">
			<view class="paybtn" @click="user_cert">
				提交
			</view>
		</view>

	</view>
</template>

<script>
	import {
		user_cert
	} from '@/api/index.js'
	import {
		baseURL
	} from '@/utils/request.js'
	export default {
		data() {
			return {
				kname: "",
				kidentity: "",
				head_image: "../../static/icon_square_cream.png",
				last_image: "../../static/icon_square_cream.png",
			}
		},
		onLoad() {

		},
		methods: {
			//实名认证
			async user_cert() {
				let obj = {
					name: this.kname,
					identity: this.kidentity,
					image_front: this.head_image,
					image_back: this.last_image,
				}
				try {
					const res = await user_cert(obj)
					console.log('user_cert', res)
					let objk = uni.getStorageSync("showlist")
					objk.is_cert = 1
					uni.setStorageSync("showlist", objk)
					uni.navigateBack({
						delta: 1
					})
					// 保存数据
				} catch (err) {
					uni.showToast({
						title: err,
						icon: 'none'
					})
					console.log('user_cert', err)
				}
			},
			//上传图片
			chooseImgs(type) {
				let that = this;
				uni.chooseImage({ // 从本地选择图片或使用相机拍照
					success: (res) => {
						count: 1, // 最多可以选择的图片张数，默认为9张
						console.log(res)
						const tempFilePaths = res.tempFilePaths; // 成功的返回图片的本地路径列表
						uni.uploadFile({ // 直接上传文件到云储存
							url: baseURL + 'common/upload', //仅为示例，非真实的接口地址
							filePath: res.tempFilePaths[0], // 要上传文件的对象
							name: 'file',
							formData: {
								'user': 'test'
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								console.log(data);
								if (type == 1) {
									that.head_image = data.data.fullurl; // 绝对路径
								} else {
									that.last_image = data.data.fullurl; // 绝对路径
								}
							}
						});
					}
				})
				return;
			},
		}
	}
</script>

<style lang="scss">
	.realName {
		padding: 0 32rpx;
		box-sizing: border-box;

		.title {
			margin-top: 32rpx;
			color: rgba(0, 0, 0, 0.9);
			font-size: 52rpx;
			font-weight: 500;
			font-family: "PingFang SC";
		}

		.contail {
			margin-top: 32rpx;
			padding-bottom: 160rpx;

			.bar {
				border-bottom: 1px solid #f0f0f0;
				padding: 32rpx;
				display: flex;
				justify-content: space-between;

				input {
					text-align: right;
				}
			}

			.imgbar {
				text-align: center;
				position: relative;

				.mytitle {
					margin-top: 32rpx;
					text-align: left;
					color: rgba(0, 0, 0, 0.9);
					font-size: 28rpx;
					font-weight: 400;
					font-family: "PingFang SC";
				}

				.image_s {
					margin-top: 32rpx;
					width: 524rpx;
					height: 330rpx;
				}

				.image_b {
					position: absolute;
					top: 50%;
					left: 50%;
					transform: translate(-50%, -50%);
					width: 128rpx;
					height: 128rpx;
				}

				.tip {
					margin-top: 25rpx;
					color: rgba(0, 0, 0, 0.4);
					font-size: 28rpx;
					font-weight: 400;
					font-family: "PingFang SC";
				}
			}
		}

		.btn {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: 128rpx;
			padding: 16rpx 32rpx;
			box-sizing: border-box;
			opacity: 1;
			background: rgba(255, 255, 255, 1);

			.paybtn {
				width: 100%;
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				border-radius: 28rpx;
				opacity: 1;
				color: rgba(0, 0, 0, 0.9);
				font-size: 32rpx;
				font-weight: 600;
				font-family: "PingFang SC";
				background: linear-gradient(134.8deg, rgba(255, 232, 100, 1) 0%, rgba(255, 216, 0, 1) 100%);
			}
		}
	}
</style>