‘’

liukangdong

2024-05-31 9e47e0ece28c6145638aecca5bdf86857c049cf9

 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>