视频组件

src/main.js

@@ -43,6 +43,8 @@ mpApp.webviewCallBack = function () { }
 mpApp.shareInit = function () {};
 mpApp.themeColorCallBack = function () {};
 
+// 全局数据
+mpApp.processEnv = process.env;
 console.log('3555555', wx)
 // 全局跳转 data为link对象
 mpApp.$themeToLink = $themeToLink

src/pages/home/index.vue

@@ -42,9 +42,6 @@
           <div v-if="item.componentCode == 'img-text' && item.componentInfo.visible == 1">
             <img-text :datas="item"></img-text>
           </div>
-          <div v-if="item.componentCode == 'video-player' && item.componentInfo.visible == 1">
-            <videoPlayer :datas="item"></videoPlayer>
-          </div>
           <div v-if="item.componentCode == 'goods-search' && item.componentInfo.visible == 1">
             <goods-search :datas="item"></goods-search>
           </div>
@@ -63,6 +60,9 @@
           <div v-if="item.componentCode == 'speedy-nav'">
             <speedy-nav :datas="item"></speedy-nav>
           </div>
+          <div v-if="item.componentCode == 'video-player'">
+            <video-player :datas="item" :indexs="index"></video-player>
+          </div>
         </div>
 
       <bottomCont></bottomCont>
@@ -94,7 +94,6 @@ import partition from '@/components/basicTool/partition/index.vue'
 import shopPopup from '@/components/basicTool/shop-popup/index.vue'
 import text from '@/components/content/text'
 import imgText from '@/components/content/imgText'
-import videoPlayer from '@/components/content/videoPlayer'
 import coupon from '@/components/activity/coupon'
 import integralTurntable from '@/components/activity/integralTurntable'
 import { setTabBarActive, checkTabbarPage,themeColor } from "../../utils/mayi.js";
@@ -120,7 +119,6 @@ export default {
     ThemeDataPlant,
     'text-text':text,
     'img-text':imgText,
-    videoPlayer,
     coupon,
     integralTurntable
   },

src/pages/home/main.json

@@ -12,7 +12,8 @@
     "notice":"/static/nativeComponents/Notice/index",
     "pop-up":"/static/nativeComponents/PopUp/index",
     "share-popup":"/static/nativeComponents/SharePopup/index",
-    "speedy-nav":"/static/nativeComponents/SpeedyNav/index"
+    "speedy-nav":"/static/nativeComponents/SpeedyNav/index",
+    "video-player":"/static/nativeComponents/VideoPlayer/index"
   },
   "enablePullDownRefresh":true
 }
\ No newline at end of file

static/nativeComponents/GoodsList/index.js

