ll

liukangdong

2024-09-19 80d1d37bfad07bb37154f3dc471de6dabdbba688

 h5_meeting/pages/index/index.vue

@@ -2,37 +2,44 @@
   <view class="main_app">

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

      <view class="header_wrap">

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

         <view class="title" @touchend="touchend">{{info.roomName}}</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="home_status">
         <text v-if="!info.meetingListResponseList || info.meetingListResponseList.length == 0">空闲中</text>
         <text v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 4">即将开始</text>
         <text class="orange" v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 2">会议中</text>
         <text v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 1">未开始</text>
         <text v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 3">已结束</text>
         <text v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 5">已撤销</text>
      </view>

      <view class="meeting_name">{{meetingInfo.meetingName}}</view>

      <view class="meeting_con">

         <view class="content">

            <view class="line">

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

               <text>10~12</text>

               <text>{{meetingInfo.meetingTime }}</text>

            </view>

            <view class="line">

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

               <text>10~12</text>

               <text>预约人：{{meetingInfo.bookingUser }}</text>

            </view>

         </view>

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

         </view>
         <vueQr v-if="meetingInfo.id" :text="meetingInfo.id" class="qrcode" />

      </view>

      <view class="meeting_wrap">

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

         <view class="title">今日会议（{{ info.meetingListResponseList && info.meetingListResponseList.length > 0 ? info.meetingListResponseList.length : 0 }}）</view>

         <view class="list">

            <view class="item">

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

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

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

            <view class="item" v-for="item in info.meetingListResponseList">

               <view class="name">{{item.meetingName}}</view>

               <view class="line">预约人：{{item.bookingUser}}</view>

               <view class="line">{{item.meetingTime}}（{{statusMap[item.meetingStatus]}}）</view>

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

            </view>

            <view class="item empty">

            <view v-if="!info.meetingListResponseList || info.meetingListResponseList.length == 0" class="item empty">

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

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

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

@@ -40,38 +47,66 @@
            </view>

         </view>

      </view>



      <!--  -->

      <swiper v-if="info.fileType == 0 && info.multifileList && info.multifileList.length > 0" class="swiper" circular autoplay indicator-dots>

         <swiper-item v-for="item in info.multifileList">

            <image class="swiper_item" :src="item.fileurlFull" mode="aspectFill"></image>

         </swiper-item>

      </swiper>
      <!--  -->
      <template v-if="info.fileType == 1 && info.multifileList && info.multifileList.length > 0">
         <video  :src="info.multifileList[0].fileurlFull" class="app_video" :autoplay="true" loop :controls="false"></video>
      </template>

   </view>

</template>



<script>

   import dayjs from 'dayjs'

   import dayjs from 'dayjs'
   import vueQr from 'vue-qr/src/packages/vue-qr.vue'

   import {

      meetScreenData

   } from '@/api/index.js'

   export default {

   export default {
      components: {vueQr},

      data() {

         return {

            time: '',

            date: '',

            timer: null,

            touchNum: 0,
            param: {}

            touchNum: 0,

            param: {},
            info: {},
            statusMap: {
               1: '未开始',
               2: '进行中',
               3: '已结束',
               4: '即将开始',
               5: '已撤销',
            },
            meetingInfo: {}

         }

      },

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

         this.initDatetime()

         this.param = uni.getStorageSync('param') || {}

         if (!this.param.code) {

            return uni.navigateTo({

               url: '/pages/index/config'

            })

         }

         this.getData()

      },

      methods: {

         getData() {

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

               roomId: this.param.code

            }).then(res => {
               this.info = res.data
               if(this.info.meetingListResponseList && this.info.meetingListResponseList.length > 0){
                  this.meetingInfo = this.info.meetingListResponseList[0]
                  this.$forceUpdate()
               }
            })

         },

         touchend() {

@@ -81,8 +116,8 @@
                  console.log('单击')

               }

               if (this.touchNum >= 2) {

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

                     url: '/pages/index/config'

                  })

               }

               this.touchNum = 0

@@ -95,13 +130,37 @@
            this.timer = setInterval(() => {

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

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

            }, 1000)

            }, 1000)
            setInterval(() => {
               this.getData()
            },this.param.time ? this.param.time * 1000 : 60 * 1000)

         }

      }

   }

</script>



<style lang="scss" scoped>

<style lang="scss" scoped>
   .swiper{
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
      width: 100%;
      height: 100vh;
      .swiper_item{
         background-color: #0095AC;
         width: 100%;
         height: 100vh;
      }
   }
   .app_video{
      width: 100%;
      height: 100vh;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 999;
   }

   .main_app {

      width: 100%;

      min-height: 100vh;

@@ -112,7 +171,7 @@
      justify-content: space-between;

      padding-bottom: 35rpx;

      color: #fff;



      overflow: hidden;

      .meeting_wrap {

         margin-left: 42rpx;

         margin-top: 85rpx;

@@ -143,12 +202,14 @@
               flex-shrink: 0;

               flex-direction: column;

               width: 403rpx;

               height: 315rpx;

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

               height: 315rpx;
               background: linear-gradient( 90deg, #0080FF 0%, #00B0FF 100%);

               border-radius: 7rpx;

               margin-right: 28rpx;

               position: relative;



               &:nth-of-type(1){
                  background: linear-gradient(90deg, #0095AC 0%, #00B5D1 100%);
               }

               .item_bg {

                  position: absolute;

                  width: 178rpx;

@@ -201,7 +262,6 @@
         .qrcode {

            width: 166rpx;

            height: 166rpx;

            border: 1px solid red;

         }

      }