captain-ui/es/shop-banner/src/main.js

有赞vue wap业务组件库

import "vant/es/button/style";
import _Button from "vant/es/button";
import "vant/es/popup/style";
import _Popup from "vant/es/popup";

var _components;

export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-shop-banner",
      class: ["cap-shop-banner--type-" + _vm.type]
    }, [_c('div', {
      staticClass: "cap-shop-banner__cover",
      style: _vm.backgroundStyle
    }, [_c('div', {
      staticClass: "cap-shop-banner__cover-mask"
    })]), _c('div', {
      staticClass: "cap-shop-banner__inner"
    }, [_c('div', {
      staticClass: "cap-shop-banner__content"
    }, [_c('div', {
      staticClass: "cap-shop-banner__logo"
    }, [_c('img', {
      attrs: {
        "src": _vm.shopLogo,
        "alt": "店铺logo"
      }
    })]), _c('div', {
      staticClass: "cap-shop-banner__right-content"
    }, [_c('h3', {
      class: {
        'cap-shop-banner__right-content-title--middle': !_vm.showReduce
      }
    }, [_vm._v("\n          " + _vm._s(_vm.shopName) + "\n        ")]), _vm.showReduce ? _c('p', {
      staticClass: "cap-shop-banner__reduce-content"
    }, [_c('span', {
      staticClass: "cap-shop-banner__reduce-content-tag"
    }, [_vm._v(_vm._s(_vm.reduceType))]), _c('span', {
      staticClass: "cap-shop-banner__reduce-content-text",
      on: {
        "click": _vm.handleTextClick
      }
    }, [_vm._v("\n            " + _vm._s(_vm.reduceContent) + "\n          ")])]) : _vm._e(), _vm.showGoods ? _c('p', {
      staticClass: "cap-shop-banner__sum-content"
    }, [_c('a', {
      attrs: {
        "href": _vm.allGoodsLink
      }
    }, [_c('span', {
      staticClass: "cap-shop-banner__sum-content-total"
    }, [_vm._v("全部商品" + _vm._s(_vm.goodsTotal))])]), _c('a', {
      attrs: {
        "href": _vm.newGoodsLink
      }
    }, [_c('span', {
      staticClass: "cap-shop-banner__sum-content-total"
    }, [_vm._v("上新" + _vm._s(_vm.goodsNew))])])]) : _vm._e()])])]), !_vm.isPreview ? _c('van-popup', {
      staticClass: "cap-shop-banner__popup",
      attrs: {
        "close-on-click-overlay": false,
        "position": "bottom"
      },
      model: {
        value: _vm.showReduceModal,
        callback: function callback($$v) {
          _vm.showReduceModal = $$v;
        },
        expression: "showReduceModal"
      }
    }, [_c('div', {
      staticClass: "cap-shop-banner__popup-content"
    }, [_c('h1', {
      staticClass: "cap-shop-banner__popup-title"
    }, [_vm._v("满减")]), _c('div', {
      staticClass: "cap-shop-banner__popup-detail"
    }, [_vm._v(_vm._s(_vm.reduceContent))])]), _c('van-button', {
      staticClass: "cap-shop-banner__popup-button",
      attrs: {
        "type": "danger"
      },
      on: {
        "click": _vm.handleTextClick
      }
    }, [_vm._v("\n      完成\n    ")])], 1) : _vm._e()], 1);
  },
  name: 'cap-shop-banner',
  components: (_components = {}, _components[_Popup.name] = _Popup, _components[_Button.name] = _Button, _components),
  props: {
    allGoodsLink: String,
    newGoodsLink: String,
    shopName: {
      type: String,
      default: '店铺名称'
    },
    shopLogo: String,
    type: {
      type: Number,
      default: 0
    },
    goodsTotal: {
      type: Number,
      default: 999
    },
    goodsNew: {
      type: Number,
      default: 30
    },
    reduceType: {
      type: String,
      default: '满减'
    },
    reduceData: {
      type: Array,
      default: function _default() {
        return [];
      }
    },
    bgUrl: String,
    bgColor: String,
    preventClick: {
      type: Boolean,
      default: false
    }
  },
  data: function data() {
    return {
      showReduceModal: false
    };
  },
  computed: {
    showGoods: function showGoods() {
      return this.type !== 0;
    },
    showReduce: function showReduce() {
      return this.type === 0 && this.reduceContent.length > 0;
    },
    reduceContent: function reduceContent() {
      var addComma = function addComma(cur, total) {
        return cur < total ? '，' : '';
      };

      return this.reduceData.reduce(function (content, current, index, arr) {
        return content + current.reduce(function (content1, current1, index1, arr1) {
          return content1 + current1.title + addComma(index1, arr1.length - 1);
        }, '') + addComma(index, arr.length - 1);
      }, '');
    },
    backgroundStyle: function backgroundStyle() {
      var bgUrl = this.bgUrl,
          bgColor = this.bgColor;
      var defaultBackgroundUrl = '//img.yzcdn.cn/public_files/2017/07/11/f2a0a05d5a801cb51ecbc0710e6947fb.png';
      var backgroundImageUrl = bgUrl || defaultBackgroundUrl;

      if (bgUrl || !bgColor) {
        return {
          'background-image': "url(" + backgroundImageUrl + ")"
        };
      }

      return {
        'background-color': bgColor
      };
    }
  },
  methods: {
    handleTextClick: function handleTextClick() {
      if (this.preventClick) return;
      this.showReduceModal = !this.showReduceModal;
      this.$emit('modalchange', this.showReduceModal);
    }
  }
};