4D_uniapp_service/pages/account/certification.vue

<template>
	<view>
		<uni-nav-bar :fixed="true" shadow left-icon="left" title="技师认证" :statusBar="true" @clickLeft="handleToBack" />
		<uni-section title="身份证" type="line">
			<view class="idcard_wrap">
				<image
					:src="idcardData[0] ? idcardData[0] : idcard[0]"
					@tap="handleOpenIdcardImage"
					:data-id="0"
					mode="aspectFill"
					style="width: 340upx !important; height: 200upx !important; border-radius: 12px; margin-right: 12px"
				></image>
				<image
					:src="idcardData[1] ? idcardData[1] : idcard[1]"
					@tap="handleOpenIdcardImage"
					:data-id="1"
					mode="aspectFill"
					style="width: 340upx !important; height: 200upx !important; border-radius: 12px"
				></image>
			</view>
		</uni-section>
		<uni-section title="手持身份证照片" type="line">
			<view class="idcard_wrap">
				<image
					:src="idcardData[2] ? idcardData[2] : idcard[0]"
					@tap="handleOpenIdcardImage"
					:data-id="2"
					mode="aspectFill"
					style="width: 340upx !important; height: 200upx !important; border-radius: 12px"
				></image>
			</view>
		</uni-section>
		<uni-section title="工作照" type="line">
			<view>
				<view class="picture_list_wrap">
					<view class="picture_list" v-for="(i, index) in workPicture" :key="index">
						<view>
							<image src="/static/account/certification/clear.png" class="picture_close" @tap="handleClearPicture" :data-index="index"></image>
							<image :src="i" class="picture" mode="aspectFill"></image>
						</view>
						<!-- <button size="mini" style="color: #ff6868">裁剪</button> -->
					</view>
					<image src="/static/account/certification/add.png" class="picture" @tap="handleOpenImage" v-if="workPicture.length < 6"></image>
				</view>
			</view>
		</uni-section>
		<uni-section title="生活照" type="line">
			<view class="picture_list_wrap">
				<view class="picture_list" v-for="(i, index) in lifePicture" :key="index">
					<view>
						<image src="/static/account/certification/clear.png" class="picture_close" @tap="handleClearLifePicture" :data-index="index"></image>
						<image :src="i" class="picture" mode="aspectFill"></image>
					</view>
<!-- 					<button size="mini" style="color: #fff; background: #ff6868" @tap="handleCropping(index, 'life')">裁剪</button> -->
				</view>
				<image src="/static/account/certification/add.png" class="picture" @tap="handleOpenLifeImage" v-if="lifePicture.length < 6"></image>
			</view>
		</uni-section>

		<uni-section title="证书" type="line">
			<view class="picture_list_wrap">
				<view class="picture_list" v-for="(i, index) in certificatesPicture" :key="index">
					<image src="/static/account/certification/clear.png" class="picture_close" @tap="handleClearCertificatesPicture" :data-id="index"></image>
					<image :src="i" class="picture" mode="aspectFill"></image>
				</view>
				<image src="/static/account/certification/add.png" class="picture" @tap="handleOpenCertificatesImage" v-if="certificatesPicture.length < 6"></image>
			</view>
		</uni-section>

		<uni-popup ref="picturePopup" background-color="#fff" @change="change">
			<view class="picture_popup_container">
				<!-- <bt-cropper ref="cropper" :imageSrc="imageSrc" :ratio="1"></bt-cropper> -->
				<!-- <uni-cropper
          :src="imageSrc"
          @complete="handleCrop"
          :disable-scale="true"
          :disable-rotate="true"
        ></uni-cropper> -->
				<okingtz-cropper
					@uploadSuccess="uploadSuccess"
					:image="imageSrc"
					:cropWidth="750"
					:cropHeight="750"
					:maxCropper="true"
					:canScale="false"
					selectButtonText=""
					saveButtonText="裁剪"
				></okingtz-cropper>
			</view>
		</uni-popup>

		<uni-popup ref="lifePicturePopup" background-color="#fff" @change="change">
			<view class="picture_popup_container">
				<okingtz-cropper
					@uploadSuccess="uploadLifeSuccess"
					:image="lifeImageSrc"
					:cropWidth="750"
					:cropHeight="750"
					:maxCropper="true"
					:canScale="false"
					selectButtonText=""
					saveButtonText="裁剪"
				></okingtz-cropper>
			</view>
		</uni-popup>

		<view class="agreement_wrap" @tap="handleIsAgreement">
			<image src="/static/common/radio_selected.png" v-if="isAgreement"></image>
			<image src="/static/common/radio_unselect.png" v-else></image>

			已阅读并同意
			<text style="color: #14a5ec" @tap.stop="handleToAgreement">《入驻协议》</text>
		</view>
		<view class="notice">每次修改信息后需要24小时审核</view>

		<view class="footer">
			<image mode="widthFix" src="/static/common/footer.png" />
		</view>

		<view class="footer_btn_wrap">
			<view class="footer_btn" @tap="handleSave">保 存</view>
		</view>
	</view>
