captain-ui/lib/scroll-nav/src/main.js

有赞vue wap业务组件库

"use strict";

var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");

exports.__esModule = true;
exports.default = void 0;

var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));

require("vant/es/icon/style");

var _icon = _interopRequireDefault(require("vant/es/icon"));

var _fullfillImage = _interopRequireDefault(require("@youzan/utils/fullfillImage"));

var _mapKeysToCamelCase = _interopRequireDefault(require("@youzan/utils/string/mapKeysToCamelCase"));

var _swiper = _interopRequireDefault(require("./components/swiper"));

var _slide = _interopRequireDefault(require("./components/slide"));

var _viewport = _interopRequireDefault(require("./utils/viewport"));

var _components;

var _default2 = {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-scroll-nav"
    }, [_vm.showHome ? _c('a', {
      attrs: {
        "href": _vm.homeLink
      }
    }, [_c('van-icon', {
      staticClass: "cap-scroll-nav__icon",
      attrs: {
        "name": "wap-home"
      }
    })], 1) : _vm._e(), _c('div', {
      staticClass: "cap-scroll-nav__bg",
      style: _vm.bgStyle
    }), _c('div', {
      class: _vm.maskClass
    }), _c('cap-scroll-nav-swiper', {
      attrs: {
        "need-animation": _vm.$attrs['need-animation']
      },
      on: {
        "toggle": _vm.onMaskToggle,
        "pagechange": _vm.onPageChange
      }
    }, _vm._l(_vm.list, function (item, index) {
      return _c('cap-scroll-nav-slide', {
        key: index,
        attrs: {
          "data-index": index,
          "active": index === _vm.activeSlide,
          "data": item,
          "nav-animation": _vm.$attrs['nav-animation'],
          "nav-style": _vm.$attrs['nav-style']
        }
      });
    }), 1)], 1);
  },
  name: 'cap-scroll-nav',
  components: (_components = {}, _components[_icon.default.name] = _icon.default, _components[_swiper.default.name] = _swiper.default, _components[_slide.default.name] = _slide.default, _components),
  inheritAttrs: false,
  props: {
    showHome: {
      type: Boolean,
      required: true,
      default: true
    },
    bgList: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    navList: {
      type: Array,
      default: function _default() {
        return [];
      }
    }
  },
  data: function data() {
    var global = window._global;
    var homeLink = global.url.wap + "/showcase/home?kdt_id=" + global.kdt_id;
    var defaultList = new Array(2).fill({
      title: '标题',
      sub_title: '副标题' // eslint-disable-line

    });
    var list = (0, _mapKeysToCamelCase.default)((0, _extends2.default)(defaultList, this.navList));
    return {
      showMask: false,
      homeList: homeLink,
      list: list,
      activeSlide: 0,
      addAnimation: false
    };
  },
  computed: {
    bgUrl: function bgUrl() {
      var randomIndex = Math.floor(Math.random() * this.bgList.length);

      if (this.bgList.length > 0) {
        return (0, _fullfillImage.default)(this.bgList[randomIndex], '!640x320.jpg');
      }

      return 'https://b.yzcdn.cn/v2/image/scroll_nav/default.gif';
    },
    bgStyle: function bgStyle() {
      // 若有多张背景图传入，随机
      return {
        backgroundImage: "url(" + this.bgUrl + ")"
      };
    },
    maskClass: function maskClass() {
      return ['cap-scroll-nav__mask', {
        'cap-scroll-nav__mask--show': this.showMask
      }];
    }
  },
  watch: {
    activeSlide: function activeSlide(val) {
      if (val === 0) {
        this.showMask = false;
      } else {
        this.showMask = true;
      }
    }
  },
  created: function created() {
    (0, _viewport.default)();
  },
  methods: {
    onMaskToggle: function onMaskToggle(val) {
      this.showMask = val;
    },
    onPageChange: function onPageChange(index) {
      this.activeSlide = index;
    },
    onSlideShow: function onSlideShow(index) {
      if (index <= 1) {
        return true;
      }
    }
  }
};
exports.default = _default2;