161 lines
4.3 KiB
Vue
161 lines
4.3 KiB
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 reservationOrderVue from '@/components/reservationOrder/reservationOrder.vue'
|
|
import request from "@/utils/request";
|
|
import {getToken} from '@/utils/auth.js'
|
|
|
|
export default {
|
|
components: {
|
|
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,
|
|
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>
|