更新

MrShi

2025-03-12 69a1b3bf45738f048361ee4ccb6bdc64fce35720

 h5_meeting/pages/index/index.vue

¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,485 @@
<template>

   <view class="main_app">

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

      <view class="header_wrap">

         <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">

         <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 v-if="meetingInfo.meetingName" class="meeting_name_box"><view  class="meeting_name">{{meetingInfo.meetingName}}</view></view>

      <view class="">

         <view v-if="meetingInfo.meetingTime && meetingInfo.bookingUser" class="meeting_con">

            <view class="content">

               <view class="line">

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

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

               </view>

               <view class="line">

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

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

               </view>

            </view>



            <view v-show="showQrbg" class="qrcode_wrap">

               <canvas id="qrcode" canvas-id="qrcode" class="qrcode"></canvas>

            </view>

         </view>

         <view v-if="meetingInfo.meetingTime && meetingInfo.bookingUser && showQrbg" class="qrcode_box">

            <view class="text"

               v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 1">

               å¾®ä¿¡æ‰«ä¸€æ‰«å¼€å§‹ä¼šè®®</view>

            <view class="text"

               v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 4">

               å¾®ä¿¡æ‰«ä¸€æ‰«å¼€å§‹ä¼šè®®</view>

            <view class="text"

               v-if="info.meetingListResponseList && info.meetingListResponseList.length > 0 && info.meetingListResponseList[0].meetingStatus == 2">

               å¾®ä¿¡æ‰«ä¸€æ‰«ç»“束会议</view>

         </view>

      </view>

      <view class="meeting_wrap">

         <view class="title">

            ä»Šæ—¥ä¼šè®®ï¼ˆ{{ info.meetingListResponseList && info.meetingListResponseList.length > 0 ? info.meetingListResponseList.length : 0 }}）

         </view>

         <view class="list">

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

               <view class="nameBox">

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

               </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 v-if="!info.meetingListResponseList || info.meetingListResponseList.length == 0" 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>



      <!--  -->

      <swiper

         v-if="info.fileType == 0 && (info.meetingListResponseList == null || info.meetingListResponseList.length == 0)"

         class="swiper" circular autoplay indicator-dots>

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

            <image class="swiper_item"

               :src="!param.officeFlag || param.officeFlag == '0' ? item.localFileurlFull : item.fileurlFull"

               mode="aspectFill"></image>

         </swiper-item>

      </swiper>

      <!--  -->

      <template

         v-if="info.fileType == 1 && info.multifileList && info.multifileList.length > 0 && (info.meetingListResponseList == null || info.meetingListResponseList.length == 0)">

         <video

            :src="!param.officeFlag || param.officeFlag == '0' ? info.multifileList[0].localFileurlFull : info.multifileList[0].fileurlFull"

            class="app_video" :autoplay="true" loop :controls="false"></video>

      </template>

   </view>

</template>



<script>

   import dayjs from 'dayjs'

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

   import UQRCode from 'uqrcodejs'

   import {

      meetScreenData

   } from '@/api/index.js'

   export default {

      // components: {vueQr},

      data() {

         return {

            time: '',

            date: '',

            showQrbg: false,

            timer: null,

            timer2: null,

            touchNum: 0,

            param: {},

            info: {},

            statusMap: {

               1: '未开始',

               2: '进行中',

               3: '已结束',

               4: '即将开始',

               5: '已撤销',

            },

            meetingInfo: {},

            timer: null

         }

      },

      onShow() {

         const param = uni.getStorageSync('param')

         if (!param.code) {

            return uni.navigateTo({

               url: '/pages/index/config'

            })

         }

         this.initDatetime()



      },

      onReady() {



      },

      onHide() {

         if (this.timer) {

            clearInterval(this.timer)

         }

         if (this.timer2) {

            clearInterval(this.timer2)

         }

      },

      methods: {

         getData() {

            meetScreenData({

               roomId: this.param.code

            }).then(res => {

               this.info = res.data

            /*    if(this.info.title && this.info.title.length>0){

                  this.info.title = this.info.title.slice(0,20)+"..."

               } */

               if (this.info.meetingListResponseList && this.info.meetingListResponseList.length > 0) {

                  this.meetingInfo = this.info.meetingListResponseList[0]

                  this.$nextTick(() => {

                     this.qrcodeCreate()

                     this.$forceUpdate()

                  })

               } else {

                  this.showQrbg = false

                  this.meetingInfo = {}

                  this.$forceUpdate()

               }

            })

         },

         qrcodeCreate() {

            this.showQrbg = true

            this.$nextTick(() => {

               // èŽ·å–uQRCode实例

               var qr = new UQRCode();

               // è®¾ç½®äºŒç»´ç å†…容

               // qr.data = "https://uqrcode.cn/doc";

               qr.data =

                  "https://atwl.ahzyssl.com/zhyq_h5/#/pages/login/login/?type=2&yw=1&ywid=" + this.meetingInfo.id

               // è®¾ç½®äºŒç»´ç å¤§å°ï¼Œå¿…须与canvas设置的宽高一致

               qr.size = this.rpxToPx(208);

               // è°ƒç”¨åˆ¶ä½œäºŒç»´ç æ–¹æ³•

               qr.make();

               // èŽ·å–canvas上下文

               var canvasContext = uni.createCanvasContext('qrcode', this); // å¦‚果是组件，this必须传入

               // è®¾ç½®uQRCode实例的canvas上下文

               qr.canvasContext = canvasContext;

               // è°ƒç”¨ç»˜åˆ¶æ–¹æ³•å°†äºŒç»´ç å›¾æ¡ˆç»˜åˆ¶åˆ°canvas上

               qr.drawCanvas();

            })

         },

         touchend() {

            this.touchNum++

            setTimeout(() => {

               if (this.touchNum == 1) {

                  console.log('单击')

               }

               if (this.touchNum >= 2) {

                  uni.navigateTo({

                     url: '/pages/index/config'

                  })

               }

               this.touchNum = 0

            }, 250)

         },

			
         //rpx转px

         rpxToPx(rpx) {

             const screenWidth = uni.getSystemInfoSync().screenWidth

                 return (screenWidth * Number.parseInt(rpx)) / 750

         },

         //px转rpx

         pxToRpx(px) {

             const screenWidth = uni.getSystemInfoSync().screenWidth

             return (750 * Number.parseInt(px)) / screenWidth 
         },

         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)

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



            this.getData()

            this.timer2 = setInterval(() => {

               this.getData()

            }, this.param.time ? this.param.time * 1000 : 60 * 1000)

         }

      }

   }

