xsl/meida_applet
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

【功能】批量修改bug和功能

Browse Source
This commit is contained in:
痴货
2024-09-15 17:32:29 +08:00
parent f7ec1badf7
commit aa571f25f9
16 changed files with 1995 additions and 940 deletions
Download Patch File Download Diff File Expand all files Collapse all files
sheep/components/s-activity-pop/s-activity-pop.vue
+225 -29
View File
@@ -2,22 +2,100 @@
<template>
<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>
<scroll-view
class="model-content ss-m-t-50"
scroll-y
:scroll-with-animation="false"
:enable-back-to-top="true"
>
<view v-for="item in state.activityInfo" :key="item.id">
<view class="ss-flex ss-col-top ss-m-b-40" @tap="onGoodsList(item)">
<view class="model-content-tag ss-flex ss-row-center">满减</view>
<view class="ss-m-l-20 model-content-title ss-flex-1">
<view class="ss-m-b-24" v-for="rule in state.activityMap[item.id]?.rules" :key="rule">
{{ formatRewardActivityRule(state.activityMap[item.id], rule) }}
<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 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])">
<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>
</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)}}
</view>
</view>
<text class="cicon-forward" />
</view>
</view>
</scroll-view>
</view>
<view class="titleLi">可领优惠券</view>
<scroll-view class="model-content" scroll-y :scroll-with-animation="false" :enable-back-to-top="true">
<view class="actBox" v-for="item 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>
<text class="cicon-forward" />
<view class="model-content-title2">
<view class="contBu">
{{item.name}}
</view>
<view class="ss-m-b-24 cotBu-txt">
{{item.validityType==1?formatDateRange(item.validStartTime,item.validEndTime) : '领取后'+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>
</view>
</scroll-view>
@@ -26,14 +104,21 @@
</template>
<script setup>
import sheep from '@/sheep';
import { computed, reactive, watch } from 'vue';
import {
computed,
reactive,
watch
} from 'vue';
import RewardActivityApi from '@/sheep/api/promotion/rewardActivity';
import { formatRewardActivityRule } from '@/sheep/hooks/useGoods';
import {
fen2yuan,
formatDateRange,
handActitList
} from '@/sheep/hooks/useGoods';
const props = defineProps({
modelValue: {
type: Object,
default() {},
default () {},
},
show: {
type: Boolean,
@@ -42,10 +127,10 @@
});
const emits = defineEmits(['close']);
const state = reactive({
activityInfo: computed(() => props.modelValue),
activityMap: {}
activityInfo: computed(() => props.modelValue.activityInfo),
activityMap: {},
couponInfo: computed(() => props.modelValue.couponInfo)
});
watch(
() => props.show,
() => {
@@ -56,12 +141,16 @@
if (res.code !== 0) {
return;
}
state.activityMap[activity.id] = res.data;
state.activityMap[activity.id] = handActitList(res.data.rules);
})
});
}
},
);
// 领取优惠劵
const getBuy = (id) => {
emits('get', id);
};
function onGoodsList(e) {
sheep.$router.go('/pages/activity/index', {
@@ -72,34 +161,141 @@
<style lang="scss" scoped>
.model-box {
height: 60vh;
.title {
justify-content: center;
font-size: 36rpx;
height: 80rpx;
font-weight: bold;
color: #333333;
}
}
.model-content {
height: fit-content;
max-height: 350rpx;
padding: 0 20rpx;
box-sizing: border-box;
margin-top: 20rpx;
.model-content-tag {
background: rgba(#ff6911, 0.1);
font-size: 24rpx;
// background: rgba(#ff6911, 0.1);
font-size: 35rpx;
font-weight: 500;
color: #ff6911;
line-height: 42rpx;
width: 68rpx;
height: 32rpx;
border-radius: 5rpx;
line-height: 150rpx;
width: 200rpx;
height: 150rpx;
text-align: center;
// border-radius: 5rpx;
}
.model-content-title {
width: 450rpx;
height: 150rpx;
font-size: 26rpx;
font-weight: 500;
color: #333333;
overflow: hidden;
}
.cicon-forward {
font-size: 28rpx;
color: #999999;
margin: 0 auto;
}
}
</style>
// 新增的
.titleLi {
margin: 10rpx 0 10rpx 20rpx;
font-size: 26rpx;
}
.actBox {
width: 700rpx;
height: 150rpx;
background-color: #fff2f2;
margin: 10rpx auto;
border-radius: 10rpx;
}
.boxCont {
width: 700rpx;
height: 150rpx;
align-items: center;
}
.contBu {
height: 80rpx;
line-height: 80rpx;
overflow: hidden;
font-size: 30rpx;
white-space: nowrap;
text-overflow: ellipsis;
-o-text-overflow: ellipsis;
}
.cotBu-txt {
height: 70rpx;
line-height: 70rpx;
font-size: 25rpx;
color: #999999;
}
.model-content-tag2 {
font-size: 35rpx;
font-weight: 500;
color: #ff6911;
width: 200rpx;
height: 150rpx;
text-align: center;
}
.usePrice {
width: 200rpx;
height: 90rpx;
line-height: 100rpx;
// background-color: red;
}
.impose {
width: 200rpx;
height: 50rpx;
// line-height: 75rpx;
font-size: 23rpx;
// background-color: gold;
}
.model-content-title2 {
width: 330rpx;
height: 150rpx;
font-size: 26rpx;
font-weight: 500;
color: #333333;
overflow: hidden;
}
.coupon {
width: 150rpx;
height: 50rpx;
line-height: 50rpx;
background-color: rgb(255, 68, 68);
color: white;
border-radius: 30rpx;
text-align: center;
font-size: 25rpx;
}
.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;
}
</style>
sheep/components/s-discount-list/s-discount-list.vue
+33 -36
View File
@@ -1,23 +1,12 @@
<template>
<su-popup
:show="show"
type="bottom"
round="20"
@close="emits('close')"
showClose
backgroundColor="#f2f2f2"
>
<su-popup :show="show" type="bottom" round="20" @close="emits('close')" showClose backgroundColor="#f2f2f2">
<view class="model-box">
<view class="title ss-m-t-38 ss-m-l-20 ss-m-b-40">活动优惠</view>
<scroll-view
class="model-content ss-m-l-20"
scroll-y
:scroll-with-animation="false"
:enable-back-to-top="true"
>
<view v-for="(item, index) in state.orderInfo.promo_infos" :key="index">
<scroll-view class="model-content ss-m-l-20" scroll-y :scroll-with-animation="false"
:enable-back-to-top="true">
<view v-for="(item, index) in state.orderInfo.promotions" :key="index">
<view class="ss-flex ss-m-b-40 subtitle">
<view>共{{ item.goods_ids.length }}件，</view>
<!-- <view>共{{ item.goods_ids.length }}件，</view>
<view v-if="item.activity_type === 'full_discount'">
满{{ item.discount_rule.full }}打{{ item.discount_rule.discount }}折,已减
</view>
@@ -25,15 +14,11 @@
<view v-if="item.activity_type === 'full_reduce'">
满{{ item.discount_rule.full }}减{{ item.discount_rule.discount }},已减
</view>
<view class="price-text">￥{{ item.promo_discount_money || '0.00' }}</view>
</view>
<scroll-view class="scroll-box" scroll-x scroll-anchoring>
<view class="ss-flex">
<view v-for="i in item.goods_ids" :key="i">
<image class="content-img" :src="sheep.$url.cdn(getGoodsImg(i))" />
</view>
<view class="price-text">￥{{ item.promo_discount_money || '0.00' }}</view> -->
<view>
{{item.description}}
</view>
</scroll-view>
</view>
</view>
</scroll-view>
</view>
@@ -43,8 +28,14 @@
</su-popup>
</template>
<script setup>
import { computed, reactive } from 'vue';
import {
computed,
reactive
} from 'vue';
import sheep from '@/sheep';
import {
fen2yuan
} from '@/sheep/hooks/useGoods';
const props = defineProps({
promoInfo: {
type: Array,
@@ -56,7 +47,7 @@
},
modelValue: {
type: Object,
default() {},
default () {},
},
show: {
type: Boolean,
@@ -67,28 +58,31 @@
const state = reactive({
orderInfo: computed(() => props.modelValue),
});
const getGoodsImg = (e) => {
let goodsImg = '';
state.orderInfo.goods_list.forEach((i) => {
if (e == i.goods_id) {
goodsImg = i.goods.image;
}
});
return goodsImg;
};
// const getGoodsImg = (e) => {
// let goodsImg = '';
// state.orderInfo.goods_list.forEach((i) => {
// if (e == i.goods_id) {
// goodsImg = i.goods.image;
// }
// });
// return goodsImg;
// };
</script>
<style lang="scss" scoped>
.model-box {
height: 60vh;
}
.model-content {
height: 54vh;
}
.modal-footer {
width: 100%;
height: 120rpx;
background: #fff;
}
.confirm-btn {
width: 710rpx;
margin-left: 20rpx;
@@ -97,18 +91,21 @@
border-radius: 40rpx;
color: #fff;
}
.content-img {
width: 140rpx;
height: 140rpx;
margin-right: 20rpx;
margin-bottom: 20rpx;
}
.subtitle {
font-size: 28rpx;
font-weight: 500;
color: #333333;
}
.price-text {
color: #ff3000;
}
</style>
</style>
sheep/components/s-goods-card/s-goods-card.vue
+53 -2
View File
@@ -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){
// 分列
sheep/components/s-goods-column/s-goods-column.vue
+201 -160
View File
@@ -2,38 +2,29 @@
<template>
<view class="ss-goods-wrap">
<!-- xs卡片：横向紧凑型，一行放两个，图片左内容右边 -->
<view
v-if="size === 'xs'"
class="xs-goods-card ss-flex ss-col-stretch"
:style="[elStyles]"
@tap="onClick"
>
<view v-if="size === 'xs'" class="xs-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @tap="onClick">
<view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view>
<image
class="xs-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="aspectFit"
></image>
<view
v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
class="xs-goods-content ss-flex-col ss-row-around"
>
<view
v-if="goodsFields.title?.show || goodsFields.name?.show"
class="xs-goods-title ss-line-1"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
<image class="xs-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFit"></image>
<view v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
class="xs-goods-content ss-flex-col ss-row-around">
<view v-if="goodsFields.title?.show || goodsFields.name?.show" class="xs-goods-title ss-line-1"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]">
{{ data.title || data.name }}
</view>
<view
v-if="goodsFields.price?.show"
class="xs-goods-price font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]"
>
<!-- 这里是新加的会员价和限时优惠 -->
<view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
<view class="card" v-if="iconShow">{{iconShow}}</view>
<view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
</view>
<!-- 这里是新加的会员价和限时优惠结束 -->
<view v-if="goodsFields.price?.show" class="xs-goods-price font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]">
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
<text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
<text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
<text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
</view>
</view>
</view>
@@ -43,30 +34,26 @@
<view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view>
<image
class="sm-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="aspectFill"
></image>
<image class="sm-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
<view
v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
class="sm-goods-content"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
<view
v-if="goodsFields.title?.show || goodsFields.name?.show"
class="sm-goods-title ss-line-1 ss-m-b-16"
>
<view v-if="goodsFields.title?.show || goodsFields.name?.show || goodsFields.price?.show"
class="sm-goods-content" :style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]">
<view v-if="goodsFields.title?.show || goodsFields.name?.show"
class="sm-goods-title ss-line-1 ss-m-b-16">
{{ data.title || data.name }}
</view>
<view
v-if="goodsFields.price?.show"
class="sm-goods-price font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]"
>
<!-- 这里是新加的会员价和限时优惠 -->
<view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
<view class="card" v-if="iconShow">{{iconShow}}</view>
<view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
</view>
<!-- 这里是新加的会员价和限时优惠结束 -->
<view v-if="goodsFields.price?.show" class="sm-goods-price font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]">
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
<text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
<text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
<text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
</view>
</view>
</view>
@@ -76,58 +63,43 @@
<view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view>
<image
class="md-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="widthFix"
></image>
<view
class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16"
:id="elId"
>
<view
v-if="goodsFields.title?.show || goodsFields.name?.show"
class="md-goods-title ss-line-1"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]"
>
<image class="md-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="widthFix"></image>
<view class="md-goods-content ss-flex-col ss-row-around ss-p-b-20 ss-p-t-20 ss-p-x-16" :id="elId">
<view v-if="goodsFields.title?.show || goodsFields.name?.show" class="md-goods-title ss-line-1"
:style="[{ color: titleColor, width: titleWidth ? titleWidth + 'rpx' : '' }]">
{{ data.title || data.name }}
</view>
<view
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="md-goods-subtitle ss-m-t-16 ss-line-1"
:style="[{ color: subTitleColor, background: subTitleBackground }]"
>
<view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="md-goods-subtitle ss-m-t-16 ss-line-1"
:style="[{ color: subTitleColor, background: subTitleBackground }]">
{{ data.subtitle || data.introduction }}
</view>
<slot name="activity">
<view v-if="data.promos?.length" class="tag-box ss-flex-wrap ss-flex ss-col-center">
<view
class="activity-tag ss-m-r-10 ss-m-t-16"
v-for="item in data.promos"
:key="item.id"
>
<view class="activity-tag ss-m-r-10 ss-m-t-16" v-for="item in data.promos" :key="item.id">
{{ item.title }}
</view>
</view>
</slot>
<!-- 这里是新加的会员价和限时优惠 -->
<view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
<view class="card" v-if="iconShow">{{iconShow}}</view>
<view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
</view>
<!-- 这里是新加的会员价和限时优惠结束 -->
<view class="ss-flex ss-col-bottom">
<view
v-if="goodsFields.price?.show"
class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
:style="[{ color: goodsFields.price.color }]"
>
<view v-if="goodsFields.price?.show" class="md-goods-price ss-m-t-16 font-OPPOSANS ss-m-r-10"
:style="[{ color: goodsFields.price.color }]">
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
<text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
<text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
<text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
</view>
<view
v-if="
<view v-if="
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
(data.original_price > 0 || data.marketPrice > 0)
"
class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
:style="[{ color: originPriceColor }]"
>
" class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex" :style="[{ color: originPriceColor }]">
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
</view>
@@ -146,12 +118,7 @@
</view>
<!-- lg卡片：横向型，一行放一个，图片左内容右边 -->
<view
v-if="size === 'lg'"
class="lg-goods-card ss-flex ss-col-stretch"
:style="[elStyles]"
@tap="onClick"
>
<view v-if="size === 'lg'" class="lg-goods-card ss-flex ss-col-stretch" :style="[elStyles]" @tap="onClick">
<view v-if="tagStyle.show" class="tag-icon-box">
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view>
@@ -159,25 +126,16 @@
<view v-if="grouponTag" class="groupon-tag ss-flex ss-row-center">
<view class="tag-icon">拼团</view>
</view>
<image
class="lg-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="aspectFill"
></image>
<image class="lg-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
<view class="lg-goods-content ss-flex-1 ss-flex-col ss-row-between ss-p-b-10 ss-p-t-20">
<view>
<view
v-if="goodsFields.title?.show || goodsFields.name?.show"
class="lg-goods-title ss-line-2"
:style="[{ color: titleColor }]"
>
<view v-if="goodsFields.title?.show || goodsFields.name?.show" class="lg-goods-title ss-line-2"
:style="[{ color: titleColor }]">
{{ data.title || data.name }}
</view>
<view
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="lg-goods-subtitle ss-m-t-10 ss-line-1"
:style="[{ color: subTitleColor, background: subTitleBackground }]"
>
<view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="lg-goods-subtitle ss-m-t-10 ss-line-1"
:style="[{ color: subTitleColor, background: subTitleBackground }]">
{{ data.subtitle || data.introduction }}
</view>
</view>
@@ -189,25 +147,27 @@
</view>
</view>
</slot>
<!-- 这里是新加的会员价和限时优惠 -->
<view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
<view class="card" v-if="iconShow">{{iconShow}}</view>
<view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
</view>
<!-- 这里是新加的会员价和限时优惠结束 -->
<view class="ss-flex ss-col-bottom ss-m-t-10">
<view
v-if="goodsFields.price?.show"
class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]"
>
<view v-if="goodsFields.price?.show"
class="lg-goods-price ss-m-r-12 ss-flex ss-col-bottom font-OPPOSANS"
:style="[{ color: goodsFields.price.color }]">
<text class="ss-font-24">{{ priceUnit }}</text>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
</view>
<view
v-if="
<view v-if="
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
(data.original_price > 0 || data.marketPrice > 0)
"
class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS"
:style="[{ color: originPriceColor }]"
>
" class="goods-origin-price ss-flex ss-col-bottom font-OPPOSANS" :style="[{ color: originPriceColor }]">
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
<text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
<text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
<text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
</view>
</view>
<view class="ss-m-t-8 ss-flex ss-col-center ss-flex-wrap">
@@ -227,54 +187,45 @@
<image class="tag-icon" :src="sheep.$url.cdn(tagStyle.src || tagStyle.imgUrl)"></image>
</view>
<image
class="sl-img-box"
:src="sheep.$url.cdn(data.image || data.picUrl)"
mode="aspectFill"
></image>
<image class="sl-img-box" :src="sheep.$url.cdn(data.image || data.picUrl)" mode="aspectFill"></image>
<view class="sl-goods-content">
<view>
<view
v-if="goodsFields.title?.show || goodsFields.name?.show"
class="sl-goods-title ss-line-1"
:style="[{ color: titleColor }]"
>
<view v-if="goodsFields.title?.show || goodsFields.name?.show" class="sl-goods-title ss-line-1"
:style="[{ color: titleColor }]">
{{ data.title || data.name }}
</view>
<view
v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="sl-goods-subtitle ss-m-t-16"
:style="[{ color: subTitleColor, background: subTitleBackground }]"
>
<view v-if="goodsFields.subtitle?.show || goodsFields.introduction?.show"
class="sl-goods-subtitle ss-m-t-16"
:style="[{ color: subTitleColor, background: subTitleBackground }]">
{{ data.subtitle || data.introduction }}
</view>
</view>
<view>
<slot name="activity">
<view v-if="data.promos?.length" class="tag-box ss-flex ss-col-center ss-flex-wrap">
<view
class="activity-tag ss-m-r-10 ss-m-t-16"
v-for="item in data.promos"
:key="item.id"
>
<view class="activity-tag ss-m-r-10 ss-m-t-16" v-for="item in data.promos" :key="item.id">
{{ item.title }}
</view>
</view>
</slot>
<!-- 这里是新加的会员价和限时优惠 -->
<view class="iconBox" v-if="data.discountPrice || data.vipPrice || data.reward">
<view class="card" v-if="iconShow">{{iconShow}}</view>
<view class="card2" v-if="data.reward">{{data.reward.rewardActivity}}</view>
</view>
<!-- 这里是新加的会员价和限时优惠结束 -->
<view v-if="goodsFields.price?.show" class="ss-flex ss-col-bottom font-OPPOSANS">
<view class="sl-goods-price ss-m-r-12" :style="[{ color: goodsFields.price.color }]">
<text class="price-unit ss-font-24">{{ priceUnit }}</text>
{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}
<text v-if="iconShow=='限时优惠'">{{fen2yuan(data.discountPrice)}}</text>
<text v-else-if="iconShow=='会员价'">{{fen2yuan(data.vipPrice)}}</text>
<text v-else>{{ isArray(data.price) ? fen2yuan(data.price[0]) : fen2yuan(data.price) }}</text>
</view>
<view
v-if="
<view v-if="
(goodsFields.original_price?.show || goodsFields.marketPrice?.show) &&
(data.original_price > 0 || data.marketPrice > 0)
"
class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex"
:style="[{ color: originPriceColor }]"
>
" class="goods-origin-price ss-m-t-16 font-OPPOSANS ss-flex" :style="[{ color: originPriceColor }]">
<text class="price-unit ss-font-20">{{ priceUnit }}</text>
<view class="ss-m-l-8">{{ fen2yuan(data.marketPrice) }}</view>
</view>
@@ -285,9 +236,9 @@
</view>
</view>
<slot name="cart"
><view class="buy-box ss-flex ss-col-center ss-row-center">去购买</view></slot
>
<slot name="cart">
<view class="buy-box ss-flex ss-col-center ss-row-center">去购买</view>
</slot>
</view>
</view>
</template>
@@ -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;
}
}
</style>
.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;
}
</style>
sheep/components/s-select-sku/s-select-sku.vue
+336 -302
View File
@@ -1,34 +1,38 @@
<template>
<!-- 规格弹窗 -->
<su-popup :show="show" round="10" @close="emits('close')">
<!-- 规格弹窗 -->
<su-popup :show="show" round="10" @close="emits('close')">
<!-- SKU 信息 -->
<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" />
</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) }}
</view>
</view>
<view class="stock-text ss-m-l-20">
{{ formatStock('exact', state.selectedSku.stock || goodsInfo.stock) }}
</view>
</view>
</view>
</view>
<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" />
</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>
</view>
</view>
<view class="stock-text ss-m-l-20">
{{ formatStock('exact', state.selectedSku.stock || goodsInfo.stock) }}
</view>
</view>
</view>
</view>
<!-- 属性选择 -->
<view class="modal-content ss-flex-1">
<scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop>
<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="[
<view class="modal-content ss-flex-1">
<scroll-view scroll-y="true" class="modal-content-scroll" @touchmove.stop>
<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="[
{
'ui-BG-Main-Gradient': state.currentPropertyArray[property.id] === value.id,
},
@@ -36,71 +40,78 @@
'disabled-btn': value.disabled === true,
},
]" :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"
{{ 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)" />
</view>
</scroll-view>
</view>
</view>
</scroll-view>
</view>
<!-- 操作区 -->
<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 buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
</view>
</view>
</view>
</su-popup>
<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 buy-btn ui-Shadow-Main" @tap="onBuy">立即购买</button>
</view>
</view>
</view>
</su-popup>
</template>
<script setup>
import { computed, reactive, watch } from 'vue';
import sheep from '@/sheep';
import { formatStock, convertProductPropertyList, fen2yuan } from '@/sheep/hooks/useGoods';
import {
computed,
reactive,
watch
} from 'vue';
import sheep from '@/sheep';
import {
formatStock,
convertProductPropertyList,
fen2yuan
} from '@/sheep/hooks/useGoods';
const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
const props = defineProps({
goodsInfo: {
type: Object,
default () {},
},
show: {
type: Boolean,
default: false,
}
});
const emits = defineEmits(['change', 'addCart', 'buy', 'close']);
const props = defineProps({
goodsInfo: {
type: Object,
default () {},
},
show: {
type: Boolean,
default: false,
}
});
const state = reactive({
selectedSku: {}, // 选中的 SKU
currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
});
const state = reactive({
selectedSku: {}, // 选中的 SKU
currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
});
const propertyList = convertProductPropertyList(props.goodsInfo.skus);
// SKU 列表
const skuList = computed(() => {
let skuPrices = props.goodsInfo.skus;
const propertyList = convertProductPropertyList(props.goodsInfo.skus);
// SKU 列表
const skuList = computed(() => {
let skuPrices = props.goodsInfo.skus;
for (let price of skuPrices) {
price.value_id_array = price.properties.map((item) => item.valueId)
}
return skuPrices;
});
return skuPrices;
});
watch(
() => state.selectedSku,
(newVal) => {
emits('change', newVal);
}, {
immediate: true, // 立即执行
deep: true, // 深度监听
},
);
watch(
() => state.selectedSku,
(newVal) => {
emits('change', newVal);
}, {
immediate: true, // 立即执行
deep: true, // 深度监听
},
);
// 输入框改变数量
function onNumberChange(e) {
@@ -110,21 +121,21 @@
}
// 加入购物车
function onAddCart() {
if (state.selectedSku.id <= 0) {
function onAddCart() {
if (state.selectedSku.id <= 0) {
sheep.$helper.toast('请选择规格');
return;
}
}
if (state.selectedSku.stock <= 0) {
sheep.$helper.toast('库存不足');
return;
}
emits('addCart', state.selectedSku);
}
}
// 立即购买
function onBuy() {
function onBuy() {
if (state.selectedSku.id <= 0) {
sheep.$helper.toast('请选择规格');
return;
@@ -134,273 +145,296 @@
return;
}
emits('buy', state.selectedSku);
}
}
// 改变禁用状态：计算每个 property 属性值的按钮，是否禁用
function changeDisabled(isChecked = false, propertyId = 0, valueId = 0) {
// 改变禁用状态：计算每个 property 属性值的按钮，是否禁用
function changeDisabled(isChecked = false, propertyId = 0, valueId = 0) {
let newSkus = []; // 所有可以选择的 sku 数组
if (isChecked) {
// 情况一：选中 property
// 获得当前点击选中 property 的、所有可用 SKU
for (let price of skuList.value) {
if (price.stock <= 0) {
continue;
}
if (price.value_id_array.indexOf(valueId) >= 0) {
newSkus.push(price);
}
}
} else {
// 情况二：取消选中 property
// 当前所选 property 下，所有可以选择的 SKU
newSkus = getCanUseSkuList();
}
if (isChecked) {
// 情况一：选中 property
// 获得当前点击选中 property 的、所有可用 SKU
for (let price of skuList.value) {
if (price.stock <= 0) {
continue;
}
if (price.value_id_array.indexOf(valueId) >= 0) {
newSkus.push(price);
}
}
} else {
// 情况二：取消选中 property
// 当前所选 property 下，所有可以选择的 SKU
newSkus = getCanUseSkuList();
}
// 所有存在并且有库存未选择的 SKU 的 value 属性值 id
let noChooseValueIds = [];
for (let price of newSkus) {
noChooseValueIds = noChooseValueIds.concat(price.value_id_array);
}
noChooseValueIds = Array.from(new Set(noChooseValueIds)); // 去重
// 所有存在并且有库存未选择的 SKU 的 value 属性值 id
let noChooseValueIds = [];
for (let price of newSkus) {
noChooseValueIds = noChooseValueIds.concat(price.value_id_array);
}
noChooseValueIds = Array.from(new Set(noChooseValueIds)); // 去重
if (isChecked) {
// 去除当前选中的 value 属性值 id
let index = noChooseValueIds.indexOf(valueId);
noChooseValueIds.splice(index, 1);
} else {
// 循环去除当前已选择的 value 属性值 id
state.currentPropertyArray.forEach((currentPropertyId) => {
if (currentPropertyId.toString() !== '') {
if (isChecked) {
// 去除当前选中的 value 属性值 id
let index = noChooseValueIds.indexOf(valueId);
noChooseValueIds.splice(index, 1);
} else {
// 循环去除当前已选择的 value 属性值 id
state.currentPropertyArray.forEach((currentPropertyId) => {
if (currentPropertyId.toString() !== '') {
return;
}
}
// currentPropertyId 为空是反选 填充的
let index = noChooseValueIds.indexOf(currentPropertyId);
if (index >= 0) {
// currentPropertyId 存在于 noChooseValueIds
noChooseValueIds.splice(index, 1);
}
});
}
});
}
// 当前已选择的 property 数组
let choosePropertyIds = [];
if (!isChecked) {
// 当前已选择的 property
state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
if (currentPropertyId !== '') {
// currentPropertyId 为空是反选 填充的
choosePropertyIds.push(currentValueId);
}
});
} else {
// 当前点击选择的 property
choosePropertyIds = [propertyId];
}
let choosePropertyIds = [];
if (!isChecked) {
// 当前已选择的 property
state.currentPropertyArray.forEach((currentPropertyId, currentValueId) => {
if (currentPropertyId !== '') {
// currentPropertyId 为空是反选 填充的
choosePropertyIds.push(currentValueId);
}
});
} else {
// 当前点击选择的 property
choosePropertyIds = [propertyId];
}
for (let propertyIndex in propertyList) {
// 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理
if (choosePropertyIds.indexOf(propertyList[propertyIndex]['id']) >= 0) {
continue;
}
// 当前点击的 property、或者取消选择时候，已选中的 property 不进行处理
if (choosePropertyIds.indexOf(propertyList[propertyIndex]['id']) >= 0) {
continue;
}
// 如果当前 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 不禁用
}
}
}
propertyList[propertyIndex]['values'][valueIndex]['disabled'] =
noChooseValueIds.indexOf(propertyList[propertyIndex]['values'][valueIndex]['id']) <
0; // true 禁用 or false 不禁用
}
}
}
// 当前所选属性下，获取所有有库存的 SKU 们
function getCanUseSkuList() {
let newSkus = [];
for (let sku of skuList.value) {
if (sku.stock <= 0) {
continue;
}
// 当前所选属性下，获取所有有库存的 SKU 们
function getCanUseSkuList() {
let newSkus = [];
for (let sku of skuList.value) {
if (sku.stock <= 0) {
continue;
}
let isOk = true;
state.currentPropertyArray.forEach((propertyId) => {
// propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
isOk = false;
}
});
if (isOk) {
newSkus.push(sku);
}
}
return newSkus;
}
// propertyId 不为空，并且，这个 条 sku 没有被选中，则排除
if (propertyId.toString() !== '' && sku.value_id_array.indexOf(propertyId) < 0) {
isOk = false;
}
});
if (isOk) {
newSkus.push(sku);
}
}
return newSkus;
}
// 选择规格
function onSelectSku(propertyId, valueId) {
// 清空已选择
let isChecked = true; // 选中 or 取消选中
if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) {
// 点击已被选中的，删除并填充 ''
isChecked = false;
state.currentPropertyArray.splice(propertyId, 1, '');
} else {
// 选中
state.currentPropertyArray[propertyId] = valueId;
}
// 选择规格
function onSelectSku(propertyId, valueId) {
// 清空已选择
let isChecked = true; // 选中 or 取消选中
if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) {
// 点击已被选中的，删除并填充 ''
isChecked = false;
state.currentPropertyArray.splice(propertyId, 1, '');
} else {
// 选中
state.currentPropertyArray[propertyId] = valueId;
}
// 选中的 property 大类
let choosePropertyId = [];
state.currentPropertyArray.forEach((currentPropertyId) => {
if (currentPropertyId !== '') {
// currentPropertyId 为空是反选 填充的
choosePropertyId.push(currentPropertyId);
}
});
let choosePropertyId = [];
state.currentPropertyArray.forEach((currentPropertyId) => {
if (currentPropertyId !== '') {
// currentPropertyId 为空是反选 填充的
choosePropertyId.push(currentPropertyId);
}
});
// 当前所选 property 下，所有可以选择的 SKU 们
let newSkuList = getCanUseSkuList();
// 当前所选 property 下，所有可以选择的 SKU 们
let newSkuList = getCanUseSkuList();
// 判断所有 property 大类是否选择完成
if (choosePropertyId.length === propertyList.length && newSkuList.length) {
newSkuList[0].goods_num = state.selectedSku.goods_num || 1;
state.selectedSku = newSkuList[0];
} else {
state.selectedSku = {};
}
// 判断所有 property 大类是否选择完成
if (choosePropertyId.length === propertyList.length && newSkuList.length) {
newSkuList[0].goods_num = state.selectedSku.goods_num || 1;
state.selectedSku = newSkuList[0];
} else {
state.selectedSku = {};
}
// 改变 property 禁用状态
changeDisabled(isChecked, propertyId, valueId);
}
// 改变 property 禁用状态
changeDisabled(isChecked, propertyId, valueId);
}
changeDisabled(false);
changeDisabled(false);
// TODO 芋艿：待讨论的优化点：1）单规格，要不要默认选中；2）默认要不要选中第一个规格
</script>
<style lang="scss" scoped>
// 购买
.buy-box {
padding: 10rpx 0;
// 购买
.buy-box {
padding: 10rpx 0;
.add-btn {
width: 356rpx;
height: 80rpx;
border-radius: 40rpx 0 0 40rpx;
background-color: var(--ui-BG-Main-light);
color: var(--ui-BG-Main);
}
.add-btn {
width: 356rpx;
height: 80rpx;
border-radius: 40rpx 0 0 40rpx;
background-color: var(--ui-BG-Main-light);
color: var(--ui-BG-Main);
}
.buy-btn {
width: 356rpx;
height: 80rpx;
border-radius: 0 40rpx 40rpx 0;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
.buy-btn {
width: 356rpx;
height: 80rpx;
border-radius: 0 40rpx 40rpx 0;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
.score-btn {
width: 100%;
margin: 0 20rpx;
height: 80rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
}
.score-btn {
width: 100%;
margin: 0 20rpx;
height: 80rpx;
border-radius: 40rpx;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
color: #fff;
}
}
.ss-modal-box {
border-radius: 30rpx 30rpx 0 0;
max-height: 1000rpx;
.ss-modal-box {
border-radius: 30rpx 30rpx 0 0;
max-height: 1000rpx;
.modal-header {
position: relative;
padding: 80rpx 20rpx 40rpx;
.modal-header {
position: relative;
padding: 80rpx 20rpx 40rpx;
.sku-image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}
.sku-image {
width: 160rpx;
height: 160rpx;
border-radius: 10rpx;
}
.header-right {
height: 160rpx;
}
.header-right {
height: 160rpx;
}
.close-icon {
position: absolute;
top: 10rpx;
right: 20rpx;
font-size: 46rpx;
opacity: 0.2;
}
.close-icon {
position: absolute;
top: 10rpx;
right: 20rpx;
font-size: 46rpx;
opacity: 0.2;
}
.goods-title {
font-size: 28rpx;
font-weight: 500;
line-height: 42rpx;
}
.goods-title {
font-size: 28rpx;
font-weight: 500;
line-height: 42rpx;
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.score-img {
width: 36rpx;
height: 36rpx;
margin: 0 4rpx;
}
.score-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
}
.score-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
}
.price-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
.price-text {
font-size: 30rpx;
font-weight: 500;
color: $red;
font-family: OPPOSANS;
&::before {
content: '￥';
font-size: 30rpx;
font-weight: 500;
color: $red;
}
}
&::before {
content: '￥';
font-size: 30rpx;
font-weight: 500;
color: $red;
}
}
.stock-text {
font-size: 26rpx;
color: #999999;
}
}
.stock-text {
font-size: 26rpx;
color: #999999;
}
}
.modal-content {
padding: 0 20rpx;
.modal-content {
padding: 0 20rpx;
.modal-content-scroll {
max-height: 600rpx;
.modal-content-scroll {
max-height: 600rpx;
.label-text {
font-size: 26rpx;
font-weight: 500;
}
.label-text {
font-size: 26rpx;
font-weight: 500;
}
.buy-num-box {
height: 100rpx;
}
.buy-num-box {
height: 100rpx;
}
.spec-btn {
height: 60rpx;
min-width: 100rpx;
padding: 0 30rpx;
background: #f4f4f4;
border-radius: 30rpx;
color: #434343;
font-size: 26rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.spec-btn {
height: 60rpx;
min-width: 100rpx;
padding: 0 30rpx;
background: #f4f4f4;
border-radius: 30rpx;
color: #434343;
font-size: 26rpx;
margin-right: 10rpx;
margin-bottom: 10rpx;
}
.disabled-btn {
font-weight: 400;
color: #c6c6c6;
background: #f8f8f8;
}
}
}
}
.disabled-btn {
font-weight: 400;
color: #c6c6c6;
background: #f8f8f8;
}
}
}
}
.iconBox {
width: fit-content;
height: fit-content;
padding: 2rpx 10rpx;
background-color: rgb(255, 242, 241);
color: #ff2621;
font-size: 24rpx;
margin-left: 5rpx;
}
.origin-price-text {
font-size: 26rpx;
font-weight: 400;
text-decoration: line-through;
color: $gray-c;
font-family: OPPOSANS;
&::before {
content: '￥';
}
}
</style>