jufubao-base 1.0.310 → 1.0.311-beta101

package/src/components/JfbBaseVideo/JfbBaseVideo.vue

@@ -18,19 +18,12 @@
       <view
         v-if="isShow"
         class="x-video"
-        :style="{
-          backgroundColor:bgColor,
-          margin:outMargin,
-          borderRadius:radius + 'rpx',
-          padding:outPadding,
-          width: contentWidth + 'rpx',
-          height:contentHeight + 'rpx'
-        }"
+        :style="[boxStyleComp]"
       >
         <xd-video
-          v-if="video !== null && video !== ''"
+          v-if="!['',null].includes(video)"
           :key="videoKey"
-          :poster="videoSetting"
+          :poster="videoConf"
           :video="video"
         ></xd-video>
         <view class="not-video" v-if="isPreview && video === ''">
@@ -47,7 +40,7 @@
   import JfbBaseVideoMixin from "./JfbBaseVideoMixin";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins"
-  import { getContainerPropsValue } from "@/utils/xd.base";
+  import {gCPVal } from "@/utils/xd.base";
   import XdVideo from "./XdVideo.vue";
 
 
@@ -59,60 +52,46 @@
     mixins: [componentsMixins,extsMixins,JfbBaseVideoMixin],
     data() {
       return {
+        closeMask: true,
         isPreview: false,
         page_size: 1,
-        options:{},
 
-        //data
-        video: null,
-        videoSetting: null,
+        //视频配置
+        video: null, //视频内容
+        videoKey : Date.now(),
+        videoConf: null, //视频配置
+
+        //样式
         margin:{},
         padding:{},
-        height:0,
-        width:750,
-        bgColor:'',
+        height:388,
+        width:690,
+        bgColor:'rgba(0,0,0,0)',
         radius:0,
-        videoKey : Date.now(),
       }
     },
 		computed: {
+      boxStyleComp(){
+        return {
+          backgroundColor: this.bgColor,
+          borderRadius: this.radius + 'rpx',
+          margin: this.getMarginAndPadding(this.margin, 0),
+          padding: this.getMarginAndPadding(this.padding, 0),
+          width: this.contentWidth + 'rpx',
+          height: this.contentHeight + 'rpx'
+        }
+      },
       isShow(){
         if(this.isPreview) return true;
         else return this.video
       },
-      iconFont(){
-        if(this.autoplay === 'N') return 'iconplayright'
-        if(this.autoplay === 'E') return 'iconshibai';
-        if(this.autoplay === 'R') return 'iconplayreplay';
-      },
       contentWidth(){
-        let margin = Number(this.checkValue(this.margin.left, 0)) + Number(this.checkValue(this.margin.right, 0));
-        let padding = Number(this.checkValue(this.padding.left, 0)) + Number(this.checkValue(this.padding.right, 0));
-        let border = 0;
-        //if(this.isPreview) border = 2;
-        return this.width - (padding + margin + border);
+        let marginRL = this.getPMValue(this.margin,'RL',0);
+        let paddingRL = this.getPMValue(this.padding,'RL',0);
+        return 750 - (marginRL + paddingRL)
       },
       contentHeight(){
-        let margin = Number(this.checkValue(this.margin.left, 0)) + Number(this.checkValue(this.margin.right, 0));
-        let padding = Number(this.checkValue(this.padding.left, 0)) + Number(this.checkValue(this.padding.right, 0));
-        let border = 0;
-        //if(this.isPreview) border = 2;
-        let winWidth = this.width - (padding + margin + border);
-        return winWidth * this.height/this.width;
-      },
-      outMargin(){
-        let str = `${this.checkValue(this.margin.top, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.right, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.bottom, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.margin.left, 0)}rpx`;
-        return str
-      },
-      outPadding(){
-        let str = `${this.checkValue(this.padding.top, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.padding.right, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.padding.bottom, 0)}rpx`;
-        str = `${str} ${this.checkValue(this.padding.left, 0)}rpx`;
-        return str
+        return (this.height*this.contentWidth)/this.width;
       },
       getVideoSrc(){
         let width = Math.floor(this.contentWidth * this.$rpxNum);
@@ -125,7 +104,7 @@
         if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
         if (this.$configProject['isPreview']) {
           this.init(value);
-          this.onJfbLoad(this.options)
+          this.onJfbLoad()
         }
       }
     },
