From 96a9bdfec83f154563214275baba7bf6ad04fb7b Mon Sep 17 00:00:00 2001
From: code <2388224167@qq.com>
Date: Tue, 12 Nov 2024 09:43:02 +0800
Subject: [PATCH] 111

---
 src/pages/merchant/components/product-car.vue |  76 ++++
 src/pages/merchant/components/product-row.vue |  80 +++-
 .../merchant/components/product-total.vue     |  59 +++
 src/pages/merchant/detail.vue                 | 386 ++++++++++++++----
 src/pages/merchant/product-detail.vue         |  33 +-
 src/pages/order/detail.vue                    |   6 +-
 src/pages/tabbar/home.vue                     |   4 +-
 src/pages/tabbar/my.vue                       |   3 +-
 src/pages/tabbar/order.vue                    |   6 +-
 src/sheep/api/pay.ts                          |  16 +
 src/sheep/api/product.ts                      |   2 +-
 src/sheep/hooks/use-page.ts                   |   1 -
 src/sheep/hooks/use-unit.ts                   |  21 +
 src/sheep/scss/font/iconfont.scss             |  18 +-
 .../tm-ui/components/tm-drawer/tm-drawer.vue  |   1 -
 .../tm-sticky-header/tm-sticky-header.vue     |   2 +-
 .../tm-ui/components/tm-sticky/tm-sticky.vue  |  12 +-
 unocss.config.ts                              |   2 +-
 18 files changed, 611 insertions(+), 117 deletions(-)
 create mode 100644 src/pages/merchant/components/product-car.vue
 create mode 100644 src/pages/merchant/components/product-total.vue

diff --git a/src/pages/merchant/components/product-car.vue b/src/pages/merchant/components/product-car.vue
new file mode 100644
index 0000000..e50d47c
--- /dev/null
+++ b/src/pages/merchant/components/product-car.vue
@@ -0,0 +1,76 @@
+<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="50%"
+        @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>
\ No newline at end of file
diff --git a/src/pages/merchant/components/product-row.vue b/src/pages/merchant/components/product-row.vue
index 4199a25..e62c2b4 100644
--- a/src/pages/merchant/components/product-row.vue
+++ b/src/pages/merchant/components/product-row.vue
@@ -1,10 +1,37 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+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>({
 
 })
@@ -16,12 +43,63 @@ 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="flex-row items-start card p-x-15rpx p-y-25rpx m-b-20rpx"
+        @tap="props.productId && router.jump('/pages/merchant/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-#f63a36!">
+                    ¥{{ 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-#c4c4c4" />
+                <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 iconfont icon-a-" />
+                </view>
+            </view>
+        </view>
+    </view>
 </template>
 
 <style lang="scss" scoped></style>
\ No newline at end of file
diff --git a/src/pages/merchant/components/product-total.vue b/src/pages/merchant/components/product-total.vue
new file mode 100644
index 0000000..8a5aef4
--- /dev/null
+++ b/src/pages/merchant/components/product-total.vue
@@ -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>
\ No newline at end of file
diff --git a/src/pages/merchant/detail.vue b/src/pages/merchant/detail.vue
index 194468b..f5c8d2b 100644
--- a/src/pages/merchant/detail.vue
+++ b/src/pages/merchant/detail.vue
@@ -1,30 +1,44 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
+import { ref, reactive, nextTick } from "vue";
 import { onLoad, onShow } from "@dcloudio/uni-app";
 import { isEmpty } from "radash"
 
-import { hooks } from "@@/index"
-import { merchantApi, foodApi } from "@@/api"
+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
-        getDetail()
     }
 });
 onShow(() => {
-
+    getDetail()
+    getShopCar()
+    getClassify()
 })
 
 const getDetail = async () => {
@@ -34,99 +48,313 @@ const getDetail = async () => {
 }
 
 const getShopCar = async () => {
-    const _pa = {}
+    const _pa = { merchantId: state.detailId }
     const { data } = await foodApi.getShopCar(_pa)
-}
+    console.log(data, "data");
 
-const updateShopCar = async () => {
-    const _pa = {}
-    const { data } = await foodApi.updateShopCar(_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 = {}
+    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 _pa = {}
+    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 doPay = 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/order/detail", { id: createData }, 3)
+    } catch (error) {
+        console.error(error);
+        uni.hideLoading()
+    }
+}
+
+const getHeight = () => {
+    const rpx = 480
+    return `calc(100vh - ${uni.upx2px(rpx)}px)`
 }
 
 </script>
 
 <template>
-    <crud-layout bg="/static/page/blue-bg.png">
-        <!-- start 简介 start -->
-        <view class="h-10rpx" />
-        <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>
+    <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>
+                                </view>
+                                <view>
+                                    <tm-tag size="s">{{ state.detail.deptStr }}</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}") }}
+                                    ~
+                                    {{ hooks.useTime(state.detail.applianceEndTime, "{h}:{i}") }}
+                                </text>
+                            </view>
+                            <view class="m-t-10rpx second-text-28">
+                                <text>食堂地址</text>
+                                <text class="m-l-10rpx">{{ state.detail.addressDes }}</text>
+                            </view>
+                        </view>
                     </view>
