diff --git a/api/live.js b/api/live.js
new file mode 100644
index 0000000..e577aab
--- /dev/null
+++ b/api/live.js
@@ -0,0 +1,75 @@
+/**
+ * 直播流相关 API
+ */
+import { http, Method } from "@/utils/request.js";
+
+/**
+ * 通过 id 获取直播间详情
+ * @param {string} id 直播流 ID
+ */
+export function getLiveRoomById(id) {
+  return http.request({
+    url: `live/room/${id}`,
+    method: Method.GET,
+  });
+}
+
+/**
+ * 观看的同时注册直播用户
+ * @param {string} liveRoomId 直播流 ID
+ */
+export function registerLiveViewUser(liveRoomId) {
+  return http.request({
+    url: `live/user/view`,
+    method: Method.POST,
+    params: { liveRoomId },
+  });
+}
+
+/**
+ * 发送直播消息
+ * @param {object} data LiveMessage
+ */
+export function sendLiveMessage(data) {
+  return http.request({
+    url: `live/message`,
+    method: Method.POST,
+    data,
+  });
+}
+
+/**
+ * 获取直播轮询聚合数据
+ * @param {string} id 直播流 ID
+ */
+export function getLivePollingData(id) {
+  return http.request({
+    url: `live/room/polling/${id}`,
+    method: Method.GET,
+    loading: false,
+  });
+}
+
+/**
+ * 领取直播间优惠券
+ * @param {string} liveRoomId 直播流 ID
+ * @param {string} couponId 优惠券 ID
+ */
+export function receiveLiveCoupon(liveRoomId, couponId) {
+  return http.request({
+    url: `promotion/coupon/receive/live/${liveRoomId}/${couponId}`,
+    method: Method.GET,
+    needToken: true,
+  });
+}
+
+/**
+ * 获取直播系统配置（LIVE_SETTING，含 imSdkAppid）
+ */
+export function getLiveSetting() {
+  return http.request({
+    url: "system/setting/get/LIVE_SETTING",
+    method: Method.GET,
+    loading: false,
+  });
+}
diff --git a/api/promotions.js b/api/promotions.js
index e7d5eae..69b4455 100644
--- a/api/promotions.js
+++ b/api/promotions.js
@@ -17,6 +17,23 @@ export function getLiveList(params) {
   });
 }
 
+/**
+ * 获取直播间详情
+ * @deprecated 请使用 api/live.js 中的 getLiveRoomById
+ * @param {number} roomId 直播间房间号
+ */
+export function getLiveDetail(roomId) {
+  return http.request({
+    url: `broadcast/studio`,
+    method: Method.GET,
+    params: {
+      pageNumber: 1,
+      pageSize: 1,
+      roomId,
+    },
+  });
+}
+
 /**
  * 获取当前拼团活动的未成团的会员
  */
diff --git a/manifest.json b/manifest.json
index 72a36da..8691191 100644
--- a/manifest.json
+++ b/manifest.json
@@ -208,11 +208,7 @@
             }
         },
         "plugins" : {},
-        // 直播插件注释
-        // "live-player-plugin" : {
-        //     "version" : "1.3.0",
-        //     "provider" : "wx2b03c6e691cd7370"
-        // }
+        "libVersion" : "3.5.8",
         "requiredPrivateInfos" : [ "chooseLocation", "getLocation" ]
     },
     "h5" : {
diff --git a/package.json b/package.json
index a158889..2f7c476 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,8 @@
   },
   "license": "ISC",
   "dependencies": {
+    "@tencentcloud/chat": "^3.5.5",
+    "mqtt": "^5.15.0",
     "sass": "^1.89.2",
     "uview-plus": "^3.4.72",
     "vuex": "^4.1.0"
diff --git a/pages.json b/pages.json
index 3063f6f..489b660 100644
--- a/pages.json
+++ b/pages.json
@@ -101,6 +101,13 @@
 					"style": {
 							"navigationBarTitleText": "专题"
 					}
+		},
+		{
+			"path": "pages/live/room",
+			"style": {
+				"navigationStyle": "custom",
+				"navigationBarTextStyle": "white"
+			}
 		}
 
 	],
