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)
    // console.log('this.oilDetails', this.oilDetails)
    this.oilTypeFn()
    console.log('seleOil', this.seleOil)
  },
  data() {
    return {
      oilDetails: null,
      oilType: null,
      seleOil: {
        oilDiscountAmount: '',
        volume: '',
        payRealAmount: 0,
        plateNumber: '',
        oilsBar: 1
      }
    }
  },
  methods: {
    update(e) {
      this.$refs.oilNextFooter.update(e)
    },
    oilTypeFn() {
      let target = this.oilDetails.oilSiteChannelDetailsVos.filter(item => item.channelCode == 'XOIL')
      this.oilType = target.length ? target[0] : null
      // console.log('this.oilType', this.oilType)
    }
  }
}
</script>
<style>
:root {
  --pd: calc((100vw - 684px) / 2);
}
</style>
<style scoped>
.nextOrderDetails {
  background: #f1f2f7;
  flex-direction: column;
  overflow: auto;
}
</style>