settle_down_wx/pages/subPackages/enterPriseBill/index.vue

<template>
    <div class="enterPriseBill">
      <van-tabs :active="active" @change="onChange">
<!--        <van-tab title="租赁费" :name="1"></van-tab>-->
<!--        <van-tab title="水费" :name="2"></van-tab>-->
<!--        <van-tab title="电费" :name="3"></van-tab>-->
<!--        <van-tab title="物业费" :name="4"></van-tab>-->
<!--        <van-tab title="场地费" :name="6"></van-tab>-->
<!--        <van-tab title="停车费" :name="7"></van-tab>-->
<!--        <van-tab title="房源修复费" :name="8"></van-tab>-->
        <van-tab :title="item.label" :name="item.value" v-for="item in billTypeList"></van-tab>
      </van-tabs>
      <div class="enterPriseBillList">
        <div class="listItem" v-for="(item,index) in enterList" :key="index" @click="toDetail(item)">
          <div :style="{backgroundImage: 'url(' + (item.isDq ? dqBg : wdqBg) + ')'}" class="itemCard">
            到期：{{item.expirationDate}}
          </div>
          <div class="itemFirstRow">
            <span class="billName">{{item.billName}}</span>
          </div>
          <div class="itemSecondRow">
            <span>发票号：{{item.invoiceNo}}</span>
            <span>生成日期：{{item.createdAt}}</span>
          </div>
          <div class="itemLastRow">
            <div class="lastRowBox">
              <span class="rowNumber">{{item.invoiceAmount}}</span>
              <span class="rowUnit">账单总金额（元）</span>
            </div>
            <div class="columLine"></div>
            <div class="lastRowBox">
              <span class="rowNumber">{{item.restMoney}}</span>
              <span class="rowUnit">欠款金额（元）</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
import { findBillManagementMoreForCollect,getUserLocalStorageInfo,getByCodes } from "@/js_sdk/http";
import dayjs from "dayjs";

export default {
  name: "index",
  data(){
    return{
      dc_key: ['BILL_TYPE'],
      getUserLocalStorageInfo: getUserLocalStorageInfo(),
      active: 1,
      dqBg: "https://www.idea-co-sf.com/gardenProduct/image/dqBg.png",
      wdqBg: "https://www.idea-co-sf.com/gardenProduct/image/wdqBg.png",
      enterList: [
        // {billName:'入驻款(房租费)',dqDate:'2024.5.30',isDq:true},
        // {billName:'入驻款(房租费)aaaaaaaaaaaaaaa',dqDate:'2024.5.30',isDq:false},
        // {billName:'入驻款(房租费)',dqDate:'2024.5.30',isDq:false},
      ],
      billTypeList: [],
      dic_SelectList:[],
      currentDate: ''
    }
  },
  onLoad(type){

  },
  created(){
    this.getByCodes()
    this.getList()
    const dayjs = require('dayjs')
    this.currentDate = dayjs().format('YYYY-MM-DD')
  },
  onPullDownRefresh() {
    this.getList()
    setTimeout(function () {
      uni.stopPullDownRefresh();
    }, 1000);
  },
  methods:{
    async getByCodes() {
      let data = await getByCodes(JSON.stringify(this.dc_key));
      this.dic_SelectList = this.$common.handleDicList(data);
      this.billTypeList = this.dic_SelectList.BILL_TYPE

    },
    onChange(e) {
      console.log('e',e)
      this.active = e.detail.name
      this.getList()
    },
    toDetail(item){
      let reqData = {
        companyName: item.companyName,
        billName: item.billName,
        buildName: item.buildName,
        invoiceAmount: item.invoiceAmount,
        restMoney: item.restMoney,
        invoiceNo: item.invoiceNo,
        eInvoiceUrl: encodeURIComponent(item.eInvoiceUrl),
        overdueDays: item.overdueDays
      }

      console.log("数据——：", item)
      uni.navigateTo({
        url: "/pages/subPackages/enterPriseBill/detail?item=" + JSON.stringify(reqData),
      });
    },
    getList(){
      const _this = this
      _this.enterList = []
      const data = {
        pageNum: '1',
        pageSize: '10',
        billCompanyId:this.getUserLocalStorageInfo.userId,
        billType:this.active,
        invoiceStatus:'1,3,4'
      }
      findBillManagementMoreForCollect(data).then(res=>{
        console.log('res',res)
        if (res.rows) {
          res.rows.forEach(function(item) {
            const jsonMap = _this.getItemJson(item)
            _this.enterList.push(jsonMap)
          })
        }
      })
    },
    getItemJson: function(item) {
      item.isDq = false
      if(item.restMoney > 0 && this.currentDate < item.expirationDate){
        item.isDq = true
      }
      return item
    }
  }
}
</script>

<style lang="scss">
    .enterPriseBill{
      .enterPriseBillList{
        display: flex;
        flex-direction: column;
        align-items: center;
        .listItem{
          width: 686rpx;
          height: 304rpx;
          background: rgba(255, 255, 255, 1);
          display: flex;
          flex-direction: column;
          padding: 24rpx 32rpx 32rpx 32rpx;
          box-sizing: border-box;
          margin-top: 24rpx;
          border-radius: 16rpx;
          position: relative;
          .itemCard{
            position: absolute;
            background-size: 100%;
            background-repeat: no-repeat;
            width: 220rpx;
            height: 56rpx;
            font-size: 24rpx;
            color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            right: 0;
            top: 0;
            padding-left: 10rpx;
            box-sizing: border-box;
          }
          .itemFirstRow{
            color: rgba(34, 34, 34, 1);
            font-size: 32rpx;
            font-weight: 600;
            .billName{
              display: inline-block;
              max-width: 394rpx;
              overflow: hidden;
              white-space: nowrap;
              text-overflow: ellipsis;
            }
          }
          .itemSecondRow{
            display: flex;
            justify-content: space-between;
            font-size: 28rpx;
            color: rgba(102, 102, 102, 1);
            margin: 16rpx 0;
          }
          .itemLastRow{
            display: flex;
            justify-content: space-between;
            align-items: center;
            width: 622rpx;
            height: 134rpx;
            padding: 20rpx 32rpx;
            background: rgba(245, 247, 250, 1);
            box-sizing: border-box;
            .lastRowBox{
              display: flex;
              flex-direction: column;
              .rowNumber{
                font-size: 40rpx;
                color: rgba(51, 51, 51, 1);
                font-weight: 600;
              }
              .rowUnit{
                font-size: 28rpx;
                color: rgba(136, 136, 136, 1);
                margin-top: 8rpx;
              }
            }
            .columLine{
              width: 2rpx;
              height: 72rpx;
              background: rgba(217, 219, 226, 1);
            }
          }
        }
      }
    }
</style>