gubersail-shop-app/pages/home/claim/details.vue

<template>
	<view class="">
		<uni-section title="基本信息" style="padding: 0 62rpx;" titleColor="5F5F5F" titleFontSize="28rpx">
			<template v-slot:right>
				<text style="color: #5F5F5F;">
					{{form.claimNo}}
				</text>
			</template>
			<uni-forms ref="form1" :modelValue="form" :border="true">
				<uni-forms-item name="consumerName" label="联系人">
					<uni-easyinput v-model="form.consumerName" class="right-align" placeholder-class="placeholder-right"
						placeholder="请输入内容" :inputBorder="false" :disabled="form.auditStatus>0"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="consumerPhone" label="电话">
					<uni-easyinput v-model="form.consumerPhone" class="right-align"
						placeholder-class="placeholder-right" placeholder="请输入内容" :inputBorder="false"
						:disabled="form.auditStatus>0"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="vehicleNumber" label="车牌号">
					<uni-easyinput v-model="form.vehicleNumber" class="right-align"
						placeholder-class="placeholder-right" placeholder="请输入内容" :inputBorder="false"
						:disabled="form.auditStatus>0"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="tyreSpecs" label="规格型号">
					<uni-easyinput v-model="form.tyreSpecs" class="right-align" placeholder-class="placeholder-right"
						placeholder="请输入内容" :inputBorder="false" :disabled="form.auditStatus>0"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="tyreNo" label="胎号">
					<uni-easyinput v-model="form.tyreNo" class="right-align" placeholder-class="placeholder-right"
						placeholder="请输入内容" :inputBorder="false" :disabled="form.auditStatus>0"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="tireQuantity" label="轮胎数量">
					<uni-easyinput v-model="form.tireQuantity" class="right-align" placeholder-class="placeholder-right"
						placeholder="请输入数量" :inputBorder="false" :disabled="form.auditStatus>0" type="number"
						@input="handleInput"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="claimAmount" label="索赔金额">
					<uni-easyinput v-model="form.claimAmount" class="right-align" placeholder-class="placeholder-right"
						placeholder="请输入金额" :inputBorder="false" :disabled="form.auditStatus>0"
						type="number"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="claimReason" label="理赔原因">
					<uni-easyinput v-model="form.claimReason" class="right-align" type="textarea"
						placeholder-class="placeholder-right" placeholder="请输入内容" :inputBorder="false"
						:disabled="form.auditStatus>0"></uni-easyinput>
				</uni-forms-item>
			</uni-forms>
		</uni-section>
		<uni-section title="轮胎证据" style="padding: 0 62rpx 60rpx 62rpx;margin-top: 30rpx;" titleColor="5F5F5F"
			titleFontSize="28rpx">
			<view class="photo-upload">
				<view>
					<view class="photo-upload-text">示例照片</view>
					<view>
						<image class="photo-upload-img" src="@/static/images/home/claim/em1.png" />
					</view>
				</view>
				<view>
					<view class="photo-upload-text" style="color: #B5B4B4;">上传车辆整体照片</view>
					<view class="photo-upload-upload">
						<uni-file-picker v-model="form.file1" return-type="object" limit="1" disable-preview
							:imageStyles="imageStyles" file-mediatype="image" @select="fileSelect1" @delete="fileDelete"
							@success='fileSuccess' @fail='fileFail' :readonly="form.auditStatus>0">
							<image class="photo-upload-img2" src="@/static/images/home/claim/upload.png" />
						</uni-file-picker>
					</view>
				</view>
			</view>
			<view class="photo-upload">
				<view>
					<view class="photo-upload-text">示例照片</view>
					<view>
						<image class="photo-upload-img" src="@/static/images/home/claim/em2.png" />
					</view>
				</view>
				<view>
					<view class="photo-upload-text" style="color: #B5B4B4;">轮胎DOT</view>
					<view class="photo-upload-upload">
						<uni-file-picker v-model="form.file2" return-type="object" limit="1" disable-preview
							:imageStyles="imageStyles" file-mediatype="image" @select="fileSelect2" @delete="fileDelete"
							@success='fileSuccess' @fail='fileFail' :readonly="form.auditStatus>0">
							<image class="photo-upload-img2" src="@/static/images/home/claim/upload.png" />
						</uni-file-picker>
					</view>
				</view>
			</view>
			<view class="photo-upload">
				<view>
					<view class="photo-upload-text">示例照片</view>
					<view>
						<image class="photo-upload-img" src="@/static/images/home/claim/em3.png" />
					</view>
				</view>
				<view>
					<view class="photo-upload-text" style="color: #B5B4B4;">花纹深度</view>
					<view class="photo-upload-upload">
						<uni-file-picker v-model="form.file3" return-type="object" limit="1" disable-preview
							:imageStyles="imageStyles" file-mediatype="image" @select="fileSelect3" @delete="fileDelete"
							@success='fileSuccess' @fail='fileFail' :readonly="form.auditStatus>0">
							<image class="photo-upload-img2" src="@/static/images/home/claim/upload.png" />
						</uni-file-picker>
					</view>
				</view>
			</view>
			<view class="photo-upload">
				<view>
					<view class="photo-upload-text">示例照片</view>
					<view>
						<image class="photo-upload-img" src="@/static/images/home/claim/em4.png" />
					</view>
				</view>
				<view>
					<view class="photo-upload-text" style="color: #B5B4B4;">鼓包处照片</view>
					<view class="photo-upload-upload">
						<uni-file-picker v-model="form.file4" return-type="object" limit="1" disable-preview
							:imageStyles="imageStyles" file-mediatype="image" @select="fileSelect4" @delete="fileDelete"
							@success="fileSuccess" @fail="fileFail" :readonly="form.auditStatus>0">
							<image class="photo-upload-img2" src="@/static/images/home/claim/upload.png" />
						</uni-file-picker>
					</view>
				</view>
			</view>
		</uni-section>
		<!-- <view style="height: 200rpx;display: flex;align-items: center;justify-content: center;">
			<button style="color:#ffffff;backgroundColor:#03803B;width: 400rpx;" @click="submit">保存</button>
		</view> -->
	</view>
