booking完善

pages/ofm/booking.vue

@@ -27,7 +27,7 @@
 			<view class="dateView">
 				<view class="viewLabel">预约时间：</view>
 				<view v-if="type=='show'">{{form.mdate}}</view>
-				<uni-datetime-picker v-else style="width: 540upx;" type="date" :clear-icon="false" v-model="form.mdate"/>
+				<uni-datetime-picker v-else style="width: 540upx;" type="date" :clear-icon="false" v-model="form.mdate" @change="mdateChange"/>
 			</view>
 			<view class="titleView">
 				<view class="viewLabel">备注：</view>
@@ -45,11 +45,11 @@
 			</view>
 			<view :class="{'amBlockHide':!showAm,'amBlock': showAm}">
 				<view v-for="(item,index) in timesListAm" :key="item.value" class="timeBlock ">
-					<view :class="{'isSelected':item.selected,'timeItem': true}" @click="timeItemClickAm(index)">{{item.label}}</view>
+					<view :class="{'isSelected':item.isSelect,'isSloted':item.sloted,'timeItem': true}" @click="timeItemClickAm(index)">{{item.label}}</view>
 				</view>
 			</view>
 			<view v-for="(item,index) in timesListPm" :key="item.value" class="timeBlock">
-				<view :class="{'isSelected':item.selected,'timeItem': true}" @click="timeItemClickPm(index)">{{item.label}}</view>
+				<view :class="{'isSelected':item.isSelect,'isSloted':item.sloted,'timeItem': true}" @click="timeItemClickPm(index)">{{item.label}}</view>
 			</view>
 		</view>
 		<view class="footerView">
@@ -80,6 +80,7 @@
 				totalCount:0,
 				pickDate:'',
 				mroomId:'',
+				type:'',
 				ticketId:null,
 				showAm:false,
 				bookingTitle:'',
