Waiting/suke-mp
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

购物车逻辑

Browse Source
This commit is contained in:
Waiting
2024-03-20 22:20:24 +08:00
parent 8d7f82b07c
commit 792aa4268a
9 changed files with 118 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
src/components/sku-dialog.vue
View File

@@ -4,7 +4,7 @@
<view class='c-flex-row' style='align-items: flex-start'>
<image class='goods-image' :src='bean?.images' />
<view class='c-flex-column' style='flex: 1'>
<text class='goods-name'>{{ bean.name }}…</text>
<text class='goods-name'>{{ bean?.name }}</text>
<text class='goods-price'>{{ bean?.price }}</text>
</view>
<image class='close-image' :src='assetsUrl("ic_close.png")' @click.stop='close' />
@@ -12,7 +12,7 @@
<view class='sku-view c-flex-column'>
<view class='sku-title'>颜色</view>
<view class='sku-color-list c-flex-row'>
<view class='sku-item' :class='{"sku-item-active":currentColorIndex==index,"sku-item-disabled":index==3}'
<view class='sku-item' :class='{"sku-item-active":currentColorIndex==index}'
v-for='(item, index) in skuColorList' :key='index'
@click='colorChange(index)'>
<text>{{ item }}</text>
@@ -21,16 +21,16 @@
<view class='sku-title' style='margin-top: 43rpx'>尺码</view>
<view class='sku-color-list c-flex-row'>
<view class='sku-item' :class='{"sku-item-active":currentSizeIndex==index,"sku-item-disabled":index==3}'
<view class='sku-item'
:class='{"sku-item-active":currentSizeIndex==index,"sku-item-disabled":item.existingNumber<=0}'
v-for='(item, index) in skuSizeList' :key='index'
@click='sizeChange(index)'>
<text>{{ item }}</text>
<text>{{ item.sizeName }}</text>
</view>
</view>
<view class='c-flex-row' style='margin-top: 52rpx'>
<text class='sku-title'>购买数量</text>
<view class='count-change-view c-flex-row'>
<view class='count-image' @click.stop='countChange(false)'>
<image :src='assetsUrl("ic_reduce.png")' />
@@ -48,40 +48,37 @@
</template>
<script lang='ts' setup>
import { Proptype, ref } from 'vue';
import { ref } from 'vue';
import { assetsUrl } from '@/utils/assets';
import { GoodsBean } from '@/api/goods/types';
const props = defineProps({
bean: Object as Proptype<GoodsBean>
});
const emits = defineEmits(['confirm']);
const popupRef = ref();
const skuColorList = ref<string[]>([]);
const currentColorIndex = ref(0);
const skuSizeList = ref(['120cm', '130cm', '140cm', '150cm', '160cm', '170cm']);
const currentSizeIndex = ref(0);
const goodsCount = ref(1);
const show = () => {
popupRef.value.open();
// props.bean.stocks.map((res: { colorName: string }) => res.colorName).forEach((colorName: string) => {
// if(skuColorList.value.includes(colorName)) {
// skuColorList.value.push(colorName);
// }
// });
props.bean.stocks?.reduce((a: any[], b: { colorId: string, colorName: any; }) => {
if(a.find(e => e.colorId === b.colorId)) {
return a;
props.bean?.stocks?.map((res: { colorName: string }) => res.colorName).forEach((colorName: string) => {
if(!skuColorList.value.includes(colorName)) {
skuColorList.value.push(colorName);
}
a.push(b);
return a;
}, []).map((res: { colorName: any; }) =>
({
colorName: res.colorName
}));
});
popupRef.value.open();
};
const skuSizeList = computed(() => {
const currentColorName = skuColorList.value[currentColorIndex.value];
return props.bean?.stocks?.filter((res: { colorName: string }) => {
return res.colorName === currentColorName;
});
});
const close = () => {
popupRef.value.close();
};
@@ -98,13 +95,17 @@ const countChange = (isPlus: boolean) => {
if(isPlus) {
goodsCount.value++;
} else {
if(goodsCount.value > 0) {
if(goodsCount.value > 1) {
goodsCount.value--;
}
}
};
const confirm = () => {
emits('confirm', {
...skuSizeList.value[currentSizeIndex.value],
goodsCount: goodsCount.value
});
popupRef.value.close();
};