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" label-width="80">
				<uni-forms-item name="consumerName" label="联系人">
					<uni-easyinput v-model="form.consumerName" class="right-align" placeholder-class="placeholder-right"
						placeholder="请输入联系人" :inputBorder="false" :disabled="true" :clearable="false"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="consumerPhone" label="电话" required>
					<uni-easyinput v-model="form.consumerPhone" class="right-align"
						placeholder-class="placeholder-right" placeholder="请输入电话" :inputBorder="false" :disabled="true"
						:clearable="false"></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="true"
						:clearable="false"></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="true" :clearable="false"></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="true" :clearable="false"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="brandItem" label="花纹">
					<uni-easyinput v-model="form.brandItem" class="right-align" placeholder-class="placeholder-right"
						placeholder="" :inputBorder="false" :disabled="true" :clearable="false"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="brandName" label="品牌">
					<uni-easyinput v-model="form.brandName" class="right-align" placeholder-class="placeholder-right"
						placeholder="" :inputBorder="false" :disabled="true" :clearable="false"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="tireQuantity" label="轮胎数量" required>
					<uni-easyinput v-model="form.tireQuantity" class="right-align" placeholder-class="placeholder-right"
						placeholder="请输入数量" :inputBorder="false" :disabled="true" type="number"
						@blur="intBlur('tireQuantity',form.tireQuantity)" :clearable="false"></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="true" type="number"
						@blur="handleBlur(form.claimAmount)" :clearable="false"></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="true"></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/em4.png" />
					</view>
				</view>
				<view>
					<view class="photo-upload-text" style="color: #03803B;">病象</view>
					<view class="photo-upload-upload">
						<uni-file-picker v-model="form.file1" return-type="object" limit="1" :imageStyles="imageStyles"
							file-mediatype="image" @select="fileSelect1" @delete="fileDelete"
							:del-icon="false" :sourceType="['camera']" :readonly="!form.file1">
							<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: #03803B;">轮胎DOT</view>
					<view class="photo-upload-upload">
						<uni-file-picker v-model="form.file2" return-type="object" limit="1" :imageStyles="imageStyles"
							file-mediatype="image" @select="fileSelect2" @delete="fileDelete"
							:del-icon="false" :sourceType="['camera']" :readonly="!form.file2">
							<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: #03803B;">花纹深度</view>
					<view class="photo-upload-upload">
						<uni-file-picker v-model="form.file3" return-type="object" limit="1" :imageStyles="imageStyles"
							file-mediatype="image" @select="fileSelect3" @delete="fileDelete"
							:del-icon="false" :sourceType="['camera']" :readonly="!form.file3">
							<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" :imageStyles="imageStyles"
							file-mediatype="image" @select="fileSelect4" @delete="fileDelete" @success="fileSuccess"
						 :del-icon="false">
							<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;">
			<debounce-button style="color:#ffffff;backgroundColor:#03803B;width: 400rpx;" @click="submit">提交材料</debounce-button>
		</view> -->
		<!-- <view style="padding:30rpx 20rpx;">
			<debounce-button v-if="!form.id" bgColor='#03803B' @click="submit">保存</debounce-button>
			<view v-if="form.auditStatus==0" style="display: flex;">
				<debounce-button bgColor='#03803B' style="width: 260rpx;" @click="submit">保存</debounce-button>
				<debounce-button type="warn" v-if="form.auditStatus==0" style="width: 260rpx;"
					@click="approval">提交</debounce-button>
			</view>
			<debounce-button type="warn" v-if="form.auditStatus==1" @click="revoke">撤销审核</debounce-button>
		</view> -->
	</view>
</template>

