jufubao-base 1.0.310 → 1.0.311-beta101

package/src/components/JfbBaseEntry/JfbBaseEntry.vue

@@ -13,30 +13,40 @@
       <view class="jfb-base-entry__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-entry__body" :style="bodyStyle">
-      <view :style="{ margin:marginUi}">
-        <view v-if="loadingList" class="entry_list skeleton-wrap" :style="entryStyle">
-          <view v-for="i in 5" :key="i"
+    <view class="jfb-base-entry__body">
+      <view class="x-line"></view>
+      <view :style="[contStyleComp]">
+        <view
+          v-if="entryList === null"
+          class="entry_list skeleton-wrap"
+          :class="{rowNum1: rowNum ===1,rowNum2: rowNum ===2,rowNum3: rowNum ===3}"
+        >
+          <view
+            v-for="i in 5"
+            :key="i"
             :class="'row_num_'+rowNum"
             class="entry_item"
+            :style="[entryItemSkeStyleComp]"
           >
-            <image v-if="rowNum == 1" style="height: 260rpx;"/>
-            <image v-if="rowNum == 2" style="height: 200rpx;"/>
-            <image v-if="rowNum == 3" style="height: 150rpx;"/>
           </view>
         </view>
-        <view v-else class="entry_list" :style="entryStyle">
+        <view
+          v-else
+          class="entry_list"
+          :class="{rowNum1: rowNum ===1,rowNum2: rowNum ===2,rowNum3: rowNum ===3}"
+        >
           <view
+            :style="[entryItemStyleComp]"
             v-if="entryList.length > 0"
             v-for="(item,i) in entryList"
             :key="i"
             class="entry_item"
-            :class="'row_num_'+rowNum"
+            :class="'row_num_'+ rowNum"
             @click="toLink(item)"
           >
-            <image v-if="rowNum == 1" :src="item.image_url" mode="widthFix"/>
-            <image v-if="rowNum == 2" :src="item.image_url2" mode="widthFix"/>
-            <image v-if="rowNum == 3" :src="item.image_url3" mode="widthFix"/>
+            <image v-if="rowNum === 1" :src="item.image_url" mode="widthFix"/>
+            <image v-if="rowNum === 2" :src="item.image_url2" mode="widthFix"/>
+            <image v-if="rowNum === 3" :src="item.image_url3" mode="widthFix"/>
           </view>
           <xd-no-data
             icon-type="empty"
@@ -53,7 +63,7 @@
   import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
   import { jfbRootExec } from "@/utils/xd.event";
   import JfbBaseEntryMixin from "./JfbBaseEntryMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
+  import { gCPVal } from "@/utils/xd.base";
   import componentsMixins from "@/mixins/componentsMixins";
   import extsMixins from "@/mixins/extsMixins";
   import getServiceUrl from "@/common/getServiceUrl";
