driverSchool/newPages/appointment/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 style="padding: 10rpx 30rpx">
      <u-subsection :list="list" :current="curNow" @change="sectionChange"></u-subsection>
    </view>
    <scroll-view style="height: 1200rpx;" scroll-y="true" class="itemContent" @scrolltolower="onReachBottomCus"
                 refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
      <!-- 新增内容容器 -->
      <view class="box_2 flex-col" v-if="curNow === 0">
        <view class="box_4 flex-col" v-for="item in appointmentList" @click="goDetail(item,'')" :key="item.id">
          <view class="group_5 flex-row justify-between">
            <view class="block_3 flex-col justify-between">
              <text class="text_2">{{ item.reservDay }}</text>
              <view class="group_6 flex-row justify-between">
                <view class="text-wrapper_1 flex-col">
                  <text class="text_3">{{ item.subjectStr }}</text>
                </view>
                <view class="text-wrapper_2 flex-col">
                  <text class="text_4">{{ item.courseType }}</text>
                </view>
              </view>
            </view>
            <view :class="item.status === true ? 'ytg' : 'text-wrapper_3'" class=" flex-col">
              <text class="text_5">{{ item.statusStr }}</text>
            </view>
          </view>
          <view class="text-wrapper_4 flex-row justify-between">
            <text class="text_6">时间范围：</text>
            <text class="text_7">{{ item.reservTime }}</text>
          </view>
          <view class="text-wrapper_5 flex-row justify-between">
            <text class="text_8">教练名称：</text>
            <text class="text_9">{{ item.coachName }}</text>
          </view>
        </view>
      </view>
      <!-- 新增内容容器 -->
      <view class="box_2 flex-col" v-if="curNow === 1">
        <view class="box_4 flex-col" v-for="item in appointmentList" @click="goDetail(item,'train')" :key="item.id">
          <view class="group_5 flex-row justify-between">
            <view class="block_3 flex-col justify-between">
              <text class="text_2">{{ item.trainDay }}</text>
              <view class="group_6 flex-row justify-between">
                <view class="text-wrapper_1 flex-col">
                  <text class="text_3">{{ subjectArr[item.subject - 1] }}</text>
                </view>
                <view class="text-wrapper_2 flex-col">
                  <text class="text_4">{{ item.courseType }}</text>
                </view>
              </view>
            </view>
          </view>
          <view class="text-wrapper_4 flex-row justify-between">
            <text class="text_6">交通方式：</text>
            <text class="text_7">{{ item.transWay }}</text>
          </view>
          <view class="text-wrapper_4 flex-row justify-between">
            <text class="text_6">训练地址：</text>
            <text class="text_7">{{ item.addr }}</text>
          </view>
          <view class="text-wrapper_4 flex-row justify-between">
            <text class="text_6">训练时长：</text>
            <text class="text_7">{{ item.trainTime }}分钟</text>
          </view>
          <view class="text-wrapper_5 flex-row justify-between">
            <text class="text_8">教练名称：</text>
            <text class="text_9">{{ item.coachName }}</text>
          </view>
          <view class="block_5 box_10 flex-row" style="justify-content: flex-end; margin: 0 20rpx 15rpx 0;" v-if="!item.ifEvaluate" @click="goEvaluateAdd(item)">
            <view style="border: 1px solid rgba(44, 120, 245, 1); padding: 7rpx 30rpx; border-radius: 50rpx;color: rgba(44, 120, 245, 1)">
              <text class="text_18">开始评价</text>
            </view>
          </view>
        </view>
      </view>
    </scroll-view>
    <view class="box_6 flex-col bottom_">
      <view class="text-wrapper_12 flex-col " @click="goAppointment()">
        <text class="text_19">预约</text>
      </view>
    </view>
  </view>
</template>
<script>
import headers from "@/components/header/headers.vue";
import request from "@/utils/request";

