emis-app/components/buns-post-edit-templates/bpe-goodsize-tmp.vue

<template>
	<view class="shet-cont">
		<view class="jsfm-item">
			<u-row justify="between">
				<text class="font-28">件数</text>
				<view>
					<uni-number-box v-model="modelInfo.parcelQty" :min="1" :max="10000"></uni-number-box>
				</view>
			</u-row>
		</view>
		<view class="jsfm-item">
			<u-row justify="between">
				<text class="font-28">包裹重量</text>
				<view>
					<tpx-input v-model:value="modelInfo.billWeight" :isWhite="true" placeholder="" suffix="kg" type="number"></tpx-input>
				</view>
			</u-row>
		</view>
		
		<view class="jsfm-item">
			<u-row justify="between" align="top">
				<text class="font-28 pt-20">体积</text>
				<view style="width: 70%;">
					<u-row justify="between">
						<u-col span="3.7">
							<tpx-input v-model:value="modelInfo.chang" :isWhite="true" placeholder="长" suffix="cm"  type="number"></tpx-input>
						</u-col>
						<u-col span="3.7">
							<tpx-input v-model:value="modelInfo.kuan" :isWhite="true" placeholder="宽" suffix="cm" type="number"></tpx-input>
						</u-col>
						<u-col span="3.7">
							<tpx-input v-model:value="modelInfo.gao" :isWhite="true" placeholder="高" suffix="cm" type="number"></tpx-input>
						</u-col>
					</u-row>
					
					<u-row v-if="totalVolume" customStyle="margin: 20rpx 0 0 0;" justify="end">{{modelInfo.totalVolume}}m³</u-row>
				</view>				
			</u-row>
		</view>
	</view>	
</template>

<script>
	import * as apiService from "@/common/api"
	export default {
		computed: {
			modelInfo: {
				get(){
					return this.value
				}
			},
			totalVolume() {
				let totalVolume = this.modelInfo.totalVolume
				const { chang, kuan, gao } = this.modelInfo
				if(chang && kuan && gao){
					totalVolume = chang/100 * kuan/100 * gao/100
				}
				if(totalVolume && totalVolume.toFixed) {
					totalVolume = totalVolume.toFixed(2)
					this.modelInfo.totalVolume = totalVolume
				}
				return totalVolume
			}
		},
		props: {
			value: {
				default () {
					return { }
				}
			}
		},
		data() {
			return {
			}
		},
		created() {
		},
		onHide() {

		},
		unmounted() {
			
		},

		methods: {
			async calceOther() {
				let { totalVolume, productType, billWeight } = this.modelInfo
				let res = await apiService.calcSetteldWeight({ totalVolume, productType, billWeight })
				const  { settlementWeight, volumeWeight } = res.data
				this.modelInfo.volumeWeight = volumeWeight
				this.modelInfo.settlementWeight = this.modelInfo.totalWeight = settlementWeight
			},
			async validData() {
				await this.calceOther()
			}
		}
	}
</script>

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