hz-zhhq-app/pages/washCarAccept/washCarAccept.vue

<template>
	<view class="container">
		<scroll-view scroll-x="true" class="scroll-view">
			<view class="time-item-box" :class="chooseDateIndex == index ? 'time-active' : ''" v-for="(item,index) in date" :key="index"
			 @click="chooseDateIndex = index">
				<text class="time">{{item.tiems.substr(5,10)}}</text>
				<text class="week">{{item.week}}</text>
			</view>
		</scroll-view>
		
		<!-- 预约记录列表 -->
		<view class="list-box" v-if="reservationList.length > 0">
			<view class="detail" v-for="(item,index) in reservationList" :key="index">
				<view class="detail_header">
					<text class="blueSign"></text>
					<text class="font-tilte">洗车预约</text>
					<!-- <text class="slect_icon"></text> -->
					<text class="font-result"> {{item.status}} </text>
				</view>
				<view class="detail_msg">
					<view class="info-item">
						<text>预约时间： </text>
						<text class="infoSpan">{{item.timeQ}}</text>
					</view>
					<view class="info-item">
						<text>申请人： </text>
						<text class="infoSpan">{{item.userName}}</text>
					</view>
					<view class="info-item">
						<text>申请时间： </text>
						<text class="infoSpan">{{formatDate(item.apply_time)}}</text>
					</view>
					<view class="info-item">
						<text>预约人： </text>
						<text class="infoSpan">{{item.concatUserName}}</text>
					</view>
					<view class="info-item">
						<text>预约电话： </text>
						<text class="infoSpan">{{item.concatPhone}}</text>
					</view>
				</view>
			</view>
		</view>
		<content-none v-else :padTop="25"></content-none>
		<load-more :loadingType="loadingType" :contentText="contentText"></load-more>
	</view>
</template>

<script>
	import {getDate,getStorage,alertTip,callbackRequest,formatDate} from '@/common/util.js';
	import {getDoWashCarList} from '@/common/api.js';
	import loadMore from '@/components/loadMore.vue';
	import contentNone from '@/components/contentNone.vue';
	export default {
		data() {
			return {
				formatDate:formatDate,
				userId:getStorage('userInfo').id,
				page:1,
				pageSize:10,
				loadingType:0,//0-loading前；1-loading中；2-没有更多了
				contentText: {
					contentdown: "上拉加载更多",
					contentrefresh: "正在加载...",
					contentnomore: "没有更多数据了"
				},
				date:getDate(),
				chooseDateIndex:0,
				reservationList:[
					{
						status:'已完成',
						timeQ:'12-19 09:00 ~ 10:00',
						userName:'张三',
						apply_time:'2019.12.19 08:30',
						id:1
					}
				]
			};
		},
		components:{
			loadMore,
			contentNone
		},
		onLoad(){
			this.initData()
		},
		watch:{
			chooseDateIndex:function(newVal,oldVal){
				this.page = 1;
				this.loadingType = 0;
				this.initData();
			}
		},
		methods:{
			initData(){
				let params = {
					"method":getDoWashCarList,
					data:{
						pageSize:this.pageSize,
						pageNum:this.page,
						userId:this.userId,
						applyDate:this.date[this.chooseDateIndex].tiems
					}
				}
				callbackRequest(params)
				.then(res => {
					if(res.data.returnCode == 1){
						if(this.page == 1){
							this.reservationList = res.data.returnData;
						}else {
							if(res.data.returnData.length > 0){
								this.reservationList = [...this.reservationList,...res.data.returnData];
								this.loadingType = 0;
							}else {
								this.loadingType = 2;
							}
						}
					}
				})
			}
		},
		onReachBottom() {
			if(this.loadingType !== 0){
				return ;
			}
			this.loadingType = 1;
			this.page = this.page +1;
			this.initData();
		}
	}
</script>

<style lang="scss">
	@import '@/static/css/common.scss';
	.container{
		min-height:100vh;
		background: #f8f8f8;
	}
	.scroll-view {
		padding: 20upx 0;
		white-space: nowrap;
		width: 100%;
		// height: 120upx;
		background: #fff;
		.time-item-box {
			padding: 0 10upx;
			margin: 0 16upx;
			display: inline-block;
			.time {
				display: block;
				width: 100%;
				font-size: 28upx;
				color: #666;
			}
			.week {
				display: block;
				width: 100%;
				font-size: 28upx;
				color: #666;
			}
		}
		.time-active {
			.time {
				color: #00c277;
			}
			.week {
				color: #00c277;
			}
		}
	}
	
	.list-box{
		padding-top:20rpx;
		.detail {
			// margin-top: 10upx;
			margin-bottom: 14upx;
			background: #ffffff;
			border-radius: 4upx;
		}
		.detail_header {
			padding: 15upx 30upx;
			border-bottom: 1px solid #eee;
		}
		.detail_header .blueSign {
			height: 30upx;
			width: 10upx;
			background: #00c277;
			display: inline-block;
			margin: 10upx 14upx 0 0;
		}
		.detail_header .font-tilte {
			display: inline-block;
			font-size: 28upx;
			color: #333;
			line-height: 50upx;
			vertical-align: top;
		}
		.detail_header .font-result {
			display: inline-block;
			float: right;
			font-size: 26upx;
			color: #00c277;
			line-height: 50upx;
			vertical-align: top;
		}
		.detail_msg {
			padding: 20upx 30upx;
			overflow: hidden;
		}
		.detail_msg .info-item {
			margin-bottom: 10upx;
			font-size: 28upx;
			text {
				display: inline-block;
				width: 140upx;
			}
			.infoSpan {
				width: auto;
				font-size: 28upx;
				color: #666;
			}
		}
	}
</style>