</script>



<style lang="scss" scoped>

   page,

   body {

      overflow: hidden;

   }



   .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%;

      height: 100vh;

      position: fixed;

      top: 0;

      left: 0;

      right: 0;

      bottom: 0;

      font-size: 28rpx;

      display: flex;

      flex-direction: column;

      justify-content: space-between;

      padding-bottom: 34rpx;

      color: #fff;

      overflow: hidden;



      .meeting_wrap {

         margin-left: 42rpx;

         // margin-top: 60rpx; 
         .titleBox{

            height: 124rpx;

         }

         .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, #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;

                  height: 178rpx;

                  right: 0;

                  bottom: 0;

                  // z-index: -1;

               }

               .nameBox{

                  flex: 1; 
                  width: 100%;

               }

               .name {

						
                  font-weight: bold; 
                  line-height: 40rpx;

                  max-height: 120rpx;

                  font-size: 39rpx;

                  word-break: break-all;

                  text-overflow: ellipsis;

                  display: -webkit-box;

                  -webkit-box-orient: vertical;

                  -webkit-line-clamp: 3; 
                  overflow: hidden; 
                   white-space: normal; /* ä¿è¯æ–‡æœ¬æ­£å¸¸æ¢è¡Œ */

                  /* è¶…出几行省略 */

               }



               .line {

                  font-weight: 500;

                  margin-bottom: 7rpx;

               }

            }



            .empty {

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

            }

         }

      }



      .meeting_con {

         display: flex;

         justify-content: space-between;

         align-items: center;

         padding: 0 42rpx;

         padding-right: 64rpx;



         .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_wrap {

            width: 208rpx;

            height: 208rpx;

            display: flex;

            align-items: center;

            justify-content: center;

            background-color: #fff;



            .qrcode {

               width: 200rpx;

               height: 200rpx;

            }

         }



      }



      .qrcode_box {

         width: 100%;

         display: flex;

         justify-content: flex-end;

         color: rgba(255, 255, 255, 0.6);

         padding-right: 65rpx;

         margin-top: 18rpx;

         .text {

            width: 200rpx;

            text-align: right;

            padding-right: 8rpx;

            font-size: 21rpx;
            // transform: scale(.84);

         }

      }

      .meeting_name_box {

         // max-height: 150rpx;

      }

      .meeting_name {

         margin-bottom: 12rpx;

         font-weight: bold;

         font-size: 49rpx;

         // height: 150rpx;

         padding-left: 42rpx;

         padding-right: 64rpx;

         word-break: break-all;

         text-overflow: ellipsis;

         display: -webkit-box;

         -webkit-box-orient: vertical;

         -webkit-line-clamp: 2; 
         overflow: hidden; 
          white-space: normal; /* ä¿è¯æ–‡æœ¬æ­£å¸¸æ¢è¡Œ */

      }



      .home_status {

         font-weight: bold;

         font-size: 125rpx;

         margin: 140rpx 42rpx 22rpx;

         line-height: 125rpx;

         height: 125rpx;

      }



      .orange {

         color: #FFB100;

      }



      .header_wrap {

         padding: 42rpx 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>