@@ -346,9 +346,9 @@ const componentOptions = {
       let linkVal = "";
       if (goodsType != 1) {
         if (style == "list") {
-          linkVal = `/goods/commodityMenu?categoryName=${categoryName}&categoryId=${categoryId}`;
+          linkVal = `/goodsSearch/goodsSearch?categoryName=${categoryName}&categoryId=${categoryId}`;
         } else {
-          linkVal = `/goods/commodityMenu`;
+          linkVal = `/goodsSearch/goodsSearch`;
         }
       } else {
         linkVal = `/pointShop/productList?categoryName=${categoryName}&categoryId=${categoryId}`;

static/nativeComponents/SharePopup/index.js

 const app = getApp();
-const { $themeToLink } = app;
+const { $themeToLink, processEnv, globalData } = app;
 const componentOptions = {
   // 组件选项
   options: {
@@ -85,7 +85,13 @@ const componentOptions = {
       });
     },
     toPosters() {
-      let linkVal = `/goods/posters`;
+      let userInfo = wx.getStorageSync("userInfo") ? JSON.parse(wx.getStorageSync("userInfo")):'';
+      let queryHref = `${processEnv.BASE_URL}?mixid=${globalData.shopInfo.shopCode}`;
+      let linkVal = `/goods/posters?type=index&href=${queryHref}`;
+      if (userInfo) {
+        linkVal += `&nickname=${userInfo.nickName}`;
+      }
+      console.log(linkVal, "------------------linkVal");
       $themeToLink({ type: 1, link: linkVal });
     },
   },

static/nativeComponents/VideoPlayer/index.js

+const componentOptions = {
+  // 组件选项
+  options: {
+    multipleSlots: true
+  },
+  behaviors: [],
+  properties: {
+    datas: {
+      type: Object
+    },
+    indexs: {
+      type:Number
+    }
+  },
+  // 组件数据
+  data: {
+    isPageHidden: false, // 页面是否处于隐藏状态
+    isPlay: false,
+    videoContext:"",
+  },
+  // 数据监听器
+  observers: {},
+  // 组件方法
+  methods: {
+    init() {},
+    playVideo() {
+      // 视频播放
+      if (this.data.datas.componentData['nativeControl']) {
+        return
+      }
+      let { isPlay } = this.data;
+      if (isPlay) {
+        console.log("暂停")
+        this.videoContext.pause();
+      } else {
+        console.log("播放")
+        this.videoContext.play();
+      }
+      isPlay = !isPlay;
+      this.setData({ isPlay });
+    }
+  },
+  // 组件生命周期
+  lifetimes: {
+    created() {},
+    attached() {
+      this.init();
+    },
+    ready() {
+      this.videoContext = wx.createVideoContext(`videoId${this.data.indexs}`,this);
+    },
+    moved() {},
+    detached() {}
+  },
+  definitionFilter() {},
+  // 页面生命周期
+  pageLifetimes: {
+    // 页面被展示
+    show() {
+      const { isPageHidden } = this.data;
+
+      // show事件发生前，页面不是处于隐藏状态时
+      if (!isPageHidden) {
+        return;
+      }
+
+      // 重新执行定时器等操作
+    },
+    // 页面被隐藏
+    hide() {
+      this.setData({
+        isPageHidden: true
+      });
+
+      // 清除定时器等操作
+    },
+    // 页面尺寸变化时
+    resize() {}
+  }
+};
+
+Component(componentOptions);

static/nativeComponents/VideoPlayer/index.json

+{
+  "component": true,
+  "usingComponents": {}
+}

static/nativeComponents/VideoPlayer/index.wxml

+<view class="VideoPlayer">
+	<view class="title" wx:if="{{datas.componentData['title']}}">
+		<text>{{datas.componentData['title']}}</text>
+	</view>
+	<view class="main">
+		<view class="isVideo" wx:if="{{datas.componentData['type']<3}}">
+			<video
+			 bindtap="playVideo"
+			 id="videoId{{indexs}}"
+			 src="{{datas.componentData['videoUrl']}}"
+			 show-center-play-btn="{{datas.componentData['nativeControl']}}"
+			 type="video/mp4"
+			 controls="{{datas.componentData['nativeControl']}}"
+			 loop="{{datas.componentData['loopPlay']}}"
+			 poster="{{datas.componentData['poster']}}"
+			/>
+			<view
+			 class="playerBtn"
+			 bindtap="playVideo"
+			 wx:if="{{!isPlay&&!datas.componentData['nativeControl']}}"
+			>
+				<image src="http://mayi-newshop.oss-cn-shanghai.aliyuncs.com/public/png/06420e41-cd0b-4913-a1ef-9056ceebcc95.png" />
+			</view>
+		</view>
+		<!-- 代码片段展示 -->
+		<!-- <view class="isCodeSnippets">
+
+    </view> -->
+	</view>
+
+</view>
+

static/nativeComponents/VideoPlayer/index.wxss

+.VideoPlayer {
+}
+.title {
+  font-size: 36rpx;
+  padding: 20rpx 40rpx;
+  color: #333;
+  font-weight: bold;
+}
+.main{
+  width: 100%;
+}
+.main .isVideo{
+  width: 100%;
+  position: relative;
+}
+.main .isVideo video{
+  width: 100%;
+}
+.main .isVideo .playerBtn{
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  width: 120rpx;
+  height: 120rpx;
+  margin-top: -60rpx;
+  margin-left: -60rpx;
+  border-radius: 50%;
+  -webkit-border-radius: 50%;
+  -moz-border-radius: 50%;
+  -ms-border-radius: 50%;
+  -o-border-radius: 50%;
+  overflow: hidden;
+}
+.main .isVideo .playerBtn image{
+  width: 100%;
+  height: 100%;
+}
+