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
    },
    positionChenk(position) {
      return !position?.latitude && !position?.longitude ? true : false
    },
    gopaly() {
      let position = this.$pinia.state.value.user.position
      if (this.positionChenk(position)) {
        position = JSON.parse(localStorage.getItem('position'))
        if (this.positionChenk(position)) {
          console.log(position, this.$pinia.state.value.user.position, '地理位置错误')
          return
        }
      }
      let page = {
        shareCompanyQuota: 0, // 共享标识
        priceId: this.seleOil.priceId, //油价主键
        orderType: 'REAL_ORDER', //订单类型（REAL_ORDER：真实订单 VIRTUAL_ORDER：虚拟订单）
        orderSource: 'WECHAT_MINIAPPS', //订单来源（WECHAT_MINIAPPS）
        plateNumber: this.seleOil.plateNumber, //车牌号
        siteUserName: '一号加油员', //加油员
        oilsBar: this.seleOil.oilsBar, //油枪
        volume: this.seleOil.volume, //加油升数
        realPrice: this.seleOil.payRealAmount, //实际加油价格
        suppleMark: 0, //补录标识（0：实时订单 1：补录订单）
        createSource: 'H5_COMPANY_AUTH', //创建来源（ XOIL_DRIVER_COMPANY_WECHAT_APPLET）
        // "deviceImei": "mock", //设备唯一码
        // "networkIp": "mock" //ip地址
        kaliState: 1,
        version: 1,
        xoilAmountGun: Number(Number(this.seleOil.payRealAmount + this.seleOil.oilDiscountAmount).toFixed(2)),
        latitude: position.latitude,
        longitude: position.longitude
      }
      if (!page.plateNumber || !page.volume || !page.realPrice) {
        this.$notify('请检查提交的数据哦')
        return
      }
      oilOrderApi.createOrder(page).then(res => {
        if (res.code == 20000) {
          this.$router.push({
            path: '/cashier',
            query: {
              order: JSON.stringify(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>