jufubao-base 1.0.103 → 1.0.105-beta1

package/src/components/JfbBasePosterBigSmall/JfbBasePosterBigSmall.vue

@@ -2,109 +2,770 @@
   <view
     class="jfb-base-poster-big-small"
     @click="handleEditxSelect"
-    :class="{ editx : isEditx && active }"
+    :class="{ editx: isEditx && active }"
   >
     <!--#ifdef H5-->
     <view
       class="jfb-base-poster-big-small__edit"
-      :class="{ editx : isEditx && active }"
+      :class="{ editx: isEditx && active }"
       v-if="isEditx && active"
     >
-      <view class="jfb-base-poster-big-small__edit-icon" @click="delEdit">删除</view>
+      <view class="jfb-base-poster-big-small__edit-icon" @click="delEdit"
+        >删除</view
+      >
     </view>
     <!-- #endif -->
     <view class="jfb-base-poster-big-small__body">
-      <view>测试插件( {{containerId}} )</view>
+      <view
+        class="jfb-base-poster-big-small__body-wrap"
+        :style="{
+          margin: margin,
+          flexDirection: position === 1 ? 'row' : 'row-reverse',
+        }"
+      >
+        <view
+          v-if="isCarousel === 1"
+          :style="{
+            margin: msMarginComputed,
+            width: bigWidth + 'rpx',
+            height: bigHeight + 'rpx',
+            borderRadius: radius + 'rpx',
+          }"
+          ><view>
+            <image
+              :style="{
+                width: bigWidth + 'rpx',
+                height: bigHeight + 'rpx',
+                borderRadius: radius + 'rpx',
+              }"
+              :src="bigList[0].image_url"
+              mode="aspectFill"
+            ></image> </view
+        ></view>
+        <view
+          v-else
+          :style="{
+            margin: msMarginComputed,
+            width: bigWidth + 'rpx',
+            height: bigHeight + 'rpx',
+            borderRadius: radius + 'rpx',
+          }"
+        >
+          <xd-swiper-dot
+            :current="current"
+            :info="bigList"
+            field="content_name"
+            :mode="dot_type"
+            :dots-styles="dotStyleData"
+          >
+            <xd-swiper
+              :indicator-dots="false"
+              :list="bigList"
+              :current="current"
+              :width="bigWidth + 'rpx'"
+              :height="bigHeight + 'rpx'"
+              :interval="carouselTime"
+              @onClickItem="handleClick"
+              @animationfinish="handleBigAnimationfinish"
+            >
+              <template slot-scope="{ item, index }">
+                <image
+                  :style="{
+                    borderRadius: radius + 'rpx',
+                  }"
+                  :src="item['image_url']"
+                  mode="aspectFill"
+                ></image>
+              </template>
+            </xd-swiper>
+          </xd-swiper-dot>
+
+          <view v-if="isPreview" class="carousel-mask"></view>
+        </view>
+        <view
+          :style="{
+            width: bigWidth + 'rpx',
+            height: '100%',
+          }"
+        >
+          <view
+            :style="{
+              width: '100%',
+              marginBottom: msMargin + 'rpx',
+              height: smallHeight + 'rpx',
+            }"
+          >
+            <view
+              v-if="topIsCarousel === 1"
+              :style="{
+                width: bigWidth + 'rpx',
+                height: smallHeight + 'rpx',
+                borderRadius: topRadius + 'rpx',
+              }"
+              ><view>
+                <image
+                  :style="{
+                    width: bigWidth + 'rpx',
+                    height: smallHeight + 'rpx',
+                    borderRadius: topRadius + 'rpx',
+                  }"
+                  :src="topList[0].image_url"
+                  mode="aspectFill"
+                ></image> </view
+            ></view>
+            <view
+              v-else
+              :style="{
+                width: bigWidth + 'rpx',
+                height: smallHeight + 'rpx',
+                borderRadius: topRadius + 'rpx',
+              }"
+            >
+              <xd-swiper-dot
+                :current="topCurrent"
+                :info="topList"
+                field="content_name"
+                :mode="top_dot_type"
+                :dots-styles="topDotStyleData"
+              >
+                <xd-swiper
+                  :indicator-dots="false"
+                  :list="topList"
+                  :current="topCurrent"
+                  :width="bigWidth + 'rpx'"
+                  :height="smallHeight + 'rpx'"
+                  :interval="topCarouselTime"
+                  @onClickItem="handleClick"
+                  @animationfinish="handleTopAnimationfinish"
+                >
+                  <template slot-scope="{ item, index }">
+                    <image
+                      :style="{
+                        borderRadius: topRadius + 'rpx',
+                      }"
+                      :src="item['image_url']"
+                      mode="aspectFill"
+                    ></image>
+                  </template>
+                </xd-swiper>
+              </xd-swiper-dot>
+
+              <view v-if="isPreview" class="carousel-mask"></view>
+            </view>
+          </view>
+          <view
+            :style="{
+              width: '100%',
+              height: smallHeight + 'rpx',
+            }"
+          >
+            <view
+              v-if="bottomIsCarousel === 1"
+              :style="{
+                width: bigWidth + 'rpx',
+                height: smallHeight + 'rpx',
+                borderRadius: bottomRadius + 'rpx',
+              }"
+              ><view>
+                <image
+                  :style="{
+                    width: bigWidth + 'rpx',
+                    height: smallHeight + 'rpx',
+                    borderRadius: bottomRadius + 'rpx',
+                  }"
+                  :src="bottomList[0].image_url"
+                  mode="aspectFill"
+                ></image> </view
+            ></view>
+            <view
+              v-else
+              :style="{
+                width: bigWidth + 'rpx',
+                height: smallHeight + 'rpx',
+                borderRadius: bottomRadius + 'rpx',
+              }"
+            >
+              <xd-swiper-dot
+                :current="bottomCurrent"
+                :info="bottomList"
+                field="content_name"
+                :mode="bottom_dot_type"
+                :dots-styles="bottomDotStyleData"
+              >
+                <xd-swiper
+                  :indicator-dots="false"
+                  :list="bottomList"
+                  :current="bottomCurrent"
+                  :width="bigWidth + 'rpx'"
+                  :height="smallHeight + 'rpx'"
+                  :interval="bottomCarouselTime"
+                  @onClickItem="handleClick"
+                  @animationfinish="handleBottomAnimationfinish"
+                >
+                  <template slot-scope="{ item, index }">
+                    <image
+                      :style="{
+                        borderRadius: bottomRadius + 'rpx',
+                      }"
+                      :src="item['image_url']"
+                      mode="aspectFill"
+                    ></image>
+                  </template>
+                </xd-swiper>
+              </xd-swiper-dot>
+
+              <view v-if="isPreview" class="carousel-mask"></view>
+            </view>
+          </view>
+        </view>
+      </view>
     </view>
   </view>
 </template>
 
 <script>
