‘’

liukangdong

2024-09-19 2cb2f782d29b546caecbabf16f605721e0ea4243

 h5_meeting/pages/index/index.vue

@@ -1,211 +1,264 @@
<template>

   <view class="main_app">
   <view class="main_app">

      <image src="@/static/bg@2x.png" class="main_bg" mode=""></image>

      <view class="header_wrap">
         <view class="title">会议室</view>
         <view class="time_wrap">
            <view class="time">{{time}}</view>
            <view class="date">{{date}}</view>
         </view>
      <view class="header_wrap">

         <view class="title" @touchend="touchend">会议室</view>

         <view class="time_wrap">

            <view class="time">{{time}}</view>

            <view class="date">{{date}}</view>

         </view>

      </view>

      <view class="home_status orange">会议中</view>
      <view class="meeting_name">会议名称</view>
      <view class="meeting_con">
         <view class="content">
            <view class="line">
               <image src="@/static/ic_time@2x.png"></image>
               <text>10~12</text>
            </view>
            <view class="line">
               <image src="@/static/ic_people@2x.png"></image>
               <text>10~12</text>
            </view>
         </view>
         <view class="qrcode"></view>
      </view>
      <view class="meeting_wrap">
         <view class="title">今日会议（6）</view>
         <view class="list">
            <view class="item">
               <view class="name">开发部会议</view>
               <view class="line">预约人：李怀英</view>
               <view class="line">13:30～15:00（即将开始）</view>
               <image src="@/static/ic_meeting@2x.png" class="item_bg"></image>
            </view>
            <view class="item empty">
               <view class="name">暂无会议</view>
               <view class="line">预约人：-</view>
               <view class="line">-</view>
               <image src="@/static/ic_meeting@2x.png" class="item_bg"></image>
            </view>
         </view>
      </view>
      <view class="home_status orange">会议中</view>

      <view class="meeting_name">会议名称</view>

      <view class="meeting_con">

         <view class="content">

            <view class="line">

               <image src="@/static/ic_time@2x.png"></image>

               <text>10~12</text>

            </view>

            <view class="line">

               <image src="@/static/ic_people@2x.png"></image>

               <text>10~12</text>

            </view>

         </view>

         <view class="qrcode"></view>

      </view>

      <view class="meeting_wrap">

         <view class="title">今日会议（6）</view>

         <view class="list">

            <view class="item">

               <view class="name">开发部会议</view>

               <view class="line">预约人：李怀英</view>

               <view class="line">13:30～15:00（即将开始）</view>

               <image src="@/static/ic_meeting@2x.png" class="item_bg"></image>

            </view>

            <view class="item empty">

               <view class="name">暂无会议</view>

               <view class="line">预约人：-</view>

               <view class="line">-</view>

               <image src="@/static/ic_meeting@2x.png" class="item_bg"></image>

            </view>

         </view>

      </view>

   </view>

</template>



