轮播增加可以有播放按钮轮播

zhiyangdu
1 parent f1f739ea
Showing 2 changed files with 69 additions and 2 deletions
src/components/swiper/swiper.less
src/components/swiper/swiper.vue
@@ -63,6 +63,22 @@
                 }
             }
         }
+        .play-button-box {
+          position: absolute;
+          top: 0;
+          left: 0;
+          z-index: 1;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          width: 100%;
+          height: 100%;
+          .play-button-img {
+              display: block;
+              width: 100px;
+              height: 100px;
+          }
+      }
     }
 }
 // 积分商城样式
@@ -2,12 +2,16 @@
     <div class="swiper-box" :class="{'points-mall-swiper':isPointsMall}" v-if="swipers  && swipers.length">
         <swipe class="swipe" :autoplay="5000" :touchable="swipers.length===1 ? false : true" :show-indicators="options && options.showIndicators !== undefined ? options.showIndicators : showIndicators" @change="onChange">
             <swipe-item class="swipe-item" v-for="(item, index) in swipers" :key="index">
-                <div class="item" @click="$parent.$parent.gotoDetail(item)">
+                <div class="item" @click="item.type == 22 ? playNow(item.to) : $parent.$parent.gotoDetail(item)">
                     <div class="img-box">
                         <img v-if="isPointsMall" v-lazy="item + SIGN.BIG" class="img" mode="widthFix" />
                         <img v-else v-lazy="item.simg + SIGN.BIG" class="img" mode="widthFix" />
                     </div>
                 </div>
+                <!-- 展示播放按钮 -->
+                <div v-if="item.type == 22" class="play-button-box">
+                    <img src="static/img/play_dark.png" class="play-button-img" />
+                </div>
             </swipe-item>
               <template v-if="isPointsMall" #indicator>
                 <div class="custom-indicator">
@@ -44,7 +48,54 @@ export default {
     onChange (index) {
       this.current = index;
       this.$emit("onChange", index);
-    }
+    },
+    /**
+      * 播放视频
+      * @param {String} videoUrl [数据对象]
+      */
+    playNow(videoUrl) {
+        // 判断App内
+        if (this.isCNLive.value) {
+
+            // 判断通用跳转函数是否存在
+            if (typeof this.$parent.gotoDetail === 'function') {
+
+                // 设置跳转参数
+                let params = {
+                    type: '22',
+                    to: videoUrl,
+                    shop_type: ''
+                };
+                
+                // 通用跳转
+                this.$parent.$parent.gotoDetail(params);
+            }
+        } else {
+
+            // App外，唤起App
+            this.openApp();
+        }
+    },
+    /**
+     * 唤起App封装
+     */
+    openApp() {
+
+        this.$nextTick(() => {
+
+            // 唤起App
+            if (typeof this.$parent.$parent.callAppModal === 'function' && typeof this.$parent.$refs.callApp === 'object') {
+
+                // 设置唤起参数
+                let options = {
+                    success: this.$parent.$refs.callApp.callApp
+                }
+
+                // 唤起App
+                this.$parent.$parent.callAppModal(options);
+            }
+        });
+    },
   }
 }
 </script>