直播场次

src/views/hosts/hostsList.vue

@@ -46,12 +46,20 @@
           <el-table-column prop="invitationType" :label="$t('hostList.invitationType')" width="80">
             <template #default="scope">
 
-              <el-tag :type="scope.row.invitationType == 1 ? 'success' : 'warning'" @click="getliveHost">
+              <el-tag :type="scope.row.invitationType == 1 ? 'success' : 'warning'">
                 {{ scope.row.invitationType == 1 ? $t('hostList.invitationType1') : $t('hostList.invitationType2') }}
               </el-tag>
             </template>
           </el-table-column>
 
+          <el-table-column label="直播场次" width="120">
+            <template #default="scope">
+              <el-button class="live-btn" size="small" @click="getliveHost(scope.row.hostId)">
+                查看场次
+              </el-button>
+            </template>
+          </el-table-column>
+
           <el-table-column v-for="label in labelList" :key="label.paramCode" :prop="label.paramCode"
             :label="label.paramCodeMeaning" width="120">
             <template v-if="label.paramCode != 'createDt'" #default="scope">
@@ -139,6 +147,9 @@
       </template>
     </el-dialog>
 
+    <LiveRecordDialog v-model:modelValue="liveDetailDialogVisible" :rows="liveDetailRecords"
+      @select="handleLiveSelect" />
+
 
 
   </div>
@@ -154,6 +165,7 @@ import { ref, reactive, onMounted } from 'vue';
 // import { ElMessage, ElMessageBox } from 'element-plus'
 // import { color } from 'echarts';
 import { useI18n } from 'vue-i18n'
+import LiveRecordDialog from '@/components/LiveRecordDialog.vue'
 
 
 const { t } = useI18n()
@@ -224,6 +236,9 @@ let staffId = ref({})
 let commentInfo = ref('')
 //备注信息主播
 let commentHost = ref('')
+let liveDetailDialogVisible = ref(false)
+let liveDetailRecords = ref([])
+let liveDetailLoading = ref(false)
 //分页
 let pageSize = ref(10)
 let page = ref(1)
@@ -359,17 +374,29 @@ function handleClose(done) {
 }
 
 
-function getliveHost() {
+function getliveHost(hostId) {
+  liveDetailLoading.value = true
   liveHostDetail(
     {
-      "hostsId": "1296peahh",
+      "hostsId": hostId,
       "tenantId": userInfo.value.tenantId
     }
   ).then(res => {
-    console.log("直播间信息列表", JSON.stringify(res))
+    const detailList = Array.isArray(res) ? res : (res?.records || [])
+    liveDetailRecords.value = detailList
+    liveDetailDialogVisible.value = true
+  }).catch(err => {
+    console.log('liveHostDetail error', err)
+  }).finally(() => {
+    liveDetailLoading.value = false
   })
 }
 
+function handleLiveSelect(row) {
+  console.log('selected live row', row)
+  liveDetailDialogVisible.value = false
+}
+
 //修改主播维护状态
 // function handleSelectChange(event, data) {
 
@@ -518,6 +545,8 @@ function openHTML(id) {
   box-sizing: border-box;
   // height: 100vh;
   padding: 40px;
+  background: linear-gradient(135deg, #f7fbff 0%, #f2f9f8 100%);
+  border-radius: 16px;
 
   /* 页面无法选中 */
   // -webkit-user-select: none;
@@ -527,12 +556,38 @@ function openHTML(id) {
 
   .hostTable {
     width: 100%;
-    padding: 40px 0;
+    max-width: 100%;
+    overflow: hidden;
+    padding: 16px;
+    background: #ffffff;
+    border-radius: 12px;
+    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
+    box-sizing: border-box;
 
     .hostIdText {
       text-decoration: underline;
       cursor: pointer;
     }
+
+    .live-btn {
+      background: linear-gradient(90deg, #45a1ff, #5ad9ff);
+      border: none;
+      color: #fff;
+    }
+
+    .live-btn:hover {
+      filter: brightness(1.05);
+    }
+
+    :deep(.el-table) {
+      width: 100% !important;
+      table-layout: fixed;
+    }
+
+    :deep(.el-table__header-wrapper),
+    :deep(.el-table__body-wrapper) {
+      overflow-x: auto;
+    }
   }
 
   .serch-button {