jufubao-base 1.0.135 → 1.0.136

package/src/components/JfbBasePoster/Attr.js

@@ -8,15 +8,15 @@ import console from "@dcloudio/uni-h5/src/core/helpers/console";
 export default {
   style:[],
   content:(params)=>{
-    console.log(params,'anananananana');
     if(!params['isCarousel']) params['isCarousel'] = 1;
     return [
       {
-        label: '广告位置配置:', //label
-        ele: 'xd-site-poster', //package 名称
-        valueKey: 'poster', //form[valueKey]
+        label: '广告位置配置:',
+        ele: 'xd-site-poster',
+        valueKey: 'poster',
         className: 'input80',
         value: params.poster || {},
+        groupKey:'content',
         setting: {
           count: 1,
           scene: {label: '广告', value: 'normal'}
@@ -215,82 +215,49 @@ export default {
             loading.close()
           }
         },
-        inline: false,
-        notice: '',
-        rules: [
-          {required: true, message: '请选择广告位置', trigger: 'change'},
-        ],
-      },
-      {
-        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">单位：像素（px）</span>。默认值：<span style="color: red">0</span>像素',
+        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']
+        }],
       },
-      params.poster && params.poster['type']&& params.poster['type'] !== '1' &&{
-        label: '广告位填充设置:',
-        ele: 'xd-margin-padding',
-        valueKey: 'bgImagePadding',
-        value: params['bgImagePadding'] || null,
-        disabled: false,
-        setting: {
-          type: 'padding',
-        },
-        placeholder: '请填充设置',
-        inline: false,
-        notice: '设置内填充，<span style="color: red">单位：像素（px）</span>。无背景时候默认值：<span style="color: red">20</span>像素。有背景时候默认值：<span style="color: red">20</span>像素。',
-      },
-      params.poster &&  params.poster['type'] &&params.number > 1 && {
-        label: '广告内容之间间距设置:',
-        ele: 'el-input',
-        type: 'number',
-        valueKey: 'padding',
-        value: params.padding || 0,
-        className: 'input40',
-        placeholder: '请广告内容之间间距设置',
-        notice: '请广告内容之间间距设置。<span style="color: red">单位：像素（px）</span>。默认值：<span style="color: red">0</span>像素',
-        inline: false,
-      },
-      {
-        label: '广告圆角设置:',
-        ele: 'xd-site-select-list',
-        valueKey: 'radius',
-        value: params['radius'] || '20',
-        placeholder: '请选择广告圆角设置',
-        multiple: false,
-        className: 'input80',
-        handleCustom({action, data}) {
-          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
-            .then(res => {
-              data.cb(res.list)
-            })
-            .catch(error => {
-              console.error(error);
-            });
-        },
+      params['isCarousel']=== 2 && (params.poster && params.poster['type'] && params.poster['type'] === '1') && {
+        label: '是否启用配套背景:',
+        ele: 'xd-radio',
+        valueKey: 'isSupport',
+        value: params['isSupport'] || 'Y',
+        groupKey:'style',
+        list: [
+          {"label": "启用", "value": 'Y'},
+          {"label": "禁用", "value": 'N'},
+        ]
       },
       {
         ele: 'title',
         label: '广告位参数配置',
-        size: 'small', //default/mini/small
+        size: 'small',
+        groupKey:'content',
       },
       params.poster && params.poster['type']&& params.poster['type'] !== '1' && {
         label: '广告背景图:',
         ele: 'xd-upload',
         valueKey: 'background',
+        groupKey:'content',
         value: params.background || {},
         defaultValue: params.background || null,
         slot: true,
@@ -311,6 +278,7 @@ export default {
         ele: 'el-input',
         type: 'number',
         valueKey: 'number',
+        groupKey:'content',
         value: params.number || 1,
         placeholder: '请输入广告位置使用张数',
         className: 'input40',
@@ -328,6 +296,7 @@ export default {
         ele: 'xd-radio',
         valueKey: 'isCarousel',
         value: params['isCarousel'] || 1,
+        groupKey:'content',
         rules: [
           {required: true, message: '请选择广告位显示方式', trigger: ['blur', 'change']}
         ],
@@ -340,7 +309,7 @@ export default {
         label: '广告位轮播周期:',
         ele: 'el-input',
         type: 'number',
-        isKey: true,
+        groupKey:'content',
         valueKey: 'carouselTime',
         value: params.carouselTime || 5,
         placeholder: '请输入广告位轮播周期，单位秒',
@@ -355,10 +324,11 @@ export default {
         ]
       },
       params['isCarousel'] === 2 && {
-        label: '广告显示dot类型:', //label
-        ele: 'xd-select-list', //package 名称
-        valueKey: 'dot_type', //form[valueKey]
-        value: params['dot_type'] || 'dot', //v-model
+        label: '广告显示dot类型:',
+        ele: 'xd-select-list',
+        valueKey: 'dot_type',
+        value: params['dot_type'] || 'dot',
+        groupKey:'content',
         placeholder: '请选择广告显示dot类型',
         multiple: false,
         className: 'input80',
@@ -376,6 +346,7 @@ export default {
         label: '广告位内容显示行数:',
         ele: 'xd-radio',
         valueKey: 'rows',
+        groupKey:'content',
         value: params.rows || 1,
         list: [
           {"label": "一行", "value": 1},
@@ -383,16 +354,65 @@ export default {
           {"label": "三行", "value": 3},
         ]
       },
-      params['isCarousel']===2 && params['rows'] === 1 && {
-        label: '是否启用配套背景:',
-        ele: 'xd-radio',
-        valueKey: 'isSupport',
-        value: params['isSupport'] || 'Y',
-        list: [
-          {"label": "启用", "value": 'Y'},
-          {"label": "禁用", "value": 'N'},
-        ]
+      {
+        label: '广告位边距设置:',
+        ele: 'xd-margin-padding',
+        valueKey: 'margin',
+        groupKey:'style',
+        value: params.margin || null,
+        setting: {
+          type: 'margin',
+        },
+        placeholder: '请设置广告位边距设置',
+        inline: false,
+        notice: '设置边距充，<span style="color: red">单位：像素（px）</span>。默认值：<span style="color: red">0</span>像素',
+
       },
+      {
+        label: '广告位填充设置:',
+        ele: 'xd-margin-padding',
+        valueKey: 'bgImagePadding',
+        value: params['bgImagePadding'] || null,
+        groupKey:'style',
+        setting: {
+          type: 'padding',
+        },
+        placeholder: '请填充设置',
+        inline: false,
+        notice: '设置内填充，<span style="color: red">单位：像素（px）</span>。无背景时候默认值：<span style="color: red">20</span>像素。有背景时候默认值：<span style="color: red">0</span>像素。',
+      },
+      params.poster &&  params.poster['type'] && params.number > 1 && {
+        label: '广告内容之间间距设置:',
+        ele: 'el-input',
+        type: 'number',
+        valueKey: 'padding',
+        value: params.padding || 0,
+        groupKey:'style',
+        className: 'input40',
+        placeholder: '请广告内容之间间距设置',
+        notice: '请广告内容之间间距设置。<span style="color: red">单位：像素（px）</span>。默认值：<span style="color: red">0</span>像素',
+        inline: false,
+      },
+      {
+        label: '广告圆角设置:',
+        ele: 'xd-site-select-list',
+        valueKey: 'radius',
+        groupKey:'style',
+        value: params['radius'] || '20',
+        placeholder: '请选择广告圆角设置',
+        multiple: false,
+        className: 'input80',
+        handleCustom({action, data}) {
+          XdBus.getParentApi('getOptionsSettingList')({setting_id: 'edtix_style_radius'})
+            .then(res => {
+              data.cb(res.list)
+            })
+            .catch(error => {
+              console.error(error);
+            });
+        },
+      },
+
     ].filter(i=>i)
   },
   advanced: [

package/src/components/JfbBasePoster/JfbBasePoster.vue

@@ -13,82 +13,77 @@
       <view class="jfb-base-poster__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view
-			class="jfb-base-poster__body"
-			v-if="noData"
-			:style="{
-				margin: margin,
-        backgroundImage: background?`url(${getBgImage})`:'none',
-        backgroundSize: '100%',
-        backgroundRepeat: 'no-repeat',
-        padding: outPadding
-			}
-		">
-			<!--一分屏-->
-			<template v-if="posterType === '1'">
-				<view
-					v-if="isCarousel === 1"
-					class="jfb-base-poster__one notCarousel"
-					:style="{
-						width: width + 'rpx',
-						height: outOneHeight + 'rpx',
-					}"
-				>
-					<view
+    <view class="jfb-base-poster__body" v-if="noData">
+      <view class="x-line"></view>
+
+      <view class="jfb-base-poster-cont" :style="getBodyStyle">
+        <!--一分屏-->
+        <template v-if="posterType === '1'">
+          <view
+            v-if="isCarousel === 1"
+            class="jfb-base-poster__one notCarousel"
+            :style="{
+              width: getOneWidth + 'rpx',
+            }"
+          >
+            <view
+              :style="{
+                width: getOneWidth + 'rpx',
+                height: getOneHeight + 'rpx',
+                borderRadius: (posterType === '1' ? radius: 0) + 'rpx',
+                marginBottom: padding + 'rpx'
+              }"
+              @click="handleClick(item)"
+              v-for="(item,index) in info"
+              :key="index"
+            >
+              <image :src="item.image_url" mode="aspectFill"></image>
+            </view>
+          </view>
+          <view
+            v-else
+            class="jfb-base-poster__one carousel"
             :style="{
-            	width: width + 'rpx',
-              height: height + 'rpx',
+              width: getOneWidth + 'rpx',
+              height: getOneHeight + 'rpx',
               borderRadius: (posterType === '1' ? radius: 0) + 'rpx',
-              marginBottom: padding + 'rpx'
             }"
-            @click="handleClick(item)"
-            v-for="(item,index) in info"
-            :key="index"
           >
-						<image :src="item.image_url" mode="aspectFill"></image>
-					</view>
-				</view>
-				<view
-					v-else
-					class="jfb-base-poster__one carousel"
-					:style="{
-						width: width + 'rpx',
-						height: height + 'rpx',
-						borderRadius: (posterType === '1' ? radius: 0) + 'rpx',
-					}"
-				>
-					<xd-swiper-dot
-            v-if="pageSwiperShow"
-						:current="current"
-						:info="info"
-						field="content_name"
-						:mode="mode"
-						:dots-styles="dotStyleData"
-					>
-						<xd-swiper
-							:indicator-dots="false"
-							:list="info"
-							:current="current"
-							:width=" width + 'rpx'"
-							:height="height + 'rpx'"
-              :interval="carouselTime"
-							@onClickItem="handleClick"
-							@animationfinish="handleAnimationfinish"
-						>
-							<template slot-scope="{ item, index}">
-								<image :src="item['image_url']" mode="aspectFill"></image>
-							</template>
-						</xd-swiper>
-					</xd-swiper-dot>
-					<view v-if="isPreview" class="carousel-mask"></view>
-				</view>
-			</template>
-			<!--一分屏-->
-			<more-screen
-				v-if="posterType !== '1'"
-				:config="getConfig"
-				:content="info"
-			></more-screen>
+            <xd-swiper-dot
+              v-if="pageSwiperShow"
+              :current="current"
+              :info="info"
+              field="content_name"
+              :mode="mode"
+              :dots-styles="dotStyleData"
+            >
+              <xd-swiper
+                :indicator-dots="false"
+                :list="info"
+                :current="current"
+                :width=" getOneWidth + 'rpx'"
+                :height="getOneHeight + 'rpx'"
+                :interval="carouselTime"
+                @onClickItem="handleClick"
+                @animationfinish="handleAnimationfinish"
+              >
+                <template slot-scope="{ item, index}">
+                  <image :src="item['image_url']" mode="aspectFill"></image>
+                </template>
+              </xd-swiper>
+            </xd-swiper-dot>
+            <view v-if="isPreview" class="carousel-mask"></view>
+          </view>
+        </template>
+        <!--一分屏-->
+        <!--多分屏-->
+        <more-screen
+          v-if="posterType !== '1'"
+          :config="getConfig"
+          :content="info"
+        ></more-screen>
+        <!--多分屏-->
+      </view>
     </view>
     <!--解决图片缓冲预加载问题-->
     <view v-for="(item,index) in info" :key="index" style="position: absolute; top: -19999px; left: -100000px">
@@ -145,49 +140,47 @@
         rows: 1, //四分屏起作用
         radius: 0,
 				timer: null,
-        isSupport: 'Y',
+        isSupport: 'N',
         currentImage: '',
 				info: [],
-        mS: {
-          top: 0,
-					bottom: 0,
-					left: 0,
-					right: 0
-				},
+        mS: {},//边距
+        bgImagePadding:{},//填充
 				isPreview: false,
 				noData:false,
         background: '',
-
-				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
-        }
       }
     },
 		computed: {
+      getBodyStyle(){
+        let image = {};
+        if(this.background) image = {
+          backgroundImage: `url(${this.getBgImage})`,
+          backgroundSize: '100%',
+          backgroundRepeat: 'no-repeat',
+        }
+        return {
+          ...image,
+          margin: this.margin,
+          padding: this.outPadding
+        }
+      },
+      getOneWidth(){
+        let margin = this.checkValue(this.mS.left, 0) +  this.checkValue(this.mS.right, 0);
+        let padding = this.checkValue(this.bgImagePadding.left, 20) +  this.checkValue(this.bgImagePadding.right, 20);
+        return 750 - (margin + padding);
+      },
+      getOneHeight(){
+        return this.getOneWidth * this.height / this.width
+      },
       getConfig(){
         let cell = this.posterType === '2' ? 2: (this.posterType === '3' ? 3 : 4);
         let spacing = Math.floor((cell - 1) * this.padding * this.$rpxNum);
-        let padding = 0;
-        if(this.background === 'none' || this.$xdUniHelper.isEmpty(this.background)) padding = 20;
-        let addPadding = ((this.bgImagePadding.right !== null? this.bgImagePadding.right:padding) +
-          (this.bgImagePadding.left !== null? this.bgImagePadding.left : padding)) * this.$rpxNum;
-        let viewWidth = uni.getSystemInfoSync().safeArea.width - ((this.mS.right || 0) + (this.mS.left || 0)) * this.$rpxNum - addPadding - spacing;
-        if(this.$configProject.isPreview) viewWidth -= 2;
+        let paddingDefault = 0;
+        if(this.background === 'none' || this.background === '' || this.$xdUniHelper.isEmpty(this.background)) paddingDefault = 20;
+        let addPadding = this.checkValue(this.bgImagePadding.right, paddingDefault) +  this.checkValue(this.bgImagePadding.left, paddingDefault);
+        addPadding = addPadding * this.$rpxNum;
+        let margin = (this.checkValue(this.mS.right, 0) + this.checkValue(this.mS.left, 0)) *  this.$rpxNum;
+        let viewWidth = uni.getSystemInfoSync().safeArea.width -margin - addPadding - spacing;
         let width = Math.floor(viewWidth / cell);
         let height = this.height * width / this.width;
         return {
@@ -206,8 +199,27 @@
 				}
 			},
       margin(){
-        return `${this.mS.top||0}rpx ${this.mS.right||0}rpx ${this.mS.bottom||0}rpx ${this.mS.left||0}rpx`
+        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;
 			},
+      outPadding(){
+        try {
+          let defaultvalue = 0;
+          if(!this.background || this.background === 'none' || this.$xdUniHelper.isEmpty(this.background)) defaultvalue = 20;
+          if(this.posterType === '1') defaultvalue = 20;
+          let str = `${this.checkValue(this.bgImagePadding.top, defaultvalue)}rpx`;
+          str = `${str} ${this.checkValue(this.bgImagePadding.right, defaultvalue)}rpx`;
+          str = `${str} ${this.checkValue(this.bgImagePadding.bottom, defaultvalue)}rpx`;
+          str = `${str} ${this.checkValue(this.bgImagePadding.left,defaultvalue)}rpx`;
+          return str;
+        } catch (error) {
+          return 0
+        }
+
+      },
 			getMode(){
         let mode = this.mode;
         if (this.posterType !== '1') {
@@ -221,9 +233,7 @@
       dotStyleData(){
         let alpha = 1;
         if(this.posterType === '1') alpha = 0.6;
-
 				let selectedColor = `rgba(${color(this.mainColor).alpha(alpha).array().join(',')})`;
-				console.log('selectedColor',selectedColor, this.mode, this.posterType);
         let style = {
           dot: {
             backgroundColor: 'rgba(166,166,166,.5)',
@@ -282,24 +292,11 @@
         }
         return bg
       },
-      outPadding(){
-        try {
-          let defaultvalue = 0;
-        if(this.background === 'none' || this.$xdUniHelper.isEmpty(this.background)) defaultvalue = 20
-        console.log(this.bgImagePadding,'this.paddingthis.paddingthis.padding');
-        let padding = `${this.bgImagePadding.top !== null ? this.bgImagePadding.top : defaultvalue}rpx`;
-        padding = `${padding} ${this.bgImagePadding.right !== null ? this.bgImagePadding.right : defaultvalue}rpx`;
-        padding = `${padding} ${this.bgImagePadding.bottom !== null ? this.bgImagePadding.bottom : defaultvalue}rpx`;
-        padding = `${padding} ${this.bgImagePadding.left !== null ? this.bgImagePadding.left : defaultvalue}rpx`;
-        return padding;
-        } catch (error) {
-          console.log(error,'amamamam');
-        }
 
-      },
 		},
     watch: {
-      container(value) {
+      container(value, oloValue) {
+        if(JSON.stringify(value) === JSON.stringify(oloValue)) return;
         this.init(value);
         if(this.timer) clearTimeout(this.timer);
         this.timer = setTimeout(()=>{
@@ -351,7 +348,7 @@
       getTestData(){
         let temp = [];
         for (let i = 0; i< this.useNumber; i++) {
-          let item = this.$xdUniHelper.cloneDeep(this.test);
+          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}`;
@@ -360,11 +357,8 @@
         return temp
 			},
       handleAnimationfinish(e) {
-
-
         //不支持背景不处理
         if(this.isSupport==='N') return;
-
         console.warn(`handleAnimationfinish.start`)
         this.pageSwiperShow = this.$root.$isShow;
 
@@ -451,11 +445,6 @@
         this.currentImage = this.info[current]['image_background_url']
         if(this.isSupport==='Y' && this.rows===1 && this.isCarousel===2) {
           this.$xdRoot.$emit("setLayoutPageBg", this.currentImage);
-        }
-			},
-			getDefualtValue(key){
-        if (key === 'margin') {
-          return {top: 0, bottom: 0, left: 0, right: 0}
         }
 			},
 
@@ -471,17 +460,18 @@
         if(this.poster.position) {
           this.posterPosition = this.poster.position
 				}
+        this.isCarousel = getContainerPropsValue(container, 'content.isCarousel', 1);
         this.radius = getContainerPropsValue(container, 'content.radius', 0);
         this.padding = getContainerPropsValue(container, 'content.padding', 0);
         this.rows = getContainerPropsValue(container, 'content.rows', 1);
-        this.isSupport = getContainerPropsValue(container, 'content.isSupport', 'Y');
-        this.mS = getContainerPropsValue(container, 'content.margin', this.getDefualtValue('margin'));
-        this.background = getContainerPropsValue(container, "content.background", 'none');
-        this.bgImagePadding = getContainerPropsValue(container, 'content.bgImagePadding', {top: 20, left: 20, right: 20, bottom: 20});
+        if(this.posterType === '1' && this.isCarousel === 2) this.isSupport = getContainerPropsValue(container, 'content.isSupport', 'Y');
+        this.mS = getContainerPropsValue(container, 'content.margin', {});
+        this.background = getContainerPropsValue(container, "content.background", '');
+        this.bgImagePadding = getContainerPropsValue(container, 'content.bgImagePadding', {});
         //content
 
         this.mode = getContainerPropsValue(container, 'content.dot_type', 'dot');
-        this.isCarousel = getContainerPropsValue(container, 'content.isCarousel', 1);
+
         this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime', 5)) * 1000;
         this.useNumber = getContainerPropsValue(container, 'content.number', 1);
 
@@ -566,11 +556,14 @@
 
   .jfb-base-poster {
     &__body{
-			box-sizing: border-box;
-			overflow: hidden;
-			justify-content: center;
-			align-items: center;
-			display: flex;
+      & > view.jfb-base-poster-cont {
+        box-sizing: border-box;
+        overflow: hidden;
+        justify-content: center;
+        align-items: center;
+        display: flex;
+      }
+
     }
 		&__one.notCarousel {
 			position: relative;