witcarbon-app/src/views/rentBill.vue

<template>
  <van-nav-bar title="租户账单" safe-area-inset-top>
    <template #left>
      <van-icon
        :name="require('@/assets/arrow-left.svg')"
        size="24"
        @click="backPath"
      />
    </template>
  </van-nav-bar>
  <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
    <div class="page_info">
      <van-row align="center" class="position_pannel">
        <van-col>
          <van-image
            :src="require('@/assets/position.svg')"
            width="16"
            height="16"
            fit="contain"
          />
          <van-col>{{ name }}</van-col>
          <van-image
            :src="require('@/assets/arrow-right.svg')"
            width="24"
            height="24"
            fit="contain"
          />
        </van-col>
        <van-col
          @click="
            $route.push({ path: '/userInfo', query: { type: 'account' } })
          "
        >
          <van-image
            :src="require('@/assets/user.svg')"
            width="16"
            height="16"
            fit="contain"
          />
        </van-col>
      </van-row>
      <div class="drop_down">
        <van-dropdown-menu active-color="#1989fa">
          <van-dropdown-item
            v-model="dataForm.cycle"
            @change="handelChange('cycle', cycle)"
            :title="cycleTitle"
            :options="cycleList"
          />
          <van-dropdown-item
            v-model="dataForm.status"
            @change="handelChange('status', dataForm.status)"
            :title="statusTitle"
            :options="statusList"
          />
        </van-dropdown-menu>
      </div>
      <van-row align="center" class="list_total">
        <van-col>共有</van-col>
        <v-count-up
          :end-val="dataList.length"
          class="count_up"
          options="{ separator: ',' }"
        />
        <van-col>条记录</van-col>
      </van-row>
      <div class="info_list">
        <van-list
          v-model:loading="loading"
          :finished="finished"
          :error="error"
          error-text="请求失败，点击重新加载"
          finished-text="没有更多了"
          @load="onLoad"
        >
          <div
            v-for="item in dataList"
            :key="item.id"
            class="list_item"
            @click="toPath('/rentBillDetail', item)"
          >
            <van-row
              align="center"
              class="reduce_type"
              :style="{
                'background-color': `${
                  rentStatus_filter(item.status)['color']
                }`,
              }"
            >
              <van-col>{{
                `${rentStatus_filter(item.status)["label"]}`
              }}</van-col>
            </van-row>
            <van-row class="header">
              <van-col>{{ item.name }}</van-col>
            </van-row>
            <van-row>
              <van-col>本期金额：</van-col>
              <van-col style="color: #fa5555"
                >￥{{
                  (parseInt(item.feeTotal * 100) / 100).toFixed(2)
                }}</van-col
              >
            </van-row>
            <van-row>
              <van-col>欠费天数：</van-col>
              <van-col>{{}}</van-col>
            </van-row>
            <van-row>
              <van-col>账户余额：￥</van-col>
              <van-col>{{
                (parseInt(item.balance * 100) / 100).toFixed(2)
              }}</van-col>
            </van-row>
            <van-row>
              <van-col>联系电话：</van-col>
              <van-col>{{ item.tel }}</van-col>
            </van-row>
            <div class="list_btn" v-if="item.status == 0">
              <van-button
                plain
                type="primary"
                size="small"
                @click="handleClick([parseInt(item.id)])"
                >催费</van-button
              >
            </div>
          </div>
        </van-list>
      </div>
    </div>
  </van-pull-refresh>
