jufubao-base 1.0.132-beta1 → 1.0.132-beta2

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;
 
@@ -456,11 +450,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}
         }
 			},
 
@@ -476,17 +465,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);
 
@@ -571,11 +561,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;

package/src/components/JfbBasePoster/JfbBasePosterLess.less

@@ -13,9 +13,8 @@
 
 //start
 .jfb-base-poster {
-  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 {
-  &:before {
-    content: " ";
-    display: table;
-  }
+  //&:before {
+    //content: " ";
+    //display: table;
+  //}
 }
 /**endNotPreview**/