@@ -70,61 +80,147 @@
     ],
     data() {
       return {
-        entryList: [],
-        bgcolor: "",
-        rowNum: 1,
-        paddingInput: 20,
-        loadingList: true,
-        margin: {},
+        closeMask: true,
+        entryList: null,
+        height: 0,
+        width: 0,
+
+        //content
+        rowNum: 1, //列数
         entryType: '',
+
+        //style
+        radius:0,
+        bgcolor: "", //背景色
+        bgImage:{}, //背景图
+        paddingInput: 20, //间距
+        margin: {}, //边距
+        contRadius:0,//圆角
+        padding:{},//填充
       }
     },
     computed: {
       ...mapState(['brandInfo']),
-      bodyStyle(){
-        return this.styleObjectToString({
+      contStyleComp(){
+        let marginTB = this.getPMValue(this.margin, 'TB', 0);
+        let paddingTB = this.getPMValue(this.padding, 'TB', 0);
+        let bodyMinHeight = this.layoutInfo.bodyMinHeightRpx - (marginTB + paddingTB)
+        let url = {};
+        if(this.bgImage && this.bgImage.url) {
+          url = {
+            backgroundImage: `url(${getServiceUrl(this.bgImage.url)})`,
+            backgroundSize: '100%',
+            backgroundRepeat: 'repeat-y',
+            backgroundPosition: 'top center'
+          }
+        }
+        return {
           backgroundColor: this.bgcolor,
-          minHeight: this.layoutInfo.bodyMinHeight,
-        })
+          minHeight: bodyMinHeight + 'rpx',
+          margin: this.getMarginAndPadding(this.margin, 0),
+          padding: this.getMarginAndPadding(this.padding, 0),
+          borderRadius: this.radius + 'rpx',
+          ...url
+        }
       },
-      entryStyle(){
-        return this.styleObjectToString({
-          gridTemplateColumns: `repeat(${this.rowNum}, 1fr)`,
-          gap: this.paddingInput + 'rpx',
-          padding: this.paddingInput + 'rpx'
-        })
+      getWidthComp(){
+        let marginRL = this.getPMValue(this.margin, 'RL', 0);
+        let paddingRL = this.getPMValue(this.padding, 'RL', 0);
+        return (750 - (Number(this.paddingInput)*(this.rowNum-1) + marginRL + paddingRL)) / this.rowNum
+      },
+      getMarginRight(){
+        let marginRight = 0;
+        if([2,3].includes(this.rowNum)) marginRight = this.paddingInput + 'rpx';
+        return marginRight
       },
-      marginUi(){
-        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
+      entryItemSkeStyleComp(){
+        let width = this.getWidthComp
+        let height = '260rpx';
+        if([2,3].includes(this.rowNum)) height = '300rpx';
+        return {
+          borderRadius: this.contRadius + 'rpx',
+          marginTop: this.paddingInput + 'rpx',
+          marginRight: this.getMarginRight,
+          height,
+          width: width + 'rpx'
+        }
+      },
+      entryItemStyleComp(){
+        let width = this.getWidthComp
+        return {
+          borderRadius: this.contRadius + 'rpx',
+          marginTop: this.paddingInput + 'rpx',
+          width: width + 'rpx',
+          marginRight: this.getMarginRight,
+          height: width * this.height/this.width  + 'rpx',
+          overflow: 'hidden'
+        }
       }
     },
     watch: {
       container(value,oldValue) {
         if(JSON.stringify(value) === JSON.stringify(oldValue)) return;
-        if (this.$configProject['isPreview']) this.init(value)
+        if (this.$configProject['isPreview']) {
+          this.init(value);
+          this.onJfbLoad()
+        }
       },
     },
     created() {
       this.init(this.container);
     },
     methods: {
-      onJfbLoad(options) {
+      onJfbLoad() {
         this.getEntrySetting();
       },
+
+      getImageInfo(entryList){
+        return new Promise((resolve,reject)=>{
+          let heightAll = 0,widthAll = 0, counter = 0, allCouter = 0;
+          let len = entryList.length;
+          entryList.map(item=>{
+            let imgUrl = item['image_url'];
+            if(this.rowNum === 2) imgUrl = item['image_url2'];
+            if(this.rowNum === 3) imgUrl = item['image_url3'];
+            uni.getImageInfo({
+              src:imgUrl,
+              success:({width,height})=>{
+                heightAll += height;
+                widthAll += width;
+                allCouter++;
+                counter++;
+                if(len === allCouter){
+                  resolve({height:heightAll/counter, width: widthAll/counter})
+                }
+              },fail:()=>{
+                allCouter++;
+                if(len === allCouter){
+                  resolve({height:heightAll/counter, width: widthAll/counter})
+                }
+              }
+            })
+          })
+        })
+      },
+
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
-        this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
-        this.rowNum = getContainerPropsValue(container, 'content.rowNum', 1);
-        this.paddingInput = getContainerPropsValue(container, 'content.paddingInput', 20);
-        this.margin = getContainerPropsValue(container, 'content.margin', {});
-        this.entryType = getContainerPropsValue(container, 'content.entryType', 'default');
+
+        //content
+        this.rowNum = gCPVal(container, 'rowNum', 1);
+        this.entryType = gCPVal(container, 'entryType', 'default');
+
+        //style
+        this.bgcolor = gCPVal(container, 'bgcolor', 'rgba(0,0,0,0)',{sKey:'bgStatus',fields:['bgcolor','bgImage']});
+        this.bgImage = gCPVal(container, 'bgImage', {},{sKey:'bgStatus',fields:['bgcolor','bgImage']});
+        this.paddingInput = gCPVal(container, 'paddingInput', [16,20], {sKey:'paddingInputStatus',fields:['paddingInput'] });
+        this.margin = gCPVal(container, 'margin', 0, {sKey: 'marginStatus',fields:['margin'], isPMR: true});
+        this.padding = gCPVal(container, 'padding', 0, {sKey: 'paddingStatus',fields:['padding'], isPMR: true});
+        this.contRadius = gCPVal(container, 'contRadius', [this.gStyleValue.radius,0],{sKey: 'contRadiusStatus', fields: ['contRadius']})||0;
+        this.radius = gCPVal(container, 'radius', [this.gStyleValue.radius,0],{sKey: 'radiusStatus', fields: ['radius']})||0;
       },
 
       getCardPath(custom_redirect_data = {}){
@@ -152,6 +248,7 @@
         else return null;
         //#endif
       },
+
       getEntrySetting(){
         this.$xdShowLoading({});
         jfbRootExec("getEntrySetting", {
@@ -159,8 +256,7 @@
           data: {
             group_id:this.entryType || 'default'
           }
-        }).then(res => {
-          this.loadingList = false;
+        }).then(async (res) => {
           this.$xdHideLoading();
           let isH5FilterEntryList = [];
           let isMpFilterEntryList = [];
@@ -226,6 +322,11 @@
               return item;
             });
 
+          //获取平均高度
+          let {width, height} = await this.getImageInfo(entryList);
+          this.width = width;
+          this.height = height;
+
           //#ifdef MP-WEIXIN
           console.warn(`微信小程序端被过滤的入口列表：${JSON.stringify(isMpFilterEntryList.map(item=> `${item.redirect_data.appType}:${item.entry_name}:${item.redirect_data['frontPath']}`),null,2)}`)
           //#endif
@@ -239,15 +340,18 @@
             this.toLink(entryList[0]);
             return
           }
+
           //无数据提示
           if(res.list.length === 0) {
             this.$xdAlert({content: '当前票券暂无支持服务'})
             return;
           }
+
           //复制
-          this.entryList = entryList;
+          this.entryList = entryList || [];
         })
       },
+
       toLink(item){
         let path = "";
         try{
@@ -271,11 +375,43 @@
 
 <style scoped lang="less">
   @import "./JfbBaseEntryLess.less";
-
+//:class="{rowNum1: rowNum ===1,rowNum2: rowNum ===2,rowNum3: rowNum ===3}"
   .jfb-base-entry {
     &__body{
       .entry_list{
-        display: grid;
+        &.rowNum1 {
+          & >view:first-child {
+            margin-top: 0!important;
+          }
+        }
+        &.rowNum2,&.rowNum3 {
+          display: flex;
+          justify-content: flex-start;
+          align-items: center;
+          flex-flow: wrap;
+        }
+
+        &.rowNum2 {
+          & > view:nth-child(1),& > view:nth-child(2) {
+            margin-top: 0!important;
+          }
+        }
+
+        &.rowNum2 > view:nth-child(2n) {
+          margin-right: 0!important;
+        }
+
+        &.rowNum3 > view:nth-child(3n) {
+          margin-right: 0!important;
+        }
+        &.rowNum3 {
+          & > view:nth-child(1),
+          & > view:nth-child(2),
+          & > view:nth-child(3) {
+            margin-top: 0!important;
+          }
+        }
+
         &.skeleton-wrap{
           .entry_item{
             .skeleton-item(100%, auto);

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

@@ -0,0 +1,77 @@
+'use strict';
+
+import {dataVal} from "@/utils/AttrTools";
+
+export default (data, gValue, gColor, oldData)=>{
+  let entryType = 'default'
+  if(data['entryType'] !== undefined) entryType = data['entryType']
+
+  let rowNum = 1;
+  if(data['rowNum'] !== undefined) rowNum = data['rowNum'];
+
+  return[
+    {
+      ele: 'title',
+      label: '基础',
+      size: 'small',
+      groupKey:'content',
+    },
+    {
+      label: '入口分组',
+      ele: 'xd-site-select-list',
+      valueKey: 'entryType',
+      value: entryType,
+      placeholder: '请选择综合入口分组',
+      multiple: false,
+      groupKey:'content',
+      className: 'input100',
+      labelInline:true,
+      rules: [
+        {required: true, message: '请选择综合入口分组', trigger: ['blur', 'change']}
+      ],
+      handleCustom({action, data}) {
+        XdBus.getParentApi('getEntryGroupOption')({key: Date.now()})
+          .then(res => {
+            debugger
+            data.cb(res.list)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+    {
+      ele: 'title',
+      label: '组件样式',
+      size: 'small',
+      groupKey:'content',
+    },
+
+    {
+      label: "组件样式",
+      ele: "xd-style-image",
+      groupKey: 'content',
+      valueKey: "rowNum",
+      value: rowNum,
+      labelInline:true,
+      className: 'input100',
+      handleCustom(cusRes) {
+        XdBus.getParentApi('getCompStylesOptions')({
+          layout_ids: 'gXd7Z5uu31nJpfZzlFgYz',
+          key: Date.now()
+        })
+          .then(res => {
+            res.list = res.list.map(item => {
+              item.value = Number(item.value)
+              return item;
+            })
+            cusRes.data.cb(res)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+
+  ].filter(i=>i)
+}

package/src/components/JfbBaseEntry/cusAttr/style.js

@@ -0,0 +1,288 @@
+'use strict';
+import {
+  dataVal ,
+  statusShow,
+  statusDataVal,
+  customVal,
+  cusDisabled ,
+  getCustomAttr,
+} from "@/utils/AttrTools";
+
+export default function (data, gValue, gColor, oldData) {
+  const width = 750, height = 1334;
+  return [
+    {
+      ele: 'title',
+      label: '常规',
+      size: 'small',
+      groupKey:'style',
+    },
+
+    {
+      label: '外边距',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'marginStatus',
+      value: statusDataVal({data, key:'marginStatus', fields:['margin'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '',
+      ele: 'xd-margin-padding',
+      groupKey:'style',
+      valueKey: 'margin',
+      value: dataVal({
+        data,
+        key:'margin',
+        dValue:0,
+        gValue,
+        isPM: true,
+      }),
+      hidden: !statusShow({data, key: 'marginStatus', fields:['margin'], gValue}),
+      setting: {
+        type: 'margin',
+      },
+    },
+    {ele: 'group_end'},
+
+    {
+      label: '圆角',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'radiusStatus',
+      value: statusDataVal({data, key:'radiusStatus', fields:['radius'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '无圆角', value: 'N'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '',
+      ele: 'xd-site-select-list',
+      labelInline: true,
+      valueKey: 'radius',
+      value: dataVal({data, key:'radius', dValue:'10', gValue}),
+      hidden: !statusShow({data, key: 'radiusStatus', fields:['radius'], gValue}),
+      placeholder: '请选择图标圆角',
+      multiple: false,
+      className: 'input80',
+      groupKey:'style',
+      handleCustom({action, data}) {
+        XdBus.getParentApi('getOptionsSettingList')({
+          setting_id: 'edtix_style_radius',
+          key: Date.now()
+        })
+          .then(res => {
+            let list = (res.list || [])
+              .filter(item=>{
+                return item.label !== '无'
+              });
+            data.cb(list)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+    {ele: 'group_end'},
+
+    {
+      ele: 'title',
+      label: '內容区',
+      size: 'small',
+      groupKey:'style',
+    },
+    {
+      label: '内容区背景',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'bgStatus',
+      value: statusDataVal({data, key:'bgStatus', fields:['bgcolor','bgImage'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '背景色',
+      ele: 'xd-color',
+      valueKey: 'bgcolor',
+      labelInline:true,
+      value: dataVal({data, key:'bgcolor', dValue:'rgba(0,0,0,0)', gValue}),
+      hidden: !statusShow({data, key: 'bgStatus', fields:['bgcolor','bgImage'], gValue}),
+      groupKey: 'style',
+      placeholder: '请输入背景颜色',
+      classNmae: 'input80',
+    },
+    {
+      label: '背景图',
+      ele: 'xd-upload',
+      labelInline: true,
+      valueKey: 'bgImage',
+      value: dataVal({
+        data,
+        key: 'bgImage',
+        dValue: {},
+        gValue,
+      }),
+      defaultValue: dataVal({
+        data,
+        key: 'bgImage',
+        dValue: {},
+        gValue,
+      }),
+      slot: true,
+      tipsformet: `<span style="font-size: 12px; color: #999">上传文件格式：@imageType@，不超过@size@MB.，建议宽度为：<span style="color:red">${width}*${height}</span></span>`,
+      type: ['jpg', 'png', 'jpeg'],
+      styleType: 'one',
+      uploadType: 'aliyun',
+      hidden: !statusShow({ data, key: 'bgStatus', fields: ['bgcolor', 'bgImage'], gValue }),
+      oneWidth: 200,
+      oneHeight: 200*height/width,
+      size: 5,
+      action: 'aliyun',
+      groupKey: 'style',
+    },
+    {ele: 'group_end'},
+
+    {
+      label: '内容区边距',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'paddingStatus',
+      value: statusDataVal({data, key:'paddingStatus', fields:['padding'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '',
+      ele: 'xd-margin-padding',
+      groupKey:'style',
+      valueKey: 'padding',
+      value: dataVal({
+        data,
+        key:'padding',
+        dValue:0,
+        gValue,
+        isPM: true,
+      }),
+      hidden: !statusShow({data, key: 'paddingStatus', fields:['padding'], gValue}),
+      setting: {
+        type: 'margin',
+      },
+    },
+    {ele: 'group_end'},
+
+    {
+      label: '内容间距',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'paddingInputStatus',
+      value: statusDataVal({data, key:'paddingInputStatus', fields:['paddingInput'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: "",
+      groupKey: 'style',
+      ele: 'xd-slider',
+      valueKey: "paddingInput",
+      value: dataVal({data, key:'paddingInput', dValue:gValue.isFirst && gValue.isAdd ? 16: 20, gValue}),
+      hidden: !statusShow({data, key: 'paddingInputStatus', fields:['paddingInput'], gValue}),
+      className: "input80",
+      labelInline: true,
+      setting:{
+        min: 0,
+        max: 60,
+        step:1,
+        showStops:false,
+        showInput:false,
+      }
+    },
+    {ele: 'group_end'},
+
+    {
+      label: '内容圆角',
+      ele: 'xd-radio',
+      groupKey: 'style',
+      valueKey: 'contRadiusStatus',
+      value: statusDataVal({data, key:'contRadiusStatus', fields:['contRadius'],gValue}),
+      labelInline:true,
+      list: [
+        {label: '默认', value: 'D'},
+        {label: '无圆角', value: 'N'},
+        {label: '自定义', value: 'C'},
+      ]
+    },
+    {ele: 'group_start'},
+    {
+      label: '',
+      ele: 'xd-site-select-list',
+      labelInline: true,
+      valueKey: 'contRadius',
+      value: dataVal({data, key:'contRadius', dValue:'10', gValue}),
+      hidden: !statusShow({data, key: 'contRadiusStatus', fields:['contRadius'], gValue}),
+      placeholder: '请选择图标圆角',
+      multiple: false,
+      className: 'input80',
+      groupKey:'style',
+      handleCustom({action, data}) {
+        XdBus.getParentApi('getOptionsSettingList')({
+          setting_id: 'edtix_style_radius',
+          key: Date.now()
+        })
+          .then(res => {
+            let list = (res.list || [])
+              .filter(item=>{
+                return item.label !== '无'
+              });
+            data.cb(list)
+          })
+          .catch(error => {
+            console.error(error);
+          });
+      },
+    },
+    {ele: 'group_end'},
+
+
+
+    {
+      label: '版本号:',
+      ele: 'el-input',
+      type: 'text',
+      groupKey: 'content',
+      valueKey: 'version',
+      value: 'v2.0',
+      hidden: true,
+    },
+    {
+      label: '过滤引用模版字段:',
+      ele: 'el-input',
+      type: 'text',
+      groupKey: 'content',
+      valueKey: 'refFilterKey',
+      value: '[]',
+      hidden: true,
+    },
+  ].filter(i=>i);
+}
+