是都显示视频播放按钮判断

zhiyangdu
1 parent 71956d5c
Showing 4 changed files with 41 additions and 3 deletions
src/components/darenListCom/darenListCom.vue
src/components/palaceGrid/palaceGrid.less
src/components/palaceGrid/palaceGrid.vue
static/img/play.png
@@ -29,7 +29,7 @@
 				<!-- 达人图片展示（单独组建处理，宫格形式） -->
 				<palace-grid
 					:grids="{
-		            list:item.img
+		            list:imgArr
 					}">
 				</palace-grid>
 			</div>
@@ -96,7 +96,7 @@
 		name: "darenListCom",
         data() {
             return {
-
+                imgArr: []
             }
         },
 		props: ["item"],
@@ -191,6 +191,26 @@
 			palaceGrid,
 			goodsItem4
         },
+        mounted() {
+
+            // 如果有图片数组，处理图片数组
+            if (this.item.img && this.item.img.length) {
+
+                // 遍历数组
+                this.item.img.forEach((item, index) => {
+                    this.imgArr.push({
+                        img: item,
+                        w: 0,
+                        h: 0
+                    });
+
+                    // 判断如果有视频，添加有视频属性到imgArr中
+                    if (index === 0 && this.item.video && this.item.video_img) {
+                        this.$set(this.imgArr[index], "v", true);
+                    }
+                });
+            }
+        },
 		methods: {
 			/**
@@ -26,7 +26,22 @@
                     width: 100%;
                     height: 340px;
                 }
-
+                .play_box{
+                    width: 100%;
+                    height: 100%;
+                    position: absolute;
+                    left: 0;
+                    top:0;
+                    //background-color: #000;
+                    z-index: 1;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    img{
+                        width: 86px;
+                        height: 86px;
+                    }
+                }
             }
             .two{
                 width: calc(calc(100% / 2));
@@ -11,6 +11,9 @@
                         lazy-load
                         :src="item.img || item"
                     />
+                    <div  v-if="index<8&&item.v === true" class="play_box">
+                    <img src="static/img/play.png" />
+                    </div>
                     <div v-if="grids.list.length>9 && index == 8" class="title">共{{grids.list.length}}张</div>
                 </div>
 			</div>