jufubao-base 1.0.198-beta1 → 1.0.200-beta1

package/src/components/JfbBaseWallet/JfbBaseWallet.vue

@@ -14,21 +14,29 @@
     </view>
     <!-- #endif -->
     <view class="jfb-base-wallet__body">
+      <view class="x-line"></view>
       <template v-if="showContent">
-        <view class="jfb-base-wallet__body-title">我的账户</view>
-        <view class="jfb-base-wallet__body-type" v-if="showType.length > 0">
-          <view
-            :style="{marginRight: index === showType.length - 1 ? '0' : '36rpx',}"
-            v-for="(item, index) in showType"
-            @click="handleJumpTo(item)"
-            :key="index"
-            class="jfb-base-wallet__body-type-item"
-          >
-            <XdFontIcon :icon="item.icon"></XdFontIcon>
-            <view>{{ item.label }}</view>
+        <view :style="[{
+          margin:marginComp,
+          padding:paddingComp,
+          backgroundColor:bodyBgColor,
+          borderRadius:bodyRadius+'rpx'
+        }]">
+          <view class="jfb-base-wallet__body-title" :style="[titleStyleComp]">{{accountName}}</view>
+          <view class="jfb-base-wallet__body-type" :style="[contStyleComp]" v-if="showType.length > 0">
+            <view
+              :style="[itemStyleComp]"
+              v-for="(item, index) in showType"
+              @click="handleJumpTo(item)"
+              :key="index"
+              class="jfb-base-wallet__body-type-item"
+            >
+              <xd-font-icon :icon="item.icon" :color="iconColor"></xd-font-icon>
+              <view>{{ item.label }}</view>
+            </view>
           </view>
+          <view v-else class="jfb-base-wallet__body-type notice" :style="{backgroundColor:backgroundColor, color:warningColor}">我的账户无配置数据，在正式环境将不显示改模块</view>
         </view>
-        <view v-else class="jfb-base-wallet__body-type notice" :style="{backgroundColor:backgroundColor, color:warningColor}">我的账户无配置数据，在正式环境将不显示改模块</view>
       </template>
     </view>
   </view>
