product_wx/pages/subPackages/enterPriseBill/index.vue

<template>
    <div class="enterPriseBill">
      <van-tabs :active="active" @change="onChange">
        <van-tab title="租赁费" :name="null"></van-tab>
        <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-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.dqDate}}
          </div>
          <div class="itemFirstRow">
            <span class="billName">{{item.billName}}</span>
          </div>
          <div class="itemSecondRow">
            <span>发票号：002939</span>
            <span>生成日期：2024.3.12</span>
          </div>
          <div class="itemLastRow">
            <div class="lastRowBox">
              <span class="rowNumber">30000.00</span>
              <span class="rowUnit">账单总金额（元）</span>
            </div>
            <div class="columLine"></div>
            <div class="lastRowBox">
              <span class="rowNumber">15000.00</span>
              <span class="rowUnit">欠款金额（元）</span>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
export default {
  name: "index",
  data(){
    return{
      active: 0,
      dqBg: require("./image/dqBg.png"),
      wdqBg: require("./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},
      ]
    }
  },
  methods:{
    onChange(e) {

    },
    toDetail(item){
      uni.navigateTo({
        url: "/pages/subPackages/enterPriseBill/detail",
      });
    }
  }
}
</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>