lanan-repair/pages/myReservation/myReservation.vue

<template>
	<view class="container">
		<VNavigationBar titleColor="rgba(0,0,0,0.9)" backgroundColor="transparent" title="我的预约">
		</VNavigationBar>
		<view class="body">
				<view class="orderList">
          <scroll-view style="height: 100%;" scroll-y="true" class="itemContent" @scrolltolower="onReachBottomCus"
                       refresher-enabled @refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
            <reservationOrderVue v-for="(item, index) in orderList" :key="index" :orderInfo="item">
            </reservationOrderVue>
            <view class="no-data" v-if="orderList.length==0">
              <image class=""  src="@/static/images/nothing.png" ></image>
            </view>
          </scroll-view>
				</view>
		</view>
	</view>
</template>

<script>
	import VNavigationBar from '@/components/VNavigationBar.vue'
	import tabBarVue from '@/components/tabBar/tabBar.vue'
	import reservationOrderVue from '../../components/reservationOrder/reservationOrder.vue'
  import request from "@/utils/request";
  import {getToken} from '@/utils/auth.js'

	export default {
		components: {
			tabBarVue,
			VNavigationBar,
			reservationOrderVue
		},
		data() {
			return {
        pageNo: 1,
        pageSize: 10,
        total: 0,
        //下来刷新状态
        isTriggered:false,
				// orderList: [{
				// 		title: '顺捷汽车维修搭电救援补胎中心',
				// 		status: '1',
				// 		address: '济南市历下区福瑞达历下护理院东南门旁',
				// 		phone: '15726506879',
				// 		busiTypeStr: '汽车维修'
				// 	},
				// 	{
				// 		title: '顺捷汽车维修搭电救援补胎中心',
				// 		status: '1',
				// 		address: '济南市历下区福瑞达历下护理院东南门旁',
				// 		phone: '15726506879',
				// 		busiTypeStr: '汽车维修'
				// 	}
				// ]
        orderList:[]
			}
		},
    onShow() {
      if(!getToken()){
        uni.reLaunch({
          url: '/pages/login/login'
        })
      }else{
        console.log("已登录")
      }
      this.getBookingPage()
    },
		methods: {
      /**
       * 上滑加载数据
       */
      onReachBottomCus() {
        //判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
        if (this.pageNo * this.pageSize >= this.total) {
          uni.$u.toast('没有更多数据了')
          return
        }
        //页码+1,调用获取数据的方法获取第二页数据
        this.pageNo++
        //此处调用自己获取数据列表的方法
        this.getBookingPage()
      },
      /**
       * 下拉刷新数据
       */
      onRefresherrefresh(){
        this.isTriggered = true
        this.pageNo = 1
        this.total = 0
        this.orderList = []
        this.getBookingPage()
      },
      async getBookingPage(){
        const res = await request({
          url: "/userClient/repair/booking/page",
          method: "get",
          params:{
            pageNo: this.pageNo,
            pageSize: this.pageSize
          }
        })
        const data = res.data.records
        const ids = data.map(item => item.id)
        const response = await request({
          url: "/userClient/repair/booking/map?ids=" + ids,
          method: "get",
        })
        const list = response.data
        let thisDataList = list.map(item => {
          return {
            ...item,
            title: item.company.corpName,
            address: item.company.address,
            phone: item.company.mobilePhone,
            busiTypeStr: item.repairTypeText?item.repairTypeText:"",
            status: item.bookingStatus
          }
        })
        if (this.pageNo != 1) {
          this.orderList = this.orderList.concat(thisDataList)
        } else {
          this.orderList = thisDataList
        }
        console.log(this.orderList,"demo")
        //将获取的总条数赋值
        this.total = res.data.total
        this.isTriggered = false

      }
		}
	}
</script>

<style scoped lang="less">
	.container {
		height: 100%;
		background: #F3F5F7;
		background: linear-gradient(180deg, #C1DEFF 0%, rgba(#F3F5F7, 0) 100%);
		background-size: 100% 600rpx;
		background-repeat: no-repeat;
		display: flex;
		flex-direction: column;
		color: #333333;

		.body {
			flex: 1;
			height: 0;
			padding: 16rpx 0 30rpx;
			overflow: auto;
		}

		.orderList {
      height: 100%;
			display: flex;
			flex-direction: column;
			row-gap: 20rpx;
      margin: 0 40rpx;
		}
    .no-data{
      text-align: center;
    }
	}
</style>