首页轮播图添加视频

pages/index/index.js

@@ -12,6 +12,7 @@ Page({
     autoplay: true,
     interval: 2000,
     duration: 1000,
+    controls: false,
     indexImgs: [],
     seq: 0,
     news: [],
@@ -42,6 +43,28 @@ Page({
     }
 
   },
+  getVideoShow() {
+    var params = {
+      url: "/apiCommon/getBaseParamByCode",
+      method: "GET",
+      data: {
+        paramCode: 'is_show_home_video'
+      },
+      callBack: (res) => {
+        console.log('视频是否展示',res)
+        let isShow = JSON.parse(res.result.paramValue).isShow
+        console.log('rate', JSON.parse(res.result.paramValue))
+        this.setData({
+          isVideoShow: isShow? false: true
+        });
+        this.getIndexImgs()
+      },
+      errCallBack: (res)=>{
+        this.getIndexImgs()
+      }
+    };
+    http.request(params);
+  },
   bound() {
     var token = wx.getStorageSync('token');
     if (token) {
@@ -125,9 +148,11 @@ Page({
     if (user && user.id) {
       http.getCartCount(); //重新计算购物车总数量
     }
-    this.getIndexImgs();
+    this.getVideoShow()
+    // this.getIndexImgs()
     this.getNoticeList();
     this.getTag();
+   
   },
   //加载轮播图
   getIndexImgs() {
@@ -137,6 +162,17 @@ Page({
       method: "GET",
       data: {},
       callBack: (res) => {
+        res.forEach((item, index) => {
+          if (index == 0 && this.data.isVideoShow) {
+            item.type = 1
+            item.video = 'https://zhqg.jsonpro.cn/images/video/c0d13902c3455b58d950a901d82dae86.mp4'
+          } else if (index == 1 && this.data.isVideoShow) {
+            item.type = 1
+            item.video = 'https://zhqg.jsonpro.cn/images/video/f1883d3f0aaa25907829b3033cfc5d11.mp4'
+          } else {
+            item.type = 0
+          }
+        })
         this.setData({
           indexImgs: res,
           seq: res
@@ -160,7 +196,22 @@ Page({
     http.request(params);
   },
 
-
+  // 播放
+  videoPlay: function (e) {
+    let video = e.currentTarget.dataset.video
+    console.log("开始播放")
+    var videoplay = wx.createVideoContext("video");
+    videoplay.play()
+    this.setData({
+      controls: true,
+      video: video
+    })
+  },
+  quiteVideo: function(res){
+      this.setData({
+        controls: false
+      })
+  },
   // 加载商品标题分组列表
   getTag() {
     var params = {

pages/index/index.wxml

@@ -11,15 +11,26 @@
 
   <view class='content'>
     <!-- swiper -->
-    <swiper autoplay="{{autoplay}}" indicator-color="{{indicatorColor}}" interval="{{interval}}" duration="{{duration}}" indicator-active-color="{{indicatorActiveColor}} " circular='true' class='pic-swiper' indicator-dots previous-margin='20rpx' next-margin='20rpx'>
+    <swiper wx:if="{{!controls}}" autoplay="{{autoplay}}" indicator-color="{{indicatorColor}}" interval="{{interval}}"
+      duration="{{duration}}" indicator-active-color="{{indicatorActiveColor}} " circular='true' class='pic-swiper'
+      indicator-dots previous-margin='20rpx' next-margin='20rpx'>
       <block wx:for='{{indexImgs}}' wx:key='index'>
         <swiper-item class="banner-item">
           <view class='img-box'>
-            <image src='{{item.imgUrl}}' data-prodid='{{item.relation}}' bindtap='toProdPage' class='banner'></image>
+            <view class='videocover' data-id="{{index}}" bindtap='playbtn' wx:if="{{item.type==1}}">
+              <image src='/images/icon/playBtn.png' class='playbtn' bindtap="videoPlay" data-video="{{item.video}}">
+              </image>
+            </view>
+            <image src='{{item.imgUrl}}' data-prodid='{{item.relation}}' bindtap='toProdPage' class='banner' mode="aspectFill"></image>
           </view>
         </swiper-item>
       </block>
     </swiper>
+    <view wx:else class="my-video">
+      <video class='box-w block' id="video" src="{{video}}" show-center-play-btn="{{false}}"
+        autoplay='false' object-fit="fill" bindpause="quiteVideo" bindended="quiteVideo"
+        controls="true"></video>
+    </view>
     <!-- end swiper -->
 
     <view class='cat-item'>
@@ -59,7 +70,8 @@
     <view class='up-to-date' wx:if="{{item.style==2}}">
       <view class='title'>
         <text>{{item.title}}</text>
-        <view class='more-prod-cont' bindtap='toClassifyPage' data-sts="0" data-id="{{item.id}}" data-title="{{item.title}}">
+        <view class='more-prod-cont' bindtap='toClassifyPage' data-sts="0" data-id="{{item.id}}"
+          data-title="{{item.title}}">
           <text class='more'>查看更多</text>
           <!-- <text class='arrow'></text> -->
         </view>
@@ -88,7 +100,8 @@
     <view class='hot-sale' wx:if="{{item.style==1}}">
       <view class='title'>
         <text>{{item.title}}</text>
-        <view class='more-prod-cont' bindtap='toClassifyPage' data-sts="0" data-id="{{item.id}}" data-title="{{item.title}}">
+        <view class='more-prod-cont' bindtap='toClassifyPage' data-sts="0" data-id="{{item.id}}"
+          data-title="{{item.title}}">
           <text class='more'>更多</text>
           <text class='arrow'></text>
         </view>

pages/index/index.wxss

@@ -19,7 +19,16 @@ swiper.pic-swiper {
   background: #fff;
   height: 422rpx;
 }
-
+.my-video{
+  padding: 10rpx 0;
+  margin-top: 75rpx;
+  width: 100%;
+  height: 422rpx;
+}
+.my-video .block{
+  width: 100%;
+  height: 422rpx;
+}
 swiper-item {
   font-size: 26rpx;
   font-weight: bold;
@@ -29,6 +38,30 @@ swiper.pic-swiper .img-box {
   font-size: 0;
 }
  
+.videocover {
+  width: 100%;
+  overflow: hidden;
+}
+ 
+.videocoverbg {
+  position: absolute;
+  left: 0;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.3);
+}
+ 
+.playbtn {
+  position: absolute;
+  top: 50%;
+  z-index: 2;
+  left: 50%;
+  width: 50px;
+  height: 50px;
+  transform: translate(-50%, -50%);
+}
+
 .wx-swiper-dots {
   margin-bottom: 15rpx;
 }

pages/invite/invite.js

@@ -244,7 +244,7 @@ Page({
       //初始化画布
       var context = wx.createCanvasContext('firstCanvas')
       context.fillRect(0, 0, myCanvasWidth, myCanvasHeight)
-      context.drawImage("../../images/icon/poster@2x.png", myCanvasWidth / 2 - (myCanvasWidth / 2), myCanvasHeight / 2 - (myCanvasHeight / 2), myCanvasWidth, myCanvasHeight)
+      context.drawImage("../../images/icon/poster1@2x.png", myCanvasWidth / 2 - (myCanvasWidth / 2), myCanvasHeight / 2 - (myCanvasHeight / 2), myCanvasWidth, myCanvasHeight)
       //下载头像变为本地地址
       wx.getImageInfo({
         src: that.data.userInfo.pic,