diff --git a/pages/activity/index.vue b/pages/activity/index.vue index 56417ed9..591d004c 100644 --- a/pages/activity/index.vue +++ b/pages/activity/index.vue @@ -19,13 +19,9 @@ - + @@ -34,13 +30,9 @@ - + @@ -49,23 +41,27 @@ - 0" :status="state.loadStatus" :content-text="{ contentdown: '上拉加载更多', - }" - @tap="loadMore" - /> + }" @tap="loadMore" /> + \ No newline at end of file diff --git a/pages/activity/seckill/list.vue b/pages/activity/seckill/list.vue index a1714bba..a6a07d14 100644 --- a/pages/activity/seckill/list.vue +++ b/pages/activity/seckill/list.vue @@ -2,10 +2,7 @@ @@ -462,4 +504,101 @@ color: #333333; } } - + + // 限时折扣 + .discount { + width: 750rpx; + height: 100rpx; + // background-color: red; + overflow: hidden; + position: relative; + } + + .disImg { + width: 750rpx; + height: 100rpx; + position: absolute; + top: 0; + z-index: -1; + } + + .discountCont { + width: 680rpx; + height: 90rpx; + margin: 10rpx auto 0 auto; + // background-color: gold; + } + + .disContT { + width: 680rpx; + height: 50rpx; + display: flex; + justify-content: space-between; + } + + .disContT1 { + width: 400rpx; + height: 50rpx; + // background-color: green; + display: flex; + justify-content: flex-start; + align-items: center; + } + + .disContT2 { + width: 200rpx; + height: 50rpx; + line-height: 50rpx; + // background-color: gold; + font-size: 30rpx; + text-align: end; + color: white; + font-weight: bolder; + font-style: oblique 20deg; + letter-spacing: .1rem; + } + + .disContT1P { + color: white; + font-weight: bold; + font-size: 28rpx; + } + + .disContT1End { + // width: 180rpx; + padding: 0 10rpx; + height: 30rpx; + line-height: 28rpx; + text-align: center; + font-weight: bold; + background-color: white; + color: #ff3000; + font-size: 23rpx; + border-radius: 20rpx; + margin-left: 10rpx; + } + + .disContB { + width: 680rpx; + height: 40rpx; + display: flex; + justify-content: space-between; + font-size: 20rpx; + color: white; + align-items: center; + } + + .disContB1 { + width: 300rpx; + height: 40rpx; + line-height: 40rpx; + } + + .disContB2 { + width: 300rpx; + height: 40rpx; + line-height: 40rpx; + display: flex; + justify-content: flex-end; + } + \ No newline at end of file diff --git a/pages/goods/list.vue b/pages/goods/list.vue index 1fdf5592..1db8b708 100644 --- a/pages/goods/list.vue +++ b/pages/goods/list.vue @@ -118,7 +118,7 @@ + + diff --git a/pages/order/confirm.vue b/pages/order/confirm.vue index 94d78d73..260ba1e6 100644 --- a/pages/order/confirm.vue +++ b/pages/order/confirm.vue @@ -1,36 +1,18 @@ + \ No newline at end of file diff --git a/sheep/components/s-goods-card/s-goods-card.vue b/sheep/components/s-goods-card/s-goods-card.vue index 59f2bf10..a4d7d9c1 100644 --- a/sheep/components/s-goods-card/s-goods-card.vue +++ b/sheep/components/s-goods-card/s-goods-card.vue @@ -135,7 +135,7 @@ /** * 商品卡片 */ - import { computed, reactive, onMounted } from 'vue'; + import { computed, reactive, onMounted, ref } from 'vue'; import sheep from '@/sheep'; import SpuApi from '@/sheep/api/product/spu'; @@ -227,10 +227,61 @@ return data; } + //获取结算信息 + const settleData = ref() + async function getSettlementByIds(ids) { + const { data } = await SpuApi.getSettlementProduct(ids); + return data; + } + + //计算展示价格的函数 + async function enrichDataWithSkus(data, array) { + // 创建一个映射,以 id 为键,存储 data 数组中的对象 + const dataMap = new Map(data.map(item => [item.id, { ...item }])); + + // 遍历 array 数组 + array.forEach(item => { + // 初始化 discountPrice 和 vipPrice 为 null + let discountPrice = null; + let vipPrice = null; + let foundType4 = false; + let foundType6 = false; + + // 遍历 skus 数组,寻找 type 为 4 和 6 的首个条目 + item.skus.forEach(sku => { + if (!foundType4 && sku.type === 4) { + discountPrice = sku.price; + foundType4 = true; + } + if (!foundType6 && sku.type === 6) { + vipPrice = sku.price; + foundType6 = true; + } + + // 如果已经找到 type 为 4 和 6 的条目,则不需要继续遍历 + if (foundType4 && foundType6) { + return; + } + }); + + // 更新 dataMap 中对应的对象 + if (dataMap.has(item.id)) { + dataMap.get(item.id).discountPrice = discountPrice; + dataMap.get(item.id).vipPrice = vipPrice; + dataMap.get(item.id).reward = item.reward; + } + }); + + // 返回更新后的数据数组 + return Array.from(dataMap.values()); + } + // 初始化 onMounted(async () => { // 加载商品列表 - state.goodsList = await getGoodsListByIds(spuIds.join(',')); + const ms = await getGoodsListByIds(spuIds.join(',')); + settleData.value = await getSettlementByIds(spuIds.join(',')) + state.goodsList = await enrichDataWithSkus(ms,settleData.value) // 只有双列布局时需要 if (layoutType === LayoutTypeEnum.TWO_COL){ // 分列 diff --git a/sheep/components/s-goods-column/s-goods-column.vue b/sheep/components/s-goods-column/s-goods-column.vue index 228c64e1..45f3487b 100644 --- a/sheep/components/s-goods-column/s-goods-column.vue +++ b/sheep/components/s-goods-column/s-goods-column.vue @@ -2,38 +2,29 @@ @@ -321,13 +272,26 @@ * @event {Function()} click - 点击卡片 * */ - import { computed, reactive, getCurrentInstance, onMounted, nextTick } from 'vue'; + import { + computed, + reactive, + getCurrentInstance, + onMounted, + nextTick, + ref + } from 'vue'; import sheep from '@/sheep'; - import { fen2yuan, formatSales } from '@/sheep/hooks/useGoods'; - import { formatStock } from '@/sheep/hooks/useGoods'; + import { + fen2yuan, + formatSales + } from '@/sheep/hooks/useGoods'; + import { + formatStock + } from '@/sheep/hooks/useGoods'; import goodsCollectVue from '@/pages/user/goods-collect.vue'; - import { isArray } from 'lodash-es'; - + import { + isArray + } from 'lodash-es'; // 数据 const state = reactive({}); @@ -335,20 +299,32 @@ const props = defineProps({ goodsFields: { type: [Array, Object], - default() { + default () { return { // 商品价格 - price: { show: true }, + price: { + show: true + }, // 库存 - stock: { show: true }, + stock: { + show: true + }, // 商品名称 - name: { show: true }, + name: { + show: true + }, // 商品介绍 - introduction: { show: true }, + introduction: { + show: true + }, // 市场价 - marketPrice: { show: true }, + marketPrice: { + show: true + }, // 销量 - salesCount: { show: true }, + salesCount: { + show: true + }, }; }, }, @@ -417,7 +393,25 @@ default: false, }, }); + //判断限时优惠和会员价标签内容暂时导致页面出错,又舍不得丢,等着把新的数据整合到商品信息中,也用起来 + const iconShow = handle() + function handle() { + if (props.data.discountPrice === null && props.data.vipPrice === null) { + // 如果两个值都为 null,则不展示任何内容 + return ''; + } else if (props.data.discountPrice === null) { + // 如果 discountPrice 为 null,展示 vipPrice + return '会员价'; + } else if (props.data.vipPrice === null) { + // 如果 vipPrice 为 null,展示 discountPrice + return '限时优惠'; + } else if (props.data.discountPrice < props.data.vipPrice) { + return '限时优惠'; + } else if (props.data.discountPrice > props.data.vipPrice) { + return '会员价'; + } + } // 组件样式 const elStyles = computed(() => { return { @@ -449,12 +443,18 @@ }; // 获取卡片实时高度 - const { proxy } = getCurrentInstance(); + const { + proxy + } = getCurrentInstance(); const elId = `sheep_${Math.ceil(Math.random() * 10e5).toString(36)}`; + function getGoodsPriceCardWH() { if (props.size === 'md') { const view = uni.createSelectorQuery().in(proxy); - view.select(`#${elId}`).fields({ size: true, scrollOffset: true }); + view.select(`#${elId}`).fields({ + size: true, + scrollOffset: true + }); view.exec((data) => { let totalHeight = 0; const goodsPriceCard = data[0]; @@ -482,11 +482,13 @@ left: 0; top: 0; z-index: 2; + .tag-icon { width: 72rpx; height: 44rpx; } } + .seckill-tag { position: absolute; left: 0; @@ -501,6 +503,7 @@ color: #ffffff; line-height: 32rpx; } + .groupon-tag { position: absolute; left: 0; @@ -515,14 +518,17 @@ color: #ffffff; line-height: 32rpx; } + .goods-img { width: 100%; height: 100%; background-color: #f5f5f5; } + .price-unit { margin-right: -4px; } + .sales-text { display: table; font-size: 24rpx; @@ -586,10 +592,12 @@ width: 100%; height: 208rpx; } + .sm-goods-content { padding: 20rpx 16rpx; box-sizing: border-box; } + .sm-goods-title { font-size: 26rpx; color: #333; @@ -619,6 +627,7 @@ color: #333; width: 100%; } + .md-goods-subtitle { font-size: 24rpx; font-weight: 400; @@ -669,6 +678,7 @@ // line-height: 36rpx; // width: 410rpx; } + .lg-goods-subtitle { font-size: 24rpx; font-weight: 400; @@ -695,6 +705,7 @@ font-size: 24rpx; color: #ffffff; } + .tag-box { width: 100%; } @@ -708,10 +719,12 @@ z-index: 1; width: 100%; background-color: $white; + .sl-goods-content { padding: 20rpx 20rpx; box-sizing: border-box; } + .sl-img-box { width: 100%; height: 360rpx; @@ -722,6 +735,7 @@ color: #333; font-weight: 500; } + .sl-goods-subtitle { font-size: 24rpx; font-weight: 400; @@ -748,4 +762,31 @@ color: #ffffff; } } - + + .card { + width: fit-content; + height: fit-content; + padding: 2rpx 10rpx; + background-color: red; + color: #ffffff; + font-size: 24rpx; + } + + .card2 { + width: fit-content; + height: fit-content; + padding: 2rpx 10rpx; + background-color: rgb(255, 242, 241); + color: #ff2621; + font-size: 24rpx; + margin-left: 5rpx; + } + + .iconBox { + width: 100%; + height: fit-content; + margin-top: 10rpx; + display: flex; + justify-content: flex-start; + } + \ No newline at end of file diff --git a/sheep/components/s-select-sku/s-select-sku.vue b/sheep/components/s-select-sku/s-select-sku.vue index b339d4a1..08e0b287 100644 --- a/sheep/components/s-select-sku/s-select-sku.vue +++ b/sheep/components/s-select-sku/s-select-sku.vue @@ -1,34 +1,38 @@ \ No newline at end of file diff --git a/sheep/hooks/useGoods.js b/sheep/hooks/useGoods.js index 56274470..86caeb7c 100644 --- a/sheep/hooks/useGoods.js +++ b/sheep/hooks/useGoods.js @@ -1,7 +1,11 @@ -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'; /** * 格式化销量 @@ -80,7 +84,10 @@ export function formatGoodsSwiper(urlList) { const isVideo = VIDEO_SUFFIX_LIST.some(suffix => url.includes(suffix)); const type = isVideo ? 'video' : 'image' const src = $url.cdn(url); - return { type, src } + return { + type, + src + } }) || []; } @@ -94,9 +101,9 @@ export function formatOrderColor(order) { if (order.status === 0) { return 'info-color'; } - if (order.status === 10 - || order.status === 20 - || (order.status === 30 && !order.commentStatus)) { + if (order.status === 10 || + order.status === 20 || + (order.status === 30 && !order.commentStatus)) { return 'warning-color'; } if (order.status === 30 && order.commentStatus) { @@ -387,3 +394,92 @@ export function formatRewardActivityRule(activity, rule) { } return ''; } +// 新增将时间搓转换为开始时间-结束时间的格式 +export function formatDateRange(startTimestamp, endTimestamp) { + // 定义一个辅助函数来格式化时间戳为 YYYY.MM.DD 格式 + const formatDate = (timestamp) => { + const date = new Date(timestamp); + const year = date.getFullYear(); + const month = String(date.getMonth() + 1).padStart(2, '0'); // 月份从0开始,所以需要+1 + const day = String(date.getDate()).padStart(2, '0'); + return `${year}.${month}.${day}`; + }; + + // 格式化开始和结束时间 + const start = formatDate(startTimestamp); + const end = formatDate(endTimestamp); + + // 返回格式化的日期范围 + return `${start}-${end}`; +} + +//处理活动信息 +export function handList(orders) { + const typeMap = { + '1': '秒杀活动', + '2': '砍价活动', + '3': '拼团活动', + '4': '限时折扣', + '5': '满减送', + '6': '会员折扣', + '7': '优惠券', + '8': '积分' + }; + + // 给每个订单对象添加 typeName 属性 + let updatedOrders = orders.map(order => { + return { + ...order, // 展开现有的订单对象属性 + typeName: typeMap[order.type] // 添加 typeName 属性 + }; + }); + return updatedOrders +}; +//根据skuid来修改价格并添加时间 +export function handListPrice(array,array2) { + // 将 array2 转换为一个以 skuId 为键的对象,以便于快速查找 + const array2Map = array2.reduce((acc, item) => { + acc[item.skuId] = { price: item.price, type: item.type,endTime:item.endTime }; + return acc; + }, {}); + + // 遍历 array 数组并更新 price 和 type + array.forEach(item => { + if (array2Map[item.id]) { + item.oldPrice = item.price + // 如果在 array2Map 中找到了对应的 skuId(即 id) + item.price = array2Map[item.id].price; + item.type = array2Map[item.id].type; + item.endTime = array2Map[item.id].endTime; + } + }); + + // 返回更新后的 array + return array; +}; + +//处理活动数据 +export function handActitList(rules) { + const rules2 = { + reduc: rules.map(item => ({ + discountPrice: item.discountPrice, + limit: item.limit, + bull: true // 默认为 true + })), + cou: rules.map(item => ({ + discountPrice: item.discountPrice, + value: item.couponCounts.reduce((acc, count) => acc + count, 0), // 计算 couponCounts 中各项之和 + bull: item.givePoint // 对应 givePoint + })), + ship: rules.map(item => ({ + discountPrice: item.discountPrice, + bull: item.freeDelivery // 对应 freeDelivery + })), + scor: rules.map(item => ({ + discountPrice: item.discountPrice, + value: item.point, // 直接使用 point + bull: item.givePoint // 对应 givePoint + })) + }; + return rules2 +}; \ No newline at end of file diff --git a/static/images/dis.png b/static/images/dis.png new file mode 100644 index 00000000..5deb35c2 Binary files /dev/null and b/static/images/dis.png differ