xinfeiyue-wx/package_sub/pages/TargetCount/TargetCount.vue

<template>
  <view class="container safe-area-inset-bottom">
    <view class="search-bar">
      <view class="search-bar__input">
        <u-input
            v-model="select.school_name"
            :height="26"
            placeholder="请输入学校名称"
            style="flex: 1; margin-right: 40rpx"
            @input="$u.debounce(() => getList(true), 1000)"
        ></u-input>
        <u-icon name="search" color="#333" :size="30"></u-icon>
      </view>
    </view>
    <u-dropdown ref="uDropdown" inactive-color="#333" :height="80" menu-icon="arrow-down-fill">
      <u-dropdown-item v-model="select.year" :title="select.year+'年'">
        <view class="slot-content">
          <u-picker
              :has-popup="false"
              mode="time"
              :default-time="defaultTime"
              :start-year="new Date().getFullYear() - 30"
              :end-year="new Date().getFullYear() + 30"
              :params="{
              year: true,
              month: false,
              day: false,
              hour: false,
              minute: false,
              second: false,
            }"
              @cancel="closeDropdown"
              @confirm="({ year }) => {
              select.year = year
              closeDropdown()
              getList(true)
            }"
          ></u-picker>
        </view>
      </u-dropdown-item>
      <u-dropdown-item
          v-model="select.area_id"
          :title="selectArea"
          :options="areaList"
          @change="getList(true)"
      ></u-dropdown-item>
    </u-dropdown>
    <view class="wrap">
      <view class="table">
        <view class="table__header">
          <text class="table__header-item">学校</text>
          <text class="table__header-item">名额</text>
          <text class="table__header-arrow"></text>
        </view>
        <view
            class="table__row"
            v-for="(item, index) in list"
            :key="index"
            @click="$u.route({
              url: '/package_sub/pages/SchoolCount/SchoolCount',
              params: {
                id: item.id
              }
            })"
        >
          <text class="table__row-item">{{ item.school ? item.school.name : '' }}</text>
          <text class="table__row-item">{{ item.total || '-' }}</text>
          <u-icon class="table__row-arrow" name="arrow-right" color="#333" :size="30"></u-icon>
        </view>
      </view>
    </view>
    <u-loadmore
        :status="loadStatus"
        :margin-top="20"
    ></u-loadmore>
    <u-back-top :scroll-top="scrollTop"></u-back-top>
  </view>
</template>

<script>
export default {
  data() {
    return {
      defaultTime: '',
      select: {
        page: 1,
        page_size: 10,
        school_name: "",
        year: (new Date().getFullYear() - 1).toString(),
        area_id: "",
      },
      scrollTop: 0,
      list: [],
      areaList: [],
      loadStatus: 'loadmore',
    };
  },
  methods: {
    closeDropdown() {
      this.$refs.uDropdown.close();
    },
    async getArea() {
      try {
        const res = await this.$u.api.area()
        this.areaList = [{
          label: '全部区域',
          value: ''
        },...res.list.map(i => ({
          label: i.name,
          value: i.id
        }))]
      } catch (err) {
        console.error(err)
      }
    },
    async getList(isRefresh=false) {
      if (isRefresh) {
        this.select.page = 1;
        this.loadStatus = 'loadmore'
      }
      if (this.loadStatus === 'nomore') return
      try {
        this.loadStatus = 'loading'
        const { list: res } = await this.$u.api.middleSchoolIndicatorList(this.select);
        console.log(res);
        this.total = res.total;
        if (isRefresh) {
          this.list.length = 0;
        }
        this.list.push(...res.data)
        if (this.list.length >= res.total) {
          this.loadStatus = 'nomore'
        } else {
          this.select.page++;
          this.loadStatus = 'loadmore'
        }
      } catch (err) {
        console.error(err);
        this.loadStatus = 'loadmore'
      } finally {
        uni.stopPullDownRefresh()
      }
    }
  },
  computed: {
    selectArea() {
      return this.areaList.find(i => i.value === this.select.area_id)?.label ?? ''
    }
  },
  onReady() {
    this.defaultTime = this.$moment().format('YYYY-MM-DD HH:mm:ss')
  },
  onPullDownRefresh() {
    this.getList(true)
  },
  onPageScroll(e) {
    this.scrollTop = e.scrollTop;
  },
  created() {
    this.getArea()
    this.getList(true)
  },
  onReachBottom() {
    this.getList()
  },
};
</script>

<style lang="scss">
.u-dropdown {
  background: #fff;
}
.container {
  min-height: 100vh;
  background: #eaf8fe;
}
.search-bar {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20rpx 25rpx;

  &__input {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-radius: 80rpx;
    background: rgba(51, 51, 51, 0.1);
    padding: 18rpx 40rpx 18rpx 46rpx;
  }
}
.wrap {
  padding: 50rpx 24rpx;

  .table {
    width: 100%;
    border-radius: 20px;
    overflow: hidden;
    background-color: #f0f8ff;
    filter: drop-shadow(-2.179px 3.355px 2.5px rgba(208,209,209,0.3));

    &__header,
    &__row {
      display: flex;
      padding: 28rpx 0;
      justify-content: space-between;
      border-bottom: 1px solid #ccc;
    }

    $arrow-width: 80rpx;
    &__header-item:nth-child(1),
    &__row-item:nth-child(1) {
      flex-basis: calc((100% - #{$arrow-width}) * (2 / 3));
      text-align: center;
    }
    &__header-item,
    &__row-item {
      flex-basis: calc((100% - #{$arrow-width}) / 3);
      text-align: center;
    }
    &__header-arrow,
    &__row-arrow {
      flex-basis: $arrow-width;
      text-align: center;
      display: flex;
      justify-content: center;
    }

    &__header {
      background-color: #4693d4;
      color: #fff;
    }

    &__row:nth-child(even) {
      background-color: #f9f9f9;
    }
    &__row:nth-last-child(1) {
      border-bottom: none;
    }
  }
}
</style>