jufubao-base 1.0.132-beta1 → 1.0.132-beta2

package/src/components/JfbBasePosterEntry/JfbBasePosterEntry.vue

@@ -13,15 +13,15 @@
       <view class="jfb-base-poster-entry__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view class="jfb-base-poster-entry__body">
+    <view class="jfb-base-poster-entry__body" v-if="noData === false && entry !== null">
+      <view class="x-line"></view>
       <view
         class="jfb-base-poster-entry__body-box"
         :class="{
           one: type ==='1',
           two: type ==='2'
          }"
-        v-if="noData === false && entry !== null"
-        :style="{margin: marginOut}"
+        :style="{margin: marginUi}"
       >
         <view
           v-for="item in list"
@@ -41,7 +41,6 @@
           ></image>
         </view>
       </view>
-
     </view>
   </view>
 </template>
@@ -65,6 +64,7 @@
       return {
         noData: false,
         entry: null,
+        params:{},
 
         //style
         type:'1',
@@ -73,39 +73,12 @@
         radius: '0',
         useNumber: 0,
         padding: 0,
-        margin: {
-          top: 0,
-          bottom: 0,
-          left: 0,
-          right: 0
-        },
-        list: [],
+        margin: {},
 
-        //测试数据
-        test: {
-          "content_id": "KpBbUKdj4aBejwe7Fh1ki",
-          "position_id": "QCk3PmoyQmOWRP1SxnYR3",
-          "partner_id": 0,
-          "site_id": "",
-          "content_name": "测试.",
-          "image_url": "//dummyimage.com/200x200",
-          "redirect_type": "EMP",
-          "redirect_type_name": "无链接",
-          "redirect_data": "",
-          "sort": "",
-          "status": "",
-          "start_time": "",
-          "end_time": "",
-          "op_user_id": "",
-          "created_time": 0,
-          "updated_time": 0
-        }
+        list: [],
       }
     },
     computed:{
-      marginOut(){
-        return `${this.margin.top || 0}rpx ${this.margin.right || 0}rpx ${this.margin.bottom || 0}rpx ${this.margin.left || 0}rpx`
-      },
       marginRightIn(){
         if (this.entry.type === '1') {
           return 0;
@@ -121,11 +94,28 @@
           let margin = Number(this.margin.left + this.margin.right) * this.$rpxNum;
           return `calc(50% - ${padding}px)`
         }
+      },
+      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
       }
     },
     watch: {
-      container(value) {
-        if (this.$configProject['isPreview']) this.init(value)
+      container(value,oloValue) {
+        if(JSON.stringify(value) === JSON.stringify(oloValue)) return;
+        if (this.$configProject['isPreview']){
+          this.init(value);
+          this.onJfbLoad(this.params)
+        }
+      },
+
+      useNumber(){
+        if (this.$configProject['isPreview']){
+          this.onJfbLoad(this.params)
+        }
       }
     },
     created() {
@@ -186,8 +176,8 @@
 
       getTestData() {
         let temp = [];
-        for (let i = 0; i < this.useNumber; i++) {
-          let item = this.$xdUniHelper.cloneDeep(this.test);
+        for (let i = 0; i < (this.useNumber); i++) {
+          let item = this.$xdUniHelper.cloneDeep(this['posterTest']);
           item.content_id = i;
           item.content_name = item.content_name + i;
           item.image_url = `//dummyimage.com/${this.width}x${this.height}`;
@@ -207,7 +197,6 @@
           },
         })
           .then(res => {
-            console.log('getListPosterContent', res)
             if (res.list.length === 0 && this.$configProject.isPreview) {
               res.list = this.getTestData();
             }
@@ -218,13 +207,18 @@
                 image_url: getServiceUrl(item.image_url)
               }
             });
-            if(list.length > 0 && list.length%2 !==0) {
-              list.push({
-                ...this.$xdUniHelper.cloneDeep(this.test),
-                typeEmpty: true
-              })
+
+            //当使用2分屏并且返回当列表长度为奇数，需要补全
+            if(this.type === '2') {
+              if(list.length > 0 && list.length%2 !==0) {
+                list.push({
+                  ...this.$xdUniHelper.cloneDeep(this['posterTest']),
+                  typeEmpty: true
+                })
+              }
             }
 
+
             this.list = list;
             this.noData = this.list.length === 0;
           })
@@ -232,20 +226,21 @@
             console.error(error)
           })
       },
+
+
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
         this.useNumber = getContainerPropsValue(container, 'content.number', 1);
-        this.radius = getContainerPropsValue(container, 'content.radius', '0');
-        this.padding = getContainerPropsValue(container, 'content.padding', '0');
-        this.margin = getContainerPropsValue(container, 'content.margin', { top: 0, bottom: 0, left: 0, right: 0});
-
+        this.radius = getContainerPropsValue(container, 'content.radius', '20');
+        this.padding = getContainerPropsValue(container, 'content.padding', '20');
+        this.margin = getContainerPropsValue(container, 'content.margin', { });
         this.entry = getContainerPropsValue(container, 'content.entry', null);
         if(this.entry !== null) {
-          this.width = this.entry.size.width;
-          this.height = this.entry.size.height;
+          this.width = this.checkValue(this.entry.size.width, 750);
+          this.height = this.checkValue(this.entry.size.height, 320);
           this.type = this.entry.type;
         }
       },