-  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
-  import { jfbRootExec } from "@/utils/xd.event";
-  import JfbBasePosterBigSmallMixin from "./JfbBasePosterBigSmallMixin";
-  import { getContainerPropsValue } from "@/utils/xd.base";
-  import componentsMixins from "@/mixins/componentsMixins";
-  import extsMixins from "@/mixins/extsMixins";
-  export default {
-    name: "JfbBasePosterBigSmall",
-    components: {
-      XdFontIcon
+const color = require("color");
+import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+import { jfbRootExec } from "@/utils/xd.event";
+import JfbBasePosterBigSmallMixin from "./JfbBasePosterBigSmallMixin";
+import { getContainerPropsValue } from "@/utils/xd.base";
+import componentsMixins from "@/mixins/componentsMixins";
+import extsMixins from "@/mixins/extsMixins";
+import XdSwiper from "@/components/XdSwiper/XdSwiper";
+import XdSwiperDot from "./XdSwiperDot";
+import getServiceUrl from "@/common/getServiceUrl";
+import getWidthHeight from './getWidthHeight'
+export default {
+  name: "JfbBasePosterBigSmall",
+  components: {
+    XdFontIcon,
+    XdSwiper,
+    XdSwiperDot,
+  },
+  mixins: [componentsMixins, extsMixins, JfbBasePosterBigSmallMixin],
+  data() {
+    return {
+      height: 0, //组件高度
+      mS: {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+      }, //间距
+      isPreview: false, //是否预览
+      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,
+      }, //测试数据
+
+      msMargin: 0, //大小图间距
+
+      position: 1, //控制大图位置
+
+      //大图
+      current: 0,
+      carouselTime: 5, //轮播图轮播周期
+      bigList: [],
+      number: null,
+      dot_type: "dot",
+      isCarousel: 1, //大图是否轮播图
+      radius: 0, //大图圆角
+      bigWidth: 0,
+      bigHeight: 0,
+
+      //小图下
+      bottomList: [],
+      bottomNumber: null,
+      bottom_dot_type: "dot",
+      bottomRadius: 0, //小图上圆角
+      bottomCurrent: 0, //小图上
+      bottomIsCarousel: 1,
+
+      //小图上
+      topList: [],
+      topNumber: null,
+      top_dot_type: "dot",
+      topRadius: 0, //小图上圆角
+      topCurrent: 0, //小图上
+      topIsCarousel: 1,
+      smallHeight: 0,
+
+      timer: null,
+
+    };
+  },
+  computed: {
+    margin() {
+      return `${this.mS.top || 0}rpx ${this.mS.right || 0}rpx ${
+        this.mS.bottom || 0
+      }rpx ${this.mS.left || 0}rpx`;
+    },
+    msMarginComputed() {
+      if (this.position === 1) {
+        return `0 ${this.msMargin}rpx 0 0`;
+      } else {
+        return `0 0 0 ${this.msMargin}rpx`;
+      }
+    },
+    dotStyleData() {
+      let alpha = 0.6;
+      let selectedColor = `rgba(${color(this.mainColor)
+        .alpha(alpha)
+        .array()
+        .join(",")})`;
+      let style = {
+        dot: {
+          backgroundColor: "rgba(166,166,166,.5)",
+          border: "0px rgba(166,166,166,.5) solid",
+          color: "#fff",
+          selectedBackgroundColor: selectedColor,
+          selectedBorder: `0px this.mainColor solid`,
+        },
+        default: {
+          width: 16,
+          backgroundColor: "rgba(200,200,200,.45)",
+          border: "1px rgba(200,200,200,.45) solid",
+          color: "#fff",
+          selectedBackgroundColor: selectedColor,
+          selectedBorder: `1px this.mainColor solid`,
+        },
+        round: {
+          backgroundColor: "rgba(166,166,166,.5)",
+          border: "0px rgba(166,166,166,.5) solid",
+          color: "#fff",
+          selectedBackgroundColor: selectedColor,
+          selectedBorder: `0px this.mainColor solid`,
+        },
+        nav: {
+          backgroundColor: "rgba(0,0,0,.5)",
+          border: "1px rgba(0,0,0,.5) solid",
+          color: "#fff",
+          selectedBackgroundColor: "rgba(255, 255, 255, 1)",
+          selectedBorder: "1px rgba(255, 255, 255 1) solid",
+        },
+        indexes: {
+          backgroundColor: "rgba(0,0,0,.5)",
+          border: "0px rgba(0,0,0,.5) solid",
+          color: "#aaa",
+          selectedBackgroundColor: "rgba(0,0,0,.8)",
+          selectedBorder: "0px rgba(0,0,0,.8) solid",
+          selectedColor: "#fff",
+        },
+      };
+      console.log(
+        style[this.dot_type],
+        "style[this.dot_type]style[this.dot_type]style[this.dot_type]"
+      );
+      return style[this.dot_type];
+    },
+    topDotStyleData() {
+      let alpha = 0.6;
+      let selectedColor = `rgba(${color(this.mainColor)
+        .alpha(alpha)
+        .array()
+        .join(",")})`;
+      let style = {
+        dot: {
+          backgroundColor: "rgba(166,166,166,.5)",
+          border: "0px rgba(166,166,166,.5) solid",
+          color: "#fff",
+          selectedBackgroundColor: selectedColor,
+          selectedBorder: `0px this.mainColor solid`,
+        },
+        default: {
+          width: 16,
+          backgroundColor: "rgba(200,200,200,.45)",
+          border: "1px rgba(200,200,200,.45) solid",
+          color: "#fff",
+          selectedBackgroundColor: selectedColor,
+          selectedBorder: `1px this.mainColor solid`,
+        },
+        round: {
+          backgroundColor: "rgba(166,166,166,.5)",
+          border: "0px rgba(166,166,166,.5) solid",
+          color: "#fff",
+          selectedBackgroundColor: selectedColor,
+          selectedBorder: `0px this.mainColor solid`,
+        },
+        nav: {
+          backgroundColor: "rgba(0,0,0,.5)",
+          border: "1px rgba(0,0,0,.5) solid",
+          color: "#fff",
+          selectedBackgroundColor: "rgba(255, 255, 255, 1)",
+          selectedBorder: "1px rgba(255, 255, 255 1) solid",
+        },
+        indexes: {
+          backgroundColor: "rgba(0,0,0,.5)",
+          border: "0px rgba(0,0,0,.5) solid",
+          color: "#aaa",
+          selectedBackgroundColor: "rgba(0,0,0,.8)",
+          selectedBorder: "0px rgba(0,0,0,.8) solid",
+          selectedColor: "#fff",
+        },
+      };
+      return style[this.top_dot_type];
+    },
+    bottomDotStyleData() {
+      let alpha = 0.6;
+      let selectedColor = `rgba(${color(this.mainColor)
+        .alpha(alpha)
+        .array()
+        .join(",")})`;
+      let style = {
+        dot: {
+          backgroundColor: "rgba(166,166,166,.5)",
+          border: "0px rgba(166,166,166,.5) solid",
+          color: "#fff",
+          selectedBackgroundColor: selectedColor,
+          selectedBorder: `0px this.mainColor solid`,
+        },
+        default: {
+          width: 16,
+          backgroundColor: "rgba(200,200,200,.45)",
+          border: "1px rgba(200,200,200,.45) solid",
+          color: "#fff",
+          selectedBackgroundColor: selectedColor,
+          selectedBorder: `1px this.mainColor solid`,
+        },
+        round: {
+          backgroundColor: "rgba(166,166,166,.5)",
+          border: "0px rgba(166,166,166,.5) solid",
+          color: "#fff",
+          selectedBackgroundColor: selectedColor,
+          selectedBorder: `0px this.mainColor solid`,
+        },
+        nav: {
+          backgroundColor: "rgba(0,0,0,.5)",
+          border: "1px rgba(0,0,0,.5) solid",
+          color: "#fff",
+          selectedBackgroundColor: "rgba(255, 255, 255, 1)",
+          selectedBorder: "1px rgba(255, 255, 255 1) solid",
+        },
+        indexes: {
+          backgroundColor: "rgba(0,0,0,.5)",
+          border: "0px rgba(0,0,0,.5) solid",
+          color: "#aaa",
+          selectedBackgroundColor: "rgba(0,0,0,.8)",
+          selectedBorder: "0px rgba(0,0,0,.8) solid",
+          selectedColor: "#fff",
+        },
+      };
+      return style[this.bottom_dot_type];
     },
-    mixins: [
-      componentsMixins, extsMixins, JfbBasePosterBigSmallMixin
-    ],
-    data() {
-      return {
+  },
+  watch: {
+    container(value) {
+      this.init(value);
+      if(this.timer) clearTimeout(this.timer);
+        this.timer = setTimeout(()=>{
+          if (this.$configProject['isPreview']) this.onJfbLoad()
+				}, 400)
+    },
+  },
+  created() {
+    this.init(this.container);
+    this.isPreview = this.$configProject.isPreview;
+  },
+  methods: {
+    onJfbLoad(options) {
+      this.params = options;
+      //获取大图列表
+      jfbRootExec("getListPosterContent", {
+        vm: this,
+        data: {
+          page_id: this.pageAttr["page_id"], //页面ID
+          container_id: this.containerId + "big", //组件ID
+          page_size: this.number,
+        },
+      })
+        .then((res) => {
+          //如果res.list为空且isPreview为true，则获取测试数据
+          if (res.list.length === 0 && this.isPreview) {
+            res.list = this.getTestData("big");
+          }
+          //将res.list中的image_url替换为服务地址
+          this.bigList =
+            res.list &&
+            res.list.length > 0 &&
+            res.list.map((item) => {
+              item.image_url = item.image_url
+                ? getServiceUrl(item.image_url)
+                : "";
+              return item;
+            });
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+      //获取小图上列表
+      jfbRootExec("getListPosterContent", {
+        vm: this,
+        data: {
+          page_id: this.pageAttr["page_id"], //页面ID
+          container_id: this.containerId + "top", //组件ID
+          page_size: this.topNumber,
+        },
+      })
+        .then((res) => {
+          //如果res.list为空且isPreview为true，则获取测试数据
+          if (res.list.length === 0 && this.isPreview) {
+            res.list = this.getTestData("top");
+          }
+          //将res.list中的image_url替换为服务地址
+          this.topList =
+            res.list &&
+            res.list.length > 0 &&
+            res.list.map((item) => {
+              item.image_url = item.image_url
+                ? getServiceUrl(item.image_url)
+                : "";
+              return item;
+            });
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+      //获取小图下列表
+      jfbRootExec("getListPosterContent", {
+        vm: this,
+        data: {
+          page_id: this.pageAttr["page_id"], //页面ID
+          container_id: this.containerId + "bottom", //组件ID
+          page_size: this.bottomNumber,
+        },
+      })
+        .then((res) => {
+          //如果res.list为空且isPreview为true，则获取测试数据
+          if (res.list.length === 0 && this.isPreview) {
+            res.list = this.getTestData("bottom");
+          }
+          //将res.list中的image_url替换为服务地址
+          this.bottomList =
+            res.list &&
+            res.list.length > 0 &&
+            res.list.map((item) => {
+              item.image_url = item.image_url
+                ? getServiceUrl(item.image_url)
+                : "";
+              return item;
+            });
+        })
+        .catch((error) => {
+          console.error(error);
+        });
+    },
+    handleBigAnimationfinish(e) {
+      this.current = e.detail.current;
+    },
+    handleTopAnimationfinish(e) {
+      this.topCurrent = e.detail.current;
+    },
+    handleBottomAnimationfinish(e) {
+      this.bottomCurrent = e.detail.current;
+    },
+    handleClick(item) {
+      //内部链接跳转地址
+      if (item.redirect_type === "INN") {
+        try {
+          let url = JSON.parse(item.redirect_data);
+          let params = "";
+          if (item["redirect_params"]) params = `?${item["redirect_params"]}`;
+          this.$xdUniHelper.navigateTo({
+            url: url.page + params,
+          });
+        } catch (e) {
+          console.error(e);
+        }
+      }
 
-        //todo
+      //外部链接
+      if (item.redirect_type === "URL") {
+        let reg = /^(http:\/\/|https:\/\/|\/\/)+.+$/;
+        //#ifdef MP-WEIXIN
+        try {
+          let url = JSON.parse(item.redirect_data);
+          if (reg.test(url.url) && this.$configProject.extras.webview) {
+            console.warn(`广告跳转外站: ${url.url}`);
+            this.$xdUniHelper.navigateTo({
+              url: `${
+                this.$configProject.extras.webview
+              }?seatUrl=${Base64.encodeURI(url.url)}`,
+            });
+          } else {
+            throw Error("地址错误");
+          }
+        } catch (e) {
+          console.error(e);
+        }
+        //#endif
+        //#ifdef H5
+        try {
+          let url = JSON.parse(item.redirect_data);
+          if (reg.test(url.url)) {
+            console.warn(`广告跳转外站: ${url.url}`);
+            window.location.href = url.url;
+          } else {
+            throw Error("地址错误");
+          }
+        } catch (e) {
+          console.error(e);
+        }
+        //#endif
       }
     },
-    watch: {
-      container(value) {
-        this.init(value)
+    getTestData(type) {
+      let width;
+      let height;
+      // 根据type参数，设置width和height
+      if (type == "big") {
+        width = this.bigWidth;
+        height = this.bigHeight;
+      }
+      if (type == "top") {
+        width = this.bigWidth;
+        height = this.smallHeight;
+      }
+      if (type == "bottom") {
+        width = this.bigWidth;
+        height = this.smallHeight;
       }
+      // 创建一个临时数组，用于存放生成的测试数据
+      let temp = [];
+      // 循环number次，生成number个测试数据
+      for (let i = 0; i < this.number; i++) {
+        // 克隆一个测试数据
+        let item = this.$xdUniHelper.cloneDeep(this.test);
+        // 设置content_id和content_name
+        item.content_id = i;
+        item.content_name = item.content_name + i;
+        // 设置图片url
+        item.image_url = `//dummyimage.com/${width}x${height}`;
+        // 将生成的测试数据添加到临时数组中
+        temp.push(item);
+      }
+      // 返回临时数组
+      return temp;
     },
-    created() {
-      this.init(this.container);
+    /**
+     * @description 监听事件变化
+     * @param container {object} 业务组件对象自己
+     */
+    init(container) {
+      this.height = getContainerPropsValue(container, "content.height", "500");
+      // 获取最外面间距，如果没有则设置默认值
+      this.mS = getContainerPropsValue(container, "content.margin", {
+        top: 0,
+        bottom: 0,
+        left: 0,
+        right: 0,
+      });
+      this.position = getContainerPropsValue(container, "content.position", 1);
+      // 获取大小图之间间距，如果没有则设置默认值
+      this.msMargin = getContainerPropsValue(container, "content.msMargin", 10);
+      // 获取安全区域宽度，减去margin的值，再除以2，获取大图宽度
+      this.bigWidth = getWidthHeight(this.height,this.mS,this.msMargin).bigWidth;
+      this.bigHeight = getWidthHeight(this.height,this.mS,this.msMargin).bigHeight;
+      // 获取容器高度，减去margin的值，再除以2，获取小图高度
+      this.smallHeight = getWidthHeight(this.height,this.mS,this.msMargin).smallHeight;
+      // 获取大图数据
+      this.isCarousel = getContainerPropsValue(
+        container,
+        "content.isCarousel",
+        1
+      );
+      this.radius = getContainerPropsValue(container, "content.radius", 0);
+      this.number = getContainerPropsValue(container, "content.number", 1);
+      this.dot_type = getContainerPropsValue(
+        container,
+        "content.dot_type",
+        "dot"
+      );
+      this.carouselTime =
+        Number(getContainerPropsValue(container, "content.carouselTime", 5)) *
+        1000;
+      this.topRadius = getContainerPropsValue(
+        container,
+        "content.topRadius",
+        0
+      );
 
-      //todo
-    },
-    methods: {
-      onJfbLoad(options) {
-
-        // jfbRootExec('baiduUserLogin', {
-
-        //   vm: this,//   data: {
-
-        //     account: 'gaoshiyong',//     password: '123456789',//     type: 3,//     ...options
-
-        //   }
-
-        // }).then().catch()
-      },
-      /**
-       * @description 监听事件变化
-       * @param container {object} 业务组件对象自己
-       */
-      init(container) {
-
-        //this.bgcolor = getContainerPropsValue(container, 'content.bgcolor', '#fff');
-
-        //this.height = getContainerPropsValue(container, 'content.height', 10);
-      },
-      onJfbScroll(options) {
-        console.log('event.onJfbScroll', options)
-      },
-      onJfbReachBottom(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
-      onJfbShow(options) {
-        console.log('event.onJfbShow', options)
-      },
-      onJfbHide(options) {
-        console.log('event.onJfbHide', options)
-      },
-      onJfbBack(options) {
-        console.log('event.onJfbBack', options)
-      },
-      onJfbUpdate(...data) {
-        console.log('event.onJfbUpdate', data)
-      },
-      onJfbCustomEvent(options) {
-        console.log('event.onJfbReachBottom', options)
-      },
-    }
-  }
+      // 获取小图上数据
+      this.topNumber = getContainerPropsValue(
+        container,
+        "content.topNumber",
+        1
+      );
+      this.top_dot_type = getContainerPropsValue(
+        container,
+        "content.top_dot_type",
+        "dot"
+      );
+      this.topIsCarousel = getContainerPropsValue(
+        container,
+        "content.topIsCarousel",
+        1
+      );
+      this.topCarouselTime =
+        Number(
+          getContainerPropsValue(container, "content.topCarouselTime", 5)
+        ) * 1000;
 
+      //获取小图下数据
+      this.bottomNumber = getContainerPropsValue(
+        container,
+        "content.bottomNumber",
+        1
+      );
+      this.bottom_dot_type = getContainerPropsValue(
+        container,
+        "content.bottom_dot_type",
+        "dot"
+      );
+
+      this.bottomRadius = getContainerPropsValue(
+        container,
+        "content.bottomRadius",
+        0
+      );
+      this.bottomIsCarousel = getContainerPropsValue(
+        container,
+        "content.bottomIsCarousel",
+        1
+      );
+      this.bottomCarouselTime =
+        Number(
+          getContainerPropsValue(container, "content.bottomCarouselTime", 5)
+        ) * 1000;
+    },
+    onJfbUpdate(data) {
+      this.onJfbLoad(this.params);
+     }
+  },
+};
 </script>
 
 <style scoped lang="less">
-  @import "./JfbBasePosterBigSmallLess.less";
-
-  .jfb-base-poster-big-small {
-    &__body{
+@import "./JfbBasePosterBigSmallLess.less";
 
+.jfb-base-poster-big-small {
+  &__body {
+    &-wrap {
+      display: flex;
     }
   }
+}
 </style>