<template>
|
<view class="container">
|
<!-- 自定义头部 -->
|
<navigation Title="智能会议室"></navigation>
|
<you-scroll ref="scroll" @onPullDown="onPullDown" @More="More">
|
<!-- 通知公告 -->
|
<view class="container_a" @click="jump">
|
<view class="container_a_left">
|
<image src="@/static/icon/home_ic_notice@2x.png" mode="widthFix"></image>
|
</view>
|
<view class="container_a_right">
|
<text>{{news.title}}</text>
|
<text>{{news.createDate ? news.createDate.substring(0, 10) : ''}}</text>
|
</view>
|
</view>
|
|
<!-- 展位 -->
|
<view class="zw"></view>
|
|
<!-- 日历 -->
|
<view class="container_b">
|
<Calendar
|
ref="Calendar"
|
:currentTime='currentTime1'
|
:mark='mark'
|
:showLunar="false"
|
@dayChange='dayChange'
|
@monthChange='monthChange'
|
:rangeMode='false'
|
:maskColor="'#ffffff'"
|
:dateStart='dateStart'
|
:dateEnd='dateEnd'
|
:canDrag='false'>
|
</Calendar>
|
</view>
|
|
<!-- 今日会议 -->
|
<view class="container_c">
|
<view class="container_c_head">
|
<view class="container_c_head_left">
|
<view class="container_c_head_left_h"></view>
|
<text>当日会议</text>
|
</view>
|
<view class="container_c_head_right" @click="show = true">
|
<text>{{roomName.length > 10 ? roomName.substring(0, 8) + '...' : roomName}}</text>
|
<image src="@/static/icon/ar_open@2x.png" mode="widthFix"></image>
|
</view>
|
</view>
|
<view class="container_c_list" v-if="list && list.length > 0">
|
<view class="container_c_list_item" v-for="(item, index) in list" :key="index" @click="jumpRoom(item.id)">
|
<view class="top">
|
<view class="top_left">
|
{{item.meetingName}}
|
</view>
|
<view class="top_right" v-if="getDay === item.meetingDate && item.meetingStatus === 1">
|
即将开始
|
</view>
|
<view class="top_right" v-else-if="getDay !== item.meetingDate && item.meetingStatus === 1">
|
未开始
|
</view>
|
<view class="top_right jx" v-else-if="item.meetingStatus === 2">
|
进行中
|
</view>
|
<view class="top_right des" v-else-if="item.meetingStatus === 3">
|
已结束
|
</view>
|
</view>
|
<view class="item_zw"></view>
|
<view class="item_info">
|
<view class="item_info_label">会议时间：</view>
|
<view class="item_info_content">{{item.meetingTime}}</view>
|
</view>
|
<view class="item_info">
|
<view class="item_info_label">会议室：</view>
|
<view class="item_info_content">{{item.roomName}}</view>
|
</view>
|
<view class="item_info">
|
<view class="item_info_label">预约人：</view>
|
<view class="item_info_content">{{item.bookingUser}}</view>
|
</view>
|
</view>
|
</view>
|
<view class="container_c_list" v-else>
|
<view class="container_c_list_wu">
|
<image src="@/static/common/364.png" mode="widthFix"></image>
|
</view>
|
</view>
|
</view>
|
</you-scroll>
|
|
|
<!-- 会议选择 -->
|
<u-picker :show="show" @cancel="show = false" keyName="name" @confirm="confirm" :columns="columns"></u-picker>
|
|
<!-- 底部导航 -->
|
<Tabbar :current="'0'"></Tabbar>
|
</view>
|
</template>
|
|
<script>
|
import youScroll from '@/components/you-scroll'
|
import Calendar from '@/components/Li-Calendar/Li-Calendar.vue';
|
import { getDay } from '@/utils/utils.js'
|
export default {
|
data() {
|
return {
|
show: false,
|
columns: [],
|
mark: [],
|
currentTime: '',
|
currentTime1: '',
|
title: 'Hello',
|
dateStart: '1999-05-01',
|
dateEnd: '2999-06-15',
|
roomName: '全部会议室',
|
roomId: '',
|
|
page: 0,
|
next: false,
|
list: [],
|
|
news: []
|
}
|
},
|
components: { Calendar, youScroll },
|
onLoad() {
|
this.page = 0
|
this.next = false
|
this.list = []
|
this.mark = []
|
this.columns = []
|
this.currentTime = getDay().date
|
this.currentTime1 = getDay().date
|
this.$refs.Calendar.currentSelectTime = getDay().day
|
this.getRoom()
|
this.getNews()
|
this.getRoomList()
|
this.getDateNum()
|
},
|
onReachBottom(){
|
this.getRoomList()
|
},
|
methods: {
|
async onPullDown(done) {
|
this.page = 0
|
this.next = false
|
this.list = []
|
this.mark = []
|
this.columns = []
|
this.currentTime = getDay().date
|
this.currentTime1 = getDay().date
|
this.$refs.Calendar.currentSelectTime = getDay().day
|
await this.getRoom()
|
await this.getNews()
|
await this.getRoomList()
|
await this.getDateNum()
|
await done()
|
},
|
jumpRoom(id) {
|
uni.navigateTo({
|
url: `/packagesMine/meetingDetails/meetingDetails?id=${id}`
|
});
|
},
|
// 获取某月预约日期
|
getDateNum() {
|
console.log('substring', this.currentTime1)
|
this.mark = []
|
this.$u.api.monthMeeting({
|
yearMonth: this.currentTime1.substring(0, 7)
|
}).then(res => {
|
res.data.forEach(item => {
|
// let day = new Date(getDay().date).getTime()
|
// let date = new Date(item.monthDate).getTime()
|
// date >= day &&
|
if (item.meetingNum > 0) {
|
this.mark.push({
|
time: item.monthDate,
|
markPoint: true,
|
pointText: item.meetingNum
|
})
|
}
|
})
|
})
|
},
|
getNews() {
|
this.$u.api.findNewNotice({})
|
.then(res => {
|
if (res.data) {
|
this.news = res.data
|
}
|
})
|
},
|
getRoomList() {
|
if (!this.next) {
|
this.page = this.page + 1
|
this.$u.api.myMeetingPage({
|
capacity: 10,
|
page: this.page,
|
model: {
|
queryDate: this.currentTime,
|
roomsId: this.roomId,
|
queryType: 1
|
}
|
}).then(res => {
|
if (res.data.records.length > 0) {
|
this.list = [...this.list, ...res.data.records]
|
}
|
if (res.data.records.length < 10) {
|
this.next = true
|
}
|
})
|
}
|
},
|
jump() {
|
uni.navigateTo({
|
url: '/packagesMine/notice/notice'
|
});
|
},
|
getRoom() {
|
this.$u.api.roomsList({})
|
.then(res => {
|
let room = []
|
room = res.data
|
room.unshift({ name: '全部会议室', id: '' })
|
this.columns.push(res.data)
|
})
|
},
|
confirm(e) {
|
this.roomName = e.value[0].name
|
this.roomId = e.value[0].id
|
this.show = false
|
this.list = []
|
this.page = 0
|
this.next = false
|
this.getRoomList()
|
},
|
// 点击某天
|
dayChange(data){
|
console.log(data)
|
let date = data.time
|
let yyyy = data.time.substring(0, 4)
|
let mm = Number(data.time.substring(data.time.indexOf('-') + 1, data.time.lastIndexOf('-')))
|
let dd = Number(data.time.substring(data.time.lastIndexOf('-') + 1, data.time.length))
|
mm = mm < 10 ? `0${mm}` : mm
|
dd = dd < 10 ? `0${dd}` : dd
|
let riqi = `${yyyy}-${mm}-${dd}`
|
this.currentTime = riqi
|
this.list = []
|
this.next = false
|
this.page = 0
|
this.getRoomList()
|
},
|
// 下一月
|
monthChange(data){
|
let date = data.date.replace(/[/]/g, '-')
|
let yyyy = date.substring(0, 4)
|
let mm = Number(date.substring(date.indexOf('-') + 1, date.lastIndexOf('-')))
|
let dd = Number(date.substring(date.lastIndexOf('-') + 1, date.length))
|
mm = mm < 10 ? `0${mm}` : mm
|
dd = dd < 10 ? `0${dd}` : dd
|
let riqi = `${yyyy}-${mm}-${dd}`
|
console.log('日期', riqi)
|
this.currentTime1 = riqi
|
this.getDateNum()
|
},
|
setRangeMode(){
|
this.rangeMode = !this.rangeMode;
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.container {
|
width: 100%;
|
background-color: #fff;
|
.container_a {
|
width: 100%;
|
height: 80rpx;
|
background: #FFFFFF;
|
display: flex;
|
align-items: center;
|
padding: 0 30rpx;
|
box-sizing: border-box;
|
.container_a_left {
|
width: 40rpx;
|
height: 40rpx;
|
flex-shrink: 0;
|
margin-right: 20rpx;
|
image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
.container_a_right {
|
flex: 1;
|
height: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
flex-wrap: wrap;
|
text {
|
&:first-child {
|
width: 400rpx;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
&:last-child {
|
flex-shrink: 0;
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
}
|
}
|
}
|
}
|
.zw {
|
width: 100%;
|
height: 20rpx;
|
background: #F7F7F7;
|
}
|
.container_b {
|
width: 100%;
|
padding: 30rpx;
|
background: #FFFFFF;
|
padding-top: 20rpx;
|
box-sizing: border-box;
|
}
|
.container_c {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
background-color: #F7F7F7;
|
.container_c_head {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.container_c_head_left {
|
display: flex;
|
align-items: center;
|
.container_c_head_left_h {
|
width: 6rpx;
|
height: 32rpx;
|
background: #0055FF;
|
border-radius: 4rpx;
|
margin-right: 16rpx;
|
}
|
text {
|
font-size: 32rpx;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #222222;
|
}
|
}
|
.container_c_head_right {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
// width: 200rpx;
|
padding: 0 20rpx;
|
box-sizing: border-box;
|
height: 52rpx;
|
background: #FFFFFF;
|
border-radius: 26rpx;
|
border: 2rpx solid #EEEEEE;
|
box-sizing: border-box;
|
text {
|
font-size: 24rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
margin-right: 22rpx;
|
}
|
image {
|
width: 20rpx;
|
height: 10rpx;
|
}
|
}
|
}
|
.container_c_list {
|
width: 100%;
|
margin-top: 32rpx;
|
display: flex;
|
flex-direction: column;
|
.container_c_list_wu {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-top: 50rpx;
|
image {
|
width: 340rpx;
|
height: 364rpx;
|
}
|
}
|
.container_c_list_item {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
margin-bottom: 20rpx;
|
.top {
|
width: 100%;
|
height: 50rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.top_left {
|
flex: 1;
|
overflow: hidden;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
font-size: 32rpx;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #222222;
|
}
|
.des {
|
color: #999999 !important;
|
border: 2rpx solid #999999 !important;
|
}
|
.jx {
|
color: #F62710 !important;
|
border: 2rpx solid #F62710 !important;
|
}
|
.top_right {
|
flex-shrink: 0;
|
margin-left: 20rpx;
|
// width: 104rpx;
|
padding: 4rpx 8rpx;
|
// height: 38rpx;
|
border-radius: 4rpx;
|
border: 2rpx solid #0055FF;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
font-size: 22rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #0055FF;
|
}
|
}
|
.item_zw {
|
width: 100%;
|
height: 2rpx;
|
background-color: #E5E5E5;
|
margin: 28rpx 0 30rpx 0;
|
}
|
.item_info {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 24rpx;
|
&:first-child {
|
margin-top: 0 !important;
|
}
|
.item_info_label {
|
flex-shrink: 0;
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
}
|
.item_info_content {
|
flex: 1;
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
}
|
}
|
</style>
|
