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 && fileListZ.accessUrl ? 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 && fileListF.accessUrl ? 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 }}</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: {
			handler(p) {
				if (p) {
					this.fileListZ = { accessUrl: p };
				}
			},
			immediate: true
		},
		Bimg: {
			handler(p) {
				if (p) {
					this.fileListF = { accessUrl: p };
				}
			},
			immediate: true
		},
	},
	methods: {
		phoneFun(type) {
			const that = this;
			// #ifdef MP-WEIXIN
			if (uni.chooseMedia) {
				uni.chooseMedia({
					count: 1,
					mediaType: ['image'],
					sourceType: ['album', 'camera'],
					camera: 'back',
					success: (imgRes) => {
						if (imgRes.tempFiles && imgRes.tempFiles.length > 0) {
							const filePath = imgRes.tempFiles[0].tempFilePath;
							that.uploadFile(filePath, type);
						}
					},
					fail: (err) => {
						console.error('chooseMedia error:', err);
					}
				});
				return;
			}
			// #endif

			uni.chooseImage({
				count: 1,
				sizeType: ['original', 'compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					if (res.tempFilePaths && res.tempFilePaths.length > 0) {
						const filePath = res.tempFilePaths[0];
						that.uploadFile(filePath, type);
					}
				},
				fail: (err) => {
					console.error('chooseImage error:', err);
				}
			});
		},
		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) => {
					let data;
					try {
						data = JSON.parse(uploadFileRes.data);
					} catch (e) {
						data = uploadFileRes.data;
					}
					if (data && data.bizcode === 100) {
						if (type === "Z") {
							that.fileListZ = data.data;
							that.$emit("valueFunc", "Z", data.data.dbUrl);
						} else if (type === "F") {
							that.fileListF = data.data;
							that.$emit("valueFunc", "F", data.data.dbUrl);
						}
					} else {
						uni.showToast({
							title: (data && data.msg) || '图片上传失败',
							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>