k94314517
2024-05-10 0df3c99a23b6774c39abf16af51cf20bbfefc8a5
h5/pages/meeting/manage/manage.vue
¶Ô±ÈÐÂÎļþ
@@ -0,0 +1,407 @@
<template>
   <page-meta :page-style="'overflow:'+(pageShow?'hidden':'visible')"></page-meta>
   <view class="manage">
      <view class="manage_head">
         <view class="manage_head_input">
            <u--input
               placeholder="搜索"
               prefixIcon="search"
               v-model="value"
               @confirm="sou"
               prefixIconStyle="font-size: 22px; color: #909399"
            ></u--input>
         </view>
      </view>
      <view class="manage_list" v-if="list && list.length > 0">
         <view class="manage_list_item" v-for="(item, index) in list" :key="index">
            <view class="top">
               <view class="top_left">
                  <view class="top_left_image">
                     <image :src="item.imgurl ? item.prefixUrl + item.imgurl : icon" mode="aspectFit"></image>
                  </view>
                  <view class="top_left_content">
                     <text>{{item.name}}</text>
                     <view class="top_left_content_time">
                        <image src="@/static/meeting/icon/ic_time@2x.png" mode="widthFix"></image>
                        <text>{{item.startTime}}-{{item.endTime}}</text>
                     </view>
                  </view>
               </view>
               <view class="top_right" @click="openQR(item.id, item.name)">开门码</view>
            </view>
            <view class="bottom" v-if="item.projectListName">
               <view class="bottom_label">服务项目:</view>
               <view class="bottom_content">{{item.projectListName}}</view>
            </view>
         </view>
      </view>
      <view class="manage_list" v-else>
         <view class="manage_list_wu">
            <image src="@/static/meeting/common/364.png" mode="widthFix"></image>
         </view>
      </view>
      <!-- å¼€é—¨ç  -->
      <view class="details_ma">
         <u-popup :show="show" :closeable="true" :safeAreaInsetBottom="false" :round="0" mode="center" @close="close">
            <view class="box">
               <text class="box_a">{{roomName || ''}}</text>
               <text class="box_b" v-if="time > 0">二维码{{time}}秒内有效</text>
               <text class="box_b" v-else>二维码已过期,请点击二维码刷新</text>
               <view class="qrcode" @click="Refresh(1)">
                  <image :src="qrurl" mode="widthFix"></image>
               </view>
               <text class="box_c">出示该二维码,扫码进入会议室</text>
            </view>
         </u-popup>
      </view>
   </view>
</template>
<script>
   import { mapState } from 'vuex'
   export default {
      data() {
         return {
            value: '',
            next: false,
            list: [],
            page: 0,
            show: false,
            val: '',
            time: 0,
            timer: null,
            timeValue: '',
            roomName: '',
            qrurl: '',
            id: '',
            pageShow: false,
            icon: require('@/static/meeting/common/123.png')
         };
      },
      onLoad() {
         this.getList()
         this.getSYSTEM()
      },
      computed: {
         ...mapState(['token'])
      },
      onReachBottom() {
         this.getList()
      },
      methods: {
         // åˆ·æ–°äºŒç»´ç 
         Refresh(type) {
            if (this.time !== 0) return
            uni.showLoading({
               title: '加载中',
               mask: true
            });
            uni.request({
               url: `${this.$baseUrl}web/rooms/getQrCodeImg?id=${this.id}&token=${this.token}`,   //url地址
               method: 'GET',
               responseType: 'arraybuffer',
               header: {
                  'Content-Type': 'application/json'
               },
               success: res => {
                  const arrayBuffer = new Uint8Array(res.data)
                  const base64 = "data:image/png;base64," + uni.arrayBufferToBase64(arrayBuffer) //这里需要添加前缀
                  this.qrurl = base64
                  if (type === 1) {
                     this.time = Number(this.timeValue) * 60
                     this.getTime()
                  }
               },
               complete() {
                  uni.hideLoading();
               }
            });
         },
         getTime() {
            this.timer = setInterval(() => {
               if (this.time === 0) {
                  clearInterval(this.timer)
                  this.timer = null
                  this.time = 0
                  return
               }
               this.time = this.time - 1
            }, 1000)
         },
         getSYSTEM() {
            this.$u.api.getSystemDictData({
               dictCode: 'SYSTEM',
               label: 'QR_OPENROOM_VALIDTIME'
            }).then(res => {
               this.time = Number(res.data.code) * 60
               this.timeValue = Number(res.data.code)
            })
         },
         openQR(id, name) {
            this.id = id
            this.roomName = name
            this.time = 0
            this.Refresh(2)
            this.time = this.timeValue * 60
            this.getTime()
            this.pageShow = true
            this.show = true
            uni.setScreenBrightness({
               value: 1,
               success: function () {
                  console.log('success');
               }
            });
         },
         close() {
            this.pageShow = false
            this.show = false
            this.time = 0
            clearInterval(this.timer)
            this.timer = null
            uni.setScreenBrightness({
               value: 0.5,
               success: function () {
                  console.log('success');
               }
            });
         },
         sou() {
            this.list = []
            this.page = 0
            this.next = false
            this.getList()
         },
         getList() {
            if (!this.next) {
               this.page = this.page + 1
               this.$u.api.myRoomsPage({
                  capacity: 10,
                  page: this.page,
                  model: {
                     roomsName: this.value
                  }
               }).then(res => {
                  if (res.data.records.length > 0) {
                     res.data.records.forEach(item => {
                        if (item.projectList.length > 0) {
                           let names = item.projectList.map(item => item.projectName)
                           item.projectListName = names.join(' | ')
                        } else {
                           item.projectListName = ''
                        }
                     })
                     this.list = [...this.list, ...res.data.records]
                  }
                  if (res.data.records.length < 10) {
                     this.next = true
                  }
               })
            }
         }
      }
   }
