商店页面

This commit is contained in:
ctw committed 2025-01-04 18:13:06 +08:00
1 parent a14266bce8
commit eea802dc10
7 files changed
+736 -3

No files matched your search

+16 -1
View File
@@ -45,7 +45,22 @@
},
{
"root": "pages/shop",
"pages": []
"pages": [
{
"path": "detail",
"style": {
"navigationBarTitleText": "",
"disableScroll": true
}
},
{
"path": "product-detail",
"style": {
"navigationBarTitleText": "",
"disableScroll": true
}
}
]
},
{
"root": "pages/apply",
+78
View File
@@ -0,0 +1,78 @@
<script setup lang="ts">
import { ref, reactive, withDefaults, defineProps, defineEmits } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { hooks, router } from "@@/index";
import { merchantApi } from "@@/api";
import ProductRow from "./product-row.vue";
import ProductTotal from "./product-total.vue";
const emit = defineEmits(["update:modelValue", "submit", "doContainer", "add", "remove"]);
export type Props = {
modelValue: any;
carList: any;
totPrice: number;
totCount: number;
};
const props = withDefaults(defineProps<Props>(), {
modelValue: false,
carList: [],
totPrice: 0,
totCount: 0,
});
const state = reactive<any>({});
onLoad(() => {});
onShow(() => {});
const doClose = () => {
emit("update:modelValue");
};
const doPay = () => {
emit("submit");
};
const doContainer = () => {
emit("doContainer");
};
const getHeight = () => {
const { bottom } = uni.getSystemInfoSync().safeAreaInsets!;
return `-${bottom + 16}px`;
};
</script>
<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)"
/>
<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" @submit="doPay" @doContainer="doContainer" />
</view>
</template>
</tm-drawer>
</template>
<style lang="scss" scoped>
.car {
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
}
</style>
+96
View File
@@ -0,0 +1,96 @@
<script setup lang="ts">
import { ref, reactive, withDefaults, defineProps, defineEmits } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { hooks, router } from "@@/index";
import { merchantApi } from "@@/api";
const emit = defineEmits(["update:modelValue", "add", "remove"]);
export type Props = {
mode: "default" | "car";
productId: number | null;
modelValue: number;
pic: string;
name: string;
price: number;
marketPrice: number;
salesCount: number;
stock: number;
count: number;
};
const props = withDefaults(defineProps<Props>(), {
mode: "default",
productId: null,
modelValue: 0,
pic: "",
name: "",
price: 0,
marketPrice: 0,
salesCount: 0,
stock: 0,
count: 0,
});
const state = reactive<any>({});
onLoad(() => {});
onShow(() => {});
const add = () => {
if (props.modelValue >= 99) {
emit("update:modelValue", 99);
return;
}
emit("update:modelValue", props.modelValue + 1);
emit("add");
};
const remove = () => {
if (props.modelValue < 0) {
emit("update:modelValue", 0);
return;
}
emit("update:modelValue", props.modelValue - 1);
emit("remove");
};
</script>
<template>
<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 && router.jump('/pages/shop/product-detail', { id: props.productId })"
>
<image v-if="props.mode == 'default'" class="size-180rpx rounded-12rpx" :src="props.pic" mode="aspectFill" />
<image v-if="props.mode == 'car'" class="size-120rpx rounded-12rpx" :src="props.pic" mode="aspectFill" />
<view class="flex-1 m-l-20rpx">
<view class="sub-text-28 show-line">{{ props.name }}</view>
<view class="m-t-10rpx flex-row items-center">
<view class="second-text-32 color-red!"> ¥{{ hooks.useMoney(props.price) }} </view>
<view v-if="props.mode == 'default'" class="m-l-20rpx second-text-24 line-through"> ¥{{ hooks.useMoney(props.marketPrice) }} </view>
</view>
<view v-if="props.mode == 'car'" class="m-t-10rpx second-text-28"> x{{ props.count }} </view>
<view v-if="props.mode == 'default'" class="flex-row items-center MT 10rpx">
<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="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">{{ props.modelValue }}</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>
<style lang="scss" scoped>
.car_border {
border: 1px solid #f2f2f2;
}
</style>
@@ -0,0 +1,59 @@
<script setup lang="ts">
import { ref, reactive, withDefaults, defineProps, defineEmits } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { hooks, router } from "@@/index"
import { merchantApi } from "@@/api"
const emit = defineEmits(["submit", "doContainer"])
export type Props = {
totPrice: number,
totCount: number,
}
const props = withDefaults(defineProps<Props>(), {
totPrice: 0,
totCount: 0,
});
const state = reactive<any>({
})
onLoad(() => {
});
onShow(() => {
})
const doPay = () => {
emit("submit")
}
const doContainer = () => {
emit("doContainer")
}
</script>
<template>
<view class="flex-row items-center justify-between" @tap="doContainer">
<view class="flex-row-center">
<view class="flex-row-center size-80rpx rounded-full bg-#0094ff">
<view class="color-white! iconfont icon-biaoqianlanicon_gouwuche-xuanzhong" />
</view>
<view class="flex-col m-l-30rpx">
<view class="second-text-36 color-#f63a36!">¥ {{ hooks.useMoney(props.totPrice) }}</view>
<view class="sub-text-28">共{{ props.totCount }}件</view>
</view>
</view>
<view class="bg-#0094ff p-x-30rpx p-y-20rpx text-center rounded-40rpx sub-text-30 color-white!"
@tap.stop="doPay">
购买
</view>
</view>
</template>
<style lang="scss" scoped></style>
+410
View File
@@ -0,0 +1,410 @@
<script setup lang="ts">
import { ref, reactive, nextTick } 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 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";
const data = {};
const state = reactive<any>({
detailId: null,
systemType: 3,
totPrice: 0,
totCount: 0,
currentClassifyIndex: 0,
showCarDialog: false,
detail: {},
carList: [],
classifyList: [],
shopList: [],
});
onLoad((options: any) => {
if (!isEmpty(options.id)) {
state.detailId = options.id;
}
});
onShow(() => {
getDetail();
getShopCar();
getClassify();
});
const getDetail = async () => {
const _pa = { id: state.detailId };
const { data } = await merchantApi.detail(_pa);
state.detail = data;
};
const getShopCar = async () => {
const _pa = { merchantId: state.detailId };
const { data } = await foodApi.getShopCar(_pa);
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 getClassify = async () => {
const _pa = { systemType: state.systemType, merchantId: state.detailId };
const { data } = await foodApi.classify(_pa);
state.classifyList = data;
if (!isEmpty(state.classifyList)) {
getPorduct();
}
};
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 _pa = { merchantId: state.detailId, list: list };
const { data, code }: any = await foodApi.updateShopCar(_pa);
if (code == 0) await getShopCar();
};
const getPorduct = async () => {
const target = state.classifyList[state.currentClassifyIndex];
if (isEmpty(target)) return;
const _pa = {
systemType: state.systemType,
merchantId: state.detailId,
categoryId: target.id,
};
const { data } = await foodApi.product(_pa);
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 doAdd = async (item: any) => {
chentProductCount(item);
};
const remove = async (item: any) => {
chentProductCount(item);
};
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 doClassify = (i: any) => {
state.currentClassifyIndex = i;
getClassify();
};
const doVisibleCar = async () => {
state.showCarDialog = true;
};
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 doPay = async () => {
uni.showModal({
title: "提示",
content: "是否确定购买",
confirmColor: "#0094ff",
success: async (res) => {
if (!res.confirm) return;
submitPay();
},
});
};
const getHeight = () => {
const rpx = 480;
return `calc(100vh - ${uni.upx2px(rpx)}px)`;
};
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 });
};
</script>
<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.swiper?.split(',')" :key="i">
<image class="w-100vw h-400rpx" :src="v" mode="aspectFill" />
</z-swiper-item>
</z-swiper>
<!-- end 轮播 end -->
<tm-sticky-header>
<view class="m-x-30rpx">
<!-- start 简介 start -->
<view class="h-15rpx" />
<view flex-row card p-20rpx>
<image class="w-160rpx h-160rpx rounded-12rpx" :src="state.detail.logo" 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>
</view>
<view>
<!-- <tm-tag size="s">{{ state.detail.deptStr }}</tm-tag> -->
<tm-tag size="s">{{ 111111 }}</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 }}
~
<!-- {{ hooks.useTime(state.detail.applianceEndTime, "{h}:{i}") }} -->
{{ 222222222 }}
</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>
</view>
</view>
</view>
<!-- end 简介 end -->
<!-- start 功能 start -->
<view class="h-15rpx" />
<!-- <view class="flex-row items-center justify-evenly card p-y-20rpx">
<view class="flex-row-center" @tap="doPhone">
<view class="flex-row-center w-50rpx h-50rpx bg-#167aff rounded-full">
<text class="font-size-28rpx! color-white iconfont icon-dianhua" />
</view>
<text class="m-l-20rpx sub-text-30">联系食堂</text>
</view>
<view class="w-1px h-30rpx bg-#c4c4c4" />
<view class="flex-row-center" @tap.stop="router.jump('/pages/boxes/list', { id: state.detailId })">
<view class="flex-row-center w-50rpx h-50rpx bg-#167aff rounded-full">
<text class="font-size-28rpx! color-white iconfont icon-yuding" />
</view>
<text class="m-l-20rpx sub-text-28">包厢预定</text>
</view>
<view class="w-1px h-30rpx bg-#c4c4c4" />
<view class="flex-row-center" @tap="doFood">
<view class="flex-row-center w-50rpx h-50rpx bg-#167aff rounded-full">
<text class="font-size-28rpx! color-white iconfont icon-caipu" />
</view>
<text class="m-l-20rpx sub-text-28">每日菜谱</text>
</view>
</view> -->
<!-- end 功能 end -->
</view>
</tm-sticky-header>
<!-- start 商品 start -->
<view class="h-15rpx" />
<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 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, pI) in cV.foodSPURespVOList"
:key="pV.id"
v-model="pV.productCount"
:productId="pV.productId"
:pic="pV.picUrl"
:name="pV.name"
:price="pV.price"
:marketPrice="pV.marketPrice"
:salesCount="pV.salesCount"
:stock="pV.stock"
@add="doAdd(pV)"
@remove="remove(pV)"
/>
</view>
</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="state.totPrice" :totCount="state.totCount" @doContainer="doVisibleCar" @submit="doPay" />
</view>
</template>
</crud-layout>
<product-car
v-model="state.showCarDialog"
:carList="state.carList"
:totPrice="state.totPrice"
:totCount="state.totCount"
@add="doAdd"
@remove="remove"
@submit="doPay"
/>
</template>
<style lang="scss" scoped>
:deep() {
.layout_main > scroll-view {
padding: 0 !important;
}
}
.menu {
&_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;
&::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;
&::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);
}
.menu_item_title {
font-weight: 600;
&::before {
left: 0;
}
}
}
}
}
.car {
box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
}
</style>
+75
View File
@@ -0,0 +1,75 @@
<script setup lang="ts">
import { ref, reactive } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { isEmpty } from "radash";
import { hooks } from "@@/index";
import { productApi } 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";
const data = {};
const state = reactive<any>({
detailId: null,
detail: null,
});
onLoad((options: any) => {
if (!isEmpty(options.id)) {
state.detailId = options.id;
}
});
onShow(() => {
getDetail();
});
const getDetail = async () => {
const _pa = { id: state.detailId };
const { data } = await productApi.get(_pa);
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>
<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="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="m-t-15rpx second-text-26">{{ state.detail.introduction }}</view>
</view>
</view>
<view class="h-15rpx" />
<view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
<view class="prefix_title">评价</view>
</view>
<view class="h-15rpx" />
<view class="flex-col justify-between card p-y-20rpx p-x-30rpx">
<view class="prefix_title">详情</view>
<view class="m-t-15rpx" v-html="state.detail.description"></view>
</view>
</view>
<view class="w-500rpx h-60rpx bg-#0094ff flex justify-center border-rd-8">加入购物车</view>
</crud-layout>
</template>
<style lang="scss" scoped>
:deep() {
.layout_main > scroll-view {
padding: 0 !important;
}
}
</style>
+2 -2
View File
@@ -8,7 +8,7 @@ import { merchantApi } from "@@/api";
const state = reactive<any>({
pa: {
pagesize: 10,
type: "shop",
type: "canteen",
},
});
@@ -46,7 +46,7 @@ const query = (page: number, pagesize: number) => {
class="flex-row card p-20rpx m-b-20rpx"
v-for="(v, i) in pageHook.list"
:key="i"
@tap="router.jump('/pages/merchant/detail', { id: v.id })"
@tap="router.jump('/pages/shop/detail', { id: v.id })"
>
<image class="w-160rpx h-160rpx rounded-12rpx" :src="v.logo" mode="aspectFill" />
<view class="flex-1 flex-col m-l-20rpx">