jiangping
2024-10-09 c6a96d1162cb60d1bd30c8f5fde7a93985b79276
h5_meeting/pages/index/index.vue
@@ -8,13 +8,18 @@
            <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 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">{{meetingInfo.meetingName}}</view>
      <view v-if="meetingInfo.meetingTime && meetingInfo.bookingUser" class="meeting_con">
@@ -27,13 +32,15 @@
               <image src="@/static/ic_people@2x.png"></image>
               <text>预约人:{{meetingInfo.bookingUser }}</text>
            </view>
         </view>
         <view v-if="meetingInfo.meetingTime" class="qrcode_wrap">
            <canvas id="qrcode" canvas-id="qrcode" class="qrcode"></canvas>
         </view>
         <view v-if="showQrbg" class="qrcode_wrap">
            <canvas id="qrcode" canvas-id="qrcode" class="qrcode"></canvas>
         </view>
      </view>
      <view class="meeting_wrap">
         <view class="title">今日会议({{ info.meetingListResponseList && info.meetingListResponseList.length > 0 ? info.meetingListResponseList.length : 0 }})</view>
         <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="name">{{item.meetingName}}</view>
@@ -51,42 +58,46 @@
      </view>
      <!--  -->
      <swiper v-if="info.fileType == 0 && (info.meetingListResponseList == null || info.meetingListResponseList.length == 0)" class="swiper" circular autoplay indicator-dots>
      <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="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="info.multifileList[0].fileurlFull" class="app_video" :autoplay="true" loop :controls="false"></video>
      </swiper>
      <!--  -->
      <template
         v-if="info.fileType == 1 && info.multifileList && info.multifileList.length > 0 && (info.meetingListResponseList == null || info.meetingListResponseList.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 vueQr from 'vue-qr/src/packages/vue-qr.vue'
   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 {
   export default {
      // components: {vueQr},
      data() {
         return {
            time: '',
            date: '',
            showQrbg: false,
            timer: null,
            touchNum: 0,
            param: {},
            info: {},
            statusMap: {
               1: '未开始',
               2: '进行中',
               3: '已结束',
               4: '即将开始',
               5: '已撤销',
            },
            param: {},
            info: {},
            statusMap: {
               1: '未开始',
               2: '进行中',
               3: '已结束',
               4: '即将开始',
               5: '已撤销',
            },
            meetingInfo: {}
         }
      },
@@ -99,40 +110,47 @@
            })
         }
         this.getData()
      },
      onReady() {
      },
      onReady() {},
      methods: {
         getData() {
            this.showQrbg = false
            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.$nextTick(() => {
                     this.qrcodeCreate()
                     this.$forceUpdate()
                  })
               }
            }).then(res => {
               this.info = res.data
               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 = {}
               }
            })
         },
         qrcodeCreate(){
             // 获取uQRCode实例
              var qr = new UQRCode();
              // 设置二维码内容
              // qr.data = "https://uqrcode.cn/doc";
              qr.data = "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxac2a80c2144c4ee0&redirect_uri=http://192.168.0.109:8080/redirect.html&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
              // 设置二维码大小,必须与canvas设置的宽高一致
              qr.size = 83;
              // 调用制作二维码方法
              qr.make();
              // 获取canvas上下文
              var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件,this必须传入
              // 设置uQRCode实例的canvas上下文
              qr.canvasContext = canvasContext;
              // 调用绘制方法将二维码图案绘制到canvas上
              qr.drawCanvas();
         },
         qrcodeCreate() {
            this.showQrbg = true
            this.$nextTick(() => {
               // 获取uQRCode实例
               var qr = new UQRCode();
               // 设置二维码内容
               // qr.data = "https://uqrcode.cn/doc";
               qr.data =
                  "https://open.weixin.qq.com/connect/oauth2/authorize?appid=wxac2a80c2144c4ee0&redirect_uri=http://192.168.0.109:8080/redirect.html&response_type=code&scope=snsapi_base&state=1#wechat_redirect";
               // 设置二维码大小,必须与canvas设置的宽高一致
               qr.size = 83;
               // 调用制作二维码方法
               qr.make();
               // 获取canvas上下文
               var canvasContext = uni.createCanvasContext('qrcode', this); // 如果是组件,this必须传入
               // 设置uQRCode实例的canvas上下文
               qr.canvasContext = canvasContext;
               // 调用绘制方法将二维码图案绘制到canvas上
               qr.drawCanvas();
            })
         },
         touchend() {
            this.touchNum++
@@ -155,44 +173,53 @@
            this.timer = setInterval(() => {
               this.time = dayjs().format('HH:mm')
               this.date = dayjs().format('YYYY-MM-DD') + ' ' + weeks[new Date().getDay()]
            }, 1000)
            setInterval(() => {
               this.getData()
            },this.param.time ? this.param.time * 1000 : 60 * 1000)
            }, 1000)
            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;
<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: relative;
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      font-size: 28rpx;
      display: flex;
      flex-direction: column;
@@ -230,14 +257,16 @@
               flex-shrink: 0;
               flex-direction: column;
               width: 403rpx;
               height: 315rpx;
               background: linear-gradient( 90deg, #0080FF 0%, #00B0FF 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%);
               &:nth-of-type(1) {
                  background: linear-gradient(90deg, #0095AC 0%, #00B5D1 100%);
               }
               .item_bg {
                  position: absolute;
                  width: 178rpx;
@@ -250,13 +279,14 @@
               .name {
                  flex: 1;
                  font-weight: bold;
                  font-size: 39rpx;
                  width: 100%;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 3; /* 超出几行省略 */
                  font-size: 39rpx;
                  width: 100%;
                  word-break: break-all;
                  text-overflow: ellipsis;
                  display: -webkit-box;
                  -webkit-box-orient: vertical;
                  -webkit-line-clamp: 3;
                  /* 超出几行省略 */
               }
               .line {
@@ -292,19 +322,21 @@
               }
            }
         }
         .qrcode_wrap{
            width: 92px;
            height: 92px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            .qrcode {
               width: 84px;
               height: 84px;
            }
         .qrcode_wrap {
            width: 92px;
            height: 92px;
            display: flex;
            align-items: center;
            justify-content: center;
            background-color: #fff;
            .qrcode {
               width: 84px;
               height: 84px;
            }
         }
      }
      .meeting_name {