pad-app/pages/quality/edit.vue

<template>
	<view class="edit">
		<head-view title="货物质损" url="/pages/quality/index"></head-view>
		<view class="stepsBox" v-show="isShow">
			<uni-steps :options="stepList" :active="active" />
		</view>
		<scroll-view>
			<view class="container contentFixed">
				<template v-if="active == 0">
					<view class="blockBox">
						<view class="formTitle">
							<image src="../../static/images/goodsImg2.png"></image>
							<p>质损发生环节</p>
						</view>
						<radio-group class="radioList" @change="radioChange">
							<template v-for="(item, index) in radioList">
								<label class="radioBox" :key="item.value">
									<template>
										<view>
											<radio :value="item.value" :checked="item.checked" />
										</view>
										<view>{{item.name}}</view>
									</template>
								</label>
							</template>
						</radio-group>
						<view class="radioInput">
							<template v-if="isFeed">
								<uni-easyinput type="textarea" autoHeight v-model="feed" placeholder="请输入客户反馈内容"
									maxlength="200" @focus="inputFocus" @blur="inputBlur"></uni-easyinput>
							</template>
							<template v-if="isOther">
								<uni-easyinput type="textarea" autoHeight v-model="remark" placeholder="请输入其他内容"
									maxlength="200" @focus="inputFocus" @blur="inputBlur"></uni-easyinput>
							</template>
						</view>
					</view>
					<view class="blockBox">
						<view class="formTitle tpTitle">
							<image src="../../static/images/zlIcon.png"></image>
							<p>板车照片上传<text>最多9张</text></p>
						</view>
						<view class="picture">
							<uni-file-picker limit="9" v-model="bcPhoto2" @select="select"
								@delete="photoDelete"></uni-file-picker>
						</view>
					</view>
					<view class="blockBox">
						<view class="formTitle tpTitle">
							<image src="../../static/images/cpIcon.png"></image>
							<p>板车车牌照上传<text>最多9张</text></p>
						</view>
						<view class="picture">
							<uni-file-picker limit="9" v-model="bcLicense2" @select="select2"
								@delete="photoDelete2"></uni-file-picker>
						</view>
					</view>
				</template>
				<template v-if="active == 1">
					<view class="blockBox zsInfo">
						<view class="li">
							<p class="liTitle">车架号/条形码:</p>
							<uni-easyinput class="inputBox wInput" v-model="carValue" placeholder="请输入车架号/条形码"
								@blur="carBlur" :disabled="vinDisabled"></uni-easyinput>
							<image src="../../static/images/sys.png" mode="" @click="getInfo"></image>
						</view>
						<view class="li textRight">
							<p class="liTitle">船名/航次:</p>
							<superwei-combox class="select" :candidates="shipList" :isJSON="true" keyName="vvyShip"
								placeholder="请选择船名/航次" v-model="vvyShip" @select="shipChange"></superwei-combox>
						</view>
						<view class="li">
							<p class="liTitle">车型:</p>
							<uni-data-select v-model="carId" :localdata="carList" @change="carChange"
								:disabled="carDisabled" placeholder="请选择车型"></uni-data-select>
						</view>
						<view class="li">
							<p class="liTitle">品牌:</p>
							<uni-data-select v-model="brandId" :localdata="brandList" @change="brandChange"
								:disabled="brandDisabled" placeholder="请选择品牌"></uni-data-select>
						</view>
						<view class="li">
							<p class="liTitle">质损时间:</p>
							<uni-datetime-picker type="datetime" v-model="zsDate" @change="dateChange" />
						</view>
						<view class="li cwLi">
							<p class="liTitle">场位:</p>
							<uni-data-select v-model="yardId" :localdata="yardColumns" @change="yardChange"
								:disabled="yardDisabled" placeholder="堆场"></uni-data-select>
							<uni-data-select v-model="storeAreaId" :localdata="storeAreaColumns"
								@change="storeAreaChange" :disabled="storeAreaDisabled"
								placeholder="区域"></uni-data-select>
							<uni-data-select v-model="storeLineId" :localdata="storeLineColumns"
								@change="storeLineChange" :disabled="storeLineDisabled"
								placeholder="车道"></uni-data-select>
							<uni-data-select v-model="storeSeatId" :localdata="storeSeatColumns"
								@change="storeSeatChange" :disabled="storeSeatDisabled"
								placeholder="车位"></uni-data-select>
						</view>
					</view>
					<view class="blockBox">
						<view class="zsLi">
							<p class="zsTitle">质损货物品类:</p>
							<radio-group @change="radioChange2" class="radioList2">
								<label class="radioBox" v-for="(item, index) in radioList2" :key="item.value">
									<view>
										<radio :value="item.value" :checked="item.checked" />
									</view>
									<view class="boxInfo">{{item.name}}</view>
								</label>
							</radio-group>
							<uni-easyinput class="inputBox" v-model="other" placeholder="请输入内容" v-if="showInput2"
								@focus="inputFocus" @blur="inputBlur"></uni-easyinput>
						</view>
						<view class="zsLi">
							<p class="zsTitle">质损概况:</p>
							<checkbox-group class="radioList2" @change="checkboxChange">
								<label class="radioBox" v-for="item in checklist" :key="item.value">
									<view>
										<checkbox :value="item.value" :checked="item.checked" />
									</view>
									<view class="boxInfo">{{item.name}}</view>
								</label>
							</checkbox-group>
							<uni-easyinput class="inputBox" v-model="other1" placeholder="请输入" v-if="showInput3"
								@focus="inputFocus" @blur="inputBlur"></uni-easyinput>
						</view>
						<view class="zsLi">
							<p class="zsTitle">损伤情况:</p>
							<checkbox-group class="radioList2" @change="checkboxChange2">
								<label class="radioBox" v-for="item in checklist2" :key="item.value">
									<view>
										<checkbox :value="item.value" :checked="item.checked" />
									</view>
									<view class="boxInfo">{{item.name}}</view>
								</label>
							</checkbox-group>
							<uni-easyinput class="inputBox" v-model="other2" placeholder="请输入" v-if="showInput4"
								@focus="inputFocus" @blur="inputBlur"></uni-easyinput>
						</view>
						<view class="zsLi">
							<p class="zsTitle">处置情况:</p>
							<checkbox-group class="radioList2" @change="checkboxChange3">
								<label class="radioBox" v-for="item in checklist3" :key="item.value">
									<view>
										<checkbox :value="item.value" :checked="item.checked" />
									</view>
									<view class="boxInfo">{{item.name}}</view>
								</label>
							</checkbox-group>
							<uni-easyinput class="inputBox" v-model="other3" placeholder="请输入" v-if="showInput5"
								@focus="inputFocus" @blur="inputBlur"></uni-easyinput>
						</view>
						<view class="imageLi">
							<image :src="hzzsImg" class="zshz" mode="widthFix" @click="togoCs" v-if="hzzsImg != ''">
							</image>
						</view>
					</view>
				</template>
				<template v-if="active == 2">
					<view class="blockBox">
						<view class="formTitle tpTitle">
							<image src="../../static/images/zsIcon.png"></image>
							<p>质损照片<text>最多9张</text></p>
						</view>
						<view class="picture">
							<uni-file-picker limit="9" v-model="zsPhoto2" @select="select3"
								@delete="photoDelete3"></uni-file-picker>
						</view>
					</view>
					<view class="blockBox">
						<view class="formTitle tpTitle">
							<image src="../../static/images/cjhIcon.png"></image>
							<p>车架号图片上传<text>最多9张</text></p>
						</view>
						<view class="picture">
							<uni-file-picker limit="9" v-model="carPhoto2" @select="select4"
								@delete="photoDelete4"></uni-file-picker>
						</view>
					</view>
				</template>
				<template v-if="active == 3">
					<view class="blockBox signBox">
						<view class="flexLi">
							<p class="title">质损负责人:</p>
							<uni-easyinput class="inputBox" v-model="director" placeholder="请输入" @focus="inputFocus"
								@blur="inputBlur"></uni-easyinput>
						</view>
						<view class="signContent">
							<!-- <p class="siginTitle">请确保“字迹清晰”并尽量把“签字范围”撑满</p>
						<signRegion></signRegion> -->
							<p class="sign" @click="sign" v-if="signImg == ''">点击签名</p>
							<template v-else>
								<image :src="signImg"></image>
								<!-- <p class="editSign" @click="sign">重新签名</p> -->
							</template>
						</view>
					</view>
				</template>
			</view>
		</scroll-view>
		<view class="btnList" v-show="isShow">
			<view class="btn leftBtn" @click="cancel">取消</view>
			<view class="btn backBtn" @click="back" v-if="active > 0">上一步</view>
			<view class="btn rightBtn" @click="next" v-if="active < 3">下一步</view>
			<view class="btn rightBtn" @click="save" v-if="active == 3">提交</view>
		</view>
		<LotusLoading :lotusLoadingData="lotusLoadingData"></LotusLoading>
	</view>