export default {
  components: {
    headers
  },
  data() {
    return {
      isTriggered: false,
      pageNo: 1,
      pageSize: 10,
      total: 0,
      appointmentList: [],
      constants: {},
      list: ['预约记录', '训练记录'],
      curNow: 0,
      subjectArr:['科目一','科目二','科目三','科目四']
    };
  },
  onLoad() {
    this.getList()
    uni.$on('refresh', (data) => {
      this.pageNo = 1
      this.appointmentList = []
      if (this.curNow === 0) {
        this.getList()
      } else {
        this.getTrainList()
      }
    })
  },
  methods: {
    goback() {
      uni.navigateBack()
    },
    sectionChange(index) {
      this.curNow = index;
      this.pageNo = 1
      this.appointmentList = []
      if (this.curNow === 0) {
        this.getList()
      } else {
        this.getTrainList()
      }
    },
    getList() {
      request({
        url: '/app-api/drivingSchool/system/reservationCourse/list',
        method: 'GET',
        params: {
          pageNum: this.pageNo,
          pageSize: this.pageSize,
          ifCancel: false
        },
        tenantIdFlag: false
      }).then(res => {
        console.log('获取预约列表', res)
        if (this.pageNo === 1) {
          this.total = res.data.total
          this.appointmentList = []
          this.appointmentList = res.data.records
        } else {
          this.appointmentList = this.appointmentList.concat(res.data.records)
        }
        this.isTriggered = false
      })
    },
    getTrainList() {
      request({
        url: '/app-api/train/page',
        method: 'GET',
        params: {
          pageNum: this.pageNo,
          pageSize: this.pageSize,
          selectType: 'all'
        },
        tenantIdFlag: false
      }).then(res => {
        console.log('获取预约列表', res)
        if (this.pageNo === 1) {
          this.total = res.data.total
          this.appointmentList = []
          this.appointmentList = res.data.records
        } else {
          this.appointmentList = this.appointmentList.concat(res.data.records)
        }
        this.isTriggered = false
      })
    },
    goDetail(data,str) {
      //将data转为字符串
      uni.navigateTo({
        url: `/newPages/appointmentDetail/index?data=${JSON.stringify(data)}&type=${str}`
      })
    },
    /**
     * 上滑加载数据
     */
    onReachBottomCus() {
      //判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
      if (this.pageNo * this.pageSize >= this.total) {
        uni.$u.toast('没有更多数据了')
        return
      }
      //页码+1,调用获取数据的方法获取第二页数据
      this.pageNo++
      //此处调用自己获取数据列表的方法
      if (this.curNow === 1) {
        this.getTrainList()
      } else {
        this.getList()
      }
    },
    /**
     * 下拉刷新数据
     */
    onRefresherrefresh() {
      this.isTriggered = true
      this.pageNo = 1
      this.total = 0
      this.appointmentList = []
      if (this.curNow === 1) {
        this.getTrainList()
      } else {
        this.getList()
      }
    },
    goAppointment() {
      uni.navigateTo({
        url: '/newPages/appointmentAdd/index'
      })
    },
    goEvaluateAdd(data) {
      data = JSON.stringify(data)
      uni.navigateTo({
        url: `/newPages/evaluateAdd/index?data=${data}&type=xunlian&controls=add`
      })
    },
  }
};
</script>
<style lang='scss'>
@import '../common/common.scss';
@import './assets/style/index.rpx.scss';

// 新增样式
.content-box {
  margin-top: 88rpx;
  /* 根据头部高度调整 */
  padding: 20rpx;
  overflow-y: auto;
  height: calc(100vh - 88rpx);
  /* 确保内容区域高度正确 */
}

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

.bottom_ {
  position: fixed;
  bottom: 0;
}

.ytg {
  background-color: #cfe2ff;
  border-radius: 4px;
  height: 40rpx;
  margin-top: 22rpx;
  width: 96rpx;

  .text_5 {
    width: 72rpx;
    height: 24rpx;
    overflow-wrap: break-word;
    color: rgba(4, 78, 242, 1);
    font-size: 24rpx;
    font-family: PingFang SC-Regular;
    font-weight: NaN;
    text-align: left;
    white-space: nowrap;
    line-height: 24rpx;
    margin: 8rpx 0 0 12rpx;
  }
}
</style>