SmartParks_uniapp/pages/sys/workbench/meet/reservation.vue

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