@@ -140,19 +119,14 @@
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.videoSetting = getContainerPropsValue(container, 'content.video', {size:{width: 400, height: 300}, type: '1'});
-        if(this.videoSetting && this.videoSetting.size && this.videoSetting.size.height) {
-          this.height = Number(this.videoSetting.size.height) || 563;
-          this.width = 750;
-        }
-        this.margin = getContainerPropsValue(container, 'content.margin', {});
-        this.padding = getContainerPropsValue(container, 'content.padding', {});
-        this.radius = getContainerPropsValue(container, 'content.radius', 0);
-        this.bgColor = getContainerPropsValue(container, 'content.bgColor', 'rgba(0,0,0,0)');
+        this.videoConf = gCPVal(container, 'video', { size: {width:690, height: 388}, type: '1'});
+        this.radius = gCPVal(container, 'radius', [this.gStyleValue.radius,0],{sKey: 'radiusStatus', fields: ['radius']})||0;
+        this.bgColor = gCPVal(container, 'bgColor', '#fff',{sKey: 'bgColorStatus', fields: ['bgColor']});
+        this.margin = gCPVal(container, 'margin', [0],{sKey: 'marginStatus', fields: ['margin'], isPMR: true});
+        this.padding = gCPVal(container, 'padding', [0],{sKey: 'paddingStatus', fields: ['padding'], isPMR: true});
       },
 
