商品列表

src/components/livedModel/livedControls.vue

@@ -3,14 +3,19 @@
     <!-- 公告层 -->
     <livedAnnouncement></livedAnnouncement>
     <!-- 用户进入通知 -->
-    <div class="userComing userComingAni" v-if="userComing"><span>xxx</span><span>来了</span></div>
+    <div class="userComing userComingAni" v-if="userComing">
+      <span>xxx</span>
+      <span>来了</span>
+    </div>
     <!-- 评论层 -->
     <livedIsMsg></livedIsMsg>
     <!-- 带货商品层 -->
     <livedExplainingCommodities></livedExplainingCommodities>
+    <!-- 商品列表弹层 -->
+    <livedGoodsDia :showDia="showDia" @changeStatus="changeStatus"></livedGoodsDia>
     <!-- 底部控制层 -->
     <div class="control flex">
-      <div class="goodsImg">
+      <div class="goodsImg" @click="showGoodsList">
         <img src="../../../static/images/lived/goodsImg.png" alt />
         <p class="goodsNum">99</p>
       </div>
@@ -35,6 +40,7 @@
 import livedAnnouncement from "@/components/livedModel/livedAnnouncement";
 import livedIsMsg from "@/components/livedModel/livedIsMsg";
 import livedExplainingCommodities from "@/components/livedModel/livedExplainingCommodities";
+import livedGoodsDia from "@/components/livedModel/livedGoodsDia";
 export default {
   name: "",
   data() {
@@ -48,13 +54,15 @@ export default {
         "//img2.imgtn.bdimg.com/it/u=1354268575,1268995723&fm=26&gp=0.jpg"
       ],
       num: 0,
-      userComing:false,
+      userComing: false,
+      showDia: false //显示商品列表弹窗
     };
   },
   components: {
     livedAnnouncement,
     livedIsMsg,
-    livedExplainingCommodities
+    livedExplainingCommodities,
+    livedGoodsDia
   },
   computed: {
     likeNumCopy() {
@@ -62,12 +70,14 @@ export default {
     }
   },
   created() {},
-  mounted() {
+  onLoad(){
     setInterval(() => {
       this.getAdd();
-      this.userComing=!this.userComing;
+      this.userComing = !this.userComing;
     }, 5000);
   },
+  mounted() {
+  },
   methods: {
     // 数量大于1w
     watchMan(val) {
@@ -98,6 +108,13 @@ export default {
           this.addLike(2);
         }, 200 * i);
       }
+    },
+    // 显示商品
+    showGoodsList() {
+      this.showDia = true;
+    },
+    changeStatus() {
+      this.showDia = false;
     }
   }
 };
@@ -112,7 +129,7 @@ export default {
   bottom: 10px;
   left: 0;
   width: 100vw;
-  .userComing{
+  .userComing {
     margin-bottom: 10px;
     background: rgba(#000, 0.4);
     color: #fff;
@@ -123,23 +140,23 @@ export default {
     padding: 0 8px;
     display: inline-block;
   }
-  .userComingAni{
-    animation: userComingAni 5s linear;
+  .userComingAni {
+    animation: userComingAni 5.1s linear;
   }
   @keyframes userComingAni {
-    0%{
+    0% {
       transform: translateX(150vw);
       opacity: 0.3;
     }
-    30%{
+    30% {
       transform: translateX(12px);
       opacity: 1;
     }
-    80%{
+    80% {
       transform: translateX(12px);
       opacity: 1;
     }
-    100%{
+    100% {
       transform: translateX(-150vw);
       opacity: 0;
     }

src/components/livedModel/livedGoodsDia.vue

+<template>
+  <div class="livedGoodsList">
+    <van-popup
+      :show="showDia"
+      position="bottom"
+      custom-style="height: 50vh;padding:14px;border-top-left-radius:10px;border-top-right-radius:10px;"
+      :close-on-click-overlay="true"
+      @close="closeDia"
+    >
+      <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="bottom">
+              <div class="price">
+                <p>
+                  <span>￥</span>
+                  <span>{{item.price}}</span>
+                </p>
+                <p class="del">
+                  <span>￥</span>
+                  <span>{{999}}</span>
+                </p>
+              </div>
+              <div class="icon">
+                <van-icon name="shopping-cart" />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </van-popup>
+  </div>
+</template>
+
+<script type="text/ecmascript-6">
+export default {
+  props: {
+    showDia: {
+      type: Boolean,
+      default: false
+    }
+  },
+  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: {
+    //   关闭
+    closeDia() {
+      this.$emit("changeStatus");
+    }
+  }
+};
+</script>
+
+<style lang="scss" scoped>
+.livedGoodsList {
+  .list {
+    .item {
+      padding: 10px 4px;
+      display: flex;
+      align-items: center;
+      .img {
+        width: 70px;
+        height: 70px;
+        border-radius: 6px;
+        overflow: hidden;
+        img {
+          width: 100%;
+          height: 100%;
+          object-fit: cover;
+        }
+      }
+      .info {
+        flex: 1;
+        height: 80px;
+        margin-left: 16px;
+        color: #333;
+        font-size: 16px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        .name {
+          text-align: left;
+        }
+        .bottom {
+          display: flex;
+          justify-content: space-between;
+          align-items: center;
+          span {
+            color: #ff0000;
+          }
+          .price {
+            font-size: 18px;
+            .del{
+              font-size: 16px;
+              text-decoration: line-through;
+              span {
+                color: #666;
+              }
+            }
+          }
+          .icon {
+            font-size: 22px;
+            color: #ff8181;
+          }
+        }
+      }
+    }
+  }
+}
+</style>

src/pages/lived/main.json

@@ -3,6 +3,7 @@
   "navigationBarTextStyle": "white",
   "usingComponents": {
     "van-button": "/static/vant/button/index",
-    "van-icon": "/static/vant/icon/index"
+    "van-icon": "/static/vant/icon/index",
+    "van-popup": "/static/vant/popup/index"
   }
 }
\ No newline at end of file