<template>
|
<view class="main_app">
|
<!-- -->
|
<!-- <uni-calendar @change="changeCalendar" :selected="selected" /> -->
|
<!-- 日历 -->
|
<view class="container_b">
|
<Calendar
|
ref="Calendar"
|
:currentTime="currentDate"
|
:mark="mark"
|
:showLunar="false"
|
@dayChange="dayChange"
|
@monthChange="monthChange"
|
:rangeMode="false"
|
:maskColor="'#ffffff'"
|
:dateStart="dateStart"
|
:dateEnd="dateEnd"
|
:canDrag="false"
|
></Calendar>
|
</view>
|
<!-- -->
|
<view class="card_list">
|
<view class="card_title">
|
<view class="name">
|
<view class="icon"></view>
|
<view class="text">今日会议</view>
|
</view>
|
<view class="meeting" @click="isShowStatus = true">
|
<view class="text mr24">{{ activeStatus.name }}</view>
|
<u-icon name="arrow-down" size="12" color="#999999" />
|
</view>
|
</view>
|
<view class="list">
|
<view class="item">
|
<view class="head">
|
<view class="name">aaaaa选型</view>
|
<view class="status">即将开始</view>
|
</view>
|
<view class="line">
|
<view class="label">会议时间：</view>
|
<view class="value">12:00-12</view>
|
</view>
|
<view class="line">
|
<view class="label">会议室：</view>
|
<view class="value">202会议室</view>
|
</view>
|
<view class="line">
|
<view class="label">预约人：</view>
|
<view class="value">杨某某</view>
|
</view>
|
<view class="line">
|
<view class="label">备注：</view>
|
<view class="value">--</view>
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<!-- -->
|
<u-picker
|
keyName="name"
|
:show="isShowStatus"
|
:columns="statusList"
|
@confirm="seletedStatus"
|
@cancel="isShowStatus = false"
|
></u-picker>
|
</view>
|
</template>
|
|
<script>
|
import Calendar from '@/components/Li-Calendar/Li-Calendar.vue'
|
import dayjs from 'dayjs'
|
import { myMeetingPage } from '@/api'
|
|
export default {
|
components: {
|
Calendar
|
},
|
data() {
|
return {
|
currentDate: '',
|
dateStart: '2024-01-01',
|
dateEnd: '2999-06-15',
|
mark: [
|
{
|
time: '2024-05-30'
|
},
|
{
|
time: '2024-05-22',
|
pointText: 'aaa',
|
pointTextColor: '#fff'
|
},
|
{
|
time: '2024-05-28',
|
text: ['111','222'],
|
pointTextColor: '#fff'
|
}
|
],
|
activeStatus: {
|
name: '全部会议室'
|
},
|
isShowStatus: false,
|
statusList: [[
|
{ name: '全部会议室', key: '' },
|
{ name: '未开始', key: '1' },
|
{ name: '已结束', key: '2' },
|
]],
|
dataList: [],
|
page: 1
|
}
|
},
|
onLoad() {
|
this.currentDate = dayjs().format('YYYY-MM-DD')
|
this.getList()
|
},
|
methods: {
|
getList() {
|
const { activeStatus } = this
|
myMeetingPage({
|
capacity: 10,
|
page: this.page,
|
model: {
|
queryDate: this.currentDate,
|
status: activeStatus.key || null,
|
// roomsId: this.roomId,
|
queryType: 1
|
}
|
}).then(res => {
|
this.dataList = res.data.records
|
})
|
},
|
handleDetail(item) {
|
uni.navigateTo({
|
// url: `/pages/staff/meetingDetail?id=${item.id}`,
|
url: `/pages/staff/meetingDetail`
|
})
|
},
|
changeCalendar(e) {
|
console.log(e)
|
},
|
// 点击某天
|
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()
|
},
|
seletedStatus(e) {
|
this.activeStatus = { ...e.value[0] }
|
this.isShowStatus = false
|
this.getList()
|
},
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #f7f7f7;
|
}
|
.main_app {
|
padding: 0;
|
background-color: #f7f7f7;
|
::v-deep .uni-calendar-item--checked {
|
background-color: $uni-color-primary;
|
border-radius: 8rpx;
|
}
|
::v-deep .uni-calendar-item--isDay-text {
|
color: $uni-color-primary;
|
}
|
::v-deep .calendar-point {
|
/* background-color: $uni-color-primary; */
|
}
|
|
::v-deep .uni-calendar-item--isDay {
|
background-color: $uni-color-primary;
|
color: #fff;
|
border-radius: 8rpx;
|
}
|
.tabs {
|
display: flex;
|
background-color: #fff;
|
.tab {
|
flex: 1;
|
height: 88rpx;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
font-size: 28rpx;
|
color: #666666;
|
position: relative;
|
.line {
|
width: 60rpx;
|
height: 4rpx;
|
background: #fff;
|
border-radius: 3rpx;
|
position: absolute;
|
bottom: 0;
|
left: 50%;
|
transform: translate(-50%, 0);
|
}
|
}
|
.active {
|
font-weight: 500;
|
font-size: 30rpx;
|
color: #222222;
|
.line {
|
background-color: $uni-color-primary;
|
}
|
}
|
}
|
//
|
.card_list {
|
padding: 30rpx;
|
.card_title {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
margin-bottom: 22rpx;
|
.name {
|
display: flex;
|
align-items: center;
|
.icon {
|
width: 6rpx;
|
height: 32rpx;
|
background: $uni-color-primary;
|
border-radius: 4rpx;
|
margin-right: 16rpx;
|
}
|
.text {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
}
|
.meeting {
|
display: flex;
|
height: 52rpx;
|
line-height: 52rpx;
|
background: #ffffff;
|
border-radius: 26rpx;
|
border: 2rpx solid #eeeeee;
|
padding: 0 24rpx;
|
.text {
|
font-size: 24rpx;
|
color: #333333;
|
}
|
}
|
}
|
.list {
|
.item {
|
padding: 0rpx 30rpx 30rpx;
|
background: #ffffff;
|
border-radius: 8rpx;
|
.head {
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
border-bottom: 1rpx solid #e5e5e5;
|
padding: 22rpx 0;
|
margin-bottom: 22rpx;
|
.name {
|
font-weight: 600;
|
font-size: 32rpx;
|
color: #222222;
|
}
|
.status {
|
height: 38rpx;
|
line-height: 38rpx;
|
padding: 0 16rpx;
|
border-radius: 4rpx;
|
border: 1rpx solid #999999;
|
font-size: 22rpx;
|
color: #999999;
|
}
|
}
|
.line {
|
display: flex;
|
margin-bottom: 12rpx;
|
.label {
|
width: 140rpx;
|
color: #666666;
|
}
|
.value {
|
flex: 1;
|
}
|
}
|
}
|
}
|
}
|
}
|
.container_b {
|
width: 100%;
|
padding: 30rpx;
|
background: #ffffff;
|
padding-top: 20rpx;
|
box-sizing: border-box;
|
}
|
</style>
|
