|
@@ -2,29 +2,38 @@
|
|
<template>
|
|
<template>
|
|
<view class="ss-goods-wrap">
|
|
<view class="ss-goods-wrap">
|
|
<!-- xs卡片:横向紧凑型,一行放两个,图片左内容右边 -->
|
|
<!-- 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">
|
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
|
</view>
|
|
</view>
|
|
- <image class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit"></image>
|
|
|
|
- <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' : '' }]">
|
|
|
|
|
|
+ <image
|
|
|
|
+ class="xs-img-box"
|
|
|
|
+ :src="sheep.$url.cdn(data.image || data.picUrl)"
|
|
|
|
+ mode="aspectFit"
|
|
|
|
+ ></image>
|
|
|
|
+ <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 }}
|
|
{{ data.title || data.name }}
|
|
</view>
|
|
</view>
|
|
- <!-- 这里是新加的会员价和限时优惠 -->
|
|
|
|
- <view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
|
|
|
|
- <view class="card" v-if="iconShow">{{iconShow}}</view>
|
|
|
|
- <view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</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 }]"
|
|
|
|
+ >
|
|
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
|
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
|
- <text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
|
|
|
|
- <text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
|
|
|
|
- <text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
|
|
|
|
|
|
+ {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -34,26 +43,30 @@
|
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
|
</view>
|
|
</view>
|
|
- <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">
|
|
|
|
|
|
+ <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"
|
|
|
|
+ >
|
|
{{ data.title || data.name }}
|
|
{{ data.title || data.name }}
|
|
</view>
|
|
</view>
|
|
- <!-- 这里是新加的会员价和限时优惠 -->
|
|
|
|
- <view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
|
|
|
|
- <view class="card" v-if="iconShow">{{iconShow}}</view>
|
|
|
|
- <view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</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="sm-goods-price font-OPPOSANS"
|
|
|
|
+ :style="[{ color: goodsFields.price.color }]"
|
|
|
|
+ >
|
|
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
|
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
|
- <text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
|
|
|
|
- <text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
|
|
|
|
- <text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
|
|
|
|
|
|
+ {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -63,43 +76,58 @@
|
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
|
</view>
|
|
</view>
|
|
- <image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix"></image>
|
|
|
|
- <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' : '' }]">
|
|
|
|
|
|
+ <image
|
|
|
|
+ class="md-img-box"
|
|
|
|
+ :src="sheep.$url.cdn(data.image || data.picUrl)"
|
|
|
|
+ mode="widthFix"
|
|
|
|
+ ></image>
|
|
|
|
+ <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 }}
|
|
{{ data.title || data.name }}
|
|
</view>
|
|
</view>
|
|
- <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 }]">
|
|
|
|
|
|
+ <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 }]"
|
|
|
|
+ >
|
|
{{ data.subtitle || data.introduction }}
|
|
{{ data.subtitle || data.introduction }}
|
|
</view>
|
|
</view>
|
|
<slot name="activity">
|
|
<slot name="activity">
|
|
<view v-if="data.promos?.length" class="tag-box ss-flex-wrap ss-flex ss-col-center">
|
|
<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 }}
|
|
{{ item.title }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</slot>
|
|
</slot>
|
|
- <!-- 这里是新加的会员价和限时优惠 -->
|
|
|
|
- <view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
|
|
|
|
- <view class="card" v-if="iconShow">{{iconShow}}</view>
|
|
|
|
- <view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
|
|
|
|
- </view>
|
|
|
|
- <!-- 这里是新加的会员价和限时优惠结束 -->
|
|
|
|
<view class="ss-flex ss-col-bottom">
|
|
<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 }]"
|
|
|
|
+ >
|
|
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
|
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
|
- <text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
|
|
|
|
- <text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
|
|
|
|
- <text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
|
|
|
|
|
|
+ {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
|
</view>
|
|
</view>
|
|
|
|
|
|
- <view v-if="
|
|
|
|
|
|
+ <view
|
|
|
|
+ v-if="
|
|
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
|
|
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
|
|
(data.original_price > 0 || data.marketPrice > 0)
|
|
(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>
|
|
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
|
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
|
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
|
</view>
|
|
</view>
|
|
@@ -118,24 +146,38 @@
|
|
</view>
|
|
</view>
|
|
|
|
|
|
<!-- lg卡片:横向型,一行放一个,图片左内容右边 -->
|
|
<!-- 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">
|
|
<view v-if="tagStyle.show" class="tag-icon-box">
|
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
|
</view>
|
|
</view>
|
|
- <view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center"> 秒杀 </view>
|
|
|
|
|
|
+ <view v-if="seckillTag" class="seckill-tag ss-flex ss-row-center">秒杀</view>
|
|
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
|
|
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
|
|
<view class="tag-icon">拼团</view>
|
|
<view class="tag-icon">拼团</view>
|
|
</view>
|
|
</view>
|
|
- <image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
|
|
|
|
|
|
+ <image
|
|
|
|
+ class="lg-img-box"
|
|
|
|
+ :src="sheep.$url.cdn(data.image || data.picUrl)"
|
|
|
|
+ mode="aspectFill"
|
|
|
|
+ ></image>
|
|
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
|
|
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
|
|
<view>
|
|
<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 }}
|
|
{{ data.title || data.name }}
|
|
</view>
|
|
</view>
|
|
- <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 }]">
|
|
|
|
|
|
+ <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 }]"
|
|
|
|
+ >
|
|
{{ data.subtitle || data.introduction }}
|
|
{{ data.subtitle || data.introduction }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
@@ -147,27 +189,25 @@
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</slot>
|
|
</slot>
|
|
- <!-- 这里是新加的会员价和限时优惠 -->
|
|
|
|
- <view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
|
|
|
|
- <view class="card" v-if="iconShow">{{iconShow}}</view>
|
|
|
|
- <view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
|
|
|
|
- </view>
|
|
|
|
- <!-- 这里是新加的会员价和限时优惠结束 -->
|
|
|
|
<view class="ss-flex ss-col-bottom ss-m-t-10">
|
|
<view class="ss-flex ss-col-bottom ss-m-t-10">
|
|
- <view v-if="goodsFields.price?.show"
|
|
|
|
- class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
|
|
|
|
- :style="[{ color: goodsFields.price.color }]">
|
|
|
|
|
|
+ <view
|
|
|
|
+ v-if="goodsFields.price?.show"
|
|
|
|
+ class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
|
|
|
|
+ :style="[{ color: goodsFields.price.color }]"
|
|
|
|
+ >
|
|
<text class="ss-font-24">{{ priceUnit }}</text>
|
|
<text class="ss-font-24">{{ priceUnit }}</text>
|
|
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
|
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
|
</view>
|
|
</view>
|
|
- <view v-if="
|
|
|
|
|
|
+ <view
|
|
|
|
+ v-if="
|
|
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
|
|
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
|
|
(data.original_price > 0 || data.marketPrice > 0)
|
|
(data.original_price > 0 || data.marketPrice > 0)
|
|
- " class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS" :style="[{ color: originPriceColor }]">
|
|
|
|
|
|
+ "
|
|
|
|
+ class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS"
|
|
|
|
+ :style="[{ color: originPriceColor }]"
|
|
|
|
+ >
|
|
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
|
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
|
- <text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
|
|
|
|
- <text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
|
|
|
|
- <text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
|
|
|
|
|
|
+ <view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
|
|
<view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
|
|
@@ -187,45 +227,54 @@
|
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
|
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
|
|
</view>
|
|
</view>
|
|
|
|
|
|
- <image class="sl-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
|
|
|
|
|
|
+ <image
|
|
|
|
+ class="sl-img-box"
|
|
|
|
+ :src="sheep.$url.cdn(data.image || data.picUrl)"
|
|
|
|
+ mode="aspectFill"
|
|
|
|
+ ></image>
|
|
|
|
|
|
<view class="sl-goods-content">
|
|
<view class="sl-goods-content">
|
|
<view>
|
|
<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 }}
|
|
{{ data.title || data.name }}
|
|
</view>
|
|
</view>
|
|
- <view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
|
|
|
|
- class="sl-goods-subtitle ss-m-t-16"
|
|
|
|
- :style="[{ color: subTitleColor, background: subTitleBackground }]">
|
|
|
|
|
|
+ <view
|
|
|
|
+ v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
|
|
|
|
+ class="sl-goods-subtitle ss-m-t-16"
|
|
|
|
+ :style="[{ color: subTitleColor, background: subTitleBackground }]"
|
|
|
|
+ >
|
|
{{ data.subtitle || data.introduction }}
|
|
{{ data.subtitle || data.introduction }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view>
|
|
<view>
|
|
<slot name="activity">
|
|
<slot name="activity">
|
|
<view v-if="data.promos?.length" class="tag-box ss-flex ss-col-center ss-flex-wrap">
|
|
<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 }}
|
|
{{ item.title }}
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</slot>
|
|
</slot>
|
|
- <!-- 这里是新加的会员价和限时优惠 -->
|
|
|
|
- <view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
|
|
|
|
- <view class="card" v-if="iconShow">{{iconShow}}</view>
|
|
|
|
- <view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
|
|
|
|
- </view>
|
|
|
|
- <!-- 这里是新加的会员价和限时优惠结束 -->
|
|
|
|
<view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
|
|
<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="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
|
|
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
|
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
|
|
- <text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
|
|
|
|
- <text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
|
|
|
|
- <text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
|
|
|
|
|
|
+ {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
|
|
</view>
|
|
</view>
|
|
- <view v-if="
|
|
|
|
|
|
+ <view
|
|
|
|
+ v-if="
|
|
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
|
|
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
|
|
(data.original_price > 0 || data.marketPrice > 0)
|
|
(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>
|
|
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
|
|
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
|
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
|
|
</view>
|
|
</view>
|
|
@@ -248,50 +297,36 @@
|
|
* 商品卡片
|
|
* 商品卡片
|
|
*
|
|
*
|
|
* @property {Array} size = [xs | sm | md | lg | sl ] - 列表数据
|
|
* @property {Array} size = [xs | sm | md | lg | sl ] - 列表数据
|
|
- * @property {String} tag - md及以上才有
|
|
|
|
- * @property {String} img - 图片
|
|
|
|
- * @property {String} background - 背景色
|
|
|
|
- * @property {String} topRadius - 上圆角
|
|
|
|
- * @property {String} bottomRadius - 下圆角
|
|
|
|
- * @property {String} title - 标题
|
|
|
|
- * @property {String} titleColor - 标题颜色
|
|
|
|
|
|
+ * @property {String} tag - md及以上才有
|
|
|
|
+ * @property {String} img - 图片
|
|
|
|
+ * @property {String} background - 背景色
|
|
|
|
+ * @property {String} topRadius - 上圆角
|
|
|
|
+ * @property {String} bottomRadius - 下圆角
|
|
|
|
+ * @property {String} title - 标题
|
|
|
|
+ * @property {String} titleColor - 标题颜色
|
|
* @property {Number} titleWidth = 0 - 标题宽度,默认0,单位rpx
|
|
* @property {Number} titleWidth = 0 - 标题宽度,默认0,单位rpx
|
|
- * @property {String} subTitle - 副标题
|
|
|
|
- * @property {String} subTitleColor - 副标题颜色
|
|
|
|
- * @property {String} subTitleBackground - 副标题背景
|
|
|
|
- * @property {String | Number} price - 价格
|
|
|
|
- * @property {String} priceColor - 价格颜色
|
|
|
|
- * @property {String | Number} originPrice - 原价/划线价
|
|
|
|
- * @property {String} originPriceColor - 原价颜色
|
|
|
|
- * @property {String | Number} sales - 销售数量
|
|
|
|
- * @property {String} salesColor - 销售数量颜色
|
|
|
|
|
|
+ * @property {String} subTitle - 副标题
|
|
|
|
+ * @property {String} subTitleColor - 副标题颜色
|
|
|
|
+ * @property {String} subTitleBackground - 副标题背景
|
|
|
|
+ * @property {String | Number} price - 价格
|
|
|
|
+ * @property {String} priceColor - 价格颜色
|
|
|
|
+ * @property {String | Number} originPrice - 原价/划线价
|
|
|
|
+ * @property {String} originPriceColor - 原价颜色
|
|
|
|
+ * @property {String | Number} sales - 销售数量
|
|
|
|
+ * @property {String} salesColor - 销售数量颜色
|
|
*
|
|
*
|
|
* @slots activity - 活动插槽
|
|
* @slots activity - 活动插槽
|
|
* @slots cart - 购物车插槽,默认包含文字,背景色,文字颜色 || 图片 || 行为
|
|
* @slots cart - 购物车插槽,默认包含文字,背景色,文字颜色 || 图片 || 行为
|
|
*
|
|
*
|
|
- * @event {Function()} click - 点击卡片
|
|
|
|
|
|
+ * @event {Function()} click - 点击卡片
|
|
*
|
|
*
|
|
*/
|
|
*/
|
|
- import {
|
|
|
|
- computed,
|
|
|
|
- reactive,
|
|
|
|
- getCurrentInstance,
|
|
|
|
- onMounted,
|
|
|
|
- nextTick,
|
|
|
|
- ref
|
|
|
|
- } from 'vue';
|
|
|
|
|
|
+ import { computed, reactive, getCurrentInstance, onMounted, nextTick } from 'vue';
|
|
import sheep from '@/sheep';
|
|
import sheep from '@/sheep';
|
|
- import {
|
|
|
|
- fen2yuan,
|
|
|
|
- formatSales
|
|
|
|
- } from '@/sheep/hooks/useGoods';
|
|
|
|
- import {
|
|
|
|
- formatStock
|
|
|
|
- } from '@/sheep/hooks/useGoods';
|
|
|
|
- import goodsCollectVue from '@/pages/user/goods-collect.vue';
|
|
|
|
- import {
|
|
|
|
- isArray
|
|
|
|
- } from 'lodash-es';
|
|
|
|
|
|
+ import { fen2yuan, formatSales } from '@/sheep/hooks/useGoods';
|
|
|
|
+ import { formatStock } from '@/sheep/hooks/useGoods';
|
|
|
|
+ import { isArray } from 'lodash-es';
|
|
|
|
+
|
|
// 数据
|
|
// 数据
|
|
const state = reactive({});
|
|
const state = reactive({});
|
|
|
|
|
|
@@ -299,42 +334,30 @@
|
|
const props = defineProps({
|
|
const props = defineProps({
|
|
goodsFields: {
|
|
goodsFields: {
|
|
type: [Array, Object],
|
|
type: [Array, Object],
|
|
- default () {
|
|
|
|
|
|
+ default() {
|
|
return {
|
|
return {
|
|
// 商品价格
|
|
// 商品价格
|
|
- price: {
|
|
|
|
- show: true
|
|
|
|
- },
|
|
|
|
|
|
+ price: { show: true },
|
|
// 库存
|
|
// 库存
|
|
- stock: {
|
|
|
|
- show: true
|
|
|
|
- },
|
|
|
|
|
|
+ stock: { show: true },
|
|
// 商品名称
|
|
// 商品名称
|
|
- name: {
|
|
|
|
- show: true
|
|
|
|
- },
|
|
|
|
|
|
+ name: { show: true },
|
|
// 商品介绍
|
|
// 商品介绍
|
|
- introduction: {
|
|
|
|
- show: true
|
|
|
|
- },
|
|
|
|
|
|
+ introduction: { show: true },
|
|
// 市场价
|
|
// 市场价
|
|
- marketPrice: {
|
|
|
|
- show: true
|
|
|
|
- },
|
|
|
|
|
|
+ marketPrice: { show: true },
|
|
// 销量
|
|
// 销量
|
|
- salesCount: {
|
|
|
|
- show: true
|
|
|
|
- },
|
|
|
|
|
|
+ salesCount: { show: true },
|
|
};
|
|
};
|
|
},
|
|
},
|
|
},
|
|
},
|
|
tagStyle: {
|
|
tagStyle: {
|
|
type: Object,
|
|
type: Object,
|
|
- default: {},
|
|
|
|
|
|
+ default: () => ({}),
|
|
},
|
|
},
|
|
data: {
|
|
data: {
|
|
type: Object,
|
|
type: Object,
|
|
- default: {},
|
|
|
|
|
|
+ default: () => ({}),
|
|
},
|
|
},
|
|
size: {
|
|
size: {
|
|
type: String,
|
|
type: String,
|
|
@@ -393,25 +416,7 @@
|
|
default: false,
|
|
default: false,
|
|
},
|
|
},
|
|
});
|
|
});
|
|
- //判断限时优惠和会员价标签内容暂时导致页面出错,又舍不得丢,等着把新的数据整合到商品信息中,也用起来
|
|
|
|
- const iconShow = handle()
|
|
|
|
-
|
|
|
|
- function handle() {
|
|
|
|
- if (props.data.discountPrice === null && props.data.vipPrice === null) {
|
|
|
|
- // 如果两个值都为 null,则不展示任何内容
|
|
|
|
- return '';
|
|
|
|
- } else if (props.data.discountPrice === null) {
|
|
|
|
- // 如果 discountPrice 为 null,展示 vipPrice
|
|
|
|
- return '会员价';
|
|
|
|
- } else if (props.data.vipPrice === null) {
|
|
|
|
- // 如果 vipPrice 为 null,展示 discountPrice
|
|
|
|
- return '限时优惠';
|
|
|
|
- } else if (props.data.discountPrice < props.data.vipPrice) {
|
|
|
|
- return '限时优惠';
|
|
|
|
- } else if (props.data.discountPrice > props.data.vipPrice) {
|
|
|
|
- return '会员价';
|
|
|
|
- }
|
|
|
|
- }
|
|
|
|
|
|
+
|
|
// 组件样式
|
|
// 组件样式
|
|
const elStyles = computed(() => {
|
|
const elStyles = computed(() => {
|
|
return {
|
|
return {
|
|
@@ -443,18 +448,13 @@
|
|
};
|
|
};
|
|
|
|
|
|
// 获取卡片实时高度
|
|
// 获取卡片实时高度
|
|
- const {
|
|
|
|
- proxy
|
|
|
|
- } = getCurrentInstance();
|
|
|
|
|
|
+ const { proxy } = getCurrentInstance();
|
|
const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
|
|
const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
|
|
|
|
|
|
function getGoodsPriceCardWH() {
|
|
function getGoodsPriceCardWH() {
|
|
if (props.size === 'md') {
|
|
if (props.size === 'md') {
|
|
const view = uni.createSelectorQuery().in(proxy);
|
|
const view = uni.createSelectorQuery().in(proxy);
|
|
- view.select(`#${elId}`).fields({
|
|
|
|
- size: true,
|
|
|
|
- scrollOffset: true
|
|
|
|
- });
|
|
|
|
|
|
+ view.select(`#${elId}`).fields({ size: true, scrollOffset: true });
|
|
view.exec((data) => {
|
|
view.exec((data) => {
|
|
let totalHeight = 0;
|
|
let totalHeight = 0;
|
|
const goodsPriceCard = data[0];
|
|
const goodsPriceCard = data[0];
|
|
@@ -469,6 +469,7 @@
|
|
});
|
|
});
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
+
|
|
onMounted(() => {
|
|
onMounted(() => {
|
|
nextTick(() => {
|
|
nextTick(() => {
|
|
getGoodsPriceCardWH();
|
|
getGoodsPriceCardWH();
|
|
@@ -762,31 +763,4 @@
|
|
color: #ffffff;
|
|
color: #ffffff;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
-
|
|
|
|
- .card {
|
|
|
|
- width: fit-content;
|
|
|
|
- height: fit-content;
|
|
|
|
- padding: 2rpx 10rpx;
|
|
|
|
- background-color: red;
|
|
|
|
- color: #ffffff;
|
|
|
|
- font-size: 24rpx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .card2 {
|
|
|
|
- width: fit-content;
|
|
|
|
- height: fit-content;
|
|
|
|
- padding: 2rpx 10rpx;
|
|
|
|
- background-color: rgb(255, 242, 241);
|
|
|
|
- color: #ff2621;
|
|
|
|
- font-size: 24rpx;
|
|
|
|
- margin-left: 5rpx;
|
|
|
|
- }
|
|
|
|
-
|
|
|
|
- .iconBox {
|
|
|
|
- width: 100%;
|
|
|
|
- height: fit-content;
|
|
|
|
- margin-top: 10rpx;
|
|
|
|
- display: flex;
|
|
|
|
- justify-content: flex-start;
|
|
|
|
- }
|
|
|
|
-</style>
|
|
|
|
|
|
+</style>
|