jufubao-base 1.0.128 → 1.0.130-beta2

package/src/components/JfbBasePosterType/FourScreen.vue

@@ -18,11 +18,11 @@
 					height: (height + rpxText) + 'px'
 				}"
 			>
-				
+
 				<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)"
 							>
@@ -89,7 +89,7 @@
 <script>
   import XdSwiperDot from "./XdSwiperDot";
   import XdSwiper from "@/components/XdSwiper/XdSwiper";
-  
+
   export default {
     components:{
       XdSwiperDot,
@@ -126,6 +126,9 @@
 			rpxText(){
         return this.$rpxNum * this.text
 			},
+      boxHeight(){
+        return  this.height + this.$rpxNum * this.text;
+      }
 		},
     watch: {
       config() {
@@ -134,7 +137,7 @@
       content() {
         this.init();
       },
-			
+
     },
     created() {
       this.isPreview = this.$configProject.isPreview;
@@ -150,7 +153,7 @@
           this.width = this.config.width;
           this.height = this.config.height;
           this.padding = 0;
-          
+
           //静态图显示
           if(this.config.isCarousel === false) {
             this.list = this.content.filter((item,index)=>{
@@ -167,8 +170,8 @@
 						}
             this.list = arr;
 					}
-        
-        
+
+
         }, 100)
       },
       handleClick(item) {
@@ -228,7 +231,7 @@
 	.sreen {
 		width: calc(100% + 2px); /**防止宽度不够问**/
 		position: relative;
-		
+
 		& .carousel-mask {
 			position: absolute;
 			left: 0;
@@ -236,24 +239,25 @@
 			top: 0;
 			bottom: 0;
 			background: rgba(0, 0, 0, 0);
-			
+
 		}
-		
+
 		&__box.notCarousel {
 			width: 100%;
 			display: flex;
 			justify-content: flex-start;
 			align-items: flex-start;
+      align-content: flex-start;
 			flex-wrap: wrap;
 			overflow: hidden;
-			
+
 			//行
 			&.cell4 {
 				//图片+文字外框
 				& > view {
 					width: calc(100% / 4);
 					flex-shrink: 0;
-					
+
 					//图片
 					& > view:first-child {
 						overflow: hidden;
@@ -275,7 +279,7 @@
 							}
 						}
 					}
-					
+
 					& > view:last-child {
 						text-align: center;
 						line-height: unit(36, rpx);
@@ -284,16 +288,16 @@
 						overflow: hidden;
 						font-size: unit(24, rpx);
 						.uni-max-cut(1, 36);
-						
+
 					}
 				}
 			}
-			
+
 			&.cell5 {
 				& > view {
 					width: calc(100% / 5);
 					flex-shrink: 0;
-					
+
 					//图片
 					& > view:first-child {
 						overflow: hidden;
@@ -301,7 +305,7 @@
 						justify-content: center;
 						align-items: center;
 						width: 100%;
-						
+
 						& > view {
 							width: 80%;
 							height: 80%;
@@ -310,14 +314,14 @@
 							justify-content: center;
 							align-items: center;
 							overflow: hidden;
-							
+
 							& > image {
 								width: 100%;
 								height: 100%;
 							}
 						}
 					}
-					
+
 					& > view:last-child {
 						text-align: center;
 						line-height: unit(36, rpx);
@@ -330,7 +334,7 @@
 				}
 			}
 		}
-		
+
 		&__box.carousel {
 			display: flex;
 			justify-content: flex-start;
@@ -338,21 +342,22 @@
 			flex-wrap: wrap;
 			overflow: hidden;
 		}
-		
+
 		& .sreen__box-list {
 			display: flex;
 			justify-content: flex-start;
 			align-items: flex-start;
+      align-content: flex-start;
 			flex-wrap: wrap;
 			overflow: hidden;
-			
+
 			//行
 			&.cell4 {
 				//图片+文字外框
 				& > view {
 					width: calc(100% / 4);
 					flex-shrink: 0;
-					
+
 					//图片
 					& > view:first-child {
 						overflow: hidden;
@@ -360,7 +365,7 @@
 						justify-content: center;
 						align-items: center;
 						width: 100%;
-						
+
 						& > view {
 							width: 75%;
 							height: 75%;
@@ -369,26 +374,26 @@
 							justify-content: center;
 							align-items: center;
 							overflow: hidden;
-							
+
 							& > image {
 								width: 100%;
 								height: 100%;
 							}
 						}
 					}
-					
+
 					& > view:last-child {
 						text-align: center;
 						line-height: 15px;
 					}
 				}
 			}
-			
+
 			&.cell5 {
 				& > view {
 					width: calc(100% / 5);
 					flex-shrink: 0;
-					
+
 					//图片
 					& > view:first-child {
 						overflow: hidden;
@@ -396,7 +401,7 @@
 						justify-content: center;
 						align-items: center;
 						width: 100%;
-						
+
 						& > view {
 							width: 80%;
 							height: 80%;
@@ -405,14 +410,14 @@
 							justify-content: center;
 							align-items: center;
 							overflow: hidden;
-							
+
 							& > image {
 								width: 100%;
 								height: 100%;
 							}
 						}
 					}
-					
+
 					& > view:last-child {
 						text-align: center;
 						line-height: unit(36, rpx);
@@ -425,6 +430,6 @@
 			}
 		}
 	}
-	
-	
+
+
 </style>

package/src/components/JfbBasePosterType/JfbBasePosterType.vue

@@ -13,19 +13,19 @@
       <view class="jfb-base-poster-type__edit-icon" @click="delEdit">删除</view>
     </view>
     <!-- #endif -->
-    <view
-			class="jfb-base-poster-type__body"
-			v-if="noData"
-			:style="{
-				margin: margin,
-				backgroundColor: bgColor,
-				borderRadius: bgRadius + 'rpx'
-			}
-		">
-			<four-screen
-				:config="getConfig"
-				:content="info"
-			></four-screen>
+    <view class="jfb-base-poster-type__body" v-if="noData">
+      <view class="x-line"></view>
+      <view
+        class="jfb-base-poster-cont"
+        :style="{
+          margin: margin,
+          backgroundColor: bgColor,
+          borderRadius: bgRadius + 'rpx'
+        }"
+      >
+        <four-screen :config="getConfig" :content="info"></four-screen>
+      </view>
+
     </view>
   </view>
 </template>
@@ -41,7 +41,6 @@
   import getServiceUrl from '@/common/getServiceUrl'
 	import XdImage from "@/components/XdImage/XdImage";
   import XdSwiper from "@/components/XdSwiper/XdSwiper";
-  import Screen from "./Screen";
   import FourScreen from "./FourScreen";
   import XdSwiperDot from "./XdSwiperDot";
   export default {
@@ -50,7 +49,6 @@
       XdFontIcon,
       XdImage,
       XdSwiper,
-      Screen,
       FourScreen,
       XdSwiperDot
     },
@@ -69,42 +67,18 @@
         jdRows: 1, //行
         cells: 4, //列
         shadow: false, //是否设置阴影
+        shadowColor:'rgba(0,0,0,.3)',
         radius: '20', //10/20/40 ， 小/中/大
 				timer: null,
 				info: [],
-        mS: {
-          top: 0,
-					bottom: 0,
-					left: 0,
-					right: 0
-				},
+        mS: {},
 				isPreview: false,
 				noData:false,
-				
+
 				//颜色设置
         textColor: '#333',
         bgColor:'rgba(0,0,0,0)',
         bgRadius: 0,
-				
-				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: {
@@ -124,18 +98,24 @@
           jdRows: this.jdRows,
           cells: this.cells,
           shadow: this.shadow,
+          shadowColor: this.shadowColor,
           textColor: this.textColor,
 				}
 			},
       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
 			},
       dotStyleData() {
       	return {}
       }
 		},
     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(()=>{
@@ -180,7 +160,7 @@
           if (url === '') {
             return;
           }
-          
+
           if(url.indexOf('?') === -1) url = `${url}?vs=${new Date().getTime()}`;
           else url = `${url}&vs=${new Date().getTime()}`;
           this.$xdUniHelper.navigateTo({url})
@@ -196,41 +176,36 @@
 			},
       handleOne(list){
         this.info = this.handleImage(list);
-        console.log('this.info',this.info)
-			},
-			getDefualtValue(key){
-        if (key === 'margin') {
-          return {top: 0, bottom: 0, left: 0, right: 0}
-        }
 			},
-			
+
       /**
        * @description 监听事件变化
        * @param container {object} 业务组件对象自己
        */
       init(container) {
         this.radius = getContainerPropsValue(container, 'content.radius', '20');
-        this.padding = 0;
         this.poster = getContainerPropsValue(container, 'content.nav', {});
         if (this.poster.position) {
           this.posterPosition = this.poster.position
         }
         this.jdRows = getContainerPropsValue(container, 'content.jdRows', 1);
         this.cells = getContainerPropsValue(container, 'content.cells', 4);
-        
+
         //content
         this.mode = getContainerPropsValue(container, 'content.dot_type', 'dot');
         this.isCarousel = getContainerPropsValue(container, 'content.isCarousel', 1) === 2;
         this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime', 5)) * 1000;
         this.useNumber = getContainerPropsValue(container, 'content.number', 1);
         this.shadow = getContainerPropsValue(container, 'content.shadow', 2);
-        this.mS = getContainerPropsValue(container, 'content.margin', {top: 0, left: 0, bottom:0, right: 0});
-        
+        this.shadowColor = getContainerPropsValue(container, 'content.shadowColor', 'rgba(0,0,0,.3)');
+        this.mS = getContainerPropsValue(container, 'content.margin', {});
+
         //样式设置
         this.textColor = getContainerPropsValue(container, 'content.textColor', '#333');
         this.bgColor = getContainerPropsValue(container, 'content.bgColor','rgba(0,0,0,0)');
         this.bgRadius = getContainerPropsValue(container, 'content.bgRadius', '0');
-        
+
+
       },
 
       onJfbLoad(options) {
@@ -246,9 +221,10 @@
         })
           .then(res => {
             if (res.list.length === 0 && this.isPreview) {
+              let testData = this.$xdUniHelper.cloneDeep(this['posterTest']);
               let temp = [];
               for (let i = 0; i < this.useNumber; i++) {
-                temp.push({...this.test, content_id: i, content_name: `${this.test.content_name}(${i})`})
+                temp.push({...testData, content_id: i, content_name: `${testData.content_name}(${i})`})
               }
               res.list = temp
             }
@@ -259,12 +235,11 @@
             console.error(error)
           })
       },
-			
-			
+
       onJfbUpdate(data){
         this.onJfbLoad(this.params);
 			}
-    
+
     }
   }
 
@@ -275,11 +250,14 @@
 
   .jfb-base-poster-type {
     &__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;
@@ -288,19 +266,19 @@
 			justify-content: center;
 			align-items: center;
 			overflow: hidden;
-			
-			
+
+
 			& > view {
 				width: 100%;
 				height: 100%;
 				box-sizing: border-box;
-				
+
 				& > image {
-				
+
 				}
 			}
 		}
-	
+
 		&__one.carousel {
 			position: relative;
 			box-sizing: border-box;
@@ -308,7 +286,7 @@
 			justify-content: center;
 			align-items: center;
 			overflow: hidden;
-			
+
 			& .carousel-mask {
 				position: absolute;
 				left: 0;
@@ -318,6 +296,6 @@
 				background: rgba(0,0,0,0);
 			}
 		}
-		
+
   }
 </style>

package/src/components/JfbBasePosterType/JfbBasePosterTypeLess.less

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