@ -2,49 +2,32 @@
< template >
< view class = "ss-goods-wrap" >
<!-- xs卡片 : 横向紧凑型 , 一行放两个 , 图片左内容右边 -- >
< view
v - if = "size === 'xs'"
class = "xs-goods-card ss-flex ss-col-stretch"
: style = "[elStyles]"
@ tap = "onClick"
>
< view v-if ="size === 'xs'" class="xs-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @tap="onClick" >
< view v-if ="tagStyle.show" class="tag-icon-box" >
< image class = "tag-icon" : src = "sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" > < / image >
< / view >
< image class = "xs-img-box" : src = "sheep.$url.cdn(data.image || data.picUrl)" mode = "aspectFit" / >
< view
v - if = "goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
class = "xs-goods-content ss-flex-col ss-row-around"
>
< view
v - if = "goodsFields.title?.show || goodsFields.name?.show"
class = "xs-goods-title ss-line-1"
: style = "[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
< view v -if = " goodsFields.title ? .show | | goodsFields.name ? .show | | goodsFields.price ? .show "
class = "xs-goods-content ss-flex-col ss-row-around" >
< view v -if = " goodsFields.title ? .show | | goodsFields.name ? .show " class = "xs-goods-title ss-line-1"
: style = "[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]" >
{ { data . title || data . name } }
< / view >
<!-- 活动信息 -- >
< view class = "iconBox" v-if ="data.promotionType > 0 || data.rewardActivity" >
< view class = "card" v-if ="discountText" > {{ discountText }} < / view >
< view
class = "card2"
< view class = "card2"
v - for = "item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
: key = "item"
>
: key = "item" >
{ { item } }
< / view >
< / view >
< view
v - if = "goodsFields.price?.show"
class = "xs-goods-price font-OPPOSANS"
: style = "[{ color: goodsFields.price.color }]"
>
< view v -if = " goodsFields.price ? .show " class = "xs-goods-price font-OPPOSANS"
: style = "[{ color: goodsFields.price.color }]" >
<!-- 活动价格 -- >
< view class = "ss-flex" v-if ="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type" >
< image
: src = "sheep.$url.static('/static/img/shop/goods/score1.svg')"
class = "point-img"
> < / image >
< view class = "ss-flex"
v - if = "data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type" >
< image :src ="sheep.$url.static('/static/img/shop/goods/score1.svg')" class = "point-img" > < / image >
< text class = "point-text ss-m-r-16" >
{ { data . point } }
{ { ! data . pointPrice || data . pointPrice === 0 ? '' : ` + ${ priceUnit } ${ fen2yuan ( data . pointPrice ) } ` } }
@ -66,51 +49,36 @@
< view v-if ="tagStyle.show" class="tag-icon-box" >
< image class = "tag-icon" : src = "sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" > < / image >
< / view >
< image
class = "sm-img-box"
: src = "sheep.$url.cdn(data.image || data.picUrl)"
mode = "aspectFill"
> < / image >
< image class = "sm-img-box" : src = "sheep.$url.cdn(data.image || data.picUrl)" mode = "aspectFill" > < / image >
< view
v - if = "goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
class = "sm-goods-content"
: style = "[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
< view
v - if = "goodsFields.title?.show || goodsFields.name?.show"
class = "sm-goods-title ss-line-1 ss-m-b-16"
>
< view v -if = " goodsFields.title ? .show | | goodsFields.name ? .show | | goodsFields.price ? .show "
class = "sm-goods-content" : style = "[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]" >
< view v -if = " goodsFields.title ? .show | | goodsFields.name ? .show "
class = "sm-goods-title ss-line-1 ss-m-b-16" >
{ { data . title || data . name } }
< / view >
<!-- 活动信息 -- >
< view class = "iconBox" v-if ="data.promotionType > 0 || data.rewardActivity" >
< view class = "card" v-if ="discountText" > {{ discountText }} < / view >
< view
class = "card2"
< view class = "card2"
v - for = "item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
: key = "item"
>
: key = "item" >
{ { item } }
< / view >
< / view >
< view
v - if = "goodsFields.price?.show"
class = "sm-goods-price font-OPPOSANS"
: style = "[{ color: goodsFields.price.color }]"
>
< view v -if = " goodsFields.price ? .show " class = "new-ii sm-goods-price font-OPPOSANS"
: style = "[{ color: goodsFields.price.color }]" >
<!-- 活动价格 -- >
< view class = "ss-flex" v-if ="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type" >
< image
: src = "sheep.$url.static('/static/img/shop/goods/score1.svg')"
class = "point-img"
> < / image >
< view class = "ss-flex"
v - if = "data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type" >
< image :src ="sheep.$url.static('/static/img/shop/goods/score1.svg')" class = "point-img" > < / image >
< text class = "point-text ss-m-r-16" >
{ { data . point } }
{ { ! data . pointPrice || data . pointPrice === 0 ? '' : ` + ${ priceUnit } ${ fen2yuan ( data . pointPrice ) } ` } }
< / text >
< / view >
< template v-else >
< view class = "fff" v-if ="btn == 'ms'" > 抢 < / view >
< text class = "price-unit ss-font-24" > { { priceUnit } } < / text >
< text v-if ="data.promotionPrice > 0" > {{ fen2yuan ( data.promotionPrice ) }} < / text >
< text v-else >
@ -118,6 +86,7 @@
< / text >
< / template >
< / view >
< view class = "sss" v-if ="btn == 'pt'" > 参与拼团 < / view >
< / view >
< / view >
@ -127,31 +96,19 @@
< image class = "tag-icon" : src = "sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" / >
< / view >
< image class = "md-img-box" : src = "sheep.$url.cdn(data.image || data.picUrl)" mode = "widthFix" / >
< view
class = "md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
: id = "elId"
>
< view
v - if = "goodsFields.title?.show || goodsFields.name?.show"
class = "md-goods-title ss-line-1"
: style = "[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
< view class = "md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16" :id ="elId" >
< view v -if = " goodsFields.title ? .show | | goodsFields.name ? .show " class = "md-goods-title ss-line-1"
: style = "[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]" >
{ { data . title || data . name } }
< / view >
< view
v - if = "goodsFields.subtitle?.show || goodsFields.introduction?.show"
< view v -if = " goodsFields.subtitle ? .show | | goodsFields.introduction ? .show "
class = "md-goods-subtitle ss-m-t-16 ss-line-1"
: style = "[{ color: subTitleColor, background: subTitleBackground }]"
>
: style = "[{ color: subTitleColor, background: subTitleBackground }]" >
{ { data . subtitle || data . introduction } }
< / view >
< slot name = "activity" >
< view v-if ="data.promos?.length" class="tag-box ss-flex-wrap ss-flex ss-col-center" >
< view
class = "activity-tag ss-m-r-10 ss-m-t-16"
v - for = "item in data.promos"
: key = "item.id"
>
< view class = "activity-tag ss-m-r-10 ss-m-t-16" v-for ="item in data.promos" :key="item.id" >
{ { item . title } }
< / view >
< / view >
@ -159,26 +116,20 @@
<!-- 活动信息 -- >
< view class = "iconBox" v-if ="data.promotionType > 0 || data.rewardActivity" >
< view class = "card" v-if ="discountText" > {{ discountText }} < / view >
< view
class = "card2"
< view class = "card2"
v - for = "item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
: key = "item"
>
: key = "item" >
{ { item } }
< / view >
< / view >
< view class = "ss-flex ss-col-bottom" >
< view
v - if = "goodsFields.price?.show"
class = "md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
: style = "[{ color: goodsFields.price.color }]"
>
< view v -if = " goodsFields.price ? .show " class = "md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
: style = "[{ color: goodsFields.price.color }]" >
<!-- 活动价格 -- >
< view class = "ss-flex" v-if ="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type" >
< image
: src = "sheep.$url.static('/static/img/shop/goods/score1.svg')"
class = "point-img"
> < / image >
< view class = "ss-flex"
v - if = "data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type" >
< image :src ="sheep.$url.static('/static/img/shop/goods/score1.svg')" class = "point-img" >
< / image >
< text class = "point-text ss-m-r-16" >
{ { data . point } }
{ { ! data . pointPrice || data . pointPrice === 0 ? '' : ` + ${ priceUnit } ${ fen2yuan ( data . pointPrice ) } ` } }
@ -192,14 +143,10 @@
< / text >
< / template >
< / view >
< view
v - if = "
< view v -if = "
( goodsFields . original _price ? . show || goodsFields . marketPrice ? . show ) &&
( data . original _price > 0 || data . marketPrice > 0 )
"
class = "goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
: style = "[{ color: originPriceColor }]"
>
" class=" goods - origin - price ss - m - t - 16 font - OPPOSANS ss - flex " :style=" [ { color : originPriceColor } ] " >
< text class = "price-unit ss-font-20" > { { priceUnit } } < / text >
< view class = "ss-m-l-8" > { { fen2yuan ( data . marketPrice ) } } < / view >
< / view >
@ -218,12 +165,7 @@
< / view >
<!-- lg卡片 : 横向型 , 一行放一个 , 图片左内容右边 -- >
< view
v - if = "size === 'lg'"
class = "lg-goods-card ss-flex ss-col-stretch"
: style = "[elStyles]"
@ tap = "onClick"
>
< view v-if ="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @tap="onClick" >
< view v-if ="tagStyle.show" class="tag-icon-box" >
< image class = "tag-icon" : src = "sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" > < / image >
< / view >
@ -231,25 +173,16 @@
< view v-if ="grouponTag" class="groupon-tag ss-flex ss-row-center" >
< view class = "tag-icon" > 拼团 < / view >
< / view >
< image
class = "lg-img-box"
: src = "sheep.$url.cdn(data.image || data.picUrl)"
mode = "aspectFill"
/ >
< image class = "lg-img-box" : src = "sheep.$url.cdn(data.image || data.picUrl)" mode = "aspectFill" / >
< view class = "lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 " >
< view >
< view
v - if = "goodsFields.title?.show || goodsFields.name?.show"
class = "lg-goods-title ss-line-2"
: style = "[{ color: titleColor }]"
>
< view v -if = " goodsFields.title ? .show | | goodsFields.name ? .show " class = "lg-goods-title ss-line-2"
: style = "[{ color: titleColor }]" >
{ { data . title || data . name } }
< / view >
< view
v - if = "goodsFields.subtitle?.show || goodsFields.introduction?.show"
< view v -if = " goodsFields.subtitle ? .show | | goodsFields.introduction ? .show "
class = "lg-goods-subtitle ss-m-t-10 ss-line-1"
: style = "[{ color: subTitleColor, background: subTitleBackground }]"
>
: style = "[{ color: subTitleColor, background: subTitleBackground }]" >
{ { data . subtitle || data . introduction } }
< / view >
< / view >
@ -264,22 +197,20 @@
<!-- 活动信息 -- >
< view class = "iconBox" v-if ="data.promotionType > 0 || data.rewardActivity" >
< view class = "card" v-if ="discountText" > {{ discountText }} < / view >
< view
class = "card2"
< view class = "card2"
v - for = "item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
: key = "item"
>
: key = "item" >
{ { item } }
< / view >
< / view >
< view v-if ="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS" >
< view class = "sl-goods-price ss-m-r-12" : style = "[{ color: goodsFields.price.color }]" >
<!-- 活动价格 -- >
< view class = "ss-flex" v-if ="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type" >
< view class = "ss-flex"
v - if = "data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type" >
< image
src = "https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
class = "point-img"
> < / image >
class = "point-img" > < / image >
< text class = "point-text ss-m-r-16" >
{ { data . point } }
{ { ! data . pointPrice || data . pointPrice === 0 ? '' : ` + ${ priceUnit } ${ fen2yuan ( data . pointPrice ) } ` } }
@ -293,14 +224,10 @@
< / text >
< / template >
< / view >
< view
v - if = "
< view v -if = "
( goodsFields . original _price ? . show || goodsFields . marketPrice ? . show ) &&
( data . original _price > 0 || data . marketPrice > 0 )
"
class = "goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
: style = "[{ color: originPriceColor }]"
>
" class=" goods - origin - price ss - m - t - 16 font - OPPOSANS ss - flex " :style=" [ { color : originPriceColor } ] " >
< text class = "price-unit ss-font-20" > { { priceUnit } } < / text >
< view class = "ss-m-l-8" > { { fen2yuan ( data . marketPrice ) } } < / view >
< / view >
@ -321,36 +248,23 @@
< view v-if ="tagStyle.show" class="tag-icon-box" >
< image class = "tag-icon" : src = "sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" / >
< / view >
< image
class = "sl-img-box"
: src = "sheep.$url.cdn(data.image || data.picUrl)"
mode = "aspectFill"
/ >
< image class = "sl-img-box" : src = "sheep.$url.cdn(data.image || data.picUrl)" mode = "aspectFill" / >
< view class = "sl-goods-content" >
< view >
< view
v - if = "goodsFields.title?.show || goodsFields.name?.show"
class = "sl-goods-title ss-line-1"
: style = "[{ color: titleColor }]"
>
< view v -if = " goodsFields.title ? .show | | goodsFields.name ? .show " class = "sl-goods-title ss-line-1"
: style = "[{ color: titleColor }]" >
{ { data . title || data . name } }
< / view >
< view
v - if = "goodsFields.subtitle?.show || goodsFields.introduction?.show"
< view v -if = " goodsFields.subtitle ? .show | | goodsFields.introduction ? .show "
class = "sl-goods-subtitle ss-m-t-16"
: style = "[{ color: subTitleColor, background: subTitleBackground }]"
>
: style = "[{ color: subTitleColor, background: subTitleBackground }]" >
{ { data . subtitle || data . introduction } }
< / view >
< / view >
< view >
< slot name = "activity" >
< view v-if ="data.promos?.length" class="tag-box ss-flex ss-col-center ss-flex-wrap" >
< view
class = "activity-tag ss-m-r-10 ss-m-t-16"
v - for = "item in data.promos"
: key = "item.id"
>
< view class = "activity-tag ss-m-r-10 ss-m-t-16" v-for ="item in data.promos" :key="item.id" >
{ { item . title } }
< / view >
< / view >
@ -358,22 +272,20 @@
<!-- 活动信息 -- >
< view class = "iconBox" v-if ="data.promotionType > 0 || data.rewardActivity" >
< view class = "card" v-if ="discountText" > {{ discountText }} < / view >
< view
class = "card2"
< view class = "card2"
v - for = "item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
: key = "item"
>
: key = "item" >
{ { item } }
< / view >
< / view >
< view v-if ="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS" >
< view class = "sl-goods-price ss-m-r-12" : style = "[{ color: goodsFields.price.color }]" >
<!-- 活动价格 -- >
< view class = "ss-flex" v-if ="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type" >
< view class = "ss-flex"
v - if = "data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type" >
< image
src = "https://zysc.fjptzykj.com:3000/shangcheng/b0c400b1b30a9ca45031093595e42533de267823285c702fed250061920debf0.png"
class = "point-img"
> < / image >
class = "point-img" > < / image >
< text class = "ss-m-r-16" >
{ { data . point } }
{ { ! data . pointPrice || data . pointPrice === 0 ? '' : ` + ${ priceUnit } ${ fen2yuan ( data . pointPrice ) } ` } }
@ -387,14 +299,10 @@
< / text >
< / template >
< / view >
< view
v - if = "
< view v -if = "
( goodsFields . original _price ? . show || goodsFields . marketPrice ? . show ) &&
( data . original _price > 0 || data . marketPrice > 0 )
"
class = "goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
: style = "[{ color: originPriceColor }]"
>
" class=" goods - origin - price ss - m - t - 16 font - OPPOSANS ss - flex " :style=" [ { color : originPriceColor } ] " >
< text class = "price-unit ss-font-20" > { { priceUnit } } < / text >
< view class = "ss-m-l-8" > { { fen2yuan ( data . marketPrice ) } } < / view >
< / view >
@ -441,7 +349,12 @@
* @ event { Function ( ) } click - 点击卡片
*
* /
import { computed , getCurrentInstance , nextTick , onMounted } from 'vue' ;
import {
computed ,
getCurrentInstance ,
nextTick ,
onMounted
} from 'vue' ;
import sheep from '@/sheep' ;
import {
fen2yuan ,
@ -450,14 +363,18 @@
formatStock ,
getRewardActivityRuleItemDescriptions ,
} from '@/sheep/hooks/useGoods' ;
import { isArray } from 'lodash-es' ;
import { PromotionActivityTypeEnum } from '@/sheep/util/const' ;
import {
isArray
} from 'lodash-es' ;
import {
PromotionActivityTypeEnum
} from '@/sheep/util/const' ;
/ / 接 收 参 数
const props = defineProps ( {
goodsFields : {
type : [ Array , Object ] ,
default ( ) {
default ( ) {
return {
/ / 商 品 价 格
price : {
@ -538,6 +455,10 @@
type : String ,
default : '' ,
} ,
btn : {
type : String ,
default : '' ,
} ,
buttonShow : {
type : Boolean ,
default : true ,
@ -579,7 +500,8 @@
let text = [ ] ;
if ( props . goodsFields . salesCount ? . show ) {
if ( props . data . activityType && props . data . activityType === PromotionActivityTypeEnum . POINT . type ) {
text . push ( formatExchange ( props . data . sales _show _type , ( props . data . pointTotalStock || 0 ) - ( props . data . pointStock || 0 ) ) ) ;
text . push ( formatExchange ( props . data . sales _show _type , ( props . data . pointTotalStock || 0 ) - ( props
. data . pointStock || 0 ) ) ) ;
} else {
text . push ( formatSales ( props . data . sales _show _type , props . data . salesCount ) ) ;
}
@ -602,7 +524,9 @@
} ;
/ / 获 取 卡 片 实 时 高 度
const { proxy } = getCurrentInstance ( ) ;
const {
proxy
} = getCurrentInstance ( ) ;
const elId = ` sheep_ ${ Math . ceil ( Math . random ( ) * 10 e5 ) . toString ( 36 ) } ` ;
function getGoodsPriceCardWH ( ) {
@ -828,13 +752,14 @@
z - index : 1 ;
background - color : $white ;
/ / h e i g h t : 2 8 0 r p x ;
border - radius : 10 px ! important ;
border - radius : 10 px ! important ;
padding : 10 px ;
. lg - img - box {
width : 180 rpx ;
height : 180 rpx ;
margin - right : 20 rpx ;
border - radius : 10 px ;
border - radius : 10 px ;
}
. lg - goods - title {
@ -957,4 +882,28 @@
justify - content : flex - start ;
flex - wrap : wrap ;
}
. sss {
margin - top : 10 px ;
padding : 3 px ;
font - size : 13 px ;
background : # e93422 ;
text - align : center ;
color : white ;
border - radius : 0 px 0 px 5 px 5 px ;
}
. fff {
padding : 3 px ;
font - size : 13 px ;
background : # e93422 ;
text - align : center ;
color : white ;
border - radius : 5 px ;
width : 20 px ;
margin - right : 5 px ;
}
. new - ii {
display : flex ;
align - items : baseline ;
}
< / style >