From 9e47e0ece28c6145638aecca5bdf86857c049cf9 Mon Sep 17 00:00:00 2001
From: liukangdong <898885815@qq.com>
Date: 星期五, 31 五月 2024 18:23:34 +0800
Subject: [PATCH] ‘’
---
h5/pages/staff/meetingManager.vue | 576 +++++++++++++++++++++++++++++---------------------------
1 files changed, 297 insertions(+), 279 deletions(-)
diff --git a/h5/pages/staff/meetingManager.vue b/h5/pages/staff/meetingManager.vue
index df785c4..7a18ed1 100644
--- a/h5/pages/staff/meetingManager.vue
+++ b/h5/pages/staff/meetingManager.vue
@@ -1,303 +1,321 @@
<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 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>
- <!-- -->
- </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 { 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);
+import Calendar from '@/components/Li-Calendar/Li-Calendar.vue'
+import dayjs from 'dayjs'
+import { myMeetingPage } from '@/api'
- 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: [
+ components: {
+ Calendar
+ },
+ data() {
+ return {
+ currentDate: '',
+ dateStart: '2024-01-01',
+ dateEnd: '2999-06-15',
+ mark: [
{
- date: getDate(new Date(), -3).fullDate
- // info: '鎵撳崱'
+ time: '2024-05-30'
},
{
- date: getDate(new Date(), -2).fullDate,
- // info: '绛惧埌',
- data: {
- custom: '鑷畾涔変俊鎭�',
- name: '鑷畾涔夋秷鎭ご'
- }
+ time: '2024-05-22',
+ pointText: 'aaa',
+ pointTextColor: '#fff'
},
{
- date: getDate(new Date(), -1).fullDate,
- info: '宸叉墦鍗�'
+ time: '2024-05-28',
+ text: ['111','222'],
+ pointTextColor: '#fff'
}
- ]
- };
- },
- methods: {
- tabClick(val) {
- this.activeTab = val;
+ ],
+ 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()
},
- 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;
+ 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;
- }
- }
- }
- }
- }
+ 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 .calendar-point {
+ /* background-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;
+ width: 100%;
+ padding: 30rpx;
+ background: #ffffff;
+ padding-top: 20rpx;
+ box-sizing: border-box;
}
-</style>
+</style>
--
Gitblit v1.9.3