uniapp 或者 h5 车牌处理

咸菜～

已于 2023-11-13 15:12:44 修改

阅读量105

点赞数

文章标签：前端 javascript 开发语言

于 2023-11-13 15:11:05 首次发布

本文链接：https://blog.csdn.net/nkdas/article/details/134377853

版权

<template>
	<view>
		<view class="form-button">
			<button type="primary" size="mini" class="button-color" @click="submit()" v-if="ifEdit">提交</button>
			<button type="primary" size="mini" class="button-color" @click="cancel()" v-if="ifEdit">取消</button>
		</view>
		<view :style="{height: windowHeight - formHeight + 'px'}" style="overflow: scroll;">
			<view class="form-row">
				<view class="form-left form-left-flex">
					车牌号：
				</view>
				<view class="form-right form-right-flex">
					{{dataForm.carNo}}
				</view>
			</view>
			<view class="form-row">
				<view class="form-left form-left-flex">
					货名：
				</view>
				<view class="form-right form-right-flex">
					{{dataForm.cargoNam}}
				</view>
			</view>
			<view class="form-row" v-if="pkgKind === '件杂'">
				<view class="form-left form-left-flex">
					收货人：
				</view>
				<view class="form-right form-right-flex">
					<uni-easyinput v-model="dataForm.getownerCod" :disabled="!ifEdit" v-if="ifEdit"></uni-easyinput>
					<span v-else>{{dataForm.getownerCod}}</span>
				</view>
			</view>
			<view class="form-row" v-if="pkgKind === '件杂'">
				<view class="form-left form-left-flex">
					厂家：
				</view>
				<view class="form-right form-right-flex">
					<uni-easyinput v-model="dataForm.originPlace" :disabled="!ifEdit" v-if="ifEdit"></uni-easyinput>
					<span v-else>{{dataForm.originPlace}}</span>
				</view>
			</view>
			<view class="form-row">
				<view class="form-left form-left-flex">
					随车单：
					<span class="color_red required" v-if="pkgKind === '件杂'">*</span>
				</view>
				<view class="form-right form-right-flex">
					<view class="img-border" @tap="onGetImgClick()" v-if="ifEdit">
						<img :src="pic" class="img-plus">
					</view>
					<view class="img-border" v-else>
						<img :src="pic" class="img-plus">
					</view>
				</view>
			</view>
			<view style="width: 100%;position: relative;border-top: 1px solid #d9d9d9;" v-for="(item, index) in dataForm.list"
				:key="index" class="list-style">
				<view class="list-row">
					<view class="list-colLeft">
						<span class="list-left">规格(cm):</span>
						<span class="list-right">{{item.format}}</span>
					</view>
					<view class="list-colRight">
						<span class="list-left">件数:</span>
						<span class="list-right">{{item.cargoNum}}</span>
					</view>
				</view>
				<view class="list-row">
					<view class="list-colLeft">
						<span class="list-left">重量:</span>
						<span class="list-right">{{item.cargoWgt}}</span>
					</view>
					<view class="list-colRight">
						<span class="list-left">件号/卷号:</span> <br/>
						<span class="list-right">{{item.piecesNo}}</span>
					</view>
				</view>
				<view class="list-row">
					<view class="list-colLeft">
						<span class="list-left">材质:</span>
						<span class="list-right">{{item.materialTxt}}</span>
					</view>
					<view class="list-colRight">
						<span class="list-left">体积:</span>
						<span class="list-right">{{item.cargoVol}}</span>
					</view>
				</view>
				<view class="list-row">
					<view class="list-colLeft" v-if="!ifjuan">
						<span class="list-left">顺序:</span>
						<span class="list-right">{{item.seqNo}}</span>
					</view>
					<view class="list-colRight" style="display: flex;justify-content: flex-end;" v-if="ifEdit">
						<button type="primary" size="mini" class="button-color" @click="deleteHandel(index)"
							style="margin-left: 10px;">删除</button>
					</view>
				</view>
			</view>
			<view class="form-row" style="border-top: 1px solid #d9d9d9;" v-if="ifEdit && pkgKind != '散货'" >
				<view class="form-left form-left-flex"  >
					规格(cm)
					<span class="color_red required" v-if="pkgKind === '件杂'">*</span>
				</view>
				<view class="form-right form-right-flex">
					<uni-easyinput v-model="newForm.format" :disabled="!ifEdit"></uni-easyinput>
				</view>
			</view>
			<view class="form-row" v-if="ifEdit && pkgKind != '散货'">
				<view class="form-left form-left-flex">
					件数
					<span class="color_red required" v-if="pkgKind === '件杂'">*</span>
				</view>
				<view class="form-right form-right-flex">
					<uni-easyinput v-model="newForm.cargoNum" :disabled="!ifEdit"></uni-easyinput>
				</view>
			</view>
			<view class="form-row" v-if="ifEdit">
				<view class="form-left form-left-flex">
					重量
					<span class="color_red required">*</span>
				</view>
				<view class="form-right form-right-flex">
					<uni-easyinput v-model="newForm.cargoWgt" :disabled="!ifEdit"></uni-easyinput>
				</view>
			</view>
			<view class="form-row" v-if="ifEdit">
				<view class="form-left form-left-flex">
					件号/卷号
					<span class="color_red required" v-if="pkgKind === '件杂'">*</span>
				</view>
				<view class="form-right form-right-flex">
					<uni-easyinput v-model="newForm.piecesNo" :disabled="ifjuan"></uni-easyinput>
				</view>
			</view>
			<view class="form-row" v-if="!ifjuan && ifEdit">
				<view class="form-left form-left-flex">
					顺序
				</view>
				<view class="form-right form-right-flex">
					<uni-easyinput v-model="newForm.seqNo" :disabled="!ifEdit"></uni-easyinput>
				</view>
			</view>
			<view class="form-row" v-if="ifEdit  && pkgKind != '散货'">
				<view class="form-left form-left-flex">
					材质
				</view>
				<view class="form-right form-right-flex">
					<uni-easyinput v-model="newForm.materialTxt" :disabled="!ifEdit"></uni-easyinput>
				</view>
			</view>
			<view class="form-row" v-if="ifEdit && pkgKind != '散货'" >
				<view class="form-left form-left-flex">
					体积
				</view>
				<view class="form-right form-right-flex">
					<uni-easyinput v-model="newForm.cargoVol" :disabled="!ifEdit"></uni-easyinput>
				</view>
			</view>
			<view style="display: flex;justify-content: flex-end;" v-if="ifEdit">
				<button type="primary" size="mini" class="button-color" @click="addHandel()"
					style="margin-right: 10px;">新增</button>
			</view>
		</view>
	</view>
