jufubao-base 1.0.63-beta5 → 1.0.63

package/src/components/JfbBaseVideo/JfbBaseVideo.vue

@@ -0,0 +1,159 @@
+<template>
+  <view
+    class="jfb-base-video"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-video__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <view class="jfb-base-video__edit-icon" @click="delEdit">删除</view>
+    </view>
+    <!-- #endif -->
+    <view class="jfb-base-video__body">
+      <view class="float"></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>
+</template>
+
+<script>
+	const color = require('color');
+  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 XdVideo from "./XdVideo.vue";
+
+
+  export default {
+    name: "JfbBaseVideo",
+    components: {
+      XdVideo
+    },
+    mixins: [componentsMixins,extsMixins,JfbBaseVideoMixin],
+    data() {
+      return {
+        selfMask: true,
+        page_size: 1,
+        options:{},
+
+        //data
+        video: null,
+        videoSetting: null,
+        margin:{},
+        radius:0,
+        $vm: {}
+      }
+    },
+		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: {
+      container(value) {
+        this.init(value);
+        if(this.timer) clearTimeout(this.timer);
+        this.timer = setTimeout(()=>{
+          if (this.$configProject['isPreview']) this.onJfbLoad(this.options)
+				}, 400)
+      }
+    },
+    created() {
+      this.$vm = this;
+      this.isPreview = this.$configProject.isPreview;
+      this.init(this.container);
+
+    },
+    methods: {
+
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        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);
+      },
+
+      onJfbLoad(options) {
+        this.options = options;
+        jfbRootExec('getListVideoContent', {
+          vm: this,
+          data: {
+            page_id: this.pageAttr['page_id'], //页面ID
+            container_id: this.containerId, //组件ID
+            page_size: this.page_size //可以不传
+          },
+        })
+          .then(res => {
+            if(res && res.list &&  res.list.length > 0) {
+              this.video = res.list[0];
+            }
+          })
+          .catch(error => {
+            this.$xdLog.catch(error)
+          })
+      },
+
+      onJfbUpdate() {
+        this.onJfbLoad(this.options);
+      },
+
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBaseVideoLess.less";
+
+  .jfb-base-video {
+    &__body{
+
+    }
+
+  }
+
+  .float {
+    height: 1px;
+    width: 100%;
+    overflow: hidden;
+  }
+
+</style>

package/src/components/JfbBaseVideo/JfbBaseVideoLess.less

@@ -0,0 +1,80 @@
+/**
+* @desc 获取绝对路径完整地址
+* @param @path
+**/
+//例如：https://image.jufubao.cn/20220501010108/image/bg/default_gonghui_bg.png
+@basePath: 'business/';
+@doMain: '//sandbox-img.jufubao.cn/';
+
+.getBusinessImageUrl(@path, @size: 'size8') {
+  @url: "@{doMain}@{basePath}@{path}?x-oss-process=style/@{size}";
+  background-image: url(@url);
+}
+
+//start
+.jfb-base-video {
+  border: 1px dashed rgba(0, 0, 0, 0);
+  box-sizing: border-box;
+  min-height: unit(50, rpx);
+
+  &__body{
+      position: relative;
+      overflow: hidden;
+      z-index: 2
+  }
+
+  &.editx {
+    position: relative;
+    border: 1px dashed blue;
+    box-sizing: border-box;
+    z-index: 3
+
+  }
+
+  &:hover {
+    border: 1px dashed blue;
+  }
+
+  &.noBorder {
+    border-color: rgba(0,0,0,0);
+    border-width: 0;
+  }
+
+
+  &__edit {
+    cursor: pointer;
+    position: absolute;
+    right: unit(0, rpx);
+    top: unit(-52, rpx);
+    height: unit(50, rpx);
+    line-height: unit(50, rpx);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    background: rgba(0, 0, 0, .6);
+    border-radius: unit(10, rpx);
+    box-shadow: 0 0 10px rbga(0, 0, 0, 0.3);
+    color: #fff;
+    font-size: unit(22, rpx);
+
+    &-icon{
+      padding: 0 unit(20, rpx);
+    }
+
+    &.editx {
+      box-sizing: border-box;
+
+    }
+  }
+}
+//end
+
+
+/**notPreview**/
+.jfb-base-video {
+  &:before {
+    content: " ";
+    display: table;
+  }
+}
+/**endNotPreview**/

package/src/components/JfbBaseVideo/JfbBaseVideoMixin.js

@@ -0,0 +1,30 @@
+'use strict';
+
+
+//@AttrImport
+import Attr from "./Attr";
+//@EndAttrImport
+
+
+export default {
+  data() {
+    return {
+      //#ifdef H5
+      
+      //@AttrData
+      Attr:{}, //对外开发编辑属性
+      //@EndAttrData
+      
+      // #endif
+      cssRoot: 'jfb-base-video'
+    }
+  },
+  created() {
+    
+    //@AttrDataCreated
+    this.Attr = this.$xdUniHelper.customClone(Attr);
+    //@EndAttrDataCreated
+    
+
+  },
+}

package/src/components/JfbBaseVideo/Mock.js

@@ -0,0 +1,3 @@
+'use strict';
+
+module.exports = {}

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;