roomcode调整

src/components/room/RoomCode.vue

@@ -21,6 +21,7 @@
           </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>
@@ -32,43 +33,40 @@
 </template>
 
 <script setup lang="ts">
-import { defineProps, ref } from 'vue';
+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);
 
-// 生成二维码
-const generateQRCode = () => {
-  if (!props.roomId) return;
-
-  // 构建房间链接数据
+// 生成二维码和复制内容的统一方法
+function buildRoomLink() {
   let roomData = `room?id=${props.roomId}`;
-  if (props.password) {
-    roomData += `&pwd=${props.password}`;
-  }
+  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 {
-      console.log('开始生成二维码:', roomData);
-      
-      // 使用 weapp-qrcode 绘制二维码到 Canvas
-      drawQrcode({
-        width: 200,
-        height: 200,
-        canvasId: 'qrcode', // Canvas 的 ID
-        text: roomData,
-        // 以下是可选的配置
-        background: '#ffffff',
-        foreground: '#000000',
-        ctx: Taro.createCanvasContext('qrcode'), // 显式提供上下文
-      });
-      
-      console.log('二维码生成完成');
+    drawQrcode({
+      width: 200,
+      height: 200,
+      canvasId: 'qrcode',
+      text: roomData,
+      background: '#ffffff',
+      foreground: '#000000',
+      ctx: Taro.createCanvasContext('qrcode'),
+    });
   } catch (error) {
     console.error('生成二维码失败:', error);
   }
@@ -76,22 +74,23 @@ const generateQRCode = () => {
 
 const handleShare = () => {
   showDialog.value = true;
-  
-  // 等待弹窗完全显示后再生成二维码
   setTimeout(() => {
     generateQRCode();
   }, 300);
+  emit('share', buildRoomLink());
 };
 
 const handleCopy = () => {
+  const roomData = buildRoomLink();
   Taro.setClipboardData({
-    data: props.roomId,
+    data: roomData,
     success: () => {
       Taro.showToast({
-        title: '房间码已复制',
+        title: '房间链接已复制',
         icon: 'success',
         duration: 2000,
       });
+      emit('copy', roomData); // 传递完整链接
     },
   });
 };
@@ -101,8 +100,14 @@ const handleCopy = () => {
 .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
   }
@@ -110,6 +115,7 @@ const handleCopy = () => {
   &__value {
     font-size: $font-size-xlarge;
     font-weight: $font-weight-bold;
+    color: $text-color-primary;
     margin: $spacing-base 0 $spacing-base; // 简写：上、左右、下
   }
 
@@ -117,14 +123,20 @@ const handleCopy = () => {
     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%;
@@ -133,8 +145,19 @@ const handleCopy = () => {
   }
 
   .room-info {
-    margin-top: 20px;
+    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>

src/pages/room/waiting/index.vue

@@ -290,13 +290,13 @@ export default {
     }
     
     // 处理复制按钮点击
-    const handleCopy = (code: string) => {
-      console.log('房间码已复制:', code)
+    const handleCopy = (link: string) => {
+      console.log('房间链接已复制:', link)
     }
     
     // 处理分享按钮点击
-    const handleShare = (code: string) => {
-      console.log('分享房间码:', code)
+    const handleShare = (link: string) => {
+      console.log('分享房间链接:', link)
     }
     
     // 页面加载时初始化