</template>
<style>
.container {
	/** 外层一定要指定大小 */
}
</style>

<script setup>
import { ref, reactive } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import request from '/common/request.js';
import auth from '/common/auth.js';
import { apiBaseUrl } from '/common/config.js';
import OkingtzCropper from '@/uni_modules/okingtz-cropper/components/okingtz-cropper/okingtz-cropper';

const statusBarHeight = ref();
const idcard = reactive(['/static/account/certification/idcard_before.png', '/static/account/certification/idcard_after.png']);

const idcardData = ref(['', '', '']);
const isAgreement = ref(true);
const userData = ref({});
const picturePopup = ref();
const imageSrc = ref();
const cropper = ref();
const workPicture = ref([]);
const workPictureOriginal = ref([]);
const workOpenIndex = ref(0);

const currentPictureBlob = ref();
const lifeImageSrc = ref();
const lifePicturePopup = ref();
const lifePicture = ref([]);
const lifePictureOriginal = ref([]);
const lifeOpenIndex = ref(0);

const certificatesPicture = ref([]);

const handleToBack = () => {
	const canNavBack = getCurrentPages();
	if (canNavBack && canNavBack.length > 1) uni.navigateBack();
	else history.back();
};

const handleCropping = (index, type) => {
	if (type == 'life') {
		handleLifePictureToggle(index);
	}
};

const getBase64Image = (src) => {
	return new Promise((resolve) => {
		let xhr = new XMLHttpRequest();
		xhr.open('get', src, true);
		xhr.responseType = 'blob';
		xhr.onload = function () {
			if (this.status == 200) {
				let blob = this.response;
				let oFileReader = new FileReader();
				oFileReader.onloadend = function (e) {
					const base64 = e.target.result;
					resolve(base64);
				};
				oFileReader.readAsDataURL(blob);
			}
		};
		xhr.send();
	});
};

