jufubao-base 1.0.63-beta6 → 1.0.63

package/src/components/JfbBaseVideo/XdVideo.vue

@@ -0,0 +1,212 @@
+<template>
+  <view
+    class="video-box"
+    :style="{
+      width: contentWidth + 'rpx',
+      height:contentHeight + 'rpx',
+      margin: outMargin
+    }"
+  >
+    <view
+      class="thumb"
+      :class="{noImageUrl: !imageUrl}"
+      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.noImageUrl {
+    background: rgba(0,0,0,.6);
+  }
+  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/JfbBaseWebview/JfbBaseWebviewLess.less

@@ -15,7 +15,7 @@
 .jfb-base-webview {
   border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(100, rpx);
+  min-height: unit(50, rpx);
 
   &__body{
       position: relative;

package/src/components/JfbBaseWxAuthorize/JfbBaseWxAuthorizeLess.less

@@ -15,7 +15,7 @@
 .jfb-base-wx-authorize {
   border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(100, rpx);
+  min-height: unit(50, rpx);
 
   &__body{
       position: relative;

package/src/components/JfbBaseWxAuthorizeError/JfbBaseWxAuthorizeErrorLess.less

@@ -15,7 +15,7 @@
 .jfb-base-wx-authorize-error {
   border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(100, rpx);
+  min-height: unit(50, rpx);
 
   &__body{
       position: relative;