@@ -100,72 +101,95 @@
 				transitions:[],
 				//凌晨0-6点
 				timesListAm:[
-					{value:0,label:'00:00-00:30',isSelect:false},
+					{value:0,label:'00:00-00:30',isSelect:false,sloted:false},
-					{value:1,label:'00:30-01:00',isSelect:false},
+					{value:1,label:'00:30-01:00',isSelect:false,sloted:false},
-					{value:2,label:'01:00-01:30',isSelect:false},
+					{value:2,label:'01:00-01:30',isSelect:false,sloted:false},
-					{value:3,label:'01:30-02:00',isSelect:false},
+					{value:3,label:'01:30-02:00',isSelect:false,sloted:false},
-					{value:4,label:'02:00-02:30',isSelect:false},
+					{value:4,label:'02:00-02:30',isSelect:false,sloted:false},
-					{value:5,label:'02:30-03:00',isSelect:false},
+					{value:5,label:'02:30-03:00',isSelect:false,sloted:false},
-					{value:6,label:'03:00-03:30',isSelect:false},
+					{value:6,label:'03:00-03:30',isSelect:false,sloted:false},
-					{value:7,label:'03:30-04:00',isSelect:false},
+					{value:7,label:'03:30-04:00',isSelect:false,sloted:false},
-					{value:8,label:'04:00-04:30',isSelect:false},
+					{value:8,label:'04:00-04:30',isSelect:false,sloted:false},
-					{value:9,label:'04:30-05:00',isSelect:false},
+					{value:9,label:'04:30-05:00',isSelect:false,sloted:false},
-					{value:10,label:'05:00-05:30',isSelect:false},
+					{value:10,label:'05:00-05:30',isSelect:false,sloted:false},
-					{value:11,label:'05:30-06:00',isSelect:false}
+					{value:11,label:'05:30-06:00',isSelect:false,sloted:false}
 				],
 				timesListPm:[
-					{value:12,label:'06:00-06:30',isSelect:false},
+					{value:12,label:'06:00-06:30',isSelect:false,sloted:false},
-					{value:13,label:'06:30-07:00',isSelect:false},
+					{value:13,label:'06:30-07:00',isSelect:false,sloted:false},
-					{value:14,label:'07:00-07:30',isSelect:false},
+					{value:14,label:'07:00-07:30',isSelect:false,sloted:false},
-					{value:15,label:'07:30-08:00',isSelect:false},
+					{value:15,label:'07:30-08:00',isSelect:false,sloted:false},
-					{value:16,label:'08:00-08:30',isSelect:false},
+					{value:16,label:'08:00-08:30',isSelect:false,sloted:false},
-					{value:17,label:'08:30-09:00',isSelect:false},
+					{value:17,label:'08:30-09:00',isSelect:false,sloted:false},
-					{value:18,label:'09:00-09:30',isSelect:false},
+					{value:18,label:'09:00-09:30',isSelect:false,sloted:false},
-					{value:19,label:'09:30-10:00',isSelect:false},
+					{value:19,label:'09:30-10:00',isSelect:false,sloted:false},
-					{value:20,label:'10:00-10:30',isSelect:false},
+					{value:20,label:'10:00-10:30',isSelect:false,sloted:false},
-					{value:21,label:'10:30-11:00',isSelect:false},
+					{value:21,label:'10:30-11:00',isSelect:false,sloted:false},
-					{value:22,label:'11:00-11:30',isSelect:false},
+					{value:22,label:'11:00-11:30',isSelect:false,sloted:false},
-					{value:23,label:'11:30-12:00',isSelect:false},
+					{value:23,label:'11:30-12:00',isSelect:false,sloted:false},
-					{value:24,label:'12:00-12:30',isSelect:false},
+					{value:24,label:'12:00-12:30',isSelect:false,sloted:false},
-					{value:25,label:'12:30-13:00',isSelect:false},
+					{value:25,label:'12:30-13:00',isSelect:false,sloted:false},
-					{value:26,label:'13:00-13:30',isSelect:false},
+					{value:26,label:'13:00-13:30',isSelect:false,sloted:false},
-					{value:27,label:'13:30-14:00',isSelect:false},
+					{value:27,label:'13:30-14:00',isSelect:false,sloted:false},
-					{value:28,label:'14:00-14:30',isSelect:false},
+					{value:28,label:'14:00-14:30',isSelect:false,sloted:false},
-					{value:29,label:'14:30-15:00',isSelect:false},
+					{value:29,label:'14:30-15:00',isSelect:false,sloted:false},
-					{value:30,label:'15:00-15:30',isSelect:false},
+					{value:30,label:'15:00-15:30',isSelect:false,sloted:false},
-					{value:31,label:'15:30-16:00',isSelect:false},
+					{value:31,label:'15:30-16:00',isSelect:false,sloted:false},
-					{value:32,label:'16:00-16:30',isSelect:false},
+					{value:32,label:'16:00-16:30',isSelect:false,sloted:false},
-					{value:33,label:'16:30-17:00',isSelect:false},
+					{value:33,label:'16:30-17:00',isSelect:false,sloted:false},
-					{value:34,label:'17:00-17:30',isSelect:false},
+					{value:34,label:'17:00-17:30',isSelect:false,sloted:false},
-					{value:35,label:'17:30-18:00',isSelect:false},
+					{value:35,label:'17:30-18:00',isSelect:false,sloted:false},
-					{value:36,label:'18:00-18:30',isSelect:false},
+					{value:36,label:'18:00-18:30',isSelect:false,sloted:false},
-					{value:37,label:'18:30-19:00',isSelect:false},
+					{value:37,label:'18:30-19:00',isSelect:false,sloted:false},
-					{value:38,label:'19:00-19:30',isSelect:false},
+					{value:38,label:'19:00-19:30',isSelect:false,sloted:false},
-					{value:39,label:'19:30-20:00',isSelect:false},
+					{value:39,label:'19:30-20:00',isSelect:false,sloted:false},
-					{value:40,label:'20:00-20:30',isSelect:false},
+					{value:40,label:'20:00-20:30',isSelect:false,sloted:false},
-					{value:41,label:'20:30-21:00',isSelect:false},
+					{value:41,label:'20:30-21:00',isSelect:false,sloted:false},
-					{value:42,label:'21:00-21:30',isSelect:false},
+					{value:42,label:'21:00-21:30',isSelect:false,sloted:false},
-					{value:43,label:'21:30-22:00',isSelect:false},
+					{value:43,label:'21:30-22:00',isSelect:false,sloted:false},
-					{value:44,label:'22:00-22:30',isSelect:false},
+					{value:44,label:'22:00-22:30',isSelect:false,sloted:false},
-					{value:45,label:'22:30-23:00',isSelect:false},
+					{value:45,label:'22:30-23:00',isSelect:false,sloted:false},
-					{value:46,label:'23:00-23:30',isSelect:false},
+					{value:46,label:'23:00-23:30',isSelect:false,sloted:false},
-					{value:47,label:'23:30-24:00',isSelect:false}
+					{value:47,label:'23:30-24:00',isSelect:false,sloted:false}
 				]
 			}
 		},
 		onLoad(options) {
 			let that = this;
 			that.form.id='';
+			that.selectList = [];
 			that.mroomId = options.mroomId;
 			that.getmRooms();
+			if(options.item){
+				let bookingItem = JSON.parse(options.item);
+				that.form = Object.assign({},bookingItem);
+				that.ticketId = that.form.ticket;
 				that.getTransitions();
-			console.log('options',options)
+			}else{
-			console.log(uni.getStorageSync('userInfo'))
+				that.getTransitions();
+			}
+			if(options.slots){
+				 that.form.slots = [];
+				let slots = options.slots.split(',');
+				if(slots.length>0){
+					slots.forEach(item=>{
+						let slot = Number(item);
+						that.form.slots.push(slot);
+						if(slot<12){
+							that.timesListAm[slot].isSelect = true;
+							that.selectList.push(that.timesListAm[slot])
+						}else{
+							that.timesListPm[slot].isSelect = true;
+							that.selectList.push(that.timesListPm[slot])
+						}
+					})
+					that.totalCount = slots.length*0.5;
+				}
+			}
 		},
 		methods:{
 			getTransitions(){
 				let that = this;
-				console.log('getTransitions')
 				if(that.ticketId!==null){
 					that.$api.getTransition(that.ticketId).then(res=>{
 						that.transitions = res;
@@ -197,24 +221,33 @@
 				this.showAm = !this.showAm;
 			},
 			timeItemClickAm(index){
-				this.timesListAm[index].selected = !this.timesListAm[index].selected;
+				if(this.timesListPm[index].sloted){
+					
+				}else{
+					this.timesListAm[index].isSelect = !this.timesListAm[index].isSelect;
 					this.clickItems();
+				}
 			},
 			timeItemClickPm(index){
-				this.timesListPm[index].selected = !this.timesListPm[index].selected;
+				if(this.timesListPm[index].sloted){
+					
+				}else{
+					this.timesListPm[index].isSelect = !this.timesListPm[index].isSelect;
 					this.clickItems();
+				}
 			},
 			clickItems(){
 				let that = this;
+				that.selectList = [];
 				let lists = [],slots=[];
 				that.timesListAm.forEach(item=>{
-					if(item.selected){
+					if(item.isSelect){
 						lists.push(item)
 						slots.push(item.value);
 					}
 				})
 				that.timesListPm.forEach(item2=>{
-					if(item2.selected){
+					if(item2.isSelect){
 						lists.push(item2)
 						slots.push(item2.value);
 					}
@@ -225,13 +258,45 @@
 					that.form.slots = slots;
 				},500)
 			},
+			//选择会议室和日期后查询有无预定
 			bindPickerChange(e) {
 				this.form.mroom = e.detail.value;
 				this.index = e.detail.value;
+				if(this.form.mdate!==''&&this.form.mdate!==null){
+					this.getmRoomSlot();
+				}
 			},
+			mdateChange(){
+				if(this.form.mroom!==''&&this.form.mroom!==null){
+					this.getmRoomSlot();
+				}
+			},
+			getmRoomSlot(){
+				let that = this;
+				let form = {};
+				form.page = 0;
+				form.mroom = that.form.mroom;
+				form.mdate = that.form.mdate;
+				that.timesListAm.forEach(slot=>{
+					slot.sloted = false;
+				})
+				that.timesListPm.forEach(slot=>{
+					slot.sloted = false;
+				})
+				that.$api.bookingSlot(form).then(res=>{
+					res.forEach(item=>{
+						if(item.slot<12){
+							that.timesListAm[item.slot].sloted = true;
+						}else{
+							that.timesListPm[item.slot].sloted = true;
+						}
+						
+					})
+				})
+			},
+			//选择会议室和日期后查询有无预定
 			submit(id){
 				let that = this;
-				console.log('that.form',that.form)
 				if(that.form.id == "") {
 					that.$api.bookingCreate(that.form).then(res=>{
 						that.form.id = res.id;
@@ -342,11 +407,13 @@
 		background-color: #b9f0cb;
 		border: 1upx solid #eeeeee;
 	}
-	.timeItem.notCanSelect{
-		background-color: #ff8888;
-	}
 	.timeItem.isSelected{
-		background-color: #ffce88
+		background-color: #00a870;
+		color: #fff;
+	}
+	.timeItem.isSloted{
+		background-color: #fac275!important;
+		  color: #fff;
 	}
 	.footerView{
 		box-sizing: border-box;
@@ -358,5 +425,6 @@
 	}
 	.buttonSure{
 		margin-top: 10upx;
+		margin-right: 10upx;
 	}
 </style>

pages/ofm/bookingRecord.vue

@@ -1,6 +1,6 @@
 <template>
 	<view class="container">
-		 <uni-list v-for="item in dataList" class="uniListItem">
+		 <uni-list v-for="item in dataList" class="uniListItem" @click="itemClick(item)">
 			 <!-- #169316 -->
 			 <uni-icons v-if="item.state==2" custom-prefix="iconfont" color="#ea7878" type="icon-yijieshu4" size="35" class="stateIcon yiwancheng"></uni-icons>
 			 <uni-icons v-if="item.state==1" custom-prefix="iconfont" color="#659fed" type="icon-jinhangzhong" size="35" class="stateIcon"></uni-icons>
@@ -8,14 +8,7 @@
 		 	<uni-list-item :title="item.title" :note="'预约时间：'+item.mdate" :rightText="item.mroom_name" >
 				<text>预约时间段;</text>
 			</uni-list-item>
-			
 		</uni-list>
-		<!-- <uni-list-chat  v-for="item in dataList" :title="item.meetingName"  note="您收到一条新的消息" time="2020-02-02 20:20" >
-			<view class="chat-custom-right">
-				<text class="chat-custom-text">刚刚</text>
-				<uni-icons type="star-filled" color="#999" size="18"></uni-icons>
-			</view>
-		</uni-list-chat> -->
 	</view>
 </template>
 
@@ -32,6 +25,12 @@
 			this.getlistData();
 		},
 		methods:{
+			itemClick(item){
+				let itemJson = JSON.stringify(item);
+				uni.navigateTo({
+					url:'/pages/ofm/booking?item='+itemJson+'&slots='+item.slots,
+				})
+			},
 			getlistData(){
 				let that = this;
 				that.$api.bookingList({page:that.page,page_size:that.page_size}).then(res=>{

utils/api.js

@@ -22,4 +22,5 @@ export default {
 	bookingCreate:(data) => http(`/ofm/mroombooking/`, 'POST', data),
 	bookingUpdate:(id,data) => http(`/ofm/mroombooking/${id}/`, 'PUT', data),
 	bookingDelete:(id) => http(`/ofm/mroombooking/${id}/`, 'DELETE'),
+	bookingSlot:(data) => http(`/ofm/mroomslot/`, 'GET' , data),
 }