energy-front/pages/index/authentication.vue

<template>
	<view class="content">
		<headerTopsTips></headerTopsTips>
		<view class="tops_schedule">
			<view class="cicle">
				<text>√</text>
				<view class="text_posi">
					手机验证
				</view>
			</view>
			<view class="line_">
			</view>
			<view class="cicle">
				<!-- <u-icon name="more-dot-fill"></u-icon> -->
				<text>...</text>
				<view class="text_posi">
					实名认证
				</view>
			</view>
			<view class="line_">
			</view>
			<view class="cicle sle_cicle">
				<view class="cicle_son">

				</view>
				<view class="text_posi">
					立即用车
				</view>
			</view>
		</view>
		<!--  -->
		<view class="center_son">
			<view class="t_1">
				实名认证
			</view>
			<view class="t_2">
				我们将根据实名信息, 为您购买《用车保险》
			</view>
			<view class="scroll_imgs">

			</view>
			<scroll-view :scroll-top="0" scroll-y="true" style="height: 700rpx;" @scrolltoupper="upper"
				@scrolltolower="lower">
				<view class="t_3">
					<uni-file-picker limit="1" title="请点击上传身份证正面照" @select="select_image_1"></uni-file-picker>
				</view>
				<view class="t_3">
					<uni-file-picker limit="1" title="请点击上传身份证国徽面" @select="select_image_2"></uni-file-picker>
				</view>
				<view class="t_3">
					<uni-file-picker limit="1" title="请点击上传本人头像照" @select="select_image_3"></uni-file-picker>
				</view>
			</scroll-view>
		</view>
		<view class="t_4">
			<button @click="submit" class="submit_clas">去认证</button>
		</view>
	</view>
</template>

<script setup>
	import headerTopsTips from '@/pages/components/header_tops_tips.vue'
	import {
		baseUrl,
		apiPath
	} from '@/sheep/config';
	import {
		ref
	} from 'vue'
	const imgs_1 = ref(null)
	const imgs_2 = ref(null)
	const imgs_3 = ref(null)

	function handle_imme() {
		uni.navigateTo({
			url: '/pages/index/immediately'
		});
	}

	function select_image_1(data) {
		// console.log(data.tempFilePaths, 'data')
		upload_imgs(data.tempFilePaths, 1)
	}

	function select_image_2(data) {
		// console.log(data, 'data')
		upload_imgs(data.tempFilePaths, 2)
	}

	function select_image_3(data) {
		// console.log(data, 'data')
		upload_imgs(data.tempFilePaths, 3)
	}

	function upload_imgs(data, number) {
		uni.uploadFile({
			url: `${baseUrl + apiPath}/infra/file/upload`,
			filePath: data[0],
			name: 'file',
			method: 'post',
			header: {
				'tenant-id': 1,
				'Authorization': uni.getStorageSync('token')
			},
			success: (res) => {
				const data_inter = JSON.parse(res.data)
				if (data_inter.code == 0) {
					switch (number) {
						case 1:
							imgs_1.value = data_inter.data;
							break;
						case 2:
							imgs_2.value = data_inter.data;
							break;
						case 3:
							imgs_3.value = data_inter.data;
							break;
					}
				}
			}
		})
	}

	function submit() {

		if (imgs_1.value == '' || imgs_1.value == null) {
			uni.showModal({
				title: '请上传',
				content: '请先上传身份证正面照',
				success: (res) => {}
			});
		} else if (imgs_2.value == '' || imgs_2.value == null) {
			uni.showModal({
				title: '请上传',
				content: '请先上传身份证反面照',
				success: (res) => {}
			});
		} else if (imgs_3.value == '' || imgs_3.value == null) {
			uni.showModal({
				title: '请上传',
				content: '请先上传本人头像照',
				success: (res) => {}
			});
		} else {
			uni.request({
				url: `${baseUrl + apiPath}/share/member-ext/update`,
				method: 'PUT',
				data: {
					"id": uni.getStorageSync('userId'),
					"idCardFront": imgs_1.value,
					"idCardBack": imgs_2.value,
					"selfPhoto": imgs_3.value,
					"realNameAuthFlag": '2'
				},
				header: {
					'tenant-id': 1, //自定义请求头信息
					'Authorization': uni.getStorageSync('token')
				},
				success: (res) => {
					if (res.data.code == 0) {
						uni.showToast({
							title: '认证成功',
							icon: 'success'
						})
						uni.redirectTo({
							url: '/pages/index/immediately'
						})
					} else {
						uni.showToast({
							title: res.data.msg,
							icon: 'error'
						})
					}
				},
				fail: (error) => {
					console.log(error, 'error')
				}
			});
		}

	}
	// 

	// 
</script>

<style lang="scss" scoped>
	.content {
		background: #fff;
		height: 100vh;
		background: linear-gradient(#e6eafa, #d7dcfa);
	}

	.submit_clas {
		width: 500rpx;
		color: #fff;
		background: #000;
	}

	.tops_schedule {
		// background: #f8f8f8;
		padding: 40rpx 60rpx;
		padding-bottom: 100rpx;
		// margin: 40rpx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-evenly;

		.cicle {
			width: 50rpx;
			height: 50rpx;
			background: #000;
			border-radius: 50%;
			color: #fff;
			font-size: 30rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			line-height: 50rpx;
			position: relative;

			.cicle_son {
				width: 25rpx;
				height: 25rpx;
				background: #fff;
				border-radius: 50%;
			}

			.text_posi {
				position: absolute;
				width: 100rpx;
				bottom: -65rpx;
				left: 50%;
				transform: translateX(-50%);
				color: #000;
				font-size: 12px;

			}
		}

		.sle_cicle {
			background: #cccccc !important;
		}

		.line_ {
			width: 100rpx;
			height: 5rpx;
			background: #000;
		}
	}

	.center_son {
		margin: 0 40rpx;
		padding: 50rpx 10rpx;
		box-sizing: border-box;
		background: #fff;
		border-radius: 10rpx;

		.t_1 {
			font-size: 18px;
			font-weight: 600;
		}

		.t_2 {
			margin-top: 20rpx;
			font-size: 12px;
			color: #999999;
		}

		.scroll_imgs {}

		.t_3 {
			// width: 200px;
			// height: 200px;
			padding: 20rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			font-size: 12px;
			color: #737373;

			// image {
			// 	width: 80%;
			// 	height: 300rpx;
			// }
		}
	}

	.t_4 {
		margin-top: 40rpx;
		padding: 0 40rpx;
	}
</style>