jufubao-base 1.0.132-beta3 → 1.0.133

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">
-      <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
+			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>
   </view>
 </template>
@@ -41,6 +41,7 @@
   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 {
@@ -49,6 +50,7 @@
       XdFontIcon,
       XdImage,
       XdSwiper,
+      Screen,
       FourScreen,
       XdSwiperDot
     },
@@ -67,11 +69,15 @@
         jdRows: 1, //行
         cells: 4, //列
         shadow: false, //是否设置阴影
-        shadowColor:'rgba(0,0,0,.3)',
         radius: '20', //10/20/40 ， 小/中/大
 				timer: null,
 				info: [],
-        mS: {},
+        mS: {
+          top: 0,
+					bottom: 0,
+					left: 0,
+					right: 0
+				},
 				isPreview: false,
 				noData:false,
 
@@ -79,6 +85,26 @@
         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: {
@@ -98,24 +124,18 @@
           jdRows: this.jdRows,
           cells: this.cells,
           shadow: this.shadow,
-          shadowColor: this.shadowColor,
           textColor: this.textColor,
 				}
 			},
       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`
 			},
       dotStyleData() {
       	return {}
       }
 		},
     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(()=>{
@@ -132,6 +152,7 @@
         this.current = e.detail.current;
       },
       handleClick(item, index){
+        debugger
         this.current = index;
         const handle = (data) => {
           try {
@@ -176,6 +197,12 @@
 			},
       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}
+        }
 			},
 
       /**
@@ -184,6 +211,7 @@
        */
       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
@@ -197,15 +225,13 @@
         this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime', 5)) * 1000;
         this.useNumber = getContainerPropsValue(container, 'content.number', 1);
         this.shadow = getContainerPropsValue(container, 'content.shadow', 2);
-        this.shadowColor = getContainerPropsValue(container, 'content.shadowColor', 'rgba(0,0,0,.3)');
-        this.mS = getContainerPropsValue(container, 'content.margin', {});
+        this.mS = getContainerPropsValue(container, 'content.margin', {top: 0, left: 0, bottom:0, right: 0});
 
         //样式设置
         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) {
@@ -221,10 +247,9 @@
         })
           .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({...testData, content_id: i, content_name: `${testData.content_name}(${i})`})
+                temp.push({...this.test, content_id: i, content_name: `${this.test.content_name}(${i})`})
               }
               res.list = temp
             }
@@ -236,6 +261,7 @@
           })
       },
 
+
       onJfbUpdate(data){
         this.onJfbLoad(this.params);
 			}
@@ -250,14 +276,11 @@
 
   .jfb-base-poster-type {
     &__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/JfbBasePosterType/JfbBasePosterTypeLess.less

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

package/src/components/JfbBasePosterType/Screen.vue

@@ -0,0 +1,284 @@
+<template>
+	<view class="sreen">
+		<view
+			class="sreen__box notCarousel"
+			:class="{
+				three: cell === 3,
+				two: cell === 2,
+			}"
+			v-if="config.isCarousel === false"
+			:style="{height: height + 'rpx'}"
+		>
+			<view
+				v-for="item in getContent"
+				:key="item['content_id']"
+				:style="{
+					borderRadius: config.radius  + 'rpx',
+					marginRight: config.padding + 'rpx',
+				}"
+				@click="handleClick(item)"
+			>
+				<image
+					:style="{
+						width: width + 'rpx',
+						height: height + 'rpx'
+					}"
+					:src="item.image_url"
+					mode="aspectFill"
+				></image>
+			</view>
+		</view>
+		<view class="sreen__box carousel" v-if="config.isCarousel === true">
+			<xd-swiper-dot
+				:current="current"
+				:info="getContent"
+				field="content_name"
+				:mode="config.mode"
+				:dots-styles="config.dotStyleData"
+				:style="{height:(getHeight + 46) + 'rpx'}"
+			>
+				<xd-swiper
+					:indicator-dots="false"
+					:interval="config.carouselTime"
+					:list="getContent"
+					:current="current"
+					width="100%"
+					:height="getHeight + 'rpx'"
+					@onClickItem="handleClick"
+					@animationfinish="handleAnimationfinish"
+				>
+					<template slot-scope="{ item, index}">
+						<view
+							class="sreen__box-list"
+							:class="{
+								three: cell === 3,
+								two: cell === 2,
+							}"
+							:style="{
+								height: getHeight + 'rpx'
+							}"
+						>
+							<view
+								v-for="it in item"
+								:key="it['content_id']"
+								:style="{
+								borderRadius: config.radius  + 'rpx',
+								marginRight: config.padding + 'rpx',
+								marginBottom: config.padding + 'rpx'
+							}"
+								@click="handleClick(it)"
+							>
+								<image
+									:style="{ width: width + 'rpx', height: height + 'rpx'}"
+									:src="it.image_url"
+									mode="aspectFill"></image>
+							</view>
+						</view>
+					</template>
+				</xd-swiper>
+			</xd-swiper-dot>
+		</view>
+		<view v-if="isPreview" class="carousel-mask"></view>
+	</view>
+</template>
+
+<script>
+  import XdSwiperDot from "./XdSwiperDot";
+  import XdSwiper from "@/components/XdSwiper/XdSwiper";
+  
+  export default {
+    name: "ThreeScreen",
+    components: {
+      XdSwiperDot,
+      XdSwiper
+    },
+		props: {
+      config: {
+        type: Object,
+				required: true
+			},
+			content: {
+        type: Array,
+        required: true
+			},
+      cell: {
+        type: Number,
+        required: true
+			}
+		},
+		data(){
+      return {
+				timer: null,
+				width: 0,
+        height: 0,
+				padding:0,
+				status: false,
+        isPreview: false,
+        current: 0,
+				rows: 1, //行
+			}
+		},
+		watch:{
+      config(){
+        this.init()
+			},
+      content(){
+        this.init();
+			},
+		},
+		computed:{
+      getContent(){
+        if(this.config.isCarousel === false) {
+          return this.$xdUniHelper.cloneDeep(this.content).splice(0,this.cell * this.rows);
+				}
+        else{
+          let num = this.cell * this.rows ;
+          let maxPage = Math.ceil(this.content.length / num);
+          let arr = [];
+          for (let i = 1; i <= maxPage; i++) {
+            arr.push(this.$xdUniHelper.getLocalPaginationData(this.content, i, num))
+          }
+					return  arr;
+     
+				}
+			},
+      getHeight() {
+        let height = this.height * this.rows;
+        let padding = 0;
+        if (this.rows === 2) padding = Number(this.config.padding);
+        return height + padding;
+      },
+		},
+		created() {
+      this.isPreview = this.$configProject.isPreview;
+      this.init();
+    },
+		methods: {
+      handleAnimationfinish(e) {
+        this.current = e.detail.current;
+      },
+      init(){
+        if(this.timer) clearTimeout(this.timer);
+        this.timer = setTimeout(()=>{
+          this.width = Number(this.config.width);
+          this.height = Number(this.config.height);
+          this.padding = Number(this.config.padding);
+				}, 100)
+			},
+      handleClick(item, index) {
+        this.current = index;
+        const handle = (data) => {
+          try {
+            return JSON.parse(data);
+          } catch (e) {
+            return {}
+          }
+        };
+        if (this.$configProject.isPreview) {
+          console.log(item)
+        } else {
+          if (item['redirect_type'] === 'EMP') return;
+          let url = '';
+
+          if (item['redirect_type'] === 'URL') {
+            url = handle(item['redirect_data']).url || ''
+          }
+
+          if (item['redirect_type'] === 'INN') {
+            url = handle(item['redirect_data']).page || ''
+          }
+          if (item['redirect_type'] === 'APP') {
+            return;
+          }
+          if (url === '') {
+            return;
+          }
+          this.$xdUniHelper.navigateTo({url})
+        }
+      },
+		}
+  }
+</script>
+
+<style scoped lang="less">
+	.sreen {
+		width: calc(100% + 5px);
+		position: relative;
+		
+		& .carousel-mask {
+			position: absolute;
+			left: 0;
+			right: 0;
+			top: 0;
+			bottom: 0;
+			background: rgba(0, 0, 0, 0);
+		}
+		
+		
+		&__box.notCarousel {
+			display: flex;
+			justify-content: flex-start;
+			align-items: center;
+			flex-wrap: wrap;
+			overflow: hidden;
+			
+			&.two {
+				& > view:nth-child(2n) {
+					margin-right: 0 !important;
+				}
+			}
+			
+			&.three {
+				& > view:nth-child(3n) {
+					margin-right: 0 !important;
+				}
+			}
+			
+			& > view {
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				flex-shrink: 0;
+				box-sizing: border-box;
+				overflow: hidden;
+			}
+		}
+		
+		&__box.carousel {
+			display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			flex-wrap: wrap;
+			overflow: hidden;
+		}
+		
+		& .sreen__box-list {
+			display: flex;
+			justify-content: flex-start;
+			align-items: flex-start;
+			flex-wrap: wrap;
+			overflow: hidden;
+			
+			& view {
+				display: flex;
+				justify-content: center;
+				align-items: flex-start;
+				flex-shrink: 0;
+				box-sizing: border-box;
+				overflow: hidden;
+			}
+			
+			&.two {
+				& > view:nth-child(2n) {
+					margin-right: 0 !important;
+				}
+			}
+			
+			&.three {
+				& > view:nth-child(3n) {
+					margin-right: 0 !important;
+				}
+			}
+		}
+	}
+</style>