const handleOpenIdcardImage = (e) => {
	const id = e.currentTarget.dataset.id;
	uni.chooseImage({
		count: 1,
		success: (chooseImageRes) => {
			console.log('选择照片', chooseImageRes);
			const tempFilePaths = chooseImageRes.tempFilePaths;
			uni.showLoading({
				content: '加载中',
				mask: true
			});

			uni.uploadFile({
				url: `${apiBaseUrl}/api/UpImg/upimg`,
				filePath: tempFilePaths[0],
				header: {
					'XX-Token': uni.getStorageSync('token'),
					'XX-Device-Type': 'web'
				},
				name: 'file',
				formData: {},
				success: (uploadFileRes) => {
					console.log('结果', uploadFileRes);
					console.log('结果', JSON.parse(uploadFileRes.data));
					idcardData.value[id] = JSON.parse(uploadFileRes.data).data.url;
				},
				complete: () => {
					setTimeout(function () {
						uni.hideLoading();
					}, 100);
				}
			});
		}
	});
};
const handleToAgreement = () => {
	uni.navigateTo({ url: '/pages/account/help?id=11' });
};
const handleIsAgreement = () => {
	isAgreement.value = !isAgreement.value;
};
const handleSave = () => {
	if (!isAgreement) {
		uni.showToast({
			title: '请阅读并同意《入驻协议》',
			duration: 2000,
			icon: 'none'
		});
		return;
	}
	request({
		url: '/api/user/applyJsPost',
		method: 'POST',
		data: {
			...userData.value,
			identity: idcardData.value,
			pictures: lifePicture.value,
			work: workPicture.value,
			life_original: lifePictureOriginal.value,
			work_original: workPictureOriginal.value,
			certificates: certificatesPicture.value
		},
		success: (res) => {
			console.log(res);
			if (res.data.code == 1) {
				uni.showToast({
					title: '提交成功',
					duration: 2000,
					icon: 'none'
				});
				setTimeout(function () {
					uni.navigateBack();
				}, 1000);
			} else {
				uni.showToast({
					title: res.data.msg,
					duration: 2000,
					icon: 'none'
				});
			}
		},
		fail: () => {},
		complete: () => {
			setTimeout(function () {
				uni.hideLoading();
			}, 2000);
		}
	});
};
const handleClearPicture = (e) => {
	uni.showModal({
		title: '提示',
		content: '确定删除该图片吗?',
		success(res) {
			// 用户确定要删除
			if (res.confirm) {
				const index = e.currentTarget.dataset.index;
				workPicture.value.splice(index,1);
				workPictureOriginal.value.splice(index,1);
				//that.arr2.splice(e.currentTarget.dataset.id,1)
			}
		}
	});
};

const handleClearLifePicture = (e) => {
	uni.showModal({
		title: '提示',
		content: '确定删除该图片吗?',
		success(res) {
			// 用户确定要删除
			if (res.confirm) {
				const index = e.currentTarget.dataset.index;
				lifePicture.value.splice(index, 1);
				lifePictureOriginal.value.splice(index, 1);
				//that.arr2.splice(e.currentTarget.dataset.id,1)
			}
		}
	});
};

const handleClearCertificatesPicture = (e) => {
	uni.showModal({
		title: '提示',
		content: '确定删除该图片吗?',
		success(res) {
			// 用户确定要删除
			if (res.confirm) {
				const id = e.currentTarget.dataset.id;
				certificatesPicture.value.splice(id, 1);
			}
		}
	});
};

const uploadSuccess = (tempFilePath) => {
	uni.showToast({
		title: '保存成功'
	});
	// 4.根据自己的业务场景处理tempFilePath ;接口保存，或者上传至云空间
	console.log('tempFilePath_->', tempFilePath);

	const file = { tempFilePaths: [tempFilePath] };
	//   const blob = base64ToBlob(tempFilePath);

	updateImage(file, false);
	//   console.log("blob", blob);
	//   workPicture.value[workOpenIndex] = blob;
	//   handleWorkPictureToggleClose();
};

const uploadLifeSuccess = (tempFilePath) => {
	uni.showToast({
		title: '保存成功'
	});
	console.log('tempFilePath_->', tempFilePath);

	const file = { tempFilePaths: [tempFilePath] };
	updateLifeImage(file, false);

	//   handleLifePictureToggleClose();
};

const base64ToBlob = (base64) => {
	let arr = base64.split(',');
	let mime = arr[0].match(/:(.*?);/)[1];
	let bstr = atob(arr[1]);
	let n = bstr.length;
	let u8arr = new Uint8Array(n);
	while (n--) {
		u8arr[n] = bstr.charCodeAt(n);
	}
	return new Blob([u8arr], {
		type: mime
	});
};

const change = (e) => {
	console.log('弹窗', e);
};

const handleWorkPictureToggleClose = () => {
	picturePopup.value.close();
};

const handleLifePictureToggleClose = () => {
	lifePicturePopup.value.close();
};

