captain-ui/es/scroll/src/main.js

有赞vue wap业务组件库

import "vant/es/icon/style";
import _Icon from "vant/es/icon";

var _components;

import mapKeysToCamelCase from '@youzan/utils/string/mapKeysToCamelCase';
import Mask from './components/mask';
import Swiper from './components/swiper';
import Slide from './components/slide';
import Coffee from './components/coffee';
import LoadDirective from './directive/load';
import setViewport from './utils/viewport';
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-scroll"
    }, [_vm.loadingImg ? _c('div', {
      staticClass: "cap-scroll__loading"
    }) : _vm._e(), _c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: !_vm.loadingImg,
        expression: "!loadingImg"
      }]
    }, [_vm.$attrs['has-page-wipe'] ? _c('cap-scroll-mask', {
      attrs: {
        "has-page-wipe": _vm.$attrs['has-page-wipe'],
        "mask-url": _vm.$attrs['wipe-image-url'],
        "bg-url": _vm.firstPageImageUrl
      },
      on: {
        "remove": function remove($event) {
          _vm.showSwiper = true;
        }
      }
    }) : _vm._e(), _c('div', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.showSwiper,
        expression: "showSwiper"
      }],
      staticClass: "cap-scroll__content"
    }, [_vm.showHome ? _c('a', {
      attrs: {
        "href": _vm.homeLink
      }
    }, [_c('van-icon', {
      staticClass: "cap-scroll__home-icon",
      attrs: {
        "name": "wap-home"
      }
    })], 1) : _vm._e(), _vm.showSwiper && _vm.showAudio && !_vm.loadingImg ? _c('div', {
      staticClass: "cap-scroll__media"
    }, [_c('van-icon', {
      staticClass: "cap-scroll__audio-icon",
      attrs: {
        "name": "audio"
      }
    }), _c('audio', {
      ref: "audio",
      attrs: {
        "src": _vm.audioUrl,
        "loop": ""
      }
    }), _c('cap-scroll-coffee', {
      attrs: {
        "steam-height": 100,
        "steam-width": 80
      }
    }, [_c('img', {
      attrs: {
        "src": "//b.yzcdn.cn/v2/image/scroll/audio_widget_01@2x.png",
        "alt": "coffee"
      }
    })])], 1) : _vm._e(), _c('img', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.showIndicator,
        expression: "showIndicator"
      }],
      staticClass: "cap-scroll__indicator",
      attrs: {
        "src": "//b.yzcdn.cn/v2/image/scroll/gesture_mini.png",
        "alt": "滑动提示",
        "width": "230",
        "height": "280"
      }
    }), _c('cap-scroll-swiper', {
      ref: "swiper",
      attrs: {
        "loop": _vm.$attrs['loop'],
        "effect": _vm.$attrs['flipway']
      },
      on: {
        "pagechange": _vm.onPageChange
      }
    }, _vm._l(_vm.list, function (item, index) {
      return _c('cap-scroll-slide', {
        directives: [{
          name: "load",
          rawName: "v-load",
          value: _vm.loadResource,
          expression: "loadResource"
        }],
        key: index,
        attrs: {
          "active": _vm.activeIndex === index,
          "enter-class": _vm.enterClass,
          "leave-active-class": _vm.leaveActiveClass,
          "data": item,
          "index": index
        }
      });
    }), 1)], 1)], 1)]);
  },
  name: 'cap-scroll',
  directives: {
    load: LoadDirective
  },
  components: (_components = {}, _components[_Icon.name] = _Icon, _components[Mask.name] = Mask, _components[Swiper.name] = Swiper, _components[Slide.name] = Slide, _components[Coffee.name] = Coffee, _components),
  inheritAttrs: false,
  props: {
    showHome: {
      type: Boolean,
      default: true
    },
    hasAudio: {
      type: Boolean,
      default: false
    },
    audioUrl: {
      type: String,
      default: ''
    },
    scenes: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    flipway: {
      type: String,
      default: 'default'
    },
    firstPageImageUrl: String,
    lastPageImageUrl: String
  },
  data: function data() {
    var global = window._global;
    var homeLink = global.url.wap + "/showcase/home?kdt_id=" + global.kdt_id;
    var showSwiper = !this.$attrs['has-page-wipe'];
    return {
      homeLink: homeLink,
      showSwiper: showSwiper,
      showIndicator: true,
      loadingImg: true,
      activeIndex: 0,
      enterClass: '',
      leaveActiveClass: '',
      slideCount: 0
    };
  },
  computed: {
    list: function list() {
      return [{
        imageUrl: this.firstPageImageUrl
      }].concat(this.scenes, [{
        imageUrl: this.lastPageImageUrl
      }]).map(function (item) {
        return mapKeysToCamelCase(item);
      });
    },
    showAudio: function showAudio() {
      return this.hasAudio && !!this.audioUrl;
    }
  },
  watch: {
    showSwiper: function showSwiper(val) {
      var _this = this;

      if (val && !this.loadingImg) {
        this.$nextTick(function () {
          _this.playMedia();
        });
      }
    },
    loadingImg: function loadingImg(val) {
      var _this2 = this;

      if (!val && this.showSwiper) {
        this.$nextTick(function () {
          _this2.playMedia();
        });
      }
    }
  },
  created: function created() {
    setViewport();
  },
  methods: {
    onPageChange: function onPageChange(cur, prev, direction) {
      this.showIndicator && (this.showIndicator = false);
      this.activeIndex = cur;
      this.enterClass = "slide-enter-" + direction;
      this.leaveActiveClass = "slide-" + this.flipway + "-" + direction + "-leave-active";
    },
    loadResource: function loadResource(total) {
      !this.slideCount && (this.slideCount = this.$refs.swiper.$slots.default.length);

      if (this.slideCount && this.slideCount === total) {
        this.loadingImg = false;
      }
    },
    playMedia: function playMedia() {
      this.$refs.audio.play();
    }
  }
};