<script>
	import http from '@/http/api.js'
	import {
		clientId,
		clientSecret
	} from '@/common/setting'
	import {
		submit,
		getDetail,
		fileRemove,
		submitApproval,
		revokeApproval
	} from '@/api/home/claim.js'
	export default {
		data() {
			return {
				form: {
					file1: null,
					file2: null,
					file3: null,
					file4: null,
					claimSourceType: 1,
					tireQuantity: null,
					claimAmount: null,
					claimAttachmentList: [],
				},
				imageStyles: {
					width: 145,
					height: 145,
					border: false,
				},
				mapObject: {
					text: 'name',
					value: 'code',
					children: 'children'
				},
				labelList: [],
				corpsTypeList: [],
				storeAttributesList: [],
				chainAttributeList: [],
				signingLevelList: []
			}
		},
		onLoad(option) {
			if (option && option.id) {
				this.getDetail(option.id)
			}
		},
		methods: {
			removeByIdFilter(arr, id) {
				return arr.filter(item => item.id !== id);
			},
			intBlur(name, value) {
				if (!this.form[name]) return
				// 使用toFixed处理小数位
				try {
					const num = parseFloat(this.form[name])
					if (!isNaN(num)) {
						this.form[name] = Math.floor(num)
					}
				} catch (e) {
					console.error('格式化错误', e)
				}
			},
			handleBlur(value) {
				if (!this.form.claimAmount) return

				// 使用toFixed处理小数位
				try {
					const num = parseFloat(this.form.claimAmount)
					if (!isNaN(num)) {
						this.form.claimAmount = num.toFixed(4)
					}
				} catch (e) {
					console.error('格式化错误', e)
				}
			},
			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,
								url: data.link,
								name: data.originalName,
								extname: this.getFileExtension(data.originalName),
								size: file.size,
							}
							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),
								size: file.size,
							}
							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),
								size: file.size,
							}
							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),
								size: file.size,
							}
							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 (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(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)
					})
					.catch(() => {
						uni.hideLoading()
					});
			},
			async approval() {
				// if (!this.form.consumerName) {
				// 	uni.showToast({
				// 		title: '请输入联系人',
				// 		icon: 'none'
				// 	});
				// 	return
				// }
				if (!this.form.consumerPhone) {
					uni.showToast({
						title: '请输入电话',
						icon: 'none'
					});
					return
				}
				if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(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 form = await this.convertData(this.$deepClone(this.form))
				let obj = {
					id: this.form.id
				}
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否提交审核？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中',
								mask: true
							});
							submit(form).then(res => {
									submitApproval(obj).then(res => {
											setTimeout(() => {
												uni.showToast({
													title: '操作成功',
													icon: 'none',
													duration: 2000
												});
											}, 10);
											_this.getDetail(_this.form.id)
										})
										.catch(() => {
											uni.hideLoading()
										});
								})
								.catch(() => {
									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)
								})
								.catch(() => {
									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,
									size: item.fileSize,
								}
							}
							if (item.fileProperties == 2) {
								res.data.file2 = {
									...item,
									url: item.fileUrl,
									name: item.fileName,
									extname: item.fileType,
									size: item.fileSize,
								}
							}
							if (item.fileProperties == 3) {
								res.data.file3 = {
									...item,
									url: item.fileUrl,
									name: item.fileName,
									extname: item.fileType,
									size: item.fileSize,
								}
							}
							// if (item.fileProperties == 4) {
							// 	res.data.file4 = {
							// 		...item,
							// 		url: item.fileUrl,
							// 		name: item.fileName,
							// 		extname: item.fileType,
							// 		size: item.fileSize,
							// 	}
							// }
						})
						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,
							fileSize: item.size
						})
					})
				} 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,
								fileSize: item.size
							})
						} else {
							//原附件存在明细时，对应赋值
							obj.claimAttachmentList.forEach(row => {
								if (item.fileProperties == row.fileProperties) {
									row.fileUrl = item.url
									row.fileName = item.name
									row.fileType = item.extname
									row.fileSize = item.size
								}
							})
						}
					})
				}
				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 .file-picker__box {
		width: 280rpx !important;
		height: 280rpx !important;
	}

	::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>