const handleWorkPictureToggle = (index) => {
	imageSrc.value = currentPictureBlob.value;
	workOpenIndex.value = index;
	picturePopup.value.open('bottom');
};

const handleLifePictureToggle = async (index) => {
	lifeImageSrc.value = currentPictureBlob.value;
	lifeOpenIndex.value = index;
	lifePicturePopup.value.open('bottom');
};

const handleOpenImage = (original = true) => {
	uni.chooseImage({
		count: 1,
		success: (res) => {
			console.log('选择照片', res);
			updateImage(res, original);
		}
	});
};
const handleOpenLifeImage = (original = true) => {
	uni.chooseImage({
		count: 1,
		success: (res) => {
			console.log('选择照片', res);
			updateLifeImage(res, original);
		}
	});
};
const handleOpenCertificatesImage = () => {
	uni.chooseImage({
		count: 1,
		success: (res) => {
			for (var i = 0; i < res.tempFilePaths.length; i++) {
				uni.showLoading({
					content: '加载中',
					mask: true
				});
				
				uni.uploadFile({
					url: `${apiBaseUrl}/api/UpImg/upimg`,
					filePath: res.tempFilePaths[i],
					header: {
						'XX-Token': uni.getStorageSync('token'),
						'XX-Device-Type': 'web'
					},
					name: 'file',
					formData: {},
					success: (uploadFileRes) => {
						console.log('照片结果', uploadFileRes);
						console.log('照片结果2', JSON.parse(uploadFileRes.data));
						const pictrue = JSON.parse(uploadFileRes.data);
						certificatesPicture.value.push(pictrue.data.url);
						// certificatesPicture.value[certificatesPicture.value.length - 1] = pictrue.data.url;
						// certificatesPicture.value.push(pictrue.data.url);
					},
					complete: () => {
						setTimeout(function () {
							uni.hideLoading();
						}, 100);
					}
				});
			}
		}
	});
};

const updateImage = (res, original) => {
	for (var i = 0; i < res.tempFilePaths.length; i++) {
		uni.showLoading({
			content: '加载中',
			mask: true
		});
		console.log('提交上传', res.tempFilePaths);
		// if (original) if (original) currentPictureBlob.value = res.tempFilePaths[i];

		uni.uploadFile({
			url: `${apiBaseUrl}/api/UpImg/upimg`,
			filePath: res.tempFilePaths[i],
			header: {
				'XX-Token': uni.getStorageSync('token'),
				'XX-Device-Type': 'web'
			},
			name: 'file',
			formData: {},
			success: (uploadFileRes) => {
				console.log('照片结果', uploadFileRes);
				console.log('照片结果2', JSON.parse(uploadFileRes.data));
				const pictrue = JSON.parse(uploadFileRes.data);
				// if (original) {
					workPictureOriginal.value.push(pictrue.data.url);
					workPicture.value.push(pictrue.data.url);
					// handleWorkPictureToggle(workPicture.value.length - 1);
				// } else {
				// 	workPicture.value[workOpenIndex.value] = pictrue.data.url;
				// 	handleWorkPictureToggleClose();
				// }
			},
			complete: () => {
				setTimeout(function () {
					uni.hideLoading();
				}, 100);
			}
		});
	}
};
const updateLifeImage = (res, original = true) => {
	for (var i = 0; i < res.tempFilePaths.length; i++) {
		uni.showLoading({
			content: '加载中',
			mask: true
		});

		// if (original) currentPictureBlob.value = res.tempFilePaths[i];

		uni.uploadFile({
			url: `${apiBaseUrl}/api/UpImg/upimg`,
			filePath: res.tempFilePaths[i],
			header: {
				'XX-Token': uni.getStorageSync('token'),
				'XX-Device-Type': 'web'
			},
			name: 'file',
			formData: {},
			success: (uploadFileRes) => {
				const pictrue = JSON.parse(uploadFileRes.data);
				// if (original) {
					lifePictureOriginal.value.push(pictrue.data.url);
					lifePicture.value.push(pictrue.data.url);
					console.log('生活照',lifePictureOriginal.value);
					// handleLifePictureToggle(lifePicture.value.length - 1);
					// lifePicture.value[lifeOpenIndex.value] = pictrue.data.url;
				// } else {
				// 	lifePicture.value[lifeOpenIndex.value] = pictrue.data.url;
				// 	handleLifePictureToggleClose();
				// }
			},
			complete: () => {
				setTimeout(function () {
					uni.hideLoading();
				}, 100);
			}
		});
	}
};

