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