商户被预约

apis/my.js

@@ -66,5 +66,36 @@ export function helpCenterList() {
 	
 		url: '/mobile/passengerApi/helpCenterList'
 	})
-}
+}
+
+export function merchantAppointmentList(data) {
+
+	return request({
+		jp_identity:"merchantUser",// 分润接口
+		method: 'get',
+		data: data,
+		url: '/mobile/chargingAppointment/merchantAppointmentList'
+	})
+}
+
+export function merchantAppointmentDetail(id) {
+
+	return request({
+		jp_identity:"merchantUser",// 分润接口
+		method: 'get',
+		data: {
+			id:id
+		},
+		url: '/mobile/chargingAppointment/merchantAppointmentDetail'
+	})
+}
 
+export function merchantChangeStatus(data) {
+
+	return request({
+		jp_identity:"merchantUser",// 分润接口
+		method: 'get',
+		data: data,
+		url: '/mobile/chargingAppointment/merchantChangeStatus'
+	})
+}

pagesFinance/preengaged/preengaged.vue

@@ -1,122 +1,60 @@
 <template>
 	<view>
 		<u-navbar title="我被预约">
-			<view class="screen">筛选</view>
+			<view class="screen" @click="screenClick">筛选</view>
 		</u-navbar>
-		<view class="reservation-items">
-			<view class="station-name">
-				预约30分钟后充电
-				<view class="toBe-confirmed btn">
-					待确认
-				</view>
-			</view>
-			<view class="details-items">
-				<view class="items">
-					<view class="items-name">
-						预留截止时间
-
-					</view>
-					<view class="items-content">
-						2022-05-31 09:30:00
-						
+		<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 class="items">
-					<view class="items-name">
-					
-						预计充电时长
-					
-					</view>
-					<view class="items-content">
-						
-						6小时
-						
-					</view>
-				</view>
-				<view class="items">
-					<view class="items-name">
-						
-						预约站点
-						
-					</view>
-					<view class="items-content">
-						荆鹏充电站
-					</view>
-				</view>
-				<view class="items">
-					<view class="items-name">
-						
-						预约桩号
-					</view>
-					<view class="items-content">
-						1号快充桩
-					</view>
-				</view>
-				<view class="items">
-					<view class="items-name">
-						充电桩类型
-					</view>
-					<view class="items-content">
-						交流充电桩
-					</view>
-				</view>
-				
-			</view>
-			<view class="button">
-					<u-button class="affirm" shape="circle">确认</u-button>
-					<u-button class="contact" shape="circle">联系他</u-button>
-				<u-button class="refuse" shape="circle">拒绝</u-button>
-
 			</view>
+			<u-mask :show="screenShow" @click="screenShow = false" z-index="100"></u-mask>
 		</view>
