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" rightWidth="150rpx">
			<block slot="right" v-if='form.status>0'>
				<view style="font-size: 26rpx;">
					查看保单
				</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" label-width="80">
				<uni-forms-item name="consumerName" label="联系人" required>
					<uni-easyinput v-model="form.consumerName" class="right-align" placeholder-class="placeholder-right"
						placeholder="请输入内容" :inputBorder="false" :disabled="form.status>0"
						:clearable="false"></uni-easyinput>
				</uni-forms-item>
				<uni-forms-item name="consumerPhone" label="电话" required>
					<uni-easyinput v-model="form.consumerPhone" class="right-align" type="number"
						placeholder-class="placeholder-right" placeholder="请输入内容" :inputBorder="false"
						:disabled="form.status>0" :clearable="false" maxlength="11"
						@change="photoChange"></uni-easyinput>
				</uni-forms-item>
				<!-- <uni-forms-item name="vehicleNumber" label="车牌号" required>
					<uni-easyinput v-model="form.vehicleNumber" class="right-align"
						placeholder-class="placeholder-right" placeholder="请输入内容" :inputBorder="false"
						:disabled="form.status>0" :clearable="false"></uni-easyinput>
				</uni-forms-item> -->
				<uni-forms-item name="vehicleNumber" label="车牌号">
					<view style="display: flex;align-items: center;">
						<!-- <uni-easyinput v-model="form.vehicleNumber" class="right-align"
							placeholder-class="placeholder-right" placeholder="请输入车牌号" :inputBorder="false"
							:disabled="form.status>0" :clearable="false" @change="carNoVerify"
							maxlength="8"></uni-easyinput> -->
						<view style="display: flex;align-items: center;height: 36px;width: 100%;">
							<view @click="handleInputFocus()" style="width: 100%;text-align: right;padding: 0 20rpx;"
								:style="form.vehicleNumber?'color:#000;':'color:#B5B4B4;font-size: 24rpx;'">
								{{form.vehicleNumber||'请输入车牌号'}}
							</view>
						</view>
						<uni-icons v-if="!form.status>0" type="camera" size="24" color='#03803B'
							@click="allClick('识别车牌号')"></uni-icons>
					</view>
				</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="form.status>0" type="number"
						@input="handleInput" :clearable="false"></uni-easyinput> -->
					<view style="display: flex;justify-content: flex-end;align-items: center;height: 36px;">
						<uni-number-box class="force-disabled-input" v-model="form.tireQuantity" :min="1" :max="4"
							:disabled="form.status>0" @change="qtyChange" readonly />
					</view>
				</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 20rpx 62rpx;margin-top: 30rpx;" titleColor="5F5F5F"
			titleFontSize="28rpx">
			<view>
				<u-tabs :current="activeTab" :list="tabs" @click="onClickTabs" lineColor="#03803B"></u-tabs>
			</view>
			<view v-for="(item,index) in form.tireInsuranceFilesList.slice(activeTab*3,activeTab*3+3)" :key="index">
				<uni-forms v-if="index==0" ref="form2" :modelValue="item" :border="true" label-width="80">
					<uni-forms-item name="tyreNo" label="胎号">
						<view style="display: flex;align-items: center;">
							<uni-easyinput v-model="item.tyreNo" class="right-align"
								placeholder-class="placeholder-right" placeholder="请输入胎号" :inputBorder="false"
								:disabled="form.status>0" :clearable="false"
								@change="getMaterialDetail($event,activeTab)"></uni-easyinput>
							<uni-icons v-if="!form.status>0" type="scan" size="24" color='#03803B'
								@click="allClick('识别胎号',activeTab)"></uni-icons>
						</view>
					</uni-forms-item>
					<uni-forms-item name="tyreSpecs" label="规格型号">
						<uni-easyinput v-model="item.tyreSpecs" class="right-align"
							placeholder-class="placeholder-right" placeholder="" :inputBorder="false" :disabled="true"
							:clearable="false" @change="tyreSpecsChange"></uni-easyinput>
					</uni-forms-item>
					<uni-forms-item name="brandItem" label="花纹">
						<uni-easyinput v-model="item.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="item.brandName" class="right-align"
							placeholder-class="placeholder-right" placeholder="" :inputBorder="false" :disabled="true"
							:clearable="false"></uni-easyinput>
					</uni-forms-item>
				</uni-forms>
				<view class="photo-upload">
					<view>
						<view class="photo-upload-text">示例照片</view>
						<view>
							<image v-if='item.fileProperties==1' class="photo-upload-img"
								src="@/static/images/home/insurance/em5.jpg" />
							<image v-if='item.fileProperties==2' class="photo-upload-img"
								src="@/static/images/home/insurance/em2.png" />
							<image v-if='item.fileProperties==3' class="photo-upload-img"
								src="@/static/images/home/insurance/em1.png" />
						</view>
					</view>
					<view>
						<view v-if='item.fileProperties==1' class="photo-upload-text" style="color: #03803B;">车辆角度45°
						</view>
						<view v-if='item.fileProperties==2' class="photo-upload-text" style="color: #03803B;">轮胎DOT
						</view>
						<view v-if='item.fileProperties==3' class="photo-upload-text" style="color: #03803B;">安装照片
						</view>
						<view class="photo-upload-upload">
							<uni-file-picker v-model="item.fileObj" return-type="object" limit="1"
								:imageStyles="imageStyles" file-mediatype="image" @select="fileSelect($event,item)"
								:del-icon="!(form.status>0)" @delete="fileDelete($event,item)" :sourceType="['camera']">
								<image class="photo-upload-img2" src="@/static/images/home/insurance/upload.png" />
							</uni-file-picker>
						</view>
					</view>
				</view>
			</view>
			<!-- <debounce-button style="margin-top: 30rpx;"
				v-if="form.status==1&&form.tireInsuranceFilesList.slice(activeTab*3,activeTab*3+3).filter(item=>item.claimStatus==0).length"
				bgColor='#03803B' @click="claim">生成理赔</debounce-button>
			<debounce-button style="margin-top: 30rpx;"
				v-if="form.status==1&&form.tireInsuranceFilesList.slice(activeTab*3,activeTab*3+3).filter(item=>item.claimStatus==0).length==0"
				bgColor='#03803B' :readOnly="true">已生成理赔</debounce-button> -->
		</uni-section>
		<u-keyboard ref="uKeyboard" mode="car" :show="carShow" @change="carChange" @backspace="backspace"
			:showCancel="false" :showConfirm="false" @close="carShow=false" :safeAreaInsetBottom="true"
			:autoChange="true"></u-keyboard>
		<view class="nav-bottom-height">
		</view>
		<view class="goods-nav-bottom">
			<uni-goods-nav v-if="!form.id" :fill="true" :options="[]" :buttonGroup="buttonGroup"
				@buttonClick="buttonClick" />
			<uni-goods-nav v-if="form.status==0" :fill="true" :options="[]" :buttonGroup="buttonGroup2"
				@buttonClick="buttonClick2" />
			<!-- <debounce-button v-if="!form.id" bgColor='#03803B' @click="submit">保存</debounce-button>

			<view v-if="form.status==0" style="display: flex;">
				<debounce-button bgColor='#03803B' style="width: 260rpx;" @click="submit">保存</debounce-button>
				<debounce-button type="warn" style="width: 260rpx;" @click="approval">提交</debounce-button>
			</view> -->
			<!-- <debounce-button v-if="!form.id" bgColor='#03803B' @click="submit">确认信息</debounce-button> -->
			<!-- <view v-if="form.status==0" style="display: flex;width: 100%;justify-content: space-around;">
				<debounce-button bgColor='#03803B' style="width: 260rpx;" @click="submit">确认信息</debounce-button>
				<debounce-button v-if="!form.fileUrl" type="warn" style="width: 260rpx;"
					@click="allClick('生成二维码')">生成二维码</debounce-button>
				<debounce-button v-if="form.fileUrl" type="warn" style="width: 260rpx;"
					@click="allClick('查看二维码')">查看二维码</debounce-button>
			</view> -->
		</view>

		<uni-popup ref="popup">
			<view
				style="width: 470rpx;height: 470rpx;background-color: #fff;display: flex;flex-direction: column;align-items: center;justify-content: center;">
				<image style="width: 400rpx;height: 400rpx;" :src="form.fileUrl" />
				<view class="">
					请使用车主小程序扫码查询轮胎保进度
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import http from '@/http/api.js'
	import {
		clientId,
		clientSecret
	} from '@/common/setting'
	import {
		submit,
		getDetail,
		fileRemove,
		submitApproval,
		revokeApproval,
		generateShopAppClaim,
		obtainContacts,
		getMaterialDetail,
		tireInsuranceQRCode
	} from '@/api/home/insurance.js'
	export default {
		data() {
			return {
				buttonGroup: [{
					text: '确认信息',
					backgroundColor: '#03803B',
					color: '#fff'
				}],
				buttonGroup2: [{
						text: '确认信息',
						backgroundColor: '#03803B',
						color: '#fff'
					},
					{
						text: '查看二维码',
						backgroundColor: '#e64340',
						color: '#fff'
					}
				],
				carShow: false,
				form: {
					consumerName: null,
					consumerPhone: null,
					tireQuantity: 1,
					vehicleNumber: '',
					tyreNo: null,
					tyreSpecs: null,
					claimAttachmentList: [],
					tireInsuranceFilesList: [{
							affiliatedWithGroup: 1,
							fileProperties: 1,
							fileUrl: null,
							fileName: null,
							fileType: null,
							fileSize: null,
							fileObj: null,
							tyreNo: null,
							tyreSpecs: null,
							brandItem: null,
							brandName: null,
						}, {
							affiliatedWithGroup: 1,
							fileProperties: 2,
							fileUrl: null,
							fileName: null,
							fileType: null,
							fileSize: null,
							fileObj: null,
							tyreNo: null,
							tyreSpecs: null,
							brandItem: null,
							brandName: null,
						},
						{
							affiliatedWithGroup: 1,
							fileProperties: 3,
							fileUrl: null,
							fileName: null,
							fileType: null,
							fileSize: null,
							fileObj: null,
							tyreNo: null,
							tyreSpecs: null,
							brandItem: null,
							brandName: null,
						}
					]
				},
				imageStyles: {
					width: 145,
					height: 145,
					border: false,
				},
				mapObject: {
					text: 'name',
					value: 'code',
					children: 'children'
				},
				addressData: [],
				labelList: [],
				corpsTypeList: [],
				storeAttributesList: [],
				chainAttributeList: [],
				signingLevelList: [],
				tabs: [{
					name: '轮胎1'
				}],
				activeTab: 0
			}
		},
		onLoad(option) {
			this.addressData = JSON.parse(uni.getStorageSync("addressData"))
			if (option && option.id) {
				this.getDetail(option.id)
			} else {
				//新单据默认联系人手机号
				// obtainContacts().then(res => {
				// 	console.log(res.data)
				// 	this.form.consumerName = res.data.contacts
				// 	this.form.consumerPhone = res.data.contactsPhone
				// })
			}
		},
		onShow() {
			if (uni.getStorageSync('isClainUpdate') && this.form.id) {
				this.getDetail(this.form.id)
				uni.removeStorageSync('isClainUpdate')
			}
		},
		watch: {
			// 监听附件明细
			'form.tireInsuranceFilesList': {
				handler(newVal, oldVal) {
					if (newVal.length) {
						this.tabs = []
						for (let i = 1; i <= newVal.length / 3; i++) {
							this.tabs.push({
								name: '轮胎' + i
							})
						}
					}

				},
				immediate: true,
				deep: true
			}
		},
		methods: {
			buttonClick(e) {
				console.log(e)
				if(e.index==0){
					this.submit()
				}
				// this.options[2].info++
			},
			buttonClick2(e) {
				console.log(e)
				if(e.index==0){
					this.submit()
				}
				if(e.index==1){
					this.allClick('查看二维码')
				}
				// this.options[2].info++
			},
			// 处理输入框聚焦事件
			handleInputFocus() {
				if (this.form.status > 0) return
				this.carShow = true;
			},
			// 按键被点击(点击退格键不会触发此事件)
			carChange(val) {
				if (this.form.vehicleNumber.length < 8) {
					this.form.vehicleNumber += val;
				}
			},
			// 退格键被点击
			backspace() {
				if (this.form.vehicleNumber.length) this.form.vehicleNumber = this.form.vehicleNumber.substr(0, this.form
					.vehicleNumber.length - 1);
			},
			photoChange(val) {
				if (val) {
					if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(val)) {
						uni.showToast({
							title: '请输入正确电话',
							icon: 'none'
						});
						return;
					}
				}
			},
			carNoVerify(plateNumber) {
				if (plateNumber) {
					const PROVINCES = [
						'京', '津', '冀', '晋', '蒙', '辽', '吉', '黑',
						'沪', '苏', '浙', '皖', '闽', '赣', '鲁', '豫',
						'鄂', '湘', '粤', '桂', '琼', '川', '贵', '云',
						'渝', '藏', '陕', '甘', '青', '宁', '新', '台',
						'港', '澳'
					]
					const AGENCY_PATTERN = /^[A-HJ-NP-Z]$/
					const BLUE_PLATE_PATTERN = /^[0-9A-HJ-NP-Z]{5}$/
					// 绿牌能源类型标识
					const ENERGY_TYPES = {
						'D': '纯电动',
						'F': '非纯电动'
					}
					const GREEN_PLATE_PATTERN = /^[0-9A-HJ-NP-Z]{6}$/
					const plate = plateNumber.toUpperCase().trim()

					// 长度检查
					if (plate.length !== 7 && plate.length !== 8) {
						uni.showToast({
							title: '请输入有效的车牌号！',
							icon: 'none'
						});
						return false
					}

					// 省份简称检查
					if (!PROVINCES.includes(plate.charAt(0))) {
						uni.showToast({
							title: '请输入有效的车牌号！',
							icon: 'none'
						});
						return false
					}

					// 发牌机关代号检查
					if (!AGENCY_PATTERN.test(plate.charAt(1))) {
						return uni.showToast({
							title: '请输入有效的车牌号！',
							icon: 'none'
						});
					}

					// 蓝牌检查
					if (plate.length === 7) {
						const serial = plate.substring(2)
						if (!(BLUE_PLATE_PATTERN.test(serial) && !/[IO]/.test(serial))) {
							uni.showToast({
								title: '请输入有效的车牌号！',
								icon: 'none'
							});
							return false
						}

					}

					// 绿牌检查
					if (plate.length === 8) {
						const energyType = plate.charAt(2)
						const serial = plate.substring(2)
						if (!((energyType === 'D' || energyType === 'F'))) {
							uni.showToast({
								title: '请输入有效的车牌号！',
								icon: 'none'
							});
							return false
						}
						if (!(GREEN_PLATE_PATTERN.test(serial) && !/[IO]/.test(serial))) {
							uni.showToast({
								title: '请输入有效的车牌号！',
								icon: 'none'
							});
							return false
						}
					}
				}
				return true
			},
			allClick(name, row) {
				if (!(this.form.status > 0)) {
					if (name == '识别车牌号') {
						let _this = this
						uni.chooseImage({
							count: 1, //默认9
							sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
							sourceType: ['camera'],
							success: function(file) {
								uni.showLoading({
									title: '加载中',
									mask: true
								});
								uni.uploadFile({
									url: http.config.baseURL +
										'/gubersail-shop-app/tireinsuranceregister/recognizeLicensePlateNumber', // 仅为示例，非真实的接口地址
									filePath: file.tempFilePaths[0],
									header: {
										// 客户端认证参数
										'Authorization': 'Basic ' + Base64.encode(clientId + ':' +
											clientSecret),
										'Blade-Auth': 'bearer ' + uni.getStorageSync('accessToken')
									},
									name: 'file',
									success: (res) => {
										const data = JSON.parse(res.data)
										console.log(data)
										_this.form.vehicleNumber = data.data
										uni.showToast({
											title: data.msg,
											icon: 'none',
											duration: 2000
										});
									},
									fail: (err) => {

										uni.showToast({
											title: err,
											icon: 'none',
											duration: 2000
										});
									},
									complete: () => {
										uni.hideLoading()
									}
								})
							}
						});
					}
				}
				if (name == '识别胎号') {
					let _this = this
					uni.scanCode({
						scanType: ['barCode'],
						onlyFromCamera: true,
						success: function(res) {
							_this.getMaterialDetail(res.result, row)
						}
					});
				}
				if (name == '生成二维码') {
					let _this = this
					uni.showModal({
						title: '提示',
						content: '是否生成二维码？',
						success: function(res) {
							if (res.confirm) {
								let obj = {
									tireInsuranceId: _this.form.id,
									url: '/pages/home/insurance/details'
								}
								uni.showLoading({
									title: '加载中',
									mask: true
								});
								tireInsuranceQRCode(obj).then(res => {
										setTimeout(() => {
											uni.showToast({
												title: '操作成功',
												icon: 'none',
												duration: 2000
											});
										}, 10);
										_this.getDetail(_this.form.id)
									})
									.catch(() => {
										uni.hideLoading()
									});
							}
						}
					});
				}
				if (name == '查看二维码') {
					this.$refs.popup.open()
				}
			},
			getMaterialDetail(val, activeTab) {
				if (val) {
					let obj = {
						tireNumber: val
					}
					getMaterialDetail(obj).then(res => {
						if (res.data) {
							for (let item of this.form.tireInsuranceFilesList.slice(activeTab * 3, activeTab * 3 +
									3)) {
								item.tyreNo = val
								item.tyreSpecs = res.data.sizeId
								item.brandItem = res.data.pattern
								item.brandName = res.data.brand
							}
						} else {
							uni.showToast({
								title: res.msg,
								icon: 'none'
							});
							for (let item of this.form.tireInsuranceFilesList.slice(activeTab * 3, activeTab * 3 +
									3)) {
								item.tyreNo = val
								item.tyreSpecs = null
								item.brandItem = null
								item.brandName = null
							}
						}

					})
				} else {
					for (let item of this.form.tireInsuranceFilesList.slice(activeTab * 3, activeTab * 3 + 3)) {
						item.tyreNo = null
						item.tyreSpecs = null
						item.brandItem = null
						item.brandName = null
					}
				}
			},
			tyreSpecsChange(val) {
				for (let item of this.form.tireInsuranceFilesList.slice(this.activeTab * 3, this
						.activeTab * 3 + 3)) {
					item.tyreSpecs = val
				}
			},
			qtyChange(val) {
				//轮胎数量*3大于明细 新增三条明细
				if (val * 3 > this.form.tireInsuranceFilesList.length) {
					const list = [{
							affiliatedWithGroup: val,
							fileProperties: 1,
							fileUrl: null,
							fileName: null,
							fileType: null,
							fileSize: null,
							fileObj: null,
							tyreNo: null,
							tyreSpecs: null,
							brandItem: null,
							brandName: null,
						}, {
							affiliatedWithGroup: val,
							fileProperties: 2,
							fileUrl: null,
							fileName: null,
							fileType: null,
							fileSize: null,
							fileObj: null,
							tyreNo: null,
							tyreSpecs: null,
							brandItem: null,
							brandName: null,
						},
						{
							affiliatedWithGroup: val,
							fileProperties: 3,
							fileUrl: null,
							fileName: null,
							fileType: null,
							fileSize: null,
							fileObj: null,
							tyreNo: null,
							tyreSpecs: null,
							brandItem: null,
							brandName: null,
						}
					]
					this.form.tireInsuranceFilesList = [
						...this.form.tireInsuranceFilesList,
						...list
					]
				}
				//轮胎数量*3小于明细 删除三条明细
				if (val * 3 < this.form.tireInsuranceFilesList.length) {
					let ids = []
					for (let item of this.form.tireInsuranceFilesList.slice(-3)) {
						if (item.id) {
							ids.push(item.id)
						}
					}
					if (ids.length) {
						fileRemove(ids.join(",")).then(res => {
							this.form.tireInsuranceFilesList.splice(this.form.tireInsuranceFilesList.length - 3,
								3);
							if (this.activeTab >= Number(val - 1)) {
								this.activeTab = val - 1
							}
							uni.showLoading({
								title: '加载中',
								mask: true
							});
							submit(this.form).then(res => {
								this.getDetail(this.form.id)
							}).catch(() => {
								uni.hideLoading()
							});
						}).catch(err => {
							this.form.tireQuantity = val + 1
						})
					} else {
						if (this.activeTab >= Number(val - 1)) {
							this.activeTab = val - 1
						}
						this.form.tireInsuranceFilesList.splice(this.form.tireInsuranceFilesList.length - 3, 3);
					}

				}
			},
			onClickTabs(item) {
				this.activeTab = item.index
			},
			inItemDetail() {
				if (this.form.status > 0) {
					uni.navigateTo({
						url: '/pages/home/insurance/itemDetails?id=' + this.form.id,
					});
				}
				uni.setStorageSync('isClainUpdate', true)
			},
			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);
			},
			getFileExtension(filename) {
				return filename.slice(((filename.lastIndexOf(".") - 1) >>> 0) + 2);
			},
			fileDelete(files, row) {
				console.log(files, row)
				this.form.tireInsuranceFilesList.forEach(item => {
					if (row.affiliatedWithGroup == item.affiliatedWithGroup && row.fileProperties == item
						.fileProperties) {
						item.fileUrl = null
						item.fileName = null
						item.fileType = null
						item.fileSize = null
						item.fileObj = null
					}
				})
			},
			fileSelect(files, row) {
				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.tireInsuranceFilesList.forEach(item => {
								if (item.affiliatedWithGroup == row.affiliatedWithGroup && item
									.fileProperties == row.fileProperties) {
									item.fileObj = {
										url: data.link,
										name: data.originalName,
										extname: this.getFileExtension(data.originalName),
									}
									// item.url = data.link
									// item.name = data.originalName
									// item.extname = this.getFileExtension(data.originalName)
									item.fileUrl = data.link
									item.fileName = data.originalName
									item.fileType = this.getFileExtension(data.originalName)
									item.fileSize = 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.carNoVerify(this.form.vehicleNumber)) {
					return
				}
				for (let item of this.form.tireInsuranceFilesList) {
					if (item.fileUrl == null) {
						return uni.showToast({
							title: `请上传轮胎${item.affiliatedWithGroup }的${+ item.fileProperties == 1 ?
								'车辆角度45%' : item.fileProperties == 2 ? '轮胎DOT' : '安装照片'}`,
							icon: 'none'
						});
					}
				}
				let obj = {
					...this.form,
					jumpUrl: "/pages/home/insurance/details"
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				submit(obj).then(res => {
						setTimeout(() => {
							uni.showToast({
								title: '保存成功',
								icon: 'none',
							});
						}, 10);
						uni.setStorageSync('isUpdate', true)
						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.carNoVerify(this.form.vehicleNumber)) {
					return
				}
				for (let item of this.form.tireInsuranceFilesList) {
					if (item.fileUrl == null) {
						return uni.showToast({
							title: `请上传轮胎${item.affiliatedWithGroup }的${+ item.fileProperties == 1 ?
							'车辆角度45%' : item.fileProperties == 2 ? '轮胎DOT' : '安装照片'}`,
							icon: 'none'
						});
					}
				}
				let _this = this
				uni.showModal({
					title: '提示',
					content: '是否提交？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中',
								mask: true
							});
							submitApproval(_this.form).then(res => {
									setTimeout(() => {
										uni.showToast({
											title: '操作成功',
											icon: 'none',
											duration: 2000
										});
									}, 10);
									_this.getDetail(res.data.id)
								})
								.catch(() => {
									uni.hideLoading()
								});
						}
					}
				});
			},
			async claim() {
				let ids = []
				let tyreNo = null
				let tyreSpecs = null
				let brandItem = null
				let brandName = null
				for (let item of this.form.tireInsuranceFilesList.slice(this.activeTab * 3, this.activeTab * 3 + 3)) {
					ids.push(item.id)
					tyreNo = item.tyreNo
					tyreSpecs = item.tyreSpecs
					brandItem = item.brandItem
					brandName = item.brandName
				}
				let obj = {
					...this.form,
					fileId: ids.join(","),
					tyreNo: tyreNo,
					tyreSpecs: tyreSpecs,
					brandItem: brandItem,
					brandName: brandName,
					tireDescription: '轮胎' + Number(Number(this.activeTab) + 1)
				}
				uni.showModal({
					title: '提示',
					content: '是否生成保单？',
					success: function(res) {
						if (res.confirm) {
							uni.showLoading({
								title: '加载中',
								mask: true
							});
							generateShopAppClaim(obj).then(res => {
									setTimeout(() => {
										uni.showToast({
											title: '操作成功',
											icon: 'none',
											duration: 2000
										});
									}, 10);
									uni.navigateTo({
										url: '/pages/home/claim/details?id=' + res
											.data
											.claimId,
									});
									uni.setStorageSync('isClainUpdate', true)
								})
								.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)
								})
								.catch(() => {
									uni.hideLoading()
								});
						}
					}
				});
			},
			getDetail(id) {
				let obj = {
					id: id
				}
				uni.showLoading({
					title: '加载中',
					mask: true
				});
				getDetail(obj).then(res => {
						for (let item of res.data.tireInsuranceFilesList) {
							item.fileObj = {
								name: item.fileName,
								url: item.fileUrl,
								extname: item.fileType,
								size: item.fileSize,
							}
						}
						this.form = res.data
					})
					.finally(() => {
						uni.hideLoading()
					});
			},
			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 .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;
	}

	/* 更强制性的样式控制 */
	::v-deep .uni-numbox__value {
		/* 完全禁用所有交互 */
		pointer-events: none !important;
		touch-action: none !important;
	}
</style>