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

<template>
	<view class="">
		<uni-nav-bar title="轮胎保注册信息" backgroundColor='#03803B' color="#fff" left-icon="left" fixed statusBar
			@clickLeft='goBack()' @clickRight="inItemDetail">
			<block slot="right" v-if='form.status>1'>
				<view>
					<uni-icons type="list" size="24" color='#fff'></uni-icons>
				</view>
			</block>
		</uni-nav-bar>
		<uni-section title="基本信息" style="padding: 0 62rpx;" titleColor="5F5F5F" titleFontSize="28rpx">
			<template v-slot:right>
				<text style="color: #5F5F5F;">
					{{form.insuranceNo}}
				</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.status>1"></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.status>1"></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.status>1"></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.status>1"></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.status>1" type="number"
						@input="handleInput"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="insuranceTime" label="有效截至日期" label-width='80'>
					<view style="display: flex;justify-content: flex-end;align-items: center;height: 36px;">
						<text style="color: #B5B4B4;">
							{{form.insuranceTime}}
						</text>
					</view>
					
				</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/insurance/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.overallVehicle" return-type="object" limit="1" disable-preview
							:imageStyles="imageStyles" file-mediatype="image" @select="fileSelect1" @delete="fileDelete"
							@success='fileSuccess' @fail='fileFail' :readonly="form.status>1">
							<image class="photo-upload-img2" src="@/static/images/home/insurance/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/insurance/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.tireDot" return-type="object" limit="1" disable-preview
							:imageStyles="imageStyles" file-mediatype="image" @select="fileSelect2" @delete="fileDelete"
							@success='fileSuccess' @fail='fileFail' :readonly="form.status>1">
							<image class="photo-upload-img2" src="@/static/images/home/insurance/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/insurance/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.tirePattern" return-type="object" limit="1" disable-preview
							:imageStyles="imageStyles" file-mediatype="image" @select="fileSelect3" @delete="fileDelete"
							@success='fileSuccess' @fail='fileFail' :readonly="form.status>1">
							<image class="photo-upload-img2" src="@/static/images/home/insurance/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 style="height: 200rpx;display: flex;align-items: center;justify-content: center;">
			<button v-if="!form.id" style="color:#ffffff;backgroundColor:#03803B;width: 400rpx;"
				@click="submit">保存</button>
			<view v-if="form.status==1" style="display: flex;">
				<button
					style="color:#ffffff;backgroundColor:#03803B;width: 200rpx;border-top-right-radius:0rpx;border-bottom-right-radius:0rpx"
					@click="submit">保存</button>
				<button type="warn" v-if="form.status==1"
					style="color:#ffffff;width: 200rpx;border-top-left-radius:0rpx;border-bottom-left-radius:0rpx"
					@click="approval">提交</button>
			</view>
			<view v-if="form.status==2" style="display: flex;">
				<button type="warn" v-if="form.status==2" style="color:#ffffff;width: 400rpx;"
					@click="revoke">撤销</button>
			</view>
		</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/insurance.js'
	export default {
		data() {
			return {
				form: {
					file1: {},
					file2: {},
					file3: {},
					file4: {},
					tireQuantity:0,
					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: {
			inItemDetail(){
				if(this.form.status>1){
					uni.navigateTo({
						url: '/pages/home/insurance/itemDetails?id=' + this.form.id,
					});
				}
				
			},
			handleInput(value) {
				const decimalRegex = /^-?\d+\.\d+$/ // 小数正则
				if (decimalRegex.test(value)) {
					uni.showToast({
						title: '请输入整数',
						icon: 'none'
					});
				}

			},
			removeByIdFilter(arr, id) {
				return arr.filter(item => item.id !== id);
			},
			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.overallVehicle = {
								url: data.link,
								name: data.originalName,
								extname: this.getFileExtension(data.originalName)
							}
							this.form.overallVehicleUrl = data.link
							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.tireDot = {
								url: data.link,
								name: data.originalName,
								extname: this.getFileExtension(data.originalName)
							}
							this.form.tireDotUrl = data.link
							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.tirePattern = {
								url: data.link,
								name: data.originalName,
								extname: this.getFileExtension(data.originalName)
							}
							this.form.tirePatternUrl = data.link
							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
				}
				const decimalRegex = /^-?\d+\.\d+$/ // 小数正则
				if (!Number(this.form.tireQuantity)||decimalRegex.test(Number(this.form.tireQuantity))) {
					uni.showToast({
						title: '请正确输入轮胎数量',
						icon: 'none'
					});
					return
				}
				if (!this.form.overallVehicle) {
					uni.showToast({
						title: '请上传车辆整体照片',
						icon: 'none'
					});
					return
				}
				if (!this.form.tireDot) {
					uni.showToast({
						title: '请上传轮胎DOT',
						icon: 'none'
					});
					return
				}
				if (!this.form.tirePattern) {
					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()
					});
			},
			async approval() {
				let obj = await this.convertData(this.$deepClone(this.form))
				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(res.data.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(res.data.id)
								})
								.finally(() => {
									uni.hideLoading()
								});
						}
					}
				});
			},
			getDetail(id) {
				let obj = {
					id: id
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getDetail(obj).then(res => {
						if (res.data.overallVehicle) {
							res.data.overallVehicle = JSON.parse(res.data.overallVehicle)
						}
						if (res.data.tireDot) {
							res.data.tireDot = JSON.parse(res.data.tireDot)
						}
						if (res.data.tirePattern) {
							res.data.tirePattern = JSON.parse(res.data.tirePattern)
						}
						this.form = res.data
					})
					.finally(() => {
						uni.hideLoading()
					});
			},
			async convertData(obj) {
				if (obj.overallVehicle) {
					obj.overallVehicle = JSON.stringify(obj.overallVehicle)
				}
				if (obj.tireDot) {
					obj.tireDot = JSON.stringify(obj.tireDot)
				}
				if (obj.tirePattern) {
					obj.tirePattern = JSON.stringify(obj.tirePattern)
				}
				return obj
			},
			goBack() {
				uni.navigateBack({
					delta: 1,
				});
			}

		}
	}
</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>