From 1fca80283023ea57b04ee48f40d13b7c61e54ca6 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期六, 11 五月 2024 16:15:42 +0800
Subject: [PATCH] 会议室
---
h5/pages/staff/meetingCalendar.vue | 621 +++++++++++++++++++++++++++++++-------------------------
1 files changed, 341 insertions(+), 280 deletions(-)
diff --git a/h5/pages/staff/meetingCalendar.vue b/h5/pages/staff/meetingCalendar.vue
index 00f9426..04179cb 100644
--- a/h5/pages/staff/meetingCalendar.vue
+++ b/h5/pages/staff/meetingCalendar.vue
@@ -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>
--
Gitblit v1.9.3