jufubao-base 1.0.63-beta204 → 1.0.63-beta205

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "jufubao-base",
-  "version": "1.0.63-beta204",
+  "version": "1.0.63-beta205",
   "private": false,
   "description": "聚福宝业务组件基础插件包",
   "main": "index.js",

package/src/components/JfbBaseVideo/JfbBaseVideo.vue

@@ -15,41 +15,14 @@
     <!-- #endif -->
     <view class="jfb-base-video__body">
       <view class="float"></view>
-      <view
-        class="video-box"
-        :style="{
-          width: contentWidth + 'rpx',
-          height:contentHeight + 'rpx',
-          margin: outMargin
-        }"
-      >
-        <view
-          class="thumb"
-          v-if="!playStatus"
-          :style="{borderRadius: radius + 'rpx'}"
-        >
-          <image :src="imageUrl" />
-          <view @click="handlePlay()">
-            <xd-font-icon
-              :icon="iconFont"
-              size="100"
-              color="#fff"
-            ></xd-font-icon>
-
-          </view>
-        </view>
-        <view
-          class="video"
-          :style="{borderRadius: radius + 'rpx'}"
-          v-else
-        >
-          <video
-            :src="videoUrl"
-            :autoplay="autoplay === 'Y'"
-            @ended="handleEnd()"
-            @error="handleError"
-          ></video>
-        </view>
+      <view class="video" v-if="video !== null">
+        <xd-video
+          :margin="margin"
+          :poster="videoSetting"
+          :video="video"
+          :radius="radius"
+          :pack-this="$vm"
+        ></xd-video>
       </view>
     </view>
   </view>
@@ -57,19 +30,18 @@
 
 <script>
 	const color = require('color');
-  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseVideoMixin from "./JfbBaseVideoMixin";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins"
   import { getContainerPropsValue } from "@/utils/xd.base";
-  import getServiceUrl from '@/common/getServiceUrl'
+  import XdVideo from "./XdVideo.vue";
 
 
   export default {
     name: "JfbBaseVideo",
     components: {
-      XdFontIcon,
+      XdVideo
     },
     mixins: [componentsMixins,extsMixins,JfbBaseVideoMixin],
     data() {
@@ -78,19 +50,12 @@
         page_size: 1,
         options:{},
 
-        //css
-        width: 0,
-        height: 0,
-        video: {},
-        margin: {},
+        //data
+        video: null,
+        videoSetting: null,
+        margin:{},
         radius:0,
-
-        //play
-        imageUrl: '//img.jufubao.cn/vedio/700.gif',
-        videoUrl: '//img.jufubao.cn/vedio/bg.mp4',
-        playStatus: false,
-        autoplay: 'N',
-
+        $vm: {}
       }
     },
 		computed: {
@@ -129,6 +94,7 @@
       }
     },
     created() {
+      this.$vm = this;
       this.isPreview = this.$configProject.isPreview;
       this.init(this.container);
 
@@ -140,13 +106,9 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.video = getContainerPropsValue(container, 'content.video', {size:{width: 400, height: 300}, type: '1'});
+        this.videoSetting = getContainerPropsValue(container, 'content.video', {size:{width: 400, height: 300}, type: '1'});
         this.margin = getContainerPropsValue(container, 'content.margin', {top:0, bottom:0, right:0, left: 0});
         this.radius = getContainerPropsValue(container, 'content.radius', 0);
-        if(this.video.size) {
-          this.width = this.video.size.width;
-          this.height = this.video.size.height;
-				}
       },
 
       onJfbLoad(options) {
@@ -161,13 +123,11 @@
         })
           .then(res => {
             if(res && res.list &&  res.list.length > 0) {
-              let {image_url, thumb} = res.list[0];
-              if(image_url) this.videoUrl = getServiceUrl(image_url);
-              if(thumb) this.imageUrl = getServiceUrl(thumb);
+              this.video = res.list[0];
             }
           })
           .catch(error => {
-            console.error(error)
+            this.$xdLog.catch(error)
           })
       },
 
@@ -175,34 +135,6 @@
         this.onJfbLoad(this.options);
       },
 
-      handlePlay(){
-        if(this.autoplay === 'E') return;
-        this.playStatus = !this.playStatus;
-        this.autoplay = "Y";
-      },
-
-      handleEnd(){
-        setTimeout(()=>{
-          this.playStatus = !this.playStatus;
-          this.autoplay = "R";
-        }, 1000)
-      },
-
-      handleError(){
-        this.$xdConfirm({
-          title: '温馨提示',
-          content:'当前视频资源无法播放',
-          cancel: false,
-          confirmText:'我知道了',
-          zIndex:10000,
-          success:()=>{
-            this.playStatus = !this.playStatus;
-            this.autoplay = "R";
-          }
-        })
-
-      }
-
     }
   }
 
@@ -214,7 +146,6 @@
   .jfb-base-video {
     &__body{
 
-
     }
 
   }
@@ -225,38 +156,4 @@
     overflow: hidden;
   }
 
