297 lines
7.6 KiB
Vue
297 lines
7.6 KiB
Vue
<template>
|
|
<uni-popup ref='popupRef' type='bottom' :mask-click='false' @touchmove.stop.prevent=''>
|
|
<view class='content'>
|
|
<view class='c-flex-row' style='align-items: flex-start'>
|
|
<image class='goods-image' :src='goodsDetailBean?.images||defaultImage' />
|
|
<view class='c-flex-column' style='flex: 1;display: inline-grid'>
|
|
<text class='goods-name'>{{ goodsDetailBean?.name || '未知' }}</text>
|
|
<text class='goods-price'>
|
|
{{ flashPrice > 0 ? `${flashPrice}` : `${goodsDetailBean?.consumePrice || 0}` || 0
|
|
}}
|
|
</text>
|
|
</view>
|
|
<image class='close-image' :src='assetsUrl("ic_close.png")' @click.stop='close' />
|
|
</view>
|
|
<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}'
|
|
v-for='(item, index) in skuColorList' :key='index'
|
|
@click='colorChange(index)'>
|
|
<text>{{ item||'均色' }}</text>
|
|
</view>
|
|
</view>
|
|
|
|
<view class='sku-title' style='margin-top: 43rpx'>尺码</view>
|
|
<view class='sku-color-list c-flex-row'>
|
|
<view class='sku-item'
|
|
v-if='(skuSizeList?.length||0)>0'
|
|
: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.sizeName||'均码' }}</text>
|
|
</view>
|
|
<text v-else style='color: #999999;font-size: 30rpx'>暂无库存</text>
|
|
</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")' />
|
|
</view>
|
|
<text>{{ goodsCount }}</text>
|
|
<view class='count-image' @click.stop='countChange(true)'>
|
|
<image :src='assetsUrl("ic_plus.png")' />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button class='primary-button' :plain='currentSizeIndex<0' :disabled='currentSizeIndex<0' @click='confirm'>
|
|
确定
|
|
</button>
|
|
</view>
|
|
</view>
|
|
</uni-popup>
|
|
</template>
|
|
|
|
<script lang='ts' setup>
|
|
import { PropType, ref } from 'vue';
|
|
import { assetsUrl, defaultImage } from '@/utils/assets';
|
|
import { showToast } from '@/utils';
|
|
import { getGoodsDetail } from '@/api/goods';
|
|
import { GoodsBean, StockBean } from '@/api/goods/types';
|
|
import { useUserStore } from '@/store';
|
|
|
|
const userStore = useUserStore();
|
|
const { userInfo } = storeToRefs(userStore);
|
|
|
|
const props = defineProps({
|
|
flashPrice: {
|
|
type: Number,
|
|
default: -1
|
|
},
|
|
exists: Object as PropType<StockBean>
|
|
});
|
|
const popupRef = ref();
|
|
const goodsDetailBean = ref<GoodsBean>();
|
|
const skuColorList = ref<string[]>([]);
|
|
const currentColorIndex = ref(0);
|
|
const currentSizeIndex = ref(-1);
|
|
const goodsCount = ref(1);
|
|
let callback: Function;
|
|
|
|
const show = async (goodsId: string, fn: Function) => {
|
|
callback = fn;
|
|
|
|
goodsDetailBean.value = await getGoodsDetail(goodsId);
|
|
goodsDetailBean.value.price = userStore.getRealGoodsPrice(goodsDetailBean.value?.price,goodsDetailBean.value?.priceExt)
|
|
goodsDetailBean.value.consumePrice = Number((goodsDetailBean.value?.price * userInfo?.value.userDiscount).toFixed(2));
|
|
|
|
if((goodsDetailBean.value?.stocks?.length || 0) <= 0) {
|
|
showToast('暂无库存');
|
|
return;
|
|
}
|
|
|
|
goodsDetailBean.value?.stocks?.map((res: { colorName: string }) => res.colorName).forEach((colorName: string) => {
|
|
if(!skuColorList.value.includes(colorName)) {
|
|
skuColorList.value.push(colorName);
|
|
}
|
|
});
|
|
|
|
setTimeout(() => {
|
|
popupRef.value.open();
|
|
}, 200);
|
|
|
|
if(props.exists) {
|
|
const colorIndex = skuColorList.value?.findIndex(res => res === props.exists?.colorName);
|
|
const sizeIndex = skuSizeList.value?.findIndex(res => res.sizeId === props.exists?.sizeId);
|
|
|
|
colorChange(colorIndex || 0);
|
|
sizeChange(sizeIndex || 0);
|
|
goodsCount.value = props.exists?.count;
|
|
}
|
|
|
|
if(skuSizeList) {
|
|
// skuSizeList.value![0].existingNumber = 2;
|
|
// skuSizeList.value![2].existingNumber = 2;
|
|
}
|
|
};
|
|
|
|
const skuSizeList = computed(() => {
|
|
const currentColorName = skuColorList.value[currentColorIndex.value];
|
|
let sizeList = goodsDetailBean.value?.stocks?.filter((res: { colorName: string }) => {
|
|
return res.colorName === currentColorName;
|
|
});
|
|
currentSizeIndex.value = sizeList?.findIndex(res => res.existingNumber > 0) || 0;
|
|
return sizeList;
|
|
});
|
|
|
|
const colorChange = (index: number) => {
|
|
currentColorIndex.value = index;
|
|
};
|
|
|
|
const sizeChange = (index: number) => {
|
|
if((skuSizeList.value![index].existingNumber || 0) <= 0) {
|
|
showToast('库存不足');
|
|
} else {
|
|
currentSizeIndex.value = index;
|
|
}
|
|
};
|
|
|
|
const countChange = (isPlus: boolean) => {
|
|
if(isPlus) {
|
|
goodsCount.value += 1;
|
|
} else {
|
|
if(goodsCount.value > 1) {
|
|
goodsCount.value -= 1;
|
|
}
|
|
}
|
|
};
|
|
|
|
const confirm = () => {
|
|
if(callback instanceof Function) {
|
|
callback({
|
|
...goodsDetailBean.value,
|
|
checkedStock: {
|
|
...skuSizeList.value![currentSizeIndex.value],
|
|
count: goodsCount.value
|
|
}
|
|
});
|
|
}
|
|
popupRef.value.close();
|
|
};
|
|
|
|
const close = () => {
|
|
popupRef.value.close();
|
|
};
|
|
|
|
defineExpose({
|
|
show
|
|
});
|
|
</script>
|
|
|
|
<style lang='scss' scoped>
|
|
.content {
|
|
background: #FFFFFF;
|
|
border-radius: 20rpx 20rpx 0 0;
|
|
padding: 23rpx 30rpx 78rpx 30rpx;
|
|
|
|
.goods-image {
|
|
width: 186rpx;
|
|
height: 186rpx;
|
|
border-radius: 10rpx;
|
|
margin-top: -50rpx;
|
|
margin-right: 18rpx;
|
|
}
|
|
|
|
.goods-name {
|
|
font-weight: bold;
|
|
font-size: 32rpx;
|
|
color: #333333;
|
|
white-space: nowrap;
|
|
text-overflow: ellipsis;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.goods-price {
|
|
font-weight: bold;
|
|
font-size: 40rpx;
|
|
color: #D95554;
|
|
margin-top: 40rpx;
|
|
}
|
|
|
|
.goods-price:before {
|
|
content: '¥';
|
|
font-size: 28rpx;
|
|
margin-right: 2rpx;
|
|
}
|
|
|
|
.close-image {
|
|
width: 45rpx;
|
|
height: 45rpx;
|
|
}
|
|
|
|
.sku-view {
|
|
margin-top: 30rpx;
|
|
|
|
.sku-title {
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
flex: 1;
|
|
}
|
|
|
|
.sku-color-list {
|
|
display: grid;
|
|
grid-template-columns:repeat(4, 1fr);
|
|
margin-top: 20rpx;
|
|
gap: 20rpx;
|
|
}
|
|
|
|
.sku-item {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
background: #F2F2F2;
|
|
border-radius: 26rpx;
|
|
font-weight: 400;
|
|
font-size: 26rpx;
|
|
color: #333333;
|
|
padding: 7rpx 32rpx;
|
|
}
|
|
|
|
.sku-item-active {
|
|
@extend .sku-item;
|
|
background: #FFF1F1;
|
|
color: #D95554;
|
|
}
|
|
|
|
.sku-item-disabled {
|
|
@extend .sku-item;
|
|
background: #F2F2F2;
|
|
color: #BEBEBE;
|
|
}
|
|
|
|
.count-change-view {
|
|
.count-image {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
background: #FBFBFB;
|
|
|
|
image {
|
|
width: 15rpx;
|
|
height: 2rpx;
|
|
}
|
|
}
|
|
|
|
.count-image:nth-of-type(2) image {
|
|
width: 17rpx;
|
|
height: 17rpx;
|
|
}
|
|
|
|
text {
|
|
display: flex;
|
|
width: 54rpx;
|
|
height: 54rpx;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: 400;
|
|
font-size: 30rpx;
|
|
color: #333333;
|
|
background: #F2F2F2;
|
|
}
|
|
}
|
|
|
|
.primary-button {
|
|
width: 100%;
|
|
margin-top: 50rpx;
|
|
border: none;
|
|
}
|
|
}
|
|
}
|
|
</style>
|