witcarbon-app/src/views/rentBill.vue

<template>
  <van-nav-bar
    title="租户账单"
    left-arrow
    @click-left="onClickLeft"
    safe-area-inset-top
  />
  <div class="page_check">
    <div class="search_pannel">
      <div class="pannel_left">
        <van-image
          :src="require('@/assets/position.svg')"
          width="16"
          height="16"
          fit="contain"
        />
        <span>{{ name }}</span>
        <van-image
          :src="require('@/assets/arrow-right.svg')"
          width="24"
          height="24"
          fit="contain"
        />
      </div>
      <div class="pannel_right" @click="toPath">
        <van-image
          :src="require('@/assets/search.svg')"
          width="16"
          height="16"
          fit="contain"
        />
      </div>
    </div>
    <div class="drop_down">
      <van-dropdown-menu active-color="#1989fa">
        <van-dropdown-item
          v-model="rentStatus"
          @change="handelChange('rentStatus', rentStatus)"
          :title="rentStatusTitle"
          :options="rentStatusList"
        />
      </van-dropdown-menu>
    </div>
    <div class="list_total">
      <span>共有</span>
      <v-count-up
        :end-val="total"
        class="count_up"
        options="{ separator: ',' }"
      />
      <span>条记录</span>
    </div>
    <div class="check_info">
      <div class="info_list">
        <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
          <van-list
            v-model:loading="loading"
            :finished="finished"
            :error="error"
            error-text="请求失败，点击重新加载"
            finished-text="没有更多了"
            @load="onLoad"
          >
            <div v-for="item in list" :key="item.id" class="list_item">
              <div
                class="reduce_type"
                :style="{
                  'background-color': `${
                    rentStatus_filter(item.rentStatus)['color']
                  }`,
                }"
              >
                <span>{{
                  `${rentStatus_filter(item.rentStatus)["label"]}`
                }}</span>
              </div>
              <span class="header">{{ item.name }}</span>
              <span style="color: #fa5555"
                >本期金额：￥{{ item.rentMoney }}</span
              >
              <span
                >欠费天数：<span style="color: #0c1935; font-weight: 600">{{
                  item.rentDays
                }}</span>
              </span>
              <span
                >账户余额：<span style="color: #0c1935; font-weight: 600"
                  >￥{{ item.accountMoney }}
                </span></span
              >
              <span>联系电话：{{ item.tel }}</span>
              <div class="list_btn" v-if="item.status == 2">
                <van-button plain type="primary" size="small">催费</van-button>
              </div>
            </div>
          </van-list>
        </van-pull-refresh>
      </div>
    </div>
  </div>
</template>
<script>
import { isEmpty } from "@/utils/index.js";
import VCountUp from "./CountUp";
export default {
  components: {
    "v-count-up": VCountUp,
  },
  data() {
    return {
      loading: false,
      name: "电商园四期-B座",
      rentStatus: "",
      rentStatusTitle: "是否结清",
      rentStatusList: [
        { text: "已结清", value: 1 },
        { text: "未结清", value: 2 },
      ],
      total: 3,
      list: [
        {
          name: "合肥市传秀科技有限公司",
          rentStatus: 1,
          rentMoney: 3454,
          rentDays: 0,
          accountMoney: 100,
          tel: 13212341111,
        },
      ],
      loading: false,
      refreshing: false,
      finished: false,
    };
  },

  methods: {
    rentStatus_filter(val) {
      if (isEmpty(val)) {
        return {};
      }
      if (val == 1) {
        return { label: "已结清", color: "#09C700" };
      }
      if (val == 2) {
        return { label: "未结清", color: "#FA5555" };
      }
    },
    onLoad() {
      setTimeout(() => {
        if (this.refreshing) {
          this.list = [];
          this.refreshing = false;
        }

        for (let i = 0; i < 10; i++) {
          this.list.push(this.list.length + 1);
        }
        this.loading = false;

        if (this.list.length >= 40) {
          this.finished = true;
        }
      }, 1000);
    },

    onRefresh() {
      // 清空列表数据
      this.finished = false;

      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.onLoad();
    },
    // change事件可以拿到的是value
    handelChange(type, val) {
      console.log(type, val);
      if (type == "checkType") {
        // 这里打印出来的值就是我们想要的text
        this.checkTypeTitle = this.checkTypeList.filter(
          (item) => item.value === val
        )[0].text;
      }
      if (type == "checkPerson") {
        // 这里打印出来的值就是我们想要的text
        this.checkPersonTitle = this.checkPersonList.filter(
          (item) => item.value === val
        )[0].text;
      }
    },
    onClickLeft() {},
  },
};
</script>
<style lang="scss" scoped>
.page_check {
  height: 100%;
  .search_pannel {
    padding: 10px 16px;
    background: #5c8fff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
    display: flex;
    align-items: center;
    .pannel_left {
      display: flex;
      align-items: center;
      span {
        height: 24px;
        font-size: 16px;
        font-weight: 400;
        color: #ffffff;
        line-height: 24px;
        text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
        text-indent: 4px;
      }
    }
    .pannel_left,
    .pannel_right {
      flex: 1;
    }
    .pannel_right {
      text-align: right;
    }
  }
  .drop_down {
    /deep/ {
      --van-gray-4: #999999;
      --van-dropdown-menu-title-text-color: #0c1935;
    }
  }
  .list_total {
    padding: 0 16px;
    margin: 8px 0;
    display: flex;
    text-align: left;
    span {
      height: 16px;
      font-size: 12px;
      font-weight: 400;
      color: #999999;
      line-height: 16px;
    }
    .count_up {
      font-size: 16px;
      font-weight: 500;
      color: #fa5555;
      margin: 0 2px;
    }
  }
  .check_info {
    padding: 0 16px;
    height: calc(
      100% - var(--van-nav-bar-height) - var(--van-dropdown-menu-height) - 76px
    );
    .info_list {
      height: 100%;
      overflow-y: auto;
      .list_item {
        background: #ffffff;
        box-shadow: 0px 0px 10px 0px rgba(153, 153, 153, 0.15);
        border-radius: 4px;
        margin-bottom: 12px;
        padding: 12px 16px;
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        position: relative;
        &:nth-last-child(1) {
          margin-bottom: 0;
        }
        .header {
          height: 22px;
          font-size: 16px;
          font-weight: 600;
          color: #313836;
          line-height: 22px;
          margin-bottom: 8px;
        }
        span {
          height: 18px;
          font-size: 14px;
          font-weight: 400;
          color: #999999;
          line-height: 18px;
          margin-bottom: 4px;
          &:nth-last-child(1) {
            margin-bottom: 0;
          }
        }
        .reduce_type {
          position: absolute;
          top: 0;
          right: 0;
          height: 24px;
          padding: 0 12px;
          border-radius: 0px 4px 0px 10px;
          span {
            height: 16px;
            font-size: 12px;
            font-weight: 400;
            color: #ffffff;
            line-height: 16px;
          }
        }
        .list_btn {
          position: absolute;
          bottom: 15px;
          right: 12px;
          .van-button {
            &:nth-child(2) {
              margin: 0 12px;
            }
          }
        }
      }
    }
  }
}
</style>