-  .video-box {
-    view.thumb {
-      height: 100%;
-      width: 100%;
-      position: relative;
-      overflow: hidden;
-
-      & > view {
-        width: 120rpx;
-        height: 120rpx;
-        position: absolute;
-        top: 50%;
-        left: 50%;
-        margin-top: -60rpx;
-        margin-left:-60rpx;
-      }
-
-      & > image {
-        height: 100%;
-        width: 100%;
-      }
-    }
-
-    view.video {
-      overflow: hidden;
-      height: 100%;
-      width: 100%;
-
-      & video {
-        height: 100%;
-        width: 100%;
-      }
-    }
-  }
 </style>

package/src/components/JfbBaseVideo/XdVideo.vue

@@ -0,0 +1,208 @@
+<template>
+  <view
+    class="video-box"
+    :style="{
+      width: contentWidth + 'rpx',
+      height:contentHeight + 'rpx',
+      margin: outMargin
+    }"
+  >
+    <view
+      class="thumb"
+      v-if="!playStatus"
+      :style="{borderRadius: radius + 'rpx'}"
+    >
+      <image :src="imageUrl" v-if="imageUrl" />
+      <view @click="handlePlay()">
+        <xd-font-icon
+          :icon="iconFont"
+          size="100"
+          color="#fff"
+        ></xd-font-icon>
+
+      </view>
+    </view>
+    <view
+      class="video"
+      :style="{borderRadius: radius + 'rpx'}"
+      v-else
+    >
+      <video
+        v-if="videoUrl"
+        :src="videoUrl"
+        :autoplay="autoplay === 'Y'"
+        @ended="handleEnd()"
+        @error="handleError"
+      ></video>
+    </view>
+  </view>
+</template>
+
+<script>
+ import getServiceUrl from '@/common/getServiceUrl'
+ import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+
+  export default {
+    name:'XdVideo',
+    components:{
+      XdFontIcon
+    },
+    props:{
+      margin:{
+        type: Object,
+        default(){
+          return {
+            top:0,
+            left:0,
+            right:0,
+            bottom:0
+          }
+        }
+      },
+      poster:{
+        type:Object,
+        required: true
+      },
+      radius:{
+        type: String|Number,
+        default: 0
+      },
+      packThis:{
+        type:Object,
+        required: true
+      },
+      video:{
+        type:Object,
+        required: true
+      },
+    },
+    data(){
+      return {
+        isPreview: false,
+
+        //css
+        width: 0,
+        height: 0,
+
+        //play
+        imageUrl: '',
+        videoUrl: '',
+        playStatus: false,
+        autoplay: 'N',
+      }
+    },
+    computed: {
+      iconFont(){
+        if(this.autoplay === 'N') return 'iconplayright'
+        if(this.autoplay === 'E') return 'iconshibai';
+        if(this.autoplay === 'R') return 'iconplayreplay';
+      },
+      contentWidth(){
+        let border = 0;
+        if(this.isPreview) border = 2;
+        return 750 - (this.margin.left + this.margin.right + border);
+      },
+      contentHeight(){
+        let border = 0;
+        if(this.isPreview) border = 2;
+        let winWidth = 750 - ((this.margin.left||0) + (this.margin.right||0) + border);
+        return winWidth * this.height/this.width;
+      },
+
+      outMargin(){
+        let margin = `${this.margin.top !== null ? this.margin.top : 0}rpx`;
+        margin = `${margin} ${this.margin.right !== null ? this.margin.right : 0}rpx`;
+        margin = `${margin} ${this.margin.bottom !== null ? this.margin.bottom :0}rpx`;
+        margin = `${margin} ${this.margin.left !== null ? this.margin.left : 0}rpx`;
+        return margin;
+      }
+    },
+    watch:{
+      poster(){
+        this.init();
+      }
+    },
+    created() {
+      this.isPreview = this.$configProject.isPreview;
+      this.init();
+    },
+    methods:{
+      init(){
+        if(this.poster.size) {
+          this.width = Number(this.poster.size.width);
+          this.height = Number(this.poster.size.height);
+        }
+
+        let {image_url, thumb} = this.video;
+        if(image_url) this.videoUrl = getServiceUrl(image_url);
+        if(thumb) this.imageUrl = getServiceUrl(thumb);
+      },
+      handlePlay(){
+        if(this.autoplay === 'E') return;
+        this.playStatus = !this.playStatus;
+        this.autoplay = "Y";
+      },
+
+      handleEnd(){
+        setTimeout(()=>{
+          this.playStatus = !this.playStatus;
+          this.autoplay = "R";
+        }, 1000)
+      },
+
+      handleError(){
+        this.$xdConfirm({
+          title: '温馨提示',
+          content:'当前视频资源无法播放',
+          cancel: false,
+          confirmText:'我知道了',
+          zIndex:10000,
+          success:()=>{
+            this.playStatus = !this.playStatus;
+            this.autoplay = "R";
+          }
+        })
+
+      }
+    }
+  }
+</script>
+
+
+
+<style scoped lang="less">
+.video-box {
+  view.thumb {
+    height: 100%;
+    width: 100%;
+    position: relative;
+    overflow: hidden;
+
+    & > view {
+      width: 120rpx;
+      height: 120rpx;
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      margin-top: -60rpx;
+      margin-left:-60rpx;
+    }
+
+    & > image {
+      height: 100%;
+      width: 100%;
+    }
+  }
+
+  view.video {
+    overflow: hidden;
+    height: 100%;
+    width: 100%;
+
+    & video {
+      height: 100%;
+      width: 100%;
+    }
+  }
+}
+</style>