-      onJfbLoad(options) {
-        this.options = options;
+      onJfbLoad() {
         jfbRootExec('getListVideoContent', {
           vm: this,
           data: {
@@ -174,7 +148,7 @@
       },
 
       onJfbUpdate() {
-        this.onJfbLoad(this.options);
+        this.onJfbLoad();
       },
 
     }

package/src/components/JfbBaseVideo/cusAttr/content.js

@@ -0,0 +1,236 @@
+'use strict';
+import {
+  dataVal ,
+  statusShow,
+  statusDataVal,
+  customVal,
+  cusDisabled ,
+  getCustomAttr,
+  isArray,
+  isObject
+} from "@/utils/AttrTools";
+
+export default (data, gValue,gColor,oldData)=>{
+  let video = { size: {width:690, height: 388}, type:'1', position: {}};
+  return[
+    {
+      ele: 'title',
+      label: '基础',
+      size: 'small',
+      groupKey:'content',
+    },
+    {
+      label: '组件样式',
+      ele: 'xd-site-poster',
+      valueKey: 'video',
+      groupKey:'content',
+      className: 'input100',
+      value: video,
+      labelInline:true,
+      setting: {
+        count: 1,
+        scene: {label: '视频', value: 'video'},
+        sizeDisabled: {
+          wDisabled:true,
+          hDisabled: false,
+        },
+        isNew: 'video',
+      },
+      handleCustom({action, data}) {
+        //设置场景参数
+        if(data) {
+          data.params = Object.assign({}, {scene: 'video'}, data.params || {})
+        }
+
+        //获取显示内容
+        if (action === 'screenList') {
+          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'editx_base_ad_split_screen'})
+            .then(res => {
+              data.cb(res['list'])
+            })
+            .catch(error => {
+              console.error(error);
+            });
+          return
+        }
+
+        //获取返回参数(广告位高度必选项)
+        if (action === 'getPosterInfo') {
+          XdBus.getParentApi('cmsGetPublishEditxContent')(data.params)
+            .then(res => {
+              data.cb({list: res.list, selectId: res.selected})
+            })
+            .catch(error => {
+              console.error(error);
+            });
+          return
+        }
+
+        //使用内容分类
+        if (action === 'cmsPublishEditxContent') {
+          XdBus.getParentApi('cmsPublishEditxContent')(data.params)
+            .then(res => {
+              data.cb(res)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+          return
+        }
+
+        let loading = XdBus.getParentApi('loading')({});
+        //位置列表
+        if (action === 'getListPostion') {
+          XdBus.getParentApi('getListPosterPosition')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(res)
+            })
+            .catch(error => {
+              loading.close();
+              console.error(error);
+            });
+        }
+
+        //位置创建
+        if (action === 'addPostion') {
+          XdBus.getParentApi('addPosterPosition')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(true)
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+              data.cb(false)
+            });
+        }
+
+        //位置编辑
+        if (action === 'editPostion') {
+          XdBus.getParentApi('updatePosterPosition')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(true)
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+              data.cb(false)
+            });
+        }
+
+        //位置删除
+        if (action === 'deleltePostion') {
+          XdBus.getParentApi('deletePosterPosition')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(true)
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+              data.cb(false)
+            });
+        }
+
+        //获取广告位内容列表
+        if (action === 'getListContent') {
+          XdBus.getParentApi('getListPosterContent')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(res)
+            })
+            .catch(error => {
+              loading.close();
+              console.error(error);
+            });
+        }
+
+        //广告内容创建
+        if (action === 'addContent') {
+          XdBus.getParentApi('addPosterContent')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(true)
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+              data.cb(false)
+            });
+        }
+
+        //广告内容编辑
+        if (action === 'editContent') {
+          XdBus.getParentApi('updatePosterContent')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(true)
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+              data.cb(false)
+            });
+        }
+
+        //广告内容删除
+        if (action === 'deleteContent') {
+          XdBus.getParentApi('deletePosterContent')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(true)
+            })
+            .catch(error => {
+              console.error(error);
+              loading.close();
+              data.cb(false)
+            });
+        }
+
+        //获取广告内容跳转地址类型
+        if (action === 'jumpPosterContentType') {
+          XdBus.getParentApi('getOptionsSettingList')({setting_id: "cms_setting"})
+            .then(res => {
+              loading.close();
+              data.cb(res['redirect_type'])
+            })
+            .catch(error => {
+              loading.close();
+              console.error(error);
+            });
+        }
+
+        //发布
+        if (action === 'publish') {
+          console.log('publish', data.params)
+          XdBus.getParentApi('cmsPublishContent')(data.params)
+            .then(res => {
+              loading.close();
+              data.cb(res)
+            })
+            .catch(error => {
+              loading.close();
+              console.error(error);
+            });
+        }
+
+        //获取站内页面地址
+        if (action === 'router') {
+          loading.close()
+          return XdBus.getParentApi('getPagesTree');
+
+        }
+
+        //通知页面进行刷新
+        if(action === 'update') {
+          XdBus.getParentApi('getXdBusUpdateView')('onUpdateView', {});
+          loading.close()
+        }
+      },
+      notice:`建议尺寸：${video.size.width}*${video.size.height}`,
+      inline: false,
+    },
+  ]
+}

package/src/components/JfbBaseVideo/cusAttr/image.js