</template>

<script>
	import configUrl from '../../common/util/config.js'
	import {
		getWindowHeight,
		backToRefresh,
		checkBlock
	} from '../../common/util.js'
	import {
		get,
		post
	} from '../../common/util/httpUtil.js'
	export default {
		data() {
			return {
				formHeight: 0,
				windowHeight: getWindowHeight(),
				ifEdit: true,
				ifjuan: false,
				dataForm: {
					id: null,
					subcarId: null,
					cargoWgt: null,
					yardCod: null,
					sublocCod: null,
					format: null,
					piecesNo: null,
					materialTxt: null,
					cargoNum: null,
					cargoVol: null,
					getownerCod: null,
					originPlace: null,
					billPic: null,
					reviewId: '0',
					seqNo: null,
					list: []
				},
				pkgKind: null,
				cargoNam: null,
				pic: '../../static/plus.png',
				detailForm: {},
				bangIds: [{
					text: '否',
					value: '0'
				}, {
					text: '是',
					value: '1'
				}],
				tradeIds: [{
					text: '内贸',
					value: '1'
				}, {
					text: '外贸',
					value: '2'
				}],
				newForm: {}
			}
		},
		mounted() {
			uni.createSelectorQuery().in(this).select(".form-button").boundingClientRect(data => {
				this.formHeight = data.height
			}).exec()
		},
		onLoad(option) {
			this.pkgKind = JSON.parse(option.item).pkgKind
			if (option.operation === 'detail') {
				this.ifEdit = false
				this.initData(option)
			} else {
				this.dataForm.sublocCod = JSON.parse(option.item).sublocCod
				this.dataForm.subcarId = JSON.parse(option.item).id
				this.dataForm.carNo = JSON.parse(option.item).carNo
				this.dataForm.cargoNam = JSON.parse(option.item).cargoNam
				this.cargoNam = JSON.parse(option.item).cargoNam
				if (this.cargoNam.indexOf('卷') === -1) {
					this.ifjuan = true
					this.dataForm.piecesNo = this.getpiecesNo()
				} else {
					this.ifjuan = false
					this.dataForm.piecesNo = null
				}
				this.newForm.piecesNo = this.dataForm.piecesNo
			}
		},
		methods: {
			initData(option) {
				let form = {
					billId: option.id
				}
				get(`/reservation/driver/getGoodsInfo`, form, false).then(res => {
					this.dataForm = res.data
					this.dataForm.carNo = JSON.parse(option.item).carNo
					this.dataForm.cargoNam = JSON.parse(option.item).cargoNam
					this.cargoNam = JSON.parse(option.item).cargoNam
					this.pic = this.dataForm.billPic
					if (this.cargoNam.indexOf('卷') === -1) {
						this.ifjuan = true
					} else {
						this.ifjuan = false
					}
				})
			},
			addHandel() {
				this.dataForm.list.push({
					id: null,
					fpid: this.dataForm.id,
					format: this.newForm.format,
					piecesNo: this.newForm.piecesNo,
					materialTxt: this.newForm.materialTxt,
					cargoNum: this.newForm.cargoNum,
					cargoWgt: this.newForm.cargoWgt,
					cargoVol: this.newForm.cargoVol
				})
				this.newForm = {}
				this.newForm.piecesNo = this.dataForm.piecesNo
			},
			deleteHandel(index) {
				let list = this.dataForm.list
				this.dataForm.list = []
				for (var i = 0; i < list.length; i++) {
					if (index !== i) {
						this.dataForm.list.push(list[i])
					}
				}
			},
			getpiecesNo() {
				let str = null
				let year = new Date().getFullYear().toString()
				let month = new Date().getMonth() + 1
				month = month < 10 ? '0' + month : month.toString()
				let day = new Date().getDate()
				day = day < 10 ? '0' + day : day.toString()
				let hour = new Date().getHours()
				hour = hour < 10 ? '0' + hour : hour.toString()
				let minute = new Date().getMinutes()
				minute = minute < 10 ? '0' + minute : minute.toString()
				let second = new Date().getSeconds()
				second = second < 10 ? '0' + second : second.toString()
				str = wx.getStorageSync('carNumber') + year + month + day + hour + minute + second
				return str
			},
			onGetImgClick() {
				if (this.ifEdit) {
					const that = this
					uni.chooseImage({
						sizeType: ['original', 'compressed'],
						sourceType: ['album', 'camera'],
						success: function(res) {
							if (res.tempFilePaths) {
								that.pic = res.tempFilePaths[0]
								that.fileUpload(res.tempFilePaths[0])
							}
						}
					})
				}
			},
			fileUpload(tempFilePaths) {
				uni.uploadFile({
					url: configUrl + '/reservation/upload/imageUploadCarBill',
					filePath: tempFilePaths,
					name: 'file',
					header: {
						"Content-Type": "multipart/form-data"
					},
					success: (res) => {
						var dataInfo = JSON.parse(res.data)
						if (dataInfo.code === 0) {
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							})
							this.dataForm.billPic = dataInfo.data
						}
					},
					fail: (err) => {
						console.log('err', err)
					}
				})
			},
			submit(submitId) {
				if (this.pkgKind === '件杂') {
					if (checkBlock(this.dataForm.billPic, '随车单照片')) return
					if (checkBlock(this.dataForm.list, '货物信息')) return
					for (var i = 0; i < this.dataForm.list.length; i++) {
						if (checkBlock(this.dataForm.list[i].format, '规格')) return
						if (checkBlock(this.dataForm.list[i].cargoNum, '件数')) return
						if (checkBlock(this.dataForm.list[i].cargoWgt, '重量')) return
						if (checkBlock(this.dataForm.list[i].piecesNo, '卷号')) return
					}
				} else if (this.pkgKind === '散货') {
					if (checkBlock(this.dataForm.list, '货物信息')) return
					for (var i = 0; i < this.dataForm.list.length; i++) {
						if (checkBlock(this.dataForm.list[i].cargoWgt, '重量')) return
					}
				}
				post(`/reservation/driver/saveOrUpdateBill`, this.dataForm, false).then(res => {
					uni.showToast({
						title: '操作成功',
						duration: 2000,
						icon: 'none'
					})
					backToRefresh()
				})
			},
			cancel() {
				backToRefresh()
			}
		}
	}
</script>

<style scoped>
	.form-left-flex {
		flex: 2;
	}

	.form-right-flex {
		flex: 8;
	}

	.list-colLeft {
		flex: 2;
	}

	.list-colRight {
		flex: 3;
	}
</style>

<uni-popup ref="bindCar" type="dialog"  :mask-click="false">
	<carNoInput @getcarNo="getcarNo" @close="closepopup"></carNoInput>
</uni-popup>



getcarNo(childrenData) {
				this.carNumber = childrenData.join("")
				this.bindCarNumber(this.carNumber)
			},

closepopup () {
	this.$refs.bindCar.close()
  },
	bindCarNumber(e) {
				let form = {
					fpid: wx.getStorageSync('driverId'),
					carNo: e,
					bindId: this.bindId
				}
				post(`/reservation/driver/bindingCarNo`, form, false).then(res => {
					this.getCarNumber()
					uni.showToast({
						title: '绑定成功',
						duration: 3000,
						icon: 'none'
					})
					this.$refs.bindCar.close()
				})
			},