购物车
This commit is contained in:
1 parent
d5b4fcc18e
commit
e1902cbfae
7 files changed
+243
-212
No files matched your search
@@ -1,14 +1,14 @@
|
||||
<template>
|
||||
<view
|
||||
class="flex-row items-start card p-x-15rpx p-y-25rpx m-b-20rpx"
|
||||
@tap="props.productId && router.jump('/pages/shop/product-detail', { id: props.productId })"
|
||||
@tap="props.id && router.jump('/pages/shop/product-detail', { id: props.id })"
|
||||
>
|
||||
<image class="size-180rpx rounded-12rpx" :src="props.pic" mode="aspectFill" />
|
||||
<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.name }}</view>
|
||||
<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 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>
|
||||
@@ -16,7 +16,7 @@
|
||||
<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-1 float-right"
|
||||
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 })"
|
||||
>
|
||||
加入购物车
|
||||
@@ -27,27 +27,24 @@
|
||||
|
||||
<script setup lang="ts">
|
||||
import { hooks, router } from "@@/index";
|
||||
import { filePath } from "@@/utils/file";
|
||||
|
||||
const emit = defineEmits(["onClickAddToCar"]);
|
||||
|
||||
export type Props = {
|
||||
productId: number | null;
|
||||
productCount: number;
|
||||
pic: string;
|
||||
name: string;
|
||||
price: number;
|
||||
marketPrice: number;
|
||||
id: string;
|
||||
merchantId: string;
|
||||
picUrl: string;
|
||||
productName: string;
|
||||
salesCount: number;
|
||||
stock: number;
|
||||
onClickAddToCar?: () => void;
|
||||
};
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
productId: null,
|
||||
productCount: 0,
|
||||
pic: "",
|
||||
name: "",
|
||||
price: 0,
|
||||
marketPrice: 0,
|
||||
id: "",
|
||||
merchantId: "",
|
||||
picUrl: "",
|
||||
productName: "",
|
||||
salesCount: 0,
|
||||
stock: 0,
|
||||
});
|
||||
|
||||
@@ -4,32 +4,38 @@
|
||||
<scroll-view scroll-y="true" class="max-h-7xl" @touchmove.stop>
|
||||
<!-- 商品信息 -->
|
||||
<view class="m-3 flex-row">
|
||||
<image class="w-120rpx h-120rpx" :src="productData.pic" mode="aspectFill" />
|
||||
<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.name }}</view>
|
||||
<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="c-red text-34">¥{{ productData.price }}</view>
|
||||
<view class="sub-text-28">库存{{ productData.salesCount }}</view>
|
||||
<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>
|
||||
|
||||
<!-- 规格 -->
|
||||
<view v-for="property in propertyList" :key="property.id">
|
||||
<view class="sub-text-32 font-600! my-2">{{ property.name }}</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 property.values"
|
||||
:key="value.id"
|
||||
:disabled="value.disabled === true"
|
||||
:style="{ 'background-color': state.currentPropertyArray[property.id] === value.id ? '#0094ff' : '#F4F4F4' }"
|
||||
@click="onSelectSku(property.id, value.id)"
|
||||
>
|
||||
{{ value.name }}
|
||||
</button>
|
||||
</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 class="sub-text-32 font-600! my-2">购买数量</view>
|
||||
@@ -44,7 +50,7 @@
|
||||
<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 >= productData.salesCount ? '#999999' : '#0094ff' }"
|
||||
:style="{ backgroundColor: state.count >= state.goodsInfo.stock ? '#999999' : '#0094ff' }"
|
||||
@click="handleNumAdd()"
|
||||
>
|
||||
+
|
||||
@@ -60,22 +66,12 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { computed, reactive } from "vue";
|
||||
import { shopApi } from "@/sheep/api";
|
||||
import { filePath } from "@/sheep/utils/file";
|
||||
import { computed, reactive, ref, watch } from "vue";
|
||||
|
||||
const emit = defineEmits(["update:modelValue", "onAddToCar"]);
|
||||
|
||||
const propertyList = reactive([
|
||||
{
|
||||
id: "1",
|
||||
name: "颜色",
|
||||
values: [
|
||||
{ id: "1", name: "红色", disabled: false },
|
||||
{ id: "2", name: "蓝色", disabled: false },
|
||||
],
|
||||
},
|
||||
{ id: "2", name: "版本", values: [{ id: "3", name: "黑色", disabled: false }] },
|
||||
]);
|
||||
|
||||
export type Props = {
|
||||
modelValue: boolean;
|
||||
productData: any;
|
||||
@@ -85,12 +81,25 @@ const props = withDefaults(defineProps<Props>(), {
|
||||
modelValue: false,
|
||||
productData: {},
|
||||
});
|
||||
|
||||
const state = reactive<any>({
|
||||
count: 1,
|
||||
selectedSku: {}, // 选中的 SKU
|
||||
currentPropertyArray: [], // 当前选中的属性,实际是个 Map。key 是 property 编号,value 是 value 编号
|
||||
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
|
||||
);
|
||||
|
||||
watch(
|
||||
() => props.modelValue,
|
||||
async (newValue) => {
|
||||
if (newValue) {
|
||||
const { data } = await shopApi.getSupermarketSpuDetail({ id: props.productData.id });
|
||||
state.goodsInfo = data;
|
||||
}
|
||||
}
|
||||
);
|
||||
|
||||
// SKU 列表
|
||||
// const skuList = computed(() => {
|
||||
@@ -123,47 +132,54 @@ const state = reactive<any>({
|
||||
// }
|
||||
|
||||
// 选择规格
|
||||
function onSelectSku(propertyId: string | number, valueId: string | number) {
|
||||
// 清空已选择
|
||||
let isChecked = true; // 选中 or 取消选中
|
||||
if (state.currentPropertyArray[propertyId] !== undefined && state.currentPropertyArray[propertyId] === valueId) {
|
||||
// 点击已被选中的,删除并填充 ''
|
||||
isChecked = false;
|
||||
state.currentPropertyArray.splice(propertyId, 1, "");
|
||||
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.currentPropertyArray[propertyId] = valueId;
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
// let choosePropertyId: any = [];
|
||||
// state.currentPropertyArray.forEach((currentPropertyId: string) => {
|
||||
// if (currentPropertyId !== "") {
|
||||
// // currentPropertyId 为空是反选 填充的
|
||||
// choosePropertyId.push(currentPropertyId);
|
||||
// }
|
||||
// });
|
||||
// 当前所选 property 下,所有可以选择的 SKU 们
|
||||
// let newSkuList = getCanUseSkuList();
|
||||
|
||||
// 判断所有 property 大类是否选择完成
|
||||
// if (choosePropertyId.length === propertyList.length && newSkuList.length) {
|
||||
// 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 === propertyList.length) {
|
||||
state.selectedSku = state.currentPropertyArray;
|
||||
}
|
||||
|
||||
// if (choosePropertyId.length === skuData.value.length) {
|
||||
// state.selectedSku = state.currentPropertyArray;
|
||||
// }
|
||||
// 改变 property 禁用状态
|
||||
// changeDisabled(isChecked, propertyId, valueId);
|
||||
}
|
||||
|
||||
const handleNumAdd = () => {
|
||||
if (state.count >= props.productData.salesCount) {
|
||||
if (state.count >= state.goodsInfo.stock) {
|
||||
return;
|
||||
}
|
||||
state.count += 1;
|
||||
@@ -177,10 +193,30 @@ const handleNumRemove = () => {
|
||||
|
||||
// 点击加入购物车
|
||||
const handleClickAddToCar = () => {
|
||||
emit("onAddToCar", { productData: props.productData, state });
|
||||
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 });
|
||||
};
|
||||
|
||||
const doClose = () => {
|
||||
emit("update:modelValue", false);
|
||||
|
||||
state.count = 1;
|
||||
state.selectedSku = {};
|
||||
state.goodsInfo = {};
|
||||
};
|
||||
</script>
|
||||
+80
-91
@@ -3,8 +3,8 @@
|
||||
<tm-sticky>
|
||||
<!-- start 轮播 start -->
|
||||
<z-swiper>
|
||||
<z-swiper-item v-for="(v, i) in state.detail.swiper?.split(',')" :key="i">
|
||||
<image class="w-100vw h-400rpx" :src="v" mode="aspectFill" />
|
||||
<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 -->
|
||||
@@ -14,32 +14,27 @@
|
||||
<view class="h-15rpx" />
|
||||
<!-- start 简介 start -->
|
||||
<view flex-row card p-20rpx>
|
||||
<image class="w-160rpx h-160rpx rounded-12rpx" :src="state.detail.logo" mode="aspectFill" />
|
||||
<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> -->
|
||||
<text>{{ 111111 }}</text>
|
||||
<text>{{ state.detail.name }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<!-- <tm-tag size="s">{{ state.detail.deptStr }}</tm-tag> -->
|
||||
<tm-tag size="s">{{ 111111 }}</tm-tag>
|
||||
<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">
|
||||
<!-- {{ hooks.useTime(state.detail.applianceStartTime, "{h}:{i}") }} -->
|
||||
{{ 22222222 }}
|
||||
{{ state.detail.jobStartTime }}
|
||||
~
|
||||
<!-- {{ hooks.useTime(state.detail.applianceEndTime, "{h}:{i}") }} -->
|
||||
{{ 222222222 }}
|
||||
{{ state.detail.jobEndTime }}
|
||||
</text>
|
||||
</view>
|
||||
<view class="m-t-10rpx second-text-28">
|
||||
<text>超市地址</text>
|
||||
<!-- <text class="m-l-10rpx">{{ state.detail.addressDes }}</text> -->
|
||||
<text class="m-l-10rpx">{{ 3333333333 }}</text>
|
||||
<text class="m-l-10rpx">{{ state.detail.addressDes }}</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
@@ -67,29 +62,18 @@
|
||||
</scroll-view>
|
||||
|
||||
<scroll-view scroll-y :style="{ height: getHeight() }" class="flex-1 p-b-20rpx">
|
||||
<view v-for="(cV, cI) in state.shopList" :key="cI">
|
||||
<view class="flex-row-center m-y-20rpx">
|
||||
<view class="w-25rpx h-1px bg-#d2d2d2" />
|
||||
<text class="p-x-15rpx second-text-28">
|
||||
{{ cV.categoryName }}
|
||||
</text>
|
||||
<view class="w-25rpx h-1px bg-#d2d2d2" />
|
||||
</view>
|
||||
<view class="m-x-15rpx">
|
||||
<product-row
|
||||
v-for="pV in cV.foodSPURespVOList"
|
||||
:key="pV.id"
|
||||
:productId="pV.productId"
|
||||
:productCount="pV.productCount"
|
||||
:pic="pV.picUrl"
|
||||
:name="pV.name"
|
||||
:price="pV.price"
|
||||
:marketPrice="pV.marketPrice"
|
||||
:salesCount="pV.salesCount"
|
||||
:stock="pV.stock"
|
||||
@onClickAddToCar="onClickAddToCar"
|
||||
/>
|
||||
</view>
|
||||
<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>
|
||||
@@ -98,7 +82,7 @@
|
||||
|
||||
<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" />
|
||||
<product-total :totPrice="cartTotalPrice" :totCount="cartTotalCount" @doContainer="doVisibleCar" @doPay="doPay" />
|
||||
</view>
|
||||
</template>
|
||||
</crud-layout>
|
||||
@@ -117,30 +101,32 @@
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import { reactive, nextTick, ref } from "vue";
|
||||
import { reactive, nextTick, ref, computed } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import { isEmpty } from "radash";
|
||||
import { hooks, router } from "@@/index";
|
||||
import { merchantApi, foodApi, payApi } from "@@/api";
|
||||
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>({
|
||||
detailId: null,
|
||||
merchantId: null,
|
||||
detail: {},
|
||||
carList: [],
|
||||
totPrice: 0,
|
||||
totCount: 0,
|
||||
systemType: 3,
|
||||
classifyList: [],
|
||||
shopList: [],
|
||||
currentClassifyIndex: 0,
|
||||
goodsList: [],
|
||||
|
||||
carList: [],
|
||||
});
|
||||
const cartTotalCount = computed(() => state.carList.length); // 购物车商品总数
|
||||
const cartTotalPrice = computed(() => state.carList.reduce((total, item) => total + item.goodsPrice, 0));
|
||||
|
||||
// 当前点击加入购物车的商品信息
|
||||
const curProductData = ref<any>({});
|
||||
// sku 弹框开关
|
||||
@@ -150,17 +136,17 @@ const showCarDialog = ref<boolean>(false);
|
||||
|
||||
onLoad((options: any) => {
|
||||
if (!isEmpty(options.id)) {
|
||||
state.detailId = options.id;
|
||||
state.merchantId = options.id;
|
||||
}
|
||||
});
|
||||
onShow(() => {
|
||||
getDetail();
|
||||
getShopCar();
|
||||
getClassify();
|
||||
onShow(async () => {
|
||||
await getDetail();
|
||||
// await getShopCar();
|
||||
await getClassify();
|
||||
});
|
||||
|
||||
const getDetail = async () => {
|
||||
const { data } = await merchantApi.detail({ id: state.detailId });
|
||||
const { data } = await merchantApi.detail({ id: state.merchantId });
|
||||
state.detail = data;
|
||||
};
|
||||
|
||||
@@ -172,13 +158,49 @@ const getShopCar = async () => {
|
||||
};
|
||||
|
||||
const getClassify = async () => {
|
||||
const { data } = await foodApi.classify({ systemType: state.systemType, merchantId: state.detailId });
|
||||
state.classifyList = 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
|
||||
@@ -194,43 +216,9 @@ const updateShopCar = async () => {
|
||||
if (code == 0) await getShopCar();
|
||||
};
|
||||
|
||||
const getPorduct = async () => {
|
||||
const target = state.classifyList[state.currentClassifyIndex];
|
||||
if (isEmpty(target)) return;
|
||||
const { data } = await foodApi.product({
|
||||
systemType: state.systemType,
|
||||
merchantId: state.detailId,
|
||||
categoryId: target.id,
|
||||
});
|
||||
state.shopList = data;
|
||||
state.shopList.forEach((i) => {
|
||||
if (i && i.foodSPURespVOList && i.foodSPURespVOList.length) {
|
||||
i.foodSPURespVOList.forEach((j) => {
|
||||
j.productCount = 0;
|
||||
j.productId = j.id;
|
||||
});
|
||||
}
|
||||
});
|
||||
const shopList = [...state.shopList];
|
||||
if (state.carList && state.carList.length) {
|
||||
for (const i of shopList) {
|
||||
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.shopList = shopList;
|
||||
};
|
||||
|
||||
const doClassify = (i: any) => {
|
||||
const doClassify = async (i: any) => {
|
||||
state.currentClassifyIndex = i;
|
||||
getClassify();
|
||||
await getPorduct();
|
||||
};
|
||||
|
||||
const getHeight = () => {
|
||||
@@ -248,6 +236,7 @@ const onClickAddToCar = (productData: any) => {
|
||||
const onAddToCar = (cartGoodsInfo: any) => {
|
||||
showSkuDialog.value = false;
|
||||
console.log(cartGoodsInfo);
|
||||
state.carList.push(cartGoodsInfo);
|
||||
};
|
||||
|
||||
// 显示购物车
|
||||
|
||||
@@ -1,15 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { ref, reactive } from "vue";
|
||||
import { reactive } from "vue";
|
||||
import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
import { isEmpty } from "radash";
|
||||
|
||||
import { hooks } from "@@/index";
|
||||
import { productApi } from "@@/api";
|
||||
|
||||
import { 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 { filePath } from "@/sheep/utils/file";
|
||||
|
||||
const data = {};
|
||||
const state = reactive<any>({
|
||||
detailId: null,
|
||||
detail: null,
|
||||
@@ -25,30 +22,30 @@ onShow(() => {
|
||||
});
|
||||
|
||||
const getDetail = async () => {
|
||||
const _pa = { id: state.detailId };
|
||||
const { data } = await productApi.get(_pa);
|
||||
const { data } = await shopApi.getSupermarketSpuDetail({ id: state.detailId });
|
||||
state.detail = data;
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<crud-layout title="订单详情" tabBarType="just-flot-back" bg="/static/page/blue-bg.png">
|
||||
<z-swiper>
|
||||
<z-swiper-item v-for="(v, i) in state.detail.sliderPicUrls" :key="i">
|
||||
<image class="w-100vw" :src="v" mode="widthFix" />
|
||||
</z-swiper-item>
|
||||
</z-swiper>
|
||||
<!-- <z-swiper> -->
|
||||
<!-- <z-swiper-item v-for="(v, i) in state.detail.sliderPicUrls" :key="i"> -->
|
||||
<image class="w-100vw" :src="filePath(state.detail.picUrl)" mode="widthFix" />
|
||||
<!-- </z-swiper-item> -->
|
||||
<!-- </z-swiper> -->
|
||||
|
||||
<view class="p-x-15rpx">
|
||||
<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
|
||||
<view class="flex-row items-center justify-between">
|
||||
<view class="flex-row items-center">
|
||||
<view class="second-text-46 color-#f63a36!">¥{{ state.detail.price }}</view>
|
||||
<view class="m-l-20rpx second-text-28 line-through">¥{{ state.detail.marketPrice }}</view>
|
||||
</view>
|
||||
<!-- <view class="flex-row items-center"> -->
|
||||
<!-- <view class="second-text-46 color-#f63a36!">¥{{ state.detail.price }}</view> -->
|
||||
<!-- <view class="m-l-20rpx second-text-28 line-through">¥{{ state.detail.marketPrice }}</view> -->
|
||||
<!-- </view> -->
|
||||
<view class="second-text-26">已售{{ state.detail.salesCount }}</view>
|
||||
</view>
|
||||
<view class="flex-col m-t-15rpx">
|
||||
<view class="sub-text-32">{{ state.detail.name }}</view>
|
||||
<view class="sub-text-32">{{ state.detail.productName }}</view>
|
||||
<view class="m-t-15rpx second-text-26">{{ state.detail.introduction }}</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
@@ -4,7 +4,6 @@ import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
|
||||
import { hooks, router } from "@@/index";
|
||||
import { merchantApi } from "@@/api";
|
||||
|
||||
import { filePath } from "@@/utils/file";
|
||||
|
||||
const state = reactive<any>({
|
||||
@@ -52,17 +51,8 @@ const toDetail = async (v: any) => {
|
||||
@scroll="pageHook.scroll"
|
||||
>
|
||||
<template #top> </template>
|
||||
<view
|
||||
class="flex-row card p-20rpx m-b-20rpx"
|
||||
v-for="(v, i) in pageHook.list"
|
||||
:key="i"
|
||||
@tap="toDetail(v)"
|
||||
>
|
||||
<image
|
||||
class="w-160rpx h-160rpx rounded-12rpx"
|
||||
:src="filePath(v.logoPic)"
|
||||
mode="aspectFill"
|
||||
/>
|
||||
<view class="flex-row card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="toDetail(v)">
|
||||
<image class="w-160rpx h-160rpx rounded-12rpx" :src="filePath(v.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-34">
|
||||
|
||||
+15
-12
@@ -4,11 +4,12 @@ import { onLoad, onShow } from "@dcloudio/uni-app";
|
||||
|
||||
import { hooks, router } from "@@/index";
|
||||
import { merchantApi } from "@@/api";
|
||||
import { filePath } from "@@/utils/file";
|
||||
|
||||
const state = reactive<any>({
|
||||
pa: {
|
||||
pagesize: 10,
|
||||
type: "canteen",
|
||||
type: "2",
|
||||
},
|
||||
});
|
||||
|
||||
@@ -20,10 +21,17 @@ onShow(() => {
|
||||
});
|
||||
|
||||
const pageRef = ref<any>(null);
|
||||
const pageHook = hooks.usePage(pageRef, merchantApi.page, null, "data.list");
|
||||
const pageHook = hooks.usePage(pageRef, merchantApi.page, null, "data.records");
|
||||
const query = (page: number, pagesize: number) => {
|
||||
pageHook.startPage(page, pagesize, false, state.pa);
|
||||
};
|
||||
|
||||
const toDetail = async (v: any) => {
|
||||
const isLogin = await hooks.useCheckLogin();
|
||||
if (isLogin) {
|
||||
router.jump("/pages/shop/detail", { id: v.id });
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<template>
|
||||
@@ -42,21 +50,16 @@ const query = (page: number, pagesize: number) => {
|
||||
:auto-scroll-to-top-when-reload="false"
|
||||
@scroll="pageHook.scroll"
|
||||
>
|
||||
<view
|
||||
class="flex-col card p-20rpx m-b-20rpx"
|
||||
v-for="(v, i) in pageHook.list"
|
||||
:key="i"
|
||||
@tap="router.jump('/pages/shop/detail', { id: v.id })"
|
||||
>
|
||||
<view class="flex-col card p-20rpx m-b-20rpx" v-for="(v, i) in pageHook.list" :key="i" @tap="toDetail(v)">
|
||||
<view class="flex-row-center">
|
||||
<image class="w-120rpx h-120rpx rounded-12rpx" :src="v.logo" mode="aspectFill" />
|
||||
<image class="w-120rpx h-120rpx rounded-12rpx" :src="filePath(v.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-34">
|
||||
<text> {{ v.name }}</text>
|
||||
</view>
|
||||
<view>
|
||||
<tm-tag size="s">{{ v.deptStr }}</tm-tag>
|
||||
<tm-tag size="s">{{ v.deptName }}</tm-tag>
|
||||
</view>
|
||||
</view>
|
||||
<view class="flex items-center">
|
||||
@@ -66,9 +69,9 @@ const query = (page: number, pagesize: number) => {
|
||||
<view class="m-t-10rpx second-text-28">
|
||||
<text>营业时间</text>
|
||||
<text class="m-l-10rpx">
|
||||
{{ hooks.useTime(v.applianceStartTime, "{h}:{i}") }}
|
||||
{{ v.jobStartTime }}
|
||||
~
|
||||
{{ hooks.useTime(v.applianceEndTime, "{h}:{i}") }}
|
||||
{{ v.jobEndTime }}
|
||||
</text>
|
||||
<text class="float-right">22km</text>
|
||||
</view>
|
||||
|
||||
+20
-1
@@ -1,15 +1,34 @@
|
||||
import request from "@/sheep/utils/request";
|
||||
|
||||
export default {
|
||||
getSupermarketSpuCategory: (params: any) =>
|
||||
request({
|
||||
url: `/supermarket/supermarketCategory/app/simpleAll`,
|
||||
method: "GET",
|
||||
params,
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
getSupermarketSpuList: (data: any) =>
|
||||
request({
|
||||
url: `/supermarket/supermarketSpu/ad/updateSpuStock`,
|
||||
url: `/supermarket/supermarketSpu/app/selectListAll`,
|
||||
method: "POST",
|
||||
data,
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
getSupermarketSpuDetail: (params: any) =>
|
||||
request({
|
||||
url: `/supermarket/supermarketSpu/app/SpuDetails`,
|
||||
method: "GET",
|
||||
params,
|
||||
custom: {
|
||||
showLoading: false,
|
||||
},
|
||||
}),
|
||||
|
||||
// del: (params: any) =>
|
||||
// request({
|
||||
// url: `/sys/user/face-delete`,
|
||||
|
||||
Reference in new issue
Block a user