driverSchool/newPages/schoolList/index.vue

<template>
  <view class="page flex-col">
    <view class="container">
      <headers titles="驾校">
        <uni-icons @click="goback()" type="arrow-left" color="#000000"
                   size="22px"></uni-icons>
      </headers>
    </view>
    <view class="itemContent">
      <scroll-view style="height: 100%;" scroll-y="true" class="itemContent" @scrolltolower="onReachBottomCus"
                   refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
        <!-- 使用 SchoolInfo 组件渲染驾校信息 -->
        <SchoolInfo v-for="(school, index) in schoolList" :key="index" :schoolInfo="school"/>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import headers from "@/components/header/headers.vue";
import SchoolInfo from '../newIndex/SchoolInfo.vue';
import request from "@/utils/request";

export default {
  components: {
    headers,
    SchoolInfo // 注册 SchoolInfo 组件
  },
  data() {
    return {
      constants: {},
      schoolList: [
        // {
        //   imageUrl: '/static/lanhu_jiaxiaoliebiao/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
        //   corpName: '兄弟驾校',
        //   status: '未营业',
        //   time: '08:00-18:00',
        //   address: '山东省济南市历下区工业南路168号',
        //   features: ['有接送', '规模大']
        // },
        // {
        //   imageUrl: '/static/lanhu_jiaxiaoliebiao/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
        //   corpName: '兄弟驾校',
        //   status: '营业中',
        //   time: '08:00-18:00',
        //   address: '山东省济南市历下区工业南路168号',
        //   features: ['有接送', '规模大']
        // },
        // {
        //   imageUrl: '/static/lanhu_jiaxiaoliebiao/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
        //   corpName: '兄弟驾校',
        //   status: '营业中',
        //   time: '08:00-18:00',
        //   address: '山东省济南市历下区工业南路168号',
        //   features: ['有接送', '规模大']
        // },
        // {
        //   imageUrl: '/static/lanhu_jiaxiaoliebiao/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
        //   corpName: '兄弟驾校',
        //   status: '营业中',
        //   time: '08:00-18:00',
        //   address: '山东省济南市历下区工业南路168号',
        //   features: ['有接送', '规模大']
        // },
        // {
        //   imageUrl: '/static/lanhu_jiaxiaoliebiao/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
        //   corpName: '兄弟驾校',
        //   status: '营业中',
        //   time: '08:00-18:00',
        //   address: '山东省济南市历下区工业南路168号',
        //   features: ['有接送', '规模大']
        // },
      ],
      isTriggered: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
    };
  },
  onLoad() {
    this.getList()
  },
  methods: {
    goback() {
      uni.navigateBack()
    },
    getList() {
      request({
        url: '/userClient/base/companySmallProgram/pageNoTenantId',
        method: 'GET',
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          serviceCodes: 'jiaxiao'
        }
      }).then(res => {
        res.data.records.forEach(item => {
          item.features = ['有接送', '规模大']
          item.imageUrl = '/static/lanhu_shouye2gai/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png'
        })
        this.schoolList = this.schoolList.concat(res.data.records)
        this.total = res.data.total
        console.log('长度', this.schoolList.length)
        this.isTriggered = false
      })
    },

    /**
     * 上滑加载数据
     */
    onReachBottomCus() {
      //判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
      if (this.pageNo * this.pageSize >= this.total) {
        uni.$u.toast('没有更多数据了')
        return
      }
      //页码+1,调用获取数据的方法获取第二页数据
      this.pageNo++
      //此处调用自己获取数据列表的方法
      this.getList()
    },
    /**
     * 下拉刷新数据
     */
    onRefresherrefresh() {
      this.isTriggered = true
      this.pageNo = 1
      this.total = 0
      this.schoolList = [
        {
          imageUrl: '/static/lanhu_jiaxiaoliebiao/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          corpName: '兄弟驾校',
          status: '未营业',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },
        {
          imageUrl: '/static/lanhu_jiaxiaoliebiao/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          corpName: '兄弟驾校',
          status: '营业中',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },
        {
          imageUrl: '/static/lanhu_jiaxiaoliebiao/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          corpName: '兄弟驾校',
          status: '营业中',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },
        {
          imageUrl: '/static/lanhu_jiaxiaoliebiao/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          corpName: '兄弟驾校',
          status: '营业中',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },
        {
          imageUrl: '/static/lanhu_jiaxiaoliebiao/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          corpName: '兄弟驾校',
          status: '营业中',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },]
      this.getList()
    },
  }
};
</script>

<style lang='scss'>
@import '../common/common.scss';
@import './assets/style/index.rpx.scss';

.container {
  width: 100%;
  background: #f4f5f6;
  box-sizing: border-box;
  padding-top: 88px;
}

.itemContent {
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  row-gap: 20rpx;
  height: calc(100% - 65px);
}
</style>