处理弹窗展示备注

pages/index/index.vue

@@ -13,7 +13,7 @@
 				<view class="room-grid-card">
 					<view class="grid-item-content">
 						<view class="room-name">{{room.room_name}}</view>
-						<view class="room-info">
+						<view class="room-info" @click="onShowInfoPopup(room)">
 							<view class="room-id" v-if="room.tel">尾号: {{room.tel}}</view>
 							<view class="remark" v-if="room.remarks">备注: {{room.remarks}}</view>
 						</view>
@@ -62,7 +62,22 @@
 					</nut-button>
 				</view>
 			</view>
-		</nut-popup>
+		</nut-popup>
+		
+		
+		
+		<!-- 弹出 -->
+		<nut-popup :custom-style="{ height: '50%' }" v-model:visible="visibleInfoPopup" position="bottom"
+			safe-area-inset-bottom :close-on-click-overlay="true" @close="onCloseInfoPopup">
+			<view>
+				<view class="title">{{tempRoom?.room_name}} </view>
+				<view class="room-info">
+					<view class="room-id" v-if="tempRoom?.tel">尾号: {{tempRoom.tel}}</view>
+					<view class="remark" v-if="tempRoom?.remarks">备注: {{tempRoom.remarks}}</view>
+				</view>
+			</view>
+		</nut-popup>
+		
 	</view>
 </template>
 
@@ -116,7 +131,21 @@
 		return {
 			'background-color': backgroundColor,
 		};
-	}
+	}
+	
+	const visibleInfoPopup = ref(false)
+	const onShowInfoPopup = (room) => {
+		console.log("----", room);
+		Object.assign(tempRoom, room)
+		visibleInfoPopup.value = true
+	}
+	const onCloseInfoPopup = () => {
+		Object.assign(tempRoom, {})
+		visibleInfoPopup.value = false
+		console.log("关闭");
+	};
+	
+	
 	const visiblePopup = ref(false)
 	const tempRoom = reactive({})
 	const onBooking = (room) => {
@@ -134,7 +163,9 @@
 		})
 		visiblePopup.value = false
 		console.log("关闭");
-	};
+	};
+	
+
 
 	const getRooms = () => {
 		console.log("房间");
@@ -288,5 +319,22 @@
 		font-size: 28rpx;
 		font-weight: 400;
 		text-align: center;
+	}
+	
+	.room-info {
+		text-align: left;
+		padding: 20rpx 20rpx;
+		color: #666;
+		width: 100%;
+		// min-height: 160rpx;
+		box-sizing: border-box;
+	
+		.room-id {
+			font-size: 28rpx;
+		}
+	
+		.remark {
+			font-size: 26rpx;
+		}
 	}
 </style>