productDev/dmvisit.git

			@@ -1,281 +1,342 @@
			<template>
			<view class="main_app">
			<view class="tabs">
			<view class="tab" :class="{ active: activeTab === '0' }" @click="tabClick('0')">
			<text class="name">会议日历</text>
			<view class="line"></view>
			</view>
			<view class="tab" :class="{ active: activeTab === '1' }" @click="tabClick('1')">
			<text class="name">预约记录</text>
			<view class="line"></view>
			</view>
			</view>
			<!-- -->
			<template v-if="activeTab == '0'">
			<uni-calendar @change="changeCalendar" :selected="selected" />
			<!-- -->
			<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>
			</template>
			<!-- -->
			<template v-if="activeTab === '1'">
			<view class="card_list">
			<view class="list">
			<view class="item" @click="handleDetail()">
			<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>
			</template>
			</view>
			</template>

			<script>
			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 {
			data() {
			return {
			activeTab: '0',
			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);
			}
			}
			};
			</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;
			}
			}
			}
			}
			}
			}
			<template>
			<view class="main_app">
			<view class="tabs">
			<view class="tab" :class="{ active: activeTab === '0' }" @click="tabClick('0')">
			<text class="name">会议日历</text>
			<view class="line"></view>
			</view>
			<view class="tab" :class="{ active: activeTab === '1' }" @click="tabClick('1')">
			<text class="name">预约记录</text>
			<view class="line"></view>
			</view>
			</view>
			<!-- -->
			<template v-if="activeTab == '0'">
			<!-- <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>
			</template>
			<!-- -->
			<template v-if="activeTab === '1'">
			<view class="card_list">
			<view class="list">
			<view class="item" @click="handleDetail()">
			<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>
			</template>
			</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>