| ¶Ô±ÈÐÂÎļþ |
| | |
| | | <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>
|