From 3dad154ca0418aca5f4e331d2375297ab5e18b5a Mon Sep 17 00:00:00 2001 From: YunaiV Date: Sat, 21 Sep 2024 14:30:27 +0800 Subject: [PATCH] =?UTF-8?q?=E3=80=90=E5=8A=9F=E8=83=BD=E4=BC=98=E5=8C=96?= =?UTF-8?q?=E3=80=91=E5=95=86=E5=9F=8E=EF=BC=9A=E8=B0=83=E6=95=B4=E6=BB=A1?= =?UTF-8?q?=E5=87=8F=E9=80=81=E7=9A=84=E6=95=B0=E6=8D=AE=E8=BF=94=E5=9B=9E?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- pages/activity/index.vue | 2 +- pages/goods/index.vue | 1160 ++++++------ .../s-activity-pop/s-activity-pop.vue | 466 +++-- .../s-goods-column/s-goods-column.vue | 1548 +++++++++-------- sheep/hooks/useGoods.js | 626 ++++--- 5 files changed, 1987 insertions(+), 1815 deletions(-) diff --git a/pages/activity/index.vue b/pages/activity/index.vue index d414ebd8..95739155 100644 --- a/pages/activity/index.vue +++ b/pages/activity/index.vue @@ -7,7 +7,7 @@ 满减： - {{ item.description[1] }} + {{ item.description }} diff --git a/pages/goods/index.vue b/pages/goods/index.vue index c6031b1d..03298620 100644 --- a/pages/goods/index.vue +++ b/pages/goods/index.vue @@ -1,619 +1,669 @@ \ No newline at end of file + .disContB2 { + width: 300rpx; + height: 40rpx; + line-height: 40rpx; + display: flex; + justify-content: flex-end; + } + diff --git a/sheep/components/s-activity-pop/s-activity-pop.vue b/sheep/components/s-activity-pop/s-activity-pop.vue index 25cf3b94..44a028ac 100644 --- a/sheep/components/s-activity-pop/s-activity-pop.vue +++ b/sheep/components/s-activity-pop/s-activity-pop.vue @@ -1,259 +1,255 @@ \ No newline at end of file + .coupon2 { + width: 150rpx; + height: 50rpx; + line-height: 50rpx; + background-color: rgb(203, 192, 191); + color: white; + border-radius: 30rpx; + text-align: center; + font-size: 25rpx; + } + .nullBox { + width: 100%; + height: 300rpx; + font-size: 25rpx; + line-height: 300rpx; + text-align: center; + color: #999999; + } + diff --git a/sheep/components/s-goods-column/s-goods-column.vue b/sheep/components/s-goods-column/s-goods-column.vue index 6dce5b1a..41ba4425 100644 --- a/sheep/components/s-goods-column/s-goods-column.vue +++ b/sheep/components/s-goods-column/s-goods-column.vue @@ -1,809 +1,885 @@ \ No newline at end of file + .iconBox { + width: 100%; + height: fit-content; + margin-top: 10rpx; + display: flex; + justify-content: flex-start; + flex-wrap: wrap; + } + diff --git a/sheep/hooks/useGoods.js b/sheep/hooks/useGoods.js index a8bf1b26..9bab54b5 100644 --- a/sheep/hooks/useGoods.js +++ b/sheep/hooks/useGoods.js @@ -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'; /** * 格式化销量 @@ -14,8 +10,8 @@ import { * @return {string} 格式化后的销量字符串 */ export function formatSales(type, num) { - let prefix = type !== 'exact' && num < 10 ? '销量' : '已售'; - return formatNum(prefix, type, num); + let prefix = type !== 'exact' && num < 10 ? '销量' : '已售'; + return formatNum(prefix, type, num); } /** @@ -25,7 +21,7 @@ export function formatSales(type, num) { * @return {string} 格式化后的销量字符串 */ export function formatExchange(type, num) { - return formatNum('已兑换', type, num); + return formatNum('已兑换', type, num); } /** @@ -35,7 +31,7 @@ export function formatExchange(type, num) { * @return {string} 格式化后的销量字符串 */ export function formatStock(type, num) { - return formatNum('库存', type, num); + return formatNum('库存', type, num); } /** @@ -46,27 +42,27 @@ export function formatStock(type, num) { * @return {string} 格式化后的销量字符串 */ export function formatNum(prefix, type, num) { - num = num || 0; - // 情况一：精确数值 - if (type === 'exact') { - return prefix + num; - } - // 情况二：小于等于 10 - if (num < 10) { - return `${prefix}≤10`; - } - // 情况三：大于 10，除第一位外，其它位都显示为0 - // 例如：100 - 199 显示为 100+ - // 9000 - 9999 显示为 9000+ - const numStr = num.toString(); - const first = numStr[0]; - const other = '0'.repeat(numStr.length - 1); - return `${prefix}${first}${other}+`; + num = num || 0; + // 情况一：精确数值 + if (type === 'exact') { + return prefix + num; + } + // 情况二：小于等于 10 + if (num < 10) { + return `${prefix}≤10`; + } + // 情况三：大于 10，除第一位外，其它位都显示为0 + // 例如：100 - 199 显示为 100+ + // 9000 - 9999 显示为 9000+ + const numStr = num.toString(); + const first = numStr[0]; + const other = '0'.repeat(numStr.length - 1); + return `${prefix}${first}${other}+`; } // 格式化价格 export function formatPrice(e) { - return e.length === 1 ? e[0] : e.join('~'); + return e.length === 1 ? e[0] : e.join('~'); } // 视频格式后缀列表 @@ -79,19 +75,19 @@ const VIDEO_SUFFIX_LIST = ['.avi', '.mp4']; * @return {{src: string, type: 'video' | 'image' }[]} 转换后的链接列表 */ export function formatGoodsSwiper(urlList) { - return ( - urlList - ?.filter((url) => url) - .map((url, key) => { - const isVideo = VIDEO_SUFFIX_LIST.some((suffix) => url.includes(suffix)); - const type = isVideo ? 'video' : 'image'; - const src = $url.cdn(url); - return { - type, - src, - }; - }) || [] - ); + return ( + urlList + ?.filter((url) => url) + .map((url, key) => { + const isVideo = VIDEO_SUFFIX_LIST.some((suffix) => url.includes(suffix)); + const type = isVideo ? 'video' : 'image'; + const src = $url.cdn(url); + return { + type, + src, + }; + }) || [] + ); } /** @@ -101,16 +97,16 @@ export function formatGoodsSwiper(urlList) { * @return {string} 颜色的 class 名称 */ export function formatOrderColor(order) { - if (order.status === 0) { - return 'info-color'; - } - if (order.status === 10 || order.status === 20 || (order.status === 30 && !order.commentStatus)) { - return 'warning-color'; - } - if (order.status === 30 && order.commentStatus) { - return 'success-color'; - } - return 'danger-color'; + if (order.status === 0) { + return 'info-color'; + } + if (order.status === 10 || order.status === 20 || (order.status === 30 && !order.commentStatus)) { + return 'warning-color'; + } + if (order.status === 30 && order.commentStatus) { + return 'success-color'; + } + return 'danger-color'; } /** @@ -119,25 +115,25 @@ export function formatOrderColor(order) { * @param order 订单 */ export function formatOrderStatus(order) { - if (order.status === 0) { - return '待付款'; - } - if (order.status === 10 && order.deliveryType === 1) { - return '待发货'; - } - if (order.status === 10 && order.deliveryType === 2) { - return '待核销'; - } - if (order.status === 20) { - return '待收货'; - } - if (order.status === 30 && !order.commentStatus) { - return '待评价'; - } - if (order.status === 30 && order.commentStatus) { - return '已完成'; - } - return '已关闭'; + if (order.status === 0) { + return '待付款'; + } + if (order.status === 10 && order.deliveryType === 1) { + return '待发货'; + } + if (order.status === 10 && order.deliveryType === 2) { + return '待核销'; + } + if (order.status === 20) { + return '待收货'; + } + if (order.status === 30 && !order.commentStatus) { + return '待评价'; + } + if (order.status === 30 && order.commentStatus) { + return '已完成'; + } + return '已关闭'; } /** @@ -146,22 +142,22 @@ export function formatOrderStatus(order) { * @param order 订单 */ export function formatOrderStatusDescription(order) { - if (order.status === 0) { - return `请在 ${formatDate(order.payExpireTime)} 前完成支付`; - } - if (order.status === 10) { - return '商家未发货，请耐心等待'; - } - if (order.status === 20) { - return '商家已发货，请耐心等待'; - } - if (order.status === 30 && !order.commentStatus) { - return '已收货，快去评价一下吧'; - } - if (order.status === 30 && order.commentStatus) { - return '交易完成，感谢您的支持'; - } - return '交易关闭'; + if (order.status === 0) { + return `请在 ${formatDate(order.payExpireTime)} 前完成支付`; + } + if (order.status === 10) { + return '商家未发货，请耐心等待'; + } + if (order.status === 20) { + return '商家已发货，请耐心等待'; + } + if (order.status === 30 && !order.commentStatus) { + return '已收货，快去评价一下吧'; + } + if (order.status === 30 && order.commentStatus) { + return '交易完成，感谢您的支持'; + } + return '交易关闭'; } /** @@ -170,32 +166,32 @@ export function formatOrderStatusDescription(order) { * @param order 订单 */ export function handleOrderButtons(order) { - order.buttons = []; - if (order.type === 3) { - // 查看拼团 - order.buttons.push('combination'); - } - if (order.status === 20) { - // 确认收货 - order.buttons.push('confirm'); - } - if (order.logisticsId > 0) { - // 查看物流 - order.buttons.push('express'); - } - if (order.status === 0) { - // 取消订单 / 发起支付 - order.buttons.push('cancel'); - order.buttons.push('pay'); - } - if (order.status === 30 && !order.commentStatus) { - // 发起评价 - order.buttons.push('comment'); - } - if (order.status === 40) { - // 删除订单 - order.buttons.push('delete'); - } + order.buttons = []; + if (order.type === 3) { + // 查看拼团 + order.buttons.push('combination'); + } + if (order.status === 20) { + // 确认收货 + order.buttons.push('confirm'); + } + if (order.logisticsId > 0) { + // 查看物流 + order.buttons.push('express'); + } + if (order.status === 0) { + // 取消订单 / 发起支付 + order.buttons.push('cancel'); + order.buttons.push('pay'); + } + if (order.status === 30 && !order.commentStatus) { + // 发起评价 + order.buttons.push('comment'); + } + if (order.status === 40) { + // 删除订单 + order.buttons.push('delete'); + } } /** @@ -204,31 +200,31 @@ export function handleOrderButtons(order) { * @param afterSale 售后 */ export function formatAfterSaleStatus(afterSale) { - if (afterSale.status === 10) { - return '申请售后'; - } - if (afterSale.status === 20) { - return '商品待退货'; - } - if (afterSale.status === 30) { - return '商家待收货'; - } - if (afterSale.status === 40) { - return '等待退款'; - } - if (afterSale.status === 50) { - return '退款成功'; - } - if (afterSale.status === 61) { - return '买家取消'; - } - if (afterSale.status === 62) { - return '商家拒绝'; - } - if (afterSale.status === 63) { - return '商家拒收货'; - } - return '未知状态'; + if (afterSale.status === 10) { + return '申请售后'; + } + if (afterSale.status === 20) { + return '商品待退货'; + } + if (afterSale.status === 30) { + return '商家待收货'; + } + if (afterSale.status === 40) { + return '等待退款'; + } + if (afterSale.status === 50) { + return '退款成功'; + } + if (afterSale.status === 61) { + return '买家取消'; + } + if (afterSale.status === 62) { + return '商家拒绝'; + } + if (afterSale.status === 63) { + return '商家拒收货'; + } + return '未知状态'; } /** @@ -237,31 +233,31 @@ export function formatAfterSaleStatus(afterSale) { * @param afterSale 售后 */ export function formatAfterSaleStatusDescription(afterSale) { - if (afterSale.status === 10) { - return '退款申请待商家处理'; - } - if (afterSale.status === 20) { - return '请退货并填写物流信息'; - } - if (afterSale.status === 30) { - return '退货退款申请待商家处理'; - } - if (afterSale.status === 40) { - return '等待退款'; - } - if (afterSale.status === 50) { - return '退款成功'; - } - if (afterSale.status === 61) { - return '退款关闭'; - } - if (afterSale.status === 62) { - return `商家不同意退款申请，拒绝原因：${afterSale.auditReason}`; - } - if (afterSale.status === 63) { - return `商家拒绝收货，不同意退款，拒绝原因：${afterSale.auditReason}`; - } - return '未知状态'; + if (afterSale.status === 10) { + return '退款申请待商家处理'; + } + if (afterSale.status === 20) { + return '请退货并填写物流信息'; + } + if (afterSale.status === 30) { + return '退货退款申请待商家处理'; + } + if (afterSale.status === 40) { + return '等待退款'; + } + if (afterSale.status === 50) { + return '退款成功'; + } + if (afterSale.status === 61) { + return '退款关闭'; + } + if (afterSale.status === 62) { + return `商家不同意退款申请，拒绝原因：${afterSale.auditReason}`; + } + if (afterSale.status === 63) { + return `商家拒绝收货，不同意退款，拒绝原因：${afterSale.auditReason}`; + } + return '未知状态'; } /** @@ -270,15 +266,15 @@ export function formatAfterSaleStatusDescription(afterSale) { * @param afterSale 售后 */ export function handleAfterSaleButtons(afterSale) { - afterSale.buttons = []; - if ([10, 20, 30].includes(afterSale.status)) { - // 取消订单 - afterSale.buttons.push('cancel'); - } - if (afterSale.status === 20) { - // 退货信息 - afterSale.buttons.push('delivery'); - } + afterSale.buttons = []; + if ([10, 20, 30].includes(afterSale.status)) { + // 取消订单 + afterSale.buttons.push('cancel'); + } + if (afterSale.status === 20) { + // 退货信息 + afterSale.buttons.push('delivery'); + } } /** @@ -288,28 +284,28 @@ export function handleAfterSaleButtons(afterSale) { * @return {{s: string, ms: number, h: string, m: string}} 持续时间 */ export function useDurationTime(toTime, fromTime = '') { - toTime = getDayjsTime(toTime); - if (fromTime === '') { - fromTime = dayjs(); - } - let duration = ref(toTime - fromTime); - if (duration.value > 0) { - setTimeout(() => { - if (duration.value > 0) { - duration.value -= 1000; - } - }, 1000); - } + toTime = getDayjsTime(toTime); + if (fromTime === '') { + fromTime = dayjs(); + } + let duration = ref(toTime - fromTime); + if (duration.value > 0) { + setTimeout(() => { + if (duration.value > 0) { + duration.value -= 1000; + } + }, 1000); + } - let durationTime = dayjs.duration(duration.value); - return { - h: (durationTime.months() * 30 * 24 + durationTime.days() * 24 + durationTime.hours()) - .toString() - .padStart(2, '0'), - m: durationTime.minutes().toString().padStart(2, '0'), - s: durationTime.seconds().toString().padStart(2, '0'), - ms: durationTime.$ms, - }; + let durationTime = dayjs.duration(duration.value); + return { + h: (durationTime.months() * 30 * 24 + durationTime.days() * 24 + durationTime.hours()) + .toString() + .padStart(2, '0'), + m: durationTime.minutes().toString().padStart(2, '0'), + s: durationTime.seconds().toString().padStart(2, '0'), + ms: durationTime.$ms, + }; } /** @@ -318,19 +314,19 @@ export function useDurationTime(toTime, fromTime = '') { * @return {dayjs.Dayjs} */ function getDayjsTime(time) { - time = time.toString(); - if (time.indexOf('-') > 0) { - // 'date' - return dayjs(time); - } - if (time.length > 10) { - // 'timestamp' - return dayjs(parseInt(time)); - } - if (time.length === 10) { - // 'unixTime' - return dayjs.unix(parseInt(time)); - } + time = time.toString(); + if (time.indexOf('-') > 0) { + // 'date' + return dayjs(time); + } + if (time.length > 10) { + // 'timestamp' + return dayjs(parseInt(time)); + } + if (time.length === 10) { + // 'unixTime' + return dayjs.unix(parseInt(time)); + } } /** @@ -340,7 +336,28 @@ function getDayjsTime(time) { * @returns {string} 元，例如说 1.00 元 */ export function fen2yuan(price) { - return (price / 100.0).toFixed(2); + 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+$/, ''); } /** @@ -358,92 +375,125 @@ export function fen2yuan(price) { * @param skus 商品 SKU 数组 */ export function convertProductPropertyList(skus) { - let result = []; - for (const sku of skus) { - if (!sku.properties) { - continue; - } - for (const property of sku.properties) { - // ① 先处理属性 - let resultProperty = result.find((item) => item.id === property.propertyId); - if (!resultProperty) { - resultProperty = { - id: property.propertyId, - name: property.propertyName, - values: [], - }; - result.push(resultProperty); - } - // ② 再处理属性值 - let resultValue = resultProperty.values.find((item) => item.id === property.valueId); - if (!resultValue) { - resultProperty.values.push({ - id: property.valueId, - name: property.valueName, - }); - } - } - } - return result; + let result = []; + for (const sku of skus) { + if (!sku.properties) { + continue; + } + for (const property of sku.properties) { + // ① 先处理属性 + let resultProperty = result.find((item) => item.id === property.propertyId); + if (!resultProperty) { + resultProperty = { + id: property.propertyId, + name: property.propertyName, + values: [], + }; + result.push(resultProperty); + } + // ② 再处理属性值 + let resultValue = resultProperty.values.find((item) => item.id === property.valueId); + if (!resultValue) { + resultProperty.values.push({ + id: property.valueId, + name: property.valueName, + }); + } + } + } + return result; } export function appendSettlementProduct(spus, settlementInfos) { - if (!settlementInfos || settlementInfos.length === 0) { - return; - } - for (const spu of spus) { - const settlementInfo = settlementInfos.find((info) => info.spuId === spu.id); - if (!settlementInfo) { - return; - } - // 选择价格最小的 SKU 设置到 SPU 上 - const settlementSku = settlementInfo.skus - .filter((sku) => sku.promotionPrice > 0) - .reduce((prev, curr) => (prev.promotionPrice < curr.promotionPrice ? prev : curr)); - if (settlementSku) { - spu.promotionType = settlementSku.promotionType; - spu.promotionPrice = settlementSku.promotionPrice; - } - // 设置【满减送】活动 - if (settlementInfo.rewardActivity) { - spu.rewardActivity = settlementInfo.rewardActivity; - } - } + if (!settlementInfos || settlementInfos.length === 0) { + return; + } + for (const spu of spus) { + const settlementInfo = settlementInfos.find((info) => info.spuId === spu.id); + if (!settlementInfo) { + return; + } + // 选择价格最小的 SKU 设置到 SPU 上 + const settlementSku = settlementInfo.skus + .filter((sku) => sku.promotionPrice > 0) + .reduce((prev, curr) => (prev.promotionPrice < curr.promotionPrice ? prev : curr)); + if (settlementSku) { + spu.promotionType = settlementSku.promotionType; + spu.promotionPrice = settlementSku.promotionPrice; + } + // 设置【满减送】活动 + if (settlementInfo.rewardActivity) { + spu.rewardActivity = settlementInfo.rewardActivity; + } + } } -//处理促销信息 -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; - } - }); - }); - return array2 -} \ No newline at end of file +// 获得满减送活动的规则描述（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 result; +}