jufubao-base 1.0.89-beta1 → 1.0.89

package/src/components/JfbBasePosterBigSmall/JfbBasePosterBigSmall.vue

@@ -2,762 +2,109 @@
   <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
-        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>测试插件( {{containerId}} )</view>
     </view>
   </view>
 </template>
 
 <script>
-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";
-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,
-    };
-  },
-  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];
-    },
-  },
-  watch: {
-    container(value) {
-      this.init(value);
-    },
-  },
-  created() {
-    this.init(this.container);
-    this.isPreview = this.$configProject.isPreview;
-  },
-  methods: {
-    onJfbLoad(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;
+  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
     },
-    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);
-        }
-      }
+    mixins: [
+      componentsMixins, extsMixins, JfbBasePosterBigSmallMixin
+    ],
+    data() {
+      return {
 
-      //外部链接
-      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
+        //todo
       }
     },
-    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;
+    watch: {
+      container(value) {
+        this.init(value)
       }
-      // 创建一个临时数组，用于存放生成的测试数据
-      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;
     },
-    /**
-     * @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 =
-        uni.getSystemInfoSync().safeArea.width -
-        (this.mS.left + this.mS.right + Number(this.msMargin)) / 2;
-      this.bigHeight = this.height - (this.mS.top + this.mS.bottom);
-      // 获取容器高度，减去margin的值，再除以2，获取小图高度
-      this.smallHeight =
-        (this.height - (this.mS.top + this.mS.bottom + Number(this.msMargin))) /
-        2;
-      // 获取大图数据
-      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
-      );
+    created() {
+      this.init(this.container);
+
+      //todo
+    },
+    methods: {
+      onJfbLoad(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;
+        // jfbRootExec('baiduUserLogin', {
 
-      //获取小图下数据
-      this.bottomNumber = getContainerPropsValue(
-        container,
-        "content.bottomNumber",
-        1
-      );
-      this.bottom_dot_type = getContainerPropsValue(
-        container,
-        "content.bottom_dot_type",
-        "dot"
-      );
+        //   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.bottomRadius = getContainerPropsValue(
-        container,
-        "content.bottomRadius",
-        0
-      );
-      this.bottomIsCarousel = getContainerPropsValue(
-        container,
-        "content.bottomIsCarousel",
-        1
-      );
-      this.bottomCarouselTime =
-        Number(
-          getContainerPropsValue(container, "content.bottomCarouselTime", 5)
-        ) * 1000;
-    },
-  },
-};
 </script>
 
 <style scoped lang="less">
-@import "./JfbBasePosterBigSmallLess.less";
+  @import "./JfbBasePosterBigSmallLess.less";
+
+  .jfb-base-poster-big-small {
+    &__body{
 
-.jfb-base-poster-big-small {
-  &__body {
-    &-wrap {
-      display: flex;
     }
   }
-}
 </style>