-                    <view>
-                        <tm-tag size="s">{{ state.detail.deptStr }}</tm-tag>
+                    <!-- end 简介 end -->
+                    <!-- start 功能 start -->
+                    <view class="h-15rpx" />
+                    <view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
+                        <view class="flex-row-center">
+                            <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">
+                            <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>
+                    <!-- end 功能 end -->
                 </view>
-                <view class="m-t-10rpx second-text-28">
-                    <text>营业时间</text>
-                    <text class="m-l-10rpx">
-                        {{ hooks.useTime(state.detail.applianceStartTime, "{h}:{i}") }}
-                        ~
-                        {{ hooks.useTime(state.detail.applianceEndTime, "{h}:{i}") }}
-                    </text>
-                </view>
-                <view class="m-t-10rpx second-text-28">
-                    <text>食堂地址</text>
-                    <text class="m-l-10rpx">{{ state.detail.addressDes }}</text>
-                </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 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">
+                    <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>
-        </view>
-        <!-- end 简介 end -->
-        <!-- start 功能 start -->
-        <view class="h-10rpx" />
-        <view class="flex-row items-center justify-between card p-y-20rpx p-x-30rpx">
-            <view class="flex-row-center">
-                <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-#515151" />
-            <view class="flex-row-center">
-                <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>
-        <!-- end 功能 end -->
-
-        <!-- start 轮播 start -->
-        <!-- <view class="h-10rpx" /> -->
-        <!-- end 轮播 end -->
-
-        <!-- start 商品 start -->
-        <view class="h-10rpx" />
-
-        <view>
-            <view>
-                <view>
-
-                </view>
-            </view>
-            <view>
-
-            </view>
-        </view>
-
-        <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" @submit="doPay"
+                    @doContainer="doVisibleCar" />
+            </view>
+        </template>
     </crud-layout>
+    <product-car v-model="state.showCarDialog" :carList="state.carList" :totPrice="state.totPrice"
+        :totCount="state.totCount" @add="doAdd" @remove="remove" />
 </template>
 