-
-		<view class="reservation-items">
+		<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">
-				预约30分钟后充电
-				<view class="confirmed btn">
-					已确认
-				</view>
+				预约{{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>
 			<view class="details-items">
 				<view class="items">
 					<view class="items-name">
 						预留截止时间
-			
 					</view>
 					<view class="items-content">
-						2022-05-31 09:30:00
-						
+						{{item.endTime}}
 					</view>
 				</view>
 				<view class="items">
-					<view class="items-name">
-					
+					<view class="items-name">				
 						预计充电时长
-					
 					</view>
 					<view class="items-content">
-						
-						6小时
-						
+						{{item.estimateMinutes != null ? (item.estimateMinutes/60).toFixed(1)+'小时' : '0'}}
 					</view>
 				</view>
 				<view class="items">
-					<view class="items-name">
-						
+					<view class="items-name">					
 						预约站点
-						
 					</view>
 					<view class="items-content">
-						荆鹏充电站
+						{{item.stationName}}
 					</view>
 				</view>
 				<view class="items">
-					<view class="items-name">
-						
+					<view class="items-name">	
 						预约桩号
 					</view>
 					<view class="items-content">
-						1号快充桩
+						{{item.deviceName}}
 					</view>
 				</view>
 				<view class="items">
@@ -124,295 +62,173 @@
 						充电桩类型
 					</view>
 					<view class="items-content">
-						交流充电桩
+						{{item.typeText}}
 					</view>
 				</view>
-				
-			</view>
-			<view class="button">
-
-				<u-button class="contact" shape="circle">联系他</u-button>
-			
-			</view>
-		</view>
-
-
-
-		<view class="reservation-items">
-			<view class="station-name">
-				预约30分钟后充电
-				<view class="canceled btn">
-					已取消
-				</view>
-			</view>
-			<view class="details-items">
-							<view class="items">
-								<view class="items-name">
-									预留截止时间
-			
-								</view>
-								<view class="items-content">
-									2022-05-31 09:30:00
-									
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-								
-									预计充电时长
-								
-								</view>
-								<view class="items-content">
-									
-									6小时
-									
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-									
-									预约站点
-									
-								</view>
-								<view class="items-content">
-									荆鹏充电站
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-									
-									预约桩号
-								</view>
-								<view class="items-content">
-									1号快充桩
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-									充电桩类型
-								</view>
-								<view class="items-content">
-									交流充电桩
-								</view>
-							</view>
-							
-						</view>
-			<view class="button">
-
-				<u-button class="delete" shape="circle">删除</u-button>
 			</view>
-		</view>
-
-
-		<view class="reservation-items">
-			<view class="station-name">
-				预约30分钟后充电
-				<view class="have-expired btn">
-					已过期
-				</view>
+			<view class="button" v-if="item.status == '0'">
+				<u-button class="affirm" shape="circle" @click="sureClick(item)">确认</u-button>
+				<u-button class="contact" shape="circle" @click="phoneClick(item)">联系他</u-button>
+				<u-button class="refuse" shape="circle" @click="refuseClick(item)">拒绝</u-button>
 			</view>
-			<view class="details-items">
-							<view class="items">
-								<view class="items-name">
-									预留截止时间
-			
-								</view>
-								<view class="items-content">
-									2022-05-31 09:30:00
-									
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-								
-									预计充电时长
-								
-								</view>
-								<view class="items-content">
-									
-									6小时
-									
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-									
-									预约站点
-									
-								</view>
-								<view class="items-content">
-									荆鹏充电站
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-									
-									预约桩号
-								</view>
-								<view class="items-content">
-									1号快充桩
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-									充电桩类型
-								</view>
-								<view class="items-content">
-									交流充电桩
-								</view>
-							</view>
-							
-						</view>
-			<view class="button">
-				<u-button class="contact" shape="circle">联系他</u-button>
-                 <u-button class="delete" shape="circle">删除</u-button>
-				
+			<view class="button" v-if="item.status == '1'">
+				<u-button class="contact" shape="circle" @click="phoneClick(item)">联系他</u-button>
 			</view>
-		</view>
-		
-		<view class="reservation-items">
-			<view class="station-name">
-				预约30分钟后充电
-				<view class="finished btn">
-					已完成
-				</view>
+			<view class="button" v-if="item.status == '3'">
+				<!-- <u-button class="delete" shape="circle" @click="deleteClick(item)">删除</u-button> -->
 			</view>
-			<view class="details-items">
-							<view class="items">
-								<view class="items-name">
-									预留截止时间
-			
-								</view>
-								<view class="items-content">
-									2022-05-31 09:30:00
-									
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-								
-									预计充电时长
-								
-								</view>
-								<view class="items-content">
-									
-									6小时
-									
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-									
-									预约站点
-									
-								</view>
-								<view class="items-content">
-									荆鹏充电站
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-									
-									预约桩号
-								</view>
-								<view class="items-content">
-									1号快充桩
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-									充电桩类型
-								</view>
-								<view class="items-content">
-									交流充电桩
-								</view>
-							</view>
-							
-						</view>
-			<view class="button">
-				<u-button class="contact" shape="circle">联系他</u-button>
+			<view class="button" v-if="item.status == '9'">
+				<u-button class="contact" shape="circle" @click="phoneClick(item)">联系他</u-button>
+			  <!-- <u-button class="delete" shape="circle" @click="deleteClick(item)">删除</u-button>	 -->
 			</view>
-		</view>
-		
-		<view class="reservation-items">
-			<view class="station-name">
-				预约30分钟后充电
-				<view class="refused btn">
-					已拒绝
-				</view>
+			<view class="button" v-if="item.status == '2'">
+				<u-button class="contact" shape="circle" @click="phoneClick(item)">联系他</u-button>
 			</view>
-			<view class="details-items">
-							<view class="items">
-								<view class="items-name">
-									预留截止时间
-			
-								</view>
-								<view class="items-content">
-									2022-05-31 09:30:00
-									
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-								
-									预计充电时长
-								
-								</view>
-								<view class="items-content">
-									
-									6小时
-									
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-									
-									预约站点
-									
-								</view>
-								<view class="items-content">
-									荆鹏充电站
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-									
-									预约桩号
-								</view>
-								<view class="items-content">
-									1号快充桩
-								</view>
-							</view>
-							<view class="items">
-								<view class="items-name">
-									充电桩类型
-								</view>
-								<view class="items-content">
-									交流充电桩
-								</view>
-							</view>
-							
-						</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: '',
+			}
+		},
+		onReady() {
+			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"
+					})
+				})
+			},
+			phoneClick(item) {
+				uni.makePhoneCall({
+					phoneNumber: item.phone
+				});
+			},
 		}
 	}
 </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;
 	}