</template>

<script>
	import LotusLoading from "../../components/Winglau14-lotusLoading/Winglau14-LotusLoading.vue";
	import signRegion from "../quality/sign.vue";
	export default {
		name: "monEdit",
		data() {
			return {
				isShow: true,
				loginObj: {},
				active: 0,
				stepList: [{
						title: '基本信息'
					},
					{
						title: '质损信息'
					},
					{
						title: '质损图片'
					},
					{
						title: '签字'
					}
				],
				ygqId: "",
				type: "",

				// 港区信息
				portObj: {},

				// 基本信息
				radioList: [],
				current: "", // 质损发生环节
				currentValue: "",
				feed: "", // 客户反馈
				isFeed: false, // 客户反馈输入框
				remark: "", // 其他
				isOther: false, // 其他输入框

				// 质损信息
				carValue: "", // 车架号
				godId: "", // 货物id
				// 船名
				shipId: "", // 船ID
				shipName: "", // 船名
				vvyShip: "",
				shipList: [],
				// 航次
				vvyId: "",
				vvyList: [],
				// 车型
				carId: "", // 车型ID
				carModel: "", // 车型
				carList: [],
				// 品牌
				brandId: "", // 品牌ID
				brandValue: "", // 品牌
				brandList: [],
				// 堆场
				yardId: "",
				yardName: "",
				yardColumns: [],
				// 场位(区域)
				storeAreaId: "",
				storeArea: "",
				storeAreaColumns: [],
				// 场位(车道)
				storeLineId: "",
				storeLine: "",
				storeLineId: "",
				storeLineColumns: [],
				// 场位(车位)
				storeSeatId: "",
				storeSeat: "",
				storeSeatColumns: [],
				zsDate: "", // 质损时间

				// 是否禁用
				vinDisabled: false, // 车架号输入禁用
				shipDisabled: false, // 船名航次下拉禁用
				carDisabled: false, // 车型下拉禁用
				brandDisabled: false, // 品牌下拉禁用
				yardDisabled: false, // 堆场下拉禁用
				storeAreaDisabled: false, // 区域下拉禁用
				storeLineDisabled: false, // 车道下拉禁用
				storeSeatDisabled: false, // 车位下拉禁用

				// 质损货物品类
				radioList2: [],
				radioData2: "",
				showInput2: false,
				current2: "",
				currentValue2: 0,
				other: "", // 质损货物品类其他

				// 质损概况
				checkValue: [], // 质损概况多选框选中
				checklist: [], // 质损概况多选框
				checkData: [],
				showInput3: false,
				other1: "", // 质损概况其他
				// 损伤情况
				checkValue2: [], // 损伤情况多选框选中
				checklist2: [],
				checkData2: [],
				showInput4: false,
				other2: "", // 损伤情况其他
				// 处置状况
				checkValue3: [], // 处置状况多选框选中 
				checklist3: [], // 处置情况多选框
				checkData3: [],
				showInput5: false,
				other3: "", // 处置情况其他

				// 上传板车照片
				bcPhoto: [],
				// 板车照片列表
				bcPhoto2: [],

				// 上传车牌照片
				bcLicense: [],
				// 板车车牌列表
				bcLicense2: [],

				//  上传质损照片照片
				zsPhoto: [],
				// 板车质损列表
				zsPhoto2: [],

				// 上传车架号图片
				carPhoto: [],
				// 车架号图片列表
				carPhoto2: [],

				// 质损负责人
				director: "",

				// 质损图地址
				hzzsImg: "", // 绘制图
				zsBase: "",
				isSign: true,

				// 签名图片地址
				signUrl: "",
				signImg: "",
				signBase: "",

				lotusLoadingData: {
					isShow: false //设置显示加载中组件true显示false隐藏
				}
			}
		},
		components: {
			LotusLoading,
			signRegion,
		},
		onShow() {
			let signImg = uni.getStorageSync('signImg')
			if (signImg != "") {
				this.signImg = uni.getStorageSync('signImg')
			}
			if (this.signImg != "") {
				this.baseImg(this.signImg, "1")
			}
			let hzzsImg = uni.getStorageSync('hzzsImg') || ""
			if (hzzsImg != "") {
				this.hzzsImg = uni.getStorageSync('hzzsImg')
			}
			if (this.isSign != "") {
				this.isSign = uni.getStorageSync('isSign')
			}
			if (hzzsImg != "") {
				if (this.isSign) {
					this.baseImg(this.hzzsImg, "2")
				} else {
					this.zsBase = this.hzzsImg
					this.initImg(this.zsBase, "6")
				}
			}
			uni.removeStorageSync('hzzsImg')
		},
		onLoad(options) {
			if ('params' in options) {
				// 获取传递的对象参数，使用decodeURIComponent解码，并转为对象
				this.ygqId = JSON.parse(decodeURIComponent(options.params)).ygqId
				this.type = JSON.parse(decodeURIComponent(options.params)).type
			}
			this.loginObj = uni.getStorageSync('loginObj')
			this.portObj = uni.getStorageSync('portObj')
			this.getCar()
			this.getBrand()
			this.getShip()
			this.yardData()
			this.getImg()
			this.getRadio()
			this.getRadio2()
			this.getCheck()
			this.getCheck2()
			this.getCheck3()
			let that = this
			if (this.type == 'edit') {
				this.getRowInfo()
			}
		},
		methods: {
			// 输入框聚焦
			inputFocus() {
				this.isShow = false
			},
			// // 输入框失焦
			inputBlur() {
				this.isShow = true
			},
			// 编辑状态内容
			getRowInfo() {
				uni.request({
					url: `${this.$local}/api/goodsQuality/getDetail?ygqId=${this.ygqId}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							this.infoData = res.data.data
							// 获取板车照片
							this.bcPhoto = this.infoData.boardCarPhotos
							this.infoData.boardCarPhotos.forEach(v => {
								this.initImg(v.filePath, "1")
							})
							// 获取板车车牌照
							this.bcLicense = this.infoData.boardCarLicensePlates
							this.infoData.boardCarLicensePlates.forEach(v => {
								this.initImg(v.filePath, "2")
							})
							// 获取质损照片
							this.zsPhoto = this.infoData.qualityDamagePhotos
							this.infoData.qualityDamagePhotos.forEach(v => {
								this.initImg(v.filePath, "3")
							})
							// 获取车架号图片
							this.carPhoto = this.infoData.carFrameNumberPhotos
							this.infoData.carFrameNumberPhotos.forEach(v => {
								this.initImg(v.filePath, "4")
							})
							if (this.infoData.signUrl != null) {
								this.signBase = this.infoData.signUrl
								this.initImg(this.infoData.signUrl, "5")
							}
							if (this.infoData.refImageUrl != null) {
								this.zsBase = this.infoData.refImageUrl
								this.initImg(this.infoData.refImageUrl, "6")
							}
							this.current = this.infoData.qdLink // 质损发生环节
							if (this.current == '客户反馈') {
								this.isFeed = true
							} else if (this.current == '其他') {
								this.isOther = true
							}
							this.radioList.forEach(v => {
								if (v.name == this.infoData.qdLink) {
									this.currentValue = v.value
									this.$set(v, "checked", true)
								} else {
									this.$set(v, "checked", false)
								}
							})
							this.feed = this.infoData.linkFeedback // 客户反馈
							this.remark = this.infoData.linkOther // 其他
							this.carValue = this.infoData.vinCode // 车架号
							this.godId = this.infoData.godId // 货物id
							this.shipId = this.infoData.spmId // 船名id
							this.vvyId = this.infoData.vvyId // 航次id
							this.vvyShip = this.infoData.spmIdAndVvyId // 船名航次
							this.zsDate = this.infoData.qualityDamageTime // 质损时间
							this.carId = this.infoData.goodsType // 车型
							this.brandId = this.infoData.brdId // 品牌id
							this.yardId = this.infoData.yardId // 堆场id
							this.yardName = this.infoData.yardName // 堆场
							this.storeAreaData(this.yardId) // 获取区域
							this.storeAreaId = this.infoData.yarId // 区域id
							this.storeArea = this.infoData.storeArea // 区域
							this.storeLineData(this.storeAreaId) // 获取车道
							this.storeLineId = this.infoData.yalId // 车道id
							this.storeLine = this.infoData.storeLine // 车道
							this.storeSeatData(this.storeLineId) // 获取车位
							this.storeSeatId = this.infoData.yacId // 车位id
							this.storeSeat = this.infoData.storeSeat // 车位
							this.current2 = this.infoData.qdGodsCategory // 质损货物品类
							if (this.current2 == '其他') {
								this.showInput2 = true
							}
							this.radioList2.forEach(v => {
								if (v.name == this.infoData.qdGodsCategory) {
									this.currentValue2 = v.value
									this.$set(v, "checked", true)
								} else {
									this.$set(v, "checked", false)
								}
							})
							this.other = this.infoData.qdGcOther // 质损货物品类其他
							this.checkData = this.infoData.qualityDamageSituation.split(",") // 质损概况
							this.checklist.forEach(v => {
								this.checkData.forEach(v2 => {
									if (v.value == v2) {
										this.$set(v, 'checked', true)
									}
									if (v2 == '3') {
										this.showInput3 = true
									}
								})
							})
							this.other1 = this.infoData.qdsOther // 质损概况其他
							this.checkData2 = this.infoData.damageSituation.split(",") // 损伤情况
							this.checklist2.forEach(v => {
								this.checkData2.forEach(v2 => {
									if (v.value == v2) {
										this.$set(v, 'checked', true)
									}
									if (v2 == '4') {
										this.showInput4 = true
									}
								})
							})
							this.other2 = this.infoData.dsOther // 损伤情况其他
							this.checkData3 = this.infoData.disposalSituation.split(",") // 处置情况
							this.checklist3.forEach(v => {
								this.checkData3.forEach(v2 => {
									if (v.value == v2) {
										this.$set(v, 'checked', true)
									}
									if (v2 == '4') {
										this.showInput5 = true
									}
								})
							})
							this.other3 = this.infoData.dpsOther // 处置情况其他
							this.director = this.infoData.qdLiablePerson // 质损负责人
							this.ygqId = this.infoData.ygqId // 质量id
							this.vinDisabled = true // 车架号输入禁用
						}
					}
				})
			},
			// type 1 板车照片 2板车车牌照 3质损照片 4车架号图片 5签名 6参考图
			initImg(fileName, type) {
				if (fileName != "") {
					uni.request({
						url: `${this.$local}/api/file/url/?fileName=${fileName}`,
						header: {
							'Content-Type': 'application/json', //自定义请求头信息
							'Authorization': `Bearer ${this.loginObj.access_token}`
						},
						method: 'GET', //请求方式，必须为大写
						success: (res) => {
							if (res.statusCode == 200) {
								if (type == 1) {
									this.bcPhoto2.push({
										url: res.data
									})
								} else if (type == 2) {
									this.bcLicense2.push({
										url: res.data
									})
								} else if (type == 3) {
									this.zsPhoto2.push({
										url: res.data
									})
								} else if (type == 4) {
									this.carPhoto2.push({
										url: res.data
									})
								} else if (type == 5) {
									this.signImg = res.data
								} else if (type == 6) {
									this.hzzsImg = res.data
								}
							}
						}
					})
				}
			},
			// 质损发生环节选项
			radioChange(evt) {
				let currentIndex = 0
				for (let i = 0; i < this.radioList.length; i++) {
					if (this.radioList[i].value === evt.detail.value) {
						currentIndex = i;
					}
				}
				this.current = this.radioList[currentIndex].name
				this.currentValue = this.radioList[currentIndex].value
				this.radioList.forEach(v => {
					if (this.current == v.name) {
						this.$set(v, "checked", true)
					} else {
						this.$set(v, "checked", false)
					}
				})
				if (this.current == "客户反馈") {
					this.isFeed = true
					this.isOther = false
				} else if (this.current == '其他') {
					this.isFeed = false
					this.isOther = true
				} else {
					this.isFeed = false
					this.isOther = false
				}
			},
			// 质损货物品类
			radioChange2(evt) {
				this.radioData2 = evt.detail.value
				let currentIndex = 0
				for (let i = 0; i < this.radioList2.length; i++) {
					if (this.radioList2[i].value === evt.detail.value) {
						currentIndex = i;
					}
				}
				this.current2 = this.radioList2[currentIndex].name
				this.currentValue2 = this.radioList2[currentIndex].value
				if (this.current2 == '其他') {
					this.showInput2 = true
				} else {
					this.showInput2 = false
				}
			},
			// 质损概况
			checkboxChange(e) {
				this.checkData = e.detail.value
				if (e.detail.value == 3) {
					this.showInput3 = true
				} else {
					this.showInput3 = false
				}
				var items = this.checklist
				var values = e.detail.value
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				let newArr = []
				this.checklist.forEach(v => {
					if (v.checked) {
						newArr.push(v.name)
					}
				})
				this.checkValue = newArr.filter((v, index) => {
					return newArr.indexOf(v) === index
				})
				this.checkValue.forEach(v => {
					if (v == '其他') {
						this.showInput3 = true
					} else {
						this.showInput3 = false
					}
				})
				if (!this.showInput3) {
					this.other1 = ''
				}
			},
			// 损伤情况
			checkboxChange2(e) {
				this.checkData2 = e.detail.value
				if (e.detail.value == 4) {
					this.showInput4 = true
				} else {
					this.showInput4 = false
				}
				var items = this.checklist2,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				let newArr = []
				this.checklist2.forEach(v => {
					if (v.checked) {
						newArr.push(v.name)
					}
				})
				this.checkValue2 = newArr.filter((v, index) => {
					return newArr.indexOf(v) === index
				})
				this.checkValue2.forEach(v => {
					if (v == '其他') {
						this.showInput4 = true
					} else {
						this.showInput4 = false
					}
				})
				if (!this.showInput4) {
					this.other2 = ''
				}
			},
			// 处置情况
			checkboxChange3(e) {
				this.checkData3 = e.detail.value
				if (e.detail.value == 4) {
					this.showInput5 = true
				} else {
					this.showInput5 = false
				}
				var items = this.checklist3,
					values = e.detail.value;
				for (var i = 0, lenI = items.length; i < lenI; ++i) {
					const item = items[i]
					if (values.includes(item.value)) {
						this.$set(item, 'checked', true)
					} else {
						this.$set(item, 'checked', false)
					}
				}
				let newArr = []
				this.checklist3.forEach(v => {
					if (v.checked) {
						newArr.push(v.name)
					}
				})
				this.checkValue3 = newArr.filter((v, index) => {
					return newArr.indexOf(v) === index
				})
				this.checkValue3.forEach(v => {
					if (v == '其他') {
						this.showInput5 = true
					} else {
						this.showInput5 = false
					}
				})
				if (!this.showInput5) {
					this.other3 = ''
				}
			},
			// 修改残损
			togoCs() {
				let obj = {
					imgUrl: this.zsBase
				}
				// console.log('this.zsBase',this.zsBase)
				const params = encodeURIComponent(JSON.stringify(obj));
				uni.navigateTo({
					url: `/pages/quality/zsEdit?params=${params}`
				})
			},
			// 点击签名
			sign() {
				uni.navigateTo({
					url: '/pages/quality/sign'
				})
			},
			// 通过接口获取图片地址  url Base64地址 type 1签名 2质损图
			baseImg(url, type) {
				let data = {
					"fileName": "abc",
					"base64Str": url
				}
				uni.request({
					url: `${this.$local}/pub/file/uploadRaw`,
					data: data,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'POST', //请求方式，必须为大写
					success: (res) => {
						if (type == 1) {
							this.signBase = res.data
						} else {
							this.zsBase = res.data
							// console.log('this.zsBase-----',this.zsBase);
						}
					}
				})
			},
			// 车架号输入失焦
			carBlur(e) {
				this.carValue = e.detail.value
				this.getYyInfo()
			},
			// 获取车辆信息
			getInfo() {
				this.getYyInfo()
			},
			// 获取预约信息接口
			getYyInfo() {
				uni.request({
					url: `${this.$local}/api/goodsQuality/scan/${this.carValue}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200 && res.data.data != null) {
							this.godId = res.data.data.godId
							// 船名
							if (res.data.data.spmId != "") {
								this.shipId = res.data.data.spmId
								this.vvyId = res.data.data.vvyId
								this.shipList.forEach(v => {
									if (v.spmId == this.shipId) {
										this.vvyShip = `${v.vslCnname}/${v.vvyName}`
									}
								})
								// this.shipDisabled = true
							}
							// 车型
							if (res.data.data.goodsType != "") {
								this.carId = res.data.data.goodsType
								// this.carDisabled = true
							} else {
								this.carDisabled = false
							}
							// 品牌
							if (res.data.data.brdId != "") {
								this.brandId = res.data.data.brdId
								// this.brandDisabled = true
							}
							// 堆场
							if (res.data.data.yardId != "") {
								this.storeAreaData(res.data.data.yardId)
								this.yardId = res.data.data.yardId
								this.yardName = res.data.data.yardName
								// this.yardDisabled = true
							}
							// 区域
							if (res.data.data.yarId != "") {
								this.storeLineData(res.data.data.yarId)
								this.storeAreaId = res.data.data.yarId
								this.storeArea = res.data.data.storeArea
								// this.storeAreaDisabled = true
							}
							// 车道
							if (res.data.data.yalId != "") {
								this.storeSeatData(res.data.data.yalId)
								this.storeLineId = res.data.data.yalId
								this.storeLine = res.data.data.storeLine
								// this.storeLineDisabled = true
							}
							// 车位
							if (res.data.data.yacId != "") {
								this.storeSeatId = res.data.data.yacId
								this.storeSeat = res.data.data.storeSeat
								// this.storeSeatDisabled = true
							}
						} else {
							uni.showToast({
								icon: "none",
								title: `没有该车辆信息`
							});
						}
					}
				})
			},
			// 获取船名
			getShip() {
				let ieType = ""
				let key = ""
				let pamId = this.portObj.portId
				let spmId = ""
				let tradeType = ""
				uni.request({
					url: `${this.$local}/api/shipInstructions/queryByKey?ieType=${ieType}&key=${ieType}&pamId=${this.portObj.portId}&spmId=${spmId}&tradeType=${tradeType}`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							this.shipList = res.data.data
							this.shipList.forEach(v => {
								let vvyShip = `${v.vslCnname}/${v.vvyName}`
								this.$set(v, "vvyShip", vvyShip)
							})
						}
					}
				})
			},
			// 船名/航次
			shipChange(e) {
				this.shipId = e.spmId
				this.shipName = e.vslCnname
				this.vvyId = e.vvyId
				this.vvyShip = e.vvyShip
			},
			// 获取车型数据
			getCar() {
				uni.request({
					url: `${this.$local}/api/miniapp/getVehicleModel`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							res.data.data.forEach(v => {
								this.carList.push({
									value: v.id,
									text: v.name
								})
							})
						}
					}
				})
			},
			// 车型
			carChange(e) {
				this.carId = e
				this.carList.forEach(v => {
					if (e == v.value) {
						this.carModel = v.text
					}
				})
			},
			// 获取品牌
			getBrand() {
				uni.request({
					url: `${this.$local}/api/miniapp/queryBrand`,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							res.data.data.forEach(v => {
								this.brandList.push({
									value: v.brdId,
									text: v.brdName
								})
							})
						}
					}
				})
			},
			// 品牌
			brandChange(e) {
				this.brandId = e
				this.brandList.forEach(v => {
					if (e == v.value) {
						this.brandValue = v.text
					}
				})
			},
			// 获取堆场数据
			yardData() {
				uni.request({
					url: this.$local + '/api/yard/sel/query/yard?pamId=' + this.portObj.portId,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							res.data.data.forEach(v => {
								this.yardColumns.push({
									value: v.pymId,
									text: v.pymName
								})
							})
						}
					}
				})
			},
			// 获取区域数据
			storeAreaData(id) {
				this.storeAreaColumns = []
				uni.request({
					url: this.$local + '/api/yard/sel/queryArea?pymId=' + id,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						res.data.data.forEach(v => {
							this.storeAreaColumns.push({
								value: v.pyaId,
								text: v.pyaAreaCode
							})
						})
					}
				})
			},
			// 获取车道数据
			storeLineData(id) {
				this.storeLineColumns = []
				uni.request({
					url: this.$local + '/api/yard/sel/queryLanesByPyaId?pyaId=' + id,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						res.data.data.forEach(v => {
							this.storeLineColumns.push({
								value: v.yalId,
								text: v.yalNo
							})
						})
					}
				})
			},
			// 获取车位数据
			storeSeatData(id) {
				this.storeSeatColumns = []
				uni.request({
					url: this.$local + '/api/yard/sel/queryParkingSpacesByYalId?yalId=' + id,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						res.data.data.forEach(v => {
							this.storeSeatColumns.push({
								value: v.yacId,
								text: v.yacNo
							})
						})
					}
				})
			},
			// 堆场
			yardChange(e) {
				this.yardId = e
				this.yardColumns.forEach(v => {
					if (e == v.value) {
						this.yardName = v.text
					}
				})
				this.storeArea = ""
				this.storeLine = ""
				this.storeSeat = ""
				this.storeAreaData(this.yardId)
			},
			// 场位(区域)
			storeAreaChange(e) {
				this.storeAreaId = e
				this.storeAreaColumns.forEach(v => {
					if (e == v.value) {
						this.storeArea = v.text
					}
				})
				this.storeLine = ""
				this.storeSeat = ""
				this.storeLineData(this.storeAreaId)
			},
			// 场位(车道)
			storeLineChange(e) {
				this.storeLineId = e
				this.storeLineColumns.forEach(v => {
					if (e == v.value) {
						this.storeLine = v.text
					}
				})
				this.storeSeatData(this.storeLineId)
			},
			// 场位(车位)
			storeSeatChange(e) {
				this.storeSeatId = e
				this.storeSeatColumns.forEach(v => {
					if (e == v.value) {
						this.storeSeat = v.text
					}
				})
			},
			// 质损日期
			dateChange(e) {
				this.zsDate = e
			},
			/// 获取质损图
			getImg() {
				uni.request({
					url: this.$local + '/api/miniapp/typeRef/domain/REFERENCE_DIAGRAM',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							this.initImg(res.data.data[0].ptrDesc, '6')
						}
					}
				})
			},
			// 获取枚举(质损发生环节)
			getRadio() {
				uni.request({
					url: this.$local + '/api/miniapp/typeRef/domain/QUALITY_DAMAGE_LINK',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							res.data.data.forEach(v => {
								this.radioList.push({
									value: v.ptrCode,
									name: v.ptrDesc
								})
							})
						}
					}
				})
			},
			// 获取枚举(货物品类)
			getRadio2() {
				uni.request({
					url: this.$local + '/api/miniapp/typeRef/domain/QUALITY_DAMAGED_GOODS_CATEGORY',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							res.data.data.forEach(v => {
								this.radioList2.push({
									value: v.ptrCode,
									name: v.ptrDesc
								})
							})
						}
					}
				})
			},
			// 获取枚举(质损概况)
			getCheck() {
				uni.request({
					url: this.$local + '/api/miniapp/typeRef/domain/OVERVIEW_QUALITY_DAMAGE',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							res.data.data.forEach(v => {
								this.checklist.push({
									value: v.ptrCode,
									name: v.ptrDesc
								})
							})
						}
					}
				})
			},
			// 获取枚举(损伤情况)
			getCheck2() {
				uni.request({
					url: this.$local + '/api/miniapp/typeRef/domain/DAMAGE_CONDITION',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							res.data.data.forEach(v => {
								this.checklist2.push({
									value: v.ptrCode,
									name: v.ptrDesc
								})
							})
						}
					}
				})
			},
			// 获取枚举(处置情况)
			getCheck3() {
				uni.request({
					url: this.$local + '/api/miniapp/typeRef/domain/DISPOSAL_SITUATION',
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'GET', //请求方式，必须为大写
					success: (res) => {
						if (res.data.status == 200) {
							res.data.data.forEach(v => {
								this.checklist3.push({
									value: v.ptrCode,
									name: v.ptrDesc
								})
							})
						}
					}
				})
			},
			// 上传板车照片
			select(e) {
				this.lotusLoadingData.isShow = true
				e.tempFiles.forEach(v => {
					uni.uploadFile({
						url: `${this.$local}/api/file/upload`, //上传图片api
						header: {
							'Authorization': `Bearer ${this.loginObj.access_token}`
						},
						filePath: v.path,
						name: 'file',
						success: (res) => {
							this.lotusLoadingData.isShow = false
							this.bcPhoto2.push(v)
							let data = JSON.parse(res.data).data
							this.bcPhoto.push(data)
						},
					})
				})
			},
			// 上传板车照片移除
			photoDelete(e) {
				let delIndex = 0
				this.bcPhoto2.forEach((v, index) => {
					if (v.uuid == e.tempFile.uuid) {
						delIndex = index
					}
				})
				this.bcPhoto.splice(delIndex, 1)
				this.bcPhoto2.splice(delIndex, 1)
			},
			// 上传板车车牌照
			select2(e) {
				this.lotusLoadingData.isShow = true
				e.tempFiles.forEach(v => {
					uni.uploadFile({
						url: `${this.$local}/api/file/upload`, //上传图片api
						header: {
							'Authorization': `Bearer ${this.loginObj.access_token}`
						},
						filePath: v.path,
						name: 'file',
						success: (res) => {
							this.lotusLoadingData.isShow = false
							this.bcLicense2.push(v)
							let data = JSON.parse(res.data).data
							this.bcLicense.push(data)
						},
					})
				})
			},
			// 上传板车车牌照移除
			photoDelete2(e) {
				let delIndex = 0
				this.bcLicense2.forEach((v, index) => {
					if (v.uuid == e.tempFile.uuid) {
						delIndex = index
					}
				})
				this.bcLicense.splice(delIndex, 1)
				this.bcLicense2.splice(delIndex, 1)
			},
			// 上传质损照片
			select3(e) {
				this.lotusLoadingData.isShow = true
				e.tempFiles.forEach(v => {
					uni.uploadFile({
						url: `${this.$local}/api/file/upload`, //上传图片api
						header: {
							'Authorization': `Bearer ${this.loginObj.access_token}`
						},
						filePath: v.path,
						name: 'file',
						success: (res) => {
							this.lotusLoadingData.isShow = false
							this.zsPhoto2.push(v)
							let data = JSON.parse(res.data).data
							this.zsPhoto.push(data)
						},
					})
				})
			},
			// 上传质损照片移除
			photoDelete3(e) {
				let delIndex = 0
				this.zsPhoto2.forEach((v, index) => {
					if (v.uuid == e.tempFile.uuid) {
						delIndex = index
					}
				})
				this.zsPhoto.splice(delIndex, 1)
				this.zsPhoto2.splice(delIndex, 1)
			},
			// 上传车架号图片
			select4(e) {
				this.lotusLoadingData.isShow = true
				e.tempFiles.forEach(v => {
					uni.uploadFile({
						url: `${this.$local}/api/file/upload`, //上传图片api
						header: {
							// "Content-Type": "multipart/form-data",
							'Authorization': `Bearer ${this.loginObj.access_token}`
						},
						filePath: v.path,
						name: 'file',
						success: (res) => {
							this.lotusLoadingData.isShow = false
							this.carPhoto2.push(v)
							let data = JSON.parse(res.data).data
							this.carPhoto.push(data)
						},
					})
				})
			},
			// 上传车架号图片移除
			photoDelete4(e) {
				let delIndex = 0
				this.carPhoto2.forEach((v, index) => {
					if (v.uuid == e.tempFile.uuid) {
						delIndex = index
					}
				})
				this.carPhoto.splice(delIndex, 1)
				this.carPhoto2.splice(delIndex, 1)
			},
			// 上一步
			back() {
				this.active--
			},
			// 下一步
			next() {
				this.active++
			},
			// 取消
			cancel() {
				uni.navigateTo({
					url: '/pages/quality/index'
				})
			},
			// 提交
			save() {
				if (this.current != '其他') {
					this.remark = ""
				} else if (this.current != '客户反馈') {
					this.feed = ""
				}
				if (this.current2 != '其他') {
					this.other = ""
				}
				let removableFlag = ""
				if (this.type == 'add') {
					removableFlag = "1"
				} else if (this.type == "edit") {
					removableFlag = "0"
				}
				let editReqDTO = {
					"boardCarLicensePlates": this.bcLicense, // 板车车牌照
					"boardCarPhotos": this.bcPhoto, // 板车照片
					"brdId": this.brandId, // 品牌id
					"carFrameNumberPhotos": this.carPhoto, // 车架号图片
					"dasList": this.checkData2, // 损伤情况
					"dsOther": this.other2, // 损伤情况其他备注
					"dispList": this.checkData3, // 处置情况
					"dpsOther": this.other3, // 处置情况其他备注
					"editComplete": "1", // pad提交传 1 编辑完毕 扫描提交的数据不全不给后台展示
					"godId": this.godId, // 货物id
					"goodsType": this.carId, // 车型id
					"linkFeedback": this.feed, // 客户反馈
					"linkOther": this.remark, // 环节其他
					// "qdLink": this.current, // 质损发生环节
					"qdLink": this.currentValue, // 质损发生环节
					"qdGcOther": this.other, // 质损货物品类其他
					"qdGodsCategory": this.current2, // 质损货物品类
					"qdLiablePerson": this.director, // 质损责任人
					"qdsList": this.checkData, // 质损情况多选
					"qdsOther": this.other1, // 质损情况（概况）其他备注
					"qualityDamagePhotos": this.zsPhoto, // 质损照片
					"qualityDamageTime": this.zsDate, // 质损时间
					"refImageUrl": this.zsBase, // 质损参考图地址
					"removableFlag": removableFlag, // 	可删除标识 pad提交传 1
					"signUrl": this.signBase, // 签名地址
					"spmId": this.shipId, // 船舶id
					"storeArea": this.storeArea, // 区域
					"storeLine": this.storeLine, // 车道
					"storeSeat": this.storeSeat, // 车位
					"vvyId": this.vvyId, // 航次id
					"yacId": this.storeSeatId, // 车位id
					"yalId": this.storeLineId, // 车道id
					"yarId": this.storeAreaId, // 区域id
					"yardId": this.yardId, // 堆场id
					"yardName": this.yardName, // 堆场
					"ygqId": this.ygqId, // 质量id
					"vinCode": this.carValue, // 车架号
				}
				console.log(editReqDTO)
				uni.request({
					url: `${this.$local}/api/goodsQuality/edit`,
					data: editReqDTO,
					header: {
						'Content-Type': 'application/json', //自定义请求头信息
						'Authorization': `Bearer ${this.loginObj.access_token}`
					},
					method: 'PUT', //请求方式，必须为大写
					success: (res) => {
						if (res.statusCode == 200) {
							uni.setStorageSync('signImg', "")
							uni.navigateTo({
								url: '/pages/quality/index'
							})
						} else {
							uni.showToast({
								icon: "none",
								title: `${res.data.error_description}`
							});
						}
					}
				})
			},
		}
	}
