【功能完善】商品详情,增加满减送提示
This commit is contained in:
@@ -0,0 +1,196 @@
|
||||
<!-- TODO 霖:是不是怎么复用 s-count-down 组件 -->
|
||||
<template>
|
||||
<view class="time" :style="justifyLeft">
|
||||
<text class="" v-if="tipText">{{ tipText }}</text>
|
||||
<text
|
||||
class="styleAll p6"
|
||||
v-if="isDay === true"
|
||||
:style="{ background: bgColor.bgColor, color: bgColor.Color }"
|
||||
>{{ day }}{{ bgColor.isDay ? '天' : '' }}</text
|
||||
>
|
||||
<text
|
||||
class="timeTxt"
|
||||
v-if="dayText"
|
||||
:style="{ width: bgColor.timeTxtwidth, color: bgColor.bgColor }"
|
||||
>{{ dayText }}</text
|
||||
>
|
||||
<text
|
||||
class="styleAll"
|
||||
:class="isCol ? 'timeCol' : ''"
|
||||
:style="{ background: bgColor.bgColor, color: bgColor.Color, width: bgColor.width }"
|
||||
>{{ hour }}</text
|
||||
>
|
||||
<text
|
||||
class="timeTxt"
|
||||
v-if="hourText"
|
||||
:class="isCol ? 'whit' : ''"
|
||||
:style="{ width: bgColor.timeTxtwidth, color: bgColor.bgColor }"
|
||||
>{{ hourText }}</text
|
||||
>
|
||||
<text
|
||||
class="styleAll"
|
||||
:class="isCol ? 'timeCol' : ''"
|
||||
:style="{ background: bgColor.bgColor, color: bgColor.Color, width: bgColor.width }"
|
||||
>{{ minute }}</text
|
||||
>
|
||||
<text
|
||||
class="timeTxt"
|
||||
v-if="minuteText"
|
||||
:class="isCol ? 'whit' : ''"
|
||||
:style="{ width: bgColor.timeTxtwidth, color: bgColor.bgColor }"
|
||||
>{{ minuteText }}</text
|
||||
>
|
||||
<text
|
||||
class="styleAll"
|
||||
:class="isCol ? 'timeCol' : ''"
|
||||
:style="{ background: bgColor.bgColor, color: bgColor.Color, width: bgColor.width }"
|
||||
>{{ second }}</text
|
||||
>
|
||||
<text class="timeTxt" v-if="secondText">{{ secondText }}</text>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
name: 'countDown',
|
||||
props: {
|
||||
justifyLeft: {
|
||||
type: String,
|
||||
default: '',
|
||||
},
|
||||
//距离开始提示文字
|
||||
tipText: {
|
||||
type: String,
|
||||
default: '倒计时',
|
||||
},
|
||||
dayText: {
|
||||
type: String,
|
||||
default: '天',
|
||||
},
|
||||
hourText: {
|
||||
type: String,
|
||||
default: '时',
|
||||
},
|
||||
minuteText: {
|
||||
type: String,
|
||||
default: '分',
|
||||
},
|
||||
secondText: {
|
||||
type: String,
|
||||
default: '秒',
|
||||
},
|
||||
datatime: {
|
||||
type: Number,
|
||||
default: 0,
|
||||
},
|
||||
isDay: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
isCol: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
bgColor: {
|
||||
type: Object,
|
||||
default: null,
|
||||
},
|
||||
},
|
||||
data: function () {
|
||||
return {
|
||||
day: '00',
|
||||
hour: '00',
|
||||
minute: '00',
|
||||
second: '00',
|
||||
};
|
||||
},
|
||||
created: function () {
|
||||
this.show_time();
|
||||
},
|
||||
mounted: function () {},
|
||||
methods: {
|
||||
show_time: function () {
|
||||
let that = this;
|
||||
|
||||
function runTime() {
|
||||
//时间函数
|
||||
let intDiff = that.datatime - Date.parse(new Date()) / 1000; //获取数据中的时间戳的时间差;
|
||||
let day = 0,
|
||||
hour = 0,
|
||||
minute = 0,
|
||||
second = 0;
|
||||
if (intDiff > 0) {
|
||||
//转换时间
|
||||
if (that.isDay === true) {
|
||||
day = Math.floor(intDiff / (60 * 60 * 24));
|
||||
} else {
|
||||
day = 0;
|
||||
}
|
||||
hour = Math.floor(intDiff / (60 * 60)) - day * 24;
|
||||
minute = Math.floor(intDiff / 60) - day * 24 * 60 - hour * 60;
|
||||
second = Math.floor(intDiff) - day * 24 * 60 * 60 - hour * 60 * 60 - minute * 60;
|
||||
if (hour <= 9) hour = '0' + hour;
|
||||
if (minute <= 9) minute = '0' + minute;
|
||||
if (second <= 9) second = '0' + second;
|
||||
that.day = day;
|
||||
that.hour = hour;
|
||||
that.minute = minute;
|
||||
that.second = second;
|
||||
} else {
|
||||
that.day = '00';
|
||||
that.hour = '00';
|
||||
that.minute = '00';
|
||||
that.second = '00';
|
||||
}
|
||||
}
|
||||
runTime();
|
||||
setInterval(runTime, 1000);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.p6 {
|
||||
padding: 0 8rpx;
|
||||
}
|
||||
.styleAll {
|
||||
/* color: #fff; */
|
||||
font-size: 24rpx;
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
border-radius: 6rpx;
|
||||
text-align: center;
|
||||
/* padding: 0 6rpx; */
|
||||
}
|
||||
.timeTxt {
|
||||
text-align: center;
|
||||
/* width: 16rpx; */
|
||||
height: 36rpx;
|
||||
line-height: 36rpx;
|
||||
display: inline-block;
|
||||
}
|
||||
.whit {
|
||||
color: #fff !important;
|
||||
}
|
||||
.time {
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.red {
|
||||
color: #fc4141;
|
||||
margin: 0 4rpx;
|
||||
}
|
||||
|
||||
.timeCol {
|
||||
/* width: 40rpx;
|
||||
height: 40rpx;
|
||||
line-height: 40rpx;
|
||||
text-align:center;
|
||||
border-radius: 6px;
|
||||
background: #fff;
|
||||
font-size: 24rpx; */
|
||||
color: #e93323;
|
||||
}
|
||||
</style>
|
||||
@@ -3,66 +3,32 @@
|
||||
<su-popup :show="show" type="bottom" round="20" @close="emits('close')" showClose>
|
||||
<view class="model-box">
|
||||
<view class="title ss-m-t-16 ss-m-l-20 ss-flex">优惠</view>
|
||||
<view v-if="state.activityMap[state.activityInfo[0]?.id]?.reduc">
|
||||
<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">
|
||||
<view class="boxCont ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(state.activityInfo[0])">
|
||||
<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.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="contBu">
|
||||
<text v-for="(item,index) in state.activityMap[state.activityInfo[0]?.id]?.reduc"
|
||||
:key="index">满{{fen2yuan(item.discountPrice)}}元减{{fen2yuan(item.limit)}}元;</text>
|
||||
<text>{{ item }}</text>
|
||||
</view>
|
||||
<view class="ss-m-b-24 cotBu-txt">
|
||||
{{formatDateRange(state.activityInfo[0]?.startTime,state.activityInfo[0]?.endTime)}}
|
||||
</view>
|
||||
</view>
|
||||
<text class="cicon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="actBox">
|
||||
<view class="boxCont ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(state.activityInfo[0])">
|
||||
<view class="model-content-tag ss-flex ss-row-center">包邮</view>
|
||||
<view class="model-content-title">
|
||||
<view class="contBu">
|
||||
<text v-for="(item,index) in state.activityMap[state.activityInfo[0]?.id]?.ship"
|
||||
:key="index" v-show="item.bull">满{{fen2yuan(item.discountPrice)}}元包邮;</text>
|
||||
</view>
|
||||
<view class="ss-m-b-24 cotBu-txt">
|
||||
{{formatDateRange(state.activityInfo[0]?.startTime,state.activityInfo[0]?.endTime)}}
|
||||
</view>
|
||||
</view>
|
||||
<text class="cicon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="actBox">
|
||||
<view class="boxCont ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(state.activityInfo[0])">
|
||||
<view class="model-content-tag ss-flex ss-row-center">送积分</view>
|
||||
<view class="model-content-title">
|
||||
<view class="contBu">
|
||||
<text v-for="(item,index) in state.activityMap[state.activityInfo[0]?.id]?.scor"
|
||||
:key="index"
|
||||
v-show="item.bull">满{{fen2yuan(item.discountPrice)}}元送{{item.value}}积分;</text>
|
||||
</view>
|
||||
<view class="ss-m-b-24 cotBu-txt">
|
||||
{{formatDateRange(state.activityInfo[0]?.startTime,state.activityInfo[0]?.endTime)}}
|
||||
</view>
|
||||
</view>
|
||||
<text class="cicon-forward" />
|
||||
</view>
|
||||
</view>
|
||||
<view class="actBox">
|
||||
<view class="boxCont ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(state.activityInfo[0])">
|
||||
<view class="model-content-tag ss-flex ss-row-center">送优惠券</view>
|
||||
<view class="model-content-title">
|
||||
<view class="contBu">
|
||||
<text v-for="(item,index) in state.activityMap[state.activityInfo[0]?.id]?.cou"
|
||||
:key="index"
|
||||
v-show="item.bull">满{{fen2yuan(item.discountPrice)}}元送{{item.value}}张优惠券;</text>
|
||||
</view>
|
||||
<view class="ss-m-b-24 cotBu-txt">
|
||||
{{formatDateRange(state.activityInfo[0]?.startTime,state.activityInfo[0]?.endTime)}}
|
||||
{{ sheep.$helper.timeFormat(state.rewardActivity.startTime, 'yyyy.mm.dd') }}
|
||||
-
|
||||
{{ sheep.$helper.timeFormat(state.rewardActivity.endTime, 'yyyy.mm.dd') }}
|
||||
</view>
|
||||
</view>
|
||||
<text class="cicon-forward" />
|
||||
@@ -71,31 +37,33 @@
|
||||
</scroll-view>
|
||||
</view>
|
||||
<view class="titleLi">可领优惠券</view>
|
||||
<scroll-view class="model-content" scroll-y :scroll-with-animation="false" :enable-back-to-top="true">
|
||||
<scroll-view
|
||||
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="boxCont ss-flex ss-col-top ss-m-b-40">
|
||||
<view class="model-content-tag2">
|
||||
<view class="usePrice">
|
||||
¥{{fen2yuan(item.discountPrice)}}
|
||||
</view>
|
||||
<view class="impose">
|
||||
满¥{{fen2yuan(item.usePrice)}}可用
|
||||
</view>
|
||||
<view class="usePrice"> ¥{{ fen2yuan(item.discountPrice) }} </view>
|
||||
<view class="impose"> 满¥{{ fen2yuan(item.usePrice) }}可用 </view>
|
||||
</view>
|
||||
<view class="model-content-title2">
|
||||
<view class="contBu">
|
||||
{{item.name}}
|
||||
{{ item.name }}
|
||||
</view>
|
||||
<view class="ss-m-b-24 cotBu-txt">
|
||||
{{item.validityType==1?formatDateRange(item.validStartTime,item.validEndTime) : '领取后'+item.fixedStartTerm+'-'+item.fixedEndTerm +'天可用'}}
|
||||
{{
|
||||
item.validityType == 1
|
||||
? sheep.$helper.timeFormat(item.validStartTime, 'yyyy.mm.dd') -
|
||||
sheep.$helper.timeFormat(item.validEndTime, 'yyyy.mm.dd')
|
||||
: '领取后' + item.fixedStartTerm + '-' + item.fixedEndTerm + '天可用'
|
||||
}}
|
||||
</view>
|
||||
</view>
|
||||
<view class="coupon" @click.stop="getBuy(item.id)" v-if="item.canTake">
|
||||
立即领取
|
||||
</view>
|
||||
<view class="coupon2" v-else>
|
||||
已领取
|
||||
</view>
|
||||
<view class="coupon" @click.stop="getBuy(item.id)" v-if="item.canTake"> 立即领取 </view>
|
||||
<view class="coupon2" v-else> 已领取 </view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
@@ -104,21 +72,12 @@
|
||||
</template>
|
||||
<script setup>
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
watch
|
||||
} from 'vue';
|
||||
import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
|
||||
import {
|
||||
fen2yuan,
|
||||
formatDateRange,
|
||||
handActitList
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import { computed, reactive } from 'vue';
|
||||
import { fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
const props = defineProps({
|
||||
modelValue: {
|
||||
type: Object,
|
||||
default () {},
|
||||
default() {},
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
@@ -127,26 +86,10 @@
|
||||
});
|
||||
const emits = defineEmits(['close']);
|
||||
const state = reactive({
|
||||
activityInfo: computed(() => props.modelValue.activityInfo),
|
||||
activityMap: {},
|
||||
couponInfo: computed(() => props.modelValue.couponInfo)
|
||||
rewardActivity: computed(() => props.modelValue.rewardActivity),
|
||||
couponInfo: computed(() => props.modelValue.couponInfo),
|
||||
});
|
||||
watch(
|
||||
() => props.show,
|
||||
() => {
|
||||
// 展示的情况下,加载每个活动的详细信息
|
||||
if (props.show) {
|
||||
state.activityInfo?.forEach(activity => {
|
||||
RewardActivityApi.getRewardActivity(activity.id).then(res => {
|
||||
if (res.code !== 0) {
|
||||
return;
|
||||
}
|
||||
state.activityMap[activity.id] = handActitList(res.data.rules);
|
||||
})
|
||||
});
|
||||
}
|
||||
},
|
||||
);
|
||||
|
||||
// 领取优惠劵
|
||||
const getBuy = (id) => {
|
||||
emits('get', id);
|
||||
@@ -298,4 +241,4 @@
|
||||
text-align: center;
|
||||
font-size: 25rpx;
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
@@ -482,7 +482,6 @@
|
||||
const iconShow = handle();
|
||||
|
||||
function handle() {
|
||||
debugger;
|
||||
if (props.data.discountPrice === null && props.data.vipPrice === null) {
|
||||
// 如果两个值都为 null,则不展示任何内容
|
||||
return '';
|
||||
|
||||
@@ -5,18 +5,33 @@
|
||||
<view class="ss-modal-box bg-white ss-flex-col">
|
||||
<view class="modal-header ss-flex ss-col-center">
|
||||
<view class="header-left ss-m-r-30">
|
||||
<image class="sku-image" :src="state.selectedSku.picUrl || goodsInfo.picUrl" mode="aspectFill" />
|
||||
<image
|
||||
class="sku-image"
|
||||
:src="state.selectedSku.picUrl || goodsInfo.picUrl"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
</view>
|
||||
<view class="header-right ss-flex-col ss-row-between ss-flex-1">
|
||||
<view class="goods-title ss-line-2">{{ goodsInfo.name }}</view>
|
||||
<view class="header-right-bottom ss-flex ss-col-center ss-row-between">
|
||||
<view class="ss-flex">
|
||||
<view class="price-text">
|
||||
{{ fen2yuan( state.selectedSku.price || goodsInfo.price) }}
|
||||
<text v-if="state.selectedSku.type == 6"><text class="iconBox">会员价</text><text
|
||||
class="origin-price-text">{{fen2yuan(state.selectedSku.oldPrice)}}</text></text>
|
||||
<text v-if="state.selectedSku.type == 4"><text class="iconBox">限时优惠</text><text
|
||||
class="origin-price-text">{{fen2yuan(state.selectedSku.oldPrice)}}</text></text>
|
||||
{{
|
||||
fen2yuan(
|
||||
state.selectedSku.promotionPrice || state.selectedSku.price || goodsInfo.price,
|
||||
)
|
||||
}}
|
||||
<text v-if="state.selectedSku.promotionType > 0">
|
||||
<text class="iconBox" v-if="state.selectedSku.promotionType === 4">
|
||||
限时优惠
|
||||
</text>
|
||||
<text class="iconBox" v-else-if="state.selectedSku.promotionType === 6">
|
||||
会员价
|
||||
</text>
|
||||
<text class="origin-price-text">
|
||||
{{ fen2yuan(state.selectedSku.price) }}
|
||||
</text>
|
||||
</text>
|
||||
</view>
|
||||
</view>
|
||||
<view class="stock-text ss-m-l-20">
|
||||
@@ -32,22 +47,34 @@
|
||||
<view class="sku-item ss-m-b-20" v-for="property in propertyList" :key="property.id">
|
||||
<view class="label-text ss-m-b-20">{{ property.name }}</view>
|
||||
<view class="ss-flex ss-col-center ss-flex-wrap">
|
||||
<button class="ss-reset-button spec-btn" v-for="value in property.values" :class="[
|
||||
<button
|
||||
class="ss-reset-button spec-btn"
|
||||
v-for="value in property.values"
|
||||
:class="[
|
||||
{
|
||||
'ui-BG-Main-Gradient': state.currentPropertyArray[property.id] === value.id,
|
||||
},
|
||||
{
|
||||
'disabled-btn': value.disabled === true,
|
||||
},
|
||||
]" :key="value.id" :disabled="value.disabled === true" @tap="onSelectSku(property.id, value.id)">
|
||||
]"
|
||||
:key="value.id"
|
||||
:disabled="value.disabled === true"
|
||||
@tap="onSelectSku(property.id, value.id)"
|
||||
>
|
||||
{{ value.name }}
|
||||
</button>
|
||||
</view>
|
||||
</view>
|
||||
<view class="buy-num-box ss-flex ss-col-center ss-row-between ss-m-b-40">
|
||||
<view class="label-text">购买数量</view>
|
||||
<su-number-box :min="1" :max="state.selectedSku.stock" :step="1"
|
||||
v-model="state.selectedSku.goods_num" @change="onNumberChange($event)" />
|
||||
<su-number-box
|
||||
:min="1"
|
||||
:max="state.selectedSku.stock"
|
||||
:step="1"
|
||||
v-model="state.selectedSku.goods_num"
|
||||
@change="onNumberChange($event)"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
@@ -55,7 +82,9 @@
|
||||
<!-- 操作区 -->
|
||||
<view class="modal-footer border-top">
|
||||
<view class="buy-box ss-flex ss-col-center ss-flex ss-col-center ss-row-center">
|
||||
<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart">加入购物车</button>
|
||||
<button class="ss-reset-button add-btn ui-Shadow-Main" @tap="onAddCart"
|
||||
>加入购物车</button
|
||||
>
|
||||
<button class="ss-reset-button buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
|
||||
</view>
|
||||
</view>
|
||||
@@ -64,28 +93,20 @@
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import {
|
||||
computed,
|
||||
reactive,
|
||||
watch
|
||||
} from 'vue';
|
||||
import { computed, reactive, watch } from 'vue';
|
||||
import sheep from '@/sheep';
|
||||
import {
|
||||
formatStock,
|
||||
convertProductPropertyList,
|
||||
fen2yuan
|
||||
} from '@/sheep/hooks/useGoods';
|
||||
import { formatStock, convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';
|
||||
|
||||
const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
|
||||
const props = defineProps({
|
||||
goodsInfo: {
|
||||
type: Object,
|
||||
default () {},
|
||||
default() {},
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
}
|
||||
},
|
||||
});
|
||||
|
||||
const state = reactive({
|
||||
@@ -98,7 +119,7 @@
|
||||
const skuList = computed(() => {
|
||||
let skuPrices = props.goodsInfo.skus;
|
||||
for (let price of skuPrices) {
|
||||
price.value_id_array = price.properties.map((item) => item.valueId)
|
||||
price.value_id_array = price.properties.map((item) => item.valueId);
|
||||
}
|
||||
return skuPrices;
|
||||
});
|
||||
@@ -107,7 +128,8 @@
|
||||
() => state.selectedSku,
|
||||
(newVal) => {
|
||||
emits('change', newVal);
|
||||
}, {
|
||||
},
|
||||
{
|
||||
immediate: true, // 立即执行
|
||||
deep: true, // 深度监听
|
||||
},
|
||||
@@ -216,8 +238,7 @@
|
||||
// 如果当前 property id 不存在于有库存的 SKU 中,则禁用
|
||||
for (let valueIndex in propertyList[propertyIndex]['values']) {
|
||||
propertyList[propertyIndex]['values'][valueIndex]['disabled'] =
|
||||
noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) <
|
||||
0; // true 禁用 or false 不禁用
|
||||
noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) < 0; // true 禁用 or false 不禁用
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -247,7 +268,10 @@
|
||||
function onSelectSku(propertyId, valueId) {
|
||||
// 清空已选择
|
||||
let isChecked = true; // 选中 or 取消选中
|
||||
if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) {
|
||||
if (
|
||||
state.currentPropertyArray[propertyId] !== undefined &&
|
||||
state.currentPropertyArray[propertyId] === valueId
|
||||
) {
|
||||
// 点击已被选中的,删除并填充 ''
|
||||
isChecked = false;
|
||||
state.currentPropertyArray.splice(propertyId, 1, '');
|
||||
@@ -437,4 +461,4 @@
|
||||
content: '¥';
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</style>
|
||||
|
||||
+48
-149
@@ -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';
|
||||
|
||||
/**
|
||||
* 格式化销量
|
||||
@@ -15,7 +11,7 @@ import {
|
||||
*/
|
||||
export function formatSales(type, num) {
|
||||
let prefix = type !== 'exact' && num < 10 ? '销量' : '已售';
|
||||
return formatNum(prefix, type, num)
|
||||
return formatNum(prefix, type, num);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -25,10 +21,9 @@ export function formatSales(type, num) {
|
||||
* @return {string} 格式化后的销量字符串
|
||||
*/
|
||||
export function formatExchange(type, num) {
|
||||
return formatNum('已兑换', type, num)
|
||||
return formatNum('已兑换', type, num);
|
||||
}
|
||||
|
||||
|
||||
/**
|
||||
* 格式化库存
|
||||
* @param {'exact' | any} type 格式类型:exact=精确值,其它=大致数量
|
||||
@@ -36,7 +31,7 @@ export function formatExchange(type, num) {
|
||||
* @return {string} 格式化后的销量字符串
|
||||
*/
|
||||
export function formatStock(type, num) {
|
||||
return formatNum('库存', type, num)
|
||||
return formatNum('库存', type, num);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -47,7 +42,7 @@ export function formatStock(type, num) {
|
||||
* @return {string} 格式化后的销量字符串
|
||||
*/
|
||||
export function formatNum(prefix, type, num) {
|
||||
num = (num || 0);
|
||||
num = num || 0;
|
||||
// 情况一:精确数值
|
||||
if (type === 'exact') {
|
||||
return prefix + num;
|
||||
@@ -71,7 +66,7 @@ export function formatPrice(e) {
|
||||
}
|
||||
|
||||
// 视频格式后缀列表
|
||||
const VIDEO_SUFFIX_LIST = ['.avi', '.mp4']
|
||||
const VIDEO_SUFFIX_LIST = ['.avi', '.mp4'];
|
||||
|
||||
/**
|
||||
* 转换商品轮播的链接列表:根据链接的后缀,判断是视频链接还是图片链接
|
||||
@@ -80,15 +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,9 +100,7 @@ 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) {
|
||||
@@ -146,7 +143,7 @@ export function formatOrderStatus(order) {
|
||||
*/
|
||||
export function formatOrderStatusDescription(order) {
|
||||
if (order.status === 0) {
|
||||
return `请在 ${ formatDate(order.payExpireTime) } 前完成支付`;
|
||||
return `请在 ${formatDate(order.payExpireTime)} 前完成支付`;
|
||||
}
|
||||
if (order.status === 10) {
|
||||
return '商家未发货,请耐心等待';
|
||||
@@ -169,24 +166,30 @@ export function formatOrderStatusDescription(order) {
|
||||
* @param order 订单
|
||||
*/
|
||||
export function handleOrderButtons(order) {
|
||||
order.buttons = []
|
||||
if (order.type === 3) { // 查看拼团
|
||||
order.buttons = [];
|
||||
if (order.type === 3) {
|
||||
// 查看拼团
|
||||
order.buttons.push('combination');
|
||||
}
|
||||
if (order.status === 20) { // 确认收货
|
||||
if (order.status === 20) {
|
||||
// 确认收货
|
||||
order.buttons.push('confirm');
|
||||
}
|
||||
if (order.logisticsId > 0) { // 查看物流
|
||||
if (order.logisticsId > 0) {
|
||||
// 查看物流
|
||||
order.buttons.push('express');
|
||||
}
|
||||
if (order.status === 0) { // 取消订单 / 发起支付
|
||||
if (order.status === 0) {
|
||||
// 取消订单 / 发起支付
|
||||
order.buttons.push('cancel');
|
||||
order.buttons.push('pay');
|
||||
}
|
||||
if (order.status === 30 && !order.commentStatus) { // 发起评价
|
||||
if (order.status === 30 && !order.commentStatus) {
|
||||
// 发起评价
|
||||
order.buttons.push('comment');
|
||||
}
|
||||
if (order.status === 40) { // 删除订单
|
||||
if (order.status === 40) {
|
||||
// 删除订单
|
||||
order.buttons.push('delete');
|
||||
}
|
||||
}
|
||||
@@ -264,10 +267,12 @@ export function formatAfterSaleStatusDescription(afterSale) {
|
||||
*/
|
||||
export function handleAfterSaleButtons(afterSale) {
|
||||
afterSale.buttons = [];
|
||||
if ([10, 20, 30].includes(afterSale.status)) { // 取消订单
|
||||
if ([10, 20, 30].includes(afterSale.status)) {
|
||||
// 取消订单
|
||||
afterSale.buttons.push('cancel');
|
||||
}
|
||||
if (afterSale.status === 20) { // 退货信息
|
||||
if (afterSale.status === 20) {
|
||||
// 退货信息
|
||||
afterSale.buttons.push('delivery');
|
||||
}
|
||||
}
|
||||
@@ -331,7 +336,7 @@ function getDayjsTime(time) {
|
||||
* @returns {string} 元,例如说 1.00 元
|
||||
*/
|
||||
export function fen2yuan(price) {
|
||||
return (price / 100.0).toFixed(2)
|
||||
return (price / 100.0).toFixed(2);
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -352,134 +357,28 @@ export function convertProductPropertyList(skus) {
|
||||
let result = [];
|
||||
for (const sku of skus) {
|
||||
if (!sku.properties) {
|
||||
continue
|
||||
continue;
|
||||
}
|
||||
for (const property of sku.properties) {
|
||||
// ① 先处理属性
|
||||
let resultProperty = result.find(item => item.id === property.propertyId)
|
||||
let resultProperty = result.find((item) => item.id === property.propertyId);
|
||||
if (!resultProperty) {
|
||||
resultProperty = {
|
||||
id: property.propertyId,
|
||||
name: property.propertyName,
|
||||
values: []
|
||||
}
|
||||
result.push(resultProperty)
|
||||
values: [],
|
||||
};
|
||||
result.push(resultProperty);
|
||||
}
|
||||
// ② 再处理属性值
|
||||
let resultValue = resultProperty.values.find(item => item.id === property.valueId)
|
||||
let resultValue = resultProperty.values.find((item) => item.id === property.valueId);
|
||||
if (!resultValue) {
|
||||
resultProperty.values.push({
|
||||
id: property.valueId,
|
||||
name: property.valueName
|
||||
})
|
||||
name: property.valueName,
|
||||
});
|
||||
}
|
||||
}
|
||||
}
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* 格式化满减送活动的规则
|
||||
*
|
||||
* @param activity 活动信息
|
||||
* @param rule 优惠规格
|
||||
* @returns {string} 规格字符串
|
||||
*/
|
||||
export function formatRewardActivityRule(activity, rule) {
|
||||
if (activity.conditionType === 10) {
|
||||
return `满 ${fen2yuan(rule.limit)} 元减 ${fen2yuan(rule.discountPrice)} 元`;
|
||||
}
|
||||
if (activity.conditionType === 20) {
|
||||
return `满 ${rule.limit} 件减 ${fen2yuan(rule.discountPrice)} 元`;
|
||||
}
|
||||
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
|
||||
};
|
||||
Reference in New Issue
Block a user