driverSchool/newPages/newIndex/index.vue

<template>
  <view class="page flex-col">
    <view class="top_">
      <u-swiper class="lunbo_" :list="swiperList" keyName="swiperPicture" radius="10" height="300" indicator
                indicatorMode="line"></u-swiper>
    </view>
    <view class="section_2 flex-col">
      <view class="list_1 flex-row">
        <view
            class="image-text_1 flex-col align-items-center justify-content-center;"
            v-for="(item, index) in loopData0"
            :key="index"
            @click="handleItemClick(item)"
        >
          <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">
          <u-notice-bar direction="column" duration="10000" bgColor="#e9f1ff"  color="black" :text="textList" icon="/static/lanhu_shouye2gai/FigmaDDSSlicePNGd2c17b5f24182e597acbfa50481040c1.png"></u-notice-bar>
        </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="goSchoolList()">查看更多</text>
          <image
              class="thumbnail_2"
              referrerpolicy="no-referrer"
              src="/static/lanhu_shouye2gai/FigmaDDSSlicePNGc8586e4d9e76802e4b93ae8fb3654b38.png"
          />
        </view>
      </view>
      <view class="itemContent">
        <!-- 使用 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"
                      @click="goSchoolDetail(school)"/>
        </scroll-view>
      </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: [],
      msg: "1",
      announcement:['ceshi1111','测试111111111111111111111111111111111111111111'],
      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,
      imageUrl: this.$imagesUrl,
      textList:[]
    };
  },
  onLoad() {
    this.getList()
    this.getSwiperList()
    this.getTextList()
  },
  methods: {
    getList() {
      request({
        url: '/userClient/base/companySmallProgram/pageNoTenantId',
        method: 'GET',
        params: {
          pageNo: this.pageNo,
          pageSize: this.pageSize,
          serviceCodes: 'jiaxiao'
        },
        tenantIdFlag: false
      }).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.isTriggered = false
      })
    },
    /**
     * 实时讯息
     */
    async getTextList() {
      let res = await request({
        url: '/app-api/drivingSchool/text/list',
        method: 'get',
        params: {
          pageNum: 1,
          pageSize: 10000
        }
      })
      // this.textList = res.data.records
      // 将textList中的title拼接成数组赋值给textList
      res.data.records.forEach(item => {
        this.textList.push(item.title)
      })
    },
    getSwiperList() {
      request({
        url: '/drivingSchool/applet/swiper/list',
        method: 'GET'
      }).then(res => {
        res.data.forEach(item => {
          item.swiperPicture = this.imageUrl + item.swiperPicture
        })
        this.swiperList = res.data
        console.log('轮播图', this.swiperList)
      })
    },
    /**
     * 上滑加载数据
     */
    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 = []
      this.getList()
    },
    goSchoolList() {
      uni.navigateTo({
        url: '/newPages/schoolList/index',
      });
    },
    goSchoolDetail(data) {
      uni.navigateTo({
        url: `/newPages/schoolDetail/index?id=${data.id}&tenantId=${data.tenantId}`,
        // url: '/newPages/schoolDetail/index',
      });
    },

    handleItemClick(item) {
      // 根据 item.text 判断点击的是哪一项
      switch (item.text) {
        case '学车报名':
          uni.navigateTo({
            // url: '/pages/enroll/index'
          });
          break;
        case '预约训练':
          uni.navigateTo({
            url: '/newPages/appointment/index'
          });
          break;
        case '考试结果录入':
          uni.navigateTo({
            url: '/newPages/examinationList/index'
          });
          break;
        case '评价':
          uni.navigateTo({
            url: '/newPages/evaluate/index'
          });
          break;
        default:
          console.warn('未知的点击项:', item.text);
          break;
      }
    }

  }
};
</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: 500rpx; // 设置一个固定高度，根据需要调整
  overflow-y: auto;
  margin-left: 22rpx;
}

.itemContent {
  padding: 30rpx 0;
  display: flex;
  flex-direction: column;
  row-gap: 20rpx;
}

.top_ {
  //padding-top: 200rpx;
}
</style>