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.imgType)
      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>