company_h5/src/views/orderDetails/nextOrderDetails.vue

<template>
    <div class="nextOrderDetails flex">
        <orderDetailsLable :oilDetails="oilDetails" />
        <optionalOilLable v-model="seleOil" v-if="oilType" :oilType="oilType" />
        <oilGun @update="update" v-model="seleOil" :seleOil="seleOil" />
        <oilNextFooter :oilDetails="oilDetails" ref="oilNextFooter" :seleOil="seleOil" />
    </div>
</template>

<script>
import orderDetailsLable from './components/orderDetailsLable.vue'
import optionalOilLable from './components/optionalOilLable.vue'
import oilGun from './components/oilGun.vue'
import oilNextFooter from './components/oilNextFooter.vue'
export default {
    components: {
        orderDetailsLable,
        optionalOilLable,
        oilGun,
        oilNextFooter
    },
    created() {
        this.oilDetails = JSON.parse(this.$route.query.oilDetails);
        this.oilTypeFn()
    },
    data() {
        return {
            oilDetails: null,
            oilType: null,
            seleOil: {
                oilDiscountAmount: '',
                volume: '',
                payRealAmount: 0,
                plateNumber: '',
                oilsBar: 1
            }
        }
    },
    methods: {
        	
        update(e) {
            this.$refs.oilNextFooter.update(e)
        },
        showPopup() { },
        oilTypeFn() {
            let a = this.oilDetails.oilSiteChannelDetailsVos.filter((item) => item.channelCode == 'XOIL');
            this.oilType = a.length ? a[0] : null;
        },
    }
}
</script>
<style>
:root {
    --pd: calc((100vw - 684px)/2);
}
</style>
<style scoped>
.nextOrderDetails {
    background: #F1F2F7;
    flex-direction: column;
    overflow: auto;
}
</style>