</template>
<script>
import Api from "../utils/api";
import { isEmpty } from "@/utils/index.js";
import VCountUp from "./CountUp";
export default {
  components: {
    "v-count-up": VCountUp,
  },
  data() {
    return {
      name: "电商园四期-B座",
      cycleTitle: "计费周期",
      statusTitle: "是否结清",
      statusList: [
        { text: "未结清", value: 0 },
        { text: "已结清", value: 1 },
      ],
      cycleList: [],
      dataForm: {
        cycle: "2022-08",
        status: "",
        page: 1,
        limit: 10,
      },
      dataList: [],
      loading: false,
      refreshing: false,
      finished: false,
    };
  },

  methods: {
    rentStatus_filter(val) {
      if (isEmpty(val)) {
        return {};
      }
      if (val == 0) {
        return { label: "未结清", color: "#FA5555" };
      }
      if (val == 1) {
        return { label: "已结清", color: "#09C700" };
      }
    },
    onLoad() {
      setTimeout(async () => {
        if (this.refreshing) {
          this.dataList = [];
          this.refreshing = false;
        }
        await this.getDataList();
        this.dataForm.page++; // 分页数加一
      }, 100);
    },
    onRefresh() {
      // 清空列表数据
      this.finished = false;
      // 重新加载数据
      // 将 loading 设置为 true，表示处于加载状态
      this.loading = true;
      this.dataForm.page = 1; // 分页数赋值为1
      this.onLoad();
    },
    // 获取列表数据方法
    getDataList() {
      Api.rentBillList(this.dataForm).then((res) => {
        if (res.code == 0) {
          if (res.data) {
            if (res.data.list.length == 0) {
              // 判断获取数据条数若等于0
              this.dataList = []; // 清空数组
              this.finished = true; // 停止加载
            }
            // 若数据条数不等于0
            this.dataList.push(...res.data.list); // 将数据放入list中
            this.loading = false; // 加载状态结束

            // 如果list长度大于等于总数据条数,数据全部加载完成
            if (this.dataList.length >= res.data.total) {
              this.finished = true; // 结束加载状态
            }
          } else {
            // 判断获取数据条数若等于0
            this.dataList = []; // 清空数组
            this.finished = true; // 停止加载
          }
        } else {
          this.loading = false; // 加载状态结束
          this.finished = true; // 停止加载
        }
      });
    },
    handleClick(ids) {
      Api.lackFeeInfoPay(ids).then((res) => {
        if (res.code == 0) {
          this.$toast.success("催费成功");
          this.onRefresh();
        } else {
          this.$toast.fail("催费失败");
        }
      });
    },
    // change事件可以拿到的是value
    handelChange(type, val) {
      if (type == "cycle") {
        // 这里打印出来的值就是我们想要的text
        this.cycleTitle = this.cycleList.filter(
          (item) => item.value === val
        )[0].text;
      }
      if (type == "status") {
        // 这里打印出来的值就是我们想要的text
        this.statusTitle = this.statusList.filter(
          (item) => item.value === val
        )[0].text;
      }
      this.getDataList();
    },
    toPath(path, val) {
      this.$router.push({
        path: path,
        query: {
          tenantId: val.id,
          tenantName: val.name,
          costCycle: this.dataForm.cycle,
        },
      });
    },
    backPath() {
      this.$router.back();
    },
  },
};
</script>
<style lang="scss" scoped>
.page_info {
  height: 100%;
  .position_pannel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 16px;
    background: #5c8fff;
    box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.04);
    .van-col {
      height: 24px;
      font-size: 16px;
      color: #ffffff;
      line-height: 24px;
      text-indent: 4px;
      text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.04);
      display: flex;
      align-items: center;
      letter-spacing: 2px;
    }
  }
  .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;
    .van-col {
      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;
    }
  }
  .info_list {
    padding: 0 16px;
    .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;
      }
      .van-col {
        height: 18px;
        font-size: 14px;
        color: #999999;
        line-height: 18px;
        margin-bottom: 4px;
        &:nth-last-child(1) {
          margin-bottom: 0;
        }
      }
      .header {
        .van-col {
          height: 22px;
          font-size: 16px;
          color: #0c1935;
          line-height: 22px;
          margin-bottom: 8px;
        }
      }
      .reduce_type {
        position: absolute;
        top: 0;
        right: 0;
        height: 24px;
        padding: 0 12px;
        border-radius: 0px 4px 0px 10px;
        .van-col {
          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>