miniprogram-linejoy/src/components/room/RoomCode.vue

<template>
  <view class="room-code">
    <view class="room-code__title">房间码</view>
    <view class="room-code__value">{{ roomId }}</view>
    <view class="room-code__actions">
      <nut-button size="small" color="#FFB11B" @click="handleShare">邀请好友</nut-button>
      <nut-button size="small" plain @click="handleCopy">复制房间码</nut-button>
    </view>

    <!-- 分享弹窗 -->
    <nut-dialog
      title="分享房间"
      content="邀请好友扫描二维码加入房间"
      v-model:visible="showDialog"
      footer-direction="horizontal"
    >
      <template #footer>
        <view class="share-dialog-content">
          <view class="qrcode-container">
            <canvas canvas-id="qrcode" id="qrcode" class="qrcode-canvas" />
          </view>
          <view class="room-info">
            <view class="room-id">房间号: {{ roomId }}</view>
            <view class="game-id" v-if="gameId">游戏ID: {{ gameId }}</view>
            <view class="room-password" v-if="password">
              密码: {{ password }}
            </view>
          </view>
        </view>
      </template>
    </nut-dialog>
  </view>
</template>

<script setup lang="ts">
import { defineProps, defineEmits, ref } from 'vue';
import Taro from '@tarojs/taro';
import drawQrcode from 'weapp-qrcode';

const props = defineProps({
  roomId: { type: String, required: true },
  gameId: { type: String, default: '' },
  password: { type: String, default: '' }
});

const emit = defineEmits(['share', 'copy']);
const showDialog = ref(false);

// 生成二维码和复制内容的统一方法
function buildRoomLink() {
  let roomData = `room?id=${props.roomId}`;
  if (props.gameId) roomData += `&gameId=${props.gameId}`;
  if (props.password) roomData += `&pwd=${props.password}`;
  return roomData;
}

const generateQRCode = () => {
  const roomData = buildRoomLink();
  if (!props.roomId) return;
  try {
    drawQrcode({
      width: 200,
      height: 200,
      canvasId: 'qrcode',
      text: roomData,
      background: '#ffffff',
      foreground: '#000000',
      ctx: Taro.createCanvasContext('qrcode'),
    });
  } catch (error) {
    console.error('生成二维码失败:', error);
  }
};

const handleShare = () => {
  showDialog.value = true;
  setTimeout(() => {
    generateQRCode();
  }, 300);
  emit('share', buildRoomLink());
};

const handleCopy = () => {
  const roomData = buildRoomLink();
  Taro.setClipboardData({
    data: roomData,
    success: () => {
      Taro.showToast({
        title: '房间链接已复制',
        icon: 'success',
        duration: 2000,
      });
      emit('copy', roomData); // 传递完整链接
    },
  });
};
</script>

<style lang="scss">
.room-code {
  text-align: center;
  padding: $spacing-mini; // 保留卡片整体内边距
  background-color: $background-color-light;
  border-radius: $border-radius-base;
  margin-bottom: $spacing-medium;
  box-shadow: $shadow-light;

  &__title {
    font-size: $font-size-small;
    color: $text-color-secondary;
    padding-top: $spacing-base; // 标题与顶部距离
    margin-bottom: 0; // 移除下方 margin，改用 value 的 margin-top
  }

  &__value {
    font-size: $font-size-xlarge;
    font-weight: $font-weight-bold;
    color: $text-color-primary;
    margin: $spacing-base 0 $spacing-base; // 简写：上、左右、下
  }

  &__actions {
    display: flex;
    justify-content: center;
    gap: $spacing-base;
    padding-bottom: $spacing-base;
  }
}

.share-dialog-content {
  padding: $spacing-medium;
  
  .qrcode-container {
    margin: 0 auto;
    width: 200px;
    height: 200px;
    background-color: white;
    border-radius: $border-radius-small;
    box-shadow: $shadow-light;

    .qrcode-canvas {
      width: 100%;
      height: 100%;
    }
  }

  .room-info {
    margin-top: $spacing-large;
    text-align: center;
    
    .room-id, .game-id, .room-password {
      font-size: $font-size-medium;
      margin-bottom: $spacing-small;
      color: $text-color-primary;
    }
    
    .room-password {
      color: $text-color-orange;
      font-weight: $font-weight-medium;
    }
  }
}
</style>