company_h5/src/views/orderDetails/components/oilNextFooter.vue

<template>
  <div>
    <div class="oilNextFooter flex ac">
      <div class="flex">
        <span class="oilNextFooter-hj">合计：</span>
        <span class="oilNextFooter-price">{{ seleOil.payRealAmount ? `${seleOil.payRealAmount}元` : '---' }}</span>
      </div>
      <div @click="isShow.details = !isShow.details">
        <span class="oilNextFooter-mx">明细</span>
        <van-icon name="arrow" />
      </div>
      <div @click="gopaly" class="oilNextFooter-butten flex jc ac">
        {{ text }}
      </div>

    </div>
    <van-popup round :style="{ height: '60%' }" position="bottom" v-model="isShow.details">
      <div class="details-popup">
        <div class="details-popup-title flex"></div>
        <detailsCard :boxShadow="false" :detailsList="detailsList"></detailsCard>
      </div>
    </van-popup>
  </div>

</template>

<script>
import detailsCard from "../../cashier/components/detailsCard.vue";
import oilOrderApi from '@/api/oil-order.js'
export default {
  props: {
    oilDetails: {
      type: Object,
      default: () => null
    },
    seleOil: {
      type: Object,
      default: () => null
    }
  },
  components: {
    detailsCard
  },
  data() {
    return {
      payRealAmount: 0,
      text: '立即下单',
      detailsList: [
        [
          {
            lable: '油站：',
            value: '---'
          },
          {
            lable: '油品油枪：',
            value: '---'
          },
          {
            lable: '加油升数：',
            value: '---'
          },
        ],

        [
          {
            lable: '加油金额：',
            value: '￥581.00'
          },
          {
            lable: '星油优惠：',
            value: '-￥0.00',
            valueStyle: {
              color: '#FF0000'
            }
          },
          {
            lable: '优惠券：',
            value: '---',
            valueStyle: {
              color: '#FF0000'
            }
          },
          {
            lable: '合计：',
            value: '-￥0.00',
            valueStyle: {
              color: '#FF0000'
            }
          },
        ],

      ],
      isShow: {
        details: false
      }
    }
  },
  watch: {
    seleOil: {
      handler(n) {
        this.updateFn()
      },
      deep: true
    }
  },
  created() {
  },
  mounted() {

    this.updateFn()
  },
  methods: {
    updateFn() {
      this.$nextTick(function () {
        this.detailsList[0][0].value = this.oilDetails.siteName;
        this.detailsList[0][1].value = this.seleOil.oilProductCode + ' ' + this.seleOil.oilsBar + '号枪';
        this.detailsList[0][2].value = Number(this.seleOil.volume).toFixed(2) + 'L';
        this.detailsList[1][0].value = '￥' + Number(this.seleOil.payRealAmount + this.seleOil.oilDiscountAmount).toFixed(2);
        this.detailsList[1][1].value = '-￥' + Number(this.seleOil.oilDiscountAmount).toFixed(2);
        this.detailsList[1][3].value = '-￥' + Number(this.seleOil.payRealAmount).toFixed(2);
      })
    },
    update(e) {
      this.payRealAmount = e
    },
    gopaly() {
      let page = {
        shareCompanyQuota: 0, // 共享标识
        priceId: this.seleOil.priceId, //类型：String  必有字段  备注：油价主键
        orderType: "REAL_ORDER", //类型：String  必有字段  备注：订单类型（REAL_ORDER：真实订单 VIRTUAL_ORDER：虚拟订单）
        orderSource: "WECHAT_MINIAPPS", //类型：String  必有字段  备注：订单来源（WECHAT_MINIAPPS）
        plateNumber: this.seleOil.plateNumber, //类型：String  必有字段  备注：车牌号
        siteUserName: '一号加油员', //类型：String  必有字段  备注：加油员
        oilsBar: this.seleOil.oilsBar, //类型：Number  必有字段  备注：油枪
        volume: this.seleOil.volume, //类型：Number  必有字段  备注：加油升数
        realPrice: this.seleOil.payRealAmount, //类型：Number  必有字段  备注：实际加油价格
        suppleMark: 0, //类型：Number  必有字段  备注：补录标识（0：实时订单 1：补录订单）
        createSource: "H5_COMPANY_AUTH", //类型：String  必有字段  备注：创建来源（ XOIL_DRIVER_COMPANY_WECHAT_APPLET）
        // "deviceImei": "mock", //类型：String  可有字段  备注：设备唯一码
        // "networkIp": "mock" //类型：String  可有字段  备注：ip地址
        kaliState: 1,
        'version': 1,
        'xoilAmountGun': Number( Number(this.seleOil.payRealAmount + this.seleOil.oilDiscountAmount).toFixed(2)) ,
        latitude: 31.82057,
        longitude: 117.22901
      }
      oilOrderApi.createOrder(page).then(res => {
        if(res.code==20000){
      this.$router.push({
         name:'cashier',
        params:{
          order:res.data
        }
      })
        }
        console.log(res, '创建订单')
      })
      console.log(page, '+++')
    }
  }
};
</script>

<style scoped>
.details-popup-one-item {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.details-popup-one:last-child {
  margin-top: 0px;
  border-top: dashed 0px #B9B9B9;
  border-bottom: dashed 0px #B9B9B9;

}

.details-popup-title {
  font-size: 32px;
  font-weight: normal;
  color: #000000;
  line-height: 32px;
}

.details-popup-one {
  height: 220px;
  border-top: dashed 1px #B9B9B9;
  margin-top: 45px;
  border-bottom: dashed 1px #B9B9B9;
  overflow: auto;
  flex-wrap: wrap;
}

.details-popup {
  width: 100%;
  height: 100%;
  padding: 20px var(--pd);
  box-sizing: border-box;
}

.oilNextFooter-mx {
  font-size: 24px;
}

.oilNextFooter-price {
  font-size: 28px;
  color: #FE0505;

}

.oilNextFooter-hj {
  font-size: 28px;
  color: #333333;
}

.oilNextFooter-butten {
  width: 314px;
  height: 90px;
  background: #FF6700;
  border-radius: 15px 15px 15px 15px;
  opacity: 1;
  font-family: PingFang SC-中等, PingFang SC;
  font-weight: normal;
  color: #FFFFFF;
  font-size: 32px;

}

.oilNextFooter {
  width: 708px;
  height: 89px;
  background: #ffffff;
  box-shadow: 0px 0px 10px 1px rgba(23, 23, 23, 0.102);
  border-radius: 15px 15px 15px 15px;

  opacity: 1;
  left: 0;
  right: 0;
  margin: 0 auto;
  position: fixed;
  bottom: 50px;
  padding: 16px 0 16px 16px;
  box-sizing: border-box;
  justify-content: space-between;
  z-index: 9;
}
</style>