</script>
<style lang="scss">
   .manage {
      width: 100%;
      .details_ma /deep/ {
         .u-popup__content {
            width: 100%;
            .box {
               width: 100%;
               padding: 80rpx 0;
               box-sizing: border-box;
               background-color: #ffffff;
               display: flex;
               align-items: center;
               justify-content: center;
               flex-direction: column;
               .box_a {
                  padding: 0 30rpx;
                  box-sizing: border-box;
                  font-size: 36rpx;
                  font-family: PingFangSC-Semibold, PingFang SC;
                  font-weight: 600;
                  color: #222222;
               }
               .box_b {
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #0055FF;
                  margin-top: 40rpx;
               }
               .qrcode {
                  width: 440rpx;
                  height: 440rpx;
                  margin-top: 40rpx;
                  image {
                     width: 100%;
                     height: 100%;
                  }
               }
               .box_c {
                  font-size: 28rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #333333;
                  margin-top: 40rpx;
               }
               .box_d {
                  font-size: 26rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #666666;
                  margin-top: 32rpx;
               }
               .box_e {
                  font-size: 26rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #666666;
               }
            }
         }
      }
      .manage_head {
         width: 100%;
         padding: 20rpx 30rpx;
         background-color: #ffffff;
         box-sizing: border-box;
         position: sticky;
         top: 0;
         .manage_head_input /deep/ {
            width: 100%;
            height: 72rpx;
            background: #F7F7F7;
            border-radius: 4rpx;
            .u-border {
               border: none !important;
            }
         }
      }
      .manage_list {
         width: 100%;
         display: flex;
         flex-direction: column;
         padding: 20rpx 30rpx;
         box-sizing: border-box;
         .manage_list_wu {
            width: 100%;
            margin-top: 50rpx;
            display: flex;
            align-items: center;
            justify-content: center;
            image {
               width: 340rpx;
               height: 364rpx;
            }
         }
         .manage_list_item {
            width: 100%;
            padding: 30rpx;
            box-sizing: border-box;
            background: #ffffff;
            display: flex;
            flex-direction: column;
            margin-bottom: 20rpx;
            &:last-child {
               margin-bottom: 0 !important;
            }
            .top {
               display: flex;
               align-items: center;
               justify-content: space-between;
               .top_left {
                  display: flex;
                  align-items: center;
                  .top_left_image {
                     flex-shrink: 0;
                     width: 134rpx;
                     height: 100rpx;
                     border-radius: 4rpx;
                     margin-right: 20rpx;
                     overflow: hidden;
                     background-color: #ececec;
                     image {
                        width: 100%;
                        height: 100%;
                     }
                  }
                  .top_left_content {
                     display: flex;
                     height: 100rpx;
                     flex-direction: column;
                     justify-content: space-around;
                     text {
                        width: 300rpx;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                        font-size: 30rpx;
                        font-family: PingFangSC-Semibold, PingFang SC;
                        font-weight: 600;
                        color: #222222;
                     }
                     .top_left_content_time {
                        display: flex;
                        align-items: center;
                        image {
                           width: 26rpx;
                           height: 26rpx;
                           margin-right: 8rpx;
                        }
                        text {
                           font-size: 26rpx;
                           font-family: PingFangSC-Regular, PingFang SC;
                           font-weight: 400;
                           color: #666666;
                        }
                     }
                  }
               }
               .top_right {
                  width: 136rpx;
                  height: 56rpx;
                  line-height: 56rpx;
                  text-align: center;
                  background: #0055FF;
                  border-radius: 4rpx;
                  font-size: 24rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #FFFFFF;
               }
            }
            .bottom {
               width: 100%;
               margin-top: 30rpx;
               display: flex;
               align-items: flex-start;
               .bottom_label {
                  flex-shrink: 0;
                  font-size: 26rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #666666;
               }
               .bottom_content {
                  flex: 1;
                  flex-wrap: wrap;
                  font-size: 26rpx;
                  font-family: PingFangSC-Regular, PingFang SC;
                  font-weight: 400;
                  color: #333333;
               }
            }
         }
      }
   }
</style>