captain-ui/es/image-ad/src/image-ad.js

有赞vue wap业务组件库

import "vant/es/swipe-item/style";
import _SwipeItem from "vant/es/swipe-item";
import "vant/es/swipe/style";
import _Swipe from "vant/es/swipe";
var SHOW_METHOD_MAP = {
  split: 1,
  swipe: 5,
  slide: 6,
  top2end: 7
};
var SIZE_MAP = {
  large: 0,
  small: 1
};
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

    var _c = _vm._self._c || _h;

    return _c('div', {
      staticClass: "cap-image-ad",
      class: {
        'cap-image-ad--swipe': _vm.showType === 'swipe'
      }
    }, [_vm.showType === 'swipe' ? [_c('van-swipe', {
      style: {
        height: _vm.swipeHeight + 'px'
      },
      attrs: {
        "autoplay": 5000
      }
    }, _vm._l(_vm.images, function (item, index) {
      return _c('van-swipe-item', {
        key: index
      }, [item.link_url ? [_c('a', {
        staticClass: "cap-image-ad__link swipe-image-container",
        attrs: {
          "href": item.link_url
        }
      }, [item.title ? _c('h3', {
        staticClass: "cap-image-ad__title swipe-title"
      }, [_vm._v("\n              " + _vm._s(item.title) + "\n            ")]) : _vm._e(), _c('div', {
        staticClass: "background-center",
        style: {
          height: _vm.swipeHeight + 'px',
          width: '100%',
          backgroundImage: 'url(' + item.image_url + ')',
          backgroundSize: _vm.backgroundSize
        }
      }, [_c('img', {
        staticClass: "transparent__img",
        attrs: {
          "src": item.image_url,
          "alt": ""
        }
      })])])] : [_c('div', {
        staticClass: "image-wrapper swipe-image-container"
      }, [item.title ? _c('h3', {
        staticClass: "cap-image-ad__title swipe-title"
      }, [_vm._v("\n              " + _vm._s(item.title) + "\n            ")]) : _vm._e(), _c('div', {
        staticClass: "background-center",
        style: {
          height: _vm.swipeHeight + 'px',
          width: '100%',
          backgroundImage: 'url(' + item.image_url + ')',
          backgroundSize: _vm.backgroundSize
        }
      }, [_c('img', {
        staticClass: "transparent__img",
        attrs: {
          "src": item.image_url,
          "alt": ""
        }
      })])])]], 2);
    }), 1)] : _vm.showType === 'split' ? [_c('ul', _vm._l(_vm.splitPictures, function (item, index) {
      return _c('li', {
        key: index,
        staticClass: "cap-image-ad__content",
        class: {
          'cap-image-ad__content--small': _vm.showSize === 'small'
        },
        style: {
          height: item.splitShowHeight + 'px'
        }
      }, [item.link_url ? [_c('a', {
        staticClass: "cap-image-ad__link",
        attrs: {
          "href": item.link_url
        }
      }, [item.title ? _c('h3', {
        staticClass: "cap-image-ad__title"
      }, [_vm._v("\n              " + _vm._s(item.title) + "\n            ")]) : _vm._e(), _c('img', {
        directives: [{
          name: "lazy",
          rawName: "v-lazy",
          value: item.image_url,
          expression: "item.image_url"
        }],
        staticClass: "cap-image-ad__image",
        attrs: {
          "alt": ""
        }
      })])] : [_c('div', {
        staticClass: "image-wrapper"
      }, [item.title ? _c('h3', {
        staticClass: "cap-image-ad__title"
      }, [_vm._v("\n              " + _vm._s(item.title) + "\n            ")]) : _vm._e(), _c('img', {
        directives: [{
          name: "lazy",
          rawName: "v-lazy",
          value: item.image_url,
          expression: "item.image_url"
        }],
        staticClass: "cap-image-ad__image",
        attrs: {
          "alt": ""
        }
      })])]], 2);
    }), 0)] : _vm.showType === 'slide' ? [_c('div', {
      staticClass: "cap-image-ad__slide",
      class: {
        'slide-small': _vm.showSize == 'small'
      },
      style: {
        height: _vm.slideShowHeight + 'px'
      }
    }, _vm._l(_vm.slidePictures, function (item, index) {
      return _c('div', {
        key: index,
        staticClass: "image-wrapper",
        style: {
          width: item.slideShowWidth + 'px',
          marginRight: _vm.borderWidth + 'px'
        }
      }, [item.link_url ? [_c('a', {
        staticClass: "cap-image-ad__link",
        attrs: {
          "href": item.link_url
        }
      }, [item.title ? _c('h3', {
        staticClass: "cap-image-ad__title"
      }, [_vm._v("\n              " + _vm._s(item.title) + "\n            ")]) : _vm._e(), _c('img', {
        directives: [{
          name: "lazy",
          rawName: "v-lazy",
          value: item.image_url,
          expression: "item.image_url"
        }],
        staticClass: "cap-image-ad__image",
        attrs: {
          "alt": ""
        }
      })])] : [item.title ? _c('h3', {
        staticClass: "cap-image-ad__title "
      }, [_vm._v("\n            " + _vm._s(item.title) + "\n          ")]) : _vm._e(), _c('img', {
        directives: [{
          name: "lazy",
          rawName: "v-lazy",
          value: item.image_url,
          expression: "item.image_url"
        }],
        staticClass: "cap-image-ad__image",
        attrs: {
          "alt": ""
        }
      })]], 2);
    }), 0)] : _vm.showType === 'top2end' ? [_c('ul', _vm._l(_vm.top2endPictures, function (item, index) {
      return _c('li', {
        key: index,
        staticClass: "cap-image-ad__content top2end-img-container",
        class: {
          'hotarea-pic-container': _vm.hasHotArea
        },
        style: {
          height: item.showHeight + 'px',
          margin: _vm.borderWidth + 'px 0'
        }
      }, [item.link_type == 'hotarea' ? [item.title ? _c('h3', {
        staticClass: "cap-image-ad__title"
      }, [_vm._v("\n            " + _vm._s(item.title) + "\n          ")]) : _vm._e(), _c('img', {
        directives: [{
          name: "lazy",
          rawName: "v-lazy",
          value: item.image_url,
          expression: "item.image_url"
        }],
        staticClass: "cap-image-ad__image",
        attrs: {
          "alt": ""
        }
      }), _vm._l(item.hot_areas, function (area) {
        return _c('a', {
          staticClass: "hotarea-link",
          class: {
            'hotarea-link-border': _vm.hotareaLinkBorder
          },
          style: {
            top: area.top + 'px',
            left: area.left + 'px',
            width: area.width + 'px',
            height: area.height + 'px'
          },
          attrs: {
            "href": area.link_url
          }
        });
      })] : item.link_url ? [_c('a', {
        staticClass: "cap-image-ad__link",
        attrs: {
          "href": item.link_url
        }
      }, [item.title ? _c('h3', {
        staticClass: "cap-image-ad__title"
      }, [_vm._v("\n              " + _vm._s(item.title) + "\n            ")]) : _vm._e(), _c('img', {
        directives: [{
          name: "lazy",
          rawName: "v-lazy",
          value: item.image_url,
          expression: "item.image_url"
        }],
        staticClass: "cap-image-ad__image",
        attrs: {
          "alt": ""
        }
      })])] : [_c('div', {
        staticClass: "image-wrapper"
      }, [item.title ? _c('h3', {
        staticClass: "cap-image-ad__title"
      }, [_vm._v("\n              " + _vm._s(item.title) + "\n            ")]) : _vm._e(), _c('img', {
        directives: [{
          name: "lazy",
          rawName: "v-lazy",
          value: item.image_url,
          expression: "item.image_url"
        }],
        staticClass: "cap-image-ad__image",
        attrs: {
          "alt": ""
        }
      })])]], 2);
    }), 0)] : _vm.showType === 'image_nav' ? [_c('div', {
      staticClass: "cap-image-ad__image-nav",
      style: {
        overflowX: _vm.fixedMode ? 'hidden' : 'scroll',
        backgroundColor: _vm.backgroundColor
      }
    }, _vm._l(_vm.imageNavPictures, function (item, index) {
      return _c('div', {
        key: index,
        staticClass: "image-wrapper",
        style: {
          width: item.navShowWidth + 'px',
          marginRight: _vm.borderWidth + 'px'
        }
      }, [_c('a', {
        staticClass: "cap-image-ad__link cap-image-ad__link--image-nav",
        style: {
          color: _vm.color
        },
        attrs: {
          "href": item.link_url ? item.link_url : 'javascript:;'
        }
      }, [_c('div', {
        directives: [{
          name: "lazy",
          rawName: "v-lazy:background-image",
          value: item.image_url,
          expression: "item.image_url",
          arg: "background-image"
        }],
        staticClass: "cap-image-ad__image",
        style: {
          height: _vm.imageNavImgShowHeight + 'px',
          width: item.navShowWidth + 'px'
        }
      }), _c('h3', {
        staticClass: "cap-image-ad__nav-title"
      }, [_vm._v(_vm._s(item.title))])])]);
    }), 0)] : _vm.showType === 'text_nav' ? [_c('div', {
      staticClass: "cap-image-ad__slide cap-image-ad__text-nav",
      style: {
        overflowX: _vm.fixedMode ? 'hidden' : 'scroll'
      }
    }, _vm._l(_vm.images, function (item, index) {
      return _c('a', {
        key: index,
        staticClass: "text-nav-wrapper",
        style: {
          width: _vm.textNavWidth + 'px',
          color: _vm.color,
          backgroundColor: _vm.backgroundColor
        },
        attrs: {
          "href": item.link_url ? item.link_url : 'javascript:;'
        }
      }, [_c('h3', {
        staticClass: "cap-image-ad__nav-title"
      }, [_vm._v(_vm._s(item.title))])]);
    }), 0)] : _vm._e()], 2);
  },
  name: 'cap-image-ad',
  components: {
    'van-swipe': _Swipe,
    'van-swipe-item': _SwipeItem
  },
  props: {
    showMethod: {
      type: [String, Number],
      default: SHOW_METHOD_MAP.swipe
    },
    size: {
      type: [String, Number],
      default: SIZE_MAP.large
    },
    count: {
      type: [String, Number],
      default: 3
    },
    images: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    swipeFill: {
      type: Boolean,
      default: false
    },
    hotareaLinkBorder: {
      type: Boolean,
      default: false
    },
    borderWidth: {
      type: [String, Number],
      default: 0
    },
    backgroundColor: {
      type: String,
      default: '#ffffff'
    },
    color: {
      type: String,
      default: '#000000'
    },
    slideSetting: {
      type: [String, Number],
      default: '0'
    },
    // 滑动模式下，一屏最后一张图片隐藏比例
    slideUnvisibleRatio: {
      type: Number,
      default: 0.8
    }
  },
  data: function data() {
    return {
      clientWidth: 0
    };
  },
  computed: {
    showType: function showType() {
      var type = '';

      switch (+this.showMethod) {
        case 0:
          type = 'swipe';
          break;

        case 1:
          type = 'split';
          break;

        case 5:
          type = 'swipe';
          break;

        case 6:
          type = 'slide';
          break;

        case 7:
          type = 'top2end';
          break;

        case 8:
          type = 'image_nav';
          break;

        case 9:
          type = 'text_nav';
          break;

        default:
          type = 'swipe';
      }

      return type;
    },
    showSize: function showSize() {
      var showSize = 'big';

      switch (+this.size) {
        case 0:
          showSize = 'big';
          break;

        case 1:
          showSize = 'small';
          break;

        case 2:
          showSize = 'custom';
          break;

        default:
          showSize = 'big';
      }

      return showSize;
    },
    fixedMode: function fixedMode() {
      return String(this.slideSetting) === '0';
    },
    // 计算图片导航中每个图片的高度
    imageNavImgCalcHeight: function imageNavImgCalcHeight() {
      // 计算第一个图片的高度，第一个图片的高度作为所有图片的高度
      var rowImgHeight = 0;

      if (this.images.length === 0) {
        return rowImgHeight;
      }

      var firstImg = this.images[0];
      var imageWidth = firstImg.image_width;
      var imageHeight = firstImg.image_height; // 允许滑动 则最后一张图片显示20%

      var offset = this.fixedMode ? 0 : this.slideUnvisibleRatio;
      var showCnt = this.count;

      if (this.fixedMode) {
        showCnt = this.images.length;
      }

      try {
        rowImgHeight = this.clientWidth / (showCnt - offset) * imageHeight / imageWidth;
      } catch (e) {
        return 0;
      }

      return rowImgHeight;
    },
    imageNavImgShowHeight: function imageNavImgShowHeight() {
      return Math.floor(this.imageNavImgCalcHeight);
    },
    // 图片导航显示的图片
    imageNavPictures: function imageNavPictures() {
      var _this = this;

      var hasTitle = false;
      var firstImg = this.images[0];
      var imageWidth = firstImg.image_width;
      var imageHeight = firstImg.image_height;
      this.images.forEach(function (img) {
        img.navShowWidth = Math.ceil(_this.imageNavImgCalcHeight / imageHeight * imageWidth);

        if (!hasTitle) {
          hasTitle = !!img.title;
        }
      });

      if (hasTitle) {
        for (var _iterator = this.images, _isArray = Array.isArray(_iterator), _i = 0, _iterator = _isArray ? _iterator : _iterator[Symbol.iterator]();;) {
          var _ref;

          if (_isArray) {
            if (_i >= _iterator.length) break;
            _ref = _iterator[_i++];
          } else {
            _i = _iterator.next();
            if (_i.done) break;
            _ref = _i.value;
          }

          var img = _ref;
          img.title = img.title || ' ';
        }
      }

      return this.images;
    },
    // 文本导航，每个菜单的宽度
    textNavWidth: function textNavWidth() {
      try {
        // 允许滑动 则最后一个菜单显示20%
        var offset = this.fixedMode ? 0 : this.slideUnvisibleRatio;
        var showCnt = this.count;

        if (this.fixedMode) {
          showCnt = this.images.length;
        }

        return Math.ceil(this.clientWidth / (showCnt - offset));
      } catch (e) {
        return 0;
      }
    },
    // 滑动显示的高度
    slideShowHeight: function slideShowHeight() {
      // 计算第一个图片的高度
      // 1、获取父元素的宽度(，大图为40%)
      var rowHeight = 0;

      if (this.images.length === 0) {
        return rowHeight;
      }

      var firstImg = this.images[0];
      var imageWidth = firstImg.image_width;
      var imageHeight = firstImg.image_height;

      try {
        if (this.showSize === 'big') {
          // 活动大图，第一张图显示宽度为父元素宽度的88%
          rowHeight = Math.ceil(this.clientWidth * 0.88 * imageHeight / imageWidth);
        } else if (this.showSize === 'small') {
          // 活动小图，第一张图显示宽度为父元素宽度的40%
          rowHeight = Math.ceil(this.clientWidth * 0.4 * imageHeight / imageWidth);
        } else {
          rowHeight = Math.floor((this.clientWidth - this.count * 2) / (this.count - this.slideUnvisibleRatio) * imageHeight / imageWidth);
        }
      } catch (e) {
        return 0;
      }

      return rowHeight;
    },
    // 滑动显示的图片
    slidePictures: function slidePictures() {
      for (var _iterator2 = this.images, _isArray2 = Array.isArray(_iterator2), _i2 = 0, _iterator2 = _isArray2 ? _iterator2 : _iterator2[Symbol.iterator]();;) {
        var _ref2;

        if (_isArray2) {
          if (_i2 >= _iterator2.length) break;
          _ref2 = _iterator2[_i2++];
        } else {
          _i2 = _iterator2.next();
          if (_i2.done) break;
          _ref2 = _i2.value;
        }

        var img = _ref2;
        img.slideShowWidth = Math.floor(this.slideShowHeight / img.image_height * img.image_width);
      }

      return this.images;
    },
    splitPictures: function splitPictures() {
      var showWidth = this.clientWidth;

      if (this.showSize === 'small') {
        showWidth = Math.floor(showWidth / 2) - 2;

        for (var _iterator3 = this.images, _isArray3 = Array.isArray(_iterator3), _i3 = 0, _iterator3 = _isArray3 ? _iterator3 : _iterator3[Symbol.iterator]();;) {
          var _ref3;

          if (_isArray3) {
            if (_i3 >= _iterator3.length) break;
            _ref3 = _iterator3[_i3++];
          } else {
            _i3 = _iterator3.next();
            if (_i3.done) break;
            _ref3 = _i3.value;
          }

          var img = _ref3;
          img.splitShowHeight = showWidth;
        }
      } else {
        for (var _iterator4 = this.images, _isArray4 = Array.isArray(_iterator4), _i4 = 0, _iterator4 = _isArray4 ? _iterator4 : _iterator4[Symbol.iterator]();;) {
          var _ref4;

          if (_isArray4) {
            if (_i4 >= _iterator4.length) break;
            _ref4 = _iterator4[_i4++];
          } else {
            _i4 = _iterator4.next();
            if (_i4.done) break;
            _ref4 = _i4.value;
          }

          var _img = _ref4;
          var rate = showWidth / _img.image_width;
          _img.splitShowHeight = Math.floor(rate * _img.image_height);
        }
      }

      return this.images;
    },
    // 从上而下显示的图片存在热区，对热区进行处理
    top2endPictures: function top2endPictures() {
      for (var _iterator5 = this.images, _isArray5 = Array.isArray(_iterator5), _i5 = 0, _iterator5 = _isArray5 ? _iterator5 : _iterator5[Symbol.iterator]();;) {
        var _ref5;

        if (_isArray5) {
          if (_i5 >= _iterator5.length) break;
          _ref5 = _iterator5[_i5++];
        } else {
          _i5 = _iterator5.next();
          if (_i5.done) break;
          _ref5 = _i5.value;
        }

        var img = _ref5;
        var rate = this.clientWidth / img.image_width;
        img.showHeight = Math.floor(rate * img.image_height);

        if (img.link_type === 'hotarea') {
          img.hot_areas = img.hot_areas || [];

          for (var _iterator6 = img.hot_areas, _isArray6 = Array.isArray(_iterator6), _i6 = 0, _iterator6 = _isArray6 ? _iterator6 : _iterator6[Symbol.iterator]();;) {
            var _ref6;

            if (_isArray6) {
              if (_i6 >= _iterator6.length) break;
              _ref6 = _iterator6[_i6++];
            } else {
              _i6 = _iterator6.next();
              if (_i6.done) break;
              _ref6 = _i6.value;
            }

            var area = _ref6;
            area.top = Math.floor(area.start_y * rate);
            area.left = Math.floor(area.start_x * rate);
            area.width = Math.floor((area.end_x - area.start_x) * rate);
            area.height = Math.floor((area.end_y - area.start_y) * rate);
          }
        }
      }

      return this.images;
    },
    // swipe组件显示的高度
    swipeHeight: function swipeHeight() {
      var firstImg = this.images[0];
      return Math.ceil(this.clientWidth * (firstImg.image_height / firstImg.image_width));
    },
    backgroundSize: function backgroundSize() {
      if (this.swipeFill) {
        return 'cover';
      } // 计算留白区域。如果留白区域比较小，则cover


      var maxBlankRate = 0;

      for (var _iterator7 = this.images, _isArray7 = Array.isArray(_iterator7), _i7 = 0, _iterator7 = _isArray7 ? _iterator7 : _iterator7[Symbol.iterator]();;) {
        var _ref7;

        if (_isArray7) {
          if (_i7 >= _iterator7.length) break;
          _ref7 = _iterator7[_i7++];
        } else {
          _i7 = _iterator7.next();
          if (_i7.done) break;
          _ref7 = _i7.value;
        }

        var img = _ref7;
        // 图片实际的显示高度
        var imgShowHeight = this.clientWidth * (img.image_height / img.image_width); // 被隐藏的高度

        var blank = Math.abs(this.swipeHeight - imgShowHeight);
        var blankRate = blank / this.swipeHeight;

        if (maxBlankRate < blankRate) {
          maxBlankRate = blankRate;
        }
      }

      if (maxBlankRate < 0.03) {
        return 'cover';
      }

      return 'contain';
    },
    // 是否有热区显示
    hasHotArea: function hasHotArea() {
      var flag = false;

      for (var _iterator8 = this.images, _isArray8 = Array.isArray(_iterator8), _i8 = 0, _iterator8 = _isArray8 ? _iterator8 : _iterator8[Symbol.iterator]();;) {
        var _ref8;

        if (_isArray8) {
          if (_i8 >= _iterator8.length) break;
          _ref8 = _iterator8[_i8++];
        } else {
          _i8 = _iterator8.next();
          if (_i8.done) break;
          _ref8 = _i8.value;
        }

        var img = _ref8;

        if (img.link_type === 'hotarea') {
          flag = true;
          break;
        }
      }

      return flag;
    }
  },
  mounted: function mounted() {
    var _this2 = this;

    this.$nextTick(function () {
      _this2.clientWidth = _this2.$el.clientWidth;
    }); // 等待500ms再取容器的宽度。因为滚动条可能延后出现，需要获取容器真实的显示宽度

    setTimeout(function () {
      _this2.clientWidth = _this2.$el.clientWidth;
    }, 500);
  }
};