const getUserInfo = () => {
	request({
		url: '/api/userjs/getInfo',
		success: (res) => {
			console.log('用户信息', res);
			if (res.data?.data?.work) {
				workPicture.value = res.data?.data?.work;
			}
			if (res.data?.data?.work_original) workPictureOriginal.value = [...res.data?.data?.work_original];
			else workPictureOriginal.value = [...res.data?.data?.work];

			if (res.data?.data?.pictures) {
				lifePicture.value = res.data?.data?.pictures;
			}
			if (res.data?.data?.life_original) lifePictureOriginal.value = [...res.data?.data?.life_original];
			else lifePictureOriginal.value = [...res.data?.data?.pictures];
			console.log('lifePictureOriginal1',lifePictureOriginal.value)

			if (res.data?.data?.identity) {
				idcardData.value = res.data?.data?.identity;
			}
			if (res.data?.data?.certificates) {
				certificatesPicture.value = res.data?.data?.certificates;
			}
			userData.value = res.data?.data;
		},
		fail: () => {},
		complete: () => {
			uni.hideLoading();
		}
	});
};

const handleDeleteImage = (e) => {
	console.log('删除', e);
};
onLoad((option) => {
	statusBarHeight.value = uni.getSystemInfoSync().statusBarHeight;
	renderData();
});

onShow(() => {
	uni.$emit('fastOrderNum', false);
	uni.$emit('receiveOrdernum', false);
});

async function renderData() {
	if (auth()) {
		uni.pageScrollTo({ scrollTop: 0, duration: 0 });
		getUserInfo();
	}
}
</script>

<style lang="scss" scoped>
:deep(.uni-section) {
	padding: 20upx 0;
	.uni-section-content {
		padding: 20upx;
	}

	.uni-progress {
		display: none;
	}
}

.idcard_wrap {
	display: flex;
	uni-image {
		width: 185px !important;
		height: 102px !important;
	}
}

.picture_popup_container {
	// height: 100vh;
	padding-bottom: 45px;
	padding-top: 45px;
	:deep(.uni-content-info) {
		.cropper-config {
			justify-content: space-around;
		}
	}
}

.picture_list_wrap {
	display: flex;
	flex-wrap: wrap;

	.picture {
		width: 222upx;
		height: 222upx;
		margin-right: 20upx !important;
		margin-bottom: 20upx;

		&:nth-child(3n) {
			margin-right: 0 !important;
		}
	}
	.picture_list {
		position: relative;
		display: flex;
		flex-direction: column;
		&:nth-child(3n) {
			.picture {
				margin-right: 0 !important;
			}
		}
		.picture_close {
			width: 45upx;
			height: 45upx;
			position: absolute;
			right: 18upx;
			z-index: 1;
			opacity: 0.8;
		}
	}
}

.agreement_wrap {
	clear: both;
	width: 100%;
	height: 50px;
	margin: 40upx auto 0;
	display: block;
	position: relative;
	text-align: center;
	line-height: 50px;
	font-size: 14px;
	color: #666;
	uni-image {
		width: 14px;
		height: 14px;
		position: relative;
		top: 2px;
		margin-right: 5px;
	}
}

.notice {
	margin: 0 auto;
	text-align: center;
	height: 40px;
	line-height: 20px;
	color: #999;
	font-size: 12px;
	font-weight: normal;
}
</style>