driverSchool/newPages/courseList/index.vue

<template>
  <view class="page flex-col">
    <view style="width: 100%;background: #f4f5f6;box-sizing: border-box;padding-top: 88px;">
      <headers titles="课程">
        <uni-icons type="left" color="#000000" size="22px"></uni-icons>
      </headers>
    </view>
	<scroll-view
	      class="scroll-view"
	      scroll-y
	      :style="{ height: scrollHeight + 'px' }"
	    >
    <view class="group_6 flex-col" v-for="(item, index) in schoolAllClassList" :key="index" @click="goToDetail(item.id)">
      <view class="image-text_1 flex-row">
        <image
          class="image_2"
          referrerpolicy="no-referrer"
          :src="imagesUrl + '/' + item.photo"
        />
        <view class="text-group_1 flex-col justify-between">
          <text class="text_3">{{ item.name }}</text>
          <view class="text-wrapper_1 flex-row justify-between">
            <text class="text_4">￥{{ item.price }}</text>
          </view>
        </view>
        <view class="text-wrapper_3 flex-col">
          <view style="display: flex">
            <text class="text_7" style="background-color: rgba(223, 235, 255, 1);padding: 5rpx 15rpx">{{ item.tittle }}</text>
            <text class="text-wrapper_2 text_7" style="color: black;padding: 5rpx 15rpx;margin-left: 10rpx">{{ item.type }}</text>
          </view>
        </view>
<!--        <view class="text-wrapper_3 flex-col">-->
<!--          <view >-->
<!--            <text class="text_7">{{ item.name }}</text>-->
<!--          </view>-->
<!--          <view class="text-wrapper_2 flex-col">-->
<!--            <text class="text_6">{{ item.type }}</text>-->
<!--          </view>-->
<!--        </view>-->

      </view>
    </view>
	</scroll-view>

  </view>
</template>
<script>
import request from "@/utils/request";
import config from "@/config.js"
import headers from "@/components/header/headers.vue";

export default {
  components: {headers},
  data() {
    return {
		imagesUrl: config.imagesUrl,
		tenantId: undefined,
		schoolAllClassList: [],
		scrollHeight: 0,
    };
  },
  onLoad(options) {
    if (options.tenantId) {
  	  this.tenantId = options.tenantId
  	  this.getSchoolAllClass()
    }
  },
  onReady() {
      // 动态计算滚动区域高度
      this.calculateScrollHeight();
    },
  methods: {
	  goBack() {
		  uni.navigateBack({
			  delta: 1
		  });
	  },
	  getSchoolAllClass() {
	    request({
	      url: '/app-api/dl-drive-school-course-small/list',
	      method: 'GET',
	      params: {
	        tenantId: this.tenantId,
	      },
	      tenantIdFlag: false
	    }).then(res => {
	        this.schoolAllClassList = res.data;
	        this.total = res.data.total;
	    })
	  },

	  calculateScrollHeight() {
	        // 获取屏幕高度
	        const screenHeight = uni.getSystemInfoSync().windowHeight;
	        // 获取顶部区域高度（根据实际情况调整）
	        const topHeight = 100; // 假设顶部区域高度为 100px
	        // 计算滚动区域高度
	        this.scrollHeight = screenHeight - topHeight;
	    },
	// 跳转到详情页
	goToDetail(courseId) {
	  uni.navigateTo({
		url: `/newPages/courseDetail/index?courseId=${courseId}&tenantId=${this.tenantId}`,
	  });
	},

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

.scroll-view {
  flex: 1;
  overflow-y: auto;
}
</style>