frontend-app/components/common_card.vue

<template>
	<view class="data_common_warp">
		<view class="ID_card_title">上传证件照</view>
		<view class="ID_card_msg">（请务必上传本人证件照，生活照、艺术照将会被驳回）</view>
		<view class="ID_card_upload">
			<view class="upload_item" @click="phoneFun('Z')">
				<up-image
					:src="fileListZ && Object.keys(fileListZ).length !== 0 ? fileListZ.accessUrl : 'https://static.tbmall.xin/static/ID_rx.png'"
					width="100%" height="90" bgColor="#f1f6ff00"></up-image>
				<view class="upload_msg">点击上传身份证人像面</view>
			</view>
			<view class="upload_item" @click="phoneFun('F')">
				<up-image
					:src="fileListF && Object.keys(fileListF).length !== 0 ? fileListF.accessUrl : 'https://static.tbmall.xin/static/ID_gq.png'"
					width="100%" height="90" bgColor="#f1f6ff00"></up-image>
				<view class="upload_msg">点击上传身份国旗面</view>
			</view>
		</view>
		<view class="ID_card_upload_templ">
			<view class="templ_title">上传标准</view>
			<view class="templ_img_list">
				<view class="templ_img_item" v-for="item in uploadTemplList" :key="item.id">
					<up-image :src="item.url" width="100%" height="50" bgColor="#f1f6ff00"></up-image>
					<view class="templ_img_item_msg">
						<up-image :src="item.isOk ? '/static/common/ID_ok_1.png' : '/static/common/ID_error.png'"
							width="10" height="10" bgColor="#f1f6ff00"></up-image>
						<view class="templ_img_item_msg_title">{{ item.title }}111</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>

import { uploadImage, uploadImg } from '@/api/common.js';
import { IMG_TYPE } from '@/utils/enumUtils.js';
import { BASE_URL, Authorization } from '@/utils/config.js';
import { getStorageFun, TOKEN_NAME } from '@/utils/auth.js';

export default {
	name: "common_card",
	props: ['Fimg', 'Bimg'],
	data() {
		return {
			uploadTemplList: [
				{
					id: 1,
					title: "标准",
					isOk: true,
					url: "https://static.tbmall.xin/static/ID_ok.png",
				}, {
					id: 2,
					title: "边框缺失",
					isOk: false,
					url: "https://static.tbmall.xin/static/ID_gq.png",
				}, {
					id: 3,
					title: "照片模糊",
					isOk: false,
					url: "https://static.tbmall.xin/static/ID_error_2.png",
				}, {
					id: 4,
					title: "闪光强烈",
					isOk: false,
					url: "https://static.tbmall.xin/static/ID_error_3.png",
				}
			],
			fileListZ: {},// 身份正面照
			fileListF: {},// 身份反面照片
		};
	},
	watch: {
		Fimg(p, r) {
			if (p) {
				this.fileListZ = { accessUrl: p };
			}
		},
		Bimg(p, r) {
			if (p) {
				this.fileListF = { accessUrl: p };
			}
		},
	},
	methods: {
		deletePic(event) {
			this.fileListZ.splice(event.index, 1);
		},
		phoneFun(type) {
			let that = this;
			console.log('aaaaaaa')
			/*#ifdef MP*/
			uni.chooseMedia({
				count: 1, // 默认为1，摄像头拍照为1，录像为10，录音为1
				mediaType: ['image'], // 可以指定是摄像头还是录像，这里两者都支持
				sourceType: ['camera'], // 可以指定来源是相册还是相机，这里只选相机
				camera: 'back', // 可以指定使用前置还是后置摄像头，默认后置
				success: (imgRes) => {
					// 成功则返回文件的本地临时文件路径
					const filePath = imgRes.tempFiles[0].tempFilePath; // 获取文件路径
					that.uploadFile(filePath, type);
				},
				fail: (err) => {
					// 处理错误
					console.error(err);
				}
			});
			/*#endif*/
			/*#ifndef MP*/
			uni.chooseImage({
				count: 1, // 默认9，设置图片的数量
				sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
				sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
				success: function (res) {
					// 成功选择图片后
					const filePath = res.tempFilePaths[0]; // 获取文件路径
					that.uploadFile(filePath, type);
				}
			});
			/*#endif*/

		},
		uploadFile(url, type) {
			uni.showLoading({
				title: '图片上传中...',
			})
			const that = this;
			const token = getStorageFun(TOKEN_NAME); // 获取token, 根据实际情况调整获取方式
			// 成功则返回文件的本地临时文件路径
			uni.uploadFile({
				url: BASE_URL + uploadImg, // 替换为你的上传接口URL
				filePath: url,
				name: 'file',
				formData: {
					'type': IMG_TYPE.COMMON,
				},
				header: {
					"Authorization": Authorization,
					'HSM-AUTH': token ? token : '',
				},
				success: (uploadFileRes) => {
					const data = JSON.parse(uploadFileRes.data);
					if (data.bizcode === 100) {
						if (type === "Z") {
							that.fileListZ = data.data;
							this.$emit("valueFunc", "Z", data.data.dbUrl);
						} else if (type === "F") {
							that.fileListF = data.data;
							this.$emit("valueFunc", "F", data.data.dbUrl);
						}
					} else {
						uni.showToast({
							title: '图片上传失败',
							icon: 'none',
							mask: true,
							duration: 3000,
						})
					}
				},
				fail: (uploadFileErr) => {
					uni.showToast({
						title: '图片上传失败',
						icon: 'none',
						mask: true,
						duration: 3000,
					})
				},
				complete: (res) => {
					// 请求完成以后做一些事情
					uni.hideLoading();
				}
			});
		}
	}
}
</script>

<style scoped lang="scss">
.data_common_warp {
	background: #FFFFFF;
	border-radius: 30rpx;
	padding: 30rpx;
	margin-bottom: 30rpx;

	&:last-child {
		margin-bottom: 92rpx;
	}
}
</style>