jp-charge/pagesFinance/preengaged/preengaged.vue

<template>
	<view>
		<u-navbar title="我被预约">
			<view class="screen" @click="screenClick">筛选</view>
		</u-navbar>
		<view>
			<view v-if="screenShow" class="preference" :style="screenShow ? 'z-index:1024;top:'+navBarHeight+'px;' : 'z-index:0'"
				style="width: 100%;">
				<view class="content-s">
					<view class="preference_group">
						<view class="preference_group_item" :class="statusClass == index ? 'active' : ''" v-for="(item,index) in statusList" :key="item.id" @click="statusClick(index,item)">{{item.name}}</view>
					</view>
				</view>
			</view>
			<u-mask :show="screenShow" @click="screenShow = false" z-index="100"></u-mask>
		</view>
		<view class="reservation-items" v-for="(item,index) in appointmentList" :key="item.id" @click="gotoUrl('pagesFinance/preengaged/preengagedListDetails?id='+item.id)">
			<view class="station-name">
				预约{{item.reserveMinutes}}分钟后充电
				<view class="toBe-confirmed btn" v-if="item.status == '0'">{{item.statusText}}</view>
				<view class="confirmed btn" v-if="item.status == '1'">{{item.statusText}}</view>
				<view class="canceled btn" v-if="item.status == '3'">{{item.statusText}}</view>
				<view class="have-expired btn" v-if="item.status == '9'">{{item.statusText}}</view>
				<view class="finished btn" v-if="item.status == '2'">{{item.statusText}}</view>
				<view class="refused btn" v-if="item.status == '4'">{{item.statusText}}</view>
				<view class="have-expired btn" v-if="item.status == '5'">{{item.statusText}}</view>
				<view class="have-expired btn" v-if="item.status == '6'">{{item.statusText}}</view>
			</view>
			<view class="details-items">
				<view class="items">
					<view class="items-name">
						预留截止时间
					</view>
					<view class="items-content">
						{{item.endTime}}
					</view>
				</view>
				<view class="items">
					<view class="items-name">				
						预计充电时长
					</view>
					<view class="items-content">
						{{item.estimateMinutes != null ? (item.estimateMinutes/60).toFixed(1)+'小时' : '0'}}
					</view>
				</view>
				<view class="items">
					<view class="items-name">					
						预约站点
					</view>
					<view class="items-content">
						{{item.stationName}}
					</view>
				</view>
				<view class="items">
					<view class="items-name">	
						预约桩号
					</view>
					<view class="items-content">
						{{item.deviceName}}
					</view>
				</view>
				<view class="items">
					<view class="items-name">
						充电桩类型
					</view>
					<view class="items-content">
						{{item.typeText}}
					</view>
				</view>
			</view>
			<view class="button" v-if="item.status == '0'">
				<u-button class="affirm" shape="circle" @click="sureClick(item)">确认</u-button>
				<u-button class="refuse" shape="circle" @click="refuseClick(item)">拒绝</u-button>
			</view>
		</view>
		<u-divider  v-if="appointmentList.length == recordsTotal && recordsTotal != 0" style="margin-top: 10px;">已经到底了</u-divider>
	</view>
</template>

