jufubao-base 1.0.130-beta3 → 1.0.130

package/src/components/JfbBasePoster/JfbBasePoster.vue

@@ -13,77 +13,82 @@
       <view class="jfb-base-poster__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <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"
+    <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
             :style="{
-              width: getOneWidth + 'rpx',
-              height: getOneHeight + 'rpx',
+            	width: width + 'rpx',
+              height: height + 'rpx',
               borderRadius: (posterType === '1' ? radius: 0) + 'rpx',
+              marginBottom: padding + 'rpx'
             }"
+            @click="handleClick(item)"
+            v-for="(item,index) in info"
+            :key="index"
           >
-            <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>
+						<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>
     </view>
     <!--解决图片缓冲预加载问题-->
     <view v-for="(item,index) in info" :key="index" style="position: absolute; top: -19999px; left: -100000px">
@@ -140,47 +145,49 @@
         rows: 1, //四分屏起作用
         radius: 0,
 				timer: null,
-        isSupport: 'N',
+        isSupport: 'Y',
         currentImage: '',
 				info: [],
-        mS: {},//边距
-        bgImagePadding:{},//填充
+        mS: {
+          top: 0,
+					bottom: 0,
+					left: 0,
+					right: 0
+				},
 				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 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 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 width = Math.floor(viewWidth / cell);
         let height = this.height * width / this.width;
         return {
@@ -199,27 +206,8 @@
 				}
 			},
       margin(){
-        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;
+        return `${this.mS.top||0}rpx ${this.mS.right||0}rpx ${this.mS.bottom||0}rpx ${this.mS.left||0}rpx`
 			},
-      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') {
@@ -233,7 +221,9 @@
       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)',
@@ -292,11 +282,24 @@
         }
         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, oloValue) {
-        if(JSON.stringify(value) === JSON.stringify(oloValue)) return;
+      container(value) {
         this.init(value);
         if(this.timer) clearTimeout(this.timer);
         this.timer = setTimeout(()=>{
@@ -348,7 +351,7 @@
       getTestData(){
         let temp = [];
         for (let i = 0; i< this.useNumber; i++) {
-          let item = this.$xdUniHelper.cloneDeep(this['posterTest']);
+          let item = this.$xdUniHelper.cloneDeep(this.test);
           item.content_id = i;
           item.content_name = item.content_name + i;
           item.image_url = `//dummyimage.com/${this.width}x${this.height}`;
@@ -357,8 +360,11 @@
         return temp
 			},
       handleAnimationfinish(e) {
+
+
         //不支持背景不处理
         if(this.isSupport==='N') return;
+
         console.warn(`handleAnimationfinish.start`)
         this.pageSwiperShow = this.$root.$isShow;
 
@@ -450,6 +456,11 @@
         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}
         }
 			},
 
@@ -465,18 +476,17 @@
         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);
-        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', {});
+        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});
         //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);
 
@@ -561,14 +571,11 @@
 
   .jfb-base-poster {
     &__body{
-      & > view.jfb-base-poster-cont {
-        box-sizing: border-box;
-        overflow: hidden;
-        justify-content: center;
-        align-items: center;
-        display: flex;
-      }
-
+			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,8 +13,9 @@
 
 //start
 .jfb-base-poster {
+  border: 1px dashed rgba(0, 0, 0, 0);
   box-sizing: border-box;
-  min-height: unit(100, rpx);
+  min-height: unit(50, rpx);
 
   &__body{
       position: relative;
@@ -22,21 +23,21 @@
       z-index: 2
   }
 
-  &.editx,&:hover {
+  &.editx {
     position: relative;
-    z-index: 3;
-    &::after {
-      border: 2rpx dashed blue;
-      content: " ";
-      position: absolute;
-      top:0;
-      left:0;
-      bottom:0;
-      right:0;
-      z-index: 4;
-      cursor: pointer;
-    }
+    border: 1px dashed blue;
+    box-sizing: border-box;
+    z-index: 3
+
+  }
 
+  &:hover {
+    border: 1px dashed blue;
+  }
+
+  &.noBorder {
+    border-color: rgba(0,0,0,0);
+    border-width: 0;
   }
 
 
@@ -71,9 +72,9 @@
 
 /**notPreview**/
 .jfb-base-poster {
-  //&:before {
-    //content: " ";
-    //display: table;
-  //}
+  &:before {
+    content: " ";
+    display: table;
+  }
 }
 /**endNotPreview**/