jufubao-base 1.0.212-beta101 → 1.0.212

package/src/components/JfbBasePosterType/JfbBasePosterType.vue

@@ -15,12 +15,16 @@
     <!-- #endif -->
     <view class="jfb-base-poster-type__body" v-if="noData">
       <view class="x-line"></view>
-      <view class="jfb-base-poster-cont" :style="[bodyStyleComp]">
-        <four-screen
-          style="width: 100%;"
-          :config="getConfig"
-          :content="info"
-        ></four-screen>
+      <view
+        class="jfb-base-poster-cont"
+        :style="{
+          margin: margin,
+          padding:contentPaddingOut,
+          backgroundColor: bgColor,
+          borderRadius: bgRadius + 'rpx'
+        }"
+      >
+        <four-screen style="width: 100%;" :config="getConfig" :content="info"></four-screen>
       </view>
 
     </view>
@@ -52,13 +56,7 @@
     mixins: [componentsMixins,extsMixins,JfbBasePosterTypeMixin],
     data() {
       return {
-        //closeMask: true,
         params: {},
-        noData:false,
-        timer: null,
-        info: [],
-        isPreview: false,
-
 				//Swiper 配置
         posterPosition: null,
         current: 0,
@@ -66,134 +64,76 @@
 				isCarousel: true, //是否轮播图
         carouselTime: 5,//轮播图轮播周期
 				useNumber: null, //广告使用张数
-        mode:'round',//索引样式
-        row: 1, //行
-        column: 4, //列
-        columnSpacing:0,
-
-        //icon样式设置
-        contShadow:{},
+				padding: 0, //广告内容之间间距
+        jdRows: 1, //行
+        cells: 4, //列
+        shadow: false, //是否设置阴影
+        shadowColor:'rgba(0,0,0,.3)',
         radius: '20', //10/20/40 ， 小/中/大
-        iconMargin:20,
-        titleStyle:{},
+				timer: null,
+				info: [],
+        mS: {},
+        iconPadding:{},
+        contentPadding:{},
+				isPreview: false,
+				noData:false,
 
 				//颜色设置
-        margin: {},
-        contentPadding:{},
+        textColor: '#333',
         bgColor:'rgba(0,0,0,0)',
         bgRadius: 0,
       }
     },
 		computed: {
-      dotStyleData(){
-        return this.dotStyleDataConf[this.mode];
-      },
-      dotStyleDataConf(){
-        let alpha = 0.6;
-        let selectedColor = `rgba(${color(this.mainColor).alpha(alpha).array().join(',')})`;
-        let textColor = `rgba(${color(this.mainColor).alpha(0.2).array().join(',')})`;
-        return {
-          dot: {
-            backgroundColor: 'rgba(166,166,166,.5)',
-            border: '0px rgba(166,166,166,.5) solid',
-            color: '#fff',
-            selectedBackgroundColor: selectedColor,
-            selectedBorder: `0px this.mainColor solid`
-          },
-          default: {
-            width: 16,
-            backgroundColor: 'rgba(200,200,200,.45)',
-            border: '1px rgba(200,200,200,.45) solid',
-            color: '#fff',
-            selectedBackgroundColor: selectedColor,
-            selectedBorder: `1px this.mainColor solid`
-          },
-          round: {
-            backgroundColor: 'rgba(166,166,166,.5)',
-            border: '0px rgba(166,166,166,.5) solid',
-            color: '#fff',
-            selectedBackgroundColor: selectedColor,
-            selectedBorder: `0px this.mainColor solid`
-          },
-          nav: {
-            backgroundColor: selectedColor,
-            border: '1px rgba(0,0,0,.2) solid',
-            color: '#fff',
-            selectedBackgroundColor: selectedColor,
-            selectedBorder: '1px rgba(255, 255, 255 1) solid'
-          },
-          indexes: {
-            backgroundColor: textColor,
-            border: '0px rgba(0,0,0,.2) solid',
-            color: '#fff',
-            selectedBackgroundColor: selectedColor,
-            selectedBorder: '0px rgba(0,0,0,.8) solid',
-            selectedColor: '#fff',
-          }
-        }
-      },
       getConfig(){
+        let width = uni.getSystemInfoSync().safeArea.width -
+          (this.checkValue(this.mS.left, 0) + this.checkValue(this.mS.right, 0)) * this.$rpxNum;
+        width = width -
+          (this.checkValue(this.contentPadding.left, 0) + this.checkValue(this.contentPadding.right, 0)) * this.$rpxNum;
         return {
-          mode:this.mode,
-          isCarousel: this.isCarousel,  //焦点图｜轮播
-          carouselTime: this.carouselTime, //轮播周期速度
-          row: this.row,
-          isPreview: this.isPreview,
-          column: this.column,
-          iconStyleComp: this.iconStyleComp,
-          iconItemStyleComp: this.iconItemStyleComp,
-          iconItemBoxStyleComp: this.iconItemBoxStyleComp,
-          height: this.iconWH.height,
-          width: this.iconWH.width,
-          titleStyle: this.titleStyle,
-          dotStyleData: this.dotStyleData
+          mode: 'normal',
+          dotStyleData: this.dotStyleData,
+          poster: this.poster,
+          showType: this.showType,
+          isCarousel: this.isCarousel,
+          carouselTime: this.carouselTime,
+          height: width / this.cells,
+          width: width / this.cells,
+          radius: this.radius,
+          padding: this.padding,
+          jdRows: this.jdRows,
+          cells: this.cells,
+          shadow: this.shadow,
+          shadowColor: this.shadowColor,
+          textColor: this.textColor,
+          iconPadding:this.iconCPadding,
 				}
 			},
-      iconItemStyleComp(){
-        return {
-          height: this.iconWH.height + 'px',
-          width: this.iconWH.width + 'px',
-          marginRight: this.columnSpacing + 'rpx'
-        }
-      },
-      iconItemBoxStyleComp(){
-        return {
-          height: this.iconWH.width + 'px',
-          width: this.iconWH.width + 'px',
-          marginRight: this.columnSpacing + 'rpx',
-          padding: this.iconMargin + 'rpx',
-          boxSizing: 'border-box'
-        }
-      },
-      iconWH(){
-        //宽高
-        let outWidth = uni.getSystemInfoSync().safeArea.width;
-        let marginRL = this.getPMValue(this.margin, 'RL', 0) * this.$rpxNum;
-        let contentPaddingRL = this.getPMValue(this.contentPadding, 'RL', 0) * this.$rpxNum;
-        let columnSpacings = this.columnSpacing * (this.column -1)* this.$rpxNum
-        let width = (outWidth - (marginRL + contentPaddingRL + columnSpacings))/ this.column;
-        let textHeight = 40;
-        if(this.titleStyle.lineHeight) textHeight = parseInt(this.titleStyle.lineHeight);
-
-        return {
-          width,
-          height: width + textHeight * this.$rpxNum
-        }
+      iconCPadding(){
+        let defaultPadding = 20;
+        if(this.cells === 4) defaultPadding = 25
+        let str = `${this.checkValue(this.iconPadding.top, defaultPadding)}rpx`;
+        str = `${str} ${this.checkValue(this.iconPadding.right, defaultPadding)}rpx`;
+        str = `${str} ${this.checkValue(this.iconPadding.bottom, defaultPadding)}rpx`;
+        str = `${str} ${this.checkValue(this.iconPadding.left, defaultPadding)}rpx`;
+        return str
       },
-      iconStyleComp(){
-        return {
-          boxShadow: this.contShadow,
-          borderRadius: this.radius + 'rpx',
-        }
+      margin(){
+        let str = `${this.checkValue(this.mS.top, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.mS.right, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.mS.bottom, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.mS.left, 0)}rpx`;
+        return str
+			},
+      contentPaddingOut(){
+        let str = `${this.checkValue(this.contentPadding.top, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.contentPadding.right, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.contentPadding.bottom, 0)}rpx`;
+        str = `${str} ${this.checkValue(this.contentPadding.left, 0)}rpx`;
+        return str
       },
-
-      bodyStyleComp(){
-        return {
-          margin: this.getMarginAndPadding(this.margin, 0),
-          padding:this.getMarginAndPadding(this.contentPadding, 0),
-          backgroundColor: this.bgColor,
-          borderRadius: this.bgRadius + 'rpx'
-        }
+      dotStyleData() {
+      	return {}
       }
 		},
     watch: {
@@ -211,7 +151,9 @@
       this.isPreview = this.$configProject.isPreview;
     },
     methods: {
-
+      handleAnimationfinish(e) {
+        this.current = e.detail.current;
+      },
       handleImage(list){
       	return list.map(item => {
           return {
@@ -234,48 +176,25 @@
         if (this.poster.position) {
           this.posterPosition = this.poster.position
         }
-        this.row = getContainerPropsValue(container, 'content.jdRows', 1);
-        this.column = getContainerPropsValue(container, 'content.cells', 4);
-        this.columnSpacing = getContainerPropsValue(container, 'columnSpacing', 0)
+        this.jdRows = getContainerPropsValue(container, 'content.jdRows', 1);
+        this.cells = getContainerPropsValue(container, 'content.cells', 4);
 
         //content
-        this.mode = getContainerPropsValue(container, 'content.dot_type', 'round');
+        this.mode = getContainerPropsValue(container, 'content.dot_type', 'dot');
         this.isCarousel = getContainerPropsValue(container, 'content.isCarousel', 1) === 2;
         this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime', 5)) * 1000;
-        let useNumberDefault = 20;
-        if(this.isCarousel === false) useNumberDefault = this.row * this.column;
-        this.useNumber = getContainerPropsValue(container, 'content.number', useNumberDefault);
-
-        //icon样式设置
-        let shadow = getContainerPropsValue(container, 'content.shadow', 2);
-        let shadowColor = getContainerPropsValue(container, 'content.shadowColor', 'rgba(0,0,0,0)');
-        let defaultPadding = 20;
-        if(this.column === 4) defaultPadding = 25
-        this.iconMargin = getContainerPropsValue(container, 'content.iconMargin', defaultPadding);
-        this.contShadow = this.getShadowCompatibleOldStyle(getContainerPropsValue(container, 'content.iconShadow', {}),{
-          type: shadow ===1?'Y':'N',
-          width: '10',
-          color: shadowColor|| 'rgba(0,0,0,0)'
-        })
-        let textColor = getContainerPropsValue(container, 'content.textColor', '#333');
-        let iconSetBaseStyle = getContainerPropsValue(container, 'content.iconSetBaseStyle', 'Y');
-        if(iconSetBaseStyle === 'N') {
-          shadow = 'N';
-          textColor = '#333';
-        }
-        let titleStyle = getContainerPropsValue(container,'content.titleStyle', {});
-        if(!titleStyle.color) titleStyle.color = textColor || '#333';
-        if(!titleStyle.lineHeight) titleStyle.lineHeight = '36rpx';
-        if(!titleStyle.fontWeight) titleStyle.fontWeight = 'normal';
-        if(!titleStyle.fontSize) titleStyle.fontSize = '24rpx';
-        if(!titleStyle.textDecoration) titleStyle.textDecoration = 'none';
-        this.titleStyle = titleStyle;
+        this.useNumber = getContainerPropsValue(container, 'content.number', 1);
+        this.shadow = getContainerPropsValue(container, 'content.shadow', 2);
+        this.shadowColor = getContainerPropsValue(container, 'content.shadowColor', 'rgba(0,0,0,.3)');
+        this.mS = getContainerPropsValue(container, 'content.margin', {});
+        this.iconPadding = getContainerPropsValue(container, 'content.iconPadding', {});
+        this.contentPadding = getContainerPropsValue(container, 'content.contentPadding', {});
 
         //样式设置
+        this.textColor = getContainerPropsValue(container, 'content.textColor', '#333');
         this.bgColor = getContainerPropsValue(container, 'content.bgColor','rgba(0,0,0,0)');
         this.bgRadius = getContainerPropsValue(container, 'content.bgRadius', '0');
-        this.contentPadding = getContainerPropsValue(container, 'content.contentPadding', {});
-        this.margin = getContainerPropsValue(container, 'content.margin', {});
+
 
       },
 

package/src/mixins/componentsMixins.js

@@ -1,11 +1,10 @@
 'use strict';
 
 import {getContainerFnPropsValue, getContainerPropsValue,isWechat} from "@/utils/xd.base";
+import {Base64} from 'js-base64';
 import {mapActions,mapState, mapMutations} from "vuex";
 import helper from "@/utils/helper";
 import store from "@/store/index";
-import getServiceUrl from "@/common/getServiceUrl"
-
 
 export default {
   props: {
@@ -210,31 +209,20 @@ export default {
 
     //调试模式设置值
     let zIndex = 4;
-    if(this['hideMask'] === true) zIndex = -1;
+    if( this['hideMask'] === true) zIndex = -1;
     if(this['closeMask'] === true)  zIndex = -1;
     if(this['closeMask'] === false) zIndex = 4;
+    document.querySelector(':root').style.setProperty('--preview-z-index', zIndex);
 
     //生产元素
     if(this.$configProject.isPreview) {
       if(zIndex ===-1) {
-        this.$nextTick(()=>{
-          setTimeout(()=>{
-            let r = document.getElementsByClassName(this.cssRoot);
-            let len = r.length;
-            for (let i=0; i < len; i++) {
-              let el = r.item(i);
-              if(!el.hasAttribute('close-mask')) {
-                el.setAttribute('close-mask', '1');
-                for(let k=0; k < 4;k++) {
-                  let span =  document.createElement('span');
-                  span.className = 'xd-preview-line xd-preview-line-' + k;
-                  el.appendChild(span);
-                }
-              }
-            }
-
-          }, 50)
-        })
+        let parentRoot = document.querySelector(`.${this.cssRoot}`);
+        for(let i=0; i < 4;i++) {
+          let span =  document.createElement('span');
+          span.className = 'xd-preview-line xd-preview-line-' + i;
+          parentRoot.appendChild(span);
+        }
       }
 
     }
@@ -525,11 +513,6 @@ export default {
 
     //边框样式生成
     getXdBorder(defaultObj, newObj, type='border'){
-      //使用默认值
-      if(newObj.type ==='D'){
-        if(type === 'border') return `${defaultObj.width}rpx ${defaultObj.style} ${defaultObj.color}`;
-        return `0 0 ${defaultObj.width}rpx ${defaultObj.color}`;
-      }
       if(newObj.type === 'N' || this.$xdUniHelper.isEmpty(newObj)) return `0`;
       let width = defaultObj.width;
       let color = defaultObj.color;
@@ -650,31 +633,6 @@ export default {
       return str
     },
 
-    /**
-     * @description 获取边距与填充上下或者左右的值
-     * @param obj
-     * @param type
-     * @param defValue
-     * @return {*}
-     */
-    getPMValue(obj = {},type='RL', defValue) {
-      if(this.$xdUniHelper.checkVarType(obj) !== 'object') obj = {};
-      let top = 0,right=0,bottom=0,left=0;
-      if(typeof defValue === 'number') {
-        top = right = left = bottom = defValue;
-      }
-      else if(this.$xdUniHelper.checkVarType(obj) === 'object') {
-        if(typeof defValue.top === "number")  top = defValue.top;
-        if(typeof defValue.right === "number")  right = defValue.right;
-        if(typeof defValue.bottom === "number")  bottom = defValue.bottom;
-        if(typeof defValue.left === "number")  left = defValue.left;
-      }
-      if(type === 'RL') {
-        return this.checkValue(obj.left,left) + this.checkValue(obj.right,right);
-      }
-      return this.checkValue(obj.bottom,bottom) + this.checkValue(obj.top,top);
-    },
-
     /**
      * @description 获取商品显示规则
      * @param container
@@ -830,6 +788,44 @@ export default {
         console.error(e);
         return null;
       }
+      // let content = list.filter(item=>{
+      //   //预览模式
+      //   if(this.$configProject.isPreview) return true;
+      //
+      //   //非内部应用
+      //   if(item.redirect_type !== 'INN') return true
+      //
+      //   //没有配置链接
+      //   if(!item.redirect_data) return true;
+      //
+      //   //内部应用
+      //   else {
+      //     let redirect_data;
+      //     try {
+      //       redirect_data = JSON.parse(item.redirect_data);
+      //       if(!item['app_type']) item['app_type']= 'h5';
+      //
+      //       //#ifdef H5
+      //       return item['app_type'] !== 'wxmp';
+      //       //#endif
+      //
+      //       //#ifdef MP-WEIXIN
+      //       let actDir = this.$parent.projectAttr.deploy_dir;
+      //       let dir = this.getPathDir(redirect_data.page);
+      //       if(item['app_type'] === 'wxmp'){
+      //         return actDir === dir;
+      //       }
+      //       else if(item['app_type'] === 'h5') return true;
+      //       else return true
+      //       //#endif
+      //     }
+      //     catch (e) {
+      //       return true
+      //     }
+      //   }
+      // });
+      // console.warn(`PostersList:${JSON.stringify(content.map(item=>`${item.app_type}:${item.content_name}:${item.redirect_data}`), null,2)}`)
+      // return content;
 
     },
   }