<!-- 会议室预定 -->
<template>
<div class="boardroomReserve">
<!-- 搜索框 start-->
<div class="search_box">
<group class="items">
<popup-picker style="wid
th: 14.9rem" value-text-align="left" placeholder="点击选择会议室"
:data="DepartList"
:columns="2"
v-model="value
3" ref="picker
3" show-name @on-change=&#
39;changePicker&#
39;></popup-picker>
<div class="search_circle" @click="goSearchPage" >
<img src="../../../assets/img/search_icon_blue.png" alt=""/>
<div class="search_txt">高级</div>
</div>
</group>
</div>
<!-- 搜索框 end-->
<scroller class="date-content">
<!-- 日历 start-->
<div class="mycalendar">
<inline-calendar
ref="calendar"
@on-change="onChange"
@on-view-change="onViewChange"
class="inline-calendar-demo"
:end-date="
this.endDate"
:show.sync="show"
v-model="value"
:range="range"
:show-last-mon
th="showLastMon
th"
:show-next-mon
th="showNextMon
th"
:highlight-
weekend="highlight
Weekend"
:return-six-rows="return6Rows"
:hide-header="hideHeader"
:hide-
week-list="hide
WeekList"
:replace-text-list="replaceTextList"
:weeks-list="
weeksList"
:render-function="buildSlotFn"
:disable-past="disablePast"
:disable-future="disableFuture"
:disable-
weekend="disable
Weekend">
</inline-calendar>
</div>
<!-- 日历 end-->
<!-- 显示可选时间 start 暂时先不要-->
<!-- <div class="show-time-space">
<group class="items">
<cell
is-link
:border-intent="false"
:arrow-direction="showTimeSpace ? &#
39;up&#
39;
: &#
39;down&#
39;"
@click.native="showTimeSpace = !showTimeSpace" class="selectTime-wrap">
<img src="../../../assets/img/clock-green.png" alt=""/>
<span>可选时间</span>
</cell>
<flexbox
:gutter="0" wrap="wrap" class="slide time-space"
:class="showTimeSpace?&#
39;animate&#
39;
:&#
39;&#
39;">
<flexbox-item
:span="1/2" v-for="tSpace of timeSpaceList"
:key="tSpace.index">
<div class="flex-demo txt_time">{{tSpace.startTime}}-{{tSpace.endTime}}</div>
</flexbox-item>
</flexbox>
</group>
</div> -->
<!-- 显示可选时间 end-->
<!-- 已预定列表 start-->
<div class="chosenTime">
<group class="items">
<cell class="booklist-wrap">
<img src="../../../assets/img/time.png" alt=""/>
<span>已预订列表</span>
</cell>
</group>
<div class="choosetimeList">
<group class="items choosetime">
<cell v-for="(event, index) in demoEvents"
:key = "index"
primary="content"
:title="event.startTime+&#
39;-&#
39;+event.endTime"
align-items="flex-start" >
<img class="blue-dot" src="../../../assets/img/blue-dot.png" alt=""/>
<div class="phone-wrap">
<span class="name">{{event.userId}}</span>
<span class="phone">
<img class="icon-phone" src="../../../assets/img/phone-blue.png" alt=""/><span>{{event.userPhone}}</span>
</span>
</div>
<div class="meeting-title">{{event.title}}</div>
</cell>
</group>
</div>
</div>
</scroller>
<!-- 已预定列表 end-->
<div class="bottom">
<x-button plain @click.native="goRoom" type="default" style="border-radius
:99px;">预订</x-button>
</div>
<div class="foot">
<alert v-model="show" @on-show="onShow" @on-hide="onHide">
<div class="img_box">{{bookTip}}</div>
<!-- 每次预定不超过连续72小时 -->
<p class="text_message">
<a href="javascript
:;" class="confirmCenter" @click="onHide">确认</a>
</p>
</alert>
</div>
</div>
</template>
<script>
// import Calendar from &#
39;./base/CCalendar.vue&#
39;
import axios from &#
39;axios&#
39;
// import $ from "jquery"
import moment from &#
39;moment&#
39; // 格式化时间
import { Flexbox, FlexboxItem,Cell,CellBox,Group,Datetime, PopupPicker,Picker,XInput,XButton, InlineCalendar,Radio,Alert } from &#
39;vux&#
39;
let selectTime = &#
39;&#
39; // 选中的时间变量
let selectRoom = &#
39;&#
39; // 选中的会议室
let selectArea = &#
39;&#
39; // 选中的地区
export default {
// components
: {
// calendar
: Calendar
// },
data () {
return {
show
: true,
value
: &#
39;&#
39;,
listValue
: &#
39;&#
39;,
range
: false,
showLastMon
th: true,
showNextMon
th: true,
highlight
Weekend
: false,
return6Rows
: true,
hideHeader
: false,
hide
WeekList
: false,
replaceTextList
: {},
replace
: false,
change
WeeksList
: false,
weeksList
: [],
useCustomFn
: false,
buildSlotFn
: () => &#
39;&#
39;,
disablePast
: true,
disableFuture
: false,
disable
Weekend
: false,
showTimeSpace
:false,
value
3: [],
endDate
:&#
39;&#
39;,
startTime
: &#
39;&#
39;,
endTime
: &#
39;&#
39;,
demoEvents
: [],// 预定列表
selectArea
: &#
39;&#
39;,// 选中的地区
selectRoom
: &#
39;&#
39;,// 选中的会议室
DepartList
: [],// 地区列表
MeetingRoomList
: [],// 会议室列表
show
:false,
bookTip
:&#
39;&#
39;//预定失败提示信息
}
},
components
: {
Flexbox,
FlexboxItem,
Cell,
CellBox,
Group,
Datetime,
PopupPicker,
Picker,
XInput,
XButton,
InlineCalendar,
Radio,
Alert
},
beforeMount (to,from, next){
window.com.setTitle(&#
39;预订会议室&#
39;)
},
computed
: {
sporsorTitle
: {
get () {
return
this.$store.state.form.sporsorTitle
},
set (val) {
this.$store.dispatch(&#
39;FORM_SporsorTitle&#
39;,val)
}
},
sporsorType
: {
get () {
return
this.$store.state.form.sporsorType
},
set (val) {
this.$store.dispatch(&#
39;FORM_SporsorType&#
39;,val)
}
},
conferRoomId
: {
get () {
return
this.$store.state.form.conferRoomId
},
set (val) {
this.$store.dispatch(&#
39;FORM_ConferRoomId&#
39;,val)
}
},
flagUpSporsor
: {
get () {
return
this.$store.state.form.flagUpSporsor
},
set (val) {
this.$store.dispatch(&#
39;FORM_FlagUpSporsor&#
39;,val)
}
},
sporsorId
: {
get () {
return
this.$store.state.form.sporsorId
},
set (val) {
this.$store.dispatch(&#
39;FORM_SporsorId&#
39;,val)
}
}
},
watch
: {
replace (val) {
this.replaceTextList = val ? {
&#
39;TODAY&#
39;
: &#
39;今&#
39;
}
: {}
},
useCustomFn (val) {
this.buildSlotFn = val ? (line, index, data) => {
return /8/.test(data.date) ? &#
39;<div style="font-size
:12px;text-align
:center;"><span style="display
:inline-block;wid
th:5px;height
:5px;background-color
:red;border-radius
:50%;"></span></div>&#
39;
: &#
39;<div style="height
:19px;"></div>&#
39;
}
: () => &#
39;&#
39;
},
change
WeeksList (val) {
this.
weeksList = val ? [&#
39;日&#
39;, &#
39;一&#
39;, &#
39;二&#
39;, &#
39;三&#
39;, &#
39;四&#
39;, &#
39;五&#
39;, &#
39;六 &#
39;]
: [&#
39;Su&#
39;, &#
39;Mo&#
39;, &#
39;Tu&#
39;, &#
39;We&#
39;, &#
39;
Th&#
39;, &#
39;Fr&#
39;, &#
39;Sa&#
39;]
}
},
me
thods
: {
onHide () {
this.show=false;
},
onShow () {
this.show=true;
},
//会议地点改变
changePicker() {
var urlPa
th = &#
39;&#
39;
if(
this.value != &#
39;&#
39;) {
urlPa
th = config.serverUrl + &#
39;/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId=&#
39;+
this.value
3[1]+&#
39;&orderDate=&#
39;+
this.value
} else {
let date = new Date
let nowDate = moment(date).format(&#
39;YYYY-MM-DD&#
39;)
urlPa
th = config.serverUrl + &#
39;/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId=&#
39;+
this.value
3[1]+&#
39;&orderDate=&#
39;+nowDate
}
// console.log(&#
39;urlPa
th:&#
39;+urlPa
th)
axios.get(urlPa
th).
then((data) => {
var temp = data.data
if(temp.code === &#
39;0&#
39;) {
var opArry = []
for(var i in temp.data) {
temp.data[i].userPhone=temp.data[i].userPhone==&#
39;&#
39;?&#
39;无&#
39;
:temp.data[i].userPhone
temp.data[i].title=temp.data[i].title==null?&#
39;无&#
39;
:temp.data[i].title
opArry.push({
userId
:temp.data[i].userId,
title
:temp.data[i].title,
startTime
:moment(temp.data[i].startTime).format(&#
39;HH
:mm&#
39;),
endTime
:moment(temp.data[i].endTime).format(&#
39;HH
:mm&#
39;),
userPhone
:temp.data[i].userPhone
});
}
this.demoEvents = opArry
} else {
this.bookTip = &#
39;获取列表失败&#
39;
this.show = true;
// app.toast("获取列表失败!")
}
});
},
onViewChange (val, count) {
// alert(&#
39;on view change
:&#
39;+val + &#
39;,&#
39; + count)
},
onChange (val) {
selectTime = val
if(
this.value
3[1] != undefined) {
// console.log(&#
39;url
:&#
39; + config.serverUrl + &#
39;/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId=&#
39;+
this.value
3[1]+&#
39;&orderDate=&#
39;+selectTime)
axios.get(config.serverUrl + &#
39;/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId=&#
39;+
this.value
3[1]+&#
39;&orderDate=&#
39;+selectTime).
then((data) => {
var temp = data.data
if(temp.code === &#
39;0&#
39;) {
var opArry = []
for(var i in temp.data) {
temp.data[i].userPhone=temp.data[i].userPhone==&#
39;&#
39;?&#
39;无&#
39;
:temp.data[i].userPhone
temp.data[i].title=temp.data[i].title==null?&#
39;无&#
39;
:temp.data[i].title
opArry.push({
userId
:temp.data[i].userId,
title
:temp.data[i].title,
startTime
:moment(temp.data[i].startTime).format(&#
39;HH
:mm&#
39;),
endTime
:moment(temp.data[i].endTime).format(&#
39;HH
:mm&#
39;),
userPhone
:temp.data[i].userPhone
});
}
this.demoEvents = opArry
} else {
this.bookTip = &#
39;获取列表失败&#
39;
this.show = true;
// app.toast("获取列表失败!")
}
});
}
},
chooseDepartment (paramkey) { // 根据地区编号获取会议室列表
selectArea = paramkey
axios.get(config.serverUrl + &#
39;/microinformation/zy/mi/obtainConferenceroomListByAreaId?areaId=&#
39;+paramkey).
then((data) => {
var temp = data.data
if(temp.code === &#
39;0&#
39;) {
this.MeetingRoomList = temp.data
} else {
this.bookTip = &#
39;获取会议室列表失败&#
39;
this.show = true;
// app.toast(&#
39;获取会议室列表！&#
39;)
}
});
},
chooseBookingRoom (eventroomId) { //根据会议室编号和选定日期获取预定列表
selectRoom = eventroomId
if(selectTime === &#
39;&#
39;) {// 选定了会议室，没选定日期
let date = new Date
let nowDate = moment(date).format(&#
39;YYYY-MM-DD&#
39;)
axios.get(config.serverUrl + &#
39;/microinformation/zy/mi/obtainConferenceroomOrderList?conferenceroomId=&#
39;+eventroomId+&#
39;&orderDate=&#
39;+nowDate).
then((data) => {
var temp = data.data
if(temp.code === &#
39;0&#
39;) {
var opArry = []
for(var i in temp.data) {
// var ss = &#
39;&#
39;
// if(temp.data[i].stateShow == &#
39;1&#
39;) {
// ss = &#
39;进行中&#
39;
// } else if(temp.data[i].stateShow == &#
39;2&#
39;) {
// ss = &#
39;正常&#
39;
// }
temp.data[i].userPhone=temp.data[i].userPhone==&#
39;&#
39;?&#
39;无&#
39;
:temp.data[i].userPhone
temp.data[i].title=temp.data[i].title==null?&#
39;无&#
39;
:temp.data[i].title
opArry.push({userName
:temp.data[i].userName,
userPhone
:temp.data[i].userPhone,
// stateShow
:ss,// 状态
title
:temp.data[i].title,
startTime
:moment(temp.data[i].startTime).format(&#
39;HH
:mm&#
39;),
endTime
:moment(temp.data[i].endTime).format(&#
39;HH
:mm&#
39;)
});
}
this.demoEvents = opArry
} else {
this.bookTip = &#
39;获取会议室列表失败&#
39;
this.show = true;
// app.toast(&#
39;获取会议室失败！&#
39;)
}
});
} else {// 选定了会议室，选定日期
// alert("value
: " + obj.value + &#
39;,selectTime
:&#
39; + selectTime)
}
},
//跳转到会议室预定
goRoom () {
var choice_time = &#
39;&#
39;
if(
this.value != &#
39;&#
39;) {
var dateObj = new Date()
choice_time =
this.value + &#
39; &#
39; + dateObj.ge
tHours()
} else {
let date = new Date
let nowDate = moment(date).format(&#
39;YYYY-MM-DD HH&#
39;)
choice_time = nowDate
}
var timeString = moment(window.com.convertDateFromStrings(choice_time + &#
39;
:00
:00&#
39;)).format(&#
39;YYYY-MM-DD HH
:mm&#
39;)
if(
this.value
3.leng
th != 0) {
this.$router.push({pa
th:&#
39;bookingRoom&#
39;,query
:{roomId
:this.value
3[1],conferenceRoomId
:this.$route.query.conferenceRoomId,timeStart
:timeString,timeEnd
:timeString}})
} else {
this.bookTip = &#
39;请点击选择会议室&#
39;
this.show = true;
// app.toast(&#
39;请选择会议室！&#
39;)
}
},
//跳到高级搜索
goSearchPage
: function() {
this.$router.push({pa
th:&#
39;conferenceRoomSearch&#
39;})
}
},
mounted () {
let dq=new Date();
let dqtime=dq.getFullYear()+&#
39;-&#
39;+(dq.getMon
th()+2)+&#
39;-&#
39;+dq.getDate();
this.endDate=dqtime;
if(window.localStorage.getItem(&#
39;userId&#
39;) != null && window.localStorage.getItem(&#
39;userId&#
39;) != undefined) {
// 获取地区和会议室名称数据
// console.log(&#
39;url
:&#
39;+config.serverUrl + &#
39;/microinformation/zy/mi/obtainAreaAndConferenceroomList&#
39;)
axios.get(config.serverUrl + &#
39;/microinformation/zy/mi/obtainAreaAndConferenceroomList&#
39;).
then((data) => {
var temp = data.data
if(temp.code === &#
39;0&#
39;) {
this.DepartList = temp.data
} else {
this.bookTip = &#
39;获取地区列表失败&#
39;
this.show = true;
// app.toast(&#
39;获取地区列表失败！&#
39;)
}
});
} else {
window.location.href = "http
://dwz.cn/1IooUbPb"
}
}
}
</script>
<style lang="less" src="./booking.less"></style> 这块代码我需要优化一个功能点，即如9
:00-18
:00之间会议室有空闲时间的就在日期底部显示一个小绿点
本文介绍如何使用百度地图API创建地图应用，包括获取Key密钥和调用地图的基本步骤。
扫一扫
827
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