@@ -0,0 +1,213 @@
+'use strict';
+import {
+  dataVal,
+  statusShow,
+  getPMarginRLTB,
+  getAttrData,
+  getBorOrShaHeight,
+  cRaBorShadow
+} from "@/utils/AttrTools";
+
+
+export default (data, gValue, gColor, oldData ,isBody=false)=> {
+  let listLayout = 'slide';
+  if(data['listLayout'] !== undefined)  listLayout = data['listLayout'];
+
+  let listRow = 1;
+  let enterMode = 'round';
+  let carouselHeight = 0; //滚动高度
+  if(listLayout === 'carousel') {
+    listRow = 2;
+    if(data['listRow'] !== undefined)  listRow = data['listRow'];
+    if(data['enterMode'] !== undefined)  enterMode = data['enterMode'];
+    if(enterMode === 'normal') carouselHeight = 10;
+    else carouselHeight = 46;
+
+  }
+
+  //品牌内容显示
+  let itemHeight = 0, bodyHeight = 0, bodyWidth = 0, tabHeight = 56;
+
+
+  //滑动效果
+  if(listLayout === 'slide') {
+    let text = 36;
+    let image = 120;
+   itemHeight = text + image + getAttrData(data,'imageText', [16,44],{
+      sKey: 'imageTextStatus',
+      fields:['imageText'],
+      isData: true,
+      gValue
+    });
+  }
+
+  //轮廓外边距
+  let defMargin = {top:0,left:16,right:16, bottom:16},oldDefMargin = {top:0,left:0,right:0, bottom:20};
+  let bodyMargin = getAttrData(data,'margin', [defMargin,oldDefMargin],{
+    sKey: 'marginStatus',
+    fields:['margin'],
+    isPM:true,
+    isData: true,
+    gValue
+  });
+  bodyWidth = 750 - getPMarginRLTB(bodyMargin,'RL', 0);
+
+
+  //轮廓内填充
+  let defBgImagePadding = 0, oldDefBgImagePadding = 32;
+  if(listLayout === 'carousel') {
+    defBgImagePadding = 0;
+    oldDefBgImagePadding = 0;
+  }
+  let bodyPadding = getAttrData(data,'bgImagePadding', [defBgImagePadding,oldDefBgImagePadding],{
+    sKey: 'bgImagePaddingStatus',
+    fields:['bgImagePadding'],
+    isPM:true,
+    isData: true,
+    gValue
+  });
+  let bodyPaddingTB = getPMarginRLTB(bodyPadding,'TB', 0);
+  if(isBody === false) bodyWidth = bodyWidth - getPMarginRLTB(bodyPadding,'RL', 0);
+
+  //内容区域投影
+  let itemShadow = cRaBorShadow( data, 'itemShadow', {dValue:'N', old:['is_shadow','is_shadow_w','is_shadow_bg']},gValue);
+  let itemShadowWidth = getBorOrShaHeight(itemShadow,{width:0, type:'N'});
+
+  //内容区域边距
+  let defItemPadding = {top:16,left:16,right:0, bottom:16}, oldDefItemPadding = {top:32,left:0,right:0, bottom:0};
+  if(listLayout === 'carousel') {
+    defItemPadding = 16;
+    oldDefItemPadding = 20;
+  }
+  let itemPadding = getAttrData(data,'itemPadding', [defItemPadding,oldDefItemPadding],{
+    sKey: 'itemPaddingStatus',
+    fields:['itemPadding'],
+    isPM:true,
+    isData: true,
+    gValue
+  });
+  itemPadding.top = Math.max(itemPadding.top,itemShadowWidth);
+  itemPadding.bottom = Math.max(itemPadding.bottom,itemShadowWidth);
+  itemPadding.left = Math.max(itemPadding.left,itemShadowWidth);
+  itemPadding.right = Math.max(itemPadding.right,itemShadowWidth);
+  let itemPaddingTB = getPMarginRLTB(itemPadding,'TB', 0);
+
+  //品牌填充
+  let defContPadding = 16,defOldContPadding = {top:32, left:32, right:32, bottom:16};
+  if(listLayout === 'carousel') {
+    defContPadding = 0;
+    defOldContPadding = 0;
+  }
+  let contPadding = getAttrData(data,'contPadding', [defContPadding,defOldContPadding],{
+    sKey: 'contPaddingStatus',
+    fields:['contPadding'],
+    isPM:true,
+    isData: true,
+    gValue
+  });
+  if(listLayout === 'carousel') contPadding = {top:0, bottom:0, left: 0, right:0}
+  let contPaddingTB = getPMarginRLTB(contPadding,'TB', 0);
+
+
+  //品牌边框
+  let tabBorder = cRaBorShadow( data, 'tabBorder', {dValue:'N'},gValue);
+  let tabBorderWidth = getBorOrShaHeight(tabBorder,{width:0, type:'N'}) * 2;
+
+  //标题边距
+  let tabPadding = getAttrData(data,'tabPadding', [24,{top:0, left:0, right:0, bottom:0}],{
+    sKey: 'tabPaddingStatus',
+    fields:['tabPadding'],
+    isPM:true,
+    isData: true,
+    gValue
+  });
+  let tabPaddingTB = getPMarginRLTB(tabPadding,'TB', 0);
+
+  //标题描边
+  let itemBorder = cRaBorShadow( data, 'itemBorder', {dValue:'D'},gValue);
+  let itemBorderWidth = getBorOrShaHeight(itemBorder,{width:2, type:'Y'}) * 2;
+
+  //间距设置
+  let spacing = listLayout === 'slide'?16:24;
+  let itemSpacing = getAttrData(data,'padding', [spacing,32],{
+    sKey: 'paddingStatus',
+    fields:['itemSpacing'],
+    isData: true,
+    gValue
+  });
+  let rowSpacing = getAttrData(data,'rowSpacing', [spacing,10],{
+    sKey: 'paddingStatus',
+    fields:['rowSpacing'],
+    isData: true,
+    gValue
+  });
+
+
+  //轮播图
+  if(listLayout === 'carousel'){
+    const cell = 5;
+    const textHeight = 40; //品牌标题高度
+    const bodyPaddingRL = getPMarginRLTB(bodyPadding,'RL', 0);
+    const bodyMarginRL = getPMarginRLTB(bodyMargin,'RL', 0);
+    const itemPaddingRL = getPMarginRLTB(itemPadding,'RL', 0);
+    const cellWidth = itemSpacing * (cell - 1);
+    const rowWidth = rowSpacing * (listRow - 1);
+    let itemWidth = 750 - bodyPaddingRL - bodyMarginRL - itemPaddingRL - cellWidth - itemBorderWidth * (cell - 1);
+    itemWidth = itemWidth/5;
+    const textMarginTop = 8;//标题间距
+    itemHeight = (itemWidth + textHeight + textMarginTop) * listRow + rowWidth;
+  }
+
+  //内容区域高度
+  let contentHeight = carouselHeight + itemHeight + itemPaddingTB + contPaddingTB + itemBorderWidth * listRow;
+  //标题区域高度
+  let titleHeight = tabHeight + tabPaddingTB + tabBorderWidth + bodyPaddingTB;
+
+  if(isBody) bodyHeight = contentHeight + titleHeight;
+  else bodyHeight = contentHeight;
+
+  bodyHeight = Math.floor(bodyHeight);
+  bodyWidth = Math.floor(bodyWidth);
+
+  return [
+    isBody === true && {
+      label: '背景图',
+      ele: 'xd-upload',
+      valueKey: 'bgImage',
+      defaultValue: dataVal({data, key:'bgImage', dValue: {}, gValue}),
+      value: dataVal({data, key:'bgImage', dValue:{}, gValue}),
+      hidden: !statusShow({data, key: 'outBgColorStatus', fields:['outBgColor','bgImage'], gValue}),
+      labelInline:true,
+      slot: true,
+      tipsformet: `上传文件格式：@imageType@，不超过@size@MB.，建议尺寸为:<span style="color:red">${bodyWidth}*${bodyHeight}</span>像素。`,
+      type: ['jpg', 'png', 'jpeg'],
+      styleType: 'one',
+      uploadType: 'aliyun',
+      size: 2,
+      action: 'aliyun',
+      oneWidth: 275,
+      oneHeight: 275 * (bodyHeight)/ bodyWidth,
+      groupKey: 'style'
+    },
+    isBody === false && {
+      label: '背景图',
+      ele: 'xd-upload',
+      valueKey: 'contBgImage',
+      defaultValue: dataVal({data, key:'contBgImage', dValue: {}, gValue}),
+      value: dataVal({data, key:'contBgImage', dValue:{}, gValue}),
+      hidden: !statusShow({data, key: 'contBgColorStatus', fields:['contBgColor','contBgImage'], gValue}),
+      labelInline:true,
+      slot: true,
+      tipsformet: `上传文件格式：@imageType@，不超过@size@MB.，建议尺寸为:<span style="color:red">${bodyWidth}*${bodyHeight}</span>像素。`,
+      type: ['jpg', 'png', 'jpeg'],
+      styleType: 'one',
+      uploadType: 'aliyun',
+      size: 2,
+      action: 'aliyun',
+      oneWidth: 275,
+      oneHeight: 275 * (bodyHeight)/ bodyWidth,
+      groupKey: 'style'
+    }
+  ].filter(i=>i);
+}
+