<script>
	import * as myApi from '@/apis/my.js'
	
	export default {
		data() {
			return {
				screenShow: false,
				navBarHeight:44,
				statusList: [
					{id:"",name:"全部预约单"},
					{id:"0",name:"待确认"},
					{id:"1",name:"已预约"},
					{id:"2",name:"已完成"},
					{id:"3",name:"已取消"},
					{id:"4",name:"已拒绝"},
					{id:"9",name:"已过期"},
				],
				statusClass: '',
				pageIndex: 1,
				recordsTotal: 0,
				appointmentList: [],
				status: '',
			}
		},
		onShow() {
			this.getAppointmentList(true);
		},
		onReachBottom() {
			if (this.appointmentList.length < this.recordsTotal) {			
				this.myLoadmore();
			}
		},
		methods: {
			screenClick() {
				this.screenShow = !this.screenShow;
			},
			statusClick(index,item) {
				this.statusClass = index;
				this.status = item.id;
				this.screenShow = false;
				this.getAppointmentList(true);
			},
			getAppointmentList(bl) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				if (bl) {
					this.appointmentList = [];
					this.pageIndex = 1;
				}
				myApi.merchantAppointmentList({
					pageIndex: this.pageIndex,
					status: this.status
				}).then((res) => {
					uni.hideLoading();
					
					this.appointmentList = [
						...this.appointmentList,
						...res.data.data
					];
					this.recordsTotal = res.data.recordsTotal;
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			myLoadmore() {
				this.pageIndex += 1;
				this.getAppointmentList()
			},
			sureClick(item) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				myApi.merchantChangeStatus({
					id: item.id,
					status: '1'
				}).then((res) => {
					uni.hideLoading();
					this.getAppointmentList(true);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
			refuseClick(item) {
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				myApi.merchantChangeStatus({
					id: item.id,
					status: '4'
				}).then((res) => {
					uni.hideLoading();
					this.getAppointmentList(true);
				}).catch(error => {
					uni.showToast({
						title: error,
						icon: "none"
					})
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.preference {
		background-color: #ffffff;
		left: 0rpx;
		position: absolute
	
	}
	.preference_group_item {
		padding: 15rpx;
		text-align: center;
		color: #777777;
	}
	.active {
		color: #00B962;
	}
	.preference_group {
		padding-bottom: 20rpx;
	}
	.content-s{
		height: 200px;
		overflow-y:scroll;
	}
	page{
		padding-bottom: 155px;
	}
	.screen {
		margin-left: 85.3%;
		color: rgba(119, 119, 119, 100);
		font-size: 12px
	}

	.btn {
		width: 60px;
		height: 24px;
		line-height: 20px;
		border-radius: 4px;
		background-color: rgba(255, 255, 255, 100);
		font-size: 14px;
		text-align: center;
		float: right;
		margin-right: 24px;
		margin-top: 12px;
	}
// 待确认按钮
	.toBe-confirmed {

		color: rgba(78, 141, 246, 100);
		border: 1px solid rgba(78, 141, 246, 100);

	}
// 已确认按钮
	.confirmed {
		border: 1px solid rgba(0, 185, 98, 100);
		color: rgba(0, 185, 98, 100);

	}
// 已取消按钮
	.canceled {
		border: 1px solid rgba(153, 153, 153, 100);
		color: rgba(153, 153, 153, 100);
		;
	}
// 已过期/已完成按钮
	.have-expired,.finished{
		color: rgba(162, 169, 181, 100);
		border: 1px solid rgba(162, 169, 181, 100);
	}
	
	// 已拒绝
	.refused{
		color: rgba(255, 79, 63, 100);
		border: 1px solid rgba(255, 79, 63, 100);
	}
	.reservation-items {
		width: 100%;
		background-color: #fff;
		padding-left: 14px;
		margin-bottom: 12px;

		.station-name {
			line-height: 48px;
			color: rgba(16, 16, 16, 100);
			font-size: 20px
		}

		.details-items {
			border: 1px solid rgba(238, 242, 240, 100);
			border-left: none;
			padding-bottom: 13px;

			.items {
				display: flex;
				justify-content: space-between;
				padding: 12px 14px 0px 0;
				line-height: 20px;
			}

		}

		

		.button {
			height: 56px;
			padding: 12px 0;

			/deep/.u-btn {
				height: 32px;
				line-height: 32px;
				background-color: rgba(255, 255, 255, 100);
				color: rgba(153, 153, 153, 100);
				font-size: 16px;
				text-align: center;
				float: right;
				margin-right: 16px;
			}
      .refuse,.delete{
		  color: #999999;
	  }
		.contact,.affirm{
			color: #00b962;
		}
			

			
		}
	}
</style>