<template>
|
<page-meta :page-style="'overflow:'+(pageShow?'hidden':'visible')"></page-meta>
|
<view class="details">
|
<view class="details_head">
|
<text>{{info.meetingName || ''}}</text>
|
<text>{{info.roomName || ''}}｜{{info.meetingDate || ''}} {{info.meetingTime || ''}}</text>
|
</view>
|
<view class="details_content">
|
<view class="details_content_item">
|
<view class="label">参会人员</view>
|
<view class="content" v-if="info.userResponseList && info.userResponseList.length > 0">
|
<text v-for="(item, index) in info.userResponseList" :key="index">
|
{{ item.realname }}({{item.departmentName}})<template v-if="index !== info.userResponseList.length - 1">；</template>
|
</text>
|
</view>
|
</view>
|
<view class="details_content_item" v-if="info.meetingContent">
|
<view class="label">会议内容</view>
|
<view class="content">
|
<text>{{info.meetingContent || ''}}</text>
|
</view>
|
</view>
|
<view class="details_content_item" v-if="info.projectsResponseList && info.projectsResponseList.length > 0">
|
<view class="label">服务项</view>
|
<view class="content" v-if="info.projectsResponseList && info.projectsResponseList.length > 0">
|
<text v-for="(item, index) in info.projectsResponseList" :key="index">
|
{{item.name}}<template v-if="index !== info.projectsResponseList.length - 1"> | </template>
|
</text>
|
</view>
|
<view class="content" v-else>
|
<text>无服务项</text>
|
</view>
|
</view>
|
<view class="details_content_item">
|
<view class="label">附件</view>
|
<view class="list" v-if="info.multiFileList && info.multiFileList.length > 0">
|
<view class="list_item" v-for="(item, index) in info.multiFileList" :key="index">
|
<u--text mode="link" :text="item.name" :href="item.fileFullUrl + item.fileurl"></u--text>
|
</view>
|
</view>
|
<view class="content" v-else>
|
<text>无</text>
|
</view>
|
</view>
|
<view class="details_content_item" v-if="info.remark">
|
<view class="label">备注</view>
|
<view class="content">
|
<text>{{info.remark || ''}}</text>
|
</view>
|
</view>
|
</view>
|
<view class="details_content">
|
<view class="details_content_item">
|
<view class="label">预约人</view>
|
<view class="content">
|
<text>{{info.bookingUser.departmentName || ''}} {{info.bookingUser.realname || ''}} {{info.bookingUser.mobile || ''}}</text>
|
</view>
|
</view>
|
</view>
|
<!-- 内部用户自己发布 -->
|
<view class="details_footer" v-if="userInfo.id === info.bookingUser.id && userInfo.type === 0 && info.meetingStatus !== 3">
|
<view class="details_footer_left">
|
<view class="item" @click="copy" v-if="info.meetingStatus === 1 || info.meetingStatus === 2">
|
<image src="@/static/icon/ic_copy@2x.png" mode="widthFix"></image>
|
<text>复制</text>
|
</view>
|
<view class="item" @click="edit" v-if="info.meetingStatus === 1">
|
<image src="@/static/icon/ic_edit@2x.png" mode="widthFix"></image>
|
<text>修改</text>
|
</view>
|
<view class="item" @click="closeRoom" v-if="info.meetingStatus === 1">
|
<image src="@/static/icon/ic_cancel@2x.png" mode="widthFix"></image>
|
<text>取消</text>
|
</view>
|
</view>
|
<view class="details_footer_right">
|
<view class="btn1">
|
<button open-type="share"></button>
|
分享
|
</view>
|
<view class="btn2" @click="open" v-if="isShow">开门码</view>
|
</view>
|
</view>
|
<!-- 内部用户不是自己发布 -->
|
<view class="details_footer" v-else-if="userInfo.id !== info.bookingUser.id && userInfo.type === 0 && info.meetingStatus !== 3">
|
<view class="details_footer_left">
|
<view class="item" @click="copy" v-if="info.meetingStatus === 1 || info.meetingStatus === 2">
|
<image src="@/static/icon/ic_copy@2x.png" mode="widthFix"></image>
|
<text>复制</text>
|
</view>
|
</view>
|
<view class="details_footer_right">
|
<view class="btn1">
|
<button open-type="share"></button>
|
分享
|
</view>
|
<view class="btn2" @click="open" v-if="isShow">开门码</view>
|
</view>
|
</view>
|
<!-- 访客 -->
|
<view class="details_footer" v-else-if="(!userInfo || userInfo.type === 1) && info.meetingStatus !== 3">
|
<button class="details_footer_submit" v-if="!userInfo" open-type="getPhoneNumber" @getphonenumber="getphonenumber">查看会议室开门码</button>
|
<view class="details_footer_submit" v-else @click="open">查看会议室开门码</view>
|
</view>
|
<view v-else></view>
|
<!-- 开门码 -->
|
<view class="details_ma">
|
<u-popup :show="show" :overlayStyle="{'touch-action':'none'}" :closeable="true" :safeAreaInsetBottom="false" :round="0" mode="center" @close="close">
|
<view class="box" @touchmove.stop.prevent="preventHandle">
|
<text class="box_a">{{info.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>
|
<text class="box_d" v-if="info.roomUser">如果打不开请联系管理员：</text>
|
<text class="box_e" v-if="info.roomUser">{{info.roomUser.realname}} <template v-if="info.roomUser.mobile">{{info.roomUser.mobile}}</template></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, mapMutations } from 'vuex'
|
import tkiQrcode from "@/components/tki-qrcode/tki-qrcode.vue"
|
export default {
|
data() {
|
return {
|
roomId: '',
|
pageShow: false,
|
show: false,
|
show1: false,
|
info: {},
|
val: '',
|
time: 0,
|
link: '',
|
qrurl: '',
|
timer: null,
|
timeValue: '',
|
isShow: false,
|
imageUrl: 'https://dmtest.ahapp.net/file/projects/20230511/13f256b832db4a4fadc5e6770f5727bf.png'
|
};
|
},
|
components: { tkiQrcode },
|
onLoad(options) {
|
// 扫码进入
|
if (options.scene) {
|
console.log('扫码进入')
|
let scene = decodeURIComponent(options.scene);
|
console.log(scene)
|
let roomId = scene.substring(0, scene.indexOf('|'))
|
this.roomId = roomId
|
}
|
// 分享进入
|
if (options.shareId) {
|
console.log('分享进入')
|
this.roomId = options.shareId
|
}
|
// 正常进入
|
if (options.id) {
|
this.roomId = options.id
|
}
|
this.getdesc()
|
this.getSYSTEM()
|
},
|
computed: {
|
...mapState(['userInfo', 'token'])
|
},
|
onShareAppMessage({from,target}) {
|
if (from == 'button') {
|
return {
|
title: this.info.meetingName,
|
path: `/packagesMine/meetingDetails/meetingDetails?shareId=${this.info.id}`,
|
imageUrl: this.imageUrl
|
}
|
}
|
},
|
methods: {
|
...mapMutations(["setToken", "setUserInfo"]),
|
// 刷新二维码
|
Refresh(type) {
|
if (this.time !== 0) return
|
uni.showLoading({
|
title: '加载中',
|
mask: true
|
});
|
uni.request({
|
url: `${this.$baseUrl}web/meeting/getQrCodeImg?id=${this.info.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();
|
}
|
});
|
},
|
onChange(e) {
|
this.timeData = e
|
},
|
preventHandle() {
|
return
|
},
|
getTime() {
|
this.timer = setInterval(() => {
|
if (this.time === 0) {
|
clearInterval(this.timer)
|
this.timer = null
|
this.time = 0
|
return
|
}
|
this.time = this.time - 1
|
}, 1000)
|
},
|
// 访客登录获取信息
|
getphonenumber(e) {
|
var that = this
|
if (e.detail.errMsg === 'getPhoneNumber:ok') {
|
uni.login({
|
provider: 'MP-WEIXIN',
|
success: function (loginRes) {
|
that.$u.api.visitorLogin({
|
code: loginRes.code
|
}).then(res => {
|
if (res.data.code === 500) {
|
that.$u.api.visitorWxPhone({
|
encryptedData: e.detail.encryptedData,
|
iv: e.detail.iv,
|
openId: res.data.openId,
|
sessionKey: res.data.sessionKey
|
}).then(resa => {
|
that.setToken(resa.data.token)
|
that.setUserInfo(resa.data.systemUser)
|
})
|
} else {
|
that.setToken(res.data.token)
|
that.setUserInfo(res.data.systemUser)
|
}
|
})
|
}
|
});
|
}
|
},
|
// 访客登录
|
wxlogin() {
|
var that = this
|
uni.login({
|
provider: 'MP-WEIXIN',
|
success: function (loginRes) {
|
that.$u.api.visitorLogin({
|
code: loginRes.code
|
}).then(res => {
|
that.setToken(res.data.token)
|
that.setUserInfo(res.data.systemUser)
|
})
|
}
|
});
|
},
|
getSYSTEM() {
|
this.$u.api.getSystemDictData({
|
dictCode: 'SYSTEM',
|
label: 'QR_OPENBOOK_VALIDTIME'
|
}).then(res => {
|
// this.time = res.data.code
|
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
|
})
|
},
|
edit() {
|
if (this.info.meetingStatus !== 1) {
|
uni.showToast({
|
title: '会议不可编辑',
|
icon: "none",
|
duration: 2000
|
});
|
return
|
}
|
uni.navigateTo({
|
url: `/packagesMine/confirmAppointment/confirmAppointment?roomId=${this.info.roomId}&descid=${this.info.id}&timeList=${JSON.stringify(this.info.bookingTimeList)}`
|
});
|
},
|
close1() {
|
this.show1 = false
|
},
|
confirm() {
|
var that = this
|
that.$u.api.reservationCancel({
|
id: that.roomId
|
}).then(res => {
|
that.show1 = false;
|
if (res.code === 200) {
|
that.getdesc()
|
uni.navigateBack({
|
delta: 1
|
});
|
}
|
})
|
},
|
closeRoom() {
|
this.show1 = true;
|
},
|
copy() {
|
let val = `${this.info.bookingUser.realname} 邀请您加入会议
|
会议主题：${this.info.meetingName}
|
会议室：${this.info.roomName}
|
会议时间：${this.info.meetingDate} ${this.info.meetingTime}
|
点击链接直接加入会议：
|
${this.link}?id=${this.info.id}`
|
uni.setClipboardData({
|
data: val,
|
success: function () {
|
uni.showToast({
|
title: '会议信息复制成功，去分享给同事吧~',
|
icon:'none',
|
duration: 2000
|
});
|
}
|
});
|
},
|
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');
|
}
|
});
|
},
|
open() {
|
var that = this
|
this.time = 0
|
|
this.Refresh(2)
|
|
this.time = this.timeValue * 60
|
this.getTime()
|
|
that.pageShow = true
|
|
that.show = true
|
uni.setScreenBrightness({
|
value: 1,
|
success: function () {
|
console.log('success');
|
}
|
});
|
},
|
getQrCodes() {
|
|
},
|
getdesc() {
|
this.$u.api.meetingDetail({ id: this.roomId })
|
.then(res => {
|
this.info = res.data
|
if (res.data.meetingStatus === 3) return
|
res.data.userResponseList.forEach(item => {
|
if (item.id === this.userInfo.id) {
|
this.isShow = true
|
}
|
})
|
if (!this.isShow && this.userInfo && this.userInfo.id) {
|
uni.showToast({
|
title: '您已经不在当前会议',
|
icon: 'none',
|
duration: 2000
|
});
|
}
|
})
|
},
|
qrR(e) {
|
console.log(e)
|
}
|
}
|
}
|
</script>
|
|
<style lang="scss" scoped>
|
.time {
|
@include flex;
|
align-items: center;
|
|
&__custom {
|
margin-top: 4px;
|
width: 22px;
|
height: 22px;
|
background-color: $u-primary;
|
border-radius: 4px;
|
/* #ifndef APP-NVUE */
|
display: flex;
|
/* #endif */
|
justify-content: center;
|
align-items: center;
|
|
&__item {
|
color: #fff;
|
font-size: 12px;
|
text-align: center;
|
}
|
}
|
|
&__doc {
|
color: $u-primary;
|
padding: 0px 4px;
|
}
|
|
&__item {
|
color: #606266;
|
font-size: 15px;
|
margin-right: 4px;
|
}
|
}
|
</style>
|
|
<style lang="scss" scoped>
|
.details {
|
width: 100%;
|
padding-bottom: calc(140rpx + env(safe-area-inset-bottom));
|
.details_head {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
display: flex;
|
flex-direction: column;
|
background-color: #ffffff;
|
text {
|
&:first-child {
|
font-size: 36rpx;
|
font-family: PingFangSC-Semibold, PingFang SC;
|
font-weight: 600;
|
color: #222222;
|
}
|
&:last-child {
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
margin-top: 30rpx;
|
}
|
}
|
}
|
.details_content {
|
width: 100%;
|
padding: 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
margin-top: 20rpx;
|
display: flex;
|
flex-direction: column;
|
.details_content_item {
|
display: flex;
|
flex-direction: column;
|
padding-bottom: 30rpx;
|
margin-top: 30rpx;
|
border-bottom: 1rpx solid #E5E5E5;
|
&:first-child {
|
margin-top: 0 !important;
|
}
|
&:last-child {
|
border: none !important;
|
padding-bottom: 0 !important;
|
}
|
.label {
|
font-size: 28rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
margin-bottom: 22rpx;
|
}
|
.list {
|
display: flex;
|
flex-direction: column;
|
.list_item {
|
width: 100%;
|
word-break: break-all;
|
margin-bottom: 24rpx;
|
&:last-child {
|
margin-bottom: 0 !important;
|
}
|
}
|
}
|
.content {
|
display: flex;
|
align-items: center;
|
flex-wrap: wrap;
|
text {
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #222222;
|
}
|
}
|
}
|
}
|
.details_footer {
|
width: 100%;
|
padding: 20rpx 30rpx calc(20rpx + env(safe-area-inset-bottom)) 30rpx;
|
box-sizing: border-box;
|
background-color: #ffffff;
|
position: fixed;
|
bottom: 0;
|
left: 0;
|
display: flex;
|
align-items: center;
|
justify-content: space-between;
|
.details_footer_submit {
|
width: 100%;
|
height: 88rpx;
|
line-height: 88rpx;
|
text-align: center;
|
background: #0055FF;
|
border-radius: 4rpx;
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
.details_footer_left {
|
display: flex;
|
align-items: center;
|
.item {
|
display: flex;
|
flex-direction: column;
|
margin-right: 40rpx;
|
image {
|
width: 44rpx;
|
height: 44rpx;
|
}
|
text {
|
font-size: 20rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #666666;
|
margin-top: 8rpx;
|
}
|
}
|
}
|
.details_footer_right {
|
flex: 1;
|
display: flex;
|
align-items: center;
|
.btn1 {
|
flex: 1;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
border-radius: 4rpx;
|
border: 2rpx solid #0055FF;
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #0055FF;
|
margin-right: 20rpx;
|
overflow: hidden;
|
position: relative;
|
button {
|
width: 100vw;
|
height: 300rpx;
|
position: absolute;
|
top: -20rpx;
|
left: -20rpx;
|
background: rgba(0, 0, 0, 0);
|
border: none;
|
z-index: 2;
|
}
|
}
|
.btn2 {
|
flex: 1;
|
height: 72rpx;
|
line-height: 72rpx;
|
text-align: center;
|
background: #0055FF;
|
box-shadow: 0rpx -1rpx 0rpx 0rpx #EEEEEE;
|
border-radius: 4rpx;
|
font-size: 30rpx;
|
font-family: PingFangSC-Regular, PingFang SC;
|
font-weight: 400;
|
color: #FFFFFF;
|
}
|
}
|
}
|
.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;
|
overflow: hidden;
|
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;
|
}
|
}
|
}
|
}
|
|
|
}
|
</style>
|