pagesFinance/preengaged/preengagedListDetails.vue

@@ -4,30 +4,42 @@
 
 		</u-navbar>
 		
-		<u-alert-tips type="warning"  :description="description"></u-alert-tips>
+		<u-alert-tips type="warning" v-if="detail.chargingAppointment.status == '0'" :description="description"></u-alert-tips>
 		<view class="reverse-time">
-			<view class="time">
-				预留30分钟
+			<view class="time" v-if="detail.chargingAppointment.status == '0'">
+				预留{{detail.chargingAppointment.reserveMinutes}}分钟
+			</view>
+			<view class="time" v-if="detail.chargingAppointment.status == '1'">
+				预留{{detail.chargingAppointment.reserveMinutes}}分钟
 				<view class="img-box">
-					<!-- 已确定 -->
 					<img src="../../assets/img/finished.png" alt="">
-					<!-- 已取消 -->
-					<!-- <img src="../../assets/img/canc.png" alt=""> -->
-					<!-- 已完成 -->
+				</view>
+			</view>
+			<view class="time" v-if="detail.chargingAppointment.status == '3'">
+				预留{{detail.chargingAppointment.reserveMinutes}}分钟
+				<view class="img-box">
+					<img src="../../assets/img/canc.png" alt="">
+				</view>
+			</view>
+			<view class="time" v-if="detail.chargingAppointment.status == '2'">
+				预留{{detail.chargingAppointment.reserveMinutes}}分钟
+				<view class="img-box">
 					<img src="../../assets/img/f.png" alt="">
 				</view>
 			</view>
-			<!-- 已取消/已拒绝 -->
-		<!-- 	<view class="time refused">
-				已取消
-			</view> -->
+			<view class="time refused" v-if="detail.chargingAppointment.status == '4'">
+				{{detail.chargingAppointment.statusText}}
+			</view>
+			<view class="time refused" v-if="detail.chargingAppointment.status == '9'">
+				{{detail.chargingAppointment.statusText}}
+			</view>
 			<view class="details-item">
 				<view class="item">
 					<view class="item-name">
 						预约单号
 					</view>
 					<view class="item-content">
-						0000111122223333
+						{{detail.chargingAppointment.flowNo}}
 					</view>
 				</view>
 				<view class="item">
@@ -35,9 +47,7 @@
 						预计开始充电
 					</view>
 					<view class="item-content">
-
-						2022-05-31 09:30:00
-
+						{{detail.chargingAppointment.endTime}}
 					</view>
 				</view>
 				<view class="item">
@@ -45,32 +55,31 @@
 						预计充电时长
 					</view>
 					<view class="item-content">
-						6小时
+						{{(detail.chargingAppointment.estimateMinutes/60).toFixed(2)}}
 					</view>
 				</view>
 			</view>
-
 		</view>
 		<!-- 充电桩详情 -->
 		<view class="charge-pile">
 			<view class="box">
 				<view class="name ellipsis">
-					荆鹏软件园充电站/1号快充桩
+					{{detail.chargingDevice.stationName}}/{{detail.chargingDevice.name}}
 				</view>
 				<view class="address ellipsis">
