cf/src/views/youdaopingsection.vue

<template>
  <div>
    <titlesection title="支付方式"></titlesection>
    <ul class="flexfm ydp-dz-wrap">
      <li>
        <div>
          <div class="bg-wrap">
            <p class="dznum-total">{{ wxNum|formatNum }}</p>
            <p class="name">微信</p>
          </div>
        </div>
        <div>
          <div class="bg-wrap">
            <p class="ydpnum-total">{{ zfbNum|formatNum }}</p>
            <p class="name">支付宝</p>
          </div>
        </div>
      </li>
      <li>
        <div>
          <div class="bg-wrap">
            <p class="dznum-total">{{ xjNum|formatNum }}</p>
            <p class="name">现金</p>
          </div>
        </div>
        <div>
          <div class="bg-wrap">
            <p class="ydpnum-total">{{ qtNum|formatNum }}</p>
            <p class="name">其他</p>
          </div>
        </div>
      </li>
    </ul>
  </div>
</template>
<script>
import titlesection from '../components/titlesection'
import allPieChart from '../components/allPieChart'
import { moneyAddress } from '../api/api'
export default {
  name: 'youdaopingsection',
  components: {
    titlesection,
    allPieChart
  },
  data() {
    return {
      pieChartData:  [],
      wxNum: '',
      zfbNum: '',
      xjNum: '',
      qtNum: '',
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getList() {
      moneyAddress({
        orgIds: this.GLOBAL.paramsvariables
      }).then((response)=>{
        const data = response.data.data
        this.wxNum = Math.round(data.wxPay/100)
        this.zfbNum = Math.round(data.aliPay/100)
        this.qtNum = Math.round(data.otherPay/100)
        this.xjNum = Math.round((data.totalPay - data.aliPay - data.wxPay - data.otherPay)/100)
        // this.dzNum = data[3].num
        // this.ydpNum = data[2].num
        // this.pieChartData = [data[3].num,data[2].num]
      })
    },
  }
}
</script>
<style lang="scss"  scoped>
  .ydp-dz-wrap{
    display: flex;
    text-align: center;
    padding: 0 23px;
    li{
      height: 100%;
      width: 50%;
      >div{
        height: 50%;
        .bg-wrap{
          width: 115px;
          height: 59px;
          padding: 13px 0 0 0;
          position: relative;
          top:50%;
          left: 50%;
          transform: translate(-50%,-50%);
          background:url("../assets/img/bg-wrap.png") no-repeat;
          .dznum-total,.ydpnum-total{
            @include fonttextStyle(20px);
          }
          .dznum-total{
            background-image: $fontBlue;
          }
          .ydpnum-total{
            background-image: $fontOrange;
          }
          .name{
            padding-top: 5px;
            font-size: 12px;
            color: #fff;
          }
        }
      }
    }
  }
</style>