driverSchool/newPages/evaluate/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>
    <view class="group_4 flex-col">
      <view class="list_1 flex-col" v-if="evaluate.length > 0">
        <scroll-view
            :style="{ height: scrollHeight + 'px' }"
            scroll-y="true" class="scroll-view"
            @scrolltolower="onReachBottomCus" refresher-enabled @refresherrefresh="onRefresherrefresh"
            :refresher-triggered="isTriggered">
          <view class="list-items_1 flex-col" v-for="(item, index) in evaluate" :key="index"
                @click="goEvaluateDetail(item)">
            <view class="text-wrapper_1 flex-row">
              <text class="text_2">{{ item.busiName }}</text>
            </view>
            <view class="group_6 flex-row justify-between">
              <view class="text-wrapper_2 flex-col">
                <text class="text_3">{{ item.busiName.slice(0, 3) }}</text>
              </view>
              <view class="text-wrapper_3 flex-col">
                <text class="text_4">{{ item.courseType }}</text>
              </view>
            </view>
            <view class="group_7 flex-row">
              <view class="image-text_1 flex-row justify-between" style="align-items: center;">
                <image class="label_2" referrerpolicy="no-referrer"
                       src="/static/lanhu_pingjiabiaodan/FigmaDDSSlicePNG9781bf564ae15eee66e88c90622422db.png"/>
                <text class="text-group_1">{{ item.coachName }}</text>
              </view>
              <view style="display: flex; align-items: center;">
                <u-rate active-color="#EAA140" v-model="item.rate" allowHalf inactive-color="#b2b2b2"
                        readonly></u-rate>
                <text style="margin-left: 5rpx;color:#E1A652;">{{ item.rate }}</text>
              </view>
            </view>
          </view>
        </scroll-view>
      </view>
      <view class="empty-container" v-else>
        <u-empty
            mode="data"
            text="评价为空"
        />
      </view>
    </view>
  </view>
</template>
<script>
import headers from "@/components/header/headers.vue";
import {
  getLocalUserInfo
} from "@/utils/auth";
import request from "@/utils/request";

export default {
  components: {
    headers
  },
  data() {
    return {
      loopData0: [{
        lanhutext0: '科目二训练',
        lanhutext1: '科目二',
        lanhutext2: 'C2',
        lanhuimage0: 'https://lanhu-oss-2537-2.lanhuapp.com/FigmaDDSSlicePNG9781bf564ae15eee66e88c90622422db.png',
        lanhutext3: '马文峰',
        lanhutext4: '4.0'
      },
        {
          lanhutext0: '科目二考试',
          lanhutext1: '科目二',
          lanhutext2: 'C2',
          lanhuimage0: 'https://lanhu-oss-2537-2.lanhuapp.com/FigmaDDSSlicePNG9781bf564ae15eee66e88c90622422db.png',
          lanhutext3: '马文峰',
          lanhutext4: '4.0'
        }
      ],
      evaluate: [],
      scrollHeight: 0,
      constants: {},
      userId: getLocalUserInfo().id,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      isTriggered: false
    };
  },
  onLoad() {
    this.getList()
  },
  onReady() {
    // 动态计算滚动区域高度
    this.calculateScrollHeight();
  },

  methods: {
    getList() {
      request({
        url: '/app-api/feed-back/page',
        method: 'GET',
        params: {
          userId: this.userId,
          pageNo: this.pageNo,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.total = res.data.total
        if (this.pageNo == 1) {
          this.evaluate = res.data.records
        } else {
          this.evaluate = this.evaluate.concat(res.data.records)
        }
        this.isTriggered = false
      })
    },
    /**
     * 上滑加载数据
     */
    onReachBottomCus() {
      //判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
      if (this.pageNo * this.pageSize >= this.total) {
        uni.$u.toast('没有更多数据了')
        return
      }
      //页码+1,调用获取数据的方法获取第二页数据
      this.pageNo++
      //此处调用自己获取数据列表的方法
      if (this.curNow === 1) {
        this.getTrainList()
      } else {
        this.getList()
      }
    },
    calculateScrollHeight() {
      // 获取屏幕高度
      const screenHeight = uni.getSystemInfoSync().windowHeight;
      // 获取顶部区域高度
      const topHeight = 120;
      // 计算滚动区域高度
      this.scrollHeight = screenHeight - topHeight;
    },
    /**
     * 下拉刷新数据
     */
    onRefresherrefresh() {
      this.isTriggered = true
      this.pageNo = 1
      this.total = 0
      this.appointmentList = []
      if (this.curNow === 1) {
        this.getTrainList()
      } else {
        this.getList()
      }
    },
    goEvaluateDetail(data) {
      data = JSON.stringify(data)
      uni.navigateTo({
        url: `/newPages/evaluateAdd/index?data=${data}`
      })
    }
  }
};
</script>
<style lang='scss'>
@import '../common/common.scss';
@import './assets/style/index.rpx.scss';

.empty-container {
  display: flex;
  justify-content: center; /* 水平居中 */
  align-items: center; /* 垂直居中 */
  height: 100vh; /* 或者你需要撑满的高度 */
}

.text-group_1 {
  display: inline-block;
  max-width: 4em; /* 一个汉字大概占1em，3em就是三个字 */
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

.itemContent {
  height: 100% !important; /* 确保高度生效 */
  flex: 1; /* 填充剩余空间 */
}

</style>