-			湖北省荆州市沙市区江津东路附155号
+					{{detail.chargingDevice.address}}
 				</view>
 				<text class="iconfont more">
 					&#xe600;
 				</text>
 			</view>
 
-			<view class="tel">
+			<view class="tel" @click="phoneClick(detail.chargingAppointment)">
 				<view class="tel-text">
 					联系电话
 				</view>
 				<view class="tel-num">
-					李先生 15100001111
+					{{detail.chargingAppointment.regUserName.slice(0,1)+'先生'}}{{" "}}{{detail.chargingAppointment.phone}}
 					<text class="iconfont more2">
 						&#xe600;
 					</text>
@@ -80,30 +89,25 @@
 				<view class="item">
 					<view class="item-name">
 						预约单生成时间
-
 					</view>
 					<view class="item-content">
-						2022-05-31 09:00:00
-
+						{{detail.chargingAppointment.createTime}}
 					</view>
 				</view>
 				<view class="item">
 					<view class="item-name">
-
-						电费单价(kW/h)
-
+						电费单价
 					</view>
 					<view class="item-content">
-						1.00元
+						{{detail.price.electricityPrice }}元/度
 					</view>
 				</view>
 				<view class="item">
 					<view class="item-name">
-
-						充电服务费(kW/h)
+						充电服务费
 					</view>
 					<view class="item-content">
-						1.00元
+						{{detail.price.servicePrice }}元/度
 					</view>
 				</view>
 			</view>
@@ -111,21 +115,108 @@
 
 		<!-- 底部按钮 -->
 		<view class="bottom">
-			<u-button shape='circle' class="refuse-btn">拒绝</u-button>
-			<u-button type="success" shape='circle'>确认</u-button>
-			<!-- 删除订单按钮 -->
-			<!-- <u-button shape='circle' class="cancel-btn">删除订单</u-button> -->
+			<u-button shape='circle' class="refuse-btn" v-if="detail.chargingAppointment.status == '0'" @click="refuseClick(detail.chargingAppointment)">拒绝</u-button>
+			<u-button type="success" shape='circle' v-if="detail.chargingAppointment.status == '0'" @click="sureClick(detail.chargingAppointment)">确认</u-button>
+			<!-- <u-button shape='circle' class="cancel-btn" v-if="detail.chargingAppointment.status == '4' || detail.chargingAppointment.status == '9'">删除订单</u-button> -->
 		</view>
 	</view>
 </template>
 
 <script>
+	import * as myApi from '@/apis/my.js'
+	import {
+		hourDistanceArr,
+		currentTimeStamp,
+		parseUnixTime
+	} from '@/utils'
+	
 	export default {
 		data() {
 			return {
-				description: '等待桩主确认预约单，剩余时间04:59:59'
+				description: '等待桩主确认预约单，剩余时间04:59:59',
+				id: '',
+				detail: {},
+				estimateMinutes: '',
 			}
-		}
+		},
+		onLoad(op) {
+			if(op.id) {
+				this.id = op.id;
+				this.getAppointmentDetail();
+			}
+		},
+		methods: {
+			getAppointmentDetail() {
+				uni.showLoading({
+					title: "加载中",
+					mask: true,
+				})
+				myApi.merchantAppointmentDetail(this.id).then((res) => {
+					uni.hideLoading();
+					
+					this.detail = res.data;
+					
+					if(this.detail.chargingAppointment.status=="0"){
+						//this.description= '等待桩主确认预约单，剩余时间'
+						var data=new Date(this.detail.chargingAppointment.createTime).getTime()
+						var c=hourDistanceArr(new Date(),new Date(data+5*60*1000))
+					
+						this.description= '等待桩主确认预约单，剩余时间'+c[1]+'分'+c[2]+"秒";		
+						
+						
+						setTimeout(()=>{
+							this.getInfo(true);
+						},2000)
+					}
+				}).catch(error => {
+					uni.showToast({
+						title: error,
+						icon: "none"
+					})
+				})
+			},
+			phoneClick(item) {
+				uni.makePhoneCall({
+					phoneNumber: item.phone
+				});
+			},
+			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>