captain-ui/es/offline-shop-info/src/main.js

有赞vue wap业务组件库

import "vant/es/image-preview/style";
import _ImagePreview from "vant/es/image-preview";
import "vant/es/swipe-item/style";
import _SwipeItem from "vant/es/swipe-item";
import "vant/es/swipe/style";
import _Swipe from "vant/es/swipe";
import "vant/es/icon/style";
import _Icon from "vant/es/icon";

var _components;

var LOGO_STYLE = {
  LEFT: '0',
  CENTER: '1',
  RIGHT: '2'
};
export default {
  render: function render() {
    var _vm = this;

    var _h = _vm.$createElement;

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

    return _c('div', {
      staticClass: "cap-offline-shop-info"
    }, [!_vm.name ? _c('div', {
      staticClass: "cap-offline-shop-info__empty"
    }, [_c('p', {
      staticClass: "cap-offline-shop-info__empty-title"
    }, [_vm._v("当前无门店信息")]), _c('p', {
      staticClass: "cap-offline-shop-info__empty-sub-title"
    }, [_vm._v("请先添加门店")])]) : [_c('div', {
      staticClass: "cap-offline-shop-info__header"
    }, [_c('van-swipe', {
      staticClass: "cap-offline-shop-info__swipe",
      attrs: {
        "autoplay": 2000
      }
    }, _vm._l(_vm.images, function (image, index) {
      return _c('van-swipe-item', {
        key: index,
        staticClass: "cap-offline-shop-info__shop-img-wrap",
        attrs: {
          "data-index": index
        },
        nativeOn: {
          "click": function click($event) {
            return _vm.previewImage($event);
          }
        }
      }, [_c('div', {
        staticClass: "cap-offline-shop-info__shop-img",
        style: {
          backgroundImage: "url(" + image + ")",
          backgroundSize: 'cover',
          backgroundPosition: 'center center'
        }
      })]);
    }), 1)], 1), _c('div', {
      staticClass: "cap-offline-shop-info__body"
    }, [_c('div', {
      staticClass: "cap-offline-shop-info__logo-wrap",
      class: _vm.logoWrapClass,
      style: {
        backgroundImage: "url(" + _vm.logoUrl + ")",
        backgroundSize: 'cover',
        backgroundPosition: 'center center'
      }
    }), _c('div', {
      staticClass: "cap-offline-shop-info__detail van-hairline--bottom"
    }, [_c('h3', {
      staticClass: "cap-offline-shop-info__shop-name van-hairline--right"
    }, [_vm._v(_vm._s(_vm.name))]), _c('a', {
      staticClass: "cap-offline-shop-info__tel",
      attrs: {
        "href": _vm.telLink
      }
    }, [_c('van-icon', {
      staticClass: "cap-offline-shop-info__tel-icon",
      attrs: {
        "name": "phone"
      }
    })], 1)]), _c('div', {
      staticClass: "cap-offline-shop-info__address van-hairline--bottom",
      on: {
        "click": function click($event) {
          _vm.$emit('address-clicked');
        }
      }
    }, [_c('van-icon', {
      staticClass: "cap-offline-shop-info__info-icon",
      attrs: {
        "name": "location"
      }
    }), _c('p', {
      staticClass: "cap-offline-shop-info__address-detail"
    }, [_vm._v(_vm._s(_vm.address))]), _c('van-icon', {
      staticClass: "cap-offline-shop-info__address-arrow",
      attrs: {
        "name": "arrow"
      }
    })], 1), _c('div', {
      staticClass: "cap-offline-shop-info__open-time"
    }, [_c('van-icon', {
      staticClass: "cap-offline-shop-info__info-icon",
      attrs: {
        "name": "clock"
      }
    }), _vm._v(_vm._s(_vm.time) + "\n      ")], 1)])]], 2);
  },
  name: 'cap-offline-shop-info',
  components: (_components = {}, _components[_Icon.name] = _Icon, _components[_Swipe.name] = _Swipe, _components[_SwipeItem.name] = _SwipeItem, _components),
  props: {
    name: {
      type: String,
      default: ''
    },
    tel: {
      type: String,
      default: ''
    },
    logoStyle: {
      type: String,
      default: LOGO_STYLE.LEFT
    },
    logoUrl: String,
    images: Array,
    address: {
      type: String,
      default: ''
    },
    time: {
      type: String,
      default: ''
    }
  },
  computed: {
    telLink: function telLink() {
      return "tel:" + this.tel;
    },
    logoWrapClass: function logoWrapClass() {
      var _modifierMap;

      var modifierMap = (_modifierMap = {}, _modifierMap[LOGO_STYLE.LEFT] = 'left', _modifierMap[LOGO_STYLE.CENTER] = 'center', _modifierMap[LOGO_STYLE.RIGHT] = 'right', _modifierMap);
      return "cap-offline-shop-info__logo-wrap--" + modifierMap[this.logoStyle];
    }
  },
  methods: {
    previewImage: function previewImage(e) {
      var index = e.currentTarget.dataset.index;

      _ImagePreview(this.images, +index);
    }
  }
};