From eea802dc106e1686bc407afc7a756f918290bec3 Mon Sep 17 00:00:00 2001
From: ctw <>
Date: Sat, 4 Jan 2025 18:13:06 +0800
Subject: [PATCH] =?UTF-8?q?=E5=95=86=E5=BA=97=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages.json                              |  17 +-
 src/pages/shop/components/product-car.vue   |  78 ++++
 src/pages/shop/components/product-row.vue   |  96 +++++
 src/pages/shop/components/product-total.vue |  59 +++
 src/pages/shop/detail.vue                   | 410 ++++++++++++++++++++
 src/pages/shop/product-detail.vue           |  75 ++++
 src/pages/tabbar/shop.vue                   |   4 +-
 7 files changed, 736 insertions(+), 3 deletions(-)
 create mode 100644 src/pages/shop/components/product-car.vue
 create mode 100644 src/pages/shop/components/product-row.vue
 create mode 100644 src/pages/shop/components/product-total.vue
 create mode 100644 src/pages/shop/detail.vue
 create mode 100644 src/pages/shop/product-detail.vue

diff --git a/src/pages.json b/src/pages.json
index 55154ef..c8c4dfd 100644
--- a/src/pages.json
+++ b/src/pages.json
@@ -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",
diff --git a/src/pages/shop/components/product-car.vue b/src/pages/shop/components/product-car.vue
new file mode 100644
index 0000000..6235c7b
--- /dev/null
+++ b/src/pages/shop/components/product-car.vue
@@ -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>
diff --git a/src/pages/shop/components/product-row.vue b/src/pages/shop/components/product-row.vue
new file mode 100644
index 0000000..4c5a6cf
--- /dev/null
+++ b/src/pages/shop/components/product-row.vue
@@ -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>
diff --git a/src/pages/shop/components/product-total.vue b/src/pages/shop/components/product-total.vue
new file mode 100644
index 0000000..8a5aef4
--- /dev/null
+++ b/src/pages/shop/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/shop/detail.vue b/src/pages/shop/detail.vue
new file mode 100644
index 0000000..9270683
--- /dev/null
+++ b/src/pages/shop/detail.vue
@@ -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>
diff --git a/src/pages/shop/product-detail.vue b/src/pages/shop/product-detail.vue
new file mode 100644
index 0000000..a195710
--- /dev/null
+++ b/src/pages/shop/product-detail.vue
@@ -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>
diff --git a/src/pages/tabbar/shop.vue b/src/pages/tabbar/shop.vue
index 938247e..fd0a9a3 100644
--- a/src/pages/tabbar/shop.vue
+++ b/src/pages/tabbar/shop.vue
@@ -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">