captain-ui/es/showcase-audio/src/AudioPlayer.js

有赞vue wap业务组件库

import "vant/es/icon/style";
import _Icon from "vant/es/icon";
import AudioController from '../../audio-controller/index';
import Slider from '../../slider/index';
var audioControllerMixin = AudioController.audioControllerMixin;
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-audio",
      class: _vm.audioClass,
      attrs: {
        "data-reload": _vm.reload
      }
    }, [+_vm.audioStyle === 0 ? _c('div', {
      staticClass: "cap-audio-weixin",
      class: {
        'cap-audio-weixin--right': _vm.bubble === 'right'
      },
      on: {
        "click": _vm.trigger
      }
    }, [_c('img', {
      staticClass: "cap-audio-logo",
      attrs: {
        "src": _vm.logo,
        "alt": "音频播放logo"
      }
    }), _c('span', {
      staticClass: "cap-audio-bar"
    }, [_c('img', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.isPlaying,
        expression: "isPlaying"
      }],
      staticClass: "cap-audio-animation",
      attrs: {
        "src": _vm.playerImg,
        "alt": "播放器动画"
      }
    }), _c('i', {
      staticClass: "cap-audio-animation-static"
    }), _c('img', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.isLoading,
        expression: "isLoading"
      }],
      staticClass: "cap-audio-loading",
      attrs: {
        "src": _vm.loadingIcon,
        "alt": "loading"
      }
    })]), _vm.isLoaded ? _c('span', {
      staticClass: "cap-audio-time"
    }, [_vm._v("\n      " + _vm._s(_vm.formatedDuration) + "\n    ")]) : _vm._e()]) : _c('div', {
      staticClass: "cap-audio--music"
    }, [_c('van-icon', {
      staticClass: "cap-audio-btn",
      attrs: {
        "name": _vm.statusIconName
      },
      on: {
        "click": _vm.trigger
      }
    }), _c('div', {
      staticClass: "cap-audio-info"
    }, [_c('h4', {
      staticClass: "cap-audio-title"
    }, [_vm._v(_vm._s(_vm.title))]), _c('img', {
      directives: [{
        name: "show",
        rawName: "v-show",
        value: _vm.isLoading,
        expression: "isLoading"
      }],
      staticClass: "cap-audio-loading",
      attrs: {
        "src": _vm.loadingIcon,
        "alt": "loading"
      }
    }), _c('cap-slider', {
      attrs: {
        "value": _vm.percentage,
        "inactive": _vm.isSliderDisabled,
        "pivot-offset": "-2px",
        "color": "#fff",
        "inactive-color": "#fff",
        "finished-color": "#07c160"
      },
      on: {
        "valueUpdate": _vm.updateProgress
      }
    }), _vm.isLoaded ? _c('span', {
      staticClass: "cap-audio-time"
    }, [_vm._v("\n        " + _vm._s(_vm.formatedCurrentTime) + "\n      ")]) : _vm._e(), _vm.isLoaded ? _c('span', {
      staticClass: "cap-audio-duration"
    }, [_vm._v("\n        " + _vm._s(_vm.formatedDuration) + "\n      ")]) : _vm._e()], 1)], 1)]);
  },
  name: 'cap-showcase-audio-player',
  components: {
    'cap-slider': Slider,
    'van-icon': _Icon
  },
  mixins: [audioControllerMixin],
  props: {
    audioStyle: {
      type: [String, Number],
      default: '0'
    },
    logo: {
      type: String,
      default: ''
    },
    bubble: {
      type: String,
      default: 'left'
    },
    title: {
      type: String,
      default: ''
    },
    reload: {
      type: Boolean,
      defaut: false
    }
  },
  data: function data() {
    return {
      isSliderDisabled: true
    };
  },
  computed: {
    playerImg: function playerImg() {
      var img = this.bubble === 'left' ? 'player' : 'green_player';
      return "https://img.yzcdn.cn/v2/image/wap/audio/" + img + ".gif";
    },
    loadingIcon: function loadingIcon() {
      return 'https://img.yzcdn.cn/v2/image/wap/common/loading.gif';
    },
    audioClass: function audioClass() {
      if (!this.isLoaded) return;
      return {
        'cap-audio-status-play': this.isPlaying,
        'cap-audio-status-stop': this.isStop,
        'cap-audio-status-pause': this.isPause
      };
    },
    statusIconName: function statusIconName() {
      if (this.isPlaying) {
        return this.reload ? 'stop' : 'pause';
      }

      return 'play';
    }
  },
  methods: {
    trigger: function trigger() {
      if (!this.isPlaying) {
        this.play();
      } else {
        this.reload ? this.stop() : this.pause();
      }
    },
    initSlider: function initSlider() {
      this.isSliderDisabled = false;
    }
  }
};