You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
422 lines
9.1 KiB
422 lines
9.1 KiB
<template>
|
|
<div>
|
|
<div
|
|
v-show="goodsValueTabsTitle == '新品首发' || goodsValueTabsTitle == '为你推荐'"
|
|
class="recommend-item"
|
|
@click="click"
|
|
>
|
|
<image :src="goodsImg(item.goods_image)" class="cover" mode="aspectFill"></image>
|
|
<div class="tag" v-show="item.label_name ? true : false">{{ goodsTag(item) }}</div>
|
|
<div v-show="goodsValueTabsTitle == '新品首发'" class="sales">
|
|
<!-- 销量：{{ item.sale_num }}{{ item.unit ? item.unit : '件' }} -->
|
|
</div>
|
|
<div class="content">
|
|
<div class="title">{{ item.goods_name }}</div>
|
|
|
|
<div
|
|
v-show="goodsValueTabsTitle == '新品首发' || goodsValueTabsTitle == '为你推荐'"
|
|
class="labels-1"
|
|
>
|
|
<div class="label-item">产地：{{ item.address }}</div>
|
|
<div class="label-item">规格：{{ item.spec_name||'-' }}</div>
|
|
<div class="label-item">执行标准：{{ item.execu_content.title }}</div>
|
|
<div class="label-item">生产企业：{{ item.business }}</div>
|
|
</div>
|
|
<div
|
|
class="bottom"
|
|
v-show="goodsValueTabsTitle == '新品首发' || goodsValueTabsTitle == '为你推荐'"
|
|
>
|
|
<div class="price">
|
|
¥
|
|
<span class="price1">
|
|
{{
|
|
parseFloat(showPrice(item))
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</span>
|
|
.
|
|
<span>
|
|
{{
|
|
parseFloat(showPrice(item))
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</span>
|
|
/盒
|
|
</div>
|
|
<div style="display: flex;align-items: ceter;">
|
|
<view slot="minus" class="minus" @click.stop="numChange(item, 'minus')">
|
|
<u-icon
|
|
name="minus-circle-fill"
|
|
size="20"
|
|
color="var(--base-color)"
|
|
></u-icon>
|
|
</view>
|
|
<input
|
|
slot="input"
|
|
type="number"
|
|
style="width: 32px;text-align: center;"
|
|
class="input"
|
|
v-model="item.cart_num || 0"
|
|
@input.stop="inputBlur"
|
|
/>
|
|
<view slot="plus" class="minus" @click.stop="numChange(item, 'add')">
|
|
<u-icon
|
|
name="plus-circle-fill"
|
|
size="20"
|
|
color="var(--base-color)"
|
|
></u-icon>
|
|
</view>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div
|
|
v-show="goodsValueTabsTitle == '限时秒杀' || goodsValueTabsTitle == '优惠团购'"
|
|
class="recommend-item2"
|
|
@click="click"
|
|
>
|
|
<image :src="goodsImg(item.goods_image)" mode=""></image>
|
|
<div class="recommend-item2-main">
|
|
<div class="title2">{{ item.goods_name }}</div>
|
|
<div class="describe">规格：{{ item.spec_name||'-' }}</div>
|
|
<div class="describe">产地：{{ item.address }}</div>
|
|
<div class="describe">执行标准：{{ item.execu_content.title }}</div>
|
|
<div class="describe">生产企业：{{ item.business }}</div>
|
|
<div class="price2" v-show="goodsValueTabsTitle == '优惠团购'">
|
|
<div>
|
|
拼团价¥
|
|
<span style="font-size: 36rpx;">
|
|
{{
|
|
parseFloat(item.discount_price)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</span>
|
|
.{{
|
|
parseFloat(item.discount_price)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</div>
|
|
<div class="cancel-price">¥ {{ Number(item.price).toFixed(2) }}</div>
|
|
</div>
|
|
<div class="price3" v-show="goodsValueTabsTitle == '限时秒杀'">
|
|
<div>
|
|
秒杀价¥
|
|
<span style="font-size: 36rpx;">
|
|
{{
|
|
parseFloat(item.discount_price)
|
|
.toFixed(2)
|
|
.split('.')[0]
|
|
}}
|
|
</span>
|
|
.{{
|
|
parseFloat(item.discount_price)
|
|
.toFixed(2)
|
|
.split('.')[1]
|
|
}}
|
|
</div>
|
|
<div class="cancel2-price">¥ {{ Number(item.price).toFixed(2) }}</div>
|
|
<div class="payNumber">{{ item.goods_num }}人已付款</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from 'vuex';
|
|
export default {
|
|
computed: {
|
|
...mapGetters(['userInfo'])
|
|
},
|
|
name: 'verticalGoodsItem',
|
|
|
|
props: {
|
|
item: {
|
|
default: () => {}
|
|
},
|
|
isPrice: {
|
|
default: () => true
|
|
},
|
|
goodsValueTabsTitle: {
|
|
type: String
|
|
}
|
|
},
|
|
data() {
|
|
return {};
|
|
},
|
|
created() {
|
|
//console.log('this.item');
|
|
//console.log(this.item);
|
|
},
|
|
methods: {
|
|
inputBlur(e) {
|
|
const v = e.detail.value;
|
|
this.item.cart_num = 1;
|
|
const zero = /^(0{2,})|[^0-9]/g;
|
|
let final = 0;
|
|
if (!v) {
|
|
final = 0;
|
|
} else {
|
|
final = v.toString().replace(zero, v => {
|
|
return 0;
|
|
});
|
|
|
|
if (final.split('')[0] * 1 === 0) {
|
|
final = final.slice(1) - 0 || 0;
|
|
}
|
|
}
|
|
this.$nextTick(() => {
|
|
this.item.cart_num = final.toString() || 0;
|
|
this.$api.sendRequest({
|
|
url: '/api/cart/add',
|
|
data: {
|
|
num: v,
|
|
sku_id: this.item.sku_id,
|
|
is_all: 1
|
|
},
|
|
success: () => {
|
|
this.$store.dispatch('getCartNumber');
|
|
}
|
|
});
|
|
});
|
|
},
|
|
numChange(item, type) {
|
|
item.cart_num = Number(item.cart_num);
|
|
let setp = 1;
|
|
item.cart_num ? item.cart_num : (item.cart_num = 0);
|
|
if (type == 'minus' && !item.cart_num) {
|
|
return;
|
|
}
|
|
if (!item.cart_num || item.is_multiple) {
|
|
setp = item.min_buy || 1;
|
|
} else {
|
|
if (type == 'add') {
|
|
setp = item.cart_num >= item.min_buy ? 1 : item.min_buy;
|
|
} else {
|
|
setp = item.cart_num == item.min_buy ? item.min_buy : 1;
|
|
}
|
|
}
|
|
type == 'add' ? (item.cart_num += setp) : (item.cart_num -= setp);
|
|
this.$forceUpdate();
|
|
this.$api.sendRequest({
|
|
url: '/api/cart/add',
|
|
data: {
|
|
num: item.cart_num,
|
|
sku_id: item.sku_id,
|
|
is_all: 1
|
|
},
|
|
success: () => {
|
|
this.$store.dispatch('getCartNumber');
|
|
}
|
|
});
|
|
},
|
|
click() {
|
|
this.$emit('click', this.item);
|
|
},
|
|
goodsImg(imgStr) {
|
|
let imgs = imgStr.split(',');
|
|
return imgs[0]
|
|
? this.$util.img(imgs[0], {
|
|
size: 'mid'
|
|
})
|
|
: this.$util.getDefaultImage().goods;
|
|
},
|
|
goodsTag(data) {
|
|
return data.label_name || '';
|
|
},
|
|
showPrice(data) {
|
|
let price = data.discount_price;
|
|
if (data.member_price && parseFloat(data.member_price) < parseFloat(price))
|
|
price = data.member_price;
|
|
return price;
|
|
}
|
|
}
|
|
};
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.input-number {
|
|
line-height: 30rpx;
|
|
}
|
|
|
|
.recommend-item {
|
|
width: 328rpx;
|
|
border-radius: 16rpx;
|
|
background-color: #fff;
|
|
margin-bottom: 30rpx;
|
|
position: relative;
|
|
width: 100%;
|
|
overflow: auto;
|
|
|
|
.tag {
|
|
width: 64rpx;
|
|
height: 36rpx;
|
|
text-align: center;
|
|
position: absolute;
|
|
top: 10rpx;
|
|
left: 10rpx;
|
|
line-height: 36rpx;
|
|
background: rgba(33, 187, 243, 0.08);
|
|
border-radius: 8rpx;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: $base-color;
|
|
}
|
|
|
|
.sales {
|
|
top: calc(320rpx - 44rpx);
|
|
width: 100%;
|
|
position: absolute;
|
|
text-align: center;
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ffffff;
|
|
line-height: 44rpx;
|
|
background-color: rgba(0, 0, 0, 0.4);
|
|
}
|
|
|
|
.labels-1 {
|
|
margin-top: 10rpx !important;
|
|
|
|
.label-item {
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 1;
|
|
-webkit-box-orient: vertical;
|
|
font-size: 24rpx !important;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999 !important;
|
|
line-height: 40rpx !important;
|
|
}
|
|
}
|
|
|
|
.cover {
|
|
width: 328rpx;
|
|
height: 328rpx;
|
|
border-radius: 16rpx 16rpx 0 0;
|
|
}
|
|
|
|
.content {
|
|
padding: 0 20rpx;
|
|
|
|
.title {
|
|
height: 80rpx;
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
text-overflow: -o-ellipsis-lastline;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
display: -webkit-box;
|
|
-webkit-line-clamp: 2;
|
|
line-clamp: 2;
|
|
-webkit-box-orient: vertical;
|
|
}
|
|
|
|
.bottom {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.price {
|
|
height: 104rpx;
|
|
font-size: 24rpx;
|
|
font-family: DINAlternate-Bold, DINAlternate;
|
|
font-weight: bold;
|
|
color: #f33b50;
|
|
margin-top: 24rpx;
|
|
|
|
.price1 {
|
|
font-size: 40rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.recommend-item2 {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
margin-bottom: 24rpx;
|
|
|
|
image {
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
}
|
|
|
|
.recommend-item2-main {
|
|
flex: 1;
|
|
|
|
.title2 {
|
|
font-size: 28rpx;
|
|
font-family: PingFangSC-Medium, PingFang SC;
|
|
font-weight: 500;
|
|
color: #333333;
|
|
line-height: 40rpx;
|
|
margin-bottom: 16rpx;
|
|
}
|
|
|
|
.describe {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 32rpx;
|
|
margin-bottom: 8rpx;
|
|
}
|
|
|
|
.price2 {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ef6154;
|
|
line-height: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
|
|
.cancel-price {
|
|
color: #999999;
|
|
text-decoration: line-through;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
|
|
.price3 {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #ef6154;
|
|
line-height: 32rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
.cancel2-price {
|
|
color: #999999;
|
|
text-decoration: line-through;
|
|
margin-left: 16rpx;
|
|
flex: 1;
|
|
}
|
|
|
|
.payNumber {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #999999;
|
|
line-height: 32rpx;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|