jufubao-base 1.0.21 → 1.0.23-beta2

package/src/components/JfbBasePoster/JfbBasePoster.vue

@@ -0,0 +1,733 @@
+<template>
+  <view
+    class="jfb-base-poster"
+    @click="handleEditxSelect"
+    :class="{ editx : isEditx && active }"
+  >
+    <!--#ifdef H5-->
+    <view
+      class="jfb-base-poster__edit"
+      :class="{ editx : isEditx && active }"
+      v-if="isEditx && active"
+    >
+      <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"
+            :style="{
+              width: getOneWidth + 'rpx',
+              height: getOneHeight + 'rpx',
+              borderRadius: (posterType === '1' ? radius: 0) + 'rpx',
+            }"
+          >
+            <xd-swiper-dot
+              :style="{width: getOneWidth + 'rpx', height: getOneHeight + 'rpx'}"
+              v-if="pageSwiperShow"
+              :current="current"
+              :info="info"
+              field="content_name"
+              :mode="mode"
+              :dots-styles="dotStyleData"
+            >
+              <!--#ifdef MP-WEIXIN-->
+              <swiper
+                class="swiper xd-swiper-content"
+                :style="{width: getOneWidth + 'rpx', height: getOneHeight + 'rpx'}"
+                :indicator-dots="false"
+                :autoplay="carouselTime>0"
+                :interval="carouselTime"
+                :duration="500"
+                :current="current"
+                circular
+                @animationfinish="handleAnimationfinish"
+              >
+                <swiper-item v-for="(item,index) in info" :key="index" @click.stop="handleClick(item,index)">
+                  <image :style="{width: getOneWidth + 'rpx', height: getOneHeight + 'rpx'}" :src="item['image_url']" mode="aspectFill"></image>
+                </swiper-item>
+              </swiper>
+              <!--#endif-->
+              <!--#ifdef H5-->
+              <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>
+              <!--#endif-->
+            </xd-swiper-dot>
+            <view v-if="isPreview" class="carousel-mask"></view>
+          </view>
+        </template>
+        <!--一分屏-->
+        <!--多分屏-->
+        <more-screen
+          style="width: 100%; height: 100%"
+          v-if="posterType !== '1'"
+          :config="getConfig"
+          :content="info"
+        ></more-screen>
+        <!--多分屏-->
+      </view>
+    </view>
+    <!--解决图片缓冲预加载问题-->
+    <view v-if="item.image_background_url" v-for="(item,index) in info" :key="index" style="position: absolute; top: -19999px; left: -100000px">
+      <image :src="item.image_background_url" ></image>
+    </view>
+    <!--解决图片缓冲预加载问题-->
+  </view>
+</template>
+
+<script>
+	const color = require('color');
+  import XdFontIcon from "@/components/XdFontIcon/XdFontIcon";
+  import { jfbRootExec } from "@/utils/xd.event";
+  import JfbBasePosterMixin from "./JfbBasePosterMixin";
+  import componentsMixins from "@/mixins/componentsMixins";
+  import extsMixins from "@/mixins/extsMixins"
+  import { getContainerPropsValue } from "@/utils/xd.base";
+  import getServiceUrl from '@/common/getServiceUrl'
+	import XdImage from "@/components/XdImage/XdImage";
+  import XdSwiper from "@/components/XdSwiper/XdSwiper";
+  import MoreScreen from "./MoreScreen";
+  import XdSwiperDot from "./XdSwiperDot";
+
+  export default {
+    name: "JfbBasePoster",
+    components: {
+      XdFontIcon,
+      XdImage,
+      XdSwiper,
+      MoreScreen,
+      XdSwiperDot
+    },
+    mixins: [componentsMixins,extsMixins,JfbBasePosterMixin],
+    data() {
+      return {
+        selfMask: false,
+        pageSwiperShow:false,
+        params: {},
+
+				//Swiper 配置
+        mode:'round', //default 、round 、nav 、dot, indexes
+        current: 0,
+				poster: null,
+        posterPosition: null,
+        posterType: '1',//分屏模式
+				showType: '', //广告显示方式
+				isCarousel: 1, //是否轮播图
+        carouselTime: 5,//轮播图轮播周期
+				useNumber: null, //广告使用张数
+        height: 0, //广告高度
+        outOneHeight:0,//焦点图显示高度
+        width: 0, //广告高度
+				padding: 0, //广告内容之间间距
+        rows: 1, //四分屏起作用
+        radius: 0,
+				timer: null,
+        isSupport: 'N',
+        currentImage: '',
+				info: [],
+        mS: {},//边距
+        bgImagePadding:{},//填充
+				isPreview: false,
+				noData:false,
+        background: '',
+        bgColor:'rgba(0,0,0,0)'
+      }
+    },
+		computed: {
+      getBodyStyle(){
+        let image = {};
+        if(this.background) image = {
+          backgroundImage: `url(${this.getBgImage})`,
+          backgroundSize: '100%',
+          backgroundRepeat: 'no-repeat',
+        }
+        image = Object.assign({},image,{
+          margin: this.margin,
+          padding: this.outPadding,
+          backgroundColor: this.bgColor,
+        })
+        return image
+      },
+      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 outPaddingRL = this.checkValue(this.bgImagePadding.right, paddingDefault) + this.checkValue(this.bgImagePadding.left, paddingDefault);
+        outPaddingRL = outPaddingRL * this.$rpxNum;
+
+        //外边距
+        let marginRL = (this.checkValue(this.mS.right, 0) + this.checkValue(this.mS.left, 0)) *  this.$rpxNum;
+
+        //总统
+        let viewWidth = uni.getSystemInfoSync().safeArea.width - marginRL - outPaddingRL - spacing;
+        let width = viewWidth / cell;
+        let height = this.height * width / this.width;
+
+
+        return {
+          mode: this.getMode,
+          dotStyleData: this.dotStyleData,
+          poster: this.poster,
+          showType: this.showType,
+          isCarousel: this.isCarousel,
+          carouselTime: this.carouselTime,
+          radius: this.radius,
+          padding: this.padding,
+          bgImagePadding: this.bgImagePadding,
+          rows: this.rows,
+          cell,
+          height,
+          width
+				}
+			},
+      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;
+			},
+      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') {
+          if (this.mode === 'nav'
+            || this.mode === 'indexes') {
+            mode = 'dot'
+          }
+        }
+        return mode;
+			},
+      dotStyleData(){
+        let alpha = 1;
+        if(this.posterType === '1') 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',
+          }
+        }
+        if(this.posterType !== '1') {
+          if(this.mode === 'nav'
+						|| this.mode === 'indexes') {
+            this.mode = 'dot'
+					}
+        }
+        return style[this.mode]
+			},
+      getBgImage(){
+        let bg = '';
+        if(this.$xdUniHelper.checkVarType(this.background) === 'object'
+          || this.$xdUniHelper.checkVarType(this.background) === 'array'
+        ) {
+          if(!this.$xdUniHelper.isEmpty(this.background)) {
+            return getServiceUrl(this.background.url)
+          }
+        }
+        return bg
+      },
+
+		},
+    watch: {
+      container(value, oloValue) {
+        if(JSON.stringify(value) === JSON.stringify(oloValue)) return;
+        this.init(value);
+        if(this.timer) clearTimeout(this.timer);
+        this.timer = setTimeout(()=>{
+          if (this.$configProject['isPreview']) this.onJfbLoad()
+				}, 400)
+      },
+      isSupport(n,o) {
+        if(this.isPreview) {
+          if(n==='N') {
+          this.$xdRoot.$emit("setLayoutPageBg", null);
+        } else {
+          this.$xdRoot.$emit("setLayoutPageBg", this.currentImage);
+        }
+        }
+      },
+      rows(n,o) {
+        if(this.isPreview) {
+          if(n!==1) {
+          this.$xdRoot.$emit("setLayoutPageBg", null);
+        } else {
+          this.$xdRoot.$emit("setLayoutPageBg", this.currentImage);
+        }
+        }
+      },
+      isCarousel(n,o) {
+        if(this.isPreview) {
+          if(n!==2) {
+          this.$xdRoot.$emit("setLayoutPageBg", null);
+        } else {
+          this.$xdRoot.$emit("setLayoutPageBg", this.currentImage);
+        }
+        }
+      },
+    },
+    created() {
+      this.isPreview = this.$configProject.isPreview;
+      this.pageSwiperShow = this.$root.$isShow;
+      this.init(this.container);
+    },
+
+    destroyed() {
+      if(this.isSupport==='Y') {
+        this.$xdRoot.$emit('setLayoutPageBg',null);
+        this.pageSwiperShow = false;
+      }
+    },
+
+    methods: {
+      /**
+       * @description 过滤不可以用
+       * 当前项目未H5时,过滤所有小程序应用
+       * 当前项目未小程序时,过滤所有非当前小程序应用
+       * 站外地址直接返回
+       * 站内地址未选值直接返回
+       * 预览模式全过
+       */
+      filterItem(list){
+        let content = list.filter(item=>{
+          //预览模式
+          if( this.$configProject.isPreview) return true;
+
+          //非内部应用
+          if(item.redirect_type !== 'INN') return true
+
+          //没有配置链接
+          if(!item.redirect_data) return true;
+
+          //内部应用
+          else {
+            let redirect_data;
+            try {
+              redirect_data = JSON.parse(item.redirect_data);
+              if(!item['app_type']) item['app_type']= 'h5';
+
+              //#ifdef H5
+              return item['app_type'] !== 'wxmp';
+              //#endif
+
+              //#ifdef MP-WEIXIN
+              let actDir = this.$parent.projectAttr.deploy_dir;
+              let dir = this.getPathDir(redirect_data.page);
+              if(item['app_type'] === 'wxmp'){
+                return actDir === dir;
+              }
+              else if(item['app_type'] === 'h5') return true;
+              else return true
+              //#endif
+            }
+            catch (e) {
+              return true
+            }
+          }
+        });
+        console.warn(`PostersList:${JSON.stringify(content.map(item=>`${item.app_type}:${item.content_name}:${item.redirect_data}`), null,2)}`)
+        return content;
+
+      },
+
+      getPathDir(pathDir){
+        if(pathDir.indexOf('@site_domain@/') === 0) {
+          return pathDir.replace('@site_domain@/','').split('/')[0]
+        }
+        return ''
+      },
+
+      getTestData(){
+        let temp = [];
+        for (let i = 0; i< this.useNumber; i++) {
+          let item = this.$xdUniHelper.cloneDeep(this['posterTest']);
+          item.content_id = i;
+          item.content_name = item.content_name + i;
+          item.image_url = `//dummyimage.com/${this.width}x${this.height}`;
+          temp.push(item)
+				}
+        return temp
+			},
+      handleAnimationfinish(e) {
+        //不支持背景不处理
+        if(this.isSupport==='N') return;
+        console.warn(`handleAnimationfinish.start`)
+        this.pageSwiperShow = this.$root.$isShow;
+
+        //当前组件已被隐藏或者轮播图记录为0条处理
+        if(this.$root.$isShow === false
+          || this.info.length === 0
+          || !(this.rows===1 && this.isCarousel===2) //可用模式
+        ) {
+          this.$xdRoot.$emit("setLayoutPageBg", null);
+          console.warn(`handleAnimationfinish.disabel.poster`)
+          return
+        }
+
+        //开启背景图模式并且为轮播图模式
+        if(this.isSupport==='Y' && this.rows===1 && this.isCarousel===2) {
+          console.warn(`handleAnimationfinish.start.poster`)
+          this.currentImage = this.info[e.detail.current]['image_background_url']
+          let bg = null;
+          if(this.currentImage) bg = this.currentImage;
+          this.$xdRoot.$emit("setLayoutPageBg", bg);
+          this.current = e.detail.current;
+        }
+      },
+
+      handleClick(item) {
+        if(!item.redirect_data) {
+          console.warn(`未配置链接地址: ${item.redirect_data}`);
+          console.error(`未配置链接地址: ${item.redirect_data}`);
+          return
+        }
+
+        //内部链接跳转地址
+        if (item.redirect_type === 'INN') {
+          try {
+            let url = JSON.parse(item.redirect_data);
+            let params = '';
+            if(url.page) {
+              if (item['redirect_params']) params = `?${item['redirect_params']}`;
+              this.$xdUniHelper.navigateTo({url: url.page + params})
+            }
+            else {
+              console.error(`应用链接配置错误: ${url.page}`)
+            }
+          } catch (e) {
+            console.error(`应用链接配置错误: ${item.redirect_data}`)
+          }
+        }
+
+        //外部链接
+        if (item.redirect_type === 'URL') {
+          let reg = /^(http:\/\/|https:\/\/|\/\/)+.+$/;
+          let spReg = /(-apiuri\/v)/;
+          //#ifdef MP-WEIXIN
+          try {
+            let url = JSON.parse(item.redirect_data);
+            if (reg.test(url.url) || spReg.test(url.url)) {
+              console.warn(`广告跳转外站: ${url.url}`)
+              this.$xdUniHelper.navigateTo(url);
+            } else {
+              console.error(`广告跳转外站配置错误: ${url.url}`)
+            }
+          } catch (e) {
+            console.error(`广告跳转外站配置错误: ${item.redirect_data}`)
+          }
+          //#endif
+          //#ifdef H5
+          try {
+            let url = JSON.parse(item.redirect_data);
+            console.warn(`广告跳转外站: ${url.url}`);
+            this.$xdUniHelper.redirectTo(url, false)
+          } catch (e) {
+            console.error(`广告跳转外站配置错误: ${item.redirect_data}`)
+          }
+          //#endif
+
+        }
+
+        //无跳转地址
+        if(item.redirect_type === 'EMP') {
+          console.warn(`无跳转地址`);
+        }
+      },
+
+
+      handleImage(list){
+        list = this.filterItem(list);
+
+      	return list.map((item,index) => {
+          return {
+            ...item,
+            image_background_url: item.image_background_url?getServiceUrl(item.image_background_url):'',
+            image_url: item.image_url?getServiceUrl(item.image_url):''
+          }
+        })
+			},
+      handleOne(list){
+        this.info = this.handleImage(list);
+
+        //轮播图记录为0条处理
+        if( this.info.length === 0)  return
+        let current = this.current || 0;
+        this.currentImage = this.info[current]['image_background_url']
+        if(this.isSupport==='Y' && this.rows===1 && this.isCarousel===2) {
+          this.$xdRoot.$emit("setLayoutPageBg", this.currentImage);
+        }
+			},
+
+      /**
+       * @description 监听事件变化
+       * @param container {object} 业务组件对象自己
+       */
+      init(container) {
+        this.poster = getContainerPropsValue(container, 'content.poster', {size:{width: 750, height: 160}, type: '1'});
+        if (this.poster.type) {
+          this.posterType = this.poster.type
+        }
+        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);
+
+        //静态图，一分屏并且间距为0设置
+        if(this.isCarousel === 1 && this.posterType === '1' &&  this.padding === 0) {
+          this.padding = 20;
+        }
+        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', {});
+        //content
+
+        this.mode = getContainerPropsValue(container, 'content.dot_type', 'dot');
+
+        this.carouselTime = Number(getContainerPropsValue(container, 'content.carouselTime', 5)) * 1000;
+        this.useNumber = getContainerPropsValue(container, 'content.number', 1);
+        this.bgColor = getContainerPropsValue(container, 'content.bgColor', 'rgba(0,0,0,0)')
+
+        if(this.poster.size) {
+          this.width = this.poster.size.width;
+          this.height = this.poster.size.height;
+				}
+      },
+
+      onJfbLoad(options) {
+        this.params = options;
+        jfbRootExec('getListPosterContent', {
+          vm: this,
+          data: {
+            page_id: this.pageAttr['page_id'], //页面ID
+            container_id: this.containerId, //组件ID
+            page_size: this.useNumber //可以不传
+          },
+        })
+          .then(res => {
+
+            //非预览模式或者预览模式返回广告列表
+            if(!this.isPreview ||
+              (this.isPreview && res.list.length > 0)
+            ){
+              this.outOneHeight = this.height * Number(res.list.length) + (Number(this.padding)  * (Number(this.useNumber) - 1));
+            }
+            //预览模式未返回广告列表
+            else {
+              this.outOneHeight = this.height * Number(this.useNumber) + (Number(this.padding)  * (Number(this.useNumber) - 1));
+            }
+            if(res.list.length === 0 && this.isPreview) {
+              res.list = this.getTestData();
+						}
+            if (this.posterType === '1') this.handleOne(res.list);
+            if (this.posterType === '2') this.handleOne(res.list);
+            if (this.posterType === '3') this.handleOne(res.list);
+            if (this.posterType === '4') this.handleOne(res.list);
+            if(this.$configProject.isPreview) this.noData = true;
+            else  this.noData = res.list.length > 0;
+          })
+          .catch(error => {
+            console.error(error)
+          })
+      },
+
+      onJfbShow(){
+        //不支持背景不处理
+        if(this.isSupport==='N') return;
+
+        //启动轮播图
+        this.pageSwiperShow = this.$root.$isShow;
+
+        //隐藏模式或者数据为0不处理
+        if(this.$root.$isShow === false  || this.info.length === 0) {
+          this.$xdRoot.$emit("setLayoutPageBg", null);
+          return;
+        }
+
+        if(this.isSupport==='Y' && this.rows===1 && this.isCarousel===2) {
+          this.$xdRoot.$emit("setLayoutPageBg", this.currentImage);
+        }
+      },
+
+      onJfbHide(){
+        if(this.isSupport==='Y') {
+          this.$xdRoot.$emit('setLayoutPageBg',null);
+          this.pageSwiperShow = false;
+        }
+      },
+
+      onJfbUpdate(data) {
+        this.onJfbLoad(this.params);
+      }
+    }
+  }
+
+</script>
+
+<style scoped lang="less">
+  @import "./JfbBasePosterLess.less";
+
+  .jfb-base-poster {
+    min-height: 60rpx!important;
+    &__body{
+
+      //#ifdef MP-WEIXIN
+      display: inline-block;
+      width: 100%;
+      //#endif
+
+      & > view.jfb-base-poster-cont {
+        box-sizing: border-box;
+        overflow: hidden;
+        justify-content: center;
+        align-items: center;
+        display: flex;
+      }
+
+    }
+		&__one.notCarousel {
+			position: relative;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+      flex-flow: wrap;
+
+			& > view {
+				box-sizing: border-box;
+        overflow: hidden;
+
+        &:last-child {
+          margin-bottom: 0!important;
+        }
+
+				& > image {
+          width: 100%;
+          height: 100%;
+				}
+			}
+		}
+
+		&__one.carousel {
+			position: relative;
+			box-sizing: border-box;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			overflow: hidden;
+
+			& .carousel-mask {
+				position: absolute;
+				left: 0;
+				right: 0;
+				top: 0;
+				bottom: 0;
+				background: rgba(0,0,0,0);
+			}
+		}
+
+  }
+</style>