jufubao-base 1.0.213 → 1.0.214

package/src/components/JfbBasePosterType/JfbBasePosterType.vue

@@ -15,16 +15,12 @@
     <!-- #endif -->
     <view class="jfb-base-poster-type__body" v-if="noData">
       <view class="x-line"></view>
-      <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 class="jfb-base-poster-cont" :style="[bodyStyleComp]">
+        <four-screen
+          style="width: 100%;"
+          :config="getConfig"
+          :content="info"
+        ></four-screen>
       </view>
 
     </view>
@@ -56,7 +52,13 @@
     mixins: [componentsMixins,extsMixins,JfbBasePosterTypeMixin],
     data() {
       return {
+        //closeMask: true,
         params: {},
+        noData:false,
+        timer: null,
+        info: [],
+        isPreview: false,
+
 				//Swiper 配置
         posterPosition: null,
         current: 0,
@@ -64,76 +66,134 @@
 				isCarousel: true, //是否轮播图
         carouselTime: 5,//轮播图轮播周期
 				useNumber: null, //广告使用张数
-				padding: 0, //广告内容之间间距
-        jdRows: 1, //行
-        cells: 4, //列
-        shadow: false, //是否设置阴影
-        shadowColor:'rgba(0,0,0,.3)',
+        mode:'round',//索引样式
+        row: 1, //行
+        column: 4, //列
+        columnSpacing:0,
+
+        //icon样式设置
+        contShadow:{},
         radius: '20', //10/20/40 ， 小/中/大
-				timer: null,
-				info: [],
-        mS: {},
-        iconPadding:{},
-        contentPadding:{},
-				isPreview: false,
-				noData:false,
+        iconMargin:20,
+        titleStyle:{},
 
 				//颜色设置
-        textColor: '#333',
+        margin: {},
+        contentPadding:{},
         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: '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,
+          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
 				}
 			},
-      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
+      iconItemStyleComp(){
+        return {
+          height: this.iconWH.height + 'px',
+          width: this.iconWH.width + 'px',
+          marginRight: this.columnSpacing + '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
+      iconItemBoxStyleComp(){
+        return {
+          height: this.iconWH.width + 'px',
+          width: this.iconWH.width + 'px',
+          marginRight: this.columnSpacing + 'rpx',
+          padding: this.iconMargin + 'rpx',
+          boxSizing: 'border-box'
+        }
       },
-      dotStyleData() {
-      	return {}
+      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
+        }
+      },
+      iconStyleComp(){
+        return {
+          boxShadow: this.contShadow,
+          borderRadius: this.radius + 'rpx',
+        }
+      },
+
+      bodyStyleComp(){
+        return {
+          margin: this.getMarginAndPadding(this.margin, 0),
+          padding:this.getMarginAndPadding(this.contentPadding, 0),
+          backgroundColor: this.bgColor,
+          borderRadius: this.bgRadius + 'rpx'
+        }
       }
 		},
     watch: {
@@ -151,9 +211,7 @@
       this.isPreview = this.$configProject.isPreview;
     },
     methods: {
-      handleAnimationfinish(e) {
-        this.current = e.detail.current;
-      },
+
       handleImage(list){
       	return list.map(item => {
           return {
@@ -176,25 +234,48 @@
         if (this.poster.position) {
           this.posterPosition = this.poster.position
         }
-        this.jdRows = getContainerPropsValue(container, 'content.jdRows', 1);
-        this.cells = getContainerPropsValue(container, 'content.cells', 4);
+        this.row = getContainerPropsValue(container, 'content.jdRows', 1);
+        this.column = getContainerPropsValue(container, 'content.cells', 4);
+        this.columnSpacing = getContainerPropsValue(container, 'columnSpacing', 0)
 
         //content
-        this.mode = getContainerPropsValue(container, 'content.dot_type', 'dot');
+        this.mode = getContainerPropsValue(container, 'content.dot_type', 'round');
         this.isCarousel = getContainerPropsValue(container, 'content.isCarousel', 1) === 2;
         this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime', 5)) * 1000;
-        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', {});
+        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.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,10 +1,11 @@
 '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: {
@@ -209,20 +210,31 @@ 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) {
-        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);
-        }
+        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)
+        })
       }
 
     }
@@ -513,6 +525,11 @@ 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;
@@ -633,6 +650,31 @@ 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
@@ -788,44 +830,6 @@ 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;
 
     },
   }