!107 【功能完善】商城: 完善积分商城

Merge pull request !107 from puhui999/master
pull/108/head^2
芋道源码 2024-10-02 07:00:43 +00:00 committed by Gitee
commit a5d073e798
No known key found for this signature in database
GPG Key ID: 173E9B9CA92EEF8F
6 changed files with 1213 additions and 1300 deletions

View File

@ -6,8 +6,7 @@
"^su-(.*)": "@/sheep/ui/su-$1/su-$1.vue" "^su-(.*)": "@/sheep/ui/su-$1/su-$1.vue"
} }
}, },
"pages": [ "pages": [{
{
"path": "pages/index/index", "path": "pages/index/index",
"aliasPath": "/", "aliasPath": "/",
"style": { "style": {
@ -85,11 +84,9 @@
} }
} }
], ],
"subPackages": [ "subPackages": [{
{
"root": "pages/goods", "root": "pages/goods",
"pages": [ "pages": [{
{
"path": "index", "path": "index",
"style": { "style": {
"navigationBarTitleText": "商品详情" "navigationBarTitleText": "商品详情"
@ -111,6 +108,7 @@
"group": "商品" "group": "商品"
} }
}, },
{ {
"path": "seckill", "path": "seckill",
"style": { "style": {
@ -163,8 +161,7 @@
}, },
{ {
"root": "pages/order", "root": "pages/order",
"pages": [ "pages": [{
{
"path": "detail", "path": "detail",
"style": { "style": {
"navigationBarTitleText": "订单详情" "navigationBarTitleText": "订单详情"
@ -263,8 +260,7 @@
}, },
{ {
"root": "pages/user", "root": "pages/user",
"pages": [ "pages": [{
{
"path": "info", "path": "info",
"style": { "style": {
"navigationBarTitleText": "我的信息" "navigationBarTitleText": "我的信息"
@ -362,8 +358,7 @@
}, },
{ {
"root": "pages/commission", "root": "pages/commission",
"pages": [ "pages": [{
{
"path": "index", "path": "index",
"style": { "style": {
"navigationBarTitleText": "分销" "navigationBarTitleText": "分销"
@ -422,8 +417,7 @@
"title": "我的团队", "title": "我的团队",
"group": "分销商城" "group": "分销商城"
} }
}, }, {
{
"path": "promoter", "path": "promoter",
"style": { "style": {
"navigationBarTitleText": "推广人排行榜" "navigationBarTitleText": "推广人排行榜"
@ -434,8 +428,7 @@
"title": "推广人排行榜", "title": "推广人排行榜",
"group": "分销商城" "group": "分销商城"
} }
}, }, {
{
"path": "commission-ranking", "path": "commission-ranking",
"style": { "style": {
"navigationBarTitleText": "佣金排行榜" "navigationBarTitleText": "佣金排行榜"
@ -446,8 +439,7 @@
"title": "佣金排行榜", "title": "佣金排行榜",
"group": "分销商城" "group": "分销商城"
} }
}, }, {
{
"path": "withdraw", "path": "withdraw",
"style": { "style": {
"navigationBarTitleText": "申请提现" "navigationBarTitleText": "申请提现"
@ -463,8 +455,7 @@
}, },
{ {
"root": "pages/app", "root": "pages/app",
"pages": [ "pages": [{
{
"path": "sign", "path": "sign",
"style": { "style": {
"navigationBarTitleText": "签到中心" "navigationBarTitleText": "签到中心"
@ -475,13 +466,11 @@
"title": "签到中心", "title": "签到中心",
"group": "应用" "group": "应用"
} }
} }]
]
}, },
{ {
"root": "pages/public", "root": "pages/public",
"pages": [ "pages": [{
{
"path": "setting", "path": "setting",
"style": { "style": {
"navigationBarTitleText": "系统设置" "navigationBarTitleText": "系统设置"
@ -530,8 +519,7 @@
}, },
{ {
"root": "pages/coupon", "root": "pages/coupon",
"pages": [ "pages": [{
{
"path": "list", "path": "list",
"style": { "style": {
"navigationBarTitleText": "领券中心" "navigationBarTitleText": "领券中心"
@ -558,8 +546,7 @@
}, },
{ {
"root": "pages/chat", "root": "pages/chat",
"pages": [ "pages": [{
{
"path": "index", "path": "index",
"style": { "style": {
"navigationBarTitleText": "客服" "navigationBarTitleText": "客服"
@ -570,13 +557,11 @@
"title": "客服", "title": "客服",
"group": "客服" "group": "客服"
} }
} }]
]
}, },
{ {
"root": "pages/pay", "root": "pages/pay",
"pages": [ "pages": [{
{
"path": "index", "path": "index",
"style": { "style": {
"navigationBarTitleText": "收银台" "navigationBarTitleText": "收银台"
@ -616,8 +601,7 @@
}, },
{ {
"root": "pages/activity", "root": "pages/activity",
"pages": [ "pages": [{
{
"path": "groupon/detail", "path": "groupon/detail",
"style": { "style": {
"navigationBarTitleText": "拼团详情" "navigationBarTitleText": "拼团详情"
@ -668,6 +652,17 @@
"title": "秒杀活动", "title": "秒杀活动",
"group": "营销活动" "group": "营销活动"
} }
},
{
"path": "point/list",
"style": {
"navigationBarTitleText": "积分商城"
},
"meta": {
"sync": true,
"title": "积分商城",
"group": "营销活动"
}
} }
] ]
} }
@ -680,8 +675,7 @@
"navigationStyle": "custom" "navigationStyle": "custom"
}, },
"tabBar": { "tabBar": {
"list": [ "list": [{
{
"pagePath": "pages/index/index" "pagePath": "pages/index/index"
}, },
{ {

View File

@ -1,78 +1,113 @@
<!-- 积分商城商品列表 --> <!-- 积分商城商品列表 -->
<template> <template>
<s-layout title="积分商城"> <s-layout title="积分商城" navbar="normal" :leftWidth="0" :rightWidth="0">
<view class="ss-p-20"> <!-- 筛选 -->
<view v-for="item in state.pagination.data" :key="item.id" class="ss-m-b-20"> <su-sticky bgColor="#fff">
<s-point-card <view class="ss-flex">
size="sl" <view class="ss-flex-1">
:data="item"
priceColor="#FF3000" </view>
@tap="sheep.$router.go('/pages/goods/point', { id: item.id })" <view class="list-icon" @tap="iconStatus = !iconStatus">
/> <text v-if="iconStatus" class="sicon-goods-list" />
<text v-else class="sicon-goods-card" />
</view> </view>
</view> </view>
</su-sticky>
<scroll-view
class="scroll-box"
:style="{ height: pageHeight + 'rpx' }"
scroll-y="true"
:scroll-with-animation="false"
:enable-back-to-top="true"
>
<s-point-card ref="sPointCardRef" :property="sPointCardData" class="ss-p-x-20 ss-m-t-20"/>
<s-empty <s-empty
v-if="state.pagination.total === 0" v-if="activityTotal === 0"
icon="/static/goods-empty.png" icon="/static/goods-empty.png"
text="暂无积分商品" text="暂无积分商品"
/> ></s-empty>
<uni-load-more <uni-load-more
v-if="state.pagination.total > 0" v-if="activityTotal > 0"
:status="state.loadStatus" :status="loadStatus"
:content-text="{ :content-text="{
contentdown: '上拉加载更多', contentdown: '上拉加载更多',
}" }"
@tap="loadmore" @tap="loadMore"
/> />
</scroll-view>
</s-layout> </s-layout>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { onLoad, onReachBottom } from '@dcloudio/uni-app'; import { onLoad, onReachBottom } from '@dcloudio/uni-app';
import { reactive } from 'vue'; import { computed, reactive, ref } from 'vue';
import _ from 'lodash'; import PointApi from '@/sheep/api/promotion/point';
import SLayout from '@/sheep/components/s-layout/s-layout.vue';
const state = reactive({ //
pagination: { const { safeAreaInsets, safeArea } = sheep.$platform.device;
data: [], const statusBarHeight = sheep.$platform.device.statusBarHeight * 2;
current_page: 1, const pageHeight =
total: 1, (safeArea.height + safeAreaInsets.bottom) * 2 + statusBarHeight - sheep.$platform.navbar - 350;
last_page: 1,
}, const sPointCardData = ref({
loadStatus: '', 'layoutType': 'twoCol',
}); });
async function getData(page = 1, list_rows = 5) { //
// TODO @puhui999 const LayoutTypeEnum = {
state.loadStatus = 'loading'; //
let res = await sheep.$api.app.scoreShop.list({ ONE_COL_BIG_IMG: 'oneColBigImg',
list_rows, //
page, TWO_COL: 'twoCol',
});
if (res.error === 0) {
let couponlist = _.concat(state.pagination.data, res.data.data);
state.pagination = {
...res.data,
data: couponlist,
}; };
if (state.pagination.current_page < state.pagination.last_page) { const sPointCardRef = ref();
state.loadStatus = 'more'; // true - false -
} else { const iconStatus = computed({
state.loadStatus = 'noMore'; get() {
} return sPointCardData.value.layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG;
},
set(newValue) {
newValue ? (sPointCardData.value.layoutType = LayoutTypeEnum.ONE_COL_BIG_IMG) :
(sPointCardData.value.layoutType = LayoutTypeEnum.TWO_COL);
//
if (sPointCardData.value.layoutType === LayoutTypeEnum.TWO_COL) {
//
sPointCardRef.value.calculateGoodsColumn();
} }
},
});
//
const activityPageParams = reactive({
pageNo: 1, //
pageSize: 5, //
});
const activityTotal = ref(0); //
const activityCount = ref(0); //
const loadStatus = ref(''); //
async function getActivityList() {
loadStatus.value = 'loading';
const { data } = await PointApi.getPointActivityPage(activityPageParams);
await sPointCardRef.value.concatActivity(data.list);
activityCount.value = sPointCardRef.value.getActivityCount();
activityTotal.value = data.total;
loadStatus.value = activityCount.value < activityTotal.value ? 'more' : 'noMore';
} }
// //
function loadmore() { function loadMore() {
if (state.loadStatus !== 'noMore') { if (state.loadStatus !== 'noMore') {
getData(state.pagination.current_page + 1); activityPageParams.pageNo += 1;
getActivityList();
} }
} }
// //
onReachBottom(() => { onReachBottom(() => {
loadmore(); loadMore();
}); });
onLoad(() => { onLoad(() => {
getData(); getActivityList();
}); });
</script> </script>

View File

@ -28,29 +28,26 @@
/> />
<!-- 价格+标题 --> <!-- 价格+标题 -->
<view class="title-card ss-m-y-14 ss-m-x-20 ss-p-x-20 ss-p-y-34"> <view class="title-card detail-card ss-p-y-40 ss-p-x-20">
<view class="price-box ss-flex ss-row-between ss-m-b-18"> <view class="ss-flex ss-row-between ss-col-center ss-m-b-18">
<view class="ss-flex"> <view class="price-box ss-flex ss-col-bottom">
<view class="price-text ss-m-r-16"> <view v-if="getShowPrice.price > 0" class="price-text"> {{ getShowPrice.price }}</view>
{{ getShowPriceText }} <text v-if="getShowPrice.price > 0 && getShowPrice.point > 0">+</text>
</view> <image
<view class="tig ss-flex ss-col-center"> :src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
<view class="tig-icon ss-flex ss-col-center ss-row-center"> class="point-img"
<text class="cicon-alarm"></text> ></image>
</view> <view class="point-text ss-m-r-16">
<view class="tig-title">积分价</view> {{ getShowPrice.point }}
</view> </view>
</view> </view>
</view> <view class="sales-text">
<view class="ss-flex ss-row-between ss-m-b-60"> {{ formatExchange(state.goodsInfo.sales_show_type, state.goodsInfo.sales) }}
<view class="origin-price ss-flex ss-col-center" v-if="state.goodsInfo.marketPrice">
原价
<view class="origin-price-text">
{{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
</view> </view>
</view> </view>
<view class="origin-price-text ss-m-b-60" v-if="state.goodsInfo.marketPrice">
原价{{ fen2yuan(state.selectedSku.marketPrice || state.goodsInfo.marketPrice) }}
</view> </view>
<view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name || '' }}</view> <view class="title-text ss-line-2 ss-m-b-6">{{ state.goodsInfo.name || '' }}</view>
<view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view> <view class="subtitle-text ss-line-1">{{ state.goodsInfo.introduction }}</view>
</view> </view>
@ -99,7 +96,7 @@
:disabled="state.goodsInfo.stock === 0" :disabled="state.goodsInfo.stock === 0"
> >
<view class="price-text"> <view class="price-text">
{{getShowPriceText}} {{ getShowPriceText }}
</view> </view>
<view v-if="state.goodsInfo.stock === 0"></view> <view v-if="state.goodsInfo.stock === 0"></view>
<view v-else></view> <view v-else></view>
@ -115,7 +112,7 @@
import { onLoad, onPageScroll } from '@dcloudio/uni-app'; import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { isEmpty } from 'lodash-es'; import { isEmpty } from 'lodash-es';
import { fen2yuan, formatGoodsSwiper } from '@/sheep/hooks/useGoods'; import { fen2yuan, formatExchange, formatGoodsSwiper } from '@/sheep/hooks/useGoods';
import detailNavbar from './components/detail/detail-navbar.vue'; import detailNavbar from './components/detail/detail-navbar.vue';
import detailCellSku from './components/detail/detail-cell-sku.vue'; import detailCellSku from './components/detail/detail-cell-sku.vue';
import detailTabbar from './components/detail/detail-tabbar.vue'; import detailTabbar from './components/detail/detail-tabbar.vue';
@ -126,7 +123,7 @@
import { PromotionActivityTypeEnum } from '@/sheep/util/const'; import { PromotionActivityTypeEnum } from '@/sheep/util/const';
import PointApi from '@/sheep/api/promotion/point'; import PointApi from '@/sheep/api/promotion/point';
const headerBg = sheep.$url.css('/static/img/shop/goods/seckill-bg.png'); const headerBg = sheep.$url.css('/static/img/shop/goods/score-bg.png');
const btnBg = sheep.$url.css('/static/img/shop/goods/seckill-btn.png'); const btnBg = sheep.$url.css('/static/img/shop/goods/seckill-btn.png');
const disabledBtnBg = sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png'); const disabledBtnBg = sheep.$url.css('/static/img/shop/goods/activity-btn-disabled.png');
const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png'); const seckillBg = sheep.$url.css('/static/img/shop/goods/seckill-tip-bg.png');
@ -192,13 +189,18 @@
const activity = ref(); const activity = ref();
const getShowPriceText = computed(() => { const getShowPrice = computed(() => {
let priceText = `${activity.value.point}积分${!activity.value.price ? '' : `+¥${fen2yuan(activity.value.price)}`}`;
if (!isEmpty(state.selectedSku)) { if (!isEmpty(state.selectedSku)) {
const sku = state.selectedSku; const sku = state.selectedSku;
priceText = `${sku.point}积分${!sku.pointPrice ? '' : `+¥${fen2yuan(sku.pointPrice)}`}`; return {
point: sku.point,
price: !sku.pointPrice ? '' : fen2yuan(sku.pointPrice),
};
} }
return priceText; return {
point: activity.value.point,
price: !activity.value.price ? '' : fen2yuan(activity.value.price),
};
}); });
// //
@ -264,102 +266,44 @@
.title-card { .title-card {
width: 710rpx; width: 710rpx;
box-sizing: border-box; box-sizing: border-box;
// height: 320rpx;
background-size: 100% 100%; background-size: 100% 100%;
border-radius: 10rpx; border-radius: 10rpx;
background-image: v-bind(headerBg); background-image: v-bind(headerBg);
background-repeat: no-repeat; background-repeat: no-repeat;
.price-box { .price-box {
.point-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.point-text {
font-size: 42rpx;
font-weight: 500;
color: #ff3000;
line-height: 36rpx;
font-family: OPPOSANS;
}
.price-text { .price-text {
font-size: 30rpx; font-size: 42rpx;
font-weight: 500; font-weight: 500;
color: #fff; color: #ff3000;
line-height: normal; line-height: 36rpx;
font-family: OPPOSANS; font-family: OPPOSANS;
} }
} }
.origin-price {
font-size: 24rpx;
font-weight: 400;
color: #fff;
opacity: 0.7;
.origin-price-text { .origin-price-text {
font-size: 26rpx;
font-weight: 400;
text-decoration: line-through; text-decoration: line-through;
color: $gray-c;
font-family: OPPOSANS; font-family: OPPOSANS;
&::before {
content: '¥';
}
}
} }
.tig { .sales-text {
border: 2rpx solid #ffffff;
border-radius: 4rpx;
width: 126rpx;
height: 38rpx;
.tig-icon {
width: 40rpx;
height: 40rpx;
margin-left: -2rpx;
background: #ffffff;
border-radius: 4rpx 0 0 4rpx;
.cicon-alarm {
font-size: 32rpx;
color: #fc6e6f;
}
}
.tig-title {
width: 86rpx;
font-size: 24rpx;
font-weight: 500;
line-height: normal;
color: #ffffff;
display: flex;
justify-content: center;
align-items: center;
}
}
.countdown-title {
font-size: 26rpx; font-size: 26rpx;
font-weight: 500; font-weight: 500;
color: #ffffff; color: $gray-c;
}
.countdown-time {
font-size: 26rpx;
font-weight: 500;
color: #ffffff;
.countdown-h {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
padding: 0 4rpx;
height: 40rpx;
background: rgba(#000000, 0.1);
border-radius: 6rpx;
}
.countdown-num {
font-size: 24rpx;
font-family: OPPOSANS;
font-weight: 500;
color: #ffffff;
width: 40rpx;
height: 40rpx;
background: rgba(#000000, 0.1);
border-radius: 6rpx;
}
} }
.discounts-box { .discounts-box {
@ -392,15 +336,13 @@
font-size: 30rpx; font-size: 30rpx;
font-weight: bold; font-weight: bold;
line-height: 42rpx; line-height: 42rpx;
color: #fff;
} }
.subtitle-text { .subtitle-text {
font-size: 26rpx; font-size: 26rpx;
font-weight: 400; font-weight: 400;
color: #ffffff; color: $dark-9;
line-height: 42rpx; line-height: 42rpx;
opacity: 0.9;
} }
} }
@ -517,9 +459,4 @@
color: #333333; color: #333333;
} }
} }
image {
width: 100%;
height: 100%;
}
</style> </style>

View File

@ -40,10 +40,16 @@
:style="[{ color: goodsFields.price.color }]" :style="[{ color: goodsFields.price.color }]"
> >
<!-- 活动价格 --> <!-- 活动价格 -->
<text v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"> <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
{{ data.point }}积分 <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 ? '' : `+${fen2yuan(data.pointPrice)}` }} {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}` }}
</text> </text>
</view>
<template v-else> <template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text> <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -94,10 +100,16 @@
:style="[{ color: goodsFields.price.color }]" :style="[{ color: goodsFields.price.color }]"
> >
<!-- 活动价格 --> <!-- 活动价格 -->
<text v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"> <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
{{ data.point }}积分 <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 ? '' : `+${fen2yuan(data.pointPrice)}` }} {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}` }}
</text> </text>
</view>
<template v-else> <template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text> <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -162,10 +174,16 @@
:style="[{ color: goodsFields.price.color }]" :style="[{ color: goodsFields.price.color }]"
> >
<!-- 活动价格 --> <!-- 活动价格 -->
<text v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"> <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
{{ data.point }}积分 <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 ? '' : `+${fen2yuan(data.pointPrice)}` }} {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}` }}
</text> </text>
</view>
<template v-else> <template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text> <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -257,10 +275,16 @@
<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 v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"> <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
{{ data.point }}积分 <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 ? '' : `+${fen2yuan(data.pointPrice)}` }} {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}` }}
</text> </text>
</view>
<template v-else> <template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text> <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -345,10 +369,16 @@
<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 v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type"> <view class="ss-flex" v-if="data.activityType && data.activityType === PromotionActivityTypeEnum.POINT.type">
{{ data.point }}积分 <image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="point-img"
></image>
<text class="ss-m-r-16">
{{ data.point }}
{{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}` }} {{ !data.pointPrice || data.pointPrice === 0 ? '' : `+${fen2yuan(data.pointPrice)}` }}
</text> </text>
</view>
<template v-else> <template v-else>
<text class="price-unit ss-font-24">{{ priceUnit }}</text> <text class="price-unit ss-font-24">{{ priceUnit }}</text>
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text> <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -550,14 +580,14 @@
if (props.goodsFields.salesCount?.show) { if (props.goodsFields.salesCount?.show) {
if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) { 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 { } else {
text.push(formatSales(props.data.sales_show_type, props.data.salesCount)); text.push(formatSales(props.data.sales_show_type, props.data.salesCount));
} }
} }
if (props.goodsFields.stock?.show) { if (props.goodsFields.stock?.show) {
if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) { if (props.data.activityType && props.data.activityType === PromotionActivityTypeEnum.POINT.type) {
text.push(formatStock(props.data.stock_show_type, props.data.pointTotalStock)); text.push(formatStock(props.data.stock_show_type, props.data.pointTotalStock));
}else { } else {
text.push(formatStock(props.data.stock_show_type, props.data.stock)); text.push(formatStock(props.data.stock_show_type, props.data.stock));
} }
} }
@ -632,6 +662,12 @@
line-height: 32rpx; line-height: 32rpx;
} }
.point-img {
width: 30rpx;
height: 30rpx;
margin: 0 4rpx;
}
.groupon-tag { .groupon-tag {
position: absolute; position: absolute;
left: 0; left: 0;

View File

@ -91,7 +91,7 @@
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight" :titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/seckill', { id: item.activityId })" @click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
@getHeight="calculateGoodsColumn($event, 'left')" @getHeight="calculateGoodsColumn($event, 'left')"
> >
<!-- 购买按钮 --> <!-- 购买按钮 -->
@ -121,7 +121,7 @@
:topRadius="data.borderRadiusTop" :topRadius="data.borderRadiusTop"
:bottomRadius="data.borderRadiusBottom" :bottomRadius="data.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight" :titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/seckill', { id: item.activityId })" @click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
@getHeight="calculateGoodsColumn($event, 'right')" @getHeight="calculateGoodsColumn($event, 'right')"
> >
<!-- 购买按钮 --> <!-- 购买按钮 -->

View File

@ -1,458 +1,369 @@
<!-- 装修商品组件积分商城商品卡片 -->
<template> <template>
<!-- 商品卡片 -->
<view> <view>
<!-- md卡片竖向一行放两个图上内容下 --> <!-- 布局1. 单列大图上图下内容-->
<view v-if="size === 'md'" class="md-goods-card ss-flex-col" :style="[elStyles]" @tap="onClick">
<image
class="md-img-box"
:src="sheep.$url.cdn(data.image)"
mode="widthFix"
@load="calculatePanelHeight"
></image>
<view <view
class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16" v-if="state.property.layoutType === LayoutTypeEnum.ONE_COL_BIG_IMG && state.spuList.length"
:id="elId" class="goods-sl-box"
> >
<view <view
v-if="goodsFields.title?.show" class="goods-box"
class="md-goods-title ss-line-1" v-for="item in state.spuList"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]" :key="item.id"
:style="[{ marginBottom: state.property.space * 2 + 'rpx' }]"
> >
{{ data.title }} <s-goods-column
</view> class=""
<view size="sl"
v-if="goodsFields.subtitle?.show" :goodsFields="state.property.fields"
class="md-goods-subtitle ss-m-t-16 ss-line-1" :tagStyle="state.property.badge"
:style="[{ color: subTitleColor }]" :data="item"
:titleColor="state.property.fields.name?.color"
:subTitleColor="state.property.fields.introduction.color"
:topRadius="state.property.borderRadiusTop"
:bottomRadius="state.property.borderRadiusBottom"
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
> >
{{ data.subtitle }} <!-- 购买按钮 -->
</view> <template v-slot:cart>
<view class="ss-col-bottom"> <button class="ss-reset-button cart-btn" :style="[buyStyle]">
<view {{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
v-if="goodsFields.score_price?.show" </button>
class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10 ss-flex" </template>
:style="[{ color: goodsFields.score_price.color }]" </s-goods-column>
>
<view>{{ Number(data.price[0]) > 0 ? '¥' + data.price[0] + '+' : '' }}</view>
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
></image>
{{ data.score }}
</view>
<view
v-if="goodsFields.price?.show && data.original_price > 0"
class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
:style="[{ color: goodsFields.price.color }]"
>
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
<view class="ss-m-l-8">{{ data.original_price }}</view>
</view> </view>
</view> </view>
<view class="ss-m-t-16 ss-flex ss-col-center ss-flex-wrap"> <!-- 布局2. 单列小图左图右内容 -->
<view class="sales-text">{{ salesAndStock }}</view>
</view>
</view>
<slot name="cart">
<view class="cart-box ss-flex ss-col-center ss-row-center">
<image class="cart-icon" src="/static/img/shop/tabbar/category2.png" mode=""></image>
</view>
</slot>
</view>
<!-- lg卡片横向型一行放一个图片左内容右边 -->
<view <view
v-if="size === 'lg'" v-if="state.property.layoutType === LayoutTypeEnum.ONE_COL_SMALL_IMG && state.spuList.length"
class="lg-goods-card ss-flex ss-col-stretch" class="goods-lg-box"
:style="[elStyles]"
@tap="onClick"
>
<image class="lg-img-box" :src="sheep.$url.cdn(data.image)" 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="ss-m-r-20">
<view
v-if="goodsFields.title?.show"
class="lg-goods-title ss-line-2"
:style="[{ color: titleColor }]"
>
{{ data.title }}
</view>
<view
v-if="goodsFields.subtitle?.show"
class="lg-goods-subtitle ss-m-t-10 ss-line-1"
:style="[{ color: subTitleColor }]"
>
{{ data.subtitle }}
</view>
</view>
<view>
<view class="ss-m-t-10">
<view
v-if="goodsFields.score_price?.show"
class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
:style="[{ color: goodsFields.score_price.color }]"
>
<view>{{ Number(data.price[0]) > 0 ? '¥' + data.price[0] + '+' : '' }}</view>
<image
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')"
class="score-img"
></image>
{{ data.score }}
</view>
<view
v-if="goodsFields.price?.show && data.original_price > 0"
class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]"
>
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
<view class="ss-m-l-8">{{ data.original_price }}</view>
</view>
</view>
<view class="ss-m-t-16 ss-flex ss-col-center ss-flex-wrap">
<view class="sales-text">{{ salesAndStock }}</view>
</view>
</view>
</view>
<slot name="cart"
><view class="buy-box ss-flex ss-col-center ss-row-center">去兑换</view></slot
>
</view>
<!-- sl卡片竖向型一行放一个图片上内容下边 -->
<view v-if="size === 'sl'" class="sl-goods-card ss-flex-col" @tap="onClick">
<image class="sl-img-box" :src="sheep.$url.cdn(data.image)" mode="aspectFill"></image>
<view class="sl-goods-content ss-flex-col ss-row-between ss-p-b-20 ss-p-t-20">
<view class="ss-m-b-20">
<view class="sl-goods-title ss-line-1 ss-p-l-16 ss-p-r-16">
{{ data.title }}
</view>
<view v-if="data.subtitle" class="sl-goods-subtitle ss-p-l-16 ss-p-r-16 ss-m-t-16">
{{ data.subtitle }}
</view>
</view>
<view>
<slot name="activity">
<view
v-if="data.promos?.length"
class="tag-box ss-flex ss-col-center ss-flex-wrap ss-p-l-16 ss-p-r-16"
> >
<view <view
class="activity-tag ss-m-r-10 ss-m-t-16" class="goods-box"
v-for="item in data.promos" :style="[{ marginBottom: state.property.space + 'px' }]"
v-for="item in state.spuList"
:key="item.id" :key="item.id"
> >
{{ item.title }} <s-goods-column
</view> class="goods-card"
</view> size="lg"
</slot> :goodsFields="state.property.fields"
<view class="ss-flex ss-col-bottom ss-p-l-16 ss-p-r-16 font-OPPOSANS"> :data="item"
<view class="sl-goods-price ss-m-r-12 ss-flex"> :tagStyle="state.property.badge"
<view>{{ Number(data.price[0]) > 0 ? '¥' + data.price[0] + '+' : '' }}</view> :titleColor="state.property.fields.name?.color"
<image :subTitleColor="state.property.fields.introduction.color"
:src="sheep.$url.static('/static/img/shop/goods/score1.svg')" :topRadius="state.property.borderRadiusTop"
class="score-img" :bottomRadius="state.property.borderRadiusBottom"
></image> @tap="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
<view>{{ data.score ? data.score : '' }}</view>
</view>
<view
v-if="data.original_price > 0"
class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
> >
<text class="price-unit ss-font-20"></text> <!-- 购买按钮 -->
<view class="ss-m-l-8">{{ data.original_price }}</view> <template v-slot:cart>
</view> <button class="ss-reset-button cart-btn" :style="[buyStyle]">
</view> {{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
<view class="ss-p-l-16 ss-p-r-16 ss-m-t-16 ss-flex ss-flex-wrap"> </button>
<view class="sales-text">{{ salesAndStock }}</view> </template>
</view> </s-goods-column>
</view> </view>
</view> </view>
<slot name="cart" <!-- 布局3. 双列每一列上图下内容-->
><view class="buy-box ss-flex ss-col-center ss-row-center">去兑换</view></slot <view
v-if="state.property.layoutType === LayoutTypeEnum.TWO_COL && state.spuList.length"
class="goods-md-wrap ss-flex ss-flex-wrap ss-col-top"
> >
<view class="goods-list-box">
<view
class="left-list"
:style="[{ paddingRight: state.property.space + 'rpx', marginBottom: state.property.space + 'px' }]"
v-for="item in state.leftSpuList"
:key="item.id"
>
<s-goods-column
class="goods-md-box"
size="md"
:goodsFields="state.property.fields"
:tagStyle="state.property.badge"
:data="item"
:titleColor="state.property.fields.name?.color"
:subTitleColor="state.property.fields.introduction.color"
:topRadius="state.property.borderRadiusTop"
:bottomRadius="state.property.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
@getHeight="calculateGoodsColumn($event, 'left')"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
<view class="goods-list-box">
<view
class="right-list"
:style="[{ paddingLeft: state.property.space + 'rpx', marginBottom: state.property.space + 'px' }]"
v-for="item in state.rightSpuList"
:key="item.id"
>
<s-goods-column
class="goods-md-box"
size="md"
:goodsFields="state.property.fields"
:tagStyle="state.property.badge"
:data="item"
:titleColor="state.property.fields.name?.color"
:subTitleColor="state.property.fields.introduction.color"
:topRadius="state.property.borderRadiusTop"
:bottomRadius="state.property.borderRadiusBottom"
:titleWidth="330 - marginLeft - marginRight"
@click="sheep.$router.go('/pages/goods/point', { id: item.activityId })"
@getHeight="calculateGoodsColumn($event, 'right')"
>
<!-- 购买按钮 -->
<template v-slot:cart>
<button class="ss-reset-button cart-btn" :style="[buyStyle]">
{{ state.property.btnBuy.type === 'text' ? state.property.btnBuy.text : '' }}
</button>
</template>
</s-goods-column>
</view>
</view>
</view> </view>
</view> </view>
</template> </template>
<script setup> <script setup>
import { computed, getCurrentInstance } from 'vue';
import sheep from '@/sheep';
import { formatSales } from '@/sheep/hooks/useGoods';
import { formatStock } from '@/sheep/hooks/useGoods';
/** /**
* 订单卡片 * 商品卡片
*
* @property {String} img - 图片
* @property {String} title - 标题
* @property {Number} titleWidth = 0 - 标题宽度默认0单位rpx
* @property {String} skuText - 规格
* @property {String | Number} score - 积分
* @property {String | Number} price - 价格
* @property {String | Number} originalPrice - 单购价
* @property {String} priceColor - 价格颜色
* @property {Number | String} num - 数量
*
*/ */
import { computed, nextTick, onMounted, reactive, watch } from 'vue';
import sheep from '@/sheep';
import SpuApi from '@/sheep/api/product/spu';
import { PromotionActivityTypeEnum } from '@/sheep/util/const';
import { isEmpty } from '@/sheep/helper/utils';
//
const LayoutTypeEnum = {
//
ONE_COL_BIG_IMG: 'oneColBigImg',
//
TWO_COL: 'twoCol',
//
ONE_COL_SMALL_IMG: 'oneColSmallImg',
};
const state = reactive({
spuList: [],
leftSpuList: [],
rightSpuList: [],
property: {
'layoutType': 'oneColBigImg',
'fields': {
'name': {
'show': true,
'color': '#000',
},
'introduction': {
'show': true,
'color': '#999',
},
'price': {
'show': true,
'color': '#ff3000',
},
'marketPrice': {
'show': true,
'color': '#c4c4c4',
},
'salesCount': {
'show': true,
'color': '#c4c4c4',
},
'stock': {
'show': true,
'color': '#c4c4c4',
},
},
'badge': {
'show': false,
'imgUrl': '',
},
'btnBuy': {
'type': 'text',
'text': '立即兑换',
'bgBeginColor': '#FF6000',
'bgEndColor': '#FE832A',
'imgUrl': '',
},
'borderRadiusTop': 8,
'borderRadiusBottom': 8,
'space': 8,
'style': {
'bgType': 'color',
'bgColor': '',
'marginLeft': 8,
'marginRight': 8,
'marginBottom': 8,
},
},
});
const props = defineProps({ const props = defineProps({
goodsFields: { property: {
type: [Array, Object],
default() {
return {
title: { show: true },
subtitle: { show: true },
price: { show: true },
original_price: { show: true },
sales: { show: true },
stock: { show: true },
};
},
},
tagStyle: {
type: Object, type: Object,
default: {}, default: () => ({}),
},
data: {
type: Object,
default: {},
},
size: {
type: String,
default: 'sl',
},
background: {
type: String,
default: '',
},
topRadius: {
type: Number,
default: 0,
},
bottomRadius: {
type: Number,
default: 0,
},
titleWidth: {
type: Number,
default: 0,
},
titleColor: {
type: String,
default: '#333',
},
priceUnit: {
type: String,
default: '¥',
},
subTitleColor: {
type: String,
default: '#999999',
}, },
}); });
// // property
const elStyles = computed(() => { watch(() => props.property, (newVal) => {
state.property = { ...state.property, ...newVal };
}, { immediate: true, deep: true });
const { marginLeft, marginRight } = state.property.styles || {};
//
const buyStyle = computed(() => {
if (state.property.btnBuy.type === 'text') {
// 线
return { return {
background: props.background, background: `linear-gradient(to right, ${state.property.btnBuy.bgBeginColor}, ${state.property.btnBuy.bgEndColor})`,
'border-top-left-radius': props.topRadius + 'px',
'border-top-right-radius': props.topRadius + 'px',
'border-bottom-left-radius': props.bottomRadius + 'px',
'border-bottom-right-radius': props.bottomRadius + 'px',
}; };
}); }
const emits = defineEmits(['click', 'getHeight']); if (state.property.btnBuy.type === 'img') {
const onClick = () => { //
emits('click'); return {
width: '54rpx',
height: '54rpx',
background: `url(${sheep.$url.cdn(state.property.btnBuy.imgUrl)}) no-repeat`,
backgroundSize: '100% 100%',
}; };
// }
const salesAndStock = computed(() => {
let text = [];
text.push(formatSales(props.data.sales_show_type, props.data.sales));
text.push(formatStock(props.data.stock_show_type, props.data.stock));
return text.join(' | ');
}); });
//
const { proxy } = getCurrentInstance(); //region
const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`; //
function calculatePanelHeight(e) { let count = 0;
if (props.size === 'md') { //
const view = uni.createSelectorQuery().in(proxy); let leftHeight = 0;
view.select(`#${elId}`).fields({ size: true, scrollOffset: true }); //
view.exec((data) => { let rightHeight = 0;
const goodsPriceCard = data[0];
const card = { /**
width: goodsPriceCard.width, * 计算商品在左列还是右列
height: (goodsPriceCard.width / e.detail.width) * e.detail.height + goodsPriceCard.height, * @param height 商品的高度
}; * @param where 添加到哪一列
emits('getHeight', card.height); */
function calculateGoodsColumn(height = 0, where = 'left') {
//
if (!state.spuList[count]) return;
//
if (where === 'left') leftHeight += height;
if (where === 'right') rightHeight += height;
//
if (leftHeight <= rightHeight) {
state.leftSpuList.push(state.spuList[count]);
} else {
state.rightSpuList.push(state.spuList[count]);
}
//
count++;
}
//endregion
/**
* 根据商品编号获取商品详情
* @param ids 商品编号列表
* @return {Promise<undefined>} 商品列表
*/
async function getSpuDetail(ids) {
const { data: spu } = await SpuApi.getSpuDetail(ids);
return spu;
}
async function concatActivity(list) {
if (isEmpty(list)) {
return;
}
// SPUspuList
for (const activity of list) {
state.spuList.push(await getSpuDetail(activity.spuId));
}
//
list.forEach((activity) => {
// spu
const spu = state.spuList.find((spu) => activity.spuId === spu.id);
if (spu) {
spu.pointStock = activity.stock;
spu.pointTotalStock = activity.totalStock;
spu.point = activity.point;
spu.pointPrice = activity.price;
// ID
spu.activityId = activity.id;
//
spu.activityType = PromotionActivityTypeEnum.POINT.type;
}
}); });
//
if (state.property.layoutType === LayoutTypeEnum.TWO_COL) {
//
calculateGoodsColumn();
} }
} }
function getActivityCount() {
return state.spuList.length;
}
defineExpose({ concatActivity,getActivityCount,calculateGoodsColumn });
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.price-unit { .goods-md-wrap {
margin-right: -4px; width: 100%;
}
.sales-text {
display: table;
font-size: 24rpx;
transform: scale(0.8);
margin-left: -16rpx;
color: #c4c4c4;
} }
// md .goods-list-box {
.md-goods-card { width: 50%;
overflow: hidden; box-sizing: border-box;
width: 100%;
position: relative; .left-list {
z-index: 1; &:nth-last-child(1) {
background-color: $white; margin-bottom: 0 !important;
}
}
.right-list {
&:nth-last-child(1) {
margin-bottom: 0 !important;
}
}
}
.goods-box {
&:nth-last-of-type(1) {
margin-bottom: 0 !important;
}
}
.goods-md-box,
.goods-sl-box,
.goods-lg-box {
position: relative; position: relative;
.md-img-box { .cart-btn {
width: 100%;
}
.md-goods-title {
font-size: 26rpx;
color: #333;
width: 100%;
}
.md-goods-subtitle {
font-size: 24rpx;
font-weight: 400;
color: #999999;
}
.md-goods-price {
font-size: 30rpx;
color: $red;
line-height: 36rpx;
}
.cart-box {
width: 54rpx;
height: 54rpx;
background: linear-gradient(90deg, #fe8900, #ff5e00);
border-radius: 50%;
position: absolute; position: absolute;
bottom: 50rpx; bottom: 18rpx;
right: 20rpx; right: 20rpx;
z-index: 2; z-index: 11;
.cart-icon {
width: 30rpx;
height: 30rpx;
}
}
}
// lg
.lg-goods-card {
overflow: hidden;
position: relative;
z-index: 1;
background-color: $white;
height: 280rpx;
.lg-img-box {
width: 280rpx;
height: 280rpx;
margin-right: 20rpx;
}
.lg-goods-title {
font-size: 28rpx;
font-weight: 500;
color: #333333;
// line-height: 36rpx;
// width: 410rpx;
}
.lg-goods-subtitle {
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 30rpx;
// width: 410rpx;
}
.lg-goods-price {
font-size: 30rpx;
color: $red;
line-height: 36rpx;
}
.buy-box {
position: absolute;
bottom: 20rpx;
right: 20rpx;
z-index: 2;
width: 120rpx;
height: 50rpx; height: 50rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)); line-height: 50rpx;
padding: 0 20rpx;
border-radius: 25rpx; border-radius: 25rpx;
font-size: 24rpx; font-size: 24rpx;
color: #ffffff; color: #fff;
} }
.tag-box {
width: 100%;
}
}
.sl-goods-card {
overflow: hidden;
position: relative;
z-index: 1;
width: 100%;
background-color: $white;
.sl-img-box {
width: 100%;
height: 360rpx;
}
.sl-goods-title {
font-size: 26rpx;
color: #333;
width: 100%;
box-sizing: border-box;
}
.sl-goods-subtitle {
font-size: 24rpx;
font-weight: 400;
color: #999999;
line-height: 30rpx;
width: 100%;
box-sizing: border-box;
}
.sl-goods-price {
font-size: 30rpx;
color: $red;
}
.buy-box {
position: absolute;
bottom: 20rpx;
right: 20rpx;
z-index: 2;
width: 148rpx;
height: 50rpx;
background: linear-gradient(90deg, #fe8900, #ff5e00);
border-radius: 25rpx;
font-size: 24rpx;
color: #ffffff;
}
}
.goods-origin-price {
font-size: 20rpx;
color: #c4c4c4;
text-decoration: line-through;
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
} }
</style> </style>