supplier-dispatch-h5/src/views/index/invoicingNotify.vue

<template>
<div class="wrap">
  <div class="navBar">
    <van-nav-bar
        title="开票通知"
        left-arrow
        left-arrow-color="#FFFFFF"
        :border="false"
        :fixed="true"
        :safe-area-inset-top="true"
        @click-left="goBack"
    />
  </div>
  <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
    <div class="itemWrap" v-for="(item,index) in notifyList" :key="index" >
      <div class="item line1">
        <div class="itemTime">
          <span class="title">开票月份:</span>
          <span class="content">{{ item.invoiceMonth }}</span>
        </div>
        <div class="orderNum">
          <span class="title">总案件数:</span>
          <span class="content">{{ item.orderNum }}</span>
        </div>
        <div class="checkBtn" @click="goPage('invoicingDetail',{id:item.batchCode,startTime:item.startTime,overTime:item.overTime})">查看 </div>
      </div>
      <div class="item">
        <span class="title">批次号:</span>
        <span class="content">{{ item.batchCode }}</span>
      </div>
      <div class="item">
        <span class="title">结算总金额:</span>
        <span class="content">{{ item.totalMoney + '元' }}</span>
      </div>
      <div class="item">
        <span class="title">扣款金额:</span>
        <span class="content">{{ item.cutMoney + '元'}}</span>
      </div>
      <div class="item">
        <span class="title">扣款原因:</span>
        <span class="content"  style="color: #FF8F37;">{{ item.remark }}</span>
      </div>
      <div class="item">
        <span class="title">最终开票金额:</span>
        <span class="content">{{ item.invoiceMoney+ '元' }}</span>
      </div>
    </div>
  </van-pull-refresh>
  <div v-show="show" class="bgShow">
    <img src="@/assets/empty.png">
  </div>
</div>
</template>

<script>
import {myMixins} from "@/utils/myMixins"
import {notifyInvoiceList} from  "@/api/mine"
export default {
  name: "invoicingNotify",
  mixins:[myMixins],
  data(){
    return{
      notifyList:[],
      pageNum:1,
      pageSize:10,
      show:false,
      isLoading: false,
    }
  },
  mounted() {
      this.getNotifyList()
  },
  methods:{
    onRefresh() {
      this.pageNum=1
      this.getNotifyList()
      setTimeout(() => {
        this.$toast('刷新成功');
        this.isLoading = false;
      }, 1000);
    },
    async getNotifyList(){
      let res =  await notifyInvoiceList({
          pageNum:this.pageNum,
          pageSize:this.pageSize
      })
      // if(res.code === 0){
        this.notifyList=res.data;
        console.log(this.notifyList)
        if(this.notifyList.length === 0){
              this.show=true
        }else{
          this.show=false
        }
      }
    // },
  }
}
</script>

<style scoped lang="scss">
@import "@/styles/mixin.scss";
@import "@/styles/common.scss";
.wrap{
  @include wh(100%,100%);
  background-color: #F4F5F7;
  overflow-y: auto;
  box-sizing: border-box;
  padding-bottom: 30px;
}
.navBar{
  margin-bottom: 46px;
}
.itemWrap{
  background: #FFFFFF;
  @include wh(100%,194px);
  box-sizing: border-box;
  padding: 14px 25px 18px 29px;
  @include flexBetween;
  margin-bottom: 10px;
  .item{
    @include fontWeightSize(400,12px);
    span{
      display: inline-block;
    }
    .title{
      opacity: .5;
    }
  }
  .line1{
    width: 100%;
    @include flexColBet;
    .checkBtn{
      @include bgFontColor(#FFFFFF,#354D93);
      @include wh(48px,18px);
      border-radius: 3px;
      line-height: 18px;
      text-align: center;
    }
  }
}
.bgShow{
  @include flexTwoCenter;
  height:calc(100% - 46px);
  background-color: #FAFAFA;
  img{
    width: 100%;
  }
}
</style>