<template>
|
<view class="good_block" :class="size?size:''" @click="goDetail" v-if="goodsInfo">
|
<div class="img">
|
<image class="image" :src="goodsInfo.image" mode="aspectFill"></image>
|
<image v-if="!goodsInfo.stock||goodsInfo.stock<=0" style="position:absolute;left:0;top:0" class="image" src="https://ossacmall.bluedeer.com.cn/app/static/images/noStock.png" mode="aspectFill"></image>
|
</div>
|
<div class="info">
|
<div class="name">{{goodsInfo.storeName}}</div>
|
<view class="infoLabel_box" v-if="goodsInfo.labelList&&goodsInfo.labelList.length>0">
|
<view v-for="labelItem,labelIndex in goodsInfo.labelList" :key="labelIndex" class="infoLabel "
|
:class="labelItem.color">{{labelItem.name}}</view>
|
</view>
|
<block v-if="showUserLvPrice()">
|
<div class="price" style="flex-wrap: wrap;align-items: center;" :class="goodsInfo.payWay=='3'?'color-blue':''">
|
<text v-if="goodsInfo.payWay=='3'"><text class="num">{{toThousands(getUserLvPrice())}}</text><text style="padding-right: 0.5em;">悦养豆</text></text>
|
<text v-if="goodsInfo.payWay=='2'" style="align-items: baseline;"><text>¥</text><text class="num" style="padding-right: 0.5em;">{{getUserLvPrice()}}</text></text>
|
<block v-if="goodsInfo.payWay=='1'">
|
<text v-if="getSelectPrice()>0" style="align-items: baseline;">
|
<text>¥</text><text class="num">{{getSelectPrice()}}</text>
|
</text>
|
<text v-if="toNumber(goodsInfo.maxCareBeanNumber)>0" style="align-items: baseline;">
|
<text class="color-blue" v-if="getSelectPrice()>0">+</text>
|
<text class="color-blue" :class="getSelectPrice()>0?'':'num'">{{toThousands(toNumber(goodsInfo.maxCareBeanNumber))}}</text><text class="color-blue" v-if="toNumber(goodsInfo.maxCareBeanNumber)>0" style="padding-right: 0.5em;">悦养豆</text>
|
</text>
|
</block>
|
<text class="num_label" v-if="goodsInfo.isVisual==2||zoneType==2"></text>
|
<text class="num_label" v-else-if="!zoneId || (zoneId && zoneType==6)">券后价</text>
|
<text class="num_label" v-else-if="zoneType==4">兑换价</text>
|
<text class="num_label" v-else>活动价</text>
|
</div>
|
<block v-if="!(goodsInfo.isVisual==2)">
|
<block v-if="goodsInfo.payWay=='3'">
|
<div class="oldPrice" v-if="!(getUserLvPrice()==toNumber(goodsInfo.careBeanNumber))">原价：{{ toThousands(toNumber(goodsInfo.careBeanNumber))+'悦养豆' }}</div>
|
</block>
|
<block v-else-if="goodsInfo.payWay=='1'">
|
<div class="oldPrice" v-if="!(getSelectPrice()==toNumber(goodsInfo.price))">原价：{{ '¥'+toNumber(goodsInfo.price) }}</div>
|
</block>
|
<block v-else>
|
<div class="oldPrice" v-if="!(getUserLvPrice()==toNumber(goodsInfo.price))">原价：{{ '¥'+toNumber(goodsInfo.price) }}</div>
|
</block>
|
</block>
|
|
</block>
|
<block v-else>
|
<div class="price" style="flex-wrap: wrap;align-items: center;" :class="goodsInfo.payWay=='3'?'color-blue':''">
|
<text v-if="goodsInfo.payWay=='3'"><text class="num">{{toThousands(toNumber(goodsInfo.careBeanNumber))}}</text><text style="padding-right: 0.5em;">悦养豆</text></text>
|
<text v-if="goodsInfo.payWay=='2'"><text>¥</text><text class="num" style="padding-right: 0.5em;">{{toNumber(goodsInfo.price)}}</text></text>
|
<text v-if="goodsInfo.payWay=='1'" style="padding-right: 0.5em;">
|
<block v-if="toNumber(goodsInfo.maxCareBeanNumber)>0">
|
<text class="color-blue num">{{toThousands(toNumber(goodsInfo.maxCareBeanNumber))}}</text>
|
<text class="color-blue">悦养豆</text>
|
</block>
|
<text v-if="getSelectPrice()>0">
|
<text v-if="toNumber(goodsInfo.maxCareBeanNumber)>0" class="color-blue">+</text>
|
<text>¥</text><text
|
class="num">{{getSelectPrice()}}</text>
|
</text>
|
</text>
|
<text class="num_label">原价</text>
|
</div>
|
<div class="oldPrice oldPrice2" v-if="!(zoneId&&zoneType==1)">券后价：{{goodsInfo.payWay=='3'?'':'¥'}}{{goodsInfo.payWay=='3'?toThousands(getUserLvPrice()):getUserLvPrice() }}{{ goodsInfo.payWay=='3'?'悦养豆':''}}</div>
|
</block>
|
<!-- <div class="sales">销量：{{getTotalSales()}}</div> -->
|
<div class="sales">已售：{{goodsInfo.salesItemCount}}</div>
|
<div class="btn_add"></div>
|
</div>
|
|
</view>
|
</template>
|
|
<script>
|
import BigNumber from 'bignumber.js';
|
import { checkSign } from '@/api/store.js';
|
let app = getApp();
|
export default {
|
components: {},
|
props: {
|
goodsInfo: {
|
type: Object,
|
default: function() {
|
return {};
|
}
|
},
|
size: {
|
type: String,
|
default: ''
|
},
|
zoneId: {
|
type: Number,
|
default: 0
|
},
|
zoneType: {
|
type: Number,
|
default: 0
|
},
|
shareSwitch: {
|
type: Number,
|
default: 0
|
},
|
careBeanRate: {
|
type: Number,
|
default: 0
|
},
|
pageName: {
|
type: String,
|
default: ''
|
},
|
moduleName: {
|
type: String,
|
default: ''
|
},
|
searchType: {
|
type: String,
|
default: '',
|
},
|
searchValue: {
|
type: String,
|
default: '',
|
},
|
},
|
data() {
|
let that = this;
|
return {
|
userInfo: this.$store.getters.userInfo || {
|
level: 0
|
}
|
}
|
},
|
mounted() {
|
let that = this;
|
},
|
onReady() {
|
|
},
|
show() {
|
|
},
|
methods: {
|
showUserLvPrice(){
|
if((this.goodsInfo.couponAfterPriceStatus>0&&!(this.zoneId&&this.zoneType==1))
|
||(this.zoneId&&!(this.zoneType==1))
|
||(this.zoneId&&this.zoneType==1&&this.goodsInfo.userLv==3)
|
|| this.goodsInfo.isVisual==2){
|
return true;
|
}else{
|
return false;
|
}
|
|
},
|
getUserLvPrice(){
|
let that=this;
|
let number=0;
|
if(that.zoneId&&that.zoneType==1){
|
number=that.goodsInfo.zhenXiangPrice;
|
}else if(that.goodsInfo.userLv==0){
|
number=that.goodsInfo.puTongPrice;
|
}else if(that.goodsInfo.userLv==1){
|
number=that.goodsInfo.changXiangPrice;
|
}else if(that.goodsInfo.userLv==2){
|
number=that.goodsInfo.yueXiangPrice;
|
}else{
|
number=that.goodsInfo.zhenXiangPrice;
|
}
|
return this.toNumber(number);
|
},
|
getTotalSales(){
|
let sales=Math.floor(this.goodsInfo.sales);
|
if(isNaN(sales)){
|
sales=0;
|
}
|
let ficti=Math.floor(this.goodsInfo.ficti);
|
if(isNaN(ficti)){
|
ficti=0;
|
}
|
return sales+ficti;
|
},
|
getSelectPrice() {
|
let price=this.goodsInfo.price;
|
let maxCareBeanNumber=this.goodsInfo.maxCareBeanNumber;
|
if(this.showUserLvPrice()){
|
price=this.getUserLvPrice();
|
}
|
return this.toNumber(BigNumber(price).minus(BigNumber(maxCareBeanNumber).div(this.careBeanRate)).toFixed(2));
|
},
|
/*
|
*去商品详情页
|
*/
|
async goDetail() {
|
if(this.zoneId && this.zoneType==3) {
|
const res=await checkSign({zoneId:this.zoneId});
|
if(!res.data){
|
uni.showModal({
|
title:"提示",
|
content:"未签到，请联系销售人员重新签到",
|
showCancel:false
|
})
|
return
|
}
|
}
|
if (this.searchType) {
|
this.addTrack('yy_searchResultClick', {
|
'searchType_var': this.searchType == 'isInputSearch' ? '输入搜索' : '热门搜索',
|
'searchWord_var': this.searchValue,
|
'productID_var': this.goodsInfo.id,
|
'productName_var': this.goodsInfo.storeName,
|
});
|
}
|
this.addTrack('yy_productClick', {
|
'pageTitle_var': this.pageName,
|
'moduleName_var': this.moduleName,
|
'productID_var': this.goodsInfo.id,
|
'productName_var': this.goodsInfo.storeName,
|
});
|
if (this.pageName == '分类') {
|
this.$store.commit('updateSwitchParams', {
|
switchParams: 'cid=0'
|
});
|
}
|
if (!this.goodsInfo.activityH5 || this.goodsInfo.activityH5.length == 0) {
|
uni.navigateTo({
|
url: '/pages/goods_details/index?id=' + this.goodsInfo.id + (this.zoneId ? ('&zoneId=' +
|
this.zoneId + '&zoneType=' + this.zoneType + '&shareSwitch='+this.shareSwitch) : '')
|
})
|
return
|
}
|
// 砍价
|
if (this.goodsInfo.activityH5 && this.goodsInfo.activityH5.type == 2) {
|
uni.navigateTo({
|
url: `/pages/activity/goods_bargain_details/index?id=${this.goodsInfo.activityH5.id}&bargain=${this.uid}` +
|
(this.zoneId ? ('&zoneId=' + this.zoneId + '&zoneType=' + this.zoneType) : '')
|
})
|
return
|
}
|
// 拼团
|
if (this.goodsInfo.activityH5 && this.goodsInfo.activityH5.type == 3) {
|
uni.navigateTo({
|
url: `/pages/activity/goods_combination_details/index?id=${this.goodsInfo.activityH5.id}` +
|
(this.zoneId ? ('&zoneId=' + this.zoneId + '&zoneType=' + this.zoneType) : '')
|
})
|
return
|
}
|
// 秒杀
|
if (this.goodsInfo.activityH5 && this.goodsInfo.activityH5.type == 1) {
|
debugger
|
uni.navigateTo({
|
url: `/pages/activity/goods_seckill_details/index?id=${this.goodsInfo.activityH5.id}` + (
|
this.zoneId ? ('&zoneId=' + this.zoneId + '&zoneType=' + this.zoneType + '&shareSwitch='+this.shareSwitch) : '')
|
})
|
return
|
}
|
},
|
}
|
}
|
</script>
|
|
<style scoped lang="scss">
|
.good_block {
|
position: relative;
|
width: 240rpx;
|
background-color: #ffffff;
|
border-radius: 12rpx;
|
box-sizing: border-box;
|
margin-bottom: 24rpx;
|
overflow: hidden;
|
padding: 24rpx 19rpx 24rpx 19rpx;
|
box-shadow: 0 0 30rpx 0 rgba(0, 0, 0, .05);
|
|
.img {
|
width: 190rpx;
|
height: 190rpx;
|
position: relative;
|
margin: 0 auto;
|
|
.image {
|
width: 100%;
|
height: 100%;
|
}
|
}
|
|
.level {
|
position: absolute;
|
left: 15rpx;
|
top: 15rpx;
|
width: 72rpx;
|
height: 27rpx;
|
background: linear-gradient(90deg, #E8FF91 0%, #B2FFD1 100%);
|
border-radius: 17rpx;
|
font-size: 15rpx;
|
line-height: 27rpx;
|
color: #016DCC;
|
text-align: center;
|
}
|
|
.label {
|
position: absolute;
|
right: 19rpx;
|
top: 73rpx;
|
background: linear-gradient(90deg, #E8FF91 0%, #B2FFD1 100%);
|
border-radius: 17rpx;
|
font-size: 15rpx;
|
line-height: 27rpx;
|
color: #016DCC;
|
text-align: center;
|
}
|
|
.name {
|
white-space: nowrap;
|
overflow: hidden;
|
text-overflow: ellipsis;
|
font-size: 24rpx;
|
line-height: 45rpx;
|
color: #000000;
|
box-sizing: border-box;
|
margin-top: 10rpx;
|
}
|
|
.price {
|
font-size: 20rpx;
|
line-height: 34rpx;
|
color: #0265CA;
|
white-space: nowrap;
|
font-weight: bold;
|
display: flex;
|
align-items: end;
|
|
.num {
|
font-size: 32rpx;
|
}
|
|
.num_label {
|
line-height: 34rpx;
|
font-size: 17rpx;
|
color: #016DCC;
|
padding: 0 1em;
|
background: #EAF0FF;
|
border-radius: 8rpx;
|
display: inline-block;
|
}
|
}
|
|
.oldPrice {
|
font-size: 22rpx;
|
line-height: 1.25em;
|
color: #979797;
|
width: max-content;
|
text-decoration: line-through;
|
}
|
|
.sales {
|
font-size: 22rpx;
|
line-height: 1.25em;
|
color: #979797;
|
width: max-content;
|
}
|
|
.oldPrice2 {
|
text-decoration: none;
|
}
|
|
.btn_add {
|
position: absolute;
|
width: 42rpx;
|
height: 42rpx;
|
right: 20rpx;
|
bottom: 10rpx;
|
background: url(https://ossacmall.bluedeer.com.cn/app/static/images/i_addNew.png) center center/contain no-repeat;
|
}
|
|
&.big {
|
width: 334rpx;
|
|
.img {
|
width: 280rpx;
|
height: 280rpx;
|
}
|
}
|
|
&.small {
|
width: 272rpx;
|
padding: 20rpx 15rpx 20rpx 15rpx;
|
margin-bottom: 15rpx;
|
|
.price {
|
.num {
|
font-size: 26rpx;
|
}
|
}
|
|
.img {
|
width: 220rpx;
|
height: 220rpx;
|
}
|
.btn_add {
|
width: 34rpx;
|
height: 34rpx;
|
}
|
}
|
}
|
|
.infoLabel_box {
|
display: flex;
|
margin-bottom: 16rpx;
|
|
.infoLabel {
|
white-space: nowrap;
|
width: max-content;
|
font-size: 19rpx;
|
margin-left: 10rpx;
|
line-height: 30rpx;
|
padding: 0 8rpx;
|
border: 1rpx solid #000000;
|
color: #000000;
|
border-radius: 6rpx;
|
|
&:first-child {
|
margin-left: 0;
|
}
|
|
&.organge {
|
color: rgba(255, 120, 13, 1);
|
background-color: rgba(255, 120, 13, 0.1);
|
border-color: rgba(255, 120, 13, 1);
|
}
|
|
&.green {
|
color: rgba(4, 199, 99, 1);
|
background-color: rgba(4, 199, 99, 0.10);
|
border-color: rgba(4, 199, 99, 1);
|
}
|
|
&.blue {
|
color: rgba(0, 37, 97, 1);
|
background-color: rgba(0, 37, 97, 0.1);
|
border-color: rgba(0, 37, 97, 1);
|
}
|
}
|
}
|
|
.small .infoLabel {
|
font-size: 16rpx;
|
line-height: 24rpx;
|
padding: 0 4rpx;
|
}
|
</style>
|