package/src/components/JfbBasePosterEntry/JfbBasePosterEntryLess.less

@@ -13,9 +13,8 @@
 
 //start
 .jfb-base-poster-entry {
-  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(50, rpx);
+  min-height: unit(100, rpx);
 
   &__body{
       position: relative;
@@ -23,21 +22,21 @@
       z-index: 2
   }
 
-  &.editx {
+  &.editx,&:hover {
     position: relative;
-    border: 1px dashed blue;
-    box-sizing: border-box;
-    z-index: 3
-
-  }
-
-  &:hover {
-    border: 1px dashed blue;
-  }
+    z-index: 3;
+    &::after {
+      border: 2rpx dashed blue;
+      content: " ";
+      position: absolute;
+      top:0;
+      left:0;
+      bottom:0;
+      right:0;
+      z-index: 4;
+      cursor: pointer;
+    }
 
-  &.noBorder {
-    border-color: rgba(0,0,0,0);
-    border-width: 0;
   }
 
 
@@ -72,9 +71,9 @@
 
 /**notPreview**/
 .jfb-base-poster-entry {
-  &:before {
-    content: " ";
-    display: table;
-  }
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
 }
 /**endNotPreview**/

package/src/components/JfbBasePosterType/Attr.js

@@ -17,15 +17,15 @@ export default {
     if (!params['carouselTime']) params['carouselTime'] = 5;
     return [
       {
-        label: '导航配置:', //label
-        ele: 'xd-site-poster', //package 名称
-        valueKey: 'nav', //form[valueKey]
+        label: '导航配置:',
+        ele: 'xd-site-poster',
+        valueKey: 'nav',
         className: 'input80',
+        groupKey:'content',
         value: params.nav || {
           size:  {height: 200, width: 200},
           type: '1'
         },
-        disabled: false,
         setting: {
           count: 1,
           disabled: true,
@@ -228,17 +228,33 @@ export default {
             loading.close()
           }
         },
-        inline: false,
-        notice: '',
-        rules: [
-          {required: true, message: '请选择广告位置', trigger: 'change'},
-        ],
+        rules: [{
+          required: true,
+          validator: (rule, value, callback) => {
+            let message = '请设置导航相关内容';
+            if(!value) {
+              callback(message);
+              return;
+            }
+            if(value.size && !value.size.height){
+              callback(message);
+              return
+            }
+
+            if(value.size && !value.size.width){
+              callback(message);
+              return
+            }
+            callback()
+          },trigger: ['blur', 'change']
+        }],
       },
       {
         label: '导航显示方式:',
         ele: 'xd-radio',
         valueKey: 'isCarousel',
         value: params['isCarousel'],
+        groupKey:'content',
         rules: [
           {required: true, message: '请选择导航显示方式', trigger: ['blur', 'change']}
         ],
@@ -252,10 +268,11 @@ export default {
         ele: 'el-input',
         type: 'number',
         isKey: true,
+        groupKey:'content',
         valueKey: 'carouselTime',
         value: params.carouselTime,
         placeholder: '请输入导航轮播周期，单位秒',
-        className: 'input40',
+        className: 'input60',
         unit: '秒',
         rules: [
           {
@@ -269,8 +286,9 @@ export default {
         label: '导航内容显示列数:',
         ele: 'xd-select-list',
         valueKey: 'cells',
+        groupKey:'content',
         value: params.cells,
-        className: 'input80',
+        className: 'input60',
         list: [
           {"label": "四列", "value": 4},
           {"label": '五列', "value": 5},
@@ -280,22 +298,42 @@ export default {
         label: '导航内容显示行数:',
         ele: 'xd-select-list',
         valueKey: 'jdRows',
+        groupKey:'content',
         value: params.jdRows,
-        className: 'input80',
+        className: 'input60',
         list: [
           {"label": "一行", "value": 1},
           {"label": "两行", "value": 2},
           {"label": "三行", "value": 3},
         ]
       },
+      {
+        label: '导航内容置使用张数:',
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'number',
+        groupKey:'content',
+        value: params.number,
+        placeholder: '请输入导航内容置使用张数',
+        className: 'input60',
+        unit:'张',
+        rules: [
+          {
+            required: true,
+            message: '请输入导航内容置使用张数',
+            trigger: 'blur'
+          },
+        ]
+      },
       {
         label: '导航ICON圆角设置:',
         ele: 'xd-site-select-list',
         valueKey: 'radius',
         value: params['radius'],
+        groupKey:'style',
         placeholder: '请选择导航ICON圆角设置',
         multiple: false,
-        className: 'input80',
+        className: 'input60',
         handleCustom({action, data}) {
           XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
             .then(res => {
@@ -310,65 +348,48 @@ export default {
         label: '导航ICON是否阴影设置:',
         ele: 'xd-radio',
         valueKey: 'shadow',
+        groupKey:'style',
         value: params['shadow'],
         placeholder: '请选择导航ICON阴影设置',
-        className: 'input80',
+        className: 'input60',
         list: [
           {"label": "是", "value": 1},
           {"label": "否", "value": 2},
         ]
       },
-      {
-        label: '导航内容置使用张数:',
-        ele: 'el-input',
-        type: 'number',
-        valueKey: 'number',
-        value: params.number,
-        placeholder: '请输入导航内容置使用张数',
-        className: 'input40',
-        unit:'张',
-        rules: [
-          {
-            required: true,
-            message: '请输入导航内容置使用张数',
-            trigger: 'blur'
-          },
-        ]
+      params['shadow'] === 1&& {
+        label: '导航ICON阴影颜色配置:',
+        ele: 'xd-color',
+        valueKey: 'shadowColor',
+        groupKey:'style',
+        value: params['shadowColor'] || '',
+        placeholder: '导航ICON阴影颜色配置',
+        classNmae: 'input60',
       },
       {
         ele: 'title',
         label: '样式设置',
-        size: 'small', //default/mini/small
-      },
-      {
-        label: '内容设置外边距:',
-        ele: 'xd-margin-padding',
-        valueKey: 'margin',
-        value: params.margin || null,
-        disabled: false,
-        setting: {
-          type: 'margin',
-        },
-        placeholder: '请设置外边距',
-        inline: false,
-        notice: '设置外边距，<span style="color: red">单位：像素</span>。默认值：0像素',
+        size: 'small',
+        groupKey:'style',
       },
       {
         label: '背景颜色:',
         ele: 'xd-color',
         valueKey: 'bgColor',
+        groupKey:'style',
         value: params['bgColor'] || '',
         placeholder: '请选择背景颜色',
-        classNmae: 'input80',
+        classNmae: 'input60',
       },
       {
         label: '背景圆角设置:',
         ele: 'xd-site-select-list',
         valueKey: 'bgRadius',
         value: params['bgRadius'],
+        groupKey:'style',
         placeholder: '请选择背景圆角设置',
         multiple: false,
-        className: 'input80',
+        className: 'input60',
         handleCustom({action, data}) {
           XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
             .then(res => {
@@ -383,11 +404,24 @@ export default {
         label: '文字颜色:',
         ele: 'xd-color',
         valueKey: 'textColor',
+        groupKey:'style',
         value: params['textColor'] || '',
-        placeholder: '请选择背景颜色',
+        placeholder: '请选择文字颜色',
         classNmae: 'input80',
       },
-
+      {
+        label: '内容设置外边距:',
+        ele: 'xd-margin-padding',
+        valueKey: 'margin',
+        groupKey:'style',
+        value: params.margin || null,
+        setting: {
+          type: 'margin',
+        },
+        placeholder: '请设置外边距',
+        inline: false,
+        notice: '设置外边距，<span style="color: red">单位：像素</span>。默认值：<span style="color: red">0</span> 像素',
+      },
     ].filter(i=>i)
   },
   advanced: [

package/src/components/JfbBasePosterType/FourScreen.vue

@@ -22,7 +22,7 @@
 				<view :style="{ height: height + 'px', width:width}">
 					<view :style="{
 						borderRadius: config.radius  + 'rpx',
-						boxShadow: config.shadow === 1? `0 0 8rpx rgba(0, 0, 0, .3)` : '',
+						boxShadow: config.shadow === 1? `0 0 8rpx ${config.shadowColor}` : '',
 					}">
 						<image :src="item.image_url"></image>
 					</view>
@@ -64,7 +64,7 @@
 								v-for="it in item"
 								:key="it['content_id']"
 								:style="{
-									height: (height) + 'px'
+									height: boxHeight + 'px'
 								}"
 								@click="handleClick(it)"
 							>
@@ -126,6 +126,9 @@
 			rpxText(){
         return this.$rpxNum * this.text
 			},
+      boxHeight(){
+        return  this.height + this.$rpxNum * this.text;
+      }
 		},
     watch: {
       config() {
@@ -172,6 +175,7 @@
         }, 100)
       },
       handleClick(item) {
+        debugger
         //内部链接跳转地址
         if (item.redirect_type === 'INN') {
           try {
@@ -244,6 +248,7 @@
 			display: flex;
 			justify-content: flex-start;
 			align-items: flex-start;
+      align-content: flex-start;
 			flex-wrap: wrap;
 			overflow: hidden;
 
@@ -343,6 +348,7 @@
 			display: flex;
 			justify-content: flex-start;
 			align-items: flex-start;
+      align-content: flex-start;
 			flex-wrap: wrap;
 			overflow: hidden;