driverSchool/newPages/newIndex/index.vue

<template>
  <view class="page flex-col">
    <u-swiper class="lunbo_" :list="swiperList" radius="10" height="300" indicator indicatorMode="line" @change="change" @click="click"></u-swiper>
    <view class="section_2 flex-col">
      <view class="list_1 flex-row">
        <view
          class="image-text_1 flex-col align-items-center"
          v-for="(item, index) in loopData0"
          :key="index"
        >
          <image
            class="label_1"
            referrerpolicy="no-referrer"
            :src="item.url"
          />
          <text class="text-group_1" v-text="item.text"></text>
        </view>
      </view>
      <view class="box_4 flex-row justify-between">
        <view class="image-text_2 flex-row justify-between">
          <image
            class="label_2"
            referrerpolicy="no-referrer"
            src="/static/lanhu_shouye2gai/FigmaDDSSlicePNGd2c17b5f24182e597acbfa50481040c1.png"
          />
          <text class="text-group_2">
            “高科技”驾考作弊团伙被抓，驾校校长教练负责介绍学员
          </text>
        </view>
        <view class="group_3 flex-col justify-between">
          <view class="block_5 flex-col"></view>
          <view class="block_6 flex-col"></view>
          <view class="block_7 flex-col"></view>
        </view>
      </view>
      <view class="box_5 flex-row justify-between">
        <text class="text_2">优质驾校</text>
        <view class="image-text_3 flex-row justify-between">
          <text class="text-group_3" @click="goSchoolDetail(school)">查看更多</text>
          <image
            class="thumbnail_2"
            referrerpolicy="no-referrer"
            src="/static/lanhu_shouye2gai/FigmaDDSSlicePNGc8586e4d9e76802e4b93ae8fb3654b38.png"
          />
        </view>
      </view>
      <!-- 使用 scroll-view 包裹 SchoolInfo 组件 -->
      <scroll-view class="school-scroll-view" scroll-y @scrolltolower="onReachBottomCus"
                   refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
        <SchoolInfo style="" v-for="(school, index) in schoolList" :key="index" :schoolInfo="school" />
      </scroll-view>
    </view>
    <tabbar :msg='msg'></tabbar>
  </view>
</template>

<script>
import SchoolInfo from './SchoolInfo.vue';
import request from "@/utils/request";

export default {
  components: {
    SchoolInfo
  },
  data() {
    return {
      loopData0: [
        {
          url: '/static/lanhu_shouye2gai/xcbm.png',
          text: '学车报名'
        },
        {
          url: '/static/lanhu_shouye2gai/yyxl.png',
          text: '预约训练'
        },
        {
          url: '/static/lanhu_shouye2gai/kslr.png',
          text: '考试结果录入'
        },
        {
          url: '/static/lanhu_shouye2gai/pj.png',
          text: '评价'
        }
      ],
      swiperList: ['/static/lanhu_shouye2gai/lb.png'],
      msg: "1",
      constants: {},
      schoolList: [
        {
          imageUrl: '/static/lanhu_shouye2gai/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          name: '兄弟驾校',
          status: '营业中',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },
        {
          imageUrl: '/static/lanhu_shouye2gai/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          name: '兄弟驾校',
          status: '未营业',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },
        {
          imageUrl: '/static/lanhu_shouye2gai/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          name: '兄弟驾校',
          status: '未营业',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },
        {
          imageUrl: '/static/lanhu_shouye2gai/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          name: '兄弟驾校',
          status: '未营业',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },
        {
          imageUrl: '/static/lanhu_shouye2gai/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          name: '兄弟驾校',
          status: '未营业',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },
        {
          imageUrl: '/static/lanhu_shouye2gai/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          name: '兄弟驾校',
          status: '未营业',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },
        {
          imageUrl: '/static/lanhu_shouye2gai/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          name: '兄弟驾校',
          status: '未营业',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },
        {
          imageUrl: '/static/lanhu_shouye2gai/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          name: '兄弟驾校',
          status: '未营业',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        },
        {
          imageUrl: '/static/lanhu_shouye2gai/FigmaDDSSlicePNG530e91ec069b391e8972e9ed0aeebc58.png',
          name: '兄弟驾校',
          status: '营业中',
          time: '08:00-18:00',
          address: '山东省济南市历下区工业南路168号',
          features: ['有接送', '规模大']
        }
      ],
      //下来刷新状态
      isTriggered:false,
      pageNo: 1,
      pageSize: 10,
    };
  },
  methods: {
    getList() {
      request({
        url: '/admin-api/userClient/base/company/page',
        method: 'GET',
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      }).then(res => {
      })
    },
    /**
     * 上滑加载数据
     */
    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.messageList = []
      this.getList()
    },
    goSchoolDetail() {
      uni.navigateTo({
        url: '/newPages/schoolList/index',
      });
    }
  }
};
</script>

<style lang='scss'>
@import '../common/common.scss';
@import './assets/style/index.rpx.scss';
// 新增样式，使文字居中显示
.text-group_1 {
  text-align: center;
}

// 修改 image-text_1 样式，使其内容垂直排列并居中
.image-text_1 {
  display: flex;
  flex-direction: column;
  align-items: center; // 使内容水平居中
  justify-content: center; // 可根据需要使内容垂直居中
}

// 新增 scroll-view 样式
.school-scroll-view {
  height: 100%;
  overflow-y: auto;
  margin-left: 22rpx;
}
</style>