gengxin

src/views/live/parts/liveList.vue

@@ -2,8 +2,8 @@
   <div id="liveList">
     <el-row>
       <el-col :span="24" class="info">
-        <el-col class="list" v-for="(item, index) in list" :key="index">
-          <el-col :span="18" class="left">
+        <el-col class="list" :span="12" v-for="(item, index) in list" :key="index">
+          <!-- <el-col :span="18" class="left">
             <p class="textOver">{{ item.title }}</p>
             <p>
               举办城市:<span>{{ item.province }}{{ item.places }}</span>
@@ -16,6 +16,11 @@
             <p @click="$router.push({ path: '/live/roomDetail', query: { id: item.id, roomname: item.roomname } })" v-if="item.roomname">进入房间</p>
             <p @click="$router.push({ path: '/live/detail', query: { id: item.id } })" v-else>进入房间</p>
             <p @click="$router.push({ path: '/onlive/roomInfo', query: { roomname: item.roomname } })" v-if="item.roomname">房间详情</p>
+          </el-col> -->
+          <el-col :span="24" class="detail" @click.native="$router.push({ path: '/onlive/roomInfo', query: { id: item.id } })">
+            <el-image :src="item.filedir"></el-image>
+            <p class="textOver">[房间号:{{ item.name }}]{{ item.title }}</p>
+            <van-col :span="24" class="starttime"><van-icon name="underway-o" />开始时间:{{ item.starttime }}</van-col>
           </el-col>
         </el-col>
       </el-col>
@@ -63,33 +68,58 @@ export default {
 .info {
   padding: 10px;
 }
+// .list {
+//   background: #fff;
+//   padding: 10px;
+//   border-radius: 5px;
+//   margin: 0 0 10px 0;
+//   .left {
+//     font-size: 16px;
+//     color: #ccc;
+//     p {
+//       padding: 0 0 10px 0;
+//       span {
+//         color: #000;
+//       }
+//     }
+//     p:first-child {
+//       color: #000;
+//     }
+//   }
+//   .right {
+//     text-align: center;
+//     p {
+//       background: #409eff;
+//       color: #fff;
+//       padding: 5px 8px;
+//       border-radius: 5px;
+//       margin: 0 0 10px 0;
+//     }
+//   }
+// }
 .list {
-  background: #fff;
-  padding: 10px;
+  padding: 5px;
+  height: 140px;
+  margin: 0 0 5px 0;
+}
+.detail {
   border-radius: 5px;
-  margin: 0 0 10px 0;
-  .left {
-    font-size: 16px;
-    color: #ccc;
-    p {
-      padding: 0 0 10px 0;
-      span {
-        color: #000;
-      }
-    }
-    p:first-child {
-      color: #000;
-    }
-  }
-  .right {
-    text-align: center;
-    p {
-      background: #409eff;
-      color: #fff;
-      padding: 5px 8px;
-      border-radius: 5px;
-      margin: 0 0 10px 0;
-    }
-  }
+  height: 140px;
+  border: 1px solid #f5f5f5;
+}
+/deep/.el-image {
+  overflow: hidden;
+  border-radius: 5px;
+  height: 100px;
+}
+.detail p {
+  font-size: 12px;
+}
+.starttime {
+  font-size: 12px;
+}
+/deep/.van-icon::before {
+  font-size: 10px;
+  margin-right: 3px;
 }
 </style>

src/views/onlive/roomInfo.vue

@@ -22,7 +22,16 @@
               </van-col>
             </van-tab>
           </van-tabs>
-          <van-col :span="24" class="reserve">立即预约</van-col>
+          <!-- <van-col :span="24" class="reserve">立即预约</van-col> -->
+          <van-col
+            :span="24"
+            class="reserve"
+            @click.native="$router.push({ path: '/live/roomDetail', query: { id: roomInfos.id, roomname: roomInfos.name } })"
+            v-if="roomInfos.name"
+          >
+            进入房间
+          </van-col>
+          <van-col :span="24" class="reserve" @click.native="$router.push({ path: '/live/detail', query: { id: roomInfos.id } })" v-else>进入房间</van-col>
         </el-col>
       </el-col>
     </el-row>
@@ -59,9 +68,9 @@ export default {
     this.seachInfo();
   },
   methods: {
-    ...room(['roomfetch']),
+    ...room(['fetch']),
     async seachInfo() {
-      let res = await this.roomfetch({ roomname: this.roomname });
+      let res = await this.fetch(this.id);
       if (this.$checkRes(res)) {
         console.log(res.data);
 
@@ -76,8 +85,8 @@ export default {
   },
   computed: {
     ...mapState(['user']),
-    roomname() {
-      return this.$route.query.roomname;
+    id() {
+      return this.$route.query.id;
     },
   },
   mounted() {