company_h5/src/views/cashier/paymentl.vue

<template>
  <div class="paymentl">
    <detailsCardHeader :countTimer="countTimer" :codeTpe="codeTpe"></detailsCardHeader>
    <detailsCard :detailsList="detailsList"></detailsCard>
    <div @click="goHome" class="paymentl-footer flex ac jc">返回首页</div>
  </div>
</template>

<script>
import vueQr from 'vue-qr'
import detailsCard from './components/detailsCard.vue'
import detailsCardHeader from './components/detailsCardHeader.vue'
import oilSiteApi from '@/api/oil-site.js'
import useStore from '@/store/piniaIndex'
let store = useStore()
export default {
  components: {
    detailsCard,
    vueQr,
    detailsCardHeader
  },
  data() {
    return {
      user: store.user,
      countTimer: 180,
      timer: null,
      codeTpe: {
        switch: false,
        codeValue: '',
        imgType: true
      },
      detailsCardTitle: {},
      detailsList: [
        [
          {
            lable: '订单编号：',
            value: '0101001001',
            valueStyle: {
              color: ''
            }
          }
        ],
        [
          {
            lable: '油站：',
            value: '壳牌加油站'
          },
          {
            lable: '油品油枪：',
            value: '0# 1号枪'
          },
          {
            lable: '加油升数：',
            value: '100L'
          },
          {
            lable: '加油员：',
            value: '李某'
          }
          // {
          //   lable: '加油渠道：',
          //   value: '星油 查看三方支付凭证'
          // },
        ],

        [
          {
            lable: '加油金额：',
            value: '￥581.00'
          },
          {
            lable: '星油优惠：',
            value: '-￥0.00',
            valueStyle: {
              color: '#FF0000'
            }
          },
          {
            lable: '优惠券：',
            value: '---',
            valueStyle: {
              color: '#FF0000'
            }
          }
        ],
        [
          {
            lable: '加油车牌：',
            value: '皖A98191'
          },
          {
            lable: '加油司机：',
            value: (store.user && store.user.name) || '---'
          },
          {
            lable: '油卡性质：',
            value: '企业油卡'
          }
        ]
      ]
    }
  },
  created() {
    // console.log(this.user,'user')
    this.init()
  },
  watch: {
    countTimer: function (n) {}
  },
  methods: {
    init() {
      this.orderData = JSON.parse(this.$route.query.orderData)
      this.codeTpe.imgType = JSON.parse(this.$route.query.type)
      console.log(this.codeTpe)
      this.getCode()
      this.updateDetails()
    },
    Timekeeping() {
      this.countTimer = 180000
      this.timer = setInterval(() => {
        if (this.countTimer == 0) {
          clearInterval(this.timer)
          this.getCode()
          return
        }
        this.countTimer -= 10
      }, 10)
    },
    goHome() {
      this.$router.push('/')
    },
    updateDetails() {
      this.detailsList[0][0].value = this.orderData.orderSerialNumber
      this.detailsList[1][0].value = this.orderData.siteName
      this.detailsList[1][1].value = `${this.orderData.oilsCode} ${this.orderData.oilsBar}号枪`
      this.detailsList[1][2].value = `${Number(this.orderData.volume).toFixed(2)}L`
      this.detailsList[1][3].value = this.orderData.siteUserName
      this.detailsList[2][0].value = '￥' + this.orderData.realAmount
      this.detailsList[2][1].value = '￥' + Number(this.orderData.oilDiscountAmount).toFixed(2)
      this.detailsList[3][0].value = this.orderData.plateNumber
      // this.detailsList[3][2].value = '￥'+this.orderData.plateNumber  ;
    },
    getCode() {
      // console.log(this.orderData)
      oilSiteApi.getOrderQrCode(this.orderData.orderSerialNumber).then(res => {
        if (res.code == 20000) {
          this.codeTpe.codeValue = ''
          this.$nextTick(function () {
            this.codeTpe.switch = true
            this.codeTpe.codeValue = res.data.codeStr
            this.Timekeeping()
          })
        }
      })
    }
  }
}
</script>

<style scoped>
.paymentl-footer {
  width: 690px;
  height: 100px;
  background: #ff6700;
  border-radius: 5px 5px 5px 5px;
  opacity: 1;
  position: fixed;
  bottom: 20px;
  left: 0;
  right: 0;
  margin: 0 auto;
  color: #ffffff;
  font-size: 38px;
  box-sizing: border-box;
}

.paymentl-header-img {
  width: 515px;
  height: 245px;
}

.paymentl-header-title {
  font-size: 42px;
  font-family: PingFang SC-粗体, PingFang SC;
  font-weight: normal;
  color: #333333;
  margin: 50px auto;
}
</style>