zhywpt-h5/components/upload-car-img/upload-car-img.vue

<template>
	<view class="upload-car-img">
		<view class="picture-wrapper" @click="cardImageOcr">
			<view class="bg">
				<view class="">
					<view class="name"> {{dataList.title}} </view>
					<view class="value"> {{dataList.hint}} </view>
				</view>
				<image v-if="!uploadimges" class="icon" :src="handleImg(dataList.placeholderImg)">
				</image>
				<image v-else class="icon" :src="uploadimges"></image>
			</view>
		</view>
	</view>
</template>

<script lang='ts' setup>
	import {
		ref
	} from 'vue'

	import {
		translate
	} from '@/utils/getLessLimitSizeImage'
	import {
		fileURL
	} from '@/utils/network/api.js';
	const props = defineProps({
		dataList: {
			type: Object,
			default: () => {
				return {}
			}
		}
	})
	const handleImg = (url) => {
		// 判断如果头部为http开头
		const reg = /^https?:\/\/.*$/
		if (reg.test(url)) {
			return url
		} else {
			return fileURL + url
		}

	}

	const emits = defineEmits(['uploadImgHandle'])
	let uploadimges = ref('')
	const cardImageOcr = () => {
		uni.chooseImage({
			count: 1, //只能选取一张照片
			sizeType: ["original", "compressed"], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ["camera", "album"], //从相册选择
			success: function(res) {
				// console.log(res.tempFiles[0]);
				uploadimges.value = res.tempFiles[0].path
				// 压缩图片
				translate(res.tempFiles[0].path, 0.5, imgURL => {
					uploadimges.value = imgURL
					emits('uploadImgHandle', {
						path: imgURL,
						fileName: res.tempFiles[0].name
					})
				})

			}
		})
	}
</script>

<style lang="scss" scoped>
	.picture-wrapper {
		margin: 10rpx 30rpx;
		.bg {
			background: #ffffff;
			box-shadow: 0rpx 4rpx 13rpx 3rpx rgba(223, 223, 223, 0.8);
			border-radius: 20rpx;
			padding: 40rpx;
			display: flex;
			// align-items: center;
			justify-content: space-between;

			.name {
				font-size: 34rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #000000;
				line-height: 34rpx;
			}

			.value {
				margin-top: 20rpx;
				font-size: 24rpx;
				font-family: Microsoft YaHei;
				font-weight: 400;
				color: #999999;
				line-height: 24rpx;
			}

			.tip {
				margin-top: 20rpx;
				text-align: center;
				width: 110rpx;
				height: 40rpx;
				background: rgba(33, 190, 177, 0.2);
				border-radius: 6rpx;

				.tip-value {
					font-size: 20rpx;
					font-family: Microsoft YaHei;
					font-weight: 400;
					color: #0a8f8a;
					line-height: 40rpx;
					opacity: 1;
				}
			}
		}

		.icon {
			width: 294rpx;
			height: 188rpx;
		}
	}

	.upload-car-bottom {
		font-size: 28rpx;

	}
</style>