LocalLivingServicesUniapp/pages/order/arriveUpload.vue

<template>
	<view class="arrive_upload">
		<view class="top">
		</view>
		<view class="head">
			<span class="cuIcon-back" @click="back"></span>
			<view class="case">
				上传现场照片
			</view>
		</view>
		<view class="center">
			<view class="text">
				<view class="title">
					请至少上传3张照片
				</view>
				<view class="describe">
					照片要求：<br />
					1.图片中需清晰的包含救援车辆全身<br />
					2.清晰可见车牌照上的车牌号<br />
					3.含被救援车全部或部分车身的整体环境照（如有因周围环境的特殊性需要纳入附加费时的情形照片）<br />
				</view>
			</view>
			<view class="upload">
				<u-upload class="upliado_cusstom" :action="action" :file-list="fileList" @on-success="onUploadSuccess"
					@on-remove="onRemove" @on-choose-complete="onChooseComplete" :max-count="9" :multiple="true"
					:auto-upload="true"></u-upload>
			</view>
		</view>
		<view class="foot">
			<view class="btn" @click="submit">
				确认
			</view>
		</view>
	</view>
</template>

<script>
import configService from '../../common/service/config.service'
export default {
	data() {
		return {
			action: configService.apiUrl + '/sys/common/upload',
			imageHttp: configService.apiUrl + '/',
			fileList: [],
			uploadedFiles: [],
			taskId: '',
			checkType: '',
			uptype: '',
			paramState: '',
			serveType: '',
			jumptype: null
		}
	},
	onLoad(options) {
		this.taskId = options.taskId;
		this.checkType = options.checkType;
		this.uptype = options.uptype;
		this.paramState = options.paramState;
		this.serveType = options.serveType;
		this.jumptype = options.jumptype
	},
	methods: {
		back() {
			if (this.jumptype == 0) {
				uni.switchTab({
					url: '/pages/order/index'
				})
			} else {
				uni.navigateBack({
					delta: 1
				});
			}
		},
		// 上传成功回调
		onUploadSuccess(res, index, lists) {
			if (res.code === 0) {
				this.uploadedFiles.push({
					url: this.imageHttp + res.message,
					response: res
				});
			} else {
				uni.showToast({
					title: '上传失败: ' + res.message,
					icon: 'none'
				});
			}
		},
		// 删除文件回调
		onRemove(index, lists) {
			this.uploadedFiles.splice(index, 1);
		},
		// 选择图片完成回调
		onChooseComplete(lists) {
			this.fileList = lists;
		},
		// 提交
		submit() {
			console.log(this.uploadedFiles)
			if (this.uploadedFiles.length < 3) {
				uni.showToast({
					title: '请至少上传3张照片',
					icon: 'none'
				});
				return;
			}
			// 所有图片都有内容，处理数据并发送请求
			let temp = []
			this.uploadedFiles.forEach(item => {
				temp.push({
					merchantId: uni.getStorageSync('login_user_info').merchantId,
					merchantName: uni.getStorageSync('login_user_info').merchantName,
					merchantUserId: uni.getStorageSync('login_user_info').id,
					businessType: this.uptype,
					taskId: this.taskId,
					imgUrl: this.imageHttp + item.response.message
				})
			});
			console.log(temp)
			this.$http.post("/ts/merchant/addImg", temp).then(res => {
				console.log(res);
				if (res.data.code == 200) {
					this.upSuccess()
				}
			});
		},
		upSuccess() {
			let data = {
				taskId: this.taskId,
				checkType: this.checkType,
				paramState: this.paramState, //商户上传图片成功
				serveType: this.serveType
			}
			console.log(data)
			this.$http.post("/ts/merchant/update/Serve", data).then(res => {
				if (res.data.code == 200) {
					uni.showToast({
						icon: 'none',
						title: '上传成功'
					});
					// uni.switchTab({
					// 	url:'/pages/order/index'
					// })
					this.back()
				} else {
					uni.showToast({
						icon: 'none',
						title: res.data.message
					})
				}
			})
		},
	}
}
</script>

<style scoped lang="scss">
.arrive_upload {
	width: 100vw;
	height: 100vh;
	background: #ffffff;
	display: flex;
	flex-direction: column;
	overflow: hidden;

	/*#ifdef APP-PLUS*/
	.top {
		width: 100%;
		height: var(--status-bar-height);
		background: #ffffff;
	}

	/*#endif*/
	.head {
		width: 100%;
		height: 112rpx;
		padding: 20rpx;
		display: flex;
		align-items: center;
		background: #ffffff;
		position: relative;

		.cuIcon-back {
			font-size: 40rpx;
			margin-right: 40rpx;
		}

		.case {
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			font-size: 36rpx;
			// font-weight: 600;
		}
	}

	.center {
		flex: 1;
		border-top: 1px solid #EEEEEE;
		border-bottom: 1px solid #EEEEEE;
		padding: 20rpx 28rpx;
		overflow-y: auto;

		.text {
			.title {
				font-size: 36rpx;
				color: #333333;
			}

			.describe {
				width: 100%;
				background: #F6F8FA;
				padding: 20rpx;
				font-size: 24rpx;
				color: #909296;
				margin-top: 16rpx;
			}
		}

		.upload {
			margin-top: 30rpx;
		}
	}

	.foot {
		width: 100%;
		height: 112rpx;
		padding: 16rpx 24rpx;

		.btn {
			width: 100%;
			height: 76rpx;
			background: #449AFF;
			border-radius: 66rpx;
			text-align: center;
			line-height: 76rpx;
			color: #ffffff;
			font-size: 28rpx;
		}
	}
}

::v-deep .u-add-wrap {
	width: 320rpx !important;
	height: 194rpx !important;
}

::v-deep .u-preview-wrap {
	width: 320rpx !important;
	height: 194rpx !important;
}
</style>