captain-ui
Version:
有赞vue wap业务组件库
349 lines (305 loc) • 11 kB
JavaScript
import fullfillImage from '@youzan/utils/fullfillImage';
import BuyButton from './buy-button';
import CornerMark from './corner-mark';
import { sizeTypeMap, layoutMap, imageRatioMap, imageFillStyleMap, imageMaxHeight } from '../constants';
export default {
render: function render() {
var _vm = this;
var _h = _vm.$createElement;
var _c = _vm._self._c || _h;
return _c('a', {
staticClass: "cap-goods-list__item",
class: [_vm.layoutClass, _vm.sizeTypeClass, _vm.btnTypeClass, _vm.imageRatioClass, _vm.photoHeight500Class, _vm.imageFillStyleClass, _vm.onlyShowImageClass],
attrs: {
"href": _vm.goodsInfo.url
}
}, [_c('div', {
ref: "photo",
staticClass: "cap-goods-list__photo",
class: {
'cap-goods-list__photo--soldout': +_vm.goodsInfo.sold_status === 2 && +_vm.goodsInfo.buy_way !== 0
}
}, [_c('img', {
directives: [{
name: "lazy",
rawName: "v-lazy",
value: _vm.imageUrl,
expression: "imageUrl"
}],
staticClass: "cap-goods-list__img",
class: [_vm.imgClass],
attrs: {
"data-lazy-log": "1",
"data-lazy-log-id": _vm.goodsInfo.id
}
})]), _vm.isShowTitle || _vm.isShowSubTitle || _vm.isShowPrice ? _c('div', {
staticClass: "cap-goods-list__info",
class: {
'has-title': _vm.isShowTitle,
'has-subtitle': _vm.isShowSubTitle,
'has-price': _vm.isShowPrice,
'has-btn': _vm.isShowBuyButton
}
}, [_vm.isShowTitle ? _c('h3', {
staticClass: "title"
}, [_vm._v("\n " + _vm._s(_vm.goodsInfo.title) + "\n ")]) : _vm._e(), _vm.isShowSubTitle ? _c('p', {
staticClass: "sub-title"
}, [_vm._v("\n " + _vm._s(_vm.goodsInfo.sub_title) + "\n ")]) : _vm._e(), _vm.isShowPrice || _vm.isShowSoldNum ? _c('p', {
staticClass: "sale-info"
}, [_vm.isShowPrice ? _c('span', {
staticClass: "sale-price"
}, [_vm._v("\n ¥ " + _vm._s(_vm.goodsInfo.price) + "\n ")]) : _vm._e(), _vm.isShowSoldNum ? _c('span', {
staticClass: "sold-num"
}, [_vm._v("\n 销量：" + _vm._s(_vm.goodsInfo.total_sold_num) + "\n ")]) : _vm._e()]) : _vm._e()]) : _vm._e(), _vm.isShowBuyButton ? _c('vm-buy-button', {
attrs: {
"is-loading": _vm.buyBtnIsLoading,
"buy-button-type": _vm.itemBuyButtonType,
"button-text": _vm.buttonText
},
on: {
"click": _vm.handlerBuyButtonClick
}
}) : _vm._e(), _vm.showCornerMark ? _c('vm-corner-mark', {
attrs: {
"type": _vm.cornerMarkType,
"image-url": _vm.cornerMarkImage
}
}) : _vm._e(), _vm.goodsInfo.is_wish_open ? _c('div', {
staticClass: "cap-goods-list__wish",
class: {
'cap-goods-list__wish--open': _vm.goodsInfo.is_wish_added
},
on: {
"click": function click($event) {
$event.stopPropagation();
$event.preventDefault();
_vm.$emit('wish-btn-click', _vm.goodsInfo, !_vm.goodsInfo.is_wish_added);
}
}
}) : _vm._e()], 1);
},
componentName: 'cap-goods-list-item',
components: {
'vm-buy-button': BuyButton,
'vm-corner-mark': CornerMark
},
props: {
goodsInfo: {
type: Object,
default: function _default() {
return {};
}
},
layout: Number,
sizeType: Number,
showBuyButton: Boolean,
showTitle: Boolean,
showSubTitle: Boolean,
showPrice: Boolean,
showSoldNum: Boolean,
buyButtonType: Number,
buyBtnExpress: Boolean,
itemIndex: Number,
showCornerMark: Boolean,
cornerMarkType: Number,
cornerMarkImage: {
type: String,
default: ''
},
imageRatio: Number,
imageFillStyle: Number,
buttonText: String
},
data: function data() {
return {
buyBtnIsLoading: false,
width: null,
photoSizeInfo: {}
};
},
computed: {
layoutClass: function layoutClass() {
var result;
if (this.layout === 2) {
var itemSize = this.itemIndex % 3 === 0 ? 'big' : 'small';
result = ["cap-goods-list__item--" + itemSize, "cap-goods-list__item--hybrid-" + itemSize];
} else {
result = ["cap-goods-list__item--" + layoutMap[this.layout]];
}
return result;
},
sizeTypeClass: function sizeTypeClass() {
return "" + sizeTypeMap[this.sizeType];
},
btnTypeClass: function btnTypeClass() {
// 小图促销样式
if ((this.layout === 5 || this.layout === 6) && this.buyBtnExpress) {
return 'cap-goods-list__item--btn2';
}
if (this.layout === 1 && this.sizeType === 3) return;
return "cap-goods-list__item--btn" + this.buyButtonType;
},
isShowSoldNum: function isShowSoldNum() {
return this.showSoldNum && this.goodsInfo.total_sold_num >= 0;
},
isShowPrice: function isShowPrice() {
// 详情列表永远显示价格
return this.layout === 3 || this.showPrice;
},
isShowBuyButton: function isShowBuyButton() {
var SMALL_LAYOUT = 'three';
if (SMALL_LAYOUT === layoutMap[this.layout] && this.buyBtnExpress) {
return true;
}
var notShowBuyButttonLayout = ['big', 'small', 'hybrid', 'three'];
if (notShowBuyButttonLayout.indexOf(layoutMap[this.layout]) !== -1 && this.sizeType === 2) {
return false;
} // 小图促销样式始终显示按钮
if (this.layout === 1 && this.sizeType === 3) {
return true;
}
return this.showBuyButton;
},
/**
* 是否显示商品名
* 小图模式下的极简样式和促销样式不显示title，其他根据配置来判断是否显示
*/
isShowTitle: function isShowTitle() {
var layout = this.layout,
sizeType = this.sizeType;
if (layout === 1 && sizeType === 3) {
return false;
}
if (layout === 3) {
return true;
}
return this.goodsInfo.title && this.showTitle;
},
isShowSubTitle: function isShowSubTitle() {
var layout = this.layout,
sizeType = this.sizeType;
var notShowSubtitleSizeType = [1, 2, 3]; // 一行三个不显示副标题
if (layout === 5) return false;
if (layout === 1) {
// 小图：瀑布流、极简和促销不显示
if (notShowSubtitleSizeType.indexOf(sizeType) !== -1) {
return false;
} // 小图根据showSubTitle来显示，否则两侧高度不一样，布局会乱
return this.showSubTitle;
} // 一大两小：小图且极简不显示商品简介
if (layout === 2 && sizeType === 2) {
return false;
} // 详情模式卡片2显示商品简介
if (layout === 3) {
if (sizeType === 5) {
return true;
}
return false;
}
return this.goodsInfo.sub_title && this.showSubTitle;
},
itemBuyButtonType: function itemBuyButtonType() {
if ((this.layout === 5 || this.layout === 6) && this.buyBtnExpress) return 2;
return this.layout === 1 && this.sizeType === 3 ? 5 : this.buyButtonType;
},
imgClass: function imgClass() {
// 填充模式
if (this.imageFillStyle === 1) return;
var goodsInfo = this.goodsInfo,
imageRatio = this.imageRatio,
layout = this.layout,
sizeType = this.sizeType;
var ratio = goodsInfo.width / goodsInfo.height; // 小图瀑布流和一大两小的大图和老版没设置显示比例的大图
if (layout === 1 && sizeType === 1 || layout === 2 && this.itemIndex % 3 === 0 || layout === 0 && !imageRatioMap[imageRatio]) {
return;
} // 大图的3:2比例
if (imageRatio === 0 && layout === 0) {
return ratio < 1.5 ? 'large-height' : '';
}
return ratio < 1 ? 'large-height' : '';
},
imageUrl: function imageUrl() {
var goodsInfo = this.goodsInfo,
layout = this.layout,
itemIndex = this.itemIndex;
try {
if (layout === 0 || layout === 2 && itemIndex % 3 === 0) {
return fullfillImage(goodsInfo.image_url, '!730x0.jpg');
}
return fullfillImage(goodsInfo.image_url, '!520x0.jpg');
} catch (e) {
return goodsInfo.image_url;
}
},
imageRatioClass: function imageRatioClass() {
var imageRatio = this.imageRatio,
layout = this.layout;
if (!imageRatioMap[imageRatio] || layout !== 0) return '';
return "cap-goods-list__item--ratio-" + imageRatioMap[imageRatio];
},
photoHeight500Class: function photoHeight500Class() {
// 填充模式
if (this.imageFillStyle === 1) return;
var width = this.width,
layout = this.layout,
goodsInfo = this.goodsInfo;
if (width && (layout === 0 || layout === 2) && goodsInfo.width && goodsInfo.height) {
var imageHeight = width * goodsInfo.height / goodsInfo.width;
var imageWidth = imageMaxHeight * goodsInfo.width / goodsInfo.height; // 如果图片高度大于500且宽度小于当前容器宽度
if (imageHeight > imageMaxHeight && imageWidth < width) {
return "photo-height-" + imageMaxHeight + "-item";
}
}
return '';
},
imageFillStyleClass: function imageFillStyleClass() {
var imageFillStyle = this.imageFillStyle,
sizeType = this.sizeType,
goodsInfo = this.goodsInfo,
photoSizeInfo = this.photoSizeInfo,
width = this.width; // 瀑布流情况不处理
if (!imageFillStyleMap[imageFillStyle] || sizeType === 1) return;
var result = ["cap-goods-list__item--" + imageFillStyleMap[imageFillStyle]]; // 处理填充情况高度为长边的情况
if (imageFillStyle === 1) {
var imageHeight;
if (this.layout !== 3) {
imageHeight = width * goodsInfo.height / goodsInfo.width;
} else {
imageHeight = photoSizeInfo.width * goodsInfo.height / goodsInfo.width;
}
if (imageHeight && imageHeight < photoSizeInfo.height) {
result.push('padding-height');
}
}
return result;
},
onlyShowImageClass: function onlyShowImageClass() {
if (!this.isShowTitle && !this.isShowSubTitle && !this.showPrice) {
return 'only-image';
}
return '';
}
},
mounted: function mounted() {
var _this = this;
this.width = this.$el.getBoundingClientRect().width;
var photoElRect = this.$refs.photo.getBoundingClientRect();
this.photoSizeInfo = {
width: photoElRect.width,
height: photoElRect.height
};
this.$on('loading-change', function (params) {
if (params.id === _this.goodsInfo.id) {
_this.buyBtnIsLoading = params.loading;
}
});
},
methods: {
handlerBuyButtonClick: function handlerBuyButtonClick() {
if (this.buyBtnIsLoading) {
return;
}
this.$emit('buy-btn-click');
}
}
};