</template>

<script>
	import http from '@/http/api.js'
	import {
		clientId,
		clientSecret
	} from '@/common/setting'
	import {
		submit,
		getDetail
	} from '@/api/home/claim.js'
	export default {
		data() {
			return {
				form: {
					file1: {},
					file2: {},
					file3: {},
					file4: {},
					claimAttachmentList: [],
				},
				imageStyles: {
					width: 145,
					height: 145,
					border: false,
				},
				mapObject: {
					text: 'name',
					value: 'code',
					children: 'children'
				},
				addressData: [],
				labelList: [],
				corpsTypeList: [],
				storeAttributesList: [],
				chainAttributeList: [],
				signingLevelList: []
			}
		},
		onLoad(option) {
			this.addressData = JSON.parse(uni.getStorageSync("addressData"))
			if (option && option.id) {
				this.getDetail(option.id)
			}
		},
		methods: {
			removeByIdFilter(arr, id) {
				return arr.filter(item => item.id !== id);
			},
			handleInput(value) {
				const decimalRegex = /^-?\d+\.\d+$/ // 小数正则
				if (decimalRegex.test(value)) {
					uni.showToast({
						title: '请输入正整数',
						icon: 'none'
					});
					this.form.tireQuantity = 1
				}

			},
			fileDelete(row) {
				if (row.tempFile.id) {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					fileRemove(row.tempFile.id).then(res => {
						uni.showToast({
							title: '删除成功',
							icon: 'none'
						});
						this.form.claimAttachmentList = this.removeByIdFilter(this.form.claimAttachmentList, row
							.tempFile.id);
					}).finally(() => {
						uni.hideLoading()
					});
				}
			},

			getFileExtension(filename) {
				return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
			},
			fileSelect1(files) {
				files.tempFiles.forEach(file => {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					uni.uploadFile({
						url: http.config.baseURL +
							'/blade-resource/oss/endpoint/put-file', // 仅为示例，非真实的接口地址
						filePath: file.path,
						header: {
							// 客户端认证参数
							'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
							'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
						},
						name: 'file',
						success: (res) => {
							const data = JSON.parse(res.data).data
							this.form.file1 = {
								...this.form.file1,
								id: 1111111,
								url: data.link,
								name: data.originalName,
								extname: this.getFileExtension(data.originalName)
							}
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							});
						},
						fail: (err) => {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				})
			},
			fileSelect2(files) {
				files.tempFiles.forEach(file => {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					uni.uploadFile({
						url: http.config.baseURL +
							'/blade-resource/oss/endpoint/put-file', // 仅为示例，非真实的接口地址
						filePath: file.path,
						header: {
							// 客户端认证参数
							'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
							'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
						},
						name: 'file',
						success: (res) => {
							const data = JSON.parse(res.data).data
							this.form.file2 = {
								...this.form.file2,
								url: data.link,
								name: data.originalName,
								extname: this.getFileExtension(data.originalName)
							}
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							});
						},
						fail: (err) => {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				})
			},
			fileSelect3(files) {
				files.tempFiles.forEach(file => {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					uni.uploadFile({
						url: http.config.baseURL +
							'/blade-resource/oss/endpoint/put-file', // 仅为示例，非真实的接口地址
						filePath: file.path,
						header: {
							// 客户端认证参数
							'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
							'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
						},
						name: 'file',
						success: (res) => {
							const data = JSON.parse(res.data).data
							this.form.file3 = {
								...this.form.file3,
								url: data.link,
								name: data.originalName,
								extname: this.getFileExtension(data.originalName)
							}
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							});
						},
						fail: (err) => {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				})
			},
			fileSelect4(files) {
				files.tempFiles.forEach(file => {
					uni.showLoading({
						title: '加载中',
						mask: true
					});
					uni.uploadFile({
						url: http.config.baseURL +
							'/blade-resource/oss/endpoint/put-file', // 仅为示例，非真实的接口地址
						filePath: file.path,
						header: {
							// 客户端认证参数
							'Authorization': 'Basic ' + Base64.encode(clientId + ':' + clientSecret),
							'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
						},
						name: 'file',
						success: (res) => {
							const data = JSON.parse(res.data).data
							this.form.file4 = {
								...this.form.file4,
								url: data.link,
								name: data.originalName,
								extname: this.getFileExtension(data.originalName)
							}
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							});
						},
						fail: (err) => {
							uni.showToast({
								title: '上传失败',
								icon: 'none'
							});
						},
						complete: () => {
							uni.hideLoading()
						}
					})
				})
			},
			async submit() {
				if (!this.form.consumerName) {
					uni.showToast({
						title: '请输入联系人',
						icon: 'none'
					});
					return
				}
				if (!this.form.consumerPhone) {
					uni.showToast({
						title: '请输入电话',
						icon: 'none'
					});
					return
				}
				if (!this.form.vehicleNumber) {
					uni.showToast({
						title: '请输入车牌号',
						icon: 'none'
					});
					return
				}
				if (!this.form.tyreSpecs) {
					uni.showToast({
						title: '请输入规格型号',
						icon: 'none'
					});
					return
				}
				if (!this.form.tyreNo) {
					uni.showToast({
						title: '请输入胎号',
						icon: 'none'
					});
					return
				}
				const decimalRegex = /^-?\d+\.\d+$/ // 小数正则
				if (!Number(this.form.tireQuantity) || decimalRegex.test(Number(this.form.tireQuantity))) {
					uni.showToast({
						title: '请正确输入轮胎数量',
						icon: 'none'
					});
					return
				}
				if (!this.form.claimReason) {
					uni.showToast({
						title: '请输入理赔原因',
						icon: 'none'
					});
					return
				}
				if (!this.form.file1) {
					uni.showToast({
						title: '请上传车辆整体照片',
						icon: 'none'
					});
					return
				}
				if (!this.form.file2) {
					uni.showToast({
						title: '请上传轮胎DOT',
						icon: 'none'
					});
					return
				}
				if (!this.form.file3) {
					uni.showToast({
						title: '请上传花纹深度',
						icon: 'none'
					});
					return
				}
				if (!this.form.file4) {
					uni.showToast({
						title: '请上传鼓包处照片',
						icon: 'none'
					});
					return
				}
				let obj = await this.convertData(this.$deepClone(this.form))
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				submit(obj).then(res => {
						setTimeout(() => {
							uni.showToast({
								title: '保存成功',
								icon: 'none',
							});
						}, 10);
						this.getDetail(res.data.id)
					})
					.finally(() => {
						uni.hideLoading()
					});
			},
			approval() {
				let obj = {
					id: this.form.id
				}
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否提交审批？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中',
								mask: true
							});
							submitApproval(obj).then(res => {
									setTimeout(() => {
										uni.showToast({
											title: '操作成功',
											icon: 'none',
											duration: 2000
										});
									}, 10);
									_this.getDetail(_this.form.id)
								})
								.finally(() => {
									uni.hideLoading()
								});
						}
					}
				});
			},
			revoke() {
				let obj = {
					id: this.form.id
				}
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否撤销审批？',
					success: function(res) {
						if (res.confirm) {

							uni.showLoading({
								title: '加载中',
								mask: true
							});
							revokeApproval(obj).then(res => {
									setTimeout(() => {
										uni.showToast({
											title: '操作成功',
											icon: 'none',
											duration: 2000
										});
									}, 10);
									_this.getDetail(_this.form.id)
								})
								.finally(() => {
									uni.hideLoading()
								});
						}
					}
				});
			},
			getDetail(id) {
				let obj = {
					id: id
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getDetail(obj).then(res => {
						res.data.claimAttachmentList.forEach(item => {
							if (item.fileProperties == 1) {
								res.data.file1 = {
									...item,
									url: item.fileUrl,
									name: item.fileName,
									extname: item.fileType
								}
							}
							if (item.fileProperties == 2) {
								res.data.file2 = {
									...item,
									url: item.fileUrl,
									name: item.fileName,
									extname: item.fileType
								}
							}
							if (item.fileProperties == 3) {
								res.data.file3 = {
									...item,
									url: item.fileUrl,
									name: item.fileName,
									extname: item.fileType
								}
							}
							if (item.fileProperties == 4) {
								res.data.file4 = {
									...item,
									url: item.fileUrl,
									name: item.fileName,
									extname: item.fileType
								}
							}
						})
						this.form = res.data
					})
					.finally(() => {
						uni.hideLoading()
					});
			},
			async convertData(obj) {
				let fileList = []
				if (obj.file1 && Object.keys(obj.file1).length) {
					fileList.push({
						...obj.file1,
						fileProperties: 1,
					})
				}
				if (obj.file2 && Object.keys(obj.file2).length) {
					fileList.push({
						...obj.file2,
						fileProperties: 2,
					})
				}
				if (obj.file3 && Object.keys(obj.file3).length) {
					fileList.push({
						...obj.file3,
						fileProperties: 3,

					})
				}
				if (obj.file4 && Object.keys(obj.file4).length) {
					fileList.push({
						...obj.file4,
						fileProperties: 4
					})
				}
				//附件明细为空时直接赋值
				if (obj.claimAttachmentList.length == 0) {
					fileList.forEach(item => {
						obj.claimAttachmentList.push({
							fileProperties: item.fileProperties,
							fileUrl: item.url,
							fileName: item.name,
							fileType: item.extname
						})
					})
				} else {
					//附件明细有明细区分赋值
					fileList.forEach(item => {
						if (obj.claimAttachmentList.filter(row => row.fileProperties == item.fileProperties)
							.length == 0) {
							//原附件明细不存在,直接push新元素
							obj.claimAttachmentList.push({
								fileProperties: item.fileProperties,
								fileUrl: item.url,
								fileName: item.name,
								fileType: item.extname
							})
						} else {
							//原附件存在明细时，对应赋值
							obj.claimAttachmentList.forEach(row => {
								if (item.fileProperties == row.fileProperties) {
									row.fileUrl = item.url
									row.fileName = item.name
									row.fileType = item.extname
								}
							})
						}
					})
				}
				console.log(obj)
				return obj
			}

		}
	}
