直播结束组件

src/components/livedModel/livedIsEnded.vue

+<template>
+  <!-- 直播结束组件 -->
+  <div class="livedIsEnd">
+    <div class="end">
+      <p class="endTxt">直播已结束</p>
+      <p class="time">
+        <span>直播时长：</span>
+        <span>01:22:33</span>
+      </p>
+      <div class="data">
+        <div>
+          <p>333</p>
+          <p>观看</p>
+        </div>
+        <div>
+          <p>333</p>
+          <p>评论</p>
+        </div>
+        <div>
+          <p>333</p>
+          <p>赞</p>
+        </div>
+      </div>
+      <!-- 商品列表 -->
+      <div class="goodsList">
+        <div class="tit">
+          <span>商品列表</span>
+          <span>({{goodsList.length}})</span>
+        </div>
+        <div class="list">
+          <div class="item" v-for="(item,index) in goodsList" :key="index">
+            <div class="img">
+              <img :src="item.img" alt />
+            </div>
+            <div class="info">
+              <p class="name line-clamp2">{{item.name}}</p>
+              <div class="price">
+                <p>
+                  <span>￥</span>
+                  <span>{{item.price}}</span>
+                </p>
+                <div class="icon">
+                  <van-icon name="shopping-cart" />
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  name: "",
+  data() {
+    return {
+      goodsList: [
+        {
+          name: "产品名称产品名称产品名称产品名称产品名称",
+          img:
+            "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
+          price: 123
+        },
+        {
+          name: "产品名称产品名称产品名称产品名称产品名称",
+          img:
+            "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
+          price: 123
+        },
+        {
+          name: "产品名称产品名称产品名称产品名称产品名称",
+          img:
+            "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
+          price: 123
+        },
+        {
+          name: "产品名称产品名称产品名称产品名称产品名称",
+          img:
+            "//img3.imgtn.bdimg.com/it/u=3743111107,1940472030&fm=11&gp=0.jpg",
+          price: 123
+        }
+      ]
+    };
+  },
+  components: {},
+  computed: {},
+  created() {},
+  mounted() {},
+  methods: {}
+};
+</script>
+
+<style lang="scss" scoped>
+.line-clamp2 {
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
+  line-height: 22px;
+  word-break: break-all;
+}
+.livedIsEnd {
+  position: absolute;
+  top: 20vh;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  .end {
+    p {
+      text-align: center;
+      color: #fff;
+    }
+    .endTxt {
+      font-size: 30px;
+      font-weight: 400;
+    }
+    .time {
+      margin-top: 10px;
+      font-size: 16px;
+    }
+    .data {
+      margin-top: 20px;
+      width: 70vw;
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      & > div {
+        p {
+          text-align: center;
+          font-size: 20px;
+        }
+      }
+    }
+    .goodsList {
+      position: absolute;
+      bottom: 0;
+      left: 0;
+      background: rgba(#000, 0.4);
+      border-top-left-radius: 10px;
+      border-top-right-radius: 10px;
+      padding: 12px;
+      width: 100%;
+      box-sizing: border-box;
+      p,
+      span {
+        color: #fff;
+      }
+      .tit {
+        font-size: 16px;
+        padding: 0 4px;
+      }
+      .list {
+        max-height: 50vh;
+        overflow-y: auto;
+        .item {
+          padding: 14px 4px;
+          border-bottom: 1px solid #eeeeed;
+          display: flex;
+          .img {
+            width: 100px;
+            height: 100px;
+            border-radius: 6px;
+            overflow: hidden;
+            img {
+              width: 100%;
+              height: 100%;
+              object-fit: cover;
+            }
+          }
+          .info {
+            flex: 1;
+            height: 100px;
+            margin-left: 16px;
+            color: #fff;
+            font-size: 18px;
+            display: flex;
+            flex-direction: column;
+            justify-content: space-between;
+            .price{
+              display: flex;
+              justify-content: space-between;
+              align-items: center;
+              font-size: 18px;
+              span{
+                color: #FF0000;
+                text-align: left;
+              }
+              .icon{
+                font-size: 22px;
+                color: #FF8181;
+              }
+            }
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/lived/index.vue

@@ -26,8 +26,10 @@
       </div>
       <!-- 未开始展示 -->
       <notStarted v-if="liveNoticeInfo.liveBroadcastState==0" :info="liveNoticeInfo"></notStarted>
+      <!-- 结束展示 -->
+      <livedIsEnded v-if="liveNoticeInfo.liveBroadcastState==2"></livedIsEnded>
       <!-- 控件层 -->
-      <livedControls v-if="liveNoticeInfo" :info="liveNoticeInfo"></livedControls>
+      <livedControls v-if="liveNoticeInfo&&liveNoticeInfo.liveBroadcastState<2" :info="liveNoticeInfo"></livedControls>
     </div>
     <!-- 直播 -->
     <live-player
@@ -47,6 +49,7 @@ import { DFSImg } from "@/utils/index";
 import live from "@/api/live";
 import notStarted from "@/components/livedModel/notStarted"
 import livedControls from "@/components/livedModel/livedControls"
+import livedIsEnded from "@/components/livedModel/livedIsEnded"
 export default {
   name: "",
   data() {
@@ -66,7 +69,8 @@ export default {
   },
   components: {
     notStarted,
-    livedControls
+    livedControls,
+    livedIsEnded
   },
   computed: {},
   created() {},