Merge branch 'master' of https://codeup.aliyun.com/bsdtec/biz-mobile-react-cloud
This commit is contained in:
dzc committed
commit
44fbb4af25
6 files changed
+1010
-934
No files matched your search
@@ -1,58 +1,64 @@
|
||||
<template>
|
||||
<tm-drawer z-index="100" v-model:show="props.modelValue" showFooter title="购物车" position="bottom" size="60%" @close="doClose">
|
||||
<product-row
|
||||
v-for="(v, i) in props.carList"
|
||||
mode="car"
|
||||
:key="v.id"
|
||||
v-model="v.productCount"
|
||||
:pic="v.productPic"
|
||||
:count="v.productCount"
|
||||
:name="v.name"
|
||||
:price="v.productPrice"
|
||||
:marketPrice="v.marketPrice"
|
||||
:salesCount="v.salesCount"
|
||||
:stock="v.stock"
|
||||
@add="() => emit('add', v)"
|
||||
@remove="emit('remove', v)"
|
||||
/>
|
||||
<tm-drawer
|
||||
z-index="100"
|
||||
v-model:show="props.modelValue"
|
||||
showFooter
|
||||
title="购物车"
|
||||
position="bottom"
|
||||
size="60%"
|
||||
@close="doClose"
|
||||
>
|
||||
<product-row
|
||||
mode="car"
|
||||
v-for="v in carList"
|
||||
:key="v.id"
|
||||
:productId="v.productId"
|
||||
:merchantId="v.merchantId"
|
||||
:picUrl="v.productPic"
|
||||
:productName="v.productName"
|
||||
:productCount="v.productCount"
|
||||
:productPrice="v.productPrice"
|
||||
@add="(v) => emit('add', v)"
|
||||
@remove="(v) => emit('remove', v)"
|
||||
/>
|
||||
|
||||
<template #footer>
|
||||
<view class="car z-200 p-x-30rpx p-y-30rpx bg-white" :style="{ marginBottom: getHeight() }">
|
||||
<product-total :totPrice="props.totPrice" :totCount="props.totCount" @doPay="doPay" />
|
||||
</view>
|
||||
</template>
|
||||
</tm-drawer>
|
||||
<template #footer>
|
||||
<view class="car z-200 p-x-30rpx p-y-30rpx bg-white" :style="{ marginBottom: getHeight() }">
|
||||
<product-total :totPrice="props.totPrice" :totCount="props.totCount" @doPay="doPay" />
|
||||
</view>
|
||||
</template>
|
||||
</tm-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import ProductRow from "./product-row.vue";
|
||||
import ProductTotal from "./product-total.vue";
|
||||
import ProductRow from "./product-row.vue"
|
||||
import ProductTotal from "./product-total.vue"
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "doPay", "add", "remove"]);
|
||||
const emit = defineEmits(["update:modelValue", "doPay", "add", "remove"])
|
||||
|
||||
export type Props = {
|
||||
modelValue: any;
|
||||
carList: any;
|
||||
totPrice: number;
|
||||
totCount: number;
|
||||
};
|
||||
modelValue: any
|
||||
carList: any
|
||||
totPrice: number
|
||||
totCount: number
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: false,
|
||||
carList: [],
|
||||
totPrice: 0,
|
||||
totCount: 0,
|
||||
});
|
||||
modelValue: false,
|
||||
carList: [],
|
||||
totPrice: 0,
|
||||
totCount: 0,
|
||||
})
|
||||
|
||||
const doClose = () => {
|
||||
emit("update:modelValue", false);
|
||||
};
|
||||
emit("update:modelValue", false)
|
||||
}
|
||||
|
||||
const doPay = () => {
|
||||
emit("doPay");
|
||||
};
|
||||
emit("doPay")
|
||||
}
|
||||
|
||||
const getHeight = () => {
|
||||
const { bottom } = uni.getSystemInfoSync().safeAreaInsets!;
|
||||
return `-${bottom + 16}px`;
|
||||
};
|
||||
const { bottom } = uni.getSystemInfoSync().safeAreaInsets!
|
||||
return `-${bottom + 16}px`
|
||||
}
|
||||
</script>
|
||||
@@ -1,55 +1,103 @@
|
||||
<template>
|
||||
<view
|
||||
class="flex-row items-start card p-x-15rpx p-y-25rpx m-b-20rpx"
|
||||
@tap="props.id && router.jump('/pages/shop/product-detail', { id: props.id })"
|
||||
>
|
||||
<image class="size-140rpx rounded-12rpx" :src="filePath(props.picUrl)" mode="aspectFill" />
|
||||
<view class="flex-1 m-l-20rpx">
|
||||
<view class="sub-text-28 show-line">{{ props.productName }}</view>
|
||||
<view class="m-t-10rpx flex-row items-center">
|
||||
<!-- <view class="second-text-32 color-red!"> ¥{{ hooks.useMoney(props.price) }} </view> -->
|
||||
<!-- <view class="m-l-20rpx second-text-24 line-through"> ¥{{ hooks.useMoney(props.marketPrice) }} </view> -->
|
||||
</view>
|
||||
<view class="flex-row items-center">
|
||||
<view class="second-text-24">{{ hooks.useFormatNum("库存", "", props.stock) }}</view>
|
||||
<view class="w-1px h-20rpx m-x-5rpx bg-#999" />
|
||||
<view class="second-text-24">{{ hooks.useFormatNum("销量", "", props.salesCount) }}</view>
|
||||
</view>
|
||||
<view
|
||||
class="second-text-24 w-200rpx py-1 border-1px border-solid border-#0094ff bg-#0094ff c-white! border-rd-8 text-center mt-3 float-right"
|
||||
@tap.stop="handleClickAddToCar({ ...props })"
|
||||
>
|
||||
加入购物车
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view
|
||||
:class="[props.mode == 'car' ? 'car_border' : '']"
|
||||
class="flex-row items-start card p-x-15rpx p-y-25rpx m-b-20rpx"
|
||||
@tap="
|
||||
props.productId && props.mode === 'default' && router.jump('/pages/shop/product-detail', { id: props.productId })
|
||||
"
|
||||
>
|
||||
<image class="size-140rpx rounded-12rpx" :src="props.picUrl" mode="aspectFill" />
|
||||
<view class="flex-1 m-l-20rpx">
|
||||
<view class="sub-text-28 show-line">{{ props.productName }}</view>
|
||||
<view class="m-t-10rpx flex-row items-center">
|
||||
<!-- <view class="second-text-32 color-red!"> ¥{{ hooks.useMoney(props.price) }} </view> -->
|
||||
<!-- <view class="m-l-20rpx second-text-24 line-through"> ¥{{ hooks.useMoney(props.marketPrice) }} </view> -->
|
||||
</view>
|
||||
<view v-if="props.mode == 'car'" class="flex-row justify-between items-center">
|
||||
<view class="m-t-10rpx second-text-32 c-red!"> ￥{{ (Number(productPrice) / 100).toFixed(2) }} </view>
|
||||
<view class="m-t-10rpx second-text-28">x{{ productCount }}</view>
|
||||
</view>
|
||||
<view v-if="mode === 'default'" class="flex-row items-center">
|
||||
<view class="second-text-24">{{ hooks.useFormatNum("库存", "", props.stock) }}</view>
|
||||
<view class="w-1px h-20rpx m-x-5rpx bg-#999" />
|
||||
<view class="second-text-24">{{ hooks.useFormatNum("销量", "", props.salesCount) }}</view>
|
||||
</view>
|
||||
<view
|
||||
v-if="mode === 'default'"
|
||||
class="second-text-24 w-200rpx py-1 border-1px border-solid border-#0094ff bg-#0094ff c-white! border-rd-8 text-center mt-3 float-right"
|
||||
@tap.stop="handleClickAddToCar"
|
||||
>
|
||||
加入购物车
|
||||
</view>
|
||||
|
||||
<view v-if="mode === 'car'" class="flex-row items-center justify-end m-t-20rpx">
|
||||
<view
|
||||
class="flex-row-center size-40rpx rounded-full border-1px border-solid border-color-#0094ff"
|
||||
@tap.stop="remove"
|
||||
>
|
||||
<view class="iconfont icon-a--" />
|
||||
</view>
|
||||
<view class="sub-text-28 m-x-20rpx">{{ productCount }}</view>
|
||||
<view class="flex-row-center size-40rpx rounded-full bg-#0094ff" @tap.stop="add">
|
||||
<view class="font-size-40rpx color-white iconfont icon-a-" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { hooks, router } from "@@/index";
|
||||
import { filePath } from "@@/utils/file";
|
||||
import { hooks, router } from "@@/index"
|
||||
|
||||
const emit = defineEmits(["onClickAddToCar"]);
|
||||
const emit = defineEmits(["onClickAddToCar", "add", "remove"])
|
||||
|
||||
export type Props = {
|
||||
id: string;
|
||||
merchantId: string;
|
||||
picUrl: string;
|
||||
productName: string;
|
||||
salesCount: number;
|
||||
stock: number;
|
||||
onClickAddToCar?: () => void;
|
||||
};
|
||||
mode?: "default" | "car"
|
||||
productId: string
|
||||
merchantId: string
|
||||
picUrl: string
|
||||
productName: string
|
||||
productCount?: number
|
||||
productPrice?: number
|
||||
salesCount?: number
|
||||
stock?: number
|
||||
onClickAddToCar?: () => void
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
id: "",
|
||||
merchantId: "",
|
||||
picUrl: "",
|
||||
productName: "",
|
||||
salesCount: 0,
|
||||
stock: 0,
|
||||
});
|
||||
mode: "default",
|
||||
productId: "",
|
||||
merchantId: "",
|
||||
picUrl: "",
|
||||
productName: "",
|
||||
productCount: 0,
|
||||
productPrice: 0,
|
||||
salesCount: 0,
|
||||
stock: 0,
|
||||
})
|
||||
|
||||
const handleClickAddToCar = (productData: any) => {
|
||||
emit("onClickAddToCar", productData);
|
||||
};
|
||||
const handleClickAddToCar = () => {
|
||||
if (props.productId) {
|
||||
emit("onClickAddToCar", { ...props })
|
||||
}
|
||||
}
|
||||
|
||||
const add = () => {
|
||||
if (props.productCount + 1 >= 99) {
|
||||
return
|
||||
}
|
||||
emit("add", { productId: props.productId, productCount: props.productCount + 1 })
|
||||
}
|
||||
|
||||
const remove = () => {
|
||||
if (props.productCount - 1 < 0) {
|
||||
return
|
||||
}
|
||||
emit("remove", { productId: props.productId, productCount: props.productCount - 1 })
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.car_border {
|
||||
border: 1px solid #f2f2f2;
|
||||
}
|
||||
</style>
|
||||
@@ -1,105 +1,118 @@
|
||||
<template>
|
||||
<tm-drawer z-index="100" v-model:show="props.modelValue" showFooter title="加入购物车" position="bottom" size="60%" @close="doClose">
|
||||
<view class="px-20rpx">
|
||||
<scroll-view scroll-y="true" class="max-h-7xl" @touchmove.stop>
|
||||
<!-- 商品信息 -->
|
||||
<view class="m-3 flex-row">
|
||||
<image class="w-120rpx h-120rpx" :src="filePath(productData.picUrl)" mode="aspectFill" />
|
||||
<view class="w-100% ml-3 flex flex-col justify-between">
|
||||
<view class="sub-text-30 font-600! ws-nowrap text-ellipsis overflow-hidden">{{ productData.productName }}</view>
|
||||
<view class="flex justify-between items-center">
|
||||
<view class="flex-col justify-between items-left">
|
||||
<view class="text-30 line-through">售价￥{{ curRetailPrice }}</view>
|
||||
<view class="c-red text-34">促销价￥{{ curPromotionPrice }}</view>
|
||||
</view>
|
||||
<view class="flex-col justify-between items-left">
|
||||
<view class="sub-text-28">库存{{ productData.stock }}</view>
|
||||
<view class="sub-text-28">已售{{ productData.salesCount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<tm-drawer
|
||||
z-index="100"
|
||||
v-model:show="props.modelValue"
|
||||
showFooter
|
||||
title="加入购物车"
|
||||
position="bottom"
|
||||
size="60%"
|
||||
@close="doClose"
|
||||
>
|
||||
<view class="px-20rpx">
|
||||
<scroll-view scroll-y="true" class="max-h-7xl" @touchmove.stop>
|
||||
<!-- 商品信息 -->
|
||||
<view class="m-3 flex-row">
|
||||
<image class="w-120rpx h-120rpx" :src="filePath(state.goodsDetail.picUrl)" mode="aspectFill" />
|
||||
<view class="w-100% ml-3 flex flex-col justify-between">
|
||||
<view class="sub-text-30 font-600! ws-nowrap text-ellipsis overflow-hidden">
|
||||
{{ state.goodsDetail.productName }}
|
||||
</view>
|
||||
<view class="flex justify-between items-center">
|
||||
<view class="flex-col justify-between items-left">
|
||||
<view class="sub-text-26 line-through">售价￥{{ retailPrice }}</view>
|
||||
<view class="sub-text-32 c-red!">促销价￥{{ promotionPrice }}</view>
|
||||
</view>
|
||||
<view class="flex-col justify-between items-left">
|
||||
<view class="sub-text-28">库存{{ state.goodsDetail.stock }}</view>
|
||||
<view class="sub-text-28">已售{{ state.goodsDetail.salesCount }}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 规格 -->
|
||||
<!-- <view v-for="property in skuData" :key="property.id"> -->
|
||||
<view class="sub-text-32 font-600! my-2">规格</view>
|
||||
<view class="flex flex-wrap">
|
||||
<button
|
||||
class="text-center bg-#F4F4F4 border-rd-8 c-black ml-0 mr-2 mb-2 border-none outline-none sub-text-34"
|
||||
v-for="value in state.goodsInfo?.skuList"
|
||||
:key="value.id"
|
||||
:disabled="value.disabled === true"
|
||||
:style="{ 'background-color': state.selectedSku.id === value.id ? '#0094ff' : '#F4F4F4' }"
|
||||
@click="onSelectSku(value)"
|
||||
>
|
||||
{{ value.spec + value.unit }}
|
||||
</button>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
<!-- 规格 -->
|
||||
<!-- <view v-for="property in skuData" :key="property.id"> -->
|
||||
<view class="sub-text-32 font-600! my-2">规格</view>
|
||||
<view class="flex flex-wrap">
|
||||
<button
|
||||
class="text-center border-rd-4 c-black ml-0 mr-2 mb-2 border-1 border-solid border-blueGray sub-text-34"
|
||||
v-for="value in state.goodsDetail?.skuList"
|
||||
:key="value.id"
|
||||
:style="{ 'background-color': state.selectedSku.id === value.id ? '#0094ff' : '#F4F4F4' }"
|
||||
@click="onSelectSku(value)"
|
||||
>
|
||||
{{ value.spec + value.unit }}
|
||||
</button>
|
||||
</view>
|
||||
<!-- </view> -->
|
||||
|
||||
<!-- 数量 -->
|
||||
<view class="sub-text-32 font-600! my-2">购买数量</view>
|
||||
<view class="flex-row items-center justify-end m-t-20rpx">
|
||||
<text
|
||||
class="size-40rpx rounded-full flex justify-center items-center font-600! bg-#0094ff"
|
||||
:style="{ backgroundColor: state.count <= 1 ? '#999999' : '#0094ff' }"
|
||||
@click="handleNumRemove()"
|
||||
>
|
||||
-
|
||||
</text>
|
||||
<text class="sub-text-28 m-x-20rpx">{{ String(state.count).padStart(2, "0") }}</text>
|
||||
<text
|
||||
class="size-40rpx rounded-full flex justify-center items-center font-600! bg-#0094ff"
|
||||
:style="{ backgroundColor: state.count >= state.goodsInfo.stock ? '#999999' : '#0094ff' }"
|
||||
@click="handleNumAdd()"
|
||||
>
|
||||
+
|
||||
</text>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
<!-- 数量 -->
|
||||
<view class="sub-text-32 font-600! my-2">购买数量</view>
|
||||
<view class="flex-row items-center justify-end m-t-20rpx">
|
||||
<view class="flex-row items-center justify-end m-t-20rpx">
|
||||
<view
|
||||
class="flex-row-center size-40rpx rounded-full border-1px border-solid border-color-#0094ff"
|
||||
@tap.stop="handleNumRemove"
|
||||
>
|
||||
<view class="iconfont icon-a--" />
|
||||
</view>
|
||||
<view class="sub-text-28 m-x-20rpx">{{ String(state.goodsCount).padStart(2, "0") }}</view>
|
||||
<view class="flex-row-center size-40rpx rounded-full bg-#0094ff" @tap.stop="handleNumAdd">
|
||||
<view class="font-size-40rpx color-white iconfont icon-a-" />
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<template #footer>
|
||||
<button class="mx-10 border-rd-8 bg-#0094ff" @tap="handleClickAddToCar">加入购物车</button>
|
||||
</template>
|
||||
</tm-drawer>
|
||||
<template #footer>
|
||||
<button class="mx-12 border-rd-8 bg-#0094ff sub-text-30 py-2 c-white!" @tap="handleClickAddToCar">
|
||||
加入购物车
|
||||
</button>
|
||||
</template>
|
||||
</tm-drawer>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { shopApi } from "@/sheep/api";
|
||||
import { filePath } from "@/sheep/utils/file";
|
||||
import { computed, reactive, ref, watch } from "vue";
|
||||
import { shopApi } from "@/sheep/api"
|
||||
import { filePath } from "@/sheep/utils/file"
|
||||
import { computed, reactive, watch } from "vue"
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "onAddToCar"]);
|
||||
const emit = defineEmits(["update:modelValue", "onAddToCar"])
|
||||
|
||||
export type Props = {
|
||||
modelValue: boolean;
|
||||
productData: any;
|
||||
onAddToCar?: () => void;
|
||||
};
|
||||
modelValue: boolean
|
||||
productData: any
|
||||
onAddToCar?: () => void
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: false,
|
||||
productData: {},
|
||||
});
|
||||
modelValue: false,
|
||||
productData: {},
|
||||
})
|
||||
const state = reactive<any>({
|
||||
count: 1,
|
||||
selectedSku: {},
|
||||
goodsInfo: {},
|
||||
});
|
||||
const curRetailPrice = computed(() => (state.selectedSku.retailPrice ? Number(state.selectedSku.retailPrice) * Number(state.count) : 0));
|
||||
const curPromotionPrice = computed(() =>
|
||||
state.selectedSku.promotionPrice ? Number(state.selectedSku.promotionPrice) * Number(state.count) : 0
|
||||
);
|
||||
goodsCount: 1,
|
||||
selectedSku: {},
|
||||
goodsDetail: {},
|
||||
})
|
||||
// 售价
|
||||
const retailPrice = computed(() =>
|
||||
state.selectedSku.retailPrice ? Number(state.selectedSku.retailPrice) * Number(state.goodsCount) : 0,
|
||||
)
|
||||
// 优惠价
|
||||
const promotionPrice = computed(() =>
|
||||
state.selectedSku.promotionPrice ? Number(state.selectedSku.promotionPrice) * Number(state.goodsCount) : 0,
|
||||
)
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
async (newValue) => {
|
||||
if (newValue) {
|
||||
const { data } = await shopApi.getSupermarketSpuDetail({ id: props.productData.id });
|
||||
state.goodsInfo = data;
|
||||
}
|
||||
}
|
||||
);
|
||||
() => props.modelValue,
|
||||
async (newValue) => {
|
||||
if (newValue) {
|
||||
// 获取商品详情
|
||||
const { data } = await shopApi.getSupermarketSpuDetail({ id: props.productData.productId })
|
||||
state.goodsDetail = data
|
||||
}
|
||||
},
|
||||
)
|
||||
|
||||
// SKU 列表
|
||||
// const skuList = computed(() => {
|
||||
@@ -133,90 +146,90 @@ watch(
|
||||
|
||||
// 选择规格
|
||||
function onSelectSku(skuItem: any) {
|
||||
// const index = state.currentPropertyArray.findIndex((item: any) => item.id === skuItem.id);
|
||||
// if (index === -1) {
|
||||
if (state.selectedSku.id === skuItem.id) {
|
||||
state.selectedSku = {};
|
||||
} else {
|
||||
state.selectedSku = skuItem;
|
||||
}
|
||||
// } else {
|
||||
// state.currentPropertyArray.splice(index, 1);
|
||||
// }
|
||||
// const index = state.currentPropertyArray.findIndex((item: any) => item.id === skuItem.id);
|
||||
// if (index === -1) {
|
||||
if (state.selectedSku.id === skuItem.id) {
|
||||
state.selectedSku = {}
|
||||
} else {
|
||||
state.selectedSku = skuItem
|
||||
}
|
||||
// } else {
|
||||
// state.currentPropertyArray.splice(index, 1);
|
||||
// }
|
||||
|
||||
// 清空已选择
|
||||
// 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: any = [];
|
||||
// state.currentPropertyArray.forEach((currentPropertyId: string) => {
|
||||
// if (currentPropertyId !== "") {
|
||||
// // currentPropertyId 为空是反选 填充的
|
||||
// choosePropertyId.push(currentPropertyId);
|
||||
// }
|
||||
// });
|
||||
// 当前所选 property 下，所有可以选择的 SKU 们
|
||||
// let newSkuList = getCanUseSkuList();
|
||||
// 判断所有 property 大类是否选择完成
|
||||
// if (choosePropertyId.length === skuData.length && newSkuList.length) {
|
||||
// newSkuList[0].name = state.selectedSku.goods_num || 1;
|
||||
// state.selectedSku = newSkuList[0];
|
||||
// } else {
|
||||
// state.selectedSku = {};
|
||||
// }
|
||||
// if (choosePropertyId.length === skuData.value.length) {
|
||||
// state.selectedSku = state.currentPropertyArray;
|
||||
// }
|
||||
// 改变 property 禁用状态
|
||||
// changeDisabled(isChecked, 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: any = [];
|
||||
// state.currentPropertyArray.forEach((currentPropertyId: string) => {
|
||||
// if (currentPropertyId !== "") {
|
||||
// // currentPropertyId 为空是反选 填充的
|
||||
// choosePropertyId.push(currentPropertyId);
|
||||
// }
|
||||
// });
|
||||
// 当前所选 property 下，所有可以选择的 SKU 们
|
||||
// let newSkuList = getCanUseSkuList();
|
||||
// 判断所有 property 大类是否选择完成
|
||||
// if (choosePropertyId.length === skuData.length && newSkuList.length) {
|
||||
// newSkuList[0].name = state.selectedSku.goods_num || 1;
|
||||
// state.selectedSku = newSkuList[0];
|
||||
// } else {
|
||||
// state.selectedSku = {};
|
||||
// }
|
||||
// if (choosePropertyId.length === skuData.value.length) {
|
||||
// state.selectedSku = state.currentPropertyArray;
|
||||
// }
|
||||
// 改变 property 禁用状态
|
||||
// changeDisabled(isChecked, propertyId, valueId);
|
||||
}
|
||||
|
||||
const handleNumAdd = () => {
|
||||
if (state.count >= state.goodsInfo.stock) {
|
||||
return;
|
||||
}
|
||||
state.count += 1;
|
||||
};
|
||||
if (state.goodsCount >= state.goodsDetail.stock) {
|
||||
return
|
||||
}
|
||||
state.goodsCount += 1
|
||||
}
|
||||
const handleNumRemove = () => {
|
||||
if (state.count <= 1) {
|
||||
return;
|
||||
}
|
||||
state.count -= 1;
|
||||
};
|
||||
if (state.goodsCount <= 1) {
|
||||
return
|
||||
}
|
||||
state.goodsCount -= 1
|
||||
}
|
||||
|
||||
// 点击加入购物车
|
||||
const handleClickAddToCar = () => {
|
||||
if (state.goodsInfo.stock === 0) {
|
||||
uni.showToast({
|
||||
title: "库存不足",
|
||||
icon: "none",
|
||||
duration: 1000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
if (!state.selectedSku.id) {
|
||||
uni.showToast({
|
||||
title: "请选择规格",
|
||||
icon: "none",
|
||||
duration: 1000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
emit("onAddToCar", { ...props.productData, count: state.count, sku: state.selectedSku, goodsPrice: curPromotionPrice.value });
|
||||
};
|
||||
if (state.goodsDetail.stock === 0) {
|
||||
uni.showToast({
|
||||
title: "库存不足",
|
||||
icon: "none",
|
||||
duration: 1000,
|
||||
})
|
||||
return
|
||||
}
|
||||
if (!state.selectedSku.id) {
|
||||
uni.showToast({
|
||||
title: "请选择规格",
|
||||
icon: "none",
|
||||
duration: 1000,
|
||||
})
|
||||
return
|
||||
}
|
||||
emit("onAddToCar", { ...state.goodsDetail, productCount: state.goodsCount, productId: state.selectedSku.id })
|
||||
}
|
||||
|
||||
const doClose = () => {
|
||||
emit("update:modelValue", false);
|
||||
emit("update:modelValue", false)
|
||||
|
||||
state.count = 1;
|
||||
state.selectedSku = {};
|
||||
state.goodsInfo = {};
|
||||
};
|
||||
state.goodsCount = 1
|
||||
state.selectedSku = {}
|
||||
state.goodsDetail = {}
|
||||
}
|
||||
</script>
|
||||
@@ -1,447 +1,447 @@
|
||||
<template>
|
||||
<!-- 规格弹窗 -->
|
||||
<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.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">
|
||||
{{ formatStock("exact", state.selectedSku.stock || goodsInfo.stock) }}
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- 规格弹窗 -->
|
||||
<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.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">
|
||||
{{ 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="[
|
||||
{
|
||||
'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)"
|
||||
>
|
||||
{{ 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 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,
|
||||
},
|
||||
{
|
||||
'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"
|
||||
v-model="state.selectedSku.goods_num"
|
||||
@change="onNumberChange($event)"
|
||||
/>
|
||||
</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 emits = defineEmits(["change", "addCart", "buy", "close"])
|
||||
const props = defineProps({
|
||||
goodsInfo: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
goodsInfo: {
|
||||
type: Object,
|
||||
default() {},
|
||||
},
|
||||
show: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
})
|
||||
|
||||
const state = reactive({
|
||||
selectedSku: {}, // 选中的 SKU
|
||||
currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
|
||||
});
|
||||
selectedSku: {}, // 选中的 SKU
|
||||
currentPropertyArray: [], // 当前选中的属性，实际是个 Map。key 是 property 编号，value 是 value 编号
|
||||
})
|
||||
|
||||
const propertyList = convertProductPropertyList(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;
|
||||
});
|
||||
let skuPrices = props.goodsInfo.skus
|
||||
for (let price of skuPrices) {
|
||||
price.value_id_array = price.properties.map((item) => item.valueId)
|
||||
}
|
||||
return skuPrices
|
||||
})
|
||||
|
||||
watch(
|
||||
() => state.selectedSku,
|
||||
(newVal) => {
|
||||
emits("change", newVal);
|
||||
},
|
||||
{
|
||||
immediate: true, // 立即执行
|
||||
deep: true, // 深度监听
|
||||
}
|
||||
);
|
||||
() => state.selectedSku,
|
||||
(newVal) => {
|
||||
emits("change", newVal)
|
||||
},
|
||||
{
|
||||
immediate: true, // 立即执行
|
||||
deep: true, // 深度监听
|
||||
},
|
||||
)
|
||||
|
||||
// 输入框改变数量
|
||||
function onNumberChange(e) {
|
||||
if (e === 0) return;
|
||||
if (state.selectedSku.goods_num === e) return;
|
||||
state.selectedSku.goods_num = e;
|
||||
if (e === 0) return
|
||||
if (state.selectedSku.goods_num === e) return
|
||||
state.selectedSku.goods_num = e
|
||||
}
|
||||
|
||||
// 加入购物车
|
||||
function onAddCart() {
|
||||
if (state.selectedSku.id <= 0) {
|
||||
sheep.$helper.toast("请选择规格");
|
||||
return;
|
||||
}
|
||||
if (state.selectedSku.stock <= 0) {
|
||||
sheep.$helper.toast("库存不足");
|
||||
return;
|
||||
}
|
||||
if (state.selectedSku.id <= 0) {
|
||||
sheep.$helper.toast("请选择规格")
|
||||
return
|
||||
}
|
||||
if (state.selectedSku.stock <= 0) {
|
||||
sheep.$helper.toast("库存不足")
|
||||
return
|
||||
}
|
||||
|
||||
emits("addCart", state.selectedSku);
|
||||
emits("addCart", state.selectedSku)
|
||||
}
|
||||
|
||||
// 立即购买
|
||||
function onBuy() {
|
||||
if (state.selectedSku.id <= 0) {
|
||||
sheep.$helper.toast("请选择规格");
|
||||
return;
|
||||
}
|
||||
if (state.selectedSku.stock <= 0) {
|
||||
sheep.$helper.toast("库存不足");
|
||||
return;
|
||||
}
|
||||
emits("buy", state.selectedSku);
|
||||
if (state.selectedSku.id <= 0) {
|
||||
sheep.$helper.toast("请选择规格")
|
||||
return
|
||||
}
|
||||
if (state.selectedSku.stock <= 0) {
|
||||
sheep.$helper.toast("库存不足")
|
||||
return
|
||||
}
|
||||
emits("buy", state.selectedSku)
|
||||
}
|
||||
|
||||
// 改变禁用状态：计算每个 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();
|
||||
}
|
||||
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()
|
||||
}
|
||||
|
||||
// 所有存在并且有库存未选择的 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() !== "") {
|
||||
return;
|
||||
}
|
||||
// currentPropertyId 为空是反选 填充的
|
||||
let index = noChooseValueIds.indexOf(currentPropertyId);
|
||||
if (index >= 0) {
|
||||
// currentPropertyId 存在于 noChooseValueIds
|
||||
noChooseValueIds.splice(index, 1);
|
||||
}
|
||||
});
|
||||
}
|
||||
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];
|
||||
}
|
||||
// 当前已选择的 property 数组
|
||||
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 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 不禁用
|
||||
}
|
||||
}
|
||||
for (let propertyIndex in propertyList) {
|
||||
// 当前点击的 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 不禁用
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// 当前所选属性下，获取所有有库存的 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;
|
||||
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
|
||||
}
|
||||
|
||||
// 选择规格
|
||||
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;
|
||||
}
|
||||
// 清空已选择
|
||||
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);
|
||||
}
|
||||
});
|
||||
// 选中的 property 大类
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
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;
|
||||
font-size: 26rpx;
|
||||
font-weight: 400;
|
||||
text-decoration: line-through;
|
||||
color: $gray-c;
|
||||
font-family: OPPOSANS;
|
||||
|
||||
&::before {
|
||||
content: "￥";
|
||||
}
|
||||
&::before {
|
||||
content: "￥";
|
||||
}
|
||||
}
|
||||
</style>
|
||||
+332
-323
@@ -1,389 +1,398 @@
|
||||
<template>
|
||||
<crud-layout mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||||
<tm-sticky>
|
||||
<!-- start 轮播 start -->
|
||||
<z-swiper>
|
||||
<z-swiper-item v-for="(v, i) in state.detail.picUrl?.split(',')" :key="i">
|
||||
<image class="w-100vw h-400rpx" :src="filePath(state.detail?.swiperPic)" mode="aspectFill" />
|
||||
</z-swiper-item>
|
||||
</z-swiper>
|
||||
<!-- end 轮播 end -->
|
||||
<crud-layout mainIsScroll tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||||
<tm-sticky>
|
||||
<!-- start 轮播 start -->
|
||||
<z-swiper>
|
||||
<z-swiper-item v-for="(v, i) in state.detail.picUrl?.split(',')" :key="i">
|
||||
<image class="w-100vw h-400rpx" :src="filePath(state.detail?.swiperPic)" mode="aspectFill" />
|
||||
</z-swiper-item>
|
||||
</z-swiper>
|
||||
<!-- end 轮播 end -->
|
||||
|
||||
<tm-sticky-header>
|
||||
<view class="m-x-30rpx">
|
||||
<view class="h-15rpx" />
|
||||
<!-- start 简介 start -->
|
||||
<view flex-row card p-20rpx>
|
||||
<image class="w-160rpx h-160rpx rounded-12rpx" :src="filePath(state.detail.logoPic)" mode="aspectFill" />
|
||||
<view class="flex-1 flex-col m-l-20rpx">
|
||||
<view class="flex-row items-center justify-between">
|
||||
<view class="flex-row-center sub-text-36">
|
||||
<text>{{ state.detail.name }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<tm-tag size="s">{{ state.detail.deptName }}</tm-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-t-10rpx second-text-28">
|
||||
<text>营业时间</text>
|
||||
<text class="m-l-10rpx">
|
||||
{{ state.detail.jobStartTime }}
|
||||
~
|
||||
{{ state.detail.jobEndTime }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="m-t-10rpx second-text-28">
|
||||
<text>超市地址</text>
|
||||
<text class="m-l-10rpx">{{ state.detail.addressDes }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end 简介 end -->
|
||||
<view class="h-15rpx" />
|
||||
</view>
|
||||
</tm-sticky-header>
|
||||
<tm-sticky-header>
|
||||
<view class="m-x-30rpx">
|
||||
<view class="h-15rpx" />
|
||||
<!-- start 简介 start -->
|
||||
<view flex-row card p-20rpx>
|
||||
<image class="w-160rpx h-160rpx rounded-12rpx" :src="filePath(state.detail.logoPic)" mode="aspectFill" />
|
||||
<view class="flex-1 flex-col m-l-20rpx">
|
||||
<view class="flex-row items-center justify-between">
|
||||
<view class="flex-row-center sub-text-36">
|
||||
<text>{{ state.detail.name }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<tm-tag size="s">{{ state.detail.deptName }}</tm-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="m-t-10rpx second-text-28">
|
||||
<text>营业时间</text>
|
||||
<text class="m-l-10rpx">
|
||||
{{ state.detail.jobStartTime }}
|
||||
~
|
||||
{{ state.detail.jobEndTime }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="m-t-10rpx second-text-28">
|
||||
<text>超市地址</text>
|
||||
<text class="m-l-10rpx">{{ state.detail.addressDes }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<!-- end 简介 end -->
|
||||
<view class="h-15rpx" />
|
||||
</view>
|
||||
</tm-sticky-header>
|
||||
|
||||
<view class="h-15rpx" />
|
||||
<view class="h-15rpx" />
|
||||
|
||||
<!-- start 商品 start -->
|
||||
<view class="flex-row">
|
||||
<scroll-view scroll-y :style="{ height: getHeight() }" class="menu w-200rpx h-full p-l-12rpx p-b-20rpx bg-#f6f6f6">
|
||||
<view
|
||||
class="menu_item flex-row-center"
|
||||
v-for="(v, i) in state.classifyList"
|
||||
:key="v.id"
|
||||
:class="[{ menu_item_active: i == state.currentClassifyIndex }]"
|
||||
@tap="doClassify(i)"
|
||||
>
|
||||
<view class="menu_item_title show-line">
|
||||
{{ v.name }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
<!-- start 商品 start -->
|
||||
<view class="flex-row">
|
||||
<scroll-view
|
||||
scroll-y
|
||||
:style="{ height: getHeight() }"
|
||||
class="menu w-200rpx h-full p-l-12rpx p-b-20rpx bg-#f6f6f6"
|
||||
>
|
||||
<view
|
||||
class="menu_item flex-row-center"
|
||||
v-for="(v, i) in state.classifyList"
|
||||
:key="v.id"
|
||||
:class="[{ menu_item_active: i == state.currentClassifyIndex }]"
|
||||
@tap="doClassify(i)"
|
||||
>
|
||||
<view class="menu_item_title show-line">
|
||||
{{ v.name }}
|
||||
</view>
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view scroll-y :style="{ height: getHeight() }" class="flex-1 p-b-20rpx">
|
||||
<view class="m-x-15rpx">
|
||||
<product-row
|
||||
v-for="goodsItem in state.goodsList"
|
||||
:key="goodsItem.id"
|
||||
:id="goodsItem.id"
|
||||
:merchantId="goodsItem.merchantId"
|
||||
:picUrl="goodsItem.picUrl"
|
||||
:productName="goodsItem.productName"
|
||||
:salesCount="goodsItem.salesCount"
|
||||
:stock="goodsItem.stock"
|
||||
@onClickAddToCar="onClickAddToCar"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</tm-sticky>
|
||||
<!-- end 商品 end -->
|
||||
<scroll-view scroll-y :style="{ height: getHeight() }" class="flex-1 p-b-20rpx">
|
||||
<view class="m-x-15rpx">
|
||||
<product-row
|
||||
v-for="goodsItem in state.goodsList"
|
||||
:key="goodsItem.id"
|
||||
:productId="goodsItem.id"
|
||||
:merchantId="goodsItem.merchantId"
|
||||
:picUrl="filePath(goodsItem.picUrl)"
|
||||
:productName="goodsItem.productName"
|
||||
:salesCount="goodsItem.salesCount"
|
||||
:stock="goodsItem.stock"
|
||||
@onClickAddToCar="onClickAddToCar"
|
||||
/>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</tm-sticky>
|
||||
<!-- end 商品 end -->
|
||||
|
||||
<template #main-bottom>
|
||||
<view class="car z-200 p-x-30rpx p-y-30rpx bg-white">
|
||||
<product-total :totPrice="cartTotalPrice" :totCount="cartTotalCount" @doContainer="doVisibleCar" @doPay="doPay" />
|
||||
</view>
|
||||
</template>
|
||||
</crud-layout>
|
||||
<template #main-bottom>
|
||||
<view class="car z-200 p-x-30rpx p-y-30rpx bg-white">
|
||||
<product-total
|
||||
:totPrice="state.totPrice"
|
||||
:totCount="state.totCount"
|
||||
@doContainer="doVisibleCar"
|
||||
@doPay="doPay"
|
||||
/>
|
||||
</view>
|
||||
</template>
|
||||
</crud-layout>
|
||||
|
||||
<product-car
|
||||
v-model="showCarDialog"
|
||||
:carList="state.carList"
|
||||
:totPrice="state.totPrice"
|
||||
:totCount="state.totCount"
|
||||
@add="doAdd"
|
||||
@remove="remove"
|
||||
@doPay="doPay"
|
||||
/>
|
||||
<!-- 规格与数量弹框 -->
|
||||
<product-sku v-model="showSkuDialog" :productData="curProductData" @onAddToCar="onAddToCar" />
|
||||
<!-- 购物车弹框 -->
|
||||
<product-car
|
||||
v-model="showCarDialog"
|
||||
:carList="state.carList"
|
||||
:totPrice="state.totPrice"
|
||||
:totCount="state.totCount"
|
||||
@add="doAdd"
|
||||
@remove="doRemove"
|
||||
@doPay="doPay"
|
||||
/>
|
||||
<!-- 规格与数量弹框 -->
|
||||
<product-sku v-model="showSkuDialog" :productData="curProductData" @onAddToCar="onAddToCar" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, nextTick, ref, computed } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import { isEmpty } from "radash";
|
||||
import { hooks, router } from "@@/index";
|
||||
import { foodApi, merchantApi, payApi, shopApi } from "@@/api";
|
||||
import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue";
|
||||
import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue";
|
||||
import ProductRow from "./components/product-row.vue";
|
||||
import ProductCar from "./components/product-car.vue";
|
||||
import ProductTotal from "./components/product-total.vue";
|
||||
import ProductSku from "./components/product-sku.vue";
|
||||
import { filePath } from "@@/utils/file";
|
||||
import { reactive, nextTick, ref } from "vue"
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app"
|
||||
import { isEmpty } from "radash"
|
||||
import { hooks, router } from "@@/index"
|
||||
import { foodApi, merchantApi, payApi, shopApi } from "@@/api"
|
||||
import zSwiper from "@zebra-ui/swiper/components/z-swiper/z-swiper.vue"
|
||||
import zSwiperItem from "@zebra-ui/swiper/components/z-swiper-item/z-swiper-item.vue"
|
||||
import ProductRow from "./components/product-row.vue"
|
||||
import ProductCar from "./components/product-car.vue"
|
||||
import ProductTotal from "./components/product-total.vue"
|
||||
import ProductSku from "./components/product-sku.vue"
|
||||
import { filePath } from "@@/utils/file"
|
||||
|
||||
// 商品详情相关数据
|
||||
const state = reactive<any>({
|
||||
merchantId: null,
|
||||
detail: {},
|
||||
classifyList: [],
|
||||
currentClassifyIndex: 0,
|
||||
goodsList: [],
|
||||
|
||||
carList: [],
|
||||
});
|
||||
const cartTotalCount = computed(() => state.carList.length); // 购物车商品总数
|
||||
const cartTotalPrice = computed(() => state.carList.reduce((total, item) => total + item.goodsPrice, 0));
|
||||
merchantId: null,
|
||||
detail: {},
|
||||
classifyList: [],
|
||||
currentClassifyIndex: 0,
|
||||
goodsList: [],
|
||||
|
||||
carList: [],
|
||||
totPrice: 0,
|
||||
totCount: 0,
|
||||
})
|
||||
// 当前点击加入购物车的商品信息
|
||||
const curProductData = ref<any>({});
|
||||
const curProductData = ref<any>({})
|
||||
// sku 弹框开关
|
||||
const showSkuDialog = ref<boolean>(false);
|
||||
const showSkuDialog = ref<boolean>(false)
|
||||
// 购物车弹框开关
|
||||
const showCarDialog = ref<boolean>(false);
|
||||
const showCarDialog = ref<boolean>(false)
|
||||
|
||||
onLoad((options: any) => {
|
||||
if (!isEmpty(options.id)) {
|
||||
state.merchantId = options.id;
|
||||
}
|
||||
});
|
||||
if (!isEmpty(options.id)) {
|
||||
state.merchantId = options.id
|
||||
}
|
||||
})
|
||||
onShow(async () => {
|
||||
await getDetail();
|
||||
await getShopCar();
|
||||
await getClassify();
|
||||
});
|
||||
await getDetail()
|
||||
await getShopCar()
|
||||
await getClassify()
|
||||
})
|
||||
|
||||
const getDetail = async () => {
|
||||
const { data } = await merchantApi.detail({ id: state.merchantId });
|
||||
state.detail = data;
|
||||
};
|
||||
const { data } = await merchantApi.detail({ id: state.merchantId })
|
||||
state.detail = data
|
||||
}
|
||||
|
||||
const getShopCar = async () => {
|
||||
const { data } = await foodApi.getShopCar({ merchantId: state.merchantId, hardType: "SUPERMARKET" });
|
||||
state.carList = data ?? [];
|
||||
state.totPrice = state.carList.map((v) => v.totalPrice).reduce((pre, next) => pre + next, 0);
|
||||
state.totCount = state.carList.map((v) => v.productCount).reduce((pre, next) => pre + next, 0);
|
||||
};
|
||||
const { data } = await foodApi.getShopCar({ merchantId: state.merchantId, hardType: "SUPERMARKET" })
|
||||
state.carList = data ?? []
|
||||
console.log("car", data)
|
||||
|
||||
state.totPrice = state.carList.map((v) => Number(v.totalPrice)).reduce((pre, next) => pre + next, 0)
|
||||
state.totCount = state.carList.map((v) => v.productCount).reduce((pre, next) => pre + next, 0)
|
||||
}
|
||||
|
||||
const getClassify = async () => {
|
||||
if (state.merchantId) {
|
||||
const { data } = await shopApi.getSupermarketSpuCategory({ merchantId: state.merchantId });
|
||||
state.classifyList = [{ id: null, name: "全部" }, ...data];
|
||||
if (!isEmpty(state.classifyList)) {
|
||||
getPorduct();
|
||||
}
|
||||
}
|
||||
};
|
||||
if (state.merchantId) {
|
||||
const { data } = await shopApi.getSupermarketSpuCategory({ merchantId: state.merchantId })
|
||||
state.classifyList = [{ id: null, name: "全部" }, ...data]
|
||||
if (!isEmpty(state.classifyList)) {
|
||||
getPorduct()
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
const getPorduct = async () => {
|
||||
const target = state.classifyList[state.currentClassifyIndex];
|
||||
if (isEmpty(target)) return;
|
||||
const { data } = await shopApi.getSupermarketSpuList({
|
||||
// productName: target.name,
|
||||
merchantId: state.merchantId,
|
||||
categoryId: target.id,
|
||||
});
|
||||
state.goodsList = data.records;
|
||||
// state.goodsList.forEach((i) => {
|
||||
// if (i && i.foodSPURespVOList && i.foodSPURespVOList.length) {
|
||||
// i.foodSPURespVOList.forEach((j) => {
|
||||
// j.productCount = 0;
|
||||
// j.productId = j.id;
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// const goodsList = [...state.goodsList];
|
||||
// if (state.carList && state.carList.length) {
|
||||
// for (const i of goodsList) {
|
||||
// if (i && i.foodSPURespVOList && i.foodSPURespVOList.length) {
|
||||
// for (const j of i.foodSPURespVOList) {
|
||||
// for (const v of state.carList) {
|
||||
// if (j.id == v.productId) {
|
||||
// j.productCount = v.productCount;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// state.goodsList = goodsList;
|
||||
};
|
||||
|
||||
const updateShopCar = async () => {
|
||||
if (isEmpty(state.carList)) return;
|
||||
const list = state.carList
|
||||
.filter((v) => v.productCount && v.productCount > 0)
|
||||
.map((v) => {
|
||||
return {
|
||||
productCount: v.productCount,
|
||||
productId: v.productId,
|
||||
};
|
||||
});
|
||||
if (isEmpty(list)) return;
|
||||
const { data, code }: any = await foodApi.updateShopCar({ merchantId: state.detailId, list: list });
|
||||
if (code == 0) await getShopCar();
|
||||
};
|
||||
const target = state.classifyList[state.currentClassifyIndex]
|
||||
if (isEmpty(target)) return
|
||||
const { data } = await shopApi.getSupermarketSpuList({
|
||||
// productName: target.name,
|
||||
merchantId: state.merchantId,
|
||||
categoryId: target.id,
|
||||
})
|
||||
state.goodsList = data.records
|
||||
// state.goodsList.forEach((i) => {
|
||||
// if (i && i.foodSPURespVOList && i.foodSPURespVOList.length) {
|
||||
// i.foodSPURespVOList.forEach((j) => {
|
||||
// j.productCount = 0;
|
||||
// j.productId = j.id;
|
||||
// });
|
||||
// }
|
||||
// });
|
||||
// const goodsList = [...state.goodsList];
|
||||
// if (state.carList && state.carList.length) {
|
||||
// for (const i of goodsList) {
|
||||
// if (i && i.foodSPURespVOList && i.foodSPURespVOList.length) {
|
||||
// for (const j of i.foodSPURespVOList) {
|
||||
// for (const v of state.carList) {
|
||||
// if (j.id == v.productId) {
|
||||
// j.productCount = v.productCount;
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
// state.goodsList = goodsList;
|
||||
}
|
||||
|
||||
const doClassify = async (i: any) => {
|
||||
state.currentClassifyIndex = i;
|
||||
await getPorduct();
|
||||
};
|
||||
state.currentClassifyIndex = i
|
||||
await getPorduct()
|
||||
}
|
||||
|
||||
const getHeight = () => {
|
||||
const rpx = 480;
|
||||
return `calc(100vh - ${uni.upx2px(rpx)}px)`;
|
||||
};
|
||||
const rpx = 480
|
||||
return `calc(100vh - ${uni.upx2px(rpx)}px)`
|
||||
}
|
||||
|
||||
// 点击添加到购物车
|
||||
const onClickAddToCar = (productData: any) => {
|
||||
showSkuDialog.value = true;
|
||||
curProductData.value = productData;
|
||||
};
|
||||
showSkuDialog.value = true
|
||||
curProductData.value = productData
|
||||
}
|
||||
|
||||
// 加入到购物车时
|
||||
const onAddToCar = (cartGoodsInfo: any) => {
|
||||
showSkuDialog.value = false;
|
||||
console.log(cartGoodsInfo);
|
||||
state.carList.push(cartGoodsInfo);
|
||||
};
|
||||
console.log("cartGoodsInfo", cartGoodsInfo)
|
||||
chentProductCount(cartGoodsInfo) // 同步购物车中的数据
|
||||
showSkuDialog.value = false
|
||||
}
|
||||
// 同步购物车中的数据
|
||||
const chentProductCount = async (item: any) => {
|
||||
const target = state.carList.find((v) => v.productId == item.productId)
|
||||
const targetIndex = state.carList.findIndex((v) => v.productId == item.productId)
|
||||
if (target) {
|
||||
state.carList[targetIndex].productCount = item.productCount
|
||||
state.carList[targetIndex].productId = item.productId
|
||||
console.log("1", state.carList[targetIndex])
|
||||
} else {
|
||||
state.carList.push(item)
|
||||
console.log("2", item)
|
||||
}
|
||||
|
||||
nextTick(() => updateShopCar()) // 保存购物车数据
|
||||
}
|
||||
// 保存购物车数据
|
||||
const updateShopCar = async () => {
|
||||
console.log("carList", state.carList)
|
||||
|
||||
if (isEmpty(state.carList)) return
|
||||
const list = state.carList
|
||||
.filter((v) => v.productCount && v.productCount > 0)
|
||||
.map((v) => {
|
||||
return {
|
||||
productCount: v.productCount,
|
||||
productId: v.productId,
|
||||
}
|
||||
})
|
||||
// if (isEmpty(list)) return
|
||||
const { data, code }: any = await foodApi.updateShopCar({
|
||||
merchantId: state.merchantId,
|
||||
list,
|
||||
hardType: "SUPERMARKET",
|
||||
})
|
||||
if (code == 0) await getShopCar()
|
||||
}
|
||||
|
||||
// 显示购物车
|
||||
const doVisibleCar = async () => {
|
||||
showCarDialog.value = true;
|
||||
};
|
||||
showCarDialog.value = true
|
||||
}
|
||||
|
||||
const doAdd = async (item: any) => {
|
||||
chentProductCount(item)
|
||||
}
|
||||
const doRemove = async (item: any) => {
|
||||
chentProductCount(item)
|
||||
}
|
||||
|
||||
// 点击提交订单
|
||||
const doPay = async () => {
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "是否确定购买",
|
||||
confirmColor: "#0094ff",
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return;
|
||||
submitPay(); // 提交订单
|
||||
},
|
||||
});
|
||||
};
|
||||
uni.showModal({
|
||||
title: "提示",
|
||||
content: "是否确定购买",
|
||||
confirmColor: "#0094ff",
|
||||
success: async (res) => {
|
||||
if (!res.confirm) return
|
||||
submitPay() // 提交订单
|
||||
},
|
||||
})
|
||||
}
|
||||
|
||||
// 提交订单
|
||||
const submitPay = async () => {
|
||||
// try {
|
||||
// if (isEmpty(state.carList)) {
|
||||
// uni.showToast({ title: "请至少购买一件商品", icon: "none" });
|
||||
// return;
|
||||
// }
|
||||
// uni.showLoading({ title: "支付中...", mask: false });
|
||||
// const _createtPa = { carParentId: state.carList[0].parentCarId };
|
||||
// const { data: createData, code: createCode }: any = await payApi.createHardwareOrder(_createtPa);
|
||||
// if (createCode != 0) throw new Error();
|
||||
// const _submitPa = { orderId: createData };
|
||||
// const { data: submitData, code: submitCode }: any = await payApi.submitHardwareOrder(_submitPa);
|
||||
// if (submitCode != 0) throw new Error();
|
||||
// uni.hideLoading();
|
||||
// uni.showToast({ title: "支付成功", icon: "none" });
|
||||
// router.jump("/pages/tabbar/order");
|
||||
// } catch (error) {
|
||||
// console.error(error);
|
||||
// uni.hideLoading();
|
||||
// }
|
||||
};
|
||||
// ======================================================
|
||||
|
||||
const skuState = reactive<any>({
|
||||
productId: null,
|
||||
showSpecDialog: false,
|
||||
skuData: [],
|
||||
totCount: 0,
|
||||
});
|
||||
|
||||
const chentProductCount = async (item: any) => {
|
||||
const target = state.carList.find((v) => v.productId == item.productId);
|
||||
const targetIndex = state.carList.findIndex((v) => v.productId == item.productId);
|
||||
if (target) {
|
||||
state.carList[targetIndex].productCount = item.productCount;
|
||||
} else {
|
||||
state.carList.push({ ...item, productId: item.id });
|
||||
}
|
||||
nextTick(() => updateShopCar());
|
||||
};
|
||||
|
||||
const doPhone = () => {
|
||||
if (isEmpty(state.detail.phone)) {
|
||||
uni.showToast({ title: "该店铺没有预留电话", icon: "none" });
|
||||
return;
|
||||
}
|
||||
hooks.useMakePhoneCall(state.detail.phone);
|
||||
};
|
||||
const doFood = () => {
|
||||
router.jump("/pages/merchant/food", { merchantId: state.detailId });
|
||||
};
|
||||
try {
|
||||
if (isEmpty(state.carList)) {
|
||||
uni.showToast({ title: "请至少购买一件商品", icon: "none" })
|
||||
return
|
||||
}
|
||||
uni.showLoading({ title: "支付中...", mask: false })
|
||||
const _createtPa = {
|
||||
carParentId: state.carList[0].parentCarId,
|
||||
hardType: "SUPERMARKET",
|
||||
}
|
||||
const { data: createData, code: createCode }: any = await payApi.createHardwareOrder(_createtPa)
|
||||
if (createCode != 0) throw new Error()
|
||||
uni.hideLoading()
|
||||
uni.showToast({ title: "支付成功", icon: "none" })
|
||||
router.jump("/pages/tabbar/order")
|
||||
} catch (error) {
|
||||
console.error(error)
|
||||
uni.hideLoading()
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
:deep() {
|
||||
.layout_main > scroll-view {
|
||||
padding: 0 !important;
|
||||
}
|
||||
.layout_main > scroll-view {
|
||||
padding: 0 !important;
|
||||
}
|
||||
}
|
||||
|
||||
.menu {
|
||||
&_item {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
transition: all linear 0.2s;
|
||||
&_item {
|
||||
width: 100%;
|
||||
height: 88rpx;
|
||||
position: relative;
|
||||
transition: all linear 0.2s;
|
||||
|
||||
&_title {
|
||||
width: 100%;
|
||||
line-height: 32rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin-left: 28rpx;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
&_title {
|
||||
width: 100%;
|
||||
line-height: 32rpx;
|
||||
font-size: 30rpx;
|
||||
font-weight: 400;
|
||||
color: #333;
|
||||
margin-left: 28rpx;
|
||||
position: relative;
|
||||
z-index: 0;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
width: 64rpx;
|
||||
height: 12rpx;
|
||||
background: linear-gradient(90deg, #0094ff, #e9f5fe) !important;
|
||||
position: absolute;
|
||||
left: -64rpx;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transition: all linear 0.2s;
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
width: 64rpx;
|
||||
height: 12rpx;
|
||||
background: linear-gradient(90deg, #0094ff, #e9f5fe) !important;
|
||||
position: absolute;
|
||||
left: -64rpx;
|
||||
bottom: 0;
|
||||
z-index: -1;
|
||||
transition: all linear 0.2s;
|
||||
}
|
||||
}
|
||||
|
||||
&.menu_item_active {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
&.menu_item_active {
|
||||
background-color: #fff;
|
||||
border-radius: 20rpx 0 0 20rpx;
|
||||
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -20rpx;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
|
||||
}
|
||||
&::before {
|
||||
content: "";
|
||||
position: absolute;
|
||||
right: 0;
|
||||
bottom: -20rpx;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
|
||||
}
|
||||
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
right: 0;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
|
||||
}
|
||||
&::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: -20rpx;
|
||||
right: 0;
|
||||
width: 20rpx;
|
||||
height: 20rpx;
|
||||
background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
|
||||
}
|
||||
|
||||
.menu_item_title {
|
||||
font-weight: 600;
|
||||
.menu_item_title {
|
||||
font-weight: 600;
|
||||
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
&::before {
|
||||
left: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.car {
|
||||
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
|
||||
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
</style>
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 6.5 KiB After Width: | Height: | Size: 1.5 KiB |
Reference in new issue
Block a user