<template>
|
<view class="main_app">
|
<!-- -->
|
<!-- <uni-calendar @change="changeCalendar" :selected="selected" /> -->
|
<!-- 日历 -->
|
<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="card_list">
|
<view class="card_title">
|
<view class="name">
|
<view class="icon"></view>
|
<view class="text">今日会议</view>
|
</view>
|
<view class="meeting">
|
<view class="text mr24">全部会议室</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>
|
|
<!-- -->
|
</view>
|
</template>
|
|
<script>
|
import Calendar from '@/components/Li-Calendar/Li-Calendar.vue';
|
import { getDay } from '@/utils/utils.js';
|
function getDate(date, AddDayCount = 0) {
|
if (!date) {
|
date = new Date();
|
}
|
if (typeof date !== 'object') {
|
date = date.replace(/-/g, '/');
|
}
|
const dd = new Date(date);
|
|
dd.setDate(dd.getDate() + AddDayCount); // 获取AddDayCount天后的日期
|
|
const y = dd.getFullYear();
|
const m = dd.getMonth() + 1 < 10 ? '0' + (dd.getMonth() + 1) : dd.getMonth() + 1; // 获取当前月份的日期，不足10补0
|
const d = dd.getDate() < 10 ? '0' + dd.getDate() : dd.getDate(); // 获取当前几号，不足10补0
|
return {
|
fullDate: y + '-' + m + '-' + d,
|
year: y,
|
month: m,
|
date: d,
|
day: dd.getDay()
|
};
|
}
|
export default {
|
components: {
|
Calendar
|
},
|
data() {
|
return {
|
activeTab: '0',
|
currentTime1: '',
|
dateStart: '1999-05-01',
|
dateEnd: '2999-06-15',
|
mark: [],
|
selected: [
|
{
|
date: getDate(new Date(), -3).fullDate
|
// info: '打卡'
|
},
|
{
|
date: getDate(new Date(), -2).fullDate,
|
// info: '签到',
|
data: {
|
custom: '自定义信息',
|
name: '自定义消息头'
|
}
|
},
|
{
|
date: getDate(new Date(), -1).fullDate,
|
info: '已打卡'
|
}
|
]
|
};
|
},
|
methods: {
|
tabClick(val) {
|
this.activeTab = val;
|
},
|
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()
|
}
|
}
|
};
|
</script>
|
|
<style lang="scss">
|
page {
|
background-color: #f7f7f7;
|
}
|
.main_app {
|
padding: 0;
|
background-color: #f7f7f7;
|
::v-deep .uni-calendar-item--checked {
|
background-color: #279baa;
|
border-radius: 8rpx;
|
}
|
::v-deep .uni-calendar-item--isDay-text {
|
color: #279baa;
|
}
|
::v-deep .uni-calendar-item--isDay {
|
background-color: #279baa;
|
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: #279baa;
|
}
|
}
|
}
|
//
|
.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: #279baa;
|
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>
|