-<style lang="scss" scoped></style>
\ No newline at end of file
+<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>
\ No newline at end of file
diff --git a/src/pages/merchant/product-detail.vue b/src/pages/merchant/product-detail.vue
index d0887ad..9ae1ac8 100644
--- a/src/pages/merchant/product-detail.vue
+++ b/src/pages/merchant/product-detail.vue
@@ -10,16 +10,10 @@ 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 = {
-    list: [
-        'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe1.jpg',
-        'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe2.jpg',
-        'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe3.jpg',
-        'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe4.jpg',
-        'https://cdn.zebraui.com/zebra-ui/images/swipe-demo/swipe5.jpg',
-    ]
 }
 const state = reactive<any>({
     detailId: null,
+    detail: null,
 })
 
 onLoad((options: any) => {
@@ -34,29 +28,40 @@ onShow(() => {
 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 v-model="data.list">
-            <z-swiper-item v-for="(v, i) in data.list" :key="i">
-                <image class="w-100vw" :src="v" mode="aspectFill" />
+        <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-row items-center justify-between card p-y-20rpx p-x-30rpx">
-                <view></view>
-                <view></view>
+            <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-row items-center justify-between card p-y-20rpx p-x-30rpx">
+            <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>
     </crud-layout>
diff --git a/src/pages/order/detail.vue b/src/pages/order/detail.vue
index f1bc8a7..41c5648 100644
--- a/src/pages/order/detail.vue
+++ b/src/pages/order/detail.vue
@@ -66,7 +66,7 @@ const getShopCarList = async () => {
                     <view>部门</view>
                     <view>{{ state.detail.deptName }}</view>
                 </view>
-                <view class="m-t-15rpx h-1px bg-#515151 bg-opacity-5" />
+                <view class="m-t-15rpx h-1px bg-#c4c4c4 bg-opacity-5" />
                 <view class="info_cell">
                     <view>订单号</view>
                     <view>{{ state.detail.id }}</view>
@@ -100,7 +100,7 @@ const getShopCarList = async () => {
                         <view class="sub-text-32">¥ {{ hooks.useMoney(v.totalPrice) }}</view>
                     </view>
                 </view>
-                <view class="m-y-15rpx h-1px bg-#515151 bg-opacity-5" />
+                <view class="m-y-15rpx h-1px bg-#c4c4c4 bg-opacity-5" />
                 <view class="flex-row items-center justify-between">
                     <view class="sub-text-32">实付款</view>
                     <view class="flex-row items-end">
@@ -123,7 +123,7 @@ const getShopCarList = async () => {
     }
 
     &>view {
-        color: #515151;
+        color: #c4c4c4;
         font-size: 28rpx;
         font-weight: 500;
         line-height: 1.4em;
diff --git a/src/pages/tabbar/home.vue b/src/pages/tabbar/home.vue
index f06a77c..ec39658 100644
--- a/src/pages/tabbar/home.vue
+++ b/src/pages/tabbar/home.vue
@@ -6,7 +6,9 @@ import { hooks, router } from "@@/index"
 import { merchantApi } from "@@/api"
 
 const state = reactive<any>({
-
+    pa: {
+        pagesize: 10
+    }
 })
 
 onLoad(() => {
diff --git a/src/pages/tabbar/my.vue b/src/pages/tabbar/my.vue
index 0ddea3e..d7b1b6a 100644
--- a/src/pages/tabbar/my.vue
+++ b/src/pages/tabbar/my.vue
@@ -9,7 +9,7 @@ import { merchantApi, userApi, walletApi } from "@@/api"
 const data = {
     serviceList: [
         { text: '钱包管理', icon: '/static/icon/service_3.png', router: '/pages/wallet/list' },
-        { text: '车牌管理', icon: '/static/icon/service_2.png', router: '/pages/user/diff-price' },
+        // { text: '车牌管理', icon: '/static/icon/service_2.png', router: '/pages/user/diff-price' },
         { text: '外来人员就餐', icon: '/static/icon/service_1.png', router: '/pages/apply/foreign-list' },
         { text: '跨单位就餐', icon: '/static/icon/service_1.png', router: '/pages/apply/stride-list' },
     ]
@@ -93,7 +93,6 @@ const doLogout = async () => {
         </view>
 
         <view class="m-t-40rpx rounded-20rpx shadow-main p-30rpx p-b-40rpx bg-white!">
-            <view class="main-text-30 m-b-35rpx">我的服务</view>
             <view class="service_item flex-row items-center justify-between" v-for="(v, i) in data.serviceList" :key="i"
                 @tap="router.jump(v.router)">
                 <view class="flex-row-center">
diff --git a/src/pages/tabbar/order.vue b/src/pages/tabbar/order.vue
index 918fc2a..ad3b1b8 100644
--- a/src/pages/tabbar/order.vue
+++ b/src/pages/tabbar/order.vue
@@ -67,7 +67,7 @@ const doToDetail = (v: any) => {
                         <view class="flex-row items-center justify-between">
                             <view class="flex-row items-center">
                                 <view class="main-text-28">{{ v.merchantStr }}</view>
-                                <view class="m-l-15rpx color-#515151 font-size-26rpx! iconfont icon-youjiantou" />
+                                <view class="m-l-15rpx color-#c4c4c4 font-size-26rpx! iconfont icon-youjiantou" />
                             </view>
                             <tm-tag v-if="v.orderStatus == 1" color="info" size="xs">未支付</tm-tag>
                             <tm-tag v-if="v.orderStatus == 5" color="success" size="xs">待核销</tm-tag>
@@ -123,8 +123,8 @@ const doToDetail = (v: any) => {
 
 <style lang="scss" scoped>
 .botder_btn {
-    border: 1px solid #515151;
-    color: #515151;
+    border: 1px solid #c4c4c4;
+    color: #c4c4c4;
     font-weight: 500;
     font-size: 28rpx;
     border-radius: 10rpx;
diff --git a/src/sheep/api/pay.ts b/src/sheep/api/pay.ts
index eb08162..8576f25 100644
--- a/src/sheep/api/pay.ts
+++ b/src/sheep/api/pay.ts
@@ -17,4 +17,20 @@ export default {
       data,
     });
   },
+  // 创建硬件订单
+  createHardwareOrder: (data) => {
+    return request({
+      url: "/hardware/order/create-order",
+      method: "POST",
+      data,
+    });
+  },
+  // 结算
+  submitHardwareOrder: (data) => {
+    return request({
+      url: "/hardware/order/submit-order",
+      method: "POST",
+      data,
+    });
+  },
 };
diff --git a/src/sheep/api/product.ts b/src/sheep/api/product.ts
index 91c0dd2..46d78c4 100644
--- a/src/sheep/api/product.ts
+++ b/src/sheep/api/product.ts
@@ -3,7 +3,7 @@ import request from "@/sheep/utils/request";
 export default {
   get: (params) => {
     return request({
-      url: "/product/spu/get-detail",
+      url: "/onlinefood/spu/get-detail",
       method: "GET",
       params,
     });
diff --git a/src/sheep/hooks/use-page.ts b/src/sheep/hooks/use-page.ts
index 80effdc..d7c91c7 100644
--- a/src/sheep/hooks/use-page.ts
+++ b/src/sheep/hooks/use-page.ts
@@ -34,7 +34,6 @@ export const usePage = (
   const setPage = async (list: Array<any>) => {
     if (ref == null) return;
     state.list.totalList = await ref.value.complete(list);
-    console.log(state.list, "list");
   };
   const startPage = async (
     page: number,
diff --git a/src/sheep/hooks/use-unit.ts b/src/sheep/hooks/use-unit.ts
index 3f67726..cd4295c 100644
--- a/src/sheep/hooks/use-unit.ts
+++ b/src/sheep/hooks/use-unit.ts
@@ -4,6 +4,27 @@ export const useMoney = (num) => {
   return (parsedNumber / 100.0).toFixed(1);
 };
 
+export function useFormatNum(
+  prefix: string,
+  type: "exact" | string,
+  num: number
+) {
+  num = num || 0;
+  if (type === "exact") {
+    return prefix + num;
+  }
+  if (num < 10) {
+    return `${prefix}≤10`;
+  }
+  // 情况三：大于 10，除第一位外，其它位都显示为0
+  // 例如：100  - 199  显示为 100+
+  //      9000 - 9999 显示为 9000+
+  const numStr = num.toString();
+  const first = numStr[0];
+  const other = "0".repeat(numStr.length - 1);
+  return `${prefix}${first}${other}+`;
+}
+
 export function useTime(time, pattern) {
   if (arguments.length === 0 || !time) {
     return null;
diff --git a/src/sheep/scss/font/iconfont.scss b/src/sheep/scss/font/iconfont.scss
index 50639b7..70e5391 100644
--- a/src/sheep/scss/font/iconfont.scss
+++ b/src/sheep/scss/font/iconfont.scss
@@ -1,9 +1,9 @@
 @font-face {
     font-family: "iconfont";
     /* Project id 4740692 */
-    src: url('//at.alicdn.com/t/c/font_4740692_4h93hfstead.woff2?t=1731328362704') format('woff2'),
-        url('//at.alicdn.com/t/c/font_4740692_4h93hfstead.woff?t=1731328362704') format('woff'),
-        url('//at.alicdn.com/t/c/font_4740692_4h93hfstead.ttf?t=1731328362704') format('truetype');
+    src: url('//at.alicdn.com/t/c/font_4740692_o39uyvhjlur.woff2?t=1731367840461') format('woff2'),
+        url('//at.alicdn.com/t/c/font_4740692_o39uyvhjlur.woff?t=1731367840461') format('woff'),
+        url('//at.alicdn.com/t/c/font_4740692_o39uyvhjlur.ttf?t=1731367840461') format('truetype');
 }
 
 .iconfont {
@@ -14,6 +14,18 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.icon-biaoqianlanicon_gouwuche-xuanzhong:before {
+    content: "\e61c";
+}
+
+.icon-a-:before {
+    content: "\e651";
+}
+
+.icon-a--:before {
+    content: "\e652";
+}
+
 .icon-dianhua:before {
     content: "\e614";
 }
diff --git a/src/uni_modules/tm-ui/components/tm-drawer/tm-drawer.vue b/src/uni_modules/tm-ui/components/tm-drawer/tm-drawer.vue
index a4b0048..a644f74 100644
--- a/src/uni_modules/tm-ui/components/tm-drawer/tm-drawer.vue
+++ b/src/uni_modules/tm-ui/components/tm-drawer/tm-drawer.vue
@@ -588,7 +588,6 @@ export default {
 <style lang="scss" scoped>
 .tmDrawerFooter {
 	width: 100%;
-	padding: 0 24rpx 0px 24rpx;
 	box-sizing: border-box;
 }
 
diff --git a/src/uni_modules/tm-ui/components/tm-sticky-header/tm-sticky-header.vue b/src/uni_modules/tm-ui/components/tm-sticky-header/tm-sticky-header.vue
index 601c46e..995b267 100644
--- a/src/uni_modules/tm-ui/components/tm-sticky-header/tm-sticky-header.vue
+++ b/src/uni_modules/tm-ui/components/tm-sticky-header/tm-sticky-header.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, watch, PropType } from "vue";
+import { computed, ref, onMounted, watch, type PropType } from "vue";
 import { arrayNumberValid, getUid, arrayNumberValidByStyleMP, arrayNumberValidByStyleBorderColor, arrayNumberValidByStyleBorderStyle, covetUniNumber, linearValid, getUnit } from "../../libs/tool";
 import { useTmConfig } from "../../libs/config";
 import { getDefaultColor, getDefaultColorObj, getOutlineColorObj, getTextColorObj, getThinColorObj } from "../../libs/colors";
diff --git a/src/uni_modules/tm-ui/components/tm-sticky/tm-sticky.vue b/src/uni_modules/tm-ui/components/tm-sticky/tm-sticky.vue
index a326619..27e405d 100644
--- a/src/uni_modules/tm-ui/components/tm-sticky/tm-sticky.vue
+++ b/src/uni_modules/tm-ui/components/tm-sticky/tm-sticky.vue
@@ -1,5 +1,5 @@
 <script setup lang="ts">
-import { computed, ref, onMounted, watch, PropType } from "vue";
+import { computed, ref, onMounted, watch, type PropType } from "vue";
 import { arrayNumberValid, getUid, arrayNumberValidByStyleMP, arrayNumberValidByStyleBorderColor, arrayNumberValidByStyleBorderStyle, covetUniNumber, linearValid, getUnit } from "../../libs/tool";
 import { useTmConfig } from "../../libs/config";
 import { getDefaultColor, getDefaultColorObj, getOutlineColorObj, getTextColorObj, getThinColorObj } from "../../libs/colors";
@@ -28,15 +28,15 @@ export default {
 };
 </script>
 <style lang="css" scoped>
-.tmSticky{
+.tmSticky {
     position: relative;
 }
 </style>
 <template>
-<view class="tmSticky">
-    <!-- 
+    <view class="tmSticky">
+        <!-- 
     @slot 正常布局内容,如果想粘性头,tm-sticky-header组件必须是直接子节点组件
     -->
-    <slot></slot>
-</view>
+        <slot></slot>
+    </view>
 </template>
\ No newline at end of file
diff --git a/unocss.config.ts b/unocss.config.ts
index 9602056..387792a 100644
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -63,7 +63,7 @@ export default {
       ([, d]) => ({
         "font-size": `${d}rpx`,
         "font-weight": 500,
-        color: "#515151",
+        color: "#c4c4c4",
         "line-height": `1.4em`,
       }),
     ],