<script>
<script>

   import dayjs from 'dayjs'

   import {

      meetScreenData

   } from '@/api/index.js'

   export default {

      data() {

         return {

            time: '',
            date: '',
            timer: null

            time: '',

            date: '',

            timer: null,

            touchNum: 0,
            param: {}

         }

      },

      onLoad() {

         this.initDatetime()

      onLoad() {
         this.initDatetime()
         this.param = uni.getStorageSync('param') || {}
         if(!this.param.code){
            return uni.navigateTo({
               url: '/pages/index/config'
            })
         }
         this.getData()

      },

      methods: {

         initDatetime() {
            let weeks = ['周日','周一','周二','周三','周四','周五','周六']
            this.time = dayjs().format('HH:mm')
            this.date = dayjs().format('YYYY-MM-DD')+ ' ' + weeks[new Date().getDay()]
            this.timer = setInterval(() => {
               this.time = dayjs().format('HH:mm')
               this.date = dayjs().format('YYYY-MM-DD')+ ' ' + weeks[new Date().getDay()]
            },1000)
         getData() {

            meetScreenData({
               roomId: this.param.code
            })

         },

         touchend() {

            this.touchNum++

            setTimeout(() => {

               if (this.touchNum == 1) {

                  console.log('单击')

               }

               if (this.touchNum >= 2) {

                  uni.navigateTo({
                     url: '/pages/index/config'
                  })

               }

               this.touchNum = 0

            }, 250)

         },

         initDatetime() {

            let weeks = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']

            this.time = dayjs().format('HH:mm')

            this.date = dayjs().format('YYYY-MM-DD') + ' ' + weeks[new Date().getDay()]

            this.timer = setInterval(() => {

               this.time = dayjs().format('HH:mm')

               this.date = dayjs().format('YYYY-MM-DD') + ' ' + weeks[new Date().getDay()]

            }, 1000)

         }

      }

   }

</script>



<style lang="scss" scoped>

   .main_app{
      width: 100%;
      min-height: 100vh;
      position: relative;
      font-size: 28rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-bottom: 35rpx;
      color: #fff;
      .meeting_wrap{
         margin-left: 42rpx;
         margin-top: 85rpx;
         .title{
            font-weight: 500;
            font-size: 42rpx;
            color: #FFFFFF;
            line-height: 62rpx;
            height: 62rpx;
            margin-bottom: 32rpx;
         }
         .list{
            display: flex;
            width: calc( 100vw - 42rpx );
            overflow-x: auto;
            scrollbar-width: none; 
            &:-webkit-scrollbar {
              display: none; /* Chrome Safari */
             }
            .item{
               padding: 34rpx 28rpx;
               display: flex;
               flex-shrink: 0;
               flex-direction: column;
               width: 403rpx;
               height: 315rpx;
               background: linear-gradient( 90deg, #0095AC 0%, #00B5D1 100%);
               border-radius: 7rpx;
               margin-right: 28rpx;
               position: relative;
               .item_bg{
                  position: absolute;
                  width: 178rpx;
                  height: 178rpx;
                  right: 0;
                  bottom: 0;
                  // z-index: -1;
               }
               .name{
                  flex: 1;
                  font-weight: bold;
                  font-size: 39rpx;
               }
               .line{
                  font-weight: 500;
                  margin-bottom: 7rpx;
               }
            }
            .empty{
               background: rgba(255,255,255,0.11);
            }
         }
      }
      .meeting_con{
         display: flex;
         justify-content: space-between;
         align-items: center;
         padding: 0 42rpx;
         .content{
            .line{
               display: flex;
               align-items: center;
               font-weight: 500;
               font-size: 32rpx;
               margin: 24rpx 0;
               image{
                  width: 30rpx;
                  height: 30rpx;
                  margin-right: 20rpx;
               }
            }
         }
         .qrcode{
            width: 166rpx;
            height: 166rpx;
            border: 1px solid red;
         }
      }
      .meeting_name{
         margin-bottom: 12rpx;
         font-weight: bold;
         font-size: 49rpx;
         padding-left: 42rpx;
      }
      .home_status{
         font-weight: bold;
         font-size: 125rpx;
         margin: 70rpx 42rpx;
         line-height: 185rpx;
         height: 185rpx;
      }
      .orange{
         color: #FFB100;
      }
      .header_wrap{
         padding: 34rpx 34rpx 0 0;
         display: flex;
         justify-content: space-between;
         align-items: center;
         .time_wrap{
            text-align: right;
            .time{
               font-size: 56rpx;
               margin-bottom: 4rpx;
            }
         }
         .title{
            font-size: 56rpx;
            font-weight: bold;
            width: 430rpx;
            height: 125rpx;
            line-height: 125rpx;
            text-align: center;
            background: #00B5D1;
            border-radius: 0rpx 7rpx 7rpx 0rpx;
         }
      }
      .main_bg{
         position: absolute;
         width: 100%;
         height: 100%;
         top: 0;
         left: 0;
         object-fit: cover;
         z-index: -1;
      }
   .main_app {

      width: 100%;

      min-height: 100vh;

      position: relative;

      font-size: 28rpx;

      display: flex;

      flex-direction: column;

      justify-content: space-between;

      padding-bottom: 35rpx;

      color: #fff;



      .meeting_wrap {

         margin-left: 42rpx;

         margin-top: 85rpx;



         .title {

            font-weight: 500;

            font-size: 42rpx;

            color: #FFFFFF;

            line-height: 62rpx;

            height: 62rpx;

            margin-bottom: 32rpx;

         }



         .list {

            display: flex;

            width: calc(100vw - 42rpx);

            overflow-x: auto;

            scrollbar-width: none;



            &:-webkit-scrollbar {

               display: none;

               /* Chrome Safari */

            }



            .item {

               padding: 34rpx 28rpx;

               display: flex;

               flex-shrink: 0;

               flex-direction: column;

               width: 403rpx;

               height: 315rpx;

               background: linear-gradient(90deg, #0095AC 0%, #00B5D1 100%);

               border-radius: 7rpx;

               margin-right: 28rpx;

               position: relative;



               .item_bg {

                  position: absolute;

                  width: 178rpx;

                  height: 178rpx;

                  right: 0;

                  bottom: 0;

                  // z-index: -1;

               }



               .name {

                  flex: 1;

                  font-weight: bold;

                  font-size: 39rpx;

               }



               .line {

                  font-weight: 500;

                  margin-bottom: 7rpx;

               }

            }



            .empty {

               background: rgba(255, 255, 255, 0.11);

            }

         }

      }



      .meeting_con {

         display: flex;

         justify-content: space-between;

         align-items: center;

         padding: 0 42rpx;



         .content {

            .line {

               display: flex;

               align-items: center;

               font-weight: 500;

               font-size: 32rpx;

               margin: 24rpx 0;



               image {

                  width: 30rpx;

                  height: 30rpx;

                  margin-right: 20rpx;

               }

            }

         }



         .qrcode {

            width: 166rpx;

            height: 166rpx;

            border: 1px solid red;

         }

      }



      .meeting_name {

         margin-bottom: 12rpx;

         font-weight: bold;

         font-size: 49rpx;

         padding-left: 42rpx;

      }



      .home_status {

         font-weight: bold;

         font-size: 125rpx;

         margin: 70rpx 42rpx;

         line-height: 185rpx;

         height: 185rpx;

      }



      .orange {

         color: #FFB100;

      }



      .header_wrap {

         padding: 34rpx 34rpx 0 0;

         display: flex;

         justify-content: space-between;

         align-items: center;



         .time_wrap {

            text-align: right;



            .time {

               font-size: 56rpx;

               margin-bottom: 4rpx;

            }

         }



         .title {

            font-size: 56rpx;

            font-weight: bold;

            width: 430rpx;

            height: 125rpx;

            line-height: 125rpx;

            text-align: center;

            background: #00B5D1;

            border-radius: 0rpx 7rpx 7rpx 0rpx;

         }

      }



      .main_bg {

         position: absolute;

         width: 100%;

         height: 100%;

         top: 0;

         left: 0;

         object-fit: cover;

         z-index: -1;

      }

   }

</style>
</style>