diff --git a/pages/live/live-vertical.scss b/pages/live/live-vertical.scss
new file mode 100644
index 0000000..39f7bc9
--- /dev/null
+++ b/pages/live/live-vertical.scss
@@ -0,0 +1,235 @@
+.live-room-page {
+  width: 100%;
+  min-height: 100vh;
+}
+
+.live-detail-page-vertical {
+  width: 100vw;
+  height: 100vh;
+  background: #000;
+  position: relative;
+  overflow: hidden;
+}
+
+.live-container-vertical {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+}
+
+.live-box-vertical {
+  width: 100%;
+  height: 100%;
+  position: relative;
+
+  > video,
+  > live-player,
+  > .stream-player {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.capsule {
+  position: absolute;
+  top: calc(var(--status-bar-height, 44px) + 80rpx);
+  right: 20rpx;
+  display: flex;
+  align-items: center;
+  background: rgba(0, 0, 0, 0.5);
+  padding: 12rpx 20rpx;
+  border-radius: 30rpx;
+  color: #fff;
+  font-size: 24rpx;
+  z-index: 10;
+}
+
+.bottom-container-vertical {
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  z-index: 10;
+  padding-bottom: env(safe-area-inset-bottom);
+  background: linear-gradient(to top, rgba(0, 0, 0, 0.85), transparent);
+  transition: transform 0.3s ease, opacity 0.3s ease;
+
+  &.hidden {
+    transform: translateY(100%);
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.bottom-container-vertical .message-container {
+  padding: 0 24rpx;
+}
+
+.bottom-container-vertical .message-item {
+  border-bottom: none;
+  padding: 12rpx 0;
+}
+
+.bottom-container-vertical .username {
+  color: rgba(255, 255, 255, 0.75);
+}
+
+.bottom-container-vertical .message-text {
+  color: #fff;
+}
+
+.bottom-container-vertical .cart-btn {
+  position: absolute;
+  right: 20rpx;
+  bottom: 280rpx;
+  z-index: 20;
+}
+
+.product-showcase {
+  margin: 0 24rpx 16rpx;
+  padding: 16rpx;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 16rpx;
+  display: flex;
+  gap: 16rpx;
+}
+
+.product-image {
+  width: 160rpx;
+  height: 160rpx;
+  border-radius: 12rpx;
+  flex-shrink: 0;
+}
+
+.product-info {
+  flex: 1;
+  min-width: 0;
+}
+
+.product-name {
+  font-size: 26rpx;
+  color: #333;
+  font-weight: 600;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.product-tag {
+  display: inline-block;
+  background: linear-gradient(135deg, #ff4b2b, #ff416c);
+  color: #fff;
+  font-size: 20rpx;
+  padding: 4rpx 10rpx;
+  border-radius: 6rpx;
+  margin-right: 8rpx;
+}
+
+.product-sell-point {
+  font-size: 22rpx;
+  color: #999;
+  margin-top: 8rpx;
+}
+
+.product-price-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  margin-top: 12rpx;
+}
+
+.product-price {
+  color: #ff4b2b;
+  font-size: 32rpx;
+  font-weight: 700;
+
+  &.sold-out {
+    color: #999;
+  }
+}
+
+.buy-btn {
+  padding: 10rpx 24rpx;
+  border-radius: 28rpx;
+  font-size: 24rpx;
+  color: #fff;
+  background: linear-gradient(135deg, #ff4b2b, #ff416c);
+
+  &.sold-out {
+    background: #ccc;
+  }
+}
+
+.bottom-container-vertical .bottom-actions {
+  background: transparent;
+  border-top: none;
+}
+
+.bottom-container-vertical .input-box {
+  background: rgba(255, 255, 255, 0.15);
+}
+
+.bottom-container-vertical .input-content {
+  color: #fff;
+}
+
+.bottom-popup-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.3s ease, visibility 0.3s ease;
+
+  &.show {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
+.bottom-popup-container {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  background: #fff;
+  border-radius: 24rpx 24rpx 0 0;
+  max-height: 70vh;
+  transform: translateY(100%);
+  transition: transform 0.3s ease;
+
+  &.show {
+    transform: translateY(0);
+  }
+}
+
+.popup-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx;
+  border-bottom: 1rpx solid #eee;
+}
+
+.popup-title {
+  font-size: 32rpx;
+  font-weight: 600;
+  color: #333;
+}
+
+.popup-close {
+  font-size: 36rpx;
+  color: #999;
+}
+
+.popup-content {
+  padding: 20rpx;
+  max-height: calc(70vh - 100rpx);
+}
diff --git a/pages/live/live.scss b/pages/live/live.scss
new file mode 100644
index 0000000..dd21dbb
--- /dev/null
+++ b/pages/live/live.scss
@@ -0,0 +1,803 @@
+$theme-color: #ff6b35;
+$text-color: #333;
+$text-color-light: #666;
+$text-color-lighter: #999;
+$border-color: #eee;
+
+.flex {
+  display: flex;
+}
+.flex-a-c {
+  align-items: center;
+}
+.flex-j-sb {
+  justify-content: space-between;
+}
+
+.live-detail-page {
+  display: flex;
+  flex-direction: column;
+  min-height: 100vh;
+  background: #fff;
+}
+
+.live-container {
+  width: 100%;
+  background: #000;
+}
+
+.live-box {
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+
+  &.layout-horizontal {
+    height: 420rpx;
+  }
+
+  &.layout-triple {
+    height: 560rpx;
+  }
+
+  > video,
+  > live-player,
+  > .stream-player {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+  }
+}
+
+.live-cover-wrap,
+.cover-wrap {
+  position: absolute;
+  inset: 0;
+  z-index: 2;
+}
+
+.live-cover,
+.cover-img {
+  width: 100%;
+  height: 100%;
+}
+
+.cover-mask {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.45);
+}
+
+.status-tag {
+  padding: 12rpx 32rpx;
+  border-radius: 100rpx;
+  font-size: 28rpx;
+  color: #fff;
+  background: rgba(255, 255, 255, 0.2);
+  margin-bottom: 24rpx;
+
+  &.living {
+    background: linear-gradient(90deg, #ff6b35, #ff9f28);
+  }
+  &.pending {
+    background: rgba(96, 98, 102, 0.8);
+  }
+  &.paused {
+    background: rgba(255, 159, 40, 0.85);
+  }
+  &.ended {
+    background: rgba(96, 98, 102, 0.6);
+  }
+}
+
+.tips-text {
+  font-size: 26rpx;
+  color: rgba(255, 255, 255, 0.85);
+  margin-top: 8rpx;
+}
+
+.nav-back {
+  position: fixed;
+  top: calc(var(--status-bar-height, 44px) + 12rpx);
+  left: 24rpx;
+  z-index: 100;
+  width: 64rpx;
+  height: 64rpx;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.35);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.bottom-container {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  position: relative;
+  background: #fff;
+}
+
+.tab-container {
+  background: #fff;
+  border-bottom: 1rpx solid $border-color;
+}
+
+.tab-items {
+  display: flex;
+}
+
+.tab-item {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 88rpx;
+  font-size: 30rpx;
+  color: $text-color-light;
+  position: relative;
+
+  &.active {
+    color: $theme-color;
+    font-weight: 600;
+
+    &::after {
+      content: "";
+      position: absolute;
+      bottom: 0;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 48rpx;
+      height: 4rpx;
+      border-radius: 2rpx;
+      background: $theme-color;
+    }
+  }
+}
+
+.message-container {
+  flex: 1;
+  overflow: hidden;
+}
+
+.message-scroll,
+.live-intro-scroll {
+  height: 100%;
+  padding: 0 24rpx;
+  box-sizing: border-box;
+}
+
+.message-item {
+  display: flex;
+  align-items: flex-start;
+  padding: 20rpx 0;
+  border-bottom: 1rpx solid #f5f5f5;
+}
+
+.user-avatar {
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  flex-shrink: 0;
+  margin-right: 16rpx;
+  background: #f0f0f0;
+}
+
+.message-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.username {
+  font-size: 26rpx;
+  color: $text-color-light;
+  margin-bottom: 8rpx;
+  display: block;
+}
+
+.message-text {
+  font-size: 28rpx;
+  color: $text-color;
+  word-break: break-all;
+  line-height: 1.5;
+}
+
+.floating-right-container {
+  position: absolute;
+  right: 24rpx;
+  bottom: 180rpx;
+  z-index: 50;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-end;
+  gap: 24rpx;
+}
+
+.floating-recommend-card {
+  width: 260rpx;
+  background: rgba(255, 255, 255, 0.95);
+  border-radius: 20rpx;
+  padding: 12rpx;
+  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.12);
+}
+
+.floating-recommend-img-wrap {
+  width: 100%;
+  height: 236rpx;
+  border-radius: 14rpx;
+  overflow: hidden;
+  position: relative;
+  background: #f8f8f8;
+}
+
+.floating-recommend-img {
+  width: 100%;
+  height: 100%;
+}
+
+.floating-recommend-tag {
+  position: absolute;
+  top: 0;
+  left: 0;
+  background: linear-gradient(135deg, #ff3b30, #ff2d55);
+  color: #fff;
+  font-size: 20rpx;
+  padding: 6rpx 14rpx;
+  border-radius: 0 0 14rpx 0;
+  font-weight: 700;
+}
+
+.floating-recommend-info {
+  display: flex;
+  flex-direction: column;
+  gap: 6rpx;
+  padding: 0 4rpx 4rpx;
+}
+
+.floating-recommend-name {
+  font-size: 26rpx;
+  color: #1c1c1e;
+  font-weight: 600;
+  margin-top: 12rpx;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.floating-recommend-price {
+  color: #ff3b30;
+  font-weight: 700;
+  font-size: 34rpx;
+  margin-top: 6rpx;
+}
+
+.cart-btn {
+  display: flex;
+  justify-content: flex-end;
+}
+
+.cart-btn-inner {
+  width: 106rpx;
+  height: 116rpx;
+  background: linear-gradient(135deg, #ff6b35, #ff9f28);
+  border-radius: 50%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.35);
+}
+
+.bottom-actions {
+  display: flex;
+  align-items: center;
+  padding: 16rpx 24rpx;
+  padding-bottom: calc(16rpx + env(safe-area-inset-bottom));
+  background: #fff;
+  border-top: 1rpx solid #f0f0f0;
+}
+
+.input-box {
+  flex: 1;
+  height: 72rpx;
+  background: #f5f5f5;
+  border-radius: 36rpx;
+  padding: 0 24rpx;
+  margin-right: 16rpx;
+  display: flex;
+  align-items: center;
+}
+
+.input-content {
+  width: 100%;
+  font-size: 28rpx;
+  color: $text-color;
+}
+
+.chat-coupon-btn {
+  width: 72rpx;
+  height: 72rpx;
+  margin-right: 16rpx;
+  border-radius: 50%;
+  background: #fff5f0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.send-btn-small {
+  padding: 0 28rpx;
+  height: 72rpx;
+  line-height: 72rpx;
+  border-radius: 36rpx;
+  font-size: 28rpx;
+  color: #fff;
+  background: linear-gradient(90deg, #ff6b35, #ff9f28);
+
+  &.disabled {
+    opacity: 0.5;
+  }
+}
+
+.live-intro-wrapper {
+  padding: 24rpx;
+}
+
+.live-title {
+  font-size: 36rpx;
+  font-weight: 600;
+  color: $text-color;
+  margin-bottom: 16rpx;
+}
+
+.live-time {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  font-size: 26rpx;
+  color: $text-color-light;
+  margin-bottom: 24rpx;
+}
+
+.live-intro-title {
+  font-size: 28rpx;
+  font-weight: 600;
+  color: $text-color;
+  margin-bottom: 12rpx;
+  padding-top: 24rpx;
+  border-top: 1rpx solid $border-color;
+}
+
+.live-intro-content-text {
+  font-size: 26rpx;
+  color: $text-color-light;
+  line-height: 1.6;
+}
+
+.dialog-overlay {
+  position: fixed;
+  inset: 0;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 999;
+}
+
+.goods-list-container,
+.coupon-list-container {
+  width: 100%;
+  max-height: 75vh;
+  background: #f7f8fa;
+  border-radius: 32rpx 32rpx 0 0;
+  position: absolute;
+  bottom: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.goods-list-header,
+.coupon-list-header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  padding: 32rpx 40rpx;
+  background: #fff;
+  border-radius: 32rpx 32rpx 0 0;
+}
+
+.goods-list-title,
+.coupon-list-title {
+  font-size: 34rpx;
+  font-weight: 700;
+  color: #333;
+}
+
+.goods-list-close,
+.coupon-list-close {
+  font-size: 36rpx;
+  color: #999;
+  padding: 8rpx;
+}
+
+.goods-list-scroll,
+.coupon-list-scroll {
+  flex: 1;
+  max-height: calc(75vh - 110rpx);
+}
+
+.goods-list {
+  padding: 24rpx;
+}
+
+.goods-item-row {
+  margin-bottom: 24rpx;
+}
+
+.goods-item-content {
+  display: flex;
+  padding: 24rpx;
+  background: #fff;
+  border-radius: 24rpx;
+  box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.03);
+}
+
+.goods-image-container {
+  width: 200rpx;
+  height: 200rpx;
+  border-radius: 16rpx;
+  overflow: hidden;
+  background: #f5f5f5;
+  flex-shrink: 0;
+}
+
+.goods-image {
+  width: 100%;
+  height: 100%;
+}
+
+.goods-right {
+  flex: 1;
+  margin-left: 24rpx;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+}
+
+.goods-name {
+  font-size: 28rpx;
+  color: #333;
+  font-weight: 600;
+  line-height: 1.4;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+}
+
+.hot-tag {
+  display: inline-block;
+  background: linear-gradient(135deg, #ff7a18, #ffb11b);
+  color: #fff;
+  font-size: 20rpx;
+  padding: 4rpx 12rpx;
+  border-radius: 8rpx;
+  margin-right: 8rpx;
+}
+
+.goods-bottom {
+  display: flex;
+  align-items: flex-end;
+  justify-content: space-between;
+  margin-top: 16rpx;
+}
+
+.current-price {
+  color: #ff4b2b;
+  font-size: 36rpx;
+  font-weight: 700;
+}
+
+.price-symbol {
+  font-size: 24rpx;
+}
+
+.original-price-text {
+  font-size: 24rpx;
+  color: #999;
+  text-decoration: line-through;
+}
+
+.goods-btn {
+  padding: 12rpx 32rpx;
+  border-radius: 32rpx;
+  font-size: 26rpx;
+  font-weight: 600;
+
+  &.btn-active {
+    background: linear-gradient(135deg, #ff4b2b, #ff416c);
+    color: #fff;
+  }
+
+  &.btn-sold-out {
+    background: #f0f0f0;
+    color: #999;
+  }
+}
+
+.goods-empty,
+.coupon-empty {
+  text-align: center;
+  padding: 100rpx 0;
+  font-size: 28rpx;
+  color: #999;
+}
+
+.coupon-list-inner {
+  padding: 0 32rpx 48rpx;
+}
+
+.coupon-card {
+  display: flex;
+  align-items: stretch;
+  background: #fff;
+  border-radius: 24rpx;
+  margin-bottom: 24rpx;
+  position: relative;
+  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.03);
+}
+
+.coupon-card-left {
+  width: 220rpx;
+  min-height: 160rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: #ff3b30;
+  flex-shrink: 0;
+}
+
+.coupon-price-value {
+  font-size: 56rpx;
+  font-weight: 900;
+}
+
+.coupon-card-right {
+  flex: 1;
+  padding: 32rpx;
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.coupon-card-name {
+  font-size: 30rpx;
+  color: #111;
+  font-weight: 700;
+}
+
+.coupon-claim-btn {
+  padding: 12rpx 28rpx;
+  border-radius: 40rpx;
+  font-size: 26rpx;
+  color: #fff;
+  background: #111;
+
+  &.disabled {
+    background: #f0f0f0;
+    color: #999;
+  }
+}
+
+.loading-wrap {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 200;
+  background: rgba(0, 0, 0, 0.3);
+}
+
+// 售罄置灰
+.goods-item-row.is-sold-out,
+.product-showcase.is-sold-out,
+.floating-recommend-card.is-sold-out {
+  opacity: 0.55;
+  filter: grayscale(0.85);
+  pointer-events: none;
+}
+
+.current-price.price-sold-out {
+  color: #999 !important;
+}
+
+// 左上角优惠券浮标
+@keyframes coupon-shake {
+  0%,
+  100% {
+    transform: rotate(0deg);
+  }
+  10% {
+    transform: rotate(-8deg);
+  }
+  20% {
+    transform: rotate(8deg);
+  }
+  30% {
+    transform: rotate(-6deg);
+  }
+  40% {
+    transform: rotate(6deg);
+  }
+  50% {
+    transform: rotate(-3deg);
+  }
+  60% {
+    transform: rotate(3deg);
+  }
+  70%,
+  100% {
+    transform: rotate(0deg);
+  }
+}
+
+.coupon-float-btn {
+  position: fixed;
+  top: calc(var(--status-bar-height, 44px) + 88rpx);
+  left: 24rpx;
+  z-index: 100;
+  width: 72rpx;
+  height: 72rpx;
+  border-radius: 50%;
+  background: rgba(255, 255, 255, 0.95);
+  box-shadow: 0 8rpx 24rpx rgba(255, 107, 53, 0.25);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  &.shake-animation {
+    animation: coupon-shake 1.2s ease-in-out infinite;
+    animation-delay: 0.5s;
+  }
+}
+
+.coupon-float-btn-horizontal {
+  top: calc(var(--status-bar-height, 44px) + 12rpx);
+  left: 100rpx;
+}
+
+.recommend-coupon-overlay {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 48rpx 32rpx;
+  box-sizing: border-box;
+}
+
+.recommend-coupon-container.white-theme {
+  width: 600rpx;
+  max-width: 100%;
+  background: #fff;
+  border-radius: 32rpx;
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  box-shadow: 0 24rpx 64rpx rgba(0, 0, 0, 0.15);
+  animation: coupon-pop-up 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
+}
+
+@keyframes coupon-pop-up {
+  0% {
+    transform: scale(0.8) translateY(40rpx);
+    opacity: 0;
+  }
+  100% {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+  }
+}
+
+.rc-header {
+  position: relative;
+  padding: 48rpx 0 32rpx;
+  text-align: center;
+}
+
+.rc-title {
+  font-size: 36rpx;
+  font-weight: 700;
+  color: #333;
+}
+
+.rc-close {
+  position: absolute;
+  top: 24rpx;
+  right: 24rpx;
+  width: 48rpx;
+  height: 48rpx;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 32rpx;
+  color: #999;
+}
+
+.rc-body {
+  padding: 0 40rpx 40rpx;
+}
+
+.rc-ticket-box {
+  background: #fff5f5;
+  border: 2rpx solid #ffe0e0;
+  border-radius: 16rpx;
+  display: flex;
+  height: 180rpx;
+  overflow: hidden;
+}
+
+.rc-ticket-left {
+  width: 180rpx;
+  display: flex;
+  align-items: baseline;
+  justify-content: center;
+  color: #ff4b2b;
+  border-right: 2rpx dashed #ffcaca;
+  flex-shrink: 0;
+}
+
+.rc-symbol {
+  font-size: 32rpx;
+  font-weight: 600;
+  margin-right: 4rpx;
+}
+
+.rc-value {
+  font-size: 56rpx;
+  font-weight: 800;
+  line-height: 180rpx;
+}
+
+.rc-ticket-right {
+  flex: 1;
+  padding: 0 24rpx;
+  display: flex;
+  align-items: center;
+}
+
+.rc-name {
+  font-size: 30rpx;
+  color: #333;
+  font-weight: 600;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  overflow: hidden;
+  line-height: 1.4;
+}
+
+.rc-footer {
+  padding: 0 40rpx 48rpx;
+}
+
+.rc-btn {
+  width: 100%;
+  height: 88rpx;
+  border-radius: 44rpx;
+  background: linear-gradient(135deg, #ff4b2b, #ff416c);
+  color: #fff;
+  font-size: 32rpx;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  box-shadow: 0 8rpx 24rpx rgba(255, 65, 108, 0.25);
+
+  &.disabled {
+    background: #f0f0f0;
+    color: #999;
+    box-shadow: none;
+  }
+}
diff --git a/pages/live/mqtt/mqtt.js b/pages/live/mqtt/mqtt.js
new file mode 100644
index 0000000..39a624f
--- /dev/null
+++ b/pages/live/mqtt/mqtt.js
@@ -0,0 +1,293 @@
+import api from "@/config/api.js";
+import mqtt from "mqtt";
+
+const mqttEndpoint = api.mqtt;
+
+class MqttClient {
+  constructor(options = {}) {
+    const defaultOptions = {
+      endpoint: mqttEndpoint,
+      username: "admin",
+      password: "hivemq",
+      ssl: true,
+      keepalive: 30,
+      clean: true,
+      reconnectPeriod: 15000,
+      connectTimeout: 20000,
+      topicHandlers: [],
+    };
+
+    this.options = { ...defaultOptions, ...options };
+    this.client = null;
+    this.connected = false;
+    this.connecting = false;
+    this.reconnecting = false;
+    this.error = null;
+    this.topics = [];
+    this.connectCount = 0;
+    this.MAX_CONNECT_RETRIES = 5;
+    this.manualDisconnect = false;
+
+    this.onConnectCallback = null;
+    this.onReconnectCallback = null;
+    this.onErrorCallback = null;
+    this.onCloseCallback = null;
+    this.onOfflineCallback = null;
+    this.onMessageCallback = null;
+
+    this.onConnect = this.onConnect.bind(this);
+    this.onReconnect = this.onReconnect.bind(this);
+    this.onError = this.onError.bind(this);
+    this.onMessage = this.onMessage.bind(this);
+    this.onClose = this.onClose.bind(this);
+    this.onOffline = this.onOffline.bind(this);
+  }
+
+  connect() {
+    try {
+      if (!this.options.endpoint) {
+        throw new Error("MQTT 地址未配置，请检查 config/api.js 的 mqtt 字段");
+      }
+
+      console.log("[MQTT] 开始连接:", this.options.endpoint);
+      this.manualDisconnect = false;
+
+      if (this.client) {
+        this.disconnect();
+      }
+
+      this.connecting = true;
+      this.error = null;
+
+      const connectionOptions = {
+        clientId: this.options.clientId,
+        keepalive: this.options.keepalive,
+        clean: this.options.clean,
+        reconnectPeriod: this.options.reconnectPeriod,
+        connectTimeout: this.options.connectTimeout,
+        username: this.options.username || undefined,
+        password: this.options.password || undefined,
+      };
+
+      this.client = mqtt.connect(this.options.endpoint, connectionOptions);
+
+      this.client.on("connect", this.onConnect);
+      this.client.on("reconnect", this.onReconnect);
+      this.client.on("error", this.onError);
+      this.client.on("message", this.onMessage);
+      this.client.on("close", this.onClose);
+      this.client.on("offline", this.onOffline);
+
+      const timeoutId = setTimeout(() => {
+        if (!this.connected) {
+          this.onError(new Error("连接超时"));
+          if (this.client && typeof this.client.end === "function" && !this.manualDisconnect) {
+            try {
+              this.client.end(true);
+            } catch (e) {
+              console.warn("[MQTT] 超时关闭客户端失败:", e);
+            }
+          }
+        }
+      }, this.options.connectTimeout);
+
+      this.client.once("connect", () => {
+        clearTimeout(timeoutId);
+      });
+    } catch (err) {
+      console.error("[MQTT] 连接异常:", err);
+      this.onError(err);
+    }
+
+    return this;
+  }
+
+  disconnect() {
+    this.manualDisconnect = true;
+
+    if (this.client) {
+      try {
+        if (this.client.removeAllListeners) {
+          this.client.removeAllListeners();
+        }
+        if (typeof this.client.end === "function") {
+          this.client.end(true);
+        }
+        console.log("[MQTT] 连接已断开");
+      } catch (err) {
+        console.warn("[MQTT] 断开连接异常:", err);
+      }
+    }
+
+    this.client = null;
+    this.connected = false;
+    this.connecting = false;
+    this.reconnecting = false;
+    this.topics = [];
+    this.error = null;
+    this.connectCount = 0;
+
+    return this;
+  }
+
+  onConnect() {
+    console.log("[MQTT] 连接成功");
+    this.connected = true;
+    this.connecting = false;
+    this.reconnecting = false;
+    this.error = null;
+    this.connectCount = 0;
+    this.subscribeToTopics();
+    this.onConnectCallback?.();
+  }
+
+  onReconnect() {
+    console.log("[MQTT] 重连中...");
+    this.connected = false;
+    this.connecting = true;
+    this.reconnecting = true;
+    this.connectCount++;
+
+    if (this.connectCount > this.MAX_CONNECT_RETRIES) {
+      console.warn("[MQTT] 重连次数超限，停止重连");
+      if (this.client && typeof this.client.end === "function") {
+        try {
+          this.client.end(true);
+        } catch (err) {
+          console.warn("[MQTT] 停止客户端异常:", err);
+        }
+      }
+      this.client = null;
+      this.onError(new Error("重连次数超限"));
+    }
+
+    this.onReconnectCallback?.(this.connectCount);
+  }
+
+  onError(err) {
+    console.error("[MQTT] 错误:", err?.message || err);
+    this.error = err;
+    this.connecting = false;
+    this.onErrorCallback?.(err);
+  }
+
+  onClose() {
+    console.log("[MQTT] 连接关闭");
+    this.connected = false;
+    this.onCloseCallback?.();
+  }
+
+  onOffline() {
+    console.log("[MQTT] 客户端离线");
+    this.connected = false;
+    this.onOfflineCallback?.();
+  }
+
+  onMessage(topic, message) {
+    const msgStr = message.toString();
+
+    this.options.topicHandlers
+      .filter((handler) => handler.topic === topic || this.matchTopicPattern(handler.topic, topic))
+      .forEach((handler) => {
+        try {
+          handler.handler(msgStr, topic);
+        } catch (err) {
+          console.error(`[MQTT] 处理主题 ${topic} 消息失败:`, err);
+        }
+      });
+
+    this.onMessageCallback?.(topic, msgStr);
+  }
+
+  isClientValid() {
+    return this.client && this.connected && typeof this.client.subscribe === "function";
+  }
+
+  matchTopicPattern(pattern, topic) {
+    const regex = new RegExp(
+      `^${pattern
+        .replace(/\+/g, "[^/]+")
+        .replace(/#$/, ".*")
+        .replace(/\//g, "\\/")}$`
+    );
+    return regex.test(topic);
+  }
+
+  subscribe(topic, options = { qos: 0 }, handler) {
+    if (!this.isClientValid()) {
+      console.warn("[MQTT] 客户端无效，无法订阅");
+      return false;
+    }
+
+    try {
+      this.client.subscribe(topic, options, (err, granted) => {
+        if (err) {
+          console.error(`[MQTT] 订阅 ${topic} 失败:`, err);
+          return;
+        }
+        console.log(`[MQTT] 订阅成功: ${topic}`, granted);
+
+        const idx = this.topics.findIndex((t) => t.topic === topic);
+        if (idx >= 0) {
+          this.topics[idx] = { topic, qos: options.qos, handler };
+        } else {
+          this.topics.push({ topic, qos: options.qos, handler });
+        }
+
+        if (handler && typeof handler === "function") {
+          const hIdx = this.options.topicHandlers.findIndex((h) => h.topic === topic);
+          if (hIdx >= 0) {
+            this.options.topicHandlers[hIdx] = { topic, qos: options.qos, handler };
+          } else {
+            this.options.topicHandlers.push({ topic, qos: options.qos, handler });
+          }
+        }
+      });
+      return true;
+    } catch (err) {
+      console.error(`[MQTT] 订阅 ${topic} 异常:`, err);
+      return false;
+    }
+  }
+
+  subscribeToTopics() {
+    if (!this.isClientValid()) return;
+
+    this.options.topicHandlers.forEach(({ topic, qos = 0, handler }) => {
+      this.subscribe(topic, { qos }, handler);
+    });
+  }
+
+  onConnected(callback) {
+    this.onConnectCallback = callback;
+    return this;
+  }
+  onErrorOccurred(callback) {
+    this.onErrorCallback = callback;
+    return this;
+  }
+  onClosed(callback) {
+    this.onCloseCallback = callback;
+    return this;
+  }
+  onClientOffline(callback) {
+    this.onOfflineCallback = callback;
+    return this;
+  }
+
+  isConnected() {
+    return this.connected;
+  }
+}
+
+let mqttInstance = null;
+
+export function createMqttClient(options = {}) {
+  if (mqttInstance && mqttInstance.isConnected()) {
+    mqttInstance.disconnect();
+  }
+  mqttInstance = new MqttClient(options);
+  return mqttInstance;
+}
+
+export { MqttClient };
diff --git a/pages/live/room.vue b/pages/live/room.vue
new file mode 100644
index 0000000..1103767
--- /dev/null
+++ b/pages/live/room.vue
@@ -0,0 +1,1083 @@
+<template>
+  <view class="live-room-page">
+  <!-- 竖屏直播 -->
+  <view v-if="isVerticalMode" class="live-detail-page-vertical">
+    <view class="nav-back" @click="goBackOrHome">
+      <u-icon name="arrow-left" color="#fff" size="20" />
+    </view>
+
+    <view
+      v-if="visibleCouponList.length"
+      class="coupon-float-btn"
+      :class="{ 'shake-animation': hasClaimableCoupon }"
+      @click.stop="openCouponModal"
+    >
+      <u-icon name="coupon-fill" color="#ff6b35" size="26" />
+    </view>
+
+    <view class="live-container-vertical">
+      <view class="live-box-vertical" @click="toggleUI">
+        <view v-if="showCover" class="live-cover-wrap cover-wrap">
+          <image class="live-cover cover-img" :src="roomInfo.coverImg" mode="aspectFill" />
+          <view class="cover-mask">
+            <view class="status-tag" :class="statusClass">{{ statusText }}</view>
+            <view v-if="roomInfo.storeName" class="tips-text">{{ roomInfo.storeName }}</view>
+          </view>
+        </view>
+
+        <!-- #ifdef MP-WEIXIN -->
+        <live-player
+          v-if="isLiving && roomInfo.pullStreamUrl"
+          class="stream-player"
+          :src="roomInfo.pullStreamUrl"
+          autoplay
+          mode="live"
+          object-fit="fillCrop"
+          @error="onPlayerError"
+        />
+        <!-- #endif -->
+        <!-- #ifndef MP-WEIXIN -->
+        <video
+          v-if="isLiving && roomInfo.pullStreamUrl"
+          class="stream-player"
+          :src="roomInfo.pullStreamUrl"
+          :poster="roomInfo.coverImg"
+          autoplay
+          live
+          :controls="false"
+          object-fit="cover"
+          @error="onPlayerError"
+        />
+        <!-- #endif -->
+
+        <view class="capsule" @click.stop="showIntroPopup">
+          <u-icon name="info-circle" color="#fff" size="14" />
+          <text style="margin-left: 8rpx">直播介绍</text>
+        </view>
+      </view>
+    </view>
+
+    <view class="bottom-container-vertical" :class="{ hidden: !isUIVisible }" @click.stop>
+      <view class="message-container" :style="{ height: scrollViewHeight + 'px' }">
+        <scroll-view class="message-scroll" scroll-y :scroll-into-view="scrollToView" scroll-with-animation>
+          <view
+            v-for="(item, index) in messageList"
+            :key="item.id || index"
+            :id="'msg-' + index"
+            class="message-item"
+          >
+            <image class="user-avatar" :src="item.userFace || defaultAvatar" mode="aspectFill" />
+            <view class="message-content">
+              <text class="username">{{ item.userName }}</text>
+              <text class="message-text">{{ item.message }}</text>
+            </view>
+          </view>
+        </scroll-view>
+      </view>
+
+      <view class="cart-btn" @click="openGoodsModal">
+        <view class="cart-btn-inner">
+          <u-icon name="shopping-cart-fill" color="#fff" size="28" />
+        </view>
+      </view>
+
+      <view
+        v-if="recommendGoods"
+        class="product-showcase"
+        :class="{ 'is-sold-out': isGoodsSoldOut(recommendGoods) }"
+        @click="goGoods(recommendGoods)"
+      >
+        <image class="product-image" :src="recommendGoods.thumbnail" mode="aspectFill" />
+        <view class="product-info">
+          <view class="product-name">
+            <text v-if="!isGoodsSoldOut(recommendGoods)" class="product-tag">抢购中</text>
+            {{ recommendGoods.goodsName }}
+          </view>
+          <view v-if="recommendGoods.sellPoint" class="product-sell-point">{{ recommendGoods.sellPoint }}</view>
+          <view class="product-price-row">
+            <view class="product-price" :class="{ 'sold-out': isGoodsSoldOut(recommendGoods) }">
+              ¥{{ unitPrice(recommendGoods.price) }}
+            </view>
+            <view class="buy-btn" :class="{ 'sold-out': isGoodsSoldOut(recommendGoods) }">
+              {{ isGoodsSoldOut(recommendGoods) ? '已售罄' : '立即购买' }}
+            </view>
+          </view>
+        </view>
+      </view>
+
+      <view v-if="showChatBar" class="bottom-actions">
+        <view class="input-box" @tap="onChatInputTap">
+          <input
+            v-model="inputMessage"
+            class="input-content"
+            type="text"
+            :placeholder="chatPlaceholder"
+            :disabled="isLogin('auth') && liveUser?.muteFlag"
+            confirm-type="send"
+            @focus="onChatFocus"
+            @confirm="sendMessage"
+          />
+        </view>
+        <view class="send-btn-small" :class="{ disabled: isLogin('auth') && (!canSend || sending) }" @click="sendMessage">发送</view>
+      </view>
+    </view>
+
+    <!-- 竖屏底部弹窗 -->
+    <view class="bottom-popup-overlay" :class="{ show: showBottomPopup }" @click="closeBottomPopup">
+      <view class="bottom-popup-container" :class="{ show: showBottomPopup }" @click.stop>
+        <view class="popup-header">
+          <text class="popup-title">{{ popupTitle }}</text>
+          <text class="popup-close" @click="closeBottomPopup">✕</text>
+        </view>
+        <view class="popup-content">
+          <view v-if="popupType === 'intro'" class="live-intro-wrapper">
+            <view class="live-title">{{ roomInfo.title }}</view>
+            <view class="live-time flex flex-a-c flex-j-sb">
+              <text>{{ roomInfo.startTime || '' }}</text>
+              <text>{{ formatCount(roomInfo.viewerCount) }} 观看</text>
+            </view>
+            <view class="live-intro-title">直播介绍</view>
+            <view class="live-intro-content-text">{{ roomInfo.liveIntroduce || roomInfo.description || '暂无介绍' }}</view>
+          </view>
+          <scroll-view v-if="popupType === 'goods'" class="goods-list-scroll" scroll-y>
+            <view class="goods-list">
+              <view
+                v-for="item in visibleGoodsList"
+                :key="item.id || item.skuId"
+                class="goods-item-row"
+                :class="{ 'is-sold-out': isGoodsSoldOut(item) }"
+                @click="goGoods(item)"
+              >
+                <view class="goods-item-content">
+                  <view class="goods-image-container">
+                    <image class="goods-image" :src="item.thumbnail" mode="aspectFill" />
+                  </view>
+                  <view class="goods-right">
+                    <view class="goods-name">
+                      <text v-if="item.recommend" class="hot-tag">热卖 {{ item.popularity || 0 }}</text>
+                      {{ item.goodsName }}
+                    </view>
+                    <view class="goods-bottom">
+                      <view>
+                        <text class="current-price" :class="{ 'price-sold-out': isGoodsSoldOut(item) }">
+                          <text class="price-symbol">￥</text>{{ unitPrice(item.price) }}
+                        </text>
+                        <view v-if="item.originPrice">
+                          <text class="original-price-text">￥{{ unitPrice(item.originPrice) }}</text>
+                        </view>
+                      </view>
+                      <view class="goods-btn" :class="isGoodsSoldOut(item) ? 'btn-sold-out' : 'btn-active'">
+                        {{ isGoodsSoldOut(item) ? '已售罄' : '去购买' }}
+                      </view>
+                    </view>
+                  </view>
+                </view>
+              </view>
+              <view v-if="!visibleGoodsList.length" class="goods-empty">暂无商品</view>
+            </view>
+          </scroll-view>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 横屏 / 三分屏直播 -->
+  <view v-else class="live-detail-page">
+    <view class="nav-back" @click="goBackOrHome">
+      <u-icon name="arrow-left" color="#fff" size="20" />
+    </view>
+
+    <view
+      v-if="visibleCouponList.length"
+      class="coupon-float-btn coupon-float-btn-horizontal"
+      :class="{ 'shake-animation': hasClaimableCoupon }"
+      @click.stop="openCouponModal"
+    >
+      <u-icon name="coupon-fill" color="#ff6b35" size="26" />
+    </view>
+
+    <view class="live-container">
+      <view class="live-box" :class="playerLayoutClass">
+        <view v-if="showCover" class="live-cover-wrap cover-wrap">
+          <image class="live-cover cover-img" :src="roomInfo.coverImg" mode="aspectFill" />
+          <view class="cover-mask">
+            <view class="status-tag" :class="statusClass">{{ statusText }}</view>
+            <view v-if="roomInfo.startTime && roomInfo.liveStatus === 'NEW'" class="tips-text">开播：{{ roomInfo.startTime }}</view>
+            <view v-if="roomInfo.liveStatus === 'PAUSED'" class="tips-text">主播暂时离开，请稍候</view>
+          </view>
+        </view>
+
+        <!-- #ifdef MP-WEIXIN -->
+        <live-player
+          v-if="isLiving && roomInfo.pullStreamUrl"
+          class="stream-player"
+          :src="roomInfo.pullStreamUrl"
+          autoplay
+          mode="live"
+          :object-fit="objectFit"
+          @error="onPlayerError"
+        />
+        <!-- #endif -->
+        <!-- #ifndef MP-WEIXIN -->
+        <video
+          v-if="isLiving && roomInfo.pullStreamUrl"
+          class="stream-player"
+          :src="roomInfo.pullStreamUrl"
+          :poster="roomInfo.coverImg"
+          autoplay
+          live
+          controls
+          :object-fit="objectFit"
+          @error="onPlayerError"
+        />
+        <!-- #endif -->
+      </view>
+    </view>
+
+    <view class="bottom-container">
+      <view class="tab-container">
+        <view class="tab-items">
+          <view class="tab-item" :class="{ active: currentTab === 0 }" @click="switchTab(0)">
+            <text>互动</text>
+          </view>
+          <view class="tab-item" :class="{ active: currentTab === 1 }" @click="switchTab(1)">
+            <text>直播介绍</text>
+          </view>
+        </view>
+      </view>
+
+      <view class="message-container" :style="{ height: scrollViewHeight + 'px' }">
+        <scroll-view
+          v-if="currentTab === 0"
+          class="message-scroll"
+          scroll-y
+          :scroll-into-view="scrollToView"
+          scroll-with-animation
+        >
+          <view
+            v-for="(item, index) in messageList"
+            :key="item.id || index"
+            :id="'msg-' + index"
+            class="message-item"
+          >
+            <image class="user-avatar" :src="item.userFace || defaultAvatar" mode="aspectFill" />
+            <view class="message-content">
+              <text class="username">{{ item.userName }}</text>
+              <text class="message-text">{{ item.message }}</text>
+            </view>
+          </view>
+          <view v-if="!messageList.length" class="goods-empty">暂无消息，快来互动吧</view>
+        </scroll-view>
+
+        <scroll-view v-else class="live-intro-scroll" scroll-y>
+          <view class="live-intro-wrapper">
+            <view class="live-title">{{ roomInfo.title }}</view>
+            <view class="live-time flex flex-a-c flex-j-sb">
+              <text>{{ roomInfo.startTime || '' }}</text>
+              <text>{{ formatCount(roomInfo.viewerCount) }} 观看 · {{ formatCount(roomInfo.totalLikes) }} 点赞</text>
+            </view>
+            <view class="live-intro-title">直播介绍</view>
+            <view class="live-intro-content-text">{{ roomInfo.liveIntroduce || roomInfo.description || '暂无介绍' }}</view>
+          </view>
+        </scroll-view>
+      </view>
+
+      <view v-if="currentTab === 0" class="floating-right-container">
+        <view
+          v-if="recommendGoods"
+          class="floating-recommend-card"
+          :class="{ 'is-sold-out': isGoodsSoldOut(recommendGoods) }"
+          @click="goGoods(recommendGoods)"
+        >
+          <view class="floating-recommend-img-wrap">
+            <image class="floating-recommend-img" :src="recommendGoods.thumbnail" mode="aspectFill" />
+            <view class="floating-recommend-tag">热卖 {{ recommendGoods.popularity || 0 }}</view>
+          </view>
+          <view class="floating-recommend-info">
+            <view class="floating-recommend-name">{{ recommendGoods.goodsName }}</view>
+            <view class="floating-recommend-price">¥{{ unitPrice(recommendGoods.price) }}</view>
+          </view>
+        </view>
+        <view class="cart-btn" @click="openGoodsModal">
+          <view class="cart-btn-inner">
+            <u-icon name="shopping-cart-fill" color="#fff" size="28" />
+          </view>
+        </view>
+      </view>
+
+      <view v-if="currentTab === 0 && showChatBar" class="bottom-actions">
+        <view class="input-box" @tap="onChatInputTap">
+          <input
+            v-model="inputMessage"
+            class="input-content"
+            type="text"
+            :placeholder="chatPlaceholder"
+            :disabled="isLogin('auth') && liveUser?.muteFlag"
+            confirm-type="send"
+            @focus="onChatFocus"
+            @confirm="sendMessage"
+          />
+        </view>
+        <view class="send-btn-small" :class="{ disabled: isLogin('auth') && (!canSend || sending) }" @click="sendMessage">发送</view>
+      </view>
+    </view>
+
+    <!-- 横屏商品弹窗 -->
+    <view v-if="showGoodsModal" class="dialog-overlay" @click="closeGoodsModal">
+      <view class="goods-list-container" @click.stop>
+        <view class="goods-list-header">
+          <text class="goods-list-title">直播商品 ({{ visibleGoodsList.length }})</text>
+          <text class="goods-list-close" @click="closeGoodsModal">✕</text>
+        </view>
+        <scroll-view class="goods-list-scroll" scroll-y>
+          <view class="goods-list">
+            <view
+              v-for="item in visibleGoodsList"
+              :key="item.id || item.skuId"
+              class="goods-item-row"
+              :class="{ 'is-sold-out': isGoodsSoldOut(item) }"
+              @click="goGoods(item)"
+            >
+              <view class="goods-item-content">
+                <view class="goods-image-container">
+                  <image class="goods-image" :src="item.thumbnail" mode="aspectFill" />
+                </view>
+                <view class="goods-right">
+                  <view class="goods-name">
+                    <text v-if="item.recommend" class="hot-tag">热卖 {{ item.popularity || 0 }}</text>
+                    {{ item.goodsName }}
+                  </view>
+                  <view class="goods-bottom">
+                    <view>
+                      <text class="current-price" :class="{ 'price-sold-out': isGoodsSoldOut(item) }">
+                        <text class="price-symbol">￥</text>{{ unitPrice(item.price) }}
+                      </text>
+                      <view v-if="item.originPrice">
+                        <text class="original-price-text">￥{{ unitPrice(item.originPrice) }}</text>
+                      </view>
+                    </view>
+                    <view class="goods-btn" :class="isGoodsSoldOut(item) ? 'btn-sold-out' : 'btn-active'">
+                      {{ isGoodsSoldOut(item) ? '已售罄' : '去购买' }}
+                    </view>
+                  </view>
+                </view>
+              </view>
+            </view>
+            <view v-if="!visibleGoodsList.length" class="goods-empty">暂无商品</view>
+          </view>
+        </scroll-view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 推荐优惠券弹窗 -->
+  <view
+    v-if="showRecommendCouponModal && recommendCouponItem"
+    class="dialog-overlay recommend-coupon-overlay"
+    @click="closeRecommendCouponModal"
+  >
+    <view class="recommend-coupon-container white-theme" @click.stop>
+      <view class="rc-header">
+        <text class="rc-title">恭喜获得专属优惠券</text>
+        <view class="rc-close" @click="closeRecommendCouponModal">✕</view>
+      </view>
+      <view class="rc-body">
+        <view class="rc-ticket-box">
+          <view class="rc-ticket-left">
+            <text class="rc-symbol">¥</text>
+            <text class="rc-value">{{ unitPrice(recommendCouponItem.couponPrice) }}</text>
+          </view>
+          <view class="rc-ticket-right">
+            <text class="rc-name">{{ recommendCouponItem.couponName }}</text>
+          </view>
+        </view>
+      </view>
+      <view class="rc-footer">
+        <view
+          class="rc-btn"
+          :class="{ disabled: isCouponReceived(recommendCouponItem.couponId) || claimingCouponId === recommendCouponItem.couponId }"
+          @click="onClaimRecommendCoupon"
+        >
+          {{
+            claimingCouponId === recommendCouponItem.couponId
+              ? '领取中'
+              : isCouponReceived(recommendCouponItem.couponId)
+                ? '已领取'
+                : '立即领取'
+          }}
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <!-- 优惠券列表弹窗（横竖屏共用） -->
+  <view v-if="showCouponModal" class="dialog-overlay" @click="closeCouponModal">
+    <view class="coupon-list-container" @click.stop>
+      <view class="coupon-list-header">
+        <text class="coupon-list-title">直播专属券</text>
+        <text class="coupon-list-close" @click="closeCouponModal">✕</text>
+      </view>
+      <scroll-view class="coupon-list-scroll" scroll-y>
+        <view class="coupon-list-inner">
+          <view v-for="item in visibleCouponList" :key="item.id || item.couponId" class="coupon-card">
+            <view class="coupon-card-left">
+              <text class="coupon-price-value"><text style="font-size:28rpx">¥</text>{{ unitPrice(item.couponPrice) }}</text>
+            </view>
+            <view class="coupon-card-right">
+              <text class="coupon-card-name">{{ item.couponName }}</text>
+              <view
+                class="coupon-claim-btn"
+                :class="{ disabled: isCouponReceived(item.couponId) || claimingCouponId === item.couponId }"
+                @click="onClaimCoupon(item)"
+              >
+                {{ claimingCouponId === item.couponId ? '领取中' : isCouponReceived(item.couponId) ? '已领取' : '领取' }}
+              </view>
+            </view>
+          </view>
+          <view v-if="!visibleCouponList.length" class="coupon-empty">暂无可用优惠券</view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+
+  <view v-if="loading" class="loading-wrap">
+    <u-loading-icon mode="circle" color="#fff" />
+  </view>
+  </view>
+</template>
+
+<script>
+import config from "@/config/config";
+import { getLivePollingData, registerLiveViewUser, receiveLiveCoupon, sendLiveMessage } from "@/api/live.js";
+import { LiveMqttService } from "./utils/liveMqtt.js";
+import { LiveChatService } from "./utils/liveChat.js";
+import { parseRecommendMessageArray, findRecommendPayload } from "./utils/liveRecommend.js";
+
+const POLL_INTERVAL = 5000;
+
+const LIVE_STATUS = {
+  NEW: "NEW",
+  LIVING: "LIVING",
+  PAUSED: "PAUSED",
+  ENDED: "ENDED",
+};
+
+const STATUS_LABEL = {
+  [LIVE_STATUS.NEW]: "新直播",
+  [LIVE_STATUS.LIVING]: "直播中",
+  [LIVE_STATUS.PAUSED]: "已暂停",
+  [LIVE_STATUS.ENDED]: "已结束",
+};
+
+export default {
+  data() {
+    return {
+      liveId: "",
+      loading: true,
+      roomInfo: {},
+      liveUser: null,
+      messageList: [],
+      inputMessage: "",
+      sending: false,
+      scrollToView: "",
+      pollTimer: null,
+      goodsList: [],
+      liveCoupon: [],
+      liveCouponReceives: [],
+      currentTab: 0,
+      scrollViewHeight: 400,
+      showGoodsModal: false,
+      showCouponModal: false,
+      isUIVisible: true,
+      showBottomPopup: false,
+      popupType: "",
+      popupTitle: "",
+      defaultAvatar: config.defaultUserPhoto,
+      claimingCouponId: "",
+      showRecommendCouponModal: false,
+      recommendCouponItem: null,
+      shownRecommendCouponIds: [],
+      liveMqttService: null,
+      liveChatService: null,
+    };
+  },
+  computed: {
+    isLiving() {
+      return this.roomInfo.liveStatus === LIVE_STATUS.LIVING;
+    },
+    showCover() {
+      return !this.isLiving || !this.roomInfo.pullStreamUrl;
+    },
+    statusText() {
+      return STATUS_LABEL[this.roomInfo.liveStatus] || "直播间";
+    },
+    statusClass() {
+      const status = this.roomInfo.liveStatus;
+      return {
+        living: status === LIVE_STATUS.LIVING,
+        pending: status === LIVE_STATUS.NEW,
+        paused: status === LIVE_STATUS.PAUSED,
+        ended: status === LIVE_STATUS.ENDED,
+      };
+    },
+    playerLayoutClass() {
+      const mode = String(this.roomInfo.displayMode);
+      if (mode === "2") return "layout-triple";
+      return "layout-horizontal";
+    },
+    objectFit() {
+      return String(this.roomInfo.displayMode) === "1" ? "fillCrop" : "contain";
+    },
+    isVerticalMode() {
+      return String(this.roomInfo.displayMode) === "1";
+    },
+    showChatBar() {
+      return this.roomInfo.liveStatus !== LIVE_STATUS.ENDED;
+    },
+    canSend() {
+      if (!this.showChatBar || this.sending) return false;
+      if (!this.isLogin("auth")) return false;
+      if (this.liveUser?.muteFlag) return false;
+      return true;
+    },
+    chatPlaceholder() {
+      if (this.roomInfo.liveStatus === LIVE_STATUS.ENDED) return "直播已结束";
+      if (!this.isLogin("auth")) return "登录后发言";
+      if (this.liveUser?.muteFlag) return "您已被禁言";
+      return "说点什么...";
+    },
+    visibleGoodsList() {
+      return (this.goodsList || []).filter((item) => !item.hideFlag);
+    },
+    visibleCouponList() {
+      return (this.liveCoupon || []).filter((item) => !item.hideFlag);
+    },
+    recommendGoods() {
+      return this.visibleGoodsList.find((item) => item.recommend === true) || null;
+    },
+    hasClaimableCoupon() {
+      return this.visibleCouponList.some((item) => !this.isCouponReceived(item.couponId));
+    },
+  },
+  onLoad(options) {
+    this.liveId = this.parseLiveId(options);
+    const systemInfo = uni.getSystemInfoSync();
+    this.scrollViewHeight = Math.max(systemInfo.windowHeight - (this.isVerticalMode ? 320 : 480), 240);
+
+    if (!this.liveId) {
+      uni.showToast({ title: "无效的直播链接", icon: "none" });
+      setTimeout(() => this.goBackOrHome(), 1500);
+      return;
+    }
+    this.initLiveRoom();
+  },
+  onShow() {
+    if (this.liveId && this.isLogin("auth")) {
+      if (!this.liveUser) {
+        this.registerLiveUser();
+      } else {
+        this.initLiveChat();
+      }
+      this.fetchPollingData(false);
+    }
+    if (this.liveId && !this.pollTimer) {
+      this.startPolling();
+    }
+    if (this.liveId && this.liveMqttService && !this.liveMqttService.isConnected()) {
+      this.initLiveMqtt();
+    }
+  },
+  onHide() {
+    this.stopPolling();
+  },
+  onUnload() {
+    this.stopPolling();
+    this.cleanupLiveMqtt();
+    this.cleanupLiveChat();
+  },
+  // #ifdef MP-WEIXIN
+  onShareTimeline() {
+    return {
+      title: this.roomInfo.title || "直播间",
+      query: `id=${this.liveId}`,
+      imageUrl: this.roomInfo.coverImg || "",
+    };
+  },
+  // #endif
+  methods: {
+    parseLiveId(options) {
+      let id = options.id || options.roomId || "";
+      // #ifdef MP-WEIXIN
+      if (!id && options.scene) {
+        const scene = decodeURIComponent(options.scene);
+        const matched = scene.match(/(?:^|&)id=([^&]+)/);
+        id = matched ? matched[1] : scene;
+      }
+      // #endif
+      return id;
+    },
+    goBackOrHome() {
+      if (getCurrentPages().length > 1) {
+        uni.navigateBack();
+      } else {
+        uni.switchTab({ url: "/pages/tabbar/home/index" });
+      }
+    },
+    /** 跳转登录页，登录成功后 navigateBack 返回直播间 */
+    goLogin() {
+      this.navigateToLogin("navigateTo");
+    },
+    /** 校验登录，未登录则跳转登录页 */
+    requireLogin() {
+      if (this.isLogin("auth")) return true;
+      this.goLogin();
+      return false;
+    },
+    onChatInputTap() {
+      if (!this.isLogin("auth")) {
+        this.goLogin();
+      }
+    },
+    onChatFocus() {
+      if (!this.isLogin("auth")) {
+        uni.hideKeyboard();
+        this.goLogin();
+      }
+    },
+    switchTab(index) {
+      this.currentTab = index;
+    },
+    toggleUI() {
+      if (this.showBottomPopup) return;
+      this.isUIVisible = !this.isUIVisible;
+    },
+    showIntroPopup() {
+      this.popupType = "intro";
+      this.popupTitle = "直播介绍";
+      this.showBottomPopup = true;
+      this.isUIVisible = true;
+    },
+    closeBottomPopup() {
+      this.showBottomPopup = false;
+      this.popupType = "";
+      this.popupTitle = "";
+    },
+    openGoodsModal() {
+      if (this.isVerticalMode) {
+        this.popupType = "goods";
+        this.popupTitle = "商品列表";
+        this.showBottomPopup = true;
+      } else {
+        this.showGoodsModal = true;
+      }
+    },
+    closeGoodsModal() {
+      this.showGoodsModal = false;
+    },
+    isGoodsSoldOut(item) {
+      return item?.sellOutFlag === true || item?.soldOutFlag === true;
+    },
+    openCouponModal() {
+      this.showCouponModal = true;
+    },
+    closeCouponModal() {
+      this.showCouponModal = false;
+    },
+    closeRecommendCouponModal() {
+      this.showRecommendCouponModal = false;
+    },
+    showRecommendCouponFromPayload(coupon) {
+      if (!coupon || this.isCouponReceived(coupon.couponId)) return;
+      const key = coupon.id || coupon.couponId;
+      if (this.shownRecommendCouponIds.includes(key)) return;
+      this.shownRecommendCouponIds.push(key);
+      this.recommendCouponItem = coupon;
+      this.showRecommendCouponModal = true;
+    },
+    updateRecommendCouponPopup() {
+      const found = this.visibleCouponList.find(
+        (item) =>
+          item.recommend === true &&
+          !this.isCouponReceived(item.couponId) &&
+          !this.shownRecommendCouponIds.includes(item.id || item.couponId)
+      );
+      if (!found) return;
+      this.showRecommendCouponFromPayload(found);
+    },
+    onClaimRecommendCoupon() {
+      if (!this.recommendCouponItem) return;
+      this.onClaimCoupon(this.recommendCouponItem);
+    },
+    onClaimCoupon(item) {
+      if (!this.requireLogin()) return;
+      if (this.isCouponReceived(item.couponId)) return;
+      if (this.claimingCouponId) return;
+
+      this.claimingCouponId = item.couponId;
+      receiveLiveCoupon(this.liveId, item.couponId)
+        .then(async (res) => {
+          if (res.data.success) {
+            uni.showToast({ title: "领取成功", icon: "none" });
+            await this.fetchPollingData(false);
+            this.closeRecommendCouponModal();
+          } else {
+            uni.showToast({ title: res.data.message || "领取失败", icon: "none" });
+          }
+        })
+        .catch(() => {
+          uni.showToast({ title: "领取失败", icon: "none" });
+        })
+        .finally(() => {
+          this.claimingCouponId = "";
+        });
+    },
+    isCouponReceived(couponId) {
+      return (this.liveCouponReceives || []).some((item) => item.couponId === couponId);
+    },
+    setupShare() {
+      const shareConfig = {
+        title: this.roomInfo.title || "直播间",
+        path: `/pages/live/room?id=${this.liveId}`,
+        imageUrl: this.roomInfo.coverImg || "",
+      };
+      // #ifdef MP-WEIXIN
+      if (this.$u) {
+        this.$u.mpShare = shareConfig;
+      }
+      uni.showShareMenu({
+        withShareTicket: true,
+        menus: ["shareAppMessage", "shareTimeline"],
+      });
+      // #endif
+    },
+    async initLiveRoom() {
+      const ok = await this.fetchPollingData(true);
+      if (!ok) return;
+      this.setupShare();
+      if (this.roomInfo.title) {
+        uni.setNavigationBarTitle({ title: this.roomInfo.title });
+      }
+      const systemInfo = uni.getSystemInfoSync();
+      this.scrollViewHeight = Math.max(
+        systemInfo.windowHeight - (this.isVerticalMode ? 320 : 480),
+        240
+      );
+      if (this.isLogin("auth")) {
+        await this.registerLiveUser();
+      }
+      this.startPolling();
+      this.initLiveMqtt();
+    },
+    async initLiveChat() {
+      if (!this.isLogin("auth")) return;
+
+      const groupId = this.roomInfo.imGroupId || this.roomInfo.groupId;
+      if (!groupId) {
+        console.warn("imGroupId 不存在，跳过 IM 初始化");
+        return;
+      }
+
+      if (!this.liveUser?.userSig) {
+        await this.registerLiveUser();
+      }
+      if (!this.liveUser?.userSig) {
+        console.warn("userSig 不存在，跳过 IM 初始化");
+        return;
+      }
+
+      if (!this.liveChatService) {
+        const userInfo = this.isLogin() || {};
+        this.liveChatService = new LiveChatService({
+          liveId: this.liveId,
+          userInfo,
+          defaultAvatar: this.defaultAvatar,
+          onMessagesChange: (messages) => {
+            this.messageList = messages;
+          },
+          onScrollToBottom: () => {
+            this.$nextTick(() => {
+              if (this.messageList.length) {
+                this.scrollToView = "msg-" + (this.messageList.length - 1);
+              }
+            });
+          },
+        });
+      }
+
+      this.liveChatService.userInfo = this.isLogin() || {};
+      this.liveChatService.setGroupID(groupId);
+      await this.liveChatService.initTencentIm(this.liveUser);
+    },
+    cleanupLiveChat() {
+      if (this.liveChatService) {
+        this.liveChatService.cleanup();
+        this.liveChatService = null;
+      }
+    },
+    getMqttUserId() {
+      const userInfo = this.isLogin() || {};
+      return userInfo.id || userInfo.userId || this.liveUser?.userId || `guest-${this.liveId}`;
+    },
+    initLiveMqttHandlers() {
+      if (!this.liveMqttService) return;
+      this.liveMqttService.setMessageHandlers({
+        onLiveMessage: (message) => this.handleMqttLiveMessage(message),
+        onGoodsMessage: (message) => this.handleMqttGoodsMessage(message),
+        onCouponMessage: (message) => this.handleMqttCouponMessage(message),
+        onBlacklistMessage: () => this.handleMqttBlacklistMessage(),
+        onPushStream: () => this.handleMqttPushStreamMessage(),
+      });
+    },
+    initLiveMqtt() {
+      if (!this.liveId) return;
+      if (!this.liveMqttService) {
+        this.liveMqttService = new LiveMqttService(this.liveId, this.getMqttUserId());
+      } else {
+        this.liveMqttService.userId = this.getMqttUserId();
+      }
+      this.initLiveMqttHandlers();
+      if (!this.liveMqttService.isConnected() && !this.liveMqttService.mqttClient) {
+        this.liveMqttService.initMqtt();
+      }
+    },
+    cleanupLiveMqtt() {
+      if (this.liveMqttService) {
+        this.liveMqttService.cleanup();
+        this.liveMqttService = null;
+      }
+    },
+    normalizeMqttLiveStatus(status) {
+      if (typeof status === "string") {
+        const upper = status.toUpperCase();
+        const map = {
+          NEW: LIVE_STATUS.NEW,
+          NOT_STARTED: LIVE_STATUS.NEW,
+          START: LIVE_STATUS.LIVING,
+          LIVING: LIVE_STATUS.LIVING,
+          END: LIVE_STATUS.ENDED,
+          ENDED: LIVE_STATUS.ENDED,
+          PAUSE: LIVE_STATUS.PAUSED,
+          PAUSED: LIVE_STATUS.PAUSED,
+        };
+        return map[upper] || status;
+      }
+      const numMap = {
+        0: LIVE_STATUS.NEW,
+        1: LIVE_STATUS.LIVING,
+        2: LIVE_STATUS.ENDED,
+        3: LIVE_STATUS.PAUSED,
+      };
+      return numMap[status] ?? this.roomInfo.liveStatus;
+    },
+    handleMqttLiveMessage(message) {
+      try {
+        const data = JSON.parse(message);
+        const updates = {};
+        if (data.liveStatus !== undefined) {
+          updates.liveStatus = this.normalizeMqttLiveStatus(data.liveStatus);
+        }
+        if (data.pullStreamUrl) {
+          updates.pullStreamUrl = data.pullStreamUrl;
+        }
+        if (Object.keys(updates).length) {
+          this.roomInfo = { ...this.roomInfo, ...updates };
+        }
+        if (updates.liveStatus === LIVE_STATUS.ENDED) {
+          this.stopPolling();
+        }
+      } catch (error) {
+        console.error("处理直播 MQTT 消息失败:", error);
+      }
+    },
+    handleMqttGoodsMessage(message) {
+      console.log("收到商品 MQTT 消息:", message);
+      const goodsMessageList = parseRecommendMessageArray(message);
+      if (goodsMessageList.length) {
+        this.goodsList = goodsMessageList;
+      }
+      this.fetchPollingData(false);
+    },
+    handleMqttCouponMessage(message) {
+      console.log("收到优惠券 MQTT 消息:", message);
+      const couponMessageList = parseRecommendMessageArray(message);
+      const recommendCoupon = findRecommendPayload(couponMessageList);
+      if (recommendCoupon) {
+        this.showRecommendCouponFromPayload(recommendCoupon);
+      } else {
+        this.closeRecommendCouponModal();
+      }
+      this.fetchPollingData(false);
+    },
+    handleMqttBlacklistMessage() {
+      uni.showModal({
+        title: "提示",
+        content: "您已被限制进入直播间",
+        showCancel: false,
+        success: () => this.goBackOrHome(),
+      });
+    },
+    handleMqttPushStreamMessage() {
+      if (this.roomInfo.liveStatus !== LIVE_STATUS.LIVING) {
+        this.roomInfo = { ...this.roomInfo, liveStatus: LIVE_STATUS.LIVING };
+      }
+    },
+    startPolling() {
+      this.stopPolling();
+      this.pollTimer = setInterval(() => {
+        this.fetchPollingData(false);
+      }, POLL_INTERVAL);
+    },
+    stopPolling() {
+      if (this.pollTimer) {
+        clearInterval(this.pollTimer);
+        this.pollTimer = null;
+      }
+    },
+    applyPollingData(data) {
+      if (!data) return;
+      if (data.liveDetail) {
+        this.roomInfo = data.liveDetail;
+      }
+      if (data.goodsList) {
+        this.goodsList = data.goodsList;
+      }
+      if (data.liveCoupon) {
+        this.liveCoupon = data.liveCoupon;
+        this.updateRecommendCouponPopup();
+      }
+      if (data.liveCouponReceives) {
+        this.liveCouponReceives = data.liveCouponReceives;
+        if (
+          this.recommendCouponItem &&
+          this.isCouponReceived(this.recommendCouponItem.couponId)
+        ) {
+          this.closeRecommendCouponModal();
+        }
+      }
+      if (this.roomInfo.liveStatus === LIVE_STATUS.ENDED) {
+        this.stopPolling();
+      }
+    },
+    async fetchPollingData(isInit = false) {
+      if (isInit) this.loading = true;
+      try {
+        const res = await getLivePollingData(this.liveId);
+        if (res.data.success && res.data.result) {
+          this.applyPollingData(res.data.result);
+          if (isInit && !res.data.result.liveDetail) {
+            uni.showToast({ title: "直播间不存在", icon: "none" });
+            setTimeout(() => this.goBackOrHome(), 1500);
+            return false;
+          }
+          return true;
+        }
+        if (isInit) {
+          uni.showToast({ title: res.data.message || "直播间不存在", icon: "none" });
+          setTimeout(() => this.goBackOrHome(), 1500);
+        }
+        return false;
+      } catch (e) {
+        if (isInit) {
+          uni.showToast({ title: "加载失败", icon: "none" });
+        }
+        return false;
+      } finally {
+        if (isInit) this.loading = false;
+      }
+    },
+    goGoods(item) {
+      if (this.isGoodsSoldOut(item)) return;
+      if (!item.canBuyFlag) {
+        uni.showToast({ title: "暂不可购买", icon: "none" });
+        return;
+      }
+      uni.navigateTo({
+        url: `/pages/product/goods?id=${item.skuId}&goodsId=${item.goodsId}`,
+      });
+    },
+    async registerLiveUser() {
+      if (!this.isLogin("auth")) return;
+      try {
+        const res = await registerLiveViewUser(this.liveId);
+        if (res.data.success && res.data.result) {
+          this.liveUser = res.data.result;
+          await this.initLiveChat();
+        }
+      } catch (e) {
+        console.error("register live user failed:", e);
+      }
+    },
+    formatCount(val) {
+      const num = Number(val) || 0;
+      if (num >= 10000) return `${(num / 10000).toFixed(1)}万`;
+      return num;
+    },
+    onPlayerError(e) {
+      console.error("live player error:", e.detail);
+      uni.showToast({ title: "直播加载失败", icon: "none" });
+    },
+    buildMessagePayload(content) {
+      const userInfo = this.isLogin() || {};
+      return {
+        liveRoomId: this.liveId,
+        liveName: this.roomInfo.title,
+        liveUserId: this.liveUser?.id || this.liveUser?.userId || userInfo.id,
+        userId: this.liveUser?.userId || userInfo.id,
+        userName: this.liveUser?.userName || userInfo.nickName || userInfo.username,
+        userFace: this.liveUser?.userFace || userInfo.face,
+        message: content,
+        imGroupId: this.roomInfo.imGroupId,
+      };
+    },
+    appendMessage(msg) {
+      this.messageList.push(msg);
+      this.$nextTick(() => {
+        this.scrollToView = "msg-" + (this.messageList.length - 1);
+      });
+    },
+    async sendMessage() {
+      const content = this.inputMessage.trim();
+      if (!content) {
+        if (!this.isLogin("auth")) {
+          this.goLogin();
+        }
+        return;
+      }
+
+      if (!this.requireLogin()) return;
+
+      if (!this.liveUser) {
+        await this.registerLiveUser();
+        if (!this.liveUser) {
+          uni.showToast({ title: "进入直播间失败，请重试", icon: "none" });
+          return;
+        }
+      }
+      if (this.liveUser.muteFlag) {
+        uni.showToast({ title: "您已被禁言", icon: "none" });
+        return;
+      }
+      if (this.sending) return;
+
+      this.sending = true;
+      try {
+        const res = await sendLiveMessage(this.buildMessagePayload(content));
+        if (res.data.success) {
+          this.inputMessage = "";
+        } else {
+          uni.showToast({ title: res.data.message || "发送失败", icon: "none" });
+        }
+      } catch (e) {
+        uni.showToast({ title: "发送失败", icon: "none" });
+      } finally {
+        this.sending = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+@import "./live.scss";
+@import "./live-vertical.scss";
+</style>
diff --git a/pages/live/utils/liveChat.js b/pages/live/utils/liveChat.js
new file mode 100644
index 0000000..6e80495
--- /dev/null
+++ b/pages/live/utils/liveChat.js
@@ -0,0 +1,323 @@
+/**
+ * 直播腾讯云 IM（由 saas-uni-v3 useChat 迁移）
+ */
+import TencentCloudChat from "@tencentcloud/chat";
+import { fetchLiveSetting } from "./liveSetting.js";
+
+const MAX_MESSAGE_COUNT = 100;
+
+export class LiveChatService {
+  constructor(options = {}) {
+    this.liveId = options.liveId || "";
+    this.userInfo = options.userInfo || {};
+    this.defaultAvatar = options.defaultAvatar || "";
+    this.onMessagesChange = options.onMessagesChange || (() => {});
+    this.onScrollToBottom = options.onScrollToBottom || (() => {});
+
+    this.chat = null;
+    this.groupID = "";
+    this.messageList = [];
+    this.messageIdSet = new Set();
+    this.savedViewLiveResult = null;
+    this.isAtBottom = true;
+    this.unreadCount = 0;
+    this.isLoadingHistory = false;
+    this.hasMoreHistory = false;
+    this.nextReqMessageID = "";
+
+    this._onMessageReceived = this.onMessageReceived.bind(this);
+    this._onSdkReady = this.onSdkReady.bind(this);
+    this._onSdkNotReady = this.onSdkNotReady.bind(this);
+    this._onKickedOut = this.onKickedOut.bind(this);
+  }
+
+  setGroupID(id) {
+    this.groupID = id ? String(id) : "";
+  }
+
+  async initTencentIm(viewLiveResult) {
+    if (!this.groupID) {
+      console.warn("groupID 不存在，跳过 IM 初始化");
+      return;
+    }
+
+    const setting = await fetchLiveSetting();
+    if (!setting?.imSdkAppid) {
+      console.warn("IM SDKAppID 未配置，跳过 IM 初始化");
+      return;
+    }
+
+    if (viewLiveResult?.userSig) {
+      this.savedViewLiveResult = viewLiveResult;
+    }
+
+    if (this.chat) {
+      this.loginChat(viewLiveResult);
+      return;
+    }
+
+    const chatInstance = TencentCloudChat.create({
+      SDKAppID: Number(setting.imSdkAppid),
+    });
+    this.chat = chatInstance;
+    chatInstance.setLogLevel(1);
+
+    chatInstance.on(TencentCloudChat.EVENT.MESSAGE_RECEIVED, this._onMessageReceived);
+    chatInstance.on(TencentCloudChat.EVENT.SDK_READY, this._onSdkReady);
+    chatInstance.on(TencentCloudChat.EVENT.SDK_NOT_READY, this._onSdkNotReady);
+    chatInstance.on(TencentCloudChat.EVENT.KICKED_OUT, this._onKickedOut);
+
+    this.loginChat(viewLiveResult);
+  }
+
+  onSdkNotReady() {
+    console.log("[SDK Not Ready，重新登录]");
+    this.loginChat();
+  }
+
+  loginChat(viewLiveResult) {
+    if (!this.chat) return;
+
+    const source =
+      (viewLiveResult?.userSig ? viewLiveResult : null) || this.savedViewLiveResult;
+    const userId = source?.userId || this.userInfo?.id;
+    const userSig = source?.userSig;
+
+    if (!userId || !userSig) {
+      console.warn("用户ID或签名不存在", { userId, userSig });
+      return;
+    }
+
+    this.chat
+      .login({
+        userID: `${userId}`,
+        userSig,
+      })
+      .then((imResponse) => {
+        if (imResponse.data.repeatLogin === true) {
+          this.joinGroup();
+          this.getHistoryMessageList("");
+        }
+      })
+      .catch((imError) => {
+        console.warn("login error:", imError);
+      });
+  }
+
+  onSdkReady() {
+    console.log("[SDK Ready]");
+    this.updateUserInfo();
+    this.joinGroup();
+    this.getHistoryMessageList("");
+  }
+
+  onKickedOut() {
+    console.log("[用户被踢下线，重新登录]");
+    this.loginChat();
+  }
+
+  updateUserInfo() {
+    if (!this.chat || !this.userInfo) return;
+
+    this.chat.updateMyProfile({
+      nick: this.userInfo.nickName || this.userInfo.username || "用户",
+      avatar: this.userInfo.face || this.defaultAvatar,
+      gender: TencentCloudChat.TYPES.GENDER_UNKNOWN,
+      allowType: TencentCloudChat.TYPES.ALLOW_TYPE_ALLOW_ANY,
+    });
+  }
+
+  joinGroup() {
+    if (!this.chat || !this.groupID) return;
+
+    this.chat
+      .joinGroup({
+        groupID: this.groupID,
+        type: TencentCloudChat.TYPES.GRP_AVCHATROOM,
+      })
+      .then((imResponse) => {
+        switch (imResponse.data.status) {
+          case TencentCloudChat.TYPES.JOIN_STATUS_SUCCESS:
+          case TencentCloudChat.TYPES.JOIN_STATUS_ALREADY_IN_GROUP:
+            this.getHistoryMessageList("");
+            break;
+          default:
+            break;
+        }
+      })
+      .catch((imError) => {
+        console.warn("joinGroup error:", imError);
+        this.getHistoryMessageList("");
+      });
+  }
+
+  async getHistoryMessageList(nextReqId) {
+    if (this.isLoadingHistory || !this.chat || !this.groupID) return;
+
+    this.isLoadingHistory = true;
+
+    const requestParams = {
+      conversationID: `GROUP${this.groupID}`,
+      direction: 0,
+    };
+    if (nextReqId) {
+      requestParams.nextReqMessageID = nextReqId;
+    }
+
+    try {
+      const imResponse = await this.chat.getMessageList(requestParams);
+      const msgList = imResponse.data.messageList || [];
+      const nextId = imResponse.data.nextReqMessageID;
+      const isCompleted = imResponse.data.isCompleted;
+
+      msgList.forEach((msg) => {
+        this.addMessageToList(this.formatReceivedMessage(msg), "append");
+      });
+
+      if (!this.nextReqMessageID) {
+        this.scrollToBottom();
+      }
+
+      this.nextReqMessageID = nextId;
+      this.hasMoreHistory = !isCompleted;
+    } catch (imError) {
+      console.warn("getMessageList error:", imError);
+    } finally {
+      this.isLoadingHistory = false;
+    }
+  }
+
+  formatReceivedMessage(message) {
+    let messageText = "";
+    let username = "";
+    let isSystem = false;
+
+    if (message.from === "@TIM#SYSTEM") {
+      username = "系统消息";
+      isSystem = true;
+    } else {
+      username = message.nick || message.from || "用户";
+    }
+
+    const avatar = message.avatar || this.defaultAvatar || null;
+
+    if (message.type === TencentCloudChat.TYPES.MSG_TEXT || message.type === "TIMTextElem") {
+      messageText = message.payload?.text || "";
+    } else if (
+      message.type === TencentCloudChat.TYPES.MSG_CUSTOM ||
+      message.type === "TIMCustomElem"
+    ) {
+      try {
+        const customData = JSON.parse(message.payload.data);
+        messageText = customData.content || "系统消息";
+        username = "系统消息";
+        isSystem = true;
+      } catch (e) {
+        messageText = "系统消息";
+        username = "系统消息";
+        isSystem = true;
+      }
+    } else {
+      messageText = "欢迎加入直播间";
+    }
+
+    return {
+      username,
+      message: messageText,
+      avatar: isSystem ? this.defaultAvatar : avatar,
+      messageId: message.ID,
+      time: message.time,
+      type: message.type,
+      isSystem,
+    };
+  }
+
+  toRoomMessage(item) {
+    return {
+      id: item.messageId,
+      userName: item.username,
+      userFace: item.avatar || this.defaultAvatar,
+      message: item.message,
+      isSystem: item.isSystem,
+    };
+  }
+
+  emitMessagesChange() {
+    this.onMessagesChange(
+      this.messageList.map((item) => this.toRoomMessage(item))
+    );
+  }
+
+  onMessageReceived(event) {
+    const msgList = event.data || [];
+    msgList.forEach((message) => {
+      if (message.type === TencentCloudChat.TYPES.MSG_TEXT) {
+        const formattedMessage = this.formatReceivedMessage(message);
+        this.addMessageToList(formattedMessage, "append");
+
+        if (this.isAtBottom) {
+          this.scrollToBottom();
+        } else {
+          this.unreadCount += 1;
+        }
+      }
+    });
+  }
+
+  addMessageToList(message, mode = "append") {
+    if (!message.messageId || this.messageIdSet.has(message.messageId)) return;
+
+    this.messageIdSet.add(message.messageId);
+
+    if (mode === "append") {
+      this.messageList.push(message);
+      if (this.messageList.length > MAX_MESSAGE_COUNT) {
+        const removeCount = this.messageList.length - MAX_MESSAGE_COUNT;
+        const removed = this.messageList.splice(0, removeCount);
+        removed.forEach((item) => this.messageIdSet.delete(item.messageId));
+      }
+    } else {
+      this.messageList.unshift(message);
+      if (this.messageList.length > MAX_MESSAGE_COUNT) {
+        const removeCount = this.messageList.length - MAX_MESSAGE_COUNT;
+        const removed = this.messageList.splice(-removeCount, removeCount);
+        removed.forEach((item) => this.messageIdSet.delete(item.messageId));
+      }
+    }
+
+    this.emitMessagesChange();
+  }
+
+  scrollToBottom() {
+    this.isAtBottom = true;
+    this.unreadCount = 0;
+    setTimeout(() => {
+      this.onScrollToBottom();
+    }, 100);
+  }
+
+  markAtBottom(isBottom) {
+    this.isAtBottom = isBottom;
+    if (isBottom) {
+      this.unreadCount = 0;
+    }
+  }
+
+  cleanup() {
+    if (this.chat) {
+      try {
+        this.chat.off(TencentCloudChat.EVENT.MESSAGE_RECEIVED, this._onMessageReceived);
+        this.chat.off(TencentCloudChat.EVENT.SDK_READY, this._onSdkReady);
+        this.chat.off(TencentCloudChat.EVENT.SDK_NOT_READY, this._onSdkNotReady);
+        this.chat.off(TencentCloudChat.EVENT.KICKED_OUT, this._onKickedOut);
+        this.chat.logout?.();
+      } catch (error) {
+        console.error("清理腾讯云IM失败:", error);
+      }
+      this.chat = null;
+    }
+    this.messageList = [];
+    this.messageIdSet.clear();
+    this.savedViewLiveResult = null;
+  }
+}
diff --git a/pages/live/utils/liveMqtt.js b/pages/live/utils/liveMqtt.js
new file mode 100644
index 0000000..63b6c64
--- /dev/null
+++ b/pages/live/utils/liveMqtt.js
@@ -0,0 +1,222 @@
+/**
+ * 直播 MQTT 连接管理（由 saas-uni-v3 useMqtt 迁移）
+ */
+import { createMqttClient } from "../mqtt/mqtt.js";
+
+export class LiveMqttService {
+  constructor(liveId, userId) {
+    this.liveId = liveId;
+    this.userId = userId;
+    this.mqttClient = null;
+    this.isMqttConnected = false;
+    this.fallbackMode = false;
+    this.reconnectAttempts = 0;
+    this.mqttReconnectTimer = null;
+    this.lastHeartbeatTime = null;
+    this.heartbeatCheckTimer = null;
+    this.maxReconnectAttempts = 60;
+    this.reconnectInterval = 10000;
+    this.messageHandlers = {};
+  }
+
+  setMessageHandlers(handlers) {
+    this.messageHandlers = handlers || {};
+  }
+
+  initMqtt() {
+    if (this.mqttClient) return;
+
+    if (!this.liveId || !this.userId) {
+      console.warn("直播ID或用户ID不完整，跳过MQTT初始化");
+      this.fallbackMode = true;
+      return;
+    }
+
+    const clientId = `${this.userId}-${this.liveId}-${Date.now()}`;
+
+    try {
+      const topicList = [
+        {
+          topic: `live/goods/${this.liveId}`,
+          qos: 1,
+          handler: (msg, topic) => this.messageHandlers.onGoodsMessage?.(msg, topic),
+        },
+        {
+          topic: `live/goods/${this.liveId}/#`,
+          qos: 1,
+          handler: (msg, topic) => this.messageHandlers.onGoodsMessage?.(msg, topic),
+        },
+        {
+          topic: `live/coupon/${this.liveId}`,
+          qos: 1,
+          handler: (msg, topic) => this.messageHandlers.onCouponMessage?.(msg, topic),
+        },
+        {
+          topic: `live/coupon/${this.liveId}/#`,
+          qos: 1,
+          handler: (msg, topic) => this.messageHandlers.onCouponMessage?.(msg, topic),
+        },
+        {
+          topic: `live/live/${this.liveId}`,
+          qos: 1,
+          handler: (msg, topic) => this.messageHandlers.onLiveMessage?.(msg, topic),
+        },
+        {
+          topic: `live/blacklist/${this.liveId}/${this.userId}`,
+          qos: 1,
+          handler: (msg, topic) => this.messageHandlers.onBlacklistMessage?.(msg, topic),
+        },
+        {
+          topic: "live/keepalive",
+          qos: 1,
+          handler: (msg) => this.handleKeepaliveMessage(msg),
+        },
+        {
+          topic: `live/push/${this.liveId}`,
+          qos: 1,
+          handler: (msg, topic) => this.messageHandlers.onPushStream?.(msg, topic),
+        },
+      ];
+
+      this.mqttClient = createMqttClient({
+        clientId,
+        topicHandlers: topicList,
+      });
+
+      this.mqttClient
+        .onConnected(() => {
+          console.log("✅ MQTT连接成功");
+          this.isMqttConnected = true;
+          this.fallbackMode = false;
+          this.stopMqttReconnect();
+          this.reconnectAttempts = 0;
+          this.startHeartbeatCheck();
+        })
+        .onErrorOccurred((error) => this.handleMqttFailure(error))
+        .onClosed(() => this.handleMqttFailure())
+        .onClientOffline(() => this.handleMqttFailure());
+
+      this.mqttClient.connect();
+    } catch (error) {
+      console.error("❌ MQTT初始化失败:", error);
+      this.handleMqttFailure(error);
+    }
+  }
+
+  handleKeepaliveMessage(message) {
+    console.log("[MQTT keepalive]", message);
+    this.lastHeartbeatTime = Date.now();
+  }
+
+  handleMqttFailure(error) {
+    if (error) console.error("MQTT错误:", error);
+
+    this.disconnectMqtt(false);
+
+    if (!this.fallbackMode) {
+      console.log("❗MQTT异常，启动备用模式和重连机制");
+      this.fallbackMode = true;
+    }
+
+    this.isMqttConnected = false;
+    this.startMqttReconnect();
+  }
+
+  disconnectMqtt(resetFallback = true) {
+    try {
+      if (this.mqttClient) {
+        this.mqttClient.disconnect();
+        this.mqttClient = null;
+        console.log("🔌 MQTT连接已断开");
+      }
+    } catch (error) {
+      console.error("断开MQTT连接时出错:", error);
+    }
+
+    this.isMqttConnected = false;
+    this.stopMqttReconnect();
+    if (resetFallback) {
+      this.fallbackMode = false;
+    }
+  }
+
+  startMqttReconnect() {
+    if (this.mqttReconnectTimer) return;
+
+    console.log(`开始MQTT重连机制，间隔${this.reconnectInterval}ms`);
+
+    this.mqttReconnectTimer = setInterval(() => {
+      if (this.reconnectAttempts >= this.maxReconnectAttempts) {
+        console.log(`已达到最大重连次数${this.maxReconnectAttempts}，停止重连`);
+        this.stopMqttReconnect();
+        return;
+      }
+
+      this.reconnectAttempts++;
+      console.log(`MQTT重连尝试 ${this.reconnectAttempts}/${this.maxReconnectAttempts}`);
+
+      try {
+        if (this.mqttClient) {
+          this.mqttClient.disconnect();
+          this.mqttClient = null;
+        }
+      } catch (error) {
+        console.warn("断开旧MQTT连接失败:", error);
+      }
+
+      this.initMqtt();
+    }, this.reconnectInterval);
+  }
+
+  stopMqttReconnect() {
+    if (this.mqttReconnectTimer) {
+      clearInterval(this.mqttReconnectTimer);
+      this.mqttReconnectTimer = null;
+    }
+    this.reconnectAttempts = 0;
+  }
+
+  startHeartbeatCheck() {
+    if (this.heartbeatCheckTimer) return;
+
+    this.heartbeatCheckTimer = setInterval(() => {
+      if (!this.isMqttConnected || !this.lastHeartbeatTime) return;
+
+      const timeSinceLastHeartbeat = Date.now() - this.lastHeartbeatTime;
+      if (timeSinceLastHeartbeat > 30000) {
+        console.warn("⚠️ MQTT心跳超时，主动重连");
+
+        if (this.mqttClient) {
+          try {
+            this.mqttClient.disconnect();
+            this.mqttClient = null;
+          } catch (error) {
+            console.warn("断开假死MQTT连接失败:", error);
+          }
+        }
+
+        this.isMqttConnected = false;
+        this.lastHeartbeatTime = null;
+        this.mqttClient = null;
+        this.initMqtt();
+      }
+    }, 10000);
+  }
+
+  stopHeartbeatCheck() {
+    if (this.heartbeatCheckTimer) {
+      clearInterval(this.heartbeatCheckTimer);
+      this.heartbeatCheckTimer = null;
+    }
+  }
+
+  isConnected() {
+    return this.isMqttConnected;
+  }
+
+  cleanup() {
+    this.stopHeartbeatCheck();
+    this.stopMqttReconnect();
+    this.disconnectMqtt();
+  }
+}
diff --git a/pages/live/utils/liveRecommend.js b/pages/live/utils/liveRecommend.js
new file mode 100644
index 0000000..985b639
--- /dev/null
+++ b/pages/live/utils/liveRecommend.js
@@ -0,0 +1,27 @@
+/**
+ * 直播 MQTT 推荐消息解析（商品 / 优惠券）
+ */
+
+export function toBoolean(value) {
+  if (typeof value === "boolean") return value;
+  if (typeof value === "number") return value === 1;
+  if (typeof value === "string") {
+    const normalized = value.trim().toLowerCase();
+    return normalized === "true" || normalized === "1";
+  }
+  return false;
+}
+
+export function parseRecommendMessageArray(message) {
+  try {
+    const parsed = JSON.parse(message);
+    return Array.isArray(parsed) ? parsed : [];
+  } catch (error) {
+    console.warn("MQTT 消息解析失败:", error);
+    return [];
+  }
+}
+
+export function findRecommendPayload(list) {
+  return list.find((item) => toBoolean(item.recommend) && !toBoolean(item.hideFlag));
+}
diff --git a/pages/live/utils/liveSetting.js b/pages/live/utils/liveSetting.js
new file mode 100644
index 0000000..164d585
--- /dev/null
+++ b/pages/live/utils/liveSetting.js
@@ -0,0 +1,34 @@
+import { getLiveSetting } from "@/api/live.js";
+
+let cachedSetting = null;
+let fetchingPromise = null;
+
+export async function fetchLiveSetting(force = false) {
+  if (!force && cachedSetting) return cachedSetting;
+  if (!force && fetchingPromise) return fetchingPromise;
+
+  fetchingPromise = (async () => {
+    try {
+      const res = await getLiveSetting();
+      if (res.data?.success && res.data?.result) {
+        cachedSetting = res.data.result;
+        return cachedSetting;
+      }
+      console.warn("获取直播配置失败", res.data);
+      return null;
+    } catch (error) {
+      console.error("获取直播配置异常:", error);
+      return null;
+    } finally {
+      fetchingPromise = null;
+    }
+  })();
+
+  return fetchingPromise;
+}
+
+export function resolveSdkAppId(setting) {
+  if (!setting?.imSdkAppid) return 0;
+  const id = Number(setting.imSdkAppid);
+  return Number.isNaN(id) ? 0 : id;
+}
diff --git a/pages/promotion/lives.vue b/pages/promotion/lives.vue
index e8a4afe..cd35854 100644
--- a/pages/promotion/lives.vue
+++ b/pages/promotion/lives.vue
@@ -272,27 +272,11 @@ export default {
      * 进入直播间
      */
     handleLivePlayer(val) {
-      // #ifdef MP-WEIXIN
-      let roomId = val.roomId; // 填写具体的房间号，可通过下面【获取直播房间列表】 API 获取
-      let customParams = encodeURIComponent(
-        JSON.stringify({ path: "pages/index/index", pid: 1 })
-      ); // 开发者在直播间页面路径上携带自定义参数，后续可以在分享卡片链接和跳转至商详页时获取，详见【获取自定义参数】、【直播间到商详页面携带参数】章节（上限600个字符，超过部分会被截断）
+      const id = val.id || val.roomId;
+      if (!id) return;
       uni.navigateTo({
-        url:
-          "plugin-private://wx2b03c6e691cd7370/pages/live-player-plugin?room_id=" +
-          roomId +
-          "&custom_params=" +
-          customParams,
+        url: `/pages/live/room?id=${id}`,
       });
-      // #endif
-
-      // #ifndef MP-WEIXIN
-      uni.showToast({
-        title: "请从微信小程序中预览直播功能",
-        duration: 2000,
-        icon: "none",
-      });
-      // #endif
     },
   },
 };