From 9da1737f0daf5e8d37ba6686b85e36ab3a950b12 Mon Sep 17 00:00:00 2001
From: dzc <2388224167@qq.com>
Date: Thu, 9 Jan 2025 19:47:31 +0800
Subject: [PATCH] =?UTF-8?q?feat:=E8=AE=A2=E5=8D=95=E3=80=81=E6=A0=BC?=
 =?UTF-8?q?=E5=BC=8F=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .prettierrc                   |   8 +
 src/pages/merchant/detail.vue | 709 ++++++++++++++++------------------
 src/pages/order/detail.vue    | 405 +++++++++----------
 3 files changed, 548 insertions(+), 574 deletions(-)

diff --git a/.prettierrc b/.prettierrc
index e69de29..5e07d0e 100644
--- a/.prettierrc
+++ b/.prettierrc
@@ -0,0 +1,8 @@
+{
+  "tabWidth": 2,
+  "useTabs": true,
+  "trailingComma": "all",
+  "semi": false,
+  "singleQuote": false,
+  "printWidth": 120
+}
\ No newline at end of file
diff --git a/src/pages/merchant/detail.vue b/src/pages/merchant/detail.vue
index 75c6b23..683cc88 100644
--- a/src/pages/merchant/detail.vue
+++ b/src/pages/merchant/detail.vue
@@ -1,443 +1,398 @@
 <script setup lang="ts">
-import { ref, reactive, nextTick } from "vue";
-import { onLoad, onShow } from "@dcloudio/uni-app";
-import { isEmpty } from "radash";
+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 { hooks, router } from "@@/index"
+import { merchantApi, foodApi, payApi } from "@@/api"
 
-import { filePath } from "@@/utils/file";
+import { filePath } from "@@/utils/file"
 
-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 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 ProductRow from "./components/product-row.vue"
+import ProductCar from "./components/product-car.vue"
+import ProductTotal from "./components/product-total.vue"
 
-const data = {};
+const data = {}
 const state = reactive<any>({
-  detailId: null,
-  totPrice: 0,
-  totCount: 0,
-  currentClassifyIndex: 0,
-  showCarDialog: false,
+	detailId: null,
+	totPrice: 0,
+	totCount: 0,
+	currentClassifyIndex: 0,
+	showCarDialog: false,
 
-  detail: {},
-  carList: [],
-  classifyList: [],
-  shopList: [],
-});
+	detail: {},
+	carList: [],
+	classifyList: [],
+	shopList: [],
+})
 
 onLoad((options: any) => {
-  if (!isEmpty(options.id)) {
-    state.detailId = options.id;
-  }
-});
+	if (!isEmpty(options.id)) {
+		state.detailId = options.id
+	}
+})
 onShow(() => {
-  getDetail();
-  getShopCar();
-  getClassify();
-});
+	getDetail()
+	getShopCar()
+	getClassify()
+})
 
 const getDetail = async () => {
-  const _pa = { id: state.detailId };
-  const { data } = await merchantApi.detail(_pa);
-  state.detail = data;
-};
+	const _pa = { id: state.detailId }
+	const { data } = await merchantApi.detail(_pa)
+	state.detail = data
+}
 
 const getShopCar = async () => {
-  const _pa = { merchantId: state.detailId, hardType: "CANTEEN" };
-  const { data } = await foodApi.getShopCar(_pa);
-  state.carList = data ?? [];
-  asyncCarCount(state.shopList)
-  state.totPrice = state.carList
-    .map((v) => Number(v.totalPrice))
-    .reduce((pre, next) => pre + next, 0);
-  state.totCount = state.carList
-    .map((v) => v.productCount)
-    .reduce((pre, next) => pre + next, 0);
-    
-};
+	const _pa = { merchantId: state.detailId, hardType: "CANTEEN" }
+	const { data } = await foodApi.getShopCar(_pa)
+	state.carList = data ?? []
+	asyncCarCount(state.shopList)
+	state.totPrice = state.carList.map((v) => Number(v.totalPrice)).reduce((pre, next) => pre + next, 0)
+	state.totCount = state.carList.map((v) => v.productCount).reduce((pre, next) => pre + next, 0)
+}
 
 const getClassify = async () => {
-  const _pa = { merchantId: state.detailId };
-  const { data } = await foodApi.classify(_pa);
-  state.classifyList = data;
-  if (!isEmpty(state.classifyList)) {
-    getPorduct();
-  }
-};
+	const _pa = { 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 !== undefined && v.productCount >= 0)
-    .map((v) => {
-      return {
-        productCount: v.productCount,
-        productId: v.productId,
-      };
-    });
-  if (isEmpty(list)) return;
-  const _pa = { merchantId: state.detailId, list: list, hardType:"CANTEEN" };
-  const { data, code }: any = await foodApi.updateShopCar(_pa);
-  if (code == 0) await getShopCar();
-};
+	if (isEmpty(state.carList)) return
+	const list = state.carList
+		.filter((v) => v.productCount !== undefined && v.productCount >= 0)
+		.map((v) => {
+			return {
+				productCount: v.productCount,
+				productId: v.productId,
+			}
+		})
+	if (isEmpty(list)) return
+	const _pa = { merchantId: state.detailId, list: list, hardType: "CANTEEN" }
+	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 = {
-    merchantId: state.detailId,
-    categoryId: target.id,
-  };
-  const { data } = await foodApi.product(_pa);
-  data.forEach((i: any) => {
-    i.productCount = 0;
-    i.productId = i.id;
-  });
-  asyncCarCount(data)
-};
+	const target = state.classifyList[state.currentClassifyIndex]
+	if (isEmpty(target)) return
+	const _pa = {
+		merchantId: state.detailId,
+		categoryId: target.id,
+	}
+	const { data } = await foodApi.product(_pa)
+	data.forEach((i: any) => {
+		i.productCount = 0
+		i.productId = i.id
+	})
+	asyncCarCount(data)
+}
 
 // 同步购买数量
