185 lines
3.8 KiB
Vue
185 lines
3.8 KiB
Vue
<template>
|
|
<view class="goods--list">
|
|
<block v-if="list.length > 0">
|
|
<view class="goods--item" v-for="(item, index) in list" :key="index" @click="goods(item)">
|
|
<view class="cover">
|
|
<image class="cover--src" :src="item.cover" mode="aspectFill" />
|
|
</view>
|
|
<template v-if='notag === ""'>
|
|
<span class='is_self'
|
|
v-if='item.specal_tags.is_self'>{{item.specal_tags.is_self}}</span>
|
|
</template>
|
|
<view class="content">
|
|
<view class="title">
|
|
<template v-if='notag === ""'>
|
|
<span class='is_allow_values'
|
|
v-if='item.specal_tags.is_allow_values'>{{item.specal_tags.is_allow_values}}</span>
|
|
</template>
|
|
{{item.name}}
|
|
</view>
|
|
<view class="content-flex">
|
|
<view class="price eb" v-if="priceType === 'EB'">
|
|
{{item.price}}<text>易币</text>
|
|
</view>
|
|
<view class="price cny" v-if="priceType === 'CNY'">
|
|
<text>￥</text>{{item.price.price_min}}
|
|
</view>
|
|
<view class="sales">
|
|
<slot name="statistics" :value="item">
|
|
月销量{{item.sales}}
|
|
</slot>
|
|
</view>
|
|
</view>
|
|
<slot name="footer" :value="item" />
|
|
</view>
|
|
</view>
|
|
</block>
|
|
<block v-else>
|
|
<view class="goods--null">
|
|
<no-list name='no-goods' :txt="toast" />
|
|
</view>
|
|
</block>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'goodsList',
|
|
props: {
|
|
notag: {
|
|
type: String,
|
|
default: ''
|
|
},
|
|
// 数据列表
|
|
list: {
|
|
type: Array,
|
|
default: () => {
|
|
return new Array
|
|
}
|
|
},
|
|
// 价格类型
|
|
priceType: {
|
|
type: String,
|
|
default: 'EB'
|
|
},
|
|
// 列表空提示
|
|
toast: {
|
|
type: String,
|
|
default: '暂无商品数据 -_-!'
|
|
}
|
|
},
|
|
methods: {
|
|
goods(e) {
|
|
this.$emit('on-goods', e)
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.goods--list {
|
|
padding: calc(#{$padding} - 10rpx);
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
|
|
.goods--item {
|
|
background: white;
|
|
box-sizing: border-box;
|
|
width: calc(50% - 20rpx);
|
|
margin: 10rpx;
|
|
border-radius: $radius/2;
|
|
overflow: hidden;
|
|
position: relative;
|
|
|
|
.is_self {
|
|
position: absolute;
|
|
top: 0;
|
|
right: 20rpx;
|
|
background-image: linear-gradient(to bottom, #ee4c47, #9e312f);
|
|
// background-color: #ee4c47;
|
|
box-shadow: 0 4rpx 10rpx 2rpx rgba($color: #000, $alpha: .3);
|
|
color: #fff;
|
|
font-size: 26;
|
|
padding: 2rpx 20rpx 10rpx 20rpx;
|
|
border-radius: 0 0 50rpx 50rpx;
|
|
}
|
|
|
|
.cover {
|
|
position: relative;
|
|
width: 100%;
|
|
padding-top: 100%;
|
|
|
|
.cover--src {
|
|
position: absolute;
|
|
height: 100%;
|
|
width: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
}
|
|
}
|
|
|
|
.content {
|
|
padding: $padding/2;
|
|
|
|
.title {
|
|
font-size: $title-size-lg;
|
|
line-height: 40rpx;
|
|
height: 80rpx;
|
|
text-align: justify;
|
|
@extend .ellipsis;
|
|
|
|
.is_allow_values {
|
|
color: #fff;
|
|
background-image: linear-gradient(to left, $main-color, $mian-color-light);
|
|
padding: 2rpx 14rpx;
|
|
font-size: 20rpx;
|
|
text-align: center;
|
|
border-radius: 30rpx;
|
|
margin-right: 20rpx;
|
|
}
|
|
}
|
|
|
|
.content-flex {
|
|
width: 100%;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
padding-top: $padding/2;
|
|
|
|
.price {
|
|
width: 50%;
|
|
color: $text-price;
|
|
font-weight: bold;
|
|
font-size: $title-size;
|
|
@extend .nowrap;
|
|
|
|
text {
|
|
font-size: $title-size-sm;
|
|
font-weight: normal;
|
|
padding-left: $padding/4;
|
|
line-height: 50rpx;
|
|
}
|
|
}
|
|
|
|
.sales {
|
|
width: 50%;
|
|
font-size: $title-size-sm;
|
|
color: $text-gray;
|
|
line-height: 50rpx;
|
|
text-align: right;
|
|
@extend .nowrap;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// 数据空
|
|
.goods--null {
|
|
width: 100%;
|
|
padding: 200rpx 0;
|
|
text-align: center;
|
|
font-size: $title-size-m;
|
|
color: $text-gray;
|
|
}
|
|
</style>
|