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/102/head
岳琳红 2024-09-18 17:04:23 +08:00
parent 6b6fa0c257
commit 51cd8908ec
5 changed files with 1817 additions and 1831 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="type-text ss-flex ss-row-center">满减：</view>
<view class="ss-flex-1"> <view class="ss-flex-1">
<view class="tip-content" v-for="item in state.activityInfo.rules" :key="item"> <view class="tip-content" v-for="item in state.activityInfo.rules" :key="item">
{{ item.description }} {{ item.description[1] }}
</view> </view>
</view> </view>
<image class="activity-left-image" src="/static/activity-left.png" /> <image class="activity-left-image" src="/static/activity-left.png" />

183
pages/goods/index.vue
View File

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

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

@ -5,25 +5,13 @@
<view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠</view> <view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠</view>
<view v-if="state.rewardActivity && state.rewardActivity.id > 0"> <view v-if="state.rewardActivity && state.rewardActivity.id > 0">
<view class="titleLi">促销</view> <view class="titleLi">促销</view>
<scroll-view <scroll-view class="model-content" scroll-y :scroll-with-animation="false" :enable-back-to-top="true">
class="model-content" <view class="actBox" v-for="(item, index) in state.handeActivity" :key="index">
scroll-y <view class="boxCont ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(state.rewardActivity)">
:scroll-with-animation="false" <view class="model-content-tag ss-flex ss-row-center">{{item.name}}</view>
:enable-back-to-top="true"
>
<view
class="actBox"
v-for="(item, index) in state.rewardActivity.ruleDescriptions"
: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">满减</view>
<view class="model-content-title"> <view class="model-content-title">
<view class="contBu"> <view class="contBu">
<text>{{ item }}</text> <text v-for="(items,indexs) in item.value" :key="indexs">{{ items }};</text>
</view> </view>
<view class="ss-m-b-24 cotBu-txt"> <view class="ss-m-b-24 cotBu-txt">
{{ sheep.$helper.timeFormat(state.rewardActivity.startTime, 'yyyy.mm.dd') }} {{ sheep.$helper.timeFormat(state.rewardActivity.startTime, 'yyyy.mm.dd') }}
@ -37,12 +25,7 @@
</scroll-view> </scroll-view>
</view> </view>
<view class="titleLi">可领优惠券</view> <view class="titleLi">可领优惠券</view>
<scroll-view <scroll-view class="model-content" scroll-y :scroll-with-animation="false" :enable-back-to-top="true" v-if="state.couponInfo.length">
class="model-content"
scroll-y
:scroll-with-animation="false"
:enable-back-to-top="true"
>
<view class="actBox" v-for="item in state.couponInfo" :key="item.id"> <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="boxCont ss-flex ss-col-top ss-m-b-40">
<view class="model-content-tag2"> <view class="model-content-tag2">
@ -67,17 +50,30 @@
</view> </view>
</view> </view>
</scroll-view> </scroll-view>
<view class="nullBox" v-else>
暂无可领优惠券
</view>
</view> </view>
</su-popup> </su-popup>
</template> </template>
<script setup> <script setup>
import sheep from '@/sheep'; import sheep from '@/sheep';
import { computed, reactive } from 'vue'; import {
import { fen2yuan } from '@/sheep/hooks/useGoods'; handeleData
} from '@/sheep/hooks/useGoods';
import {
computed,
reactive,
watch,
ref
} from 'vue';
import {
fen2yuan
} from '@/sheep/hooks/useGoods';
const props = defineProps({ const props = defineProps({
modelValue: { modelValue: {
type: Object, type: Object,
default() {}, default () {},
}, },
show: { show: {
type: Boolean, type: Boolean,
@ -89,7 +85,10 @@
rewardActivity: computed(() => props.modelValue.rewardActivity), rewardActivity: computed(() => props.modelValue.rewardActivity),
couponInfo: computed(() => props.modelValue.couponInfo), couponInfo: computed(() => props.modelValue.couponInfo),
}); });
// setTimeout(()=>{
// console.log('历程数据',state.rewardActivity.ruleDescriptions)
// console.log('处理数据',handeleData(props.modelValue.rewardActivity.ruleDescriptions))
// },5000)
// 领取优惠劵 // 领取优惠劵
const getBuy = (id) => { const getBuy = (id) => {
emits('get', id); emits('get', id);
@ -100,6 +99,14 @@
activityId: e.id, activityId: e.id,
}); });
} }
//监听获取到数据后再执行且只执行一次
let flag = ref(true)
watch(state, (newValue, oldValue) => {
if (flag.value) {
flag.value = false
state.handeActivity = handeleData(state.rewardActivity.ruleDescriptions)
}
});
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
.model-box { .model-box {
@ -116,7 +123,7 @@
.model-content { .model-content {
height: fit-content; height: fit-content;
max-height: 350rpx; max-height: 380rpx;
padding: 0 20rpx; padding: 0 20rpx;
box-sizing: border-box; box-sizing: border-box;
margin-top: 20rpx; margin-top: 20rpx;
@ -241,4 +248,12 @@
text-align: center; text-align: center;
font-size: 25rpx; font-size: 25rpx;
} }
.nullBox{
width: 100%;
height: 300rpx;
font-size: 25rpx;
line-height: 300rpx;
text-align: center;
color: #999999;
}
</style> </style>

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

@ -2,39 +2,29 @@
<template> <template>
<view class="ss-goods-wrap"> <view class="ss-goods-wrap">
<!-- xs卡片：横向紧凑型，一行放两个，图片左内容右边 --> <!-- xs卡片：横向紧凑型，一行放两个，图片左内容右边 -->
<view <view v-if="size === 'xs'" class="xs-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @tap="onClick">
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 class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit" />
<view <view v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show" class="xs-goods-content ss-flex-col ss-row-around">
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"
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.promotionType > 0 || data.rewardActivity"> <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view> <view class="card" v-if="discountText">{{ discountText }}</view>
<view class="card2" v-if="data.rewardActivity"> <view class="card2" v-if="data.rewardActivity">
{{ data.rewardActivity.ruleDescriptions[0] }} {{ (data.rewardActivity.ruleDescriptions[0])[1] }}
</view>
<view class="card2" v-if="data.rewardActivity && (data.rewardActivity.ruleDescriptions[0])[3]">
{{ (data.rewardActivity.ruleDescriptions[0])[3] }}
</view> </view>
</view> </view>
<view <view v-if="goodsFields.price?.show" class="xs-goods-price font-OPPOSANS"
v-if="goodsFields.price?.show" :style="[{ color: goodsFields.price.color }]">
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="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text> <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -50,35 +40,26 @@
<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 <image class="sm-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
class="sm-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="aspectFill"
></image>
<view <view v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show" class="sm-goods-content" :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]">
class="sm-goods-content" <view v-if="goodsFields.title?.show || goodsFields.name?.show"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]" class="sm-goods-title ss-line-1 ss-m-b-16">
>
<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.promotionType > 0 || data.rewardActivity"> <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view> <view class="card" v-if="discountText">{{ discountText }}</view>
<view class="card2" v-if="data.rewardActivity"> <view class="card2" v-if="data.rewardActivity">
{{ data.rewardActivity.ruleDescriptions[0] }} {{ (data.rewardActivity.ruleDescriptions[0])[1] }}
</view>
<view class="card2" v-if="data.rewardActivity && (data.rewardActivity.ruleDescriptions[0])[3]">
{{ (data.rewardActivity.ruleDescriptions[0])[3] }}
</view> </view>
</view> </view>
<view <view v-if="goodsFields.price?.show" class="sm-goods-price font-OPPOSANS"
v-if="goodsFields.price?.show" :style="[{ color: goodsFields.price.color }]">
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="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text> <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -95,31 +76,19 @@
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" /> <image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" />
</view> </view>
<image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix" /> <image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix" />
<view <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">
class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16" <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="md-goods-title ss-line-1"
:id="elId" :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]">
>
<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 <view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="md-goods-subtitle ss-m-t-16 ss-line-1" 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 }} {{ 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 <view class="activity-tag ss-m-r-10 ss-m-t-16" v-for="item in data.promos" :key="item.id">
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>
@ -128,15 +97,15 @@
<view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity"> <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view> <view class="card" v-if="discountText">{{ discountText }}</view>
<view class="card2" v-if="data.rewardActivity"> <view class="card2" v-if="data.rewardActivity">
{{ data.rewardActivity.ruleDescriptions[0] }} {{ (data.rewardActivity.ruleDescriptions[0])[1] }}
</view>
<view class="card2" v-if="data.rewardActivity && (data.rewardActivity.ruleDescriptions[0])[3]">
{{ (data.rewardActivity.ruleDescriptions[0])[3] }}
</view> </view>
</view> </view>
<view class="ss-flex ss-col-bottom"> <view class="ss-flex ss-col-bottom">
<view <view v-if="goodsFields.price?.show" class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
v-if="goodsFields.price?.show" :style="[{ color: goodsFields.price.color }]">
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="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text> <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -144,14 +113,10 @@
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</text> </text>
</view> </view>
<view <view v-if="
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>
@ -170,12 +135,7 @@
</view> </view>
<!-- lg卡片：横向型，一行放一个，图片左内容右边 --> <!-- lg卡片：横向型，一行放一个，图片左内容右边 -->
<view <view v-if="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @tap="onClick">
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>
@ -183,25 +143,16 @@
<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 <image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill" />
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 class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
<view> <view>
<view <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="lg-goods-title ss-line-2"
v-if="goodsFields.title?.show || goodsFields.name?.show" :style="[{ color: titleColor }]">
class="lg-goods-title ss-line-2"
:style="[{ color: titleColor }]"
>
{{ data.title || data.name }} {{ data.title || data.name }}
</view> </view>
<view <view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="lg-goods-subtitle ss-m-t-10 ss-line-1" 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 }} {{ data.subtitle || data.introduction }}
</view> </view>
</view> </view>
@ -217,26 +168,23 @@
<view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity"> <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view> <view class="card" v-if="discountText">{{ discountText }}</view>
<view class="card2" v-if="data.rewardActivity"> <view class="card2" v-if="data.rewardActivity">
{{ data.rewardActivity.ruleDescriptions[0] }} {{ (data.rewardActivity.ruleDescriptions[0])[1] }}
</view>
<view class="card2" v-if="data.rewardActivity && (data.rewardActivity.ruleDescriptions[0])[3]">
{{ (data.rewardActivity.ruleDescriptions[0])[3] }}
</view> </view>
</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 <view v-if="goodsFields.price?.show"
v-if="goodsFields.price?.show"
class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS" 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> <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 <view v-if="
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="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text> <text v-if="data.promotionPrice > 0">{{ fen2yuan(data.promotionPrice) }}</text>
@ -261,36 +209,23 @@
<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 class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)" />
</view> </view>
<image <image class="sl-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill" />
class="sl-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="aspectFill"
/>
<view class="sl-goods-content"> <view class="sl-goods-content">
<view> <view>
<view <view v-if="goodsFields.title?.show || goodsFields.name?.show" class="sl-goods-title ss-line-1"
v-if="goodsFields.title?.show || goodsFields.name?.show" :style="[{ color: titleColor }]">
class="sl-goods-title ss-line-1"
:style="[{ color: titleColor }]"
>
{{ data.title || data.name }} {{ data.title || data.name }}
</view> </view>
<view <view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="sl-goods-subtitle ss-m-t-16" class="sl-goods-subtitle ss-m-t-16"
:style="[{ color: subTitleColor, background: subTitleBackground }]" :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 <view class="activity-tag ss-m-r-10 ss-m-t-16" v-for="item in data.promos" :key="item.id">
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>
@ -299,7 +234,10 @@
<view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity"> <view class="iconBox" v-if="data.promotionType > 0 || data.rewardActivity">
<view class="card" v-if="discountText">{{ discountText }}</view> <view class="card" v-if="discountText">{{ discountText }}</view>
<view class="card2" v-if="data.rewardActivity"> <view class="card2" v-if="data.rewardActivity">
{{ data.rewardActivity.ruleDescriptions[0] }} {{ (data.rewardActivity.ruleDescriptions[0])[1] }}
</view>
<view class="card2" v-if="data.rewardActivity && (data.rewardActivity.ruleDescriptions[0])[3]">
{{ (data.rewardActivity.ruleDescriptions[0])[3] }}
</view> </view>
</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">
@ -311,14 +249,10 @@
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }} {{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</text> </text>
</view> </view>
<view <view v-if="
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>
@ -365,17 +299,29 @@
* @event {Function()} click - 点击卡片 * @event {Function()} click - 点击卡片
* *
*/ */
import { computed, getCurrentInstance, onMounted, nextTick } from 'vue'; import {
computed,
getCurrentInstance,
onMounted,
nextTick
} from 'vue';
import sheep from '@/sheep'; import sheep from '@/sheep';
import { fen2yuan, formatSales } from '@/sheep/hooks/useGoods'; import {
import { formatStock } from '@/sheep/hooks/useGoods'; fen2yuan,
import { isArray } from 'lodash-es'; formatSales
} from '@/sheep/hooks/useGoods';
import {
formatStock
} from '@/sheep/hooks/useGoods';
import {
isArray
} from 'lodash-es';
// 接收参数 // 接收参数
const props = defineProps({ const props = defineProps({
goodsFields: { goodsFields: {
type: [Array, Object], type: [Array, Object],
default() { default () {
return { return {
// 商品价格 // 商品价格
price: { price: {
@ -512,7 +458,9 @@
}; };
// 获取卡片实时高度 // 获取卡片实时高度
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() {
@ -837,6 +785,7 @@
background-color: red; background-color: red;
color: #ffffff; color: #ffffff;
font-size: 24rpx; font-size: 24rpx;
margin-top: 5rpx;
} }
.card2 { .card2 {
@ -846,7 +795,7 @@
background-color: rgb(255, 242, 241); background-color: rgb(255, 242, 241);
color: #ff2621; color: #ff2621;
font-size: 24rpx; font-size: 24rpx;
margin-left: 5rpx; margin: 5rpx 0 5rpx 5rpx;
} }
.iconBox { .iconBox {
@ -855,5 +804,6 @@
margin-top: 10rpx; margin-top: 10rpx;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
flex-wrap: wrap;
} }
</style> </style>

52
sheep/hooks/useGoods.js
View File

@ -1,7 +1,11 @@
import { ref } from 'vue'; import {
ref
} from 'vue';
import dayjs from 'dayjs'; import dayjs from 'dayjs';
import $url from '@/sheep/url'; import $url from '@/sheep/url';
import { formatDate } from '@/sheep/util'; import {
formatDate
} from '@/sheep/util';
/** /**
* 格式化销量 * 格式化销量
@ -406,3 +410,47 @@ export function appendSettlementProduct(spus, settlementInfos) {
} }
} }
} }
//处理促销信息
export function handeleData(array) {
const array2 = ref([{
name: '满减',
value: []
},
{
name: '满送',
value: []
},
{
name: '包邮',
value: []
},
{
name: '赠品',
value: []
}
]);
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;
case 4:
array2.value[3].value.push(value); // 赠品
break;
default:
break;
}
});
});
return array2
}