-const asyncCarCount = (shopList)=>{
-  if (state.carList && state.carList.length) {
-    for (const i of shopList) {
-      for (const v of state.carList) {
-        if (i.id == v.productId) {
-          i.productCount = v.productCount;
-        }
-      }
-    }
-  }
-  state.shopList = shopList;
+const asyncCarCount = (shopList) => {
+	if (state.carList && state.carList.length) {
+		for (const i of shopList) {
+			for (const v of state.carList) {
+				if (i.id == v.productId) {
+					i.productCount = v.productCount
+				}
+			}
+		}
+	}
+	state.shopList = shopList
 }
 
 const doAdd = async (item: any) => {
-  chentProductCount(item);
-};
+	chentProductCount(item)
+}
 
 const remove = async (item: any) => {
-  chentProductCount(item);
-};
+	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 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();
-};
+	state.currentClassifyIndex = i
+	getClassify()
+}
 
 const doVisibleCar = async () => {
-  state.showCarDialog = true;
-};
+	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();
-    uni.hideLoading();
-    uni.showToast({ title: "支付成功", icon: "none" });
-    router.jump("/pages/tabbar/order");
-  } catch (error) {
-    console.error(error);
-    uni.hideLoading();
-  }
-};
+	try {
+		if (isEmpty(state.carList)) {
+			uni.showToast({ title: "请至少购买一件商品", icon: "none" })
+			return
+		}
+		uni.showLoading({ title: "支付中...", mask: false })
+		const _createtPa = {
+			carParentId: state.carList[0].parentCarId,
+			hardType: "CANTEEN",
+		}
+		const { data: createData, code: createCode }: any = await payApi.createHardwareOrder(_createtPa)
+		if (createCode != 0) throw new Error()
+		uni.hideLoading()
+		uni.showToast({ title: "支付成功", icon: "none" })
+		router.jump("/pages/tabbar/order")
+	} catch (error) {
+		console.error(error)
+		uni.hideLoading()
+	}
+}
 
 const doPay = async () => {
-  uni.showModal({
-    title: "提示",
-    content: "是否确定购买",
-    confirmColor: "#0094ff",
-    success: async (res) => {
-      if (!res.confirm) return;
-      submitPay();
-    },
-  });
-};
+	uni.showModal({
+		title: "提示",
+		content: "是否确定购买",
+		confirmColor: "#0094ff",
+		success: async (res) => {
+			if (!res.confirm) return
+			submitPay()
+		},
+	})
+}
 
 const getHeight = () => {
-  const rpx = 480;
-  return `calc(100vh - ${uni.upx2px(rpx)}px)`;
-};
+	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);
-};
+	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 });
-};
+	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.swiperPic?.split(',')"
-          :key="i"
-        >
-          <image
-            class="w-100vw h-400rpx"
-            :src="filePath(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="filePath(state.detail.logoPic)"
-              mode="aspectFill"
-            />
-            <view class="flex-1 flex-col m-l-20rpx">
-              <view class="flex-row items-center justify-between">
-                <view class="flex-row-center sub-text-36">
-                  <text>{{ state.detail.name }}</text>
-                </view>
-                <view>
-                  <tm-tag size="s">{{ state.detail.deptName }}</tm-tag>
-                </view>
-              </view>
-              <view class="m-t-10rpx second-text-28">
-                <text>营业时间</text>
-                <text class="m-l-10rpx">
-                  {{ state.detail.jobStartTime }}
-                  ~
-                  {{ state.detail.jobEndTime }}
-                </text>
-              </view>
-              <view class="m-t-10rpx second-text-28">
-                <text>食堂地址</text>
-                <text class="m-l-10rpx">{{ state.detail.addressDes }}</text>
-              </view>
-            </view>
-          </view>
-          <!-- end 简介 end -->
-          <!-- 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>
+	<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.swiperPic?.split(',')" :key="i">
+					<image class="w-100vw h-400rpx" :src="filePath(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="filePath(state.detail.logoPic)" mode="aspectFill" />
+						<view class="flex-1 flex-col m-l-20rpx">
+							<view class="flex-row items-center justify-between">
+								<view class="flex-row-center sub-text-36">
+									<text>{{ state.detail.name }}</text>
+								</view>
+								<view>
+									<tm-tag size="s">{{ state.detail.deptName }}</tm-tag>
+								</view>
+							</view>
+							<view class="m-t-10rpx second-text-28">
+								<text>营业时间</text>
+								<text class="m-l-10rpx">
+									{{ state.detail.jobStartTime }}
+									~
+									{{ state.detail.jobEndTime }}
+								</text>
+							</view>
+							<view class="m-t-10rpx second-text-28">
+								<text>食堂地址</text>
+								<text class="m-l-10rpx">{{ state.detail.addressDes }}</text>
+							</view>
+						</view>
+					</view>
+					<!-- end 简介 end -->
+					<!-- 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="(pV, pI) in state.shopList" :key="pI">
-            <view class="m-x-15rpx">
-              <product-row
-                :key="pV.id"
-                v-model="pV.productCount"
-                :productId="pV.id"
-                :pic="filePath(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"
-  />
+			<!-- 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="(pV, pI) in state.shopList" :key="pI">
+						<view class="m-x-15rpx">
+							<product-row
+								:key="pV.id"
+								v-model="pV.productCount"
+								:productId="pV.id"
+								:pic="filePath(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;
-  }
+	.layout_main > scroll-view {
+		padding: 0 !important;
+	}
 }
 
 .menu {
-  &_item {
-    width: 100%;
-    height: 88rpx;
-    position: relative;
-    transition: all linear 0.2s;
+	&_item {
+		width: 100%;
+		height: 88rpx;
+		position: relative;
+		transition: all linear 0.2s;
 
-    &_title {
-      width: 100%;
-      line-height: 32rpx;
-      font-size: 30rpx;
-      font-weight: 400;
-      color: #333;
-      margin-left: 28rpx;
-      position: relative;
-      z-index: 0;
+		&_title {
+			width: 100%;
+			line-height: 32rpx;
+			font-size: 30rpx;
+			font-weight: 400;
+			color: #333;
+			margin-left: 28rpx;
+			position: relative;
+			z-index: 0;
 
-      &::before {
-        content: "";
-        width: 64rpx;
-        height: 12rpx;
-        background: linear-gradient(90deg, #0094ff, #e9f5fe) !important;
-        position: absolute;
-        left: -64rpx;
-        bottom: 0;
-        z-index: -1;
-        transition: all linear 0.2s;
-      }
-    }
+			&::before {
+				content: "";
+				width: 64rpx;
+				height: 12rpx;
+				background: linear-gradient(90deg, #0094ff, #e9f5fe) !important;
+				position: absolute;
+				left: -64rpx;
+				bottom: 0;
+				z-index: -1;
+				transition: all linear 0.2s;
+			}
+		}
 
-    &.menu_item_active {
-      background-color: #fff;
-      border-radius: 20rpx 0 0 20rpx;
+		&.menu_item_active {
+			background-color: #fff;
+			border-radius: 20rpx 0 0 20rpx;
 
-      &::before {
-        content: "";
-        position: absolute;
-        right: 0;
-        bottom: -20rpx;
-        width: 20rpx;
-        height: 20rpx;
-        background: radial-gradient(
-          circle at 0 100%,
-          transparent 20rpx,
-          #fff 0
-        );
-      }
+			&::before {
+				content: "";
+				position: absolute;
+				right: 0;
+				bottom: -20rpx;
+				width: 20rpx;
+				height: 20rpx;
+				background: radial-gradient(circle at 0 100%, transparent 20rpx, #fff 0);
+			}
 
-      &::after {
-        content: "";
-        position: absolute;
-        top: -20rpx;
-        right: 0;
-        width: 20rpx;
-        height: 20rpx;
-        background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
-      }
+			&::after {
+				content: "";
+				position: absolute;
+				top: -20rpx;
+				right: 0;
+				width: 20rpx;
+				height: 20rpx;
+				background: radial-gradient(circle at 0% 0%, transparent 20rpx, #fff 0);
+			}
 
-      .menu_item_title {
-        font-weight: 600;
+			.menu_item_title {
+				font-weight: 600;
 
-        &::before {
-          left: 0;
-        }
-      }
-    }
-  }
+				&::before {
+					left: 0;
+				}
+			}
+		}
+	}
 }
 
 .car {
-  box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
+	box-shadow: 0 8rpx 40rpx rgba(0, 0, 0, 0.1);
 }
 </style>
diff --git a/src/pages/order/detail.vue b/src/pages/order/detail.vue
index 440e1fe..d05d81e 100644
--- a/src/pages/order/detail.vue
+++ b/src/pages/order/detail.vue
@@ -1,234 +1,245 @@
 <script setup lang="ts">
-import { ref, reactive } from "vue";
-import { onLoad, onShow } from "@dcloudio/uni-app";
+import { ref, reactive } from "vue"
+import { onLoad, onShow } from "@dcloudio/uni-app"
 import { isEmpty } from "radash"
 
 import { hooks, constant, router } from "@@/index"
 import { orderApi, refundApi } from "@@/api"
 
-import { filePath } from "@@/utils/file";
+import { filePath } from "@@/utils/file"
 
-const data = {
-
-}
+const data = {}
 const state = reactive<any>({
-    detailId: null,
-    detail: {},
-    refundDetail: {},
-    shopCarList: [],
+	detailId: null,
+	detail: {},
+	refundDetail: {},
+	shopCarList: [],
 })
 
 onLoad((options: any) => {
-    if (!isEmpty(options.id)) {
-        state.detailId = options.id
-    }
-});
+	if (!isEmpty(options.id)) {
+		state.detailId = options.id
+	}
+})
 onShow(() => {
-    getDetail()
-    getShopCarList()
+	getDetail()
+	getShopCarList()
 })
 
 const getDetail = async () => {
-    if (isEmpty(state.detailId)) return
-    const _pa = { id: state.detailId };
-    const { data } = await orderApi.detail(_pa)
-    state.detail = data
-    if (state.detail.orderStatus == 10) {
-        getRefundDetail()
-    }
+	if (isEmpty(state.detailId)) return
+	const _pa = { id: state.detailId }
+	const { data } = await orderApi.detail(_pa)
+	state.detail = data
+	if (state.detail.orderStatus == 10) {
+		getRefundDetail()
+	}
 }
 
 const getShopCarList = async () => {
-    if (isEmpty(state.detailId)) return
-    const _pa = { orderId: state.detailId };
-    const { data } = await orderApi.shopCarList(_pa)
-    state.shopCarList = data
+	if (isEmpty(state.detailId)) return
+	const _pa = { orderId: state.detailId }
+	const { data } = await orderApi.shopCarList(_pa)
+	state.shopCarList = data
 }
 
 const getRefundDetail = async () => {
-    if (isEmpty(state.detailId)) return
-    const _pa = { id: state.detailId };
-    const { data } = await refundApi.get(_pa)
-    state.refundDetail = data
+	if (isEmpty(state.detailId)) return
+	const _pa = { id: state.detailId }
+	const { data } = await refundApi.get(_pa)
+	state.refundDetail = data
 }
 
 const doCancelRefund = async () => {
-    uni.showModal({
-        title: '提示',
-        content: '是否确定取消申请退款',
-        confirmColor: '#0094ff',
-        success: async (res) => {
-            if (!res.confirm) return
-            uni.showLoading({ title: '取消中...', mask: false });
-            const _pa = { id: state.refundDetail.id }
-            const data = refundApi.cancel(_pa)
-            uni.hideLoading()
-            uni.showToast({ title: '取消成功', icon: "none" });
-            router.jump("/pages/tabbar/order", {}, 2)
-        }
-    })
+	uni.showModal({
+		title: "提示",
+		content: "是否确定取消申请退款",
+		confirmColor: "#0094ff",
+		success: async (res) => {
+			if (!res.confirm) return
+			uni.showLoading({ title: "取消中...", mask: false })
+			const _pa = { id: state.refundDetail.id }
+			const data = refundApi.cancel(_pa)
+			uni.hideLoading()
+			uni.showToast({ title: "取消成功", icon: "none" })
+			router.jump("/pages/tabbar/order", {}, 2)
+		},
+	})
 }
-
 </script>
 
-
 <template>
-    <crud-layout title="订单详情" mainIsScroll bg="/static/page/blue-bg.png">
-        <view class="h-30rpx" />
-        <view class="relative flex-col justify-center overflow-hidden card p-x-20rpx p-y-30rpx m-b-20rpx">
-            <image class="absolute top--20rpx right--60rpx w-160rpx h-160rpx" src="/static/icon/guarantee.png"
-                mode="widthFix" />
-            <view class="sub-text-32">订单信息</view>
-            <view class="m-t-15rpx">
-                <view class="info_cell">
-                    <view>用户</view>
-                    <view>{{ state.detail.username }}</view>
-                </view>
-                <view class="info_cell">
-                    <view>手机号</view>
-                    <view>{{ state.detail.userMobile }}</view>
-                </view>
-                <view class="info_cell">
-                    <view>商户</view>
-                    <view>{{ state.detail.merchantStr }}</view>
-                </view>
-                <view class="m-t-15rpx h-1px bg-#999 bg-opacity-5" />
-                <view class="info_cell">
-                    <view>订单号</view>
-                    <view>{{ state.detail.id }}</view>
-                </view>
-                <view class="info_cell">
-                    <view>下单时间</view>
-                    <view>{{ hooks.useTime(state.detail.createTime, "") }}</view>
-                </view>
-                <view class="info_cell">
-                    <view>支付方式</view>
-                    <view>
-                        {{ hooks.useEnum("hardwareOrderTypeEnum", state.detail.orderType) }}
-                    </view>
-                </view>
-            </view>
-        </view>
-        <view class="flex-col justify-center card p-x-20rpx p-y-30rpx m-b-20rpx">
-            <view class="sub-text-32">商品费用</view>
-            <view class="m-t-15rpx">
-                <view class="flex-row items-start justify-between" v-for="(v, i) in state.shopCarList" :key="i"
-                    @tap.stop="router.jump('/pages/merchant/product-detail', { id: v.productId })">
-                    <view class="flex-row items-center">
-                        <image class="w-160rpx h-160rpx rounded-8rpx" :src="filePath(v.productPic)" mode="aspectFill" />
-                        <view class="flex-col m-l-15rpx second-text-26">
-                            <view class="sub-text-28">{{ v.productName }}</view>
-                            <view class="m-t-5rpx color-red">¥ {{ hooks.useMoney(v.productPrice) }}</view>
-                            <view class="m-t-5rpx">x {{ v.productCount }}</view>
-                        </view>
-                    </view>
-                    <view class="flex-row-center">
-                        <view class="sub-text-32 color-red!">¥ {{ hooks.useMoney(v.totalPrice) }}</view>
-                    </view>
-                </view>
-                <view class="m-y-15rpx h-1px bg-#999 bg-opacity-5" />
-                <view class="flex-row items-center justify-between">
-                    <view class="sub-text-32">实付款</view>
-                    <view class="flex-row items-end">
-                        <view class="sub-text-28 color-red!">¥</view>
-                        <view class="m-l-5rpx sub-text-32 color-red!">{{ hooks.useMoney(state.detail.payPrice) }}</view>
-                    </view>
-                </view>
-            </view>
-        </view>
-        <!-- start 退款相关 start -->
-        <slot v-if="['10'].includes(state.detail.orderStatus)">
-            <view class="flex-row items-center justify-between card p-x-20rpx p-y-30rpx m-b-20rpx"
-                @tap="router.jump('/pages/refund/history', { id: state.refundDetail.id })">
-                <view>
-                    <view class="sub-text-28">
-                        <view>
-                            {{ hooks.useEnum('hardwareSaleStatusEnum', state.refundDetail.status) }}
-                        </view>
-                    </view>
-                    <view class="m-t-10rpx second-text-26">
-                        {{ hooks.useTime(state.refundDetail.updateTime || state.refundDetail.createTime, "") }}
-                    </view>
-                </view>
-                <view class="m-l-15rpx color-#999 font-size-26rpx! iconfont icon-youjiantou" />
-            </view>
-            <view class="flex-row items-center justify-between card p-x-20rpx p-y-30rpx m-b-20rpx">
-                <view class="sub-text-28">退款金额</view>
-                <view class="sub-text-28 color-red!">¥{{ hooks.useMoney(state.refundDetail.refundPrice) }}</view>
-            </view>
-            <view class="card p-x-20rpx p-y-30rpx space-y-10rpx m-b-20rpx second-text-24">
-                <view class="flex-row items-center">
-                    <view>服务单号：</view>
-                    <view>{{ state.refundDetail.no }}</view>
-                </view>
-                <view class="flex-row items-center">
-                    <view>申请时间：</view>
-                    <view>{{ hooks.useTime(state.refundDetail.createTime, "") }}</view>
-                </view>
-                <view class="flex-row items-center">
-                    <view>售后类型：</view>
-                    <view>{{ state.refundDetail.applyReason }}</view>
-                </view>
-                <view class="flex-row items-center">
-                    <view>相关描述：</view>
-                    <view>{{ state.refundDetail.applyDescription }}</view>
-                </view>
-            </view>
-            <view v-if="state.refundDetail.status == 62"
-                class="card p-x-20rpx p-y-30rpx space-y-10rpx m-b-20rpx second-text-24">
-                <view class="flex-row items-center">
-                    <view>审核人：</view>
-                    <view>{{ state.refundDetail.auditUsername }}</view>
-                </view>
-                <view class="flex-row items-center">
-                    <view>审核时间：</view>
-                    <view>{{ hooks.useTime(state.refundDetail.auditTime, "") }}</view>
-                </view>
-                <view class="flex-row items-center">
-                    <view>拒绝原因：</view>
-                    <view>{{ state.refundDetail.auditReason }}</view>
-                </view>
-            </view>
-        </slot>
-        <!-- end 退款相关 end -->
-        <view class="h-30rpx" />
-        <template #main-bottom>
-            <view v-if="state.detail.orderStatus == 10 && state.refundDetail.status == 62"
-                class="bg-#999 p-y-20rpx text-center rounded-40rpx m-x-30rpx m-y-30rpx sub-text-30 color-white!"
-                @tap="doCancelRefund">
-                取消申请
-            </view>
-            <view v-else-if="state.refundDetail.status == 62"
-                class="bg-#999 p-y-20rpx text-center rounded-40rpx m-x-30rpx m-y-30rpx sub-text-30 color-white!"
-                @tap="router.jump('/pages/refund/apply', { id: state.detailId }, 2)">
-                重新申请
-            </view>
-        </template>
-    </crud-layout>
+	<crud-layout title="订单详情" mainIsScroll bg="/static/page/blue-bg.png">
+		<view class="h-30rpx" />
+		<view class="relative flex-col justify-center overflow-hidden card p-x-20rpx p-y-30rpx m-b-20rpx">
+			<image
+				class="absolute top--20rpx right--60rpx w-160rpx h-160rpx"
+				src="/static/icon/guarantee.png"
+				mode="widthFix"
+			/>
+			<view class="sub-text-32">订单信息</view>
+			<view class="m-t-15rpx">
+				<view class="info_cell">
+					<view>用户</view>
+					<view>{{ state.detail.username }}</view>
+				</view>
+				<view class="info_cell">
+					<view>手机号</view>
+					<view>{{ state.detail.userMobile }}</view>
+				</view>
+				<view class="info_cell">
+					<view>商户</view>
+					<view>{{ state.detail.merchantStr }}</view>
+				</view>
+				<view class="m-t-15rpx h-1px bg-#999 bg-opacity-5" />
+				<view class="info_cell">
+					<view>订单号</view>
+					<view>{{ state.detail.id }}</view>
+				</view>
+				<view class="info_cell">
+					<view>下单时间</view>
+					<view>{{ hooks.useTime(state.detail.createTime, "") }}</view>
+				</view>
+				<view class="info_cell">
+					<view>支付方式</view>
+					<view>
+						{{ hooks.useEnum("hardwareOrderTypeEnum", state.detail.orderType) }}
+					</view>
+				</view>
+			</view>
+		</view>
+		<view class="flex-col justify-center card p-x-20rpx p-y-30rpx m-b-20rpx">
+			<view class="sub-text-32">商品费用</view>
+			<view class="m-t-15rpx">
+				<view
+					class="flex-row items-start justify-between"
+					v-for="(v, i) in state.shopCarList"
+					:key="i"
+					@tap.stop="router.jump('/pages/merchant/product-detail', { id: v.productId })"
+				>
+					<view class="flex-row items-center">
+						<image class="w-160rpx h-160rpx rounded-8rpx" :src="filePath(v.productPic)" mode="aspectFill" />
+						<view class="flex-col m-l-15rpx second-text-26">
+							<view class="sub-text-28">{{ v.productName }}</view>
+							<view class="m-t-5rpx color-red">¥ {{ hooks.useMoney(v.productPrice) }}</view>
+							<view class="m-t-5rpx">x {{ v.productCount }}</view>
+						</view>
+					</view>
+					<view class="flex-row-center">
+						<view class="sub-text-32 color-red!">¥ {{ hooks.useMoney(v.totalPrice) }}</view>
+					</view>
+				</view>
+				<view class="m-y-15rpx h-1px bg-#999 bg-opacity-5" />
+				<view class="flex-row items-center justify-between">
+					<view class="sub-text-32">实付款</view>
+					<view class="flex-row items-end">
+						<view class="sub-text-28 color-red!">¥</view>
+						<view class="m-l-5rpx sub-text-32 color-red!">{{ hooks.useMoney(state.detail.payPrice) }}</view>
+					</view>
+				</view>
+			</view>
+		</view>
+		<!-- start 退款相关 start -->
+		<slot v-if="['10'].includes(state.detail.orderStatus)">
+			<view
+				class="flex-row items-center justify-between card p-x-20rpx p-y-30rpx m-b-20rpx"
+				@tap="router.jump('/pages/refund/history', { id: state.refundDetail.id })"
+			>
+				<view>
+					<view class="sub-text-28">
+						<view>
+							{{ hooks.useEnum("hardwareSaleStatusEnum", state.refundDetail.status) }}
+						</view>
+					</view>
+					<view class="m-t-10rpx second-text-26">
+						{{ hooks.useTime(state.refundDetail.updateTime || state.refundDetail.createTime, "") }}
+					</view>
+				</view>
+				<view class="m-l-15rpx color-#999 font-size-26rpx! iconfont icon-youjiantou" />
+			</view>
+			<view class="flex-row items-center justify-between card p-x-20rpx p-y-30rpx m-b-20rpx">
+				<view class="sub-text-28">退款金额</view>
+				<view class="sub-text-28 color-red!">¥{{ hooks.useMoney(state.refundDetail.refundPrice) }}</view>
+			</view>
+			<view class="card p-x-20rpx p-y-30rpx space-y-10rpx m-b-20rpx second-text-24">
+				<view class="flex-row items-center">
+					<view>服务单号：</view>
+					<view>{{ state.refundDetail.no }}</view>
+				</view>
+				<view class="flex-row items-center">
+					<view>申请时间：</view>
+					<view>{{ hooks.useTime(state.refundDetail.createTime, "") }}</view>
+				</view>
+				<view class="flex-row items-center">
+					<view>售后类型：</view>
+					<view>{{ state.refundDetail.applyReason }}</view>
+				</view>
+				<view class="flex-row items-center">
+					<view>相关描述：</view>
+					<view>{{ state.refundDetail.applyDescription }}</view>
+				</view>
+			</view>
+			<view
+				v-if="state.refundDetail.status == 62"
+				class="card p-x-20rpx p-y-30rpx space-y-10rpx m-b-20rpx second-text-24"
+			>
+				<view class="flex-row items-center">
+					<view>审核人：</view>
+					<view>{{ state.refundDetail.auditUsername }}</view>
+				</view>
+				<view class="flex-row items-center">
+					<view>审核时间：</view>
+					<view>{{ hooks.useTime(state.refundDetail.auditTime, "") }}</view>
+				</view>
+				<view class="flex-row items-center">
+					<view>拒绝原因：</view>
+					<view>{{ state.refundDetail.auditReason }}</view>
+				</view>
+			</view>
+		</slot>
+		<!-- end 退款相关 end -->
+		<view class="h-30rpx" />
+		<template #main-bottom>
+			<view
+				v-if="state.detail.orderStatus == 10 && state.refundDetail.status == 62"
+				class="bg-#999 p-y-20rpx text-center rounded-40rpx m-x-30rpx m-y-30rpx sub-text-30 color-white!"
+				@tap="doCancelRefund"
+			>
+				取消申请
+			</view>
+			<view
+				v-else-if="state.refundDetail.status == 62"
+				class="bg-#999 p-y-20rpx text-center rounded-40rpx m-x-30rpx m-y-30rpx sub-text-30 color-white!"
+				@tap="router.jump('/pages/refund/apply', { id: state.detailId }, 2)"
+			>
+				重新申请
+			</view>
+		</template>
+	</crud-layout>
 </template>
 
 <style lang="scss" scoped>
 .info_cell {
-    display: flex;
-    align-items: center;
+	display: flex;
+	align-items: center;
 
-    &:not(:first-child) {
-        margin-top: 15rpx;
-    }
+	&:not(:first-child) {
+		margin-top: 15rpx;
+	}
 
-    &>view {
-        color: #999;
-        font-size: 28rpx;
-        font-weight: 500;
-        line-height: 1.4em;
-    }
+	& > view {
+		color: #999;
+		font-size: 28rpx;
+		font-weight: 500;
+		line-height: 1.4em;
+	}
 
-    &>view:nth-child(1) {
-        width: 130rpx;
-    }
+	& > view:nth-child(1) {
+		width: 130rpx;
+	}
 
-    &>view:nth-child(2) {
-        flex: 1;
-    }
+	& > view:nth-child(2) {
+		flex: 1;
+	}
 }
-</style>
\ No newline at end of file
+</style>