</script>


<style lang="less" scoped>
	.edit {
		.stepsBox {
			width: 100%;
			position: fixed;
			top: 68px;
			padding: 20px 0;
			display: flex;
			flex-direction: column;
			justify-content: center;
			background: #fff;
			z-index: 996;

			/deep/.uni-steps {
				height: 80px;
				justify-content: center;
			}

			/deep/.uni-steps__row {
				flex-direction: column-reverse;
			}

			/deep/.uni-steps__row-title {
				font-size: 16px;
				margin-top: 10px;
			}

			/deep/.uni-icons {
				font-size: 20px !important;
			}

			/deep/.uni-steps__row-container {
				margin-top: 14px;
			}

			/deep/.uni-steps__row-circle {
				background-color: #fff !important;
				border: 3px solid #B7BDC6;
				padding: 2px;
			}
		}

		.container {
			margin-top: 186px;
			padding: 16px;
			padding-bottom: 90px;

			input::placeholder {
				color: #6a6a6a !important;
			}

			.blockBox {
				padding: 24px 18px;
				background: #fff;
				margin-bottom: 16px;
			}

			.formTitle {
				font-size: 18px;
				color: #23262E;
				font-weight: bold;
				display: flex;

				image {
					width: 20px;
					height: 20px;
					margin-right: 10px;
					margin-top: 3px;
				}
			}

			.tpTitle {
				color: #666666;

				text {
					font-size: 12px;
					margin-left: 5px;
				}
			}

			.radioList {
				display: flex;
				flex-wrap: wrap;
				margin-top: 24px;

				.radioBox {
					display: flex;
					width: 15%;
					margin-top: 16px;
				}

				/deep/uni-radio .uni-radio-input {
					border: 1px solid #dcdfe6;
				}
			}

			.radioInput {
				width: 100%;
				margin-top: 16px;
			}

			.picture {
				margin-top: 24px;

				/deep/.file-picker__box {
					width: 120px !important;
					height: 120px !important;
					padding-top: 0;
				}

				/deep/.is-add {
					background: url(../../static/images/xjpz.png) no-repeat;
					background-size: 100% 100%;
					border: 1px solid transparent !important;

					.is-add {
						display: none;
					}
				}
			}

			.inputBox {
				/deep/.is-input-border {
					margin-left: 5px;
				}
			}

			.wInput {
				/deep/.is-input-border {
					width: 98%;
					margin-left: 5px;
				}
			}

			.sign {
				color: #2979ff;
				width: 160px;
				height: 40px;
				line-height: 40px;
				text-align: center;
				margin-left: 20px;
				font-size: 16px;
				border: 1px solid #2979ff;
			}

			.editSign {
				color: red;
			}

			.flexLi {
				display: flex;
				margin-bottom: 16px;
				padding-bottom: 12px;
				border-bottom: 1px solid #EEEEEE;

				p {
					line-height: 36px;
					margin-right: 5px;
				}
			}

			.signContent {

				// .siginTitle {
				// 	width: 100%;
				// 	text-align: center;
				// 	font-size: 24px;
				// 	color: #23262E;
				// 	font-weight: bold;
				// 	margin-bottom: 16px;
				// }
				uni-image {
					width: 320px;
					height: 240px;
				}
			}



			.zsInfo {
				display: flex;
				justify-content: space-between;
				flex-wrap: wrap;
				border-radius: 8px;
				padding: 0 16px 10px;

				.li {
					width: 49%;
					display: flex;
					justify-content: space-between;
					border-bottom: 1px solid #EEEEEE;
					padding: 10px;

					.liTitle {
						min-width: 120px;
						font-size: 16px;
						line-height: 34px;
					}

					image {
						width: 36px;
						height: 36px;
					}

					/deep/.uni-stat__select {
						width: 40%;
						justify-content: flex-end;
					}

					/deep/.uni-stat-box {
						flex: none;
						width: 60%;
					}

					/deep/.uni-select {
						border: none;
					}

					/deep/.uni-select__input-box {
						text-align: right;
					}

					/deep/.uni-select__input-text {
						padding-right: 10px;
					}

					/deep/.uni-data-select {
						background-color: #fff;
						height: 35px;
						width: 100%;
						border: none;
					}

					/deep/.superwei-combox {
						background-color: #fff;
						height: 35px;
						width: 40%;
						border: none;
					}

					/deep/.uni-date-x--border {
						border: none;
					}

					/deep/.uni-date__x-input {
						text-align: right;
						padding-right: 10px;
					}

					/deep/.uni-date-x .icon-calendar {
						display: none;
					}
				}

				.textRight {
					/deep/.uni-input-wrapper {
						text-align: right;
					}
				}

				.cwLi {
					width: 100%;

					/deep/.uni-data-select {
						margin-right: 10px;
					}

					/deep/.uni-data-select:last-child {
						margin-right: 0;
					}


					/deep/.uni-stat__select {
						margin-right: 10px;
					}

					/deep/.uni-stat__select:last-child {
						margin-right: 0;
					}
				}
			}

			.zsLi {
				width: 100%;
				line-height: 36px;
				display: flex;
				margin-bottom: 15px;

				.zsTitle {
					width: 120px;
					font-size: 16px;
					color: #23262E;
					font-weight: bold;
				}

				.radioList2 {
					display: flex;
				}

				.radioBox {
					display: flex;
					margin-left: 20px;

					.boxInfo {
						display: flex;
						margin-left: 5px;

						/deep/.is-input-border {
							width: 240px;
						}

						/deep/.uni-easyinput {
							margin-left: 10px;
						}
					}
				}

			}

			.imageLi {
				width: 100%;
				height: 440px;
				position: relative;

				.zshz {
					position: absolute;
					top: 0;
					left: 0;
					right: 0;
					bottom: 0;
				}
			}

			.signBox {
				border-radius: 8px;

				/deep/.is-input-border {
					width: 300px;
				}

				.title {
					font-size: 14px;
					color: #23262E;
				}
			}
		}

		.btnList {
			width: 100%;
			background-color: #fff;
			position: fixed;
			bottom: 0;
			display: flex;
			justify-content: center;
			box-shadow: 0 -3px 7px 0 rgba(0, 0, 0, 0.10);
			padding: 20px 0;
			z-index: 999;

			.btn {
				margin-left: 20px;
				width: 120px;
				height: 50px;
				border-radius: 2px;
				font-size: 18px;
				line-height: 50px;
				text-align: center;
			}

			.leftBtn {
				background-color: #fff;
				color: #333333;
				border: 1px solid #E7E7E7;
			}

			.backBtn {
				background: rgba(0, 103, 207, 0.1);
				color: #0067CF;
			}

			.rightBtn {
				background: #0067CF;
				color: #fff;
			}
		}
	}
</style>