emis-sapp/components/buns-post-edit-templates/bpe-gooditemsize-tmp.vue

<template>
	<view class="">
		<!-- 隐藏长宽高 -->
		<view v-if="false" class="jsfm-item">
			<u-row justify="between" align="top">
				<!-- <text class="font-28 pt-20 font-weight">尺寸</text> -->
				<view style="width: 100%;">
					<u-row justify="between">
						<u-col span="3.7">
							<tpx-input v-model:value="modelInfo.length" placeholder="长" inputAlign="right" suffix="cm"  _digit="4"></tpx-input>
						</u-col>
						<u-col span="3.7">
							<tpx-input v-model:value="modelInfo.width" placeholder="宽" inputAlign="right" suffix="cm" _digit="4"></tpx-input>
						</u-col>
						<u-col span="3.7">
							<tpx-input v-model:value="modelInfo.height" placeholder="高" inputAlign="right" suffix="cm" _digit="4"></tpx-input>
						</u-col>
					</u-row>
				</view>				
			</u-row>
		</view>
		<view class="jsfm-item">
			<tpx-text-item :required="true" label="数量" >
				<template #right>
					<tpx-input placeholder="请填写" v-model:value="modelInfo.cargoQty" inputAlign="right" :customStyle="`${comInSty}`" type="number" :_maxNum="cargoQtyMaxNum"
						
					>
						<template #suffix>
							<tpx-select v-model:value="modelInfo.unit" :list="goodNumUnitList"
								 mode="drop" :dropRightWidth="300"
							>
								<u-row custom-style="gap: 6rpx;padding: 0 6rpx;" justify="between">
									<tpx-text-dic :value="modelInfo.unit" :list="goodNumUnitList" :placeholder="goodNumUnitList[0].title"></tpx-text-dic>
									<u-icon :name="'arrow-down-fill'"
										size="18" custom-style=""
									></u-icon>
								</u-row>
							</tpx-select>
						</template>
					</tpx-input>
				</template>
			</tpx-text-item>
		</view>
	</view>	
</template>

<script>
	import { goodNumUnitList } from "@/common/enum"
	export default {
		computed: {
			modelInfo: {
				get(){
					return this.value
				}
			},
			calChangeVal(){
				const { length, width, height, cargoQty } = this.modelInfo
				return {
					length, width, height, cargoQty
				}
			},
			cargoQtyMaxNum(){
				// 限制数量的最大值
				let { cargoList, parcelQty } = this.submitVal
				let curQty = (+this.modelInfo.cargoQty) || 0
				let qtMaxNum = parcelQty + curQty
				cargoList.map(t=> {
					if(t.cargoQty) {
						qtMaxNum = qtMaxNum - t.cargoQty
					}
				})
				if(qtMaxNum < 0) {
					qtMaxNum = 0
				}
				return qtMaxNum
			}
		},
		watch: {
			calChangeVal: {
				handler: function(newVal){
					this.calculateVplume(newVal)
				},
				deep: true
			}
		},
		props: {
			value: {
				default () {
					return { }
				}
			},
			submitVal: {
				default () {
					return {}
				}
			},
			comInSty: {
				default () {
					return ''
				}
			},
		},
		data() {
			return {
				goodNumUnitList,
			}
		},
		created() {
		},
		onHide() {

		},
		unmounted() {
			
		},

		methods: {
			calculateVplume(calVal) {
				setTimeout(()=> {
					let volume = this.modelInfo.volume
					const { length, width, height, cargoQty } = calVal
					console.log("cargoQty======v", cargoQty)
					if(length && width && height && cargoQty){
						volume = length/100 * width/100 * height/100 * cargoQty
					}
					if(volume && volume.toFixed) {
						volume = volume.toFixed(4)
						this.modelInfo.volume = volume
					} else {
						this.modelInfo.volume = 0
					}
				}, 500);
			}
		}
	}
</script>

<style scoped lang="scss">
	.shet-cont{
		padding: 0;
	}
	.jsfm-item{
		margin-top: 30rpx;
	}
	
</style>