yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【功能优化】商城：调整满减送的数据返回

pull/105/MERGE
YunaiV 2024-09-21 14:30:27 +08:00
parent e727974806
commit 3dad154ca0
5 changed files with 1987 additions and 1815 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
pages/activity/index.vue
View File

@ -7,7 +7,7 @@
<view class="type-text ss-flex ss-row-center">满减：</view>
<view class="ss-flex-1">
<view class="tip-content" v-for="item in state.activityInfo.rules" :key="item">
{{ item.description[1] }}
{{ item.description }}
</view>
</view>
<image class="activity-left-image" src="/static/activity-left.png" />

196
pages/goods/index.vue
View File

@ -7,15 +7,33 @@
<!-- 骨架屏 -->
<detailSkeleton v-if="state.skeletonLoading" />
<!-- 下架/售罄提醒 -->
<s-empty v-else-if="state.goodsInfo === null" text="商品不存在或已下架" icon="/static/soldout-empty.png" showAction
actionText="再逛逛" actionUrl="/pages/goods/list" />
<s-empty
v-else-if="state.goodsInfo === null"
text="商品不存在或已下架"
icon="/static/soldout-empty.png"
showAction
actionText="再逛逛"
actionUrl="/pages/goods/list"
/>
<block v-else>
<view class="detail-swiper-selector">
<!-- 商品轮播图 -->
<su-swiper class="ss-m-b-14" isPreview :list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
otStyle="tag" imageMode="widthFix" dotCur="bg-mask-40" :seizeHeight="750" />
<su-swiper
class="ss-m-b-14"
isPreview
:list="formatGoodsSwiper(state.goodsInfo.sliderPicUrls)"
otStyle="tag"
imageMode="widthFix"
dotCur="bg-mask-40"
:seizeHeight="750"
/>
<!-- 限时折扣/会员价的优惠信息 -->
<view class="discount" v-if="state.settlementSku && state.settlementSku.id && state.settlementSku.promotionPrice">
<view
class="discount"
v-if="
state.settlementSku && state.settlementSku.id && state.settlementSku.promotionPrice
"
>
<image class="disImg" :src="sheep.$url.static('/static/img/shop/goods/dis.png')" />
<view class="discountCont">
<view class="disContT">
@ -42,9 +60,16 @@
</view>
<view class="disContB2" v-if="state.settlementSku.promotionEndTime > 0">
距结束仅剩
<countDown :tipText="' '" :bgColor="bgColor" :dayText="':'" :hourText="':'"
:minuteText="':'" :secondText="' '"
:datatime="state.settlementSku.promotionEndTime / 1000" :isDay="false" />
<countDown
:tipText="' '"
:bgColor="bgColor"
:dayText="':'"
:hourText="':'"
:minuteText="':'"
:secondText="' '"
:datatime="state.settlementSku.promotionEndTime / 1000"
:isDay="false"
/>
</view>
</view>
</view>
@ -52,8 +77,10 @@
<!-- 价格+标题 -->
<view class="title-card detail-card ss-p-y-30 ss-p-x-20">
<!-- 没有限时折扣/会员价的优惠信息时，展示的价格信息 -->
<view class="ss-flex ss-row-between ss-col-center ss-m-b-26"
v-if="!(state.settlementSku.promotionPrice)">
<view
class="ss-flex ss-row-between ss-col-center ss-m-b-26"
v-if="!state.settlementSku.promotionPrice"
>
<view class="price-box ss-flex ss-col-bottom">
<view class="price-text ss-m-r-16">
{{ fen2yuan(state.selectedSku.price || state.goodsInfo.price) }}
@ -67,32 +94,41 @@
</view>
</view>
<view class="discounts-box ss-flex ss-row-between ss-m-b-28">
<!-- 查看满减送的描述 -->
<div class="tag-content">
<view class="tag-box ss-flex">
<!-- <view
<!-- 查看优惠劵的描述 -->
<view
class="tag ss-m-r-10"
v-for="coupon in state.couponInfo.slice(0, 1)"
:key="coupon.id"
@tap="onOpenActivity"
>
222
</view> -->
<view v-if="state.rewardActivity && state.rewardActivity.id > 0"
class="tag ss-m-r-10" @tap="onOpenActivity">
<text v-if="(state.rewardActivity.ruleDescriptions[0])[4]">券 </text>
{{(state.rewardActivity.ruleDescriptions[0])[1]}}
[劵]满{{ fen2yuanSimple(coupon.usePrice) }}元{{
coupon.discountType === 1
? '减' + fen2yuanSimple(coupon.discountPrice) + '元'
: '打' + formatDiscountPercent(coupon.discountPercent) + '折'
}}
</view>
<view v-if="state.rewardActivity && state.rewardActivity.id > 0"
class="tag ss-m-r-10" @tap="onOpenActivity">
<text v-if="(state.rewardActivity.ruleDescriptions[0])[1]"></text>
{{(state.rewardActivity.ruleDescriptions[0])[1]}}
<!-- 查看满减送的描述 -->
<div class="tag-content">
<view class="tag-box ss-flex">
<!-- 最多打印 3 条，所以需要扣除优惠劵已打印的 -->
<view
v-for="item in getRewardActivityRuleItemDescriptions(
state.rewardActivity,
).slice(0, 3 - state.couponInfo.slice(0, 1).length)"
:key="item"
class="tag ss-m-r-10"
@tap="onOpenActivity"
>
<text>{{ item }}</text>
</view>
</view>
</div>
<!-- 领取优惠劵的按钮 -->
<view class="get-coupon-box ss-flex ss-col-center ss-m-l-20" @tap="onOpenActivity"
v-if="state.couponInfo.length">
<view
class="get-coupon-box ss-flex ss-col-center ss-m-l-20"
@tap="onOpenActivity"
v-if="state.couponInfo.length"
>
<view class="discounts-title ss-m-r-8">领券</view>
<text class="cicon-forward"></text>
</view>
@ -103,30 +139,51 @@
<!-- 功能卡片 -->
<view class="detail-cell-card detail-card ss-flex-col">
<detail-cell-sku v-model="state.selectedSku.goods_sku_text" :sku="state.selectedSku"
@tap="state.showSelectSku = true" />
<detail-cell-sku
v-model="state.selectedSku.goods_sku_text"
:sku="state.selectedSku"
@tap="state.showSelectSku = true"
/>
</view>
<!-- 规格与数量弹框 -->
<s-select-sku :goodsInfo="state.goodsInfo" :show="state.showSelectSku" @addCart="onAddCart"
@buy="onBuy" @change="onSkuChange" @close="state.showSelectSku = false" />
<s-select-sku
:goodsInfo="state.goodsInfo"
:show="state.showSelectSku"
@addCart="onAddCart"
@buy="onBuy"
@change="onSkuChange"
@close="state.showSelectSku = false"
/>
</view>
<!-- 评价 -->
<detail-comment-card class="detail-comment-selector" :goodsId="state.goodsId" />
<!-- 详情 -->
<detail-content-card class="detail-content-selector" :content="state.goodsInfo.description" />
<detail-content-card
class="detail-content-selector"
:content="state.goodsInfo.description"
/>
<!-- 活动跳转：拼团/秒杀/砍价活动 -->
<detail-activity-tip v-if="state.activityList.length > 0" :activity-list="state.activityList" />
<detail-activity-tip
v-if="state.activityList.length > 0"
:activity-list="state.activityList"
/>
<!-- 详情 tabbar -->
<detail-tabbar v-model="state.goodsInfo">
<view class="buy-box ss-flex ss-col-center ss-p-r-20" v-if="state.goodsInfo.stock > 0">
<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="state.showSelectSku = true">
<button
class="ss-reset-button add-btn ui-Shadow-Main"
@tap="state.showSelectSku = true"
>
加入购物车
</button>
<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="state.showSelectSku = true">
<button
class="ss-reset-button buy-btn ui-Shadow-Main"
@tap="state.showSelectSku = true"
>
立即购买
</button>
</view>
@ -136,24 +193,20 @@
</detail-tabbar>
<!-- 满减送/限时折扣活动弹窗 -->
<s-activity-pop v-model="state" :show="state.showActivityModel" @close="state.showActivityModel = false"
@get="onTakeCoupon" />
<s-activity-pop
v-model="state"
:show="state.showActivityModel"
@close="state.showActivityModel = false"
@get="onTakeCoupon"
/>
</block>
</s-layout>
</view>
</template>
<script setup>
import {
reactive,
computed,
ref,
toRaw
} from 'vue';
import {
onLoad,
onPageScroll
} from '@dcloudio/uni-app';
import { reactive, computed, ref, toRaw } from 'vue';
import { onLoad, onPageScroll } from '@dcloudio/uni-app';
import sheep from '@/sheep';
import CouponApi from '@/sheep/api/promotion/coupon';
import ActivityApi from '@/sheep/api/promotion/activity';
@ -162,7 +215,10 @@
import {
formatSales,
formatGoodsSwiper,
fen2yuan
fen2yuan,
fen2yuanSimple,
formatDiscountPercent,
getRewardActivityRuleItemDescriptions,
} from '@/sheep/hooks/useGoods';
import detailNavbar from './components/detail/detail-navbar.vue';
import detailCellSku from './components/detail/detail-cell-sku.vue';
@ -171,14 +227,13 @@
import detailCommentCard from './components/detail/detail-comment-card.vue';
import detailContentCard from './components/detail/detail-content-card.vue';
import detailActivityTip from './components/detail/detail-activity-tip.vue';
import {
isEmpty
} from 'lodash-es';
import { isEmpty } from 'lodash-es';
import SpuApi from '@/sheep/api/product/spu';
onPageScroll(() => {});
import countDown from '@/sheep/components/countDown/index.vue';
import OrderApi from '@/sheep/api/trade/order';
import activity from '@/sheep/api/promotion/activity';
const bgColor = {
bgColor: '#E93323',
@ -225,11 +280,13 @@
}
sheep.$router.go('/pages/order/confirm', {
data: JSON.stringify({
items: [{
items: [
{
skuId: e.id,
count: e.goods_num,
categoryId: state.goodsInfo.categoryId,
}, ],
},
],
}),
});
}
@ -241,9 +298,7 @@
// 立即领取优惠劵
async function onTakeCoupon(id) {
const {
code
} = await CouponApi.takeCoupon(id);
const { code } = await CouponApi.takeCoupon(id);
if (code !== 0) {
return;
}
@ -257,7 +312,8 @@
const shareInfo = computed(() => {
if (isEmpty(state.goodsInfo)) return {};
return sheep.$platform.share.getShareInfo({
return sheep.$platform.share.getShareInfo(
{
title: state.goodsInfo.name,
image: sheep.$url.cdn(state.goodsInfo.picUrl),
desc: state.goodsInfo.introduction,
@ -265,30 +321,26 @@
page: '2',
query: state.goodsInfo.id,
},
}, {
},
{
type: 'goods', // 商品海报
title: state.goodsInfo.name, // 商品名称
image: sheep.$url.cdn(state.goodsInfo.picUrl), // 商品主图
price: fen2yuan(state.goodsInfo.price), // 商品价格
original_price: fen2yuan(state.goodsInfo.marketPrice), // 商品原价
}, );
},
);
});
async function getCoupon() {
const {
code,
data
} = await CouponApi.getCouponTemplateList(state.goodsId, 2, 10);
const { code, data } = await CouponApi.getCouponTemplateList(state.goodsId, 2, 10);
if (code === 0) {
state.couponInfo = data;
}
}
async function getSettlementByIds(ids) {
let {
data,
code
} = await OrderApi.getSettlementProduct(ids);
let { data, code } = await OrderApi.getSettlementProduct(ids);
if (code !== 0 || data.length !== 1) {
return;
}
@ -315,22 +367,20 @@
if (data.rewardActivity) {
state.rewardActivity = data.rewardActivity;
//获取活动时间
getActivityTime(state.rewardActivity.id)
getActivityTime(state.rewardActivity.id);
}
}
//获取活动时间
async function getActivityTime(id) {
const {
code,
data
} = await RewardActivityApi.getRewardActivity(id);
const { code, data } = await RewardActivityApi.getRewardActivity(id);
if (code === 0) {
// console.log('获取到的活动 数据', data)
state.rewardActivity.startTime = data.startTime
state.rewardActivity.endTime = data.endTime
state.rewardActivity.startTime = data.startTime;
state.rewardActivity.endTime = data.endTime;
}
}
onLoad((options) => {
// 非法参数
if (!options.id) {

60
sheep/components/s-activity-pop/s-activity-pop.vue
View File

@ -5,13 +5,25 @@
<view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠</view>
<view v-if="state.rewardActivity && state.rewardActivity.id > 0">
<view class="titleLi">促销</view>
<scroll-view class="model-content" scroll-y :scroll-with-animation="false" :enable-back-to-top="true">
<view class="actBox" v-for="(item, index) in state.handeActivity" :key="index">
<view class="boxCont ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(state.rewardActivity)">
<scroll-view
class="model-content"
scroll-y
:scroll-with-animation="false"
:enable-back-to-top="true"
>
<view
class="actBox"
v-for="(item, index) in getRewardActivityRuleGroupDescriptions(state.rewardActivity)"
:key="index"
>
<view
class="boxCont ss-flex ss-col-top ss-m-b-40"
@tap="onGoodsList(state.rewardActivity)"
>
<view class="model-content-tag ss-flex ss-row-center">{{ item.name }}</view>
<view class="model-content-title">
<view class="contBu">
<text v-for="(items,indexs) in item.value" :key="indexs">{{ items }};</text>
{{ item.values.join(';') }}
</view>
<view class="ss-m-b-24 cotBu-txt">
{{ sheep.$helper.timeFormat(state.rewardActivity.startTime, 'yyyy.mm.dd') }}
@ -25,7 +37,13 @@
</scroll-view>
</view>
<view class="titleLi">可领优惠券</view>
<scroll-view class="model-content" scroll-y :scroll-with-animation="false" :enable-back-to-top="true" v-if="state.couponInfo.length">
<scroll-view
class="model-content"
scroll-y
:scroll-with-animation="false"
:enable-back-to-top="true"
v-if="state.couponInfo.length"
>
<view class="actBox" v-for="item in state.couponInfo" :key="item.id">
<view class="boxCont ss-flex ss-col-top ss-m-b-40">
<view class="model-content-tag2">
@ -50,26 +68,15 @@
</view>
</view>
</scroll-view>
<view class="nullBox" v-else>
暂无可领优惠券
</view>
<view class="nullBox" v-else> 暂无可领优惠券 </view>
</view>
</su-popup>
</template>
<script setup>
import sheep from '@/sheep';
import {
handeleData
} from '@/sheep/hooks/useGoods';
import {
computed,
reactive,
watch,
ref
} from 'vue';
import {
fen2yuan
} from '@/sheep/hooks/useGoods';
import { getRewardActivityRuleGroupDescriptions } from '@/sheep/hooks/useGoods';
import { computed, reactive, watch, ref } from 'vue';
import { fen2yuan } from '@/sheep/hooks/useGoods';
const props = defineProps({
modelValue: {
type: Object,
@ -85,10 +92,7 @@
rewardActivity: computed(() => props.modelValue.rewardActivity),
couponInfo: computed(() => props.modelValue.couponInfo),
});
// setTimeout(()=>{
// console.log('历程数据',state.rewardActivity.ruleDescriptions)
// console.log('处理数据',handeleData(props.modelValue.rewardActivity.ruleDescriptions))
// },5000)
// 领取优惠劵
const getBuy = (id) => {
emits('get', id);
@ -99,14 +103,6 @@
activityId: e.id,
});
}
//监听获取到数据后再执行且只执行一次
let flag = ref(true)
watch(state, (newValue, oldValue) => {
if (flag.value) {
flag.value = false
state.handeActivity = handeleData(state.rewardActivity.ruleDescriptions)
}
});
</script>
<style lang="scss" scoped>
.model-box {

242
sheep/components/s-goods-column/s-goods-column.vue
View File

@ -2,29 +2,43 @@
<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" v-if="data.rewardActivity">
{{ (data.rewardActivity.ruleDescriptions[0])[1] }}
</view>
<view class="card2" v-if="data.rewardActivity && (data.rewardActivity.ruleDescriptions[0])[3]">
{{ (data.rewardActivity.ruleDescriptions[0])[3] }}
<view
class="card2"
v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
: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 }]"
>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<!-- 活动价格 -->
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -40,26 +54,39 @@
<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" v-if="data.rewardActivity">
{{ (data.rewardActivity.ruleDescriptions[0])[1] }}
</view>
<view class="card2" v-if="data.rewardActivity && (data.rewardActivity.ruleDescriptions[0])[3]">
{{ (data.rewardActivity.ruleDescriptions[0])[3] }}
<view
class="card2"
v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
: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="sm-goods-price font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]"
>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<!-- 活动价格 -->
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -76,19 +103,31 @@
<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>
@ -96,16 +135,20 @@
<!-- 活动信息 -->
<view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view>
<view class="card2" v-if="data.rewardActivity">
{{ (data.rewardActivity.ruleDescriptions[0])[1] }}
</view>
<view class="card2" v-if="data.rewardActivity && (data.rewardActivity.ruleDescriptions[0])[3]">
{{ (data.rewardActivity.ruleDescriptions[0])[3] }}
<view
class="card2"
v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
: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 }]"
>
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
<!-- 活动价格 -->
<text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -113,10 +156,14 @@
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</text>
</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>
@ -135,7 +182,12 @@
</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>
@ -143,16 +195,25 @@
<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 ss-p-t-20">
<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>
@ -167,24 +228,31 @@
<!-- 活动信息 -->
<view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view>
<view class="card2" v-if="data.rewardActivity">
{{ (data.rewardActivity.ruleDescriptions[0])[1] }}
</view>
<view class="card2" v-if="data.rewardActivity && (data.rewardActivity.ruleDescriptions[0])[3]">
{{ (data.rewardActivity.ruleDescriptions[0])[3] }}
<view
class="card2"
v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
:key="item"
>
{{ item }}
</view>
</view>
<view class="ss-flex ss-col-bottom ss-m-t-10">
<view v-if="goodsFields.price?.show"
<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 }]">
:style="[{ color: goodsFields.price.color }]"
>
<text class="ss-font-24">{{ priceUnit }}</text>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</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-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 v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -209,23 +277,36 @@
<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>
@ -233,11 +314,12 @@
<!-- 活动信息 -->
<view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view>
<view class="card2" v-if="data.rewardActivity">
{{ (data.rewardActivity.ruleDescriptions[0])[1] }}
</view>
<view class="card2" v-if="data.rewardActivity && (data.rewardActivity.ruleDescriptions[0])[3]">
{{ (data.rewardActivity.ruleDescriptions[0])[3] }}
<view
class="card2"
v-for="item in getRewardActivityRuleItemDescriptions(data.rewardActivity).slice(0, 1)"
:key="item"
>
{{ item }}
</view>
</view>
<view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
@ -249,10 +331,14 @@
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</text>
</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>
@ -299,23 +385,15 @@
* @event {Function()} click - 点击卡片
*
*/
import {
computed,
getCurrentInstance,
onMounted,
nextTick
} from 'vue';
import { computed, getCurrentInstance, onMounted, nextTick } from 'vue';
import sheep from '@/sheep';
import {
fen2yuan,
formatSales
formatSales,
getRewardActivityRuleItemDescriptions,
} from '@/sheep/hooks/useGoods';
import {
formatStock
} from '@/sheep/hooks/useGoods';
import {
isArray
} from 'lodash-es';
import { formatStock } from '@/sheep/hooks/useGoods';
import { isArray } from 'lodash-es';
// 接收参数
const props = defineProps({
@ -458,9 +536,7 @@
};
// 获取卡片实时高度
const {
proxy
} = getCurrentInstance();
const { proxy } = getCurrentInstance();
const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`;
function getGoodsPriceCardWH() {

124
sheep/hooks/useGoods.js
View File

@ -1,11 +1,7 @@
import {
ref
} from 'vue';
import { ref } from 'vue';
import dayjs from 'dayjs';
import $url from '@/sheep/url';
import {
formatDate
} from '@/sheep/util';
import { formatDate } from '@/sheep/util';
/**
* 格式化销量
@ -343,6 +339,27 @@ export function fen2yuan(price) {
return (price / 100.0).toFixed(2);
}
/**
* 将分转成元
*
* 如果没有小数点，则不展示小数点部分
*
* @param price 分，例如说 100 分
* @returns {string} 元，例如说 1 元
*/
export function fen2yuanSimple(price) {
return fen2yuan(price).replace(/\.?0+$/, '');
}
/**
* 将折扣百分比转化为“打x者”的 x 部分
*
* @param discountPercent
*/
export function formatDiscountPercent(discountPercent) {
return (discountPercent / 10.0).toFixed(1).replace(/\.?0+$/, '');
}
/**
* 从商品 SKU 数组中，转换出商品属性的数组
*
@ -411,39 +428,72 @@ export function appendSettlementProduct(spus, settlementInfos) {
}
}
//处理促销信息
export function handeleData(array) {
const array2 = ref([{
name: '满减',
value: []
},
{
name: '赠品',
value: []
},
{
name: '包邮',
value: []
// 获得满减送活动的规则描述（group）
export function getRewardActivityRuleGroupDescriptions(activity) {
if (!activity || !activity.rules || activity.rules.length === 0) {
return [];
}
const result = [
{ name: '满减', values: [] },
{ name: '赠品', values: [] },
{ name: '包邮', values: [] },
];
activity.rules.forEach((rule) => {
const conditionTypeStr =
activity.conditionType === 10 ? `满 ${fen2yuanSimple(rule.limit)} 元` : `满 ${rule.limit} 件`;
// 满减
if (rule.limit) {
result[0].values.push(`${conditionTypeStr} 减 ${fen2yuanSimple(rule.discountPrice)} 元`);
}
// 赠品
if (rule.point || (rule.giveCouponTemplateCounts && rule.giveCouponTemplateCounts.length > 0)) {
let tips = [];
if (rule.point) {
tips.push(`送 ${rule.point} 积分`);
}
if (rule.giveCouponTemplateCounts && rule.giveCouponTemplateCounts.length > 0) {
tips.push(`送 ${rule.giveCouponTemplateCounts.length} 张优惠券`);
}
result[1].values.push(`${conditionTypeStr} ${tips.join('、')}`);
}
// 包邮
if (rule.freeDelivery) {
result[2].values.push(`${conditionTypeStr} 包邮`);
}
});
// 移除 values 为空的元素
result.forEach((item) => {
if (item.values.length === 0) {
result.splice(result.indexOf(item), 1);
}
});
return result;
}
]);
array.forEach(item => {
Object.entries(item).forEach(([key, value]) => {
const type = parseInt(key);
switch (type) {
case 1:
array2.value[0].value.push(value); // 满减
break;
case 2:
array2.value[1].value.push(value); // 满送
break;
case 3:
array2.value[2].value.push(value); // 包邮
break;
default:
break;
// 获得满减送活动的规则描述（item）
export function getRewardActivityRuleItemDescriptions(activity) {
if (!activity || !activity.rules || activity.rules.length === 0) {
return [];
}
const result = [];
activity.rules.forEach((rule) => {
const conditionTypeStr =
activity.conditionType === 10 ? `满${fen2yuanSimple(rule.limit)}元` : `满${rule.limit}件`;
// 满减
if (rule.limit) {
result.push(`${conditionTypeStr}减${fen2yuanSimple(rule.discountPrice)}元`);
}
// 赠品
if (rule.point) {
result.push(`${conditionTypeStr}送${rule.point}积分`);
}
if (rule.giveCouponTemplateCounts && rule.giveCouponTemplateCounts.length > 0) {
result.push(`${conditionTypeStr}送${rule.giveCouponTemplateCounts.length}张优惠券`);
}
// 包邮
if (rule.freeDelivery) {
result.push(`${conditionTypeStr}包邮`);
}
});
});
return array2
return result;
}