emis-sapp/components/buns-post-edit-templates/bpe-gooditemsize-tmp.vue
2024-06-02 23:02:19 +08:00

106 lines
2.1 KiB
Vue

<template>
<view class="">
<view class="jsfm-item">
<u-row justify="between" align="top">
<text class="font-28 pt-20 font-weight">尺寸</text>
<view style="width: 70%;">
<u-row justify="between">
<u-col span="3.7">
<tpx-input v-model:value="modelInfo.length" placeholder="长" inputAlign="right" suffix="cm" _digit="5"></tpx-input>
</u-col>
<u-col span="3.7">
<tpx-input v-model:value="modelInfo.width" placeholder="宽" inputAlign="right" suffix="cm" _digit="5"></tpx-input>
</u-col>
<u-col span="3.7">
<tpx-input v-model:value="modelInfo.height" placeholder="高" inputAlign="right" suffix="cm" _digit="5"></tpx-input>
</u-col>
</u-row>
</view>
</u-row>
</view>
<view class="jsfm-item">
<u-row justify="between" align="top">
<text class="font-28 font-weight">体积</text>
<view style="">
{{modelInfo.volume || '0'}}
<text class="clr-sub">m³</text>
</view>
</u-row>
</view>
</view>
</template>
<script>
export default {
computed: {
modelInfo: {
get(){
return this.value
}
},
calChangeVal(){
const { length, width, height, cargoQty } = this.modelInfo
return {
length, width, height, cargoQty
}
}
},
watch: {
calChangeVal: {
handler: function(newVal){
this.calculateVplume(newVal)
},
deep: true
}
},
props: {
value: {
default () {
return { }
}
}
},
data() {
return {
}
},
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(5)
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>