@@ -72,6 +80,38 @@ export default {
       isCard: "Y",
       isYuanbao: "Y",
       isIntegral: "Y",
+      accountName:'我的账户',
+
+      //标题
+      titleStyle:{},
+      titleMargin:{},
+
+      //轮廓
+      bodyRadius:'0',
+      bodyMargin:{},
+      bodyPadding:{},
+      rowSpacing:10,
+      columnSpacing:36,
+      bodyBgColor:'rgba(0,0,0,0)',
+
+      //content
+      contPadding:{},
+      contBgColor:'rgba(0,0,0,0)',
+      contRadius:'10',
+      contShadow:'0 0 0 rgba(0,0,0,0)',
+      contBorder:{},
+
+      //item
+      itemPadding:{},
+      itemBgColor:'rgba(0,0,0,0)',
+      itemRadius:'10',
+      itemShadow: '0 0 0 rgba(0,0,0,0)',
+      itemBorder:{},
+      itemPStyle:{},
+      iconColor: '#333',
+
+
+      //高级
       cardPath: "",
       yuanbaoPath: "",
       integralPath: "",
@@ -163,6 +203,15 @@ export default {
     },
   },
   computed: {
+    titleMarginComp(){
+      let str = `${this.checkValue(this.titleMargin.top, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.titleMargin.right, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.titleMargin.bottom, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.titleMargin.left, 0)}rpx`;
+      return {
+        padding: str
+      }
+    },
     showType() {
       this.typeList.forEach((item1, index) => {
         const item2 = this.newLabel.find((item) => item.value === item1.value);
@@ -177,7 +226,90 @@ export default {
     showContent(){
       if(this.$configProject.isPreview) return true;
       return this.showType.length > 0;
-    }
+    },
+
+    titleStyleComp(){
+      return {
+        fontSize: this.titleStyle.fontSize || '28rpx',
+        color: `${this.titleStyle.color || '#333'}`,
+        fontWeight: `${this.titleStyle.fontWeight || 'normal'}`,
+        marginBottom: `${this.rowSpacing}rpx`,
+        ...this.titleMarginComp
+      }
+    },
+
+    marginComp() {
+      let str = `${this.checkValue(this.bodyMargin.top, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.bodyMargin.right, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.bodyMargin.bottom, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.bodyMargin.left, 0)}rpx`;
+      return str
+    },
+
+    paddingComp() {
+      let str = `${this.checkValue(this.bodyPadding.top, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.bodyPadding.right, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.bodyPadding.bottom, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.bodyPadding.left, 20)}rpx`;
+      return str
+    },
+
+    contStyleComp(){
+      let str = `${this.checkValue(this.contPadding.top, 32)}rpx`;
+      str = `${str} ${this.checkValue(this.contPadding.right, 48)}rpx`;
+      str = `${str} ${this.checkValue(this.contPadding.bottom, 32)}rpx`;
+      str = `${str} ${this.checkValue(this.contPadding.left, 48)}rpx`;
+      let border = {
+        borderWidth: '2rpx',
+        borderStyle: 'solid',
+        borderColor: '#eee',
+      }
+      if(this.contBorder && this.contBorder.type === 'Y') {
+        let value = this.contBorder.value || {};
+        if(value.color) border.borderColor = value.color;
+        if(value.style) border.borderStyle = value.style;
+        if(value.width) border.borderWidth = value.width + 'rpx';
+      }
+
+      return {
+        padding: str,
+        backgroundColor: this.contBgColor,
+        borderRadius: this.contRadius + 'rpx',
+        boxShadow: this.contShadow,
+        ...border,
+      }
+    },
+
+    itemStyleComp(){
+      let str = `${this.checkValue(this.itemPadding.top, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.itemPadding.right, 0)}rpx`;
+      str = `${str} ${this.checkValue(this.itemPadding.bottom, 20)}rpx`;
+      str = `${str} ${this.checkValue(this.itemPadding.left, 0)}rpx`;
+
+      let border = {
+        borderWidth: '2rpx',
+        borderStyle: 'solid',
+        borderColor: '#eee',
+      }
+      if(this.itemBorder && this.itemBorder.type === 'Y') {
+        let value = this.itemBorder.value || {};
+        if(value.color) border.borderColor = value.color;
+        if(value.style) border.borderStyle = value.style;
+        if(value.width) border.borderWidth = value.width + 'rpx';
+      }
+      if(this.itemPStyle.color !== undefined) this.iconColor =this.itemPStyle.color
+      return {
+        padding: str,
+        backgroundColor: this.itemBgColor,
+        borderRadius: this.itemRadius + 'rpx',
+        marginRight: this.columnSpacing + 'rpx',
+        boxShadow: this.itemShadow,
+        fontSize: this.itemPStyle.fontSize || '28rpx',
+        color: `${this.itemPStyle.color || '#333'}`,
+        fontWeight: `${this.itemPStyle.fontWeight || 'normal'}`,
+        ...border
+      }
+    },
   },
   created() {
     this.backgroundColor = Color(this.warningColor).alpha(0.2).toString();
@@ -196,34 +328,43 @@ export default {
     init(container) {
       this.newLabel = getContainerPropsValue(container, "content.newLabel", []);
       this.isCard = getContainerPropsValue(container, "content.isCard", "Y");
-      this.isYuanbao = getContainerPropsValue(
-        container,
-        "content.isYuanbao",
-        "Y"
-      );
-      this.isIntegral = getContainerPropsValue(
-        container,
-        "content.isIntegral",
-        "Y"
-      );
-      this.cardPath = getContainerPropsValue(container, "content.cardPath", {
-        value: "",
-      }).value;
-
-      this.yuanbaoPath = getContainerPropsValue(
-        container,
-        "content.yuanbaoPath",
-        { value: "" }
-      ).value;
-
-      this.integralPath = getContainerPropsValue(
-        container,
-        "content.integralPath",
-        { value: "" }
-      ).value;
+      this.isYuanbao = getContainerPropsValue(container, "content.isYuanbao", "Y");
+      this.isIntegral = getContainerPropsValue(container, "content.isIntegral", "Y");
+      this.accountName = getContainerPropsValue(container, "content.accountName", "我的账户");
+      this.rowSpacing = Number(getContainerPropsValue(container, "content.rowSpacing", 10));
+      this.columnSpacing = Number(getContainerPropsValue(container, "content.columnSpacing", 36));
+      this.bodyBgColor = getContainerPropsValue(container, "content.bodyBgColor", 'rgba(0,0,0,0)');
+      this.bodyPadding = getContainerPropsValue(container, "content.bodyPadding", {});
+      this.bodyMargin = getContainerPropsValue(container, "content.bodyMargin", {});
+      this.bodyRadius = getContainerPropsValue(container, "content.bodyRadius", '0');
+
+      //标题
+      this.titleStyle = getContainerPropsValue(container, 'content.titleStyle', {});
+      this.titleMargin = getContainerPropsValue(container, 'content.titleMargin', {})
+
+      //content
+      this.contPadding = getContainerPropsValue(container, "content.contPadding", {});
+      this.contBgColor = getContainerPropsValue(container, "content.contBgColor", 'rgba(0,0,0,0)');
+      this.contRadius = getContainerPropsValue(container, "content.contRadius", '10');
+      this.contBorder = getContainerPropsValue(container, "content.contBorder", {});
+      this.contShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,.3)'},getContainerPropsValue(container, 'content.contShadow', {}))
+
+
+      //item
+      this.itemPadding = getContainerPropsValue(container, 'content.itemPadding', {});
+      this.itemBgColor = getContainerPropsValue(container, 'content.itemBgColor', 'rgba(0,0,0,0)');
+      this.itemRadius = getContainerPropsValue(container, 'content.itemRadius', '10');
+      this.itemShadow = this.getXdShadow({width:20, color:'rgba(0,0,0,.3)'},getContainerPropsValue(container, 'content.itemShadow', {}))
+      this.itemBorder = getContainerPropsValue(container, "content.itemBorder", {});
+      this.itemPStyle = getContainerPropsValue(container, "content.itemStyle", {});
+
+      //高级
+      this.cardPath = getContainerPropsValue(container, "content.cardPath", {value: "",}).value;
+      this.yuanbaoPath = getContainerPropsValue(container, "content.yuanbaoPath", { value: "" }).value;
+      this.integralPath = getContainerPropsValue(container, "content.integralPath", { value: "" }).value;
     },
     handleJumpTo(item) {
-      console.log(item, "ppppp");
+      if(this.$configProject.isPreview) return;
       switch (item.value) {
         case "card":
           this.$xdUniHelper.navigateTo({
@@ -257,22 +398,20 @@ export default {
 .jfb-base-wallet {
   &__body {
     &-title {
-      padding: 20rpx;
+      min-height: 64rpx;
+      line-height: 64rpx;
     }
     &-type {
       display: flex;
       border-radius: 20rpx;
       background: rgba(255, 255, 255, 1);
       border: 1rpx solid rgba(238, 238, 238, 1);
-      padding: 32rpx 48rpx 32rpx 48rpx;
-      margin: 0 20rpx 0;
 
       &.notice {
         font-size: 26rpx;
       }
 
       &-item {
-        color: #999999;
         flex: 1;
         display: flex;
         flex-direction: column;
@@ -280,12 +419,9 @@ export default {
         justify-content: center;
         font-size: 24rpx;
         border: 2rpx solid #eeeeee;
-        border-radius: 16rpx;
-        background: #ffffff;
-        padding: 16rpx 0;
-        margin-right: 36rpx;
-        & > view:nth-child(2) {
-          margin-top: 12rpx;
+
+        &:last-child{
+          margin-right: 0!important;
         }
       }
     }

package/src/mixins/componentsMixins.js

@@ -171,7 +171,6 @@ export default {
     }
 
     //保存到vuex
-    console.log('setStyleCommon',this)
     this.setStyleCommon(this.styles);
 
     //初始化风格
@@ -207,24 +206,53 @@ export default {
   mounted() {
     let that = this;
     this.autoHideMask();
+
+    //调试模式设置值
+    let zIndex = 4;
+    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);
+        }
+      }
+
+    }
+
     if (this.$configProject.isPreview && this.selfMask !== true ) {
-      this.$nextTick(()=>{
-        function handle() {
-          let elx = that.$el.getElementsByClassName(`${that.cssRoot}__body`);
-          if (elx.length === 0) {
-            setTimeout(() => {
-              handle()
-            }, 50)
-          } else {
-            let len = elx.length;
-            for (let i = 0; i < len; i++) {
-              if (!elx.item(i).classList.contains('isGPreview')) {
-                elx.item(i).classList.add("isGPreview");
-              }
+      //启动关闭
+      if(this['closeMask'] === true) {
+        return;
+      }
+
+      function handle() {
+        let elx = that.$el.getElementsByClassName(`${that.cssRoot}__body`);
+        if (elx.length === 0) {
+          setTimeout(() => {
+            handle()
+          }, 50)
+        }
+        else {
+          let len = elx.length;
+          for (let i = 0; i < len; i++) {
+            if (!elx.item(i).classList.contains('isGPreview')) {
+              elx.item(i).classList.add("isGPreview");
             }
           }
         }
-        handle();
+      }
+      this.$nextTick(()=>{
+        setTimeout(()=>{
+          handle();
+        },200)
       });
     }
 
@@ -261,10 +289,13 @@ export default {
     autoHideMask(){
       if(this.$configProject.isPreview && this.hideMask === true){
         this.$nextTick(()=>{
-          let className = this.$el.classList;
-          if(!className.contains('gHideMask')) {
-            className.add("gHideMask")
-          }
+          setTimeout(()=>{
+            let className = this.$el.classList;
+            if(!className.contains('gHideMask')) {
+              className.add("gHideMask")
+            }
+          },200)
+
         })
       }
     },
@@ -459,26 +490,171 @@ export default {
       return Number(value || 0);
     },
 
+    /**
+     * @description 获取图片链接
+     * @param image
+     * @return {string}
+     */
+    getBgImage(image = {}){
+      let bg = 'none';
+      if(this.$xdUniHelper.checkVarType(image) === 'object') {
+        if(!this.$xdUniHelper.isEmpty(image)) {
+          return `url(${getServiceUrl(image.url)})`
+        }
+      }
+      return bg
+    },
+
+    //阴影样式生成
     getXdShadow(defaultObj, newObj){
       if(newObj.type === 'N' || this.$xdUniHelper.isEmpty(newObj)) return `0 0 0 rgba(0,0,0,0)`;
+      return this.getXdBorder(defaultObj,newObj,'shadow')
+    },
+
+    //边框样式生成
+    getXdBorder(defaultObj, newObj, type='border'){
+      if(newObj.type === 'N' || this.$xdUniHelper.isEmpty(newObj)) return `0`;
       let width = defaultObj.width;
       let color = defaultObj.color;
-      if(newObj.value !== null) {
-        if(newObj.value.width) width = newObj.value.width;
-        if(newObj.value.color) color  = newObj.value.color
-      }
+      let style = defaultObj.style || 'solid';
+      let value = newObj.value || {};
+      if(value.width) width = value.width;
+      if(value.color) color = value.color;
+      if(value.style) style = value.style;
+      if(type === 'border') return `${width}rpx ${style} ${color}`
       return `0 0 ${width}rpx ${color}`;
     },
 
-    getXdBorder(defaultObj, newObj){
-      if(newObj.type === 'N' || this.$xdUniHelper.isEmpty(newObj)) return `0`
-      let width = defaultObj.width;
-      let color = defaultObj.color;
-      if(newObj.value !== null) {
-        if(newObj.value.width) width = newObj.value.width
-        if(newObj.value.color) color  = newObj.value.color
+    getBorderCompatibleOldStyle(newObj={}, oldObj={}, type='border'){
+      let contWidth = 0;
+      let contColor = 'rgba(0.0.0.0)';
+      let contrStyle = 'solid';
+
+      if(oldObj.type === 'Y') {
+        if(oldObj.width !== undefined) contWidth = oldObj.width;
+        if(oldObj.color !== undefined) contColor = oldObj.color;
+      }
+      if(newObj.type === 'Y') {
+        let value = newObj.value || {};
+        if(value.color) contColor = value.color;
+        if(value.style) contrStyle = value.style;
+        if(value.width) contWidth = value.width;
+      }
+
+      if(type === 'border'){
+        if(oldObj.type === 'N' && newObj.type === 'N') return 0;
+        return `${contWidth}rpx ${contrStyle} ${contColor}`
+      }
+      return `0 0  ${contWidth}rpx ${contColor}` ;
+    },
+
+    getShadowCompatibleOldStyle(newShadow={},oldShadow={}){
+      return this.getBorderCompatibleOldStyle(newShadow,oldShadow, 'shadow')
+    },
+
+    /**
+     * @description 获取边框或投影宽度值
+     * @param newObj {Object} border|shadow
+     * @param width {number|string} 老模式宽
+     * @param type {string} 老模式宽是否启用 Y/N
+     * @return {number}
+     */
+    getBorOrShWidth(newObj={}, {width, type}) {
+      let tempWidth = 0;
+      if(type === 'Y' && width !== undefined) tempWidth = width;
+      if(newObj.type === 'Y') {
+        let value = newObj.value || {};
+        if(value.width !== undefined) tempWidth = value.width;
+      }
+      return Number(tempWidth);
+    },
+
+    /**
+     * @description 解析切换元素属性方法
+     * @param newObj
+     * @param fontSize {String} 默认字体大小， 格式：24rpx
+     * @param lineHeight {Number} 默认行高 格式：30
+     * @param color {String} 默认颜色
+     * @param bgColor {String} 默认背景色
+     * @param fontWeight {String} 字体粗线
+     * @param gradientColor {String} 渐变色 参考：https://www.colorzilla.com/gradient-editor/
+     * @param type {String} 获取样式类型： ''=>获取普通样式 act=>获取选中样式
+     * @return {{}}
+     */
+    getFontAndBgcStyle(newObj, {fontSize, lineHeight, color, bgColor, fontWeight,gradientColor},type='' ){
+      let temp = {};
+      let colorKey = 'color',
+        fontSizeKey='fontSize',
+        lineHeightKey = 'lineHeight',
+        fontWeightKey = 'fontWeight',
+        bgColorKey = 'bgColor',
+        gradientColorKey = 'gradientColor';
+      if(type === 'act') {
+        colorKey = `actColor`;
+        fontSizeKey='actFontSize';
+        lineHeightKey = 'actLineHeight';
+        fontWeightKey = 'actFontWeight';
+        bgColorKey = 'actBgColor';
+        gradientColorKey = 'actGradientColor';
+      }
+      if(newObj[colorKey] || color) temp['color'] = newObj[colorKey] || color;
+      if(newObj[fontSizeKey] || color) temp['fontSize'] = newObj[fontSizeKey] || fontSize;
+      if(newObj[lineHeightKey] || lineHeight) temp['lineHeight'] = (newObj[lineHeightKey] || lineHeight) + 'rpx';
+      if(newObj[fontWeightKey] || fontWeight) temp['fontWeight'] = newObj[fontWeightKey] || fontWeight;
+      if(newObj[bgColorKey] || bgColor) temp['backgroundColor'] = newObj[bgColorKey] || bgColor;
+      if(newObj[gradientColorKey] || gradientColor) temp['backgroundImage'] = newObj[gradientColorKey] || gradientColor;
+      return temp;
+
+    },
+
+    /**
+     * @description 数据
+     * @param marAndPadding {Object}
+     * @param defVale {Object|number}
+     */
+    getMarginAndPadding(marAndPadding, defVale){
+      let top = 0, left=0,bottom=0,right=0;
+      if(typeof defVale === 'number') {
+        top=defVale;
+        left=defVale;
+        bottom=defVale;
+        right=defVale;
+      }
+      if(this.$xdUniHelper.checkVarType(defVale) === 'object') {
+        if(defVale.top !== undefined) top = defVale.top;
+        if(defVale.right !== undefined) right = defVale.right;
+        if(defVale.bottom !== undefined) bottom = defVale.bottom;
+        if(defVale.left !== undefined) left = defVale.left;
+      }
+      let str = `${this.checkValue(marAndPadding.top, top)}rpx`;
+      str = `${str} ${this.checkValue(marAndPadding.right, right)}rpx`;
+      str = `${str} ${this.checkValue(marAndPadding.bottom, bottom)}rpx`;
+      str = `${str} ${this.checkValue(marAndPadding.left, left)}rpx`;
+      return str
+    },
+
+    /**
+     * @description 获取商品显示规则
+     * @param container
+     * @return {{isAddCart: *, isShowDiscount: *, isPrice: *, is_show_brand: *, showActivityPrice: *, isShowTag: *, differ: *}}
+     */
+    getProductConfig(container){
+      let is_show_brand = getContainerPropsValue(container, "content.is_show_brand", "N");
+      let isPrice = getContainerPropsValue(container, "content.isPrice", "Y");
+      let isShowDiscount = getContainerPropsValue(container, "content.isShowDiscount", "Y");
+      let differ = getContainerPropsValue(container, "content.differ", 1);
+      let showActivityPrice = getContainerPropsValue(container, "content.showActivityPrice", "N");
+      let isShowTag = getContainerPropsValue(container, "content.isShowTag", "Y");
+      let isAddCart = getContainerPropsValue(container, "content.isAddCart", "N");
+      return {
+        isShowDiscount: isShowDiscount,
+        isPrice: isPrice,
+        isAddCart: isAddCart,
+        is_show_brand: is_show_brand,
+        showActivityPrice:showActivityPrice,
+        isShowTag : isShowTag,
+        differ: differ,
       }
-      return `${width}rpx solid ${color}`;
     },
 
     getUrlCallback(path){
@@ -591,21 +767,20 @@ export default {
             return redirect_data.path
           }
           else {
-            return `//${projectAttr.host}/${redirect_data.frontPath}`
+            return `//${projectAttr.host}${redirect_data.frontPath}`
           }
 
         }
         //#endif
 
         //#ifdef MP-WEIXIN
-
-        let dir = this.getUrlHasSpStrDIR(redirect_data.path);
+        let dir = redirect_data.dir;
         if(redirect_data['appType'] === 'wxmp'){
           if(projectAttr.deploy_dir === dir) return redirect_data.path;
           else return null;
         }
         else if(redirect_data['appType'] === 'h5'){
-
+          return `https://${projectAttr.host}${redirect_data.frontPath}`
         }
         else return null;
         //#endif