完善会议管理界面
This commit is contained in:
504
pages/sys/workbench/meet/reservation.vue
Normal file
504
pages/sys/workbench/meet/reservation.vue
Normal file
@@ -0,0 +1,504 @@
|
||||
<template>
|
||||
<view class="container" :class="pageStatus">
|
||||
<!-- 水印状态 -->
|
||||
<view class="status-watermark" :class="statusClass">
|
||||
{{ statusText }}
|
||||
</view>
|
||||
|
||||
<!-- 会议室信息卡片 -->
|
||||
<view class="info-card">
|
||||
<text class="room-name">1号会议室</text>
|
||||
<text class="time-slot">10:00------12:00</text>
|
||||
</view>
|
||||
|
||||
<!-- 会议详情信息 -->
|
||||
<view class="detail-section">
|
||||
<view class="detail-item">
|
||||
<text class="label">发起人</text>
|
||||
<text class="value">{{ organizer }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">会议主题</text>
|
||||
<text class="value">{{ meetingTheme }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">会议时间</text>
|
||||
<text class="value">{{ meetingTime }}</text>
|
||||
</view>
|
||||
<view class="detail-item">
|
||||
<text class="label">会议人数</text>
|
||||
<text class="value">{{ attendeesCount }}人</text>
|
||||
</view>
|
||||
|
||||
|
||||
<!-- 签到二维码 -->
|
||||
<view class="qr-code-section" v-if="pageStatus === 'started' || pageStatus === 'ended'">
|
||||
<text class="qr-title">签到二维码</text>
|
||||
<view class="qr-code-container"
|
||||
:class="{'disabled-qrcode': pageStatus === 'ended'}"
|
||||
@longpress="saveQRCode">
|
||||
<canvas id="qrcode" canvas-id="qrcode" style="width: 200px;height: 200px;"></canvas>
|
||||
</view>
|
||||
<text class="qr-tip" v-if="pageStatus === 'started'">长按保存</text>
|
||||
<text v-if="pageStatus === 'ended'">二维码已失效</text>
|
||||
</view>
|
||||
|
||||
<!-- 签到信息 -->
|
||||
<view class="detail-item" v-if="pageStatus !== 'pending' && pageStatus !== 'checkin'">
|
||||
<text class="label">已签到人数</text>
|
||||
<text class="value">{{ checkedInCount }}人</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="attendees-avatars"
|
||||
v-if="pageStatus !== 'pending' && pageStatus !== 'checkin' && checkedInAttendees.length > 0">
|
||||
<view class="avatars-container">
|
||||
<view class="avatar-item" v-for="(attendee, index) in checkedInAttendees" :key="index">
|
||||
<image class="avatar" :src="attendee.avatar" mode="aspectFill"></image>
|
||||
<text class="avatar-name">{{ attendee.name }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 底部操作按钮 -->
|
||||
<view class="action-buttons" v-if="pageStatus === 'pending'|| pageStatus === 'checkin'">
|
||||
<!-- 待确认状态 -->
|
||||
<template v-if="pageStatus === 'pending'">
|
||||
<view class="button-row">
|
||||
<button class="cancel-btn" @click="cancelMeeting">取消会议</button>
|
||||
<button class="modify-btn" @click="modifyMeeting">修改会议</button>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
|
||||
<!-- 待签到状态 - 仅在未签到显示 -->
|
||||
<template v-if="pageStatus === 'checkin' && !hasCheckedIn">
|
||||
<button class="checkin-btn" @click="checkIn">点击签到</button>
|
||||
</template>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import uQRCode from 'uqrcodejs';
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
// 页面状态
|
||||
pageStatus: 'started',
|
||||
|
||||
// 会议信息
|
||||
organizer: '张芳',
|
||||
meetingTheme: '夏日火灾防灾培训',
|
||||
meetingTime: '2025-07-10 10:00-12:00',
|
||||
attendeesCount: 20,
|
||||
checkedInCount: 6,
|
||||
checkedInAttendees: [
|
||||
{name: '张三', avatar: '/static/ic_avg.png'},
|
||||
{name: '李四', avatar: '/static/ic_avg.png'},
|
||||
{name: '王五', avatar: '/static/ic_avg.png'},
|
||||
{name: '赵六', avatar: '/static/ic_avg.png'},
|
||||
{name: '钱七', avatar: '/static/ic_avg.png'},
|
||||
{name: '钱七', avatar: '/static/ic_avg.png'},
|
||||
{name: '钱七', avatar: '/static/ic_avg.png'},
|
||||
{name: '钱七', avatar: '/static/ic_avg.png'},
|
||||
{name: '钱七', avatar: '/static/ic_avg.png'},
|
||||
{name: '钱七', avatar: '/static/ic_avg.png'},
|
||||
{name: '钱七', avatar: '/static/ic_avg.png'}
|
||||
],
|
||||
// 签到状态
|
||||
hasCheckedIn: false,
|
||||
|
||||
// 二维码数据
|
||||
qrData: "二维码已失效"
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
statusText() {
|
||||
return this.hasCheckedIn ? '已签到' : '未签到';
|
||||
},
|
||||
statusClass() {
|
||||
return {
|
||||
'pending-tag': this.pageStatus === 'pending',
|
||||
'started-tag': this.pageStatus === 'started',
|
||||
'ended-tag': this.pageStatus === 'ended',
|
||||
'checkin-tag': this.pageStatus === 'checkin' && !this.hasCheckedIn,
|
||||
'checked-tag': this.hasCheckedIn
|
||||
};
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
// 生成二维码
|
||||
makeQRCode() {
|
||||
const qr = new uQRCode();
|
||||
qr.data = this.qrData;
|
||||
qr.size = 200;
|
||||
qr.make();
|
||||
|
||||
const canvasContext = uni.createCanvasContext('qrcode', this);
|
||||
qr.canvasContext = canvasContext;
|
||||
qr.drawCanvas();
|
||||
},
|
||||
|
||||
// 签到方法
|
||||
checkIn() {
|
||||
uni.vibrateShort();
|
||||
this.hasCheckedIn = true;
|
||||
this.checkedInCount += 1;
|
||||
uni.showToast({
|
||||
title: '签到成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
// 保存二维码方法
|
||||
saveQRCode() {
|
||||
if (this.pageStatus === 'ended') return; // 已结束的二维码不能保存
|
||||
|
||||
uni.showLoading({
|
||||
title: '保存中...'
|
||||
});
|
||||
|
||||
// 获取canvas临时路径
|
||||
uni.canvasToTempFilePath({
|
||||
canvasId: 'qrcode',
|
||||
success: (res) => {
|
||||
// 保存到相册
|
||||
uni.saveImageToPhotosAlbum({
|
||||
filePath: res.tempFilePath,
|
||||
success: () => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存成功',
|
||||
icon: 'success'
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '保存失败',
|
||||
icon: 'none'
|
||||
});
|
||||
console.error('保存失败:', err);
|
||||
}
|
||||
});
|
||||
},
|
||||
fail: (err) => {
|
||||
uni.hideLoading();
|
||||
uni.showToast({
|
||||
title: '生成图片失败',
|
||||
icon: 'none'
|
||||
});
|
||||
console.error('生成临时路径失败:', err);
|
||||
}
|
||||
}, this);
|
||||
},
|
||||
|
||||
// 返回
|
||||
goBack() {
|
||||
uni.navigateBack();
|
||||
},
|
||||
|
||||
// 取消会议
|
||||
cancelMeeting() {
|
||||
uni.showModal({
|
||||
title: '确认取消',
|
||||
content: '确定要取消本次会议吗？',
|
||||
success: (res) => {
|
||||
if (res.confirm) {
|
||||
uni.showToast({
|
||||
title: '会议已取消',
|
||||
icon: 'success'
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
// 修改会议
|
||||
modifyMeeting() {
|
||||
uni.navigateTo({
|
||||
url: '/pages/meeting/modify'
|
||||
});
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.makeQRCode();
|
||||
},
|
||||
watch: {
|
||||
pageStatus(newVal) {
|
||||
if (newVal === 'started' || newVal === 'ended') {
|
||||
this.$nextTick(() => {
|
||||
this.makeQRCode();
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss">
|
||||
.container {
|
||||
padding: 30rpx;
|
||||
background-color: #fff;
|
||||
height: calc(100vh - (44px + env(safe-area-inset-top)));
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
.status-watermark {
|
||||
position: absolute;
|
||||
top: 7%;
|
||||
left: 42%;
|
||||
transform: translate(50%, 50%) rotate(45deg);
|
||||
width: 240rpx;
|
||||
height: 240rpx;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-size: 40rpx;
|
||||
font-weight: bold;
|
||||
opacity: 0.5;
|
||||
z-index: 0;
|
||||
|
||||
&.pending-tag {
|
||||
color: #ff9500;
|
||||
border: 8rpx solid #ff9500;
|
||||
}
|
||||
|
||||
&.started-tag {
|
||||
color: #09bb07;
|
||||
border: 8rpx solid #09bb07;
|
||||
}
|
||||
|
||||
&.ended-tag {
|
||||
color: #999;
|
||||
border: 8rpx solid #999;
|
||||
}
|
||||
|
||||
&.checkin-tag {
|
||||
color: #ff9500;
|
||||
border: 8rpx solid #ff9500;
|
||||
}
|
||||
|
||||
&.checked-tag {
|
||||
color: #007CFF;
|
||||
border: 8rpx solid #007CFF;
|
||||
}
|
||||
}
|
||||
|
||||
.info-card {
|
||||
background-color: #f0f7ff;
|
||||
border: 1rpx solid #4a90e2;
|
||||
width: 50%;
|
||||
border-radius: 12rpx;
|
||||
padding: 20rpx;
|
||||
margin: 0 auto 30rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.room-name {
|
||||
font-size: 32rpx;
|
||||
font-weight: bold;
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 10rpx;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.time-slot {
|
||||
font-size: 28rpx;
|
||||
color: #4a90e2;
|
||||
display: block;
|
||||
text-align: center;
|
||||
}
|
||||
}
|
||||
|
||||
.detail-section {
|
||||
border-radius: 12rpx;
|
||||
padding: 30rpx;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
font-family: NotoSansHans;
|
||||
|
||||
.detail-item {
|
||||
display: flex;
|
||||
margin-bottom: 32rpx;
|
||||
|
||||
&:last-child {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.label {
|
||||
font-weight: bold;
|
||||
width: 160rpx;
|
||||
font-size: 28rpx;
|
||||
color: #2B2B2B;
|
||||
}
|
||||
|
||||
.value {
|
||||
flex: 1;
|
||||
font-size: 28rpx;
|
||||
color: #626262;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.qr-code-section {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
padding: 30rpx 0;
|
||||
border-top: 1rpx dashed #eee;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
|
||||
.qr-title {
|
||||
font-size: 28rpx;
|
||||
color: #666;
|
||||
margin-bottom: 20rpx;
|
||||
}
|
||||
|
||||
.qr-tip {
|
||||
font-size: 24rpx;
|
||||
color: #999;
|
||||
}
|
||||
}
|
||||
|
||||
.qr-code-container {
|
||||
width: 380rpx;
|
||||
height: 380rpx;
|
||||
background-color: white;
|
||||
border-radius: 10rpx;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
overflow: hidden;
|
||||
z-index: 1;
|
||||
|
||||
&.disabled-qrcode {
|
||||
position: relative;
|
||||
|
||||
&::after {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background-color: rgba(0, 0, 0, 0.5);
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
canvas {
|
||||
filter: grayscale(100%);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.expired-notice {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
height: 100rpx;
|
||||
margin-top: 30rpx;
|
||||
color: #999;
|
||||
font-size: 28rpx;
|
||||
border-top: 1rpx dashed #eee;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.action-buttons {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
padding: 20rpx 30rpx;
|
||||
background-color: #fff;
|
||||
z-index: 10;
|
||||
margin-top: 30rpx;
|
||||
height: calc(66.66vh - 300rpx);
|
||||
min-height: 400rpx;
|
||||
justify-content: flex-end;
|
||||
padding-bottom: 60rpx;
|
||||
|
||||
.button-row {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
margin-bottom: 20rpx;
|
||||
|
||||
button {
|
||||
width: 48% !important;
|
||||
margin: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
button {
|
||||
height: 80rpx;
|
||||
line-height: 80rpx;
|
||||
border-radius: 40rpx;
|
||||
box-shadow: 5rpx 8rpx 5rpx #CAD0D5;
|
||||
font-size: 30rpx;
|
||||
margin: 10rpx 0;
|
||||
|
||||
&::after {
|
||||
border: none;
|
||||
}
|
||||
}
|
||||
|
||||
.cancel-btn, .back-btn {
|
||||
border: #007CFF 1px solid;
|
||||
background-color: #FFFFFF;
|
||||
color: #0090FF;
|
||||
}
|
||||
|
||||
.modify-btn, .checkin-btn {
|
||||
background-color: #2e93ff;
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.end-btn {
|
||||
width: 100%;
|
||||
background-color: #ff6b00;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
.attendees-avatars {
|
||||
padding: 20rpx 30rpx;
|
||||
|
||||
.avatars-container {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 20rpx;
|
||||
}
|
||||
|
||||
.avatar-item {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
width: 100rpx;
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 80rpx;
|
||||
height: 80rpx;
|
||||
border-radius: 50%;
|
||||
background-color: #f5f5f5;
|
||||
margin-bottom: 10rpx;
|
||||
border: 2rpx solid #4a90e2;
|
||||
}
|
||||
|
||||
.avatar-name {
|
||||
font-size: 24rpx;
|
||||
color: #333;
|
||||
text-align: center;
|
||||
width: 100%;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
}
|
||||
|
||||
</style>
|
||||
Reference in New Issue
Block a user