<template>
|
<page-meta :page-style="'overflow:'+(pageShow?'hidden':'visible')"></page-meta>
|
<view class="yuyue">
|
<view class="yuyue_head">
|
<view class="yuyue_head_input">
|
<u--input
|
placeholder="搜索"
|
prefixIcon="search"
|
v-model="meetingName"
|
@confirm="sou"
|
prefixIconStyle="font-size: 22px; color: #909399"
|
></u--input>
|
</view>
|
<view class="yuyue_head_list">
|
<view class="yuyue_head_list_item" v-for="(item, index) in cate" :key="index" @click="clickItem(index)">
|
<text :class="i === index ? 'yuyue_head_list_item_active' : ''">{{item.name}}</text>
|
<view class="yuyue_head_list_item_h" v-show="i === index"></view>
|
</view>
|
</view>
|
</view>
|
|
<view class="yuyue_content" v-if="list && list.length > 0">
|
<view class="yuyue_content_item" v-for="(item, index) in list" :key="index">
|
<view class="item_a" @click="jump(item.id)">
|
<view class="item_a_title">{{item.meetingName}}</view>
|
<view class="item_a_1 item_a_two" v-if="item.meetingStatus === 1">未开始</view>
|
<view class="item_a_1 item_a_one" v-else-if="item.meetingStatus === 2">进行中</view>
|
<view class="item_a_1 item_a_three" v-else>已结束</view>
|
</view>
|
<view class="item_b" @click="jump(item.id)"></view>
|
<view class="item_c" @click="jump(item.id)">
|
<view class="item_c_item">
|
<text>会议时间：</text>
|
<text>{{item.meetingDate}} {{item.meetingTime}}</text>
|
</view>
|
<view class="item_c_item">
|
<text>会议室：</text>
|
<text>{{item.roomName}}</text>
|
</view>
|
<view class="item_c_item">
|
<text>预约人：</text>
|
<text>{{item.bookingUser}}</text>
|
</view>
|
</view>
|
<view class="item_d" v-if="i === 0">
|
<view class="item_d_left">
|
<view class="item_d_left_item" @click.stop="copy(item)" v-if="item.meetingStatus !== 3">
|
<image src="@/static/icon/ic_copy@2x.png" mode="widthFix"></image>
|
<text>复制</text>
|
</view>
|
<view class="item_d_left_item" @click="fenxiang(item)" v-if="item.meetingStatus !== 3">
|
<button open-type="share"></button>
|
<image src="@/static/icon/ic_fenxiang@2x.png" mode="widthFix"></image>
|
<text>分享</text>
|
</view>
|
<view class="item_d_left_item" v-if="item.meetingStatus === 1" @click.stop="closeRoom(item.meetingStatus, item.id)">
|
<image src="@/static/icon/ic_cancel@2x.png" mode="widthFix"></image>
|
<text>取消</text>
|
</view>
|
</view>
|
<view class="item_d_right" @click.stop="getQrCodes(item.id, item.roomName)">
|
开门码
|
</view>
|
</view>
|
</view>
|
</view>
|
|
<view class="yuyue_content" v-else>
|
<view class="yuyue_content_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">二维码{{time}}秒内有效</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>
|
<text class="box_d">如果打不开请联系管理员：</text>
|
<text class="box_e">李红和 18899039483</text> -->
|
</view>
|
</u-popup>
|
</view>
|
|
<!-- 取消会议 -->
|
<u-modal
|
:show="show1"
|
title="提示"
|
content='是否确认取消当前会议'
|
@confirm="confirm"
|
@cancel="close1"
|
ref="uModal"
|
:showCancelButton="true"
|
asyncClose="true"></u-modal>
|
</view>
|
</template>
|
|
<script>
|
import { mapState } from 'vuex'
|
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
|
export default {
|
data() {
|
return {
|
i: 0,
|
show: false,
|
cate: [
|
{ name: '未开始', id: 1 },
|
{ name: '已结束', id: 2 }
|
],
|
pageShow: false,
|
id: '',
|
meetingName: '',
|
show1: false,
|
val: '',
|
list: [],
|
next: false,
|
page: 0,
|
time: 0,
|
roomName: '',
|
link: '',
|
qrurl: '',
|
timer: null,
|
timeValue: '',
|
Id: '',
|
share: {
|
title: '',
|
path: '',
|
imageUrl: 'https://dmtest.ahapp.net/file/projects/20230511/13f256b832db4a4fadc5e6770f5727bf.png'
|
}
|
};
|
},
|
computed: {
|
...mapState(['token'])
|
},
|
components: { tkiQrcode },
|
onReachBottom() {
|
this.getList()
|
},
|
onLoad() {
|
this.getList()
|
this.getSYSTEM()
|
},
|
onShareAppMessage({from,target}) {
|
if (from == 'button') {
|
return this.share
|
}
|
},
|
methods: {
|
// 分享
|
fenxiang(item) {
|
this.share.title = item.meetingName
|
this.share.path = `/packagesMine/meetingDetails/meetingDetails?shareId=${item.id}`
|
},
|
// 刷新二维码
|
Refresh(type) {
|
if (this.time !== 0) return
|
uni.showLoading({
|
title: '加载中',
|
mask: true
|
});
|
uni.request({
|
url: `${this.$baseUrl}web/meeting/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_OPENBOOK_VALIDTIME'
|
}).then(res => {
|
this.time = Number(res.data.code) * 60
|
this.timeValue = Number(res.data.code)
|
})
|
this.$u.api.getSystemDictData({
|
dictCode: 'SYSTEM',
|
label: 'H5_LINK_ADDR'
|
}).then(res => {
|
this.link = res.data.code
|
})
|
},
|
sou() {
|
this.list = []
|
this.next = false
|
this.page = 0
|
this.getList()
|
},
|
copy(item) {
|
let val = `${item.bookingUser} 邀请您加入会议
|
会议主题：${item.meetingName}
|
会议室：${item.roomName}
|
会议时间：${item.meetingDate} ${item.meetingTime}
|
点击链接直接加入会议：
|
${this.link}?id=${item.id}`
|
uni.setClipboardData({
|
data: val,
|
success: function () {
|
uni.showToast({
|
title: '会议信息复制成功，去分享给同事吧~',
|
icon:'none',
|
duration: 2000
|
});
|
}
|
});
|
},
|
close1() {
|
this.show1 = false
|
},
|
closeRoom(status, id) {
|
if (status !== 1) {
|
uni.showToast({
|
title: '会议不可取消',
|
icon: "none",
|
duration: 2000
|
});
|
return
|
}
|
this.id = id
|
this.show1 = true;
|
},
|
confirm() {
|
this.$u.api.reservationCancel({
|
id: this.id
|
}).then(res => {
|
this.show1 = false;
|
if (res.code === 200) {
|
uni.showToast({
|
title: '取消成功',
|
icon: "none",
|
duration: 2000
|
});
|
this.list.forEach((item, index) => {
|
if (item.id === this.id) {
|
this.list.splice(index, 1)
|
}
|
})
|
}
|
})
|
},
|
jump(id) {
|
uni.navigateTo({
|
url: `/packagesMine/meetingDetails/meetingDetails?id=${id}`
|
});
|
},
|
close() {
|
this.time = 0
|
clearInterval(this.timer)
|
this.timer = null
|
this.show = false
|
this.pageShow = false
|
uni.setScreenBrightness({
|
value: 0.5,
|
success: function () {
|
console.log('success');
|
}
|
});
|
},
|
getQrCodes(id, roomName) {
|
this.Id = id
|
this.time = 0
|
this.Refresh()
|
this.time = this.timeValue * 60
|
this.getTime()
|
this.pageShow = true
|
this.roomName = roomName
|
|
this.show = true
|
uni.setScreenBrightness({
|
value: 1,
|
success: function () {
|
console.log('success');
|
}
|
});
|
},
|
clickItem(index) {
|
this.i = index
|
this.list = []
|
this.next = false
|
this.page = 0
|
this.getList()
|
},
|
getList() {
|
if (!this.next) {
|
this.page = this.page + 1
|
this.$u.api.myMeetingPage({
|
capacity: 10,
|
page: this.page,
|
model: {
|
queryType: 2,
|
roomsName: this.meetingName,
|
status: this.cate[this.i].id
|
}
|
}).then(res => {
|
if (res.data.records.length > 0) {
|
this.list = [...this.list, ...res.data.records]
|
}
|
if (res.data.records.length < 10) {
|
this.next = true
|
}
|
})
|
}
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss">
|
.yuyue {
|
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;
|
}
|
}
|
}
|
}
|
.yuyue_head {
|
padding: 30rpx;
|
background-color: #ffffff;
|
box-sizing: border-box;
|
position: sticky;
|
top: 0;
|
z-index: 999;
|
.yuyue_head_input /deep/ {
|
width: 100%;
|
height: 72rpx;
|
background: #F7F7F7;
|
border-radius: 4rpx;
|
.u-border {
|
border: none !important;
|
}
|
}
|
.yuyue_head_list {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
margin-top: 30rpx;
|
.yuyue_head_list_item {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
flex-direction: column;
|
position: relative;
|
text {
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
}
|
.yuyue_head_list_item_active {
|
font-size: 30rpx;
|
font-family: PingFangSC-Medium, PingFang SC;
|
font-weight: 500;
|
color: #222222;
|
}
|
.yuyue_head_list_item_h {
|
width: 60rpx;
|
height: 4rpx;
|
background: #0055FF;
|
border-radius: 3rpx;
|
position: absolute;
|
bottom: -30rpx;
|
left: 50%;
|
transform: translate(-50%, 0);
|
}
|
}
|
}
|
}
|
.yuyue_content {
|
width: 100%;
|
padding: 20rpx 30rpx;
|
box-sizing: border-box;
|
.yuyue_content_wu {
|
width: 100%;
|
margin-top: 50rpx;
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
image {
|
width: 340rpx;
|
height: 364rpx;
|
}
|
}
|
.yuyue_content_item {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background: #ffffff;
|
margin-bottom: 20rpx;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
.item_a {
|
width: 100%;
|
height: 50rpx;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.item_a_title {
|
flex: 1;
|
white-space: nowrap;
|
text-overflow: ellipsis;
|
overflow: hidden;
|
font-size: 32rpx;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #222222;
|
}
|
.item_a_one {
|
border: 2rpx solid #F62710 !important;
|
font-size: 22rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #F62710;
|
}
|
.item_a_two {
|
border: 2rpx solid #0055FF !important;
|
font-size: 22rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #0055FF;
|
}
|
.item_a_three {
|
border: 2rpx solid #999999 !important;
|
font-size: 22rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #999999;
|
}
|
.item_a_1 {
|
flex-shrink: 0;
|
padding: 0 8rpx;
|
height: 38rpx;
|
box-sizing: border-box;
|
line-height: 38rpx;
|
text-align: center;
|
border-radius: 4rpx;
|
margin-left: 20rpx;
|
}
|
}
|
.item_b {
|
width: 100%;
|
height: 1rpx;
|
background-color: #E5E5E5;
|
margin: 28rpx 0 30rpx 0;
|
}
|
.item_c {
|
width: 100%;
|
display: flex;
|
flex-direction: column;
|
.item_c_item {
|
display: flex;
|
align-items: flex-start;
|
margin-bottom: 24rpx;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
text {
|
&:first-child {
|
flex-shrink: 0;
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
}
|
&:last-child {
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #333333;
|
}
|
}
|
}
|
}
|
.item_d {
|
width: 100%;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
margin-top: 40rpx;
|
.item_d_left {
|
display: flex;
|
align-items: center;
|
.item_d_left_item {
|
display: flex;
|
align-items: center;
|
justify-content: center;
|
margin-right: 40rpx;
|
position: relative;
|
overflow: hidden;
|
&:last-child {
|
margin-right: 0 !important;
|
}
|
button {
|
position: absolute;
|
width: 300rpx;
|
height: 300rpx;
|
border: none;
|
top: -20rpx;
|
left: -20rpx;
|
background: rgba(0, 0, 0, 0);
|
}
|
image {
|
width: 44rpx;
|
height: 44rpx;
|
margin-right: 8rpx;
|
}
|
text {
|
font-size: 26rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
}
|
}
|
}
|
.item_d_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;
|
}
|
}
|
}
|
}
|
}
|
</style>
|
