LocalLivingServicesUniapp/pages/order/components/upload.vue

<template>
	<view class="upload">
		<view class="content">
			<view class="title">
				请上传照片
				<image src="/static/store/detele.png" mode="" @click="cut"></image>
			</view>
			<view class="center">
				<view class="item" v-for="(item,index) in upList" :key="index">
					<u-upload :action="action" style="width: 100%;height: 100%;"
						@on-success="(res) => handleSuccess(res, index)"
						@on-remove="(file) => handleRemove(file, index)"></u-upload>
					<span>{{item.name}}</span>
				</view>
				
			</view>
			<view class="btn_box">
				<view class="btn" @click="cut">
					稍后再传
				</view>
				<view class="sub" @click="submit">
					确认上传
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import configService from '../../../common/service/config.service'
	export default {
		name: 'upload',
		props: {
			type: {
				type: Number,
				default: 0, // 默认值
			},
			taskId:{
				type:String,
				default:''
			}
		},
		data() {
			return {
				getCar: [{
						name: '正前方',
						imgUrl: '',
						imgType: '1'
					},
					{
						name: '车辆后侧',
						imgUrl: '',
						imgType: '4'
					},
					{
						name: '车辆左侧',
						imgUrl: '',
						imgType: '2'
					},
					{
						name: '车辆右侧',
						imgUrl: '',
						imgType: '3'
					},
					{
						name: '驾驶室',
						imgUrl: '',
						imgType: '6'
					},
					{
						name: '后排座',
						imgUrl: '',
						imgType: '7'
					},
					{
						name: '左前方45度全车照',
						imgUrl: '',
						imgType: '5'
					},
				],
				servive:[
						{
							name: '服务前',
							imgUrl: '',
							imgType: '8'
						},
						{
							name: '服务中',
							imgUrl: '',
							imgType: '9'
						},
						{
							name: '服务后',
							imgUrl: '',
							imgType: '10'
						},
				],
				upList:[],
				action: configService.apiUrl + '/sys/common/upload',
				imgUrl: [],
				imageHttp: configService.apiUrl + '/', //上传图片前缀+
			}
		},
		methods: {
			// 上传封面图成功回调
			handleSuccess(res, index) {
				const newUrl = this.imageHttp + res.message;

				// 获取当前 imgUrl 字符串
				let currentimgUrl = this.upList[index].imgUrl;
				// 如果是第一个文件，直接赋值；否则用逗号拼接
				currentimgUrl = currentimgUrl ?
					`${currentimgUrl},${newUrl}` :
					newUrl;
				// 更新数据（确保响应式）
				this.$set(this.upList[index], 'imgUrl', currentimgUrl);
				console.log(this.upList)
			},
			// 移除封面图文件回调
			handleRemove(index, lists) {
				this.imgUrl = lists
			},
			//上传图片
			submit(){
				let data = []
				this.upList.forEach(item => {
					if(item.imgUrl == ''){
						uni.showToast({
							icon:'none',
							title:'请上传全部图片'
						})
						return
					}else{
						item.merchantId = uni.getStorageSync('login_user_info').merchantId,
						item.merchantName = uni.getStorageSync('login_user_info').merchantName,
						item.merchantUserId = uni.getStorageSync('login_user_info').id
						item.businessType = this.type
						item.taskId = this.taskId
					}
				})
				this.$http.post("/ts/merchant/addImg", this.upList).then(res => {
					console.log(res)
					if (res.data.code == 200) {
						uni.showToast({
							icon:'none',
							title:'上传成功'
						})
						this.$emit('upSuccess')
					}
				})
			},
			cut(){
				this.$emit('cut')
			}
		},
		mounted() {
			console.log(this.type)
			this.type=='2' ||this.type=='1' ?this.upList = this.getCar:this.upList = this.servive
		},
		onShow() {

		}
	}
</script>

<style lang="scss" scoped>
	.upload {
		padding: 20px;
		position: fixed;
		top: 0;
		left: 0;
		background: rgba(0, 0, 0, 0.7);
		width: 100%;
		height: 100vh;
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 9999 !important;

		.content {
			width: 570rpx;
			background-color: #fff;
			border-radius: 12px;
			overflow: hidden;
			display: flex;
			flex-direction: column;
			padding: 0 24rpx;

			.title {
				width: 100%;
				height: 86rpx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				font-weight: 600;
				font-size: 32rpx;

				// background: url('/static/order/upload_bgi.png') no-repeat;
				// background-size: contain; 
				image {
					width: 37rpx;
					height: 37rpx;
				}
			}

			.center {
				flex: 1;
				display: flex;
				flex-wrap: wrap;
				justify-content: space-between;
				overflow-y: auto;

				.item {
					width: 248rpx;
					height: 150rpx;
					border-radius: 4rpx;
					overflow: hidden;
					position: relative;
					margin-bottom: 33rpx;

					span {
						position: absolute;
						top: 0;
						left: 0;
						display: flex;
						padding: 2px 4px;
						background: #2D88F4;
						border-radius: 0px 4px 4px 0px;
						font-size: 16rpx;
						color: #FFFFFF;
						font-weight: normal;
					}
				}
			}

			.btn_box {
				width: 100%;
				height: 100rpx;
				border-top: 1px solid #eeeeee;
				display: flex;
				align-items: center;
				justify-content: space-around;

				.btn {
					width: 241rpx;
					height: 68rpx;
					border-radius: 54rpx;
					border: 1px solid #CCCCCC;
					font-size: 28rpx;
					color: #999999;
					display: flex;
					align-items: center;
					justify-content: space-around;
				}

				.sub {
					width: 241rpx;
					height: 68rpx;
					background: #449AFF;
					border-radius: 66rpx;
					font-size: 28rpx;
					color: #FFFFFF;
					display: flex;
					align-items: center;
					justify-content: space-around;
				}
			}
		}
	}

	::v-deep .u-add-wrap {
		width: 248rpx !important;
		height: 150rpx !important;
		margin: 0;
	}
</style>