</script>

<style lang="scss" scoped>
	.right-align {
		text-align: right;
	}

	.photo {
		margin-left: 20rpx;
		width: 38rpx;
		height: 32rpx;
	}

	.photo-upload {
		display: flex;
		justify-content: space-around;
		margin-top: 45rpx;

		.photo-upload-text {
			font-weight: 400;
			font-size: 28rpx;
			color: #5F5F5F;
			line-height: 32rpx;
			text-align: center;
			margin-bottom: 15rpx;
		}

		.photo-upload-img {
			width: 280rpx;
			height: 280rpx;
			background: #D13B34;
			border-radius: 7rpx;
		}

		.photo-upload-upload {
			width: 280rpx;
			height: 280rpx;
			background: #F6F6F6;
			border-radius: 7rpx;
			display: flex;
			justify-content: center;
			align-items: center;

			.photo-upload-img2 {
				width: 219rpx;
				height: 219rpx;
			}
		}
	}

	::v-deep .uni-file-picker__container {
		margin: 0 !important;
	}

	::v-deep .file-picker__box-content {
		margin: 0 !important;
	}

	::v-deep .file-picker__progress {
		display: none;
	}

	::v-deep .uni-section .uni-section-header {
		font-weight: bold !important;
		padding: 12px 0px !important;
		border-bottom: 2px solid #F6F6F6;
	}

	.slot-content-item {
		border-radius: 13rpx;
		border: 2rpx solid #03803B;
		padding: 1rpx 5rpx;
		color: #03803B;
	}

	.slot-content-item-placeholder {
		font-weight: 400 !important;
		font-size: 28rpx !important;
		height: 38rpx !important;
		color: #B5B4B4 !important;
	}

	.slot-box {
		gap: 5px;
		display: flex;
		flex-wrap: wrap;
		justify-content: flex-end;
	}
</style>