From 1739401cb822a3287768a30374aa05089a2d3a1a Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E5=88=9D=E5=BF=83?= <13773726377@163.com>
Date: Tue, 7 Apr 2026 19:48:56 +0800
Subject: [PATCH] 1

---
 src/api/shop.js                               |    4 +-
 src/api/url.js                                |    4 +-
 .../client/order/components/OrderItem.vue     |   31 +-
 src/pages/client/order/details.vue            | 2402 +++++++++--------
 4 files changed, 1325 insertions(+), 1116 deletions(-)

diff --git a/src/api/shop.js b/src/api/shop.js
index 977ed2e..9950794 100644
--- a/src/api/shop.js
+++ b/src/api/shop.js
@@ -115,12 +115,12 @@ export const updateCartSelect = ({ is_select,cart_id }) => {
 };
 
 // 删除购物车
-export const deleteCart = ({ cart_id }) => {
+export const deleteCart = ({ id }) => {
   return request({
     url: DELETE_CART,
     method: "post",
     data: {
-      cart_id,
+      id,
     },
   });
 };
diff --git a/src/api/url.js b/src/api/url.js
index 4bb2b93..46e732f 100644
--- a/src/api/url.js
+++ b/src/api/url.js
@@ -57,7 +57,7 @@ export const CANCEL_PET_ORDER = '/order/pet/cancel'
 export const DOUY_REVIEW = '/douyin/goods/order/appointment'
 
 // 取消商城接口
-export const CANCEL_MALL_ORDER = '/douyin/goods/order/cancel'
+export const CANCEL_MALL_ORDER = '/douyin/goods/order/refund'
 
 // 卡包列表接口
 export const USER_HolderList  = '/membership/instances'
@@ -227,7 +227,7 @@ export const UPDATE_CART_NUM = "/cart/update";
 // 选择购物车商品
 export const UPDATE_CART_SELECT = "/cart/select/all";
 // 删除购物车
-export const DELETE_CART = "/product/cart/delete";
+export const DELETE_CART = "/douyin/goods/order/refund";
 
 // 创建订单
 export const CREATE_ORDER_NEW = "/product/order/create";
diff --git a/src/pages/client/order/components/OrderItem.vue b/src/pages/client/order/components/OrderItem.vue
index e8a9ca6..deee493 100644
--- a/src/pages/client/order/components/OrderItem.vue
+++ b/src/pages/client/order/components/OrderItem.vue
@@ -68,7 +68,7 @@
 			<!-- 待预约 -->
 			<template v-if="[SHOP_ORDER_UNSLIVER].includes(data.status)">
 				<view class="order-btns-right">
-					<view class="flex-center fs-24 app-fc-main status-btn" @click.stop="$emit('refund', data)">
+					<view class="flex-center fs-24 app-fc-main status-btn" @click.stop="remindRefund(data.order_id)">
 						申请退款
 					</view>
 	               	<view class="flex-center fs-24 app-fc-white status-btn confirm"
@@ -135,6 +135,11 @@
 <script>
 	import PopUpModal from "@/components/PopUpModal.vue";
 	import GoodInfo from "./GoodInfo.vue";
+	import {
+  walletTransaction,
+  cancelPetOrderMall,
+} from "../../../../api/login";
+	
 	import {
 		SHOP_ORDER_STATUS,
 		SHOP_ORDER_UNPAY,
@@ -269,6 +274,30 @@
 			this.stopCountDown();
 		},
 		methods: {
+			   remindRefund(id) {
+      const data = {
+        id: Number(id),
+      };
+      cancelPetOrderMall(data).then((res) => {
+        const plugin = tt.requirePlugin("lifeServicePlugin");
+        plugin.applyRefund({
+			goodsList:res.data.goodsList,
+			outOrderNo:res.data.outOrderNo,
+			refundInfo:res.data.refundInfo,
+          success(res) {
+				uni.showToast({
+						title: '退款成功',
+						icon: 'success'
+					})
+            const { outRefundNo } = res;
+            tt.showToast({ title: outRefundNo });
+          },
+          fail(res) {
+            console.log("fail", res);
+          },
+        });
+      });
+    },
 			// 退款回调（组件触发）
 			handleRefund(event) {
 				const { status, result, outOrderNo } = event.detail
diff --git a/src/pages/client/order/details.vue b/src/pages/client/order/details.vue
index 8cab4aa..42688af 100644
--- a/src/pages/client/order/details.vue
+++ b/src/pages/client/order/details.vue
@@ -1,123 +1,172 @@
 <template>
-	<view class="order-create-container">
-		<view class="flex-center order-status">
-			<!-- 待支付 -->
-			<template v-if="orderData.status === SHOP_ORDER_UNPAY && !orderData.tui_status">
-				<view class="flex-row-center">
-					<image class="status-icon" src="./static/order_unpay.png" mode="widthFix" />
-					<text class="fs-36 app-fc-main app-font-bold">待支付</text>
-				</view>
-				<view v-if="countDownTime > 0" class="fs-24 app-fc-main status-tips">
-					<text class="fs-24 app-fc-mark">{{
+  <view class="order-create-container">
+    <view class="flex-center order-status">
+      <!-- 待支付 -->
+      <template
+        v-if="orderData.status === SHOP_ORDER_UNPAY && !orderData.tui_status"
+      >
+        <view class="flex-row-center">
+          <image
+            class="status-icon"
+            src="./static/order_unpay.png"
+            mode="widthFix"
+          />
+          <text class="fs-36 app-fc-main app-font-bold">待支付</text>
+        </view>
+        <view v-if="countDownTime > 0" class="fs-24 app-fc-main status-tips">
+          <text class="fs-24 app-fc-mark">{{
             formatSecond(countDownTime)
           }}</text>
-					后订单关闭，请及时付款哦
-				</view>
-			</template>
+          后订单关闭，请及时付款哦
+        </view>
+      </template>
 
-			<!-- 待发货 -->
-			<template v-if="orderData.status === SHOP_ORDER_UNSLIVER && !orderData.tui_status">
-				<view class="flex-row-center">
-					<image class="status-icon" src="./static/order_ungo.png" mode="widthFix" />
-					<text class="fs-36 app-fc-main app-font-bold">待预约</text>
-				</view>
-				<view class="fs-24 app-fc-main status-tips">
-					已付款，待预约
-				</view>
-			</template>
+      <!-- 待发货 -->
+      <template
+        v-if="orderData.status === SHOP_ORDER_UNSLIVER && !orderData.tui_status"
+      >
+        <view class="flex-row-center">
+          <image
+            class="status-icon"
+            src="./static/order_ungo.png"
+            mode="widthFix"
+          />
+          <text class="fs-36 app-fc-main app-font-bold">待预约</text>
+        </view>
+        <view class="fs-24 app-fc-main status-tips"> 已付款，待预约 </view>
+      </template>
 
-			<!-- 待收货 -->
-			<template v-if="
+      <!-- 待收货 -->
+      <template
+        v-if="
           orderData.status === SHOP_ORDER_UNRECEIVE && !orderData.tui_status
-        ">
-				<view class="flex-row-center">
-					<image class="status-icon" src="./static/order_go.png" mode="widthFix" />
-					<text class="fs-36 app-fc-main app-font-bold">待收货</text>
-				</view>
-				<view class="fs-24 app-fc-main status-tips"> 已发货，等待收货 </view>
-			</template>
+        "
+      >
+        <view class="flex-row-center">
+          <image
+            class="status-icon"
+            src="./static/order_go.png"
+            mode="widthFix"
+          />
+          <text class="fs-36 app-fc-main app-font-bold">待收货</text>
+        </view>
+        <view class="fs-24 app-fc-main status-tips"> 已发货，等待收货 </view>
+      </template>
 
-			<!-- 已签收 -->
-			<template v-if="orderData.status === SHOP_ORDER_UNREMARK && !orderData.tui_status">
-				<view class="flex-row-center">
-					<image class="status-icon" src="./static/order_done.png" mode="widthFix" />
-					<text class="fs-36 app-fc-main app-font-bold">已签收</text>
-				</view>
-				<view class="fs-24 app-fc-main status-tips">
-					交易完成，商品已签收
-				</view>
-			</template>
+      <!-- 已签收 -->
+      <template
+        v-if="orderData.status === SHOP_ORDER_UNREMARK && !orderData.tui_status"
+      >
+        <view class="flex-row-center">
+          <image
+            class="status-icon"
+            src="./static/order_done.png"
+            mode="widthFix"
+          />
+          <text class="fs-36 app-fc-main app-font-bold">已签收</text>
+        </view>
+        <view class="fs-24 app-fc-main status-tips">
+          交易完成，商品已签收
+        </view>
+      </template>
 
-			<!-- 已完成 -->
-			<template v-if="orderData.status === SHOP_ORDER_DONE && !orderData.tui_status">
-				<view class="flex-row-center">
-					<image class="status-icon" src="./static/order_done.png" mode="widthFix" />
-					<text class="fs-36 app-fc-main app-font-bold">已完成</text>
-				</view>
-			</template>
+      <!-- 已完成 -->
+      <template
+        v-if="orderData.status === SHOP_ORDER_DONE && !orderData.tui_status"
+      >
+        <view class="flex-row-center">
+          <image
+            class="status-icon"
+            src="./static/order_done.png"
+            mode="widthFix"
+          />
+          <text class="fs-36 app-fc-main app-font-bold">已完成</text>
+        </view>
+      </template>
 
-			<!-- 已取消 -->
-			<template v-if="orderData.status === SHOP_ORDER_CANCEL && !orderData.tui_status">
-				<view class="flex-row-center">
-					<image class="status-icon" src="./static/order_cancel.png" mode="widthFix" />
-					<text class="fs-36 app-fc-main app-font-bold">已取消</text>
-				</view>
-			</template>
+      <!-- 已取消 -->
+      <template
+        v-if="orderData.status === SHOP_ORDER_CANCEL && !orderData.tui_status"
+      >
+        <view class="flex-row-center">
+          <image
+            class="status-icon"
+            src="./static/order_cancel.png"
+            mode="widthFix"
+          />
+          <text class="fs-36 app-fc-main app-font-bold">已取消</text>
+        </view>
+      </template>
 
-			<!-- 申请售后-等待平台确认 -->
-			<template v-if="orderData.tui_status === SHOP_ORDER_AFTERSALE">
-				<view class="flex-row-center">
-					<image class="status-icon" src="./static/refund_undo.png" mode="widthFix" />
-					<text class="fs-36 app-fc-main app-font-bold">等待平台确认</text>
-				</view>
-				<view class="fs-24 app-fc-main status-tips">
-					售后申请已提交，请等待平台确认
-				</view>
-			</template>
+      <!-- 申请售后-等待平台确认 -->
+      <template v-if="orderData.tui_status === SHOP_ORDER_AFTERSALE">
+        <view class="flex-row-center">
+          <image
+            class="status-icon"
+            src="./static/refund_undo.png"
+            mode="widthFix"
+          />
+          <text class="fs-36 app-fc-main app-font-bold">等待平台确认</text>
+        </view>
+        <view class="fs-24 app-fc-main status-tips">
+          售后申请已提交，请等待平台确认
+        </view>
+      </template>
 
-			<!-- 申请售后-退款成功 -->
-			<template v-if="orderData.tui_status === SHOP_ORDER_AFTERSALE_DONE">
-				<view class="flex-row-center">
-					<image class="status-icon" src="./static/order_done.png" mode="widthFix" />
-					<text class="fs-36 app-fc-main app-font-bold">退款成功</text>
-				</view>
-				<view class="fs-24 app-fc-main status-tips">
-					退款金额将直接返回原支付路径
-				</view>
-			</template>
+      <!-- 申请售后-退款成功 -->
+      <template v-if="orderData.tui_status === SHOP_ORDER_AFTERSALE_DONE">
+        <view class="flex-row-center">
+          <image
+            class="status-icon"
+            src="./static/order_done.png"
+            mode="widthFix"
+          />
+          <text class="fs-36 app-fc-main app-font-bold">退款成功</text>
+        </view>
+        <view class="fs-24 app-fc-main status-tips">
+          退款金额将直接返回原支付路径
+        </view>
+      </template>
 
-			<!-- 申请售后-退款驳回 -->
-			<template v-if="orderData.tui_status === SHOP_ORDER_AFTERSALE_REJECT">
-				<view class="flex-row-center">
-					<image class="status-icon" src="./static/order_cancel.png" mode="widthFix" />
-					<text class="fs-36 app-fc-main app-font-bold">退款驳回</text>
-				</view>
-				<view class="fs-24 app-fc-main flex-center refund-btn" @click="showRefundModal = true">
-					查看驳回原因
-				</view>
-			</template>
-		</view>
+      <!-- 申请售后-退款驳回 -->
+      <template v-if="orderData.tui_status === SHOP_ORDER_AFTERSALE_REJECT">
+        <view class="flex-row-center">
+          <image
+            class="status-icon"
+            src="./static/order_cancel.png"
+            mode="widthFix"
+          />
+          <text class="fs-36 app-fc-main app-font-bold">退款驳回</text>
+        </view>
+        <view
+          class="fs-24 app-fc-main flex-center refund-btn"
+          @click="showRefundModal = true"
+        >
+          查看驳回原因
+        </view>
+      </template>
+    </view>
 
-		<view v-if="orderData.address" class="info-cell address-info-cell">
-			<view class="address-content">
-				<view class="address-row-first">
-					<image class="address-icon" src="@/static/images/address.png" />
-					<text class="address-name">
-						{{ orderData.name || "" }}
-						<text class="address-phone">
-							{{ orderData.phone || "" }}
-						</text>
-					</text>
-				</view>
-				<view v-if="orderData.address" class="address-row-second">
-					<text class="address-details">
-						{{ orderData.address || "" }}
-					</text>
-				</view>
-			</view>
-		</view>
+    <view v-if="orderData.address" class="info-cell address-info-cell">
+      <view class="address-content">
+        <view class="address-row-first">
+          <image class="address-icon" src="@/static/images/address.png" />
+          <text class="address-name">
+            {{ orderData.name || "" }}
+            <text class="address-phone">
+              {{ orderData.phone || "" }}
+            </text>
+          </text>
+        </view>
+        <view v-if="orderData.address" class="address-row-second">
+          <text class="address-details">
+            {{ orderData.address || "" }}
+          </text>
+        </view>
+      </view>
+    </view>
 
-		<!-- <view class="info-cell sliver-info-cell">
+    <!-- <view class="info-cell sliver-info-cell">
 			<view class="flex-row-start sliver-content">
 				<image class="sliver-icon" src="./static/sliver-icon.png" mode="widthFix" />
 				<view class="sliver-text">
@@ -126,8 +175,8 @@
 			</view>
 		</view> -->
 
-		<!-- 随车订单待收货状态显示 -->
-		<!-- <view
+    <!-- 随车订单待收货状态显示 -->
+    <!-- <view
 			v-if="orderData.order_type === ORDER_TYPE_BYCAR && orderData.status === SHOP_ORDER_UNRECEIVE && !orderData.tui_status">
 			<view class="info-cell info-cell-guanjia" v-if="carNumber || managerPhoneNum || managerName">
 				<image :src="guanjiaPic || require('@/static/images/head.png')" mode="aspectFit" class="head-icon" />
@@ -142,76 +191,102 @@
 			</view>
 		</view> -->
 
-		<!-- 商品信息 -->
-		<view class="info-cell goods-info-cell">
-			<template>
-				<view class="goods-item" v-for="(item, index) in orderData.products" :key="index">
-					<image class="goods-img" :src="item.product_pic" mode="aspectFill" @click="jumpToGoodDetails(item)" />
-					<view class="goods-content" @click="jumpToGoodDetails(item)">
-						<view class="goods-row-first">
-							<view class="goods-name">{{ item.product_name || "" }}</view>
-							<text class="goods-price">¥{{ item.product_actual_price || 0 }}</text>
-						</view>
-						<view class="goods-row-second">
-							<view class="goods-spec">
-								{{ item.shuxing_name || "" }}{{ item.shuxing_name && item.price_name ? ";" : "" }}{{ item.price_name || "" }}
-							</view>
-							<text class="goods-count">共{{ item.number || 1 }}件</text>
-						</view>
-					</view>
-				</view>
-			</template>
-		</view>
+    <!-- 商品信息 -->
+    <view class="info-cell goods-info-cell">
+      <template>
+        <view
+          class="goods-item"
+          v-for="(item, index) in orderData.products"
+          :key="index"
+        >
+          <image
+            class="goods-img"
+            :src="item.product_pic"
+            mode="aspectFill"
+            @click="jumpToGoodDetails(item)"
+          />
+          <view class="goods-content" @click="jumpToGoodDetails(item)">
+            <view class="goods-row-first">
+              <view class="goods-name">{{ item.product_name || "" }}</view>
+              <text class="goods-price"
+                >¥{{ item.product_actual_price || 0 }}</text
+              >
+            </view>
+            <view class="goods-row-second">
+              <view class="goods-spec">
+                {{ item.shuxing_name || ""
+                }}{{ item.shuxing_name && item.price_name ? ";" : ""
+                }}{{ item.price_name || "" }}
+              </view>
+              <text class="goods-count">共{{ item.number || 1 }}件</text>
+            </view>
+          </view>
+        </view>
+      </template>
+    </view>
 
-		<view class="info-cell pay-cell">
-			<view class="flex-row-between pay-price">
-				<text class="pay-label">
-					商品总价
-				</text>
-				<text class="pay-total">
-					￥{{ [SHOP_ORDER_AFTERSALE_DONE].includes(orderData.tui_status) ? refundPrice : orderData.actual_price }}
-				</text>
-			</view>
-		</view>
+    <view class="info-cell pay-cell">
+      <view class="flex-row-between pay-price">
+        <text class="pay-label"> 商品总价 </text>
+        <text class="pay-total">
+          ￥{{
+            [SHOP_ORDER_AFTERSALE_DONE].includes(orderData.tui_status)
+              ? refundPrice
+              : orderData.actual_price
+          }}
+        </text>
+      </view>
+    </view>
 
-		<view class="info-cell order-info">
-			<view v-if="orderData.order_no" class="flex-row-between order-row">
-				<text class="order-label">订单编号</text>
-				<text class="order-value">{{ orderData.order_no }}</text>
-			</view>
-			<view v-if="orderData.add_time" class="flex-row-between order-row">
-				<text class="order-label">下单时间</text>
-				<text class="order-value">{{ formatTime(orderData.add_time) }}</text>
-			</view>
-			<view v-if="orderData.pay_time" class="flex-row-between order-row">
-				<text class="order-label">付款时间</text>
-				<text class="order-value">{{ formatTime(orderData.pay_time) }}</text>
-			</view>
-			<view v-if="orderData.fahuo_time" class="flex-row-between order-row">
-				<text class="order-label">发货时间</text>
-				<text class="order-value">{{ formatTime(orderData.fahuo_time) }}</text>
-			</view>
-			<view v-if="orderData.shou_time" class="flex-row-between order-row">
-				<text class="order-label">签收时间</text>
-				<text class="order-value">{{ formatTime(orderData.shou_time) }}</text>
-			</view>
-			<view
-				v-if="[SHOP_ORDER_CANCEL].includes(orderData.status) && !orderData.tui_status && orderData.quxiao_time"
-				class="flex-row-between order-row">
-				<text class="order-label">取消时间</text>
-				<text class="order-value">{{ formatTime(orderData.quxiao_time) }}</text>
-			</view>
-			<view v-if="
-          [SHOP_ORDER_AFTERSALE, SHOP_ORDER_AFTERSALE_DONE, SHOP_ORDER_AFTERSALE_REJECT].includes(orderData.tui_status) &&
-          orderData.tui_yuanyin
-        " class="flex-row-between order-row">
-				<text class="order-label">售后事项</text>
-				<text class="order-value">{{ orderData.tui_yuanyin }}</text>
-			</view>
-		</view>
+    <view class="info-cell order-info">
+      <view v-if="orderData.order_no" class="flex-row-between order-row">
+        <text class="order-label">订单编号</text>
+        <text class="order-value">{{ orderData.order_no }}</text>
+      </view>
+      <view v-if="orderData.add_time" class="flex-row-between order-row">
+        <text class="order-label">下单时间</text>
+        <text class="order-value">{{ formatTime(orderData.add_time) }}</text>
+      </view>
+      <view v-if="orderData.pay_time" class="flex-row-between order-row">
+        <text class="order-label">付款时间</text>
+        <text class="order-value">{{ formatTime(orderData.pay_time) }}</text>
+      </view>
+      <view v-if="orderData.fahuo_time" class="flex-row-between order-row">
+        <text class="order-label">发货时间</text>
+        <text class="order-value">{{ formatTime(orderData.fahuo_time) }}</text>
+      </view>
+      <view v-if="orderData.shou_time" class="flex-row-between order-row">
+        <text class="order-label">签收时间</text>
+        <text class="order-value">{{ formatTime(orderData.shou_time) }}</text>
+      </view>
+      <view
+        v-if="
+          [SHOP_ORDER_CANCEL].includes(orderData.status) &&
+          !orderData.tui_status &&
+          orderData.quxiao_time
+        "
+        class="flex-row-between order-row"
+      >
+        <text class="order-label">取消时间</text>
+        <text class="order-value">{{ formatTime(orderData.quxiao_time) }}</text>
+      </view>
+      <view
+        v-if="
+          [
+            SHOP_ORDER_AFTERSALE,
+            SHOP_ORDER_AFTERSALE_DONE,
+            SHOP_ORDER_AFTERSALE_REJECT,
+          ].includes(orderData.tui_status) && orderData.tui_yuanyin
+        "
+        class="flex-row-between order-row"
+      >
+        <text class="order-label">售后事项</text>
+        <text class="order-value">{{ orderData.tui_yuanyin }}</text>
+      </view>
+    </view>
 
-		<!-- 只有待支付显示 -->
-		<!-- <view class="info-cell payment-method-cell" v-if="orderData.status === SHOP_ORDER_UNPAY">
+    <!-- 只有待支付显示 -->
+    <!-- <view class="info-cell payment-method-cell" v-if="orderData.status === SHOP_ORDER_UNPAY">
 			<view class="payment-item" @click.stop="selectOption1('1')">
 				<view class="payment-left">
 					<image class="payment-icon" src="@/static/images/douy.png" mode="widthFix" />
@@ -223,7 +298,7 @@
 			</view>
 			
 		</view> -->
-		<!-- <view
+    <!-- <view
       v-if="orderData.status === SHOP_ORDER_UNPAY"
       class="flex-row-start info-cell pay-type"
     >
@@ -236,36 +311,46 @@
       />
     </view> -->
 
-		<!-- 可拖动联系客服组件 -->
-		<DraggableContact ref="draggableContact" :onClick="handleContactBtnClick" />
+    <!-- 可拖动联系客服组件 -->
+    <DraggableContact ref="draggableContact" :onClick="handleContactBtnClick" />
 
-		<view class="place-view"></view>
+    <view class="place-view"></view>
 
-		<view v-if="
-         [
-           SHOP_ORDER_UNPAY,
-           SHOP_ORDER_UNSLIVER,
-           SHOP_ORDER_UNRECEIVE,
-           SHOP_ORDER_DONE,
-           SHOP_ORDER_UNREMARK
-         ].includes(orderData.status)
-          && showBeforeSaleOrderStatus
-       " class="bottom-view">
-			<!-- 待支付 -->
-			<template v-if="[SHOP_ORDER_UNPAY].includes(orderData.status)">
-				<view class="handle-btn" @click.stop="showCancelModal = true">
-					<text class="fs-32 btnColor" style="color: #FF19A0;">取消订单</text>
-				</view>
-				<view class="handle-btn" @click.stop="pay">
-					<text class="fs-32 btnColor">立即支付</text>
-				</view>
-			</template>
+    <view
+      v-if="
+        [
+          SHOP_ORDER_UNPAY,
+          SHOP_ORDER_UNSLIVER,
+          SHOP_ORDER_UNRECEIVE,
+          SHOP_ORDER_DONE,
+          SHOP_ORDER_UNREMARK,
+        ].includes(orderData.status)
+      "
+      class="bottom-view"
+      :class="{ 'two-buttons': showTwoButtons }"
+    >
+      <!-- 待支付 -->
+      <template
+        v-if="
+          [SHOP_ORDER_UNPAY].includes(orderData.status) &&
+          showBeforeSaleOrderStatus
+        "
+      >
+        <view class="handle-btn" @click.stop="showCancelModal = true">
+          <text class="fs-32 btnColor" style="color: #ff19a0">取消订单</text>
+        </view>
+        <view class="handle-btn" @click.stop="pay">
+          <text class="fs-32 btnColor">立即支付</text>
+        </view>
+      </template>
 
-			<!-- 待发货 -->
-			<template v-if="[SHOP_ORDER_UNSLIVER].includes(orderData.status)">
-				<!-- 抖音退款组件 -->
-				<view class="refund-btn-wrapper">
-					<pay-button-sdk
+      <!-- 待发货 -->
+      <template v-if="[SHOP_ORDER_UNSLIVER].includes(orderData.status)">
+        <!-- 抖音退款组件 - 只有在没有售后状态或售后被驳回时显示 -->
+        <view v-if="showBeforeSaleOrderStatus" class="handle-btn refund-btn" @click.stop="remindRefund(orderData.order_id)">
+          <text class="fs-32 btnColor" style="color: #ff19a0">立即退款</text>
+        </view>
+        <!-- <pay-button-sdk
 						mode={{1}}
 						:order-id="orderData.order_no"
 						:order-status="1"
@@ -280,952 +365,1047 @@
 						style="width:280rpx;height:100rpx;text-align:center;line-height: 100rpx;"
 						@refund="handleRefundSuccess"
 						@error="handleRefundError"
-					/>
-				</view>
-				<view class="handle-btn" @click.stop="remindSliver">
-					<text class="fs-32 btnColor">立即预约</text>
-				</view>
-			</template>
+					/> -->
+        <!-- 立即预约按钮始终显示 -->
+        <view class="handle-btn" @click.stop="remindSliver">
+          <text class="fs-32 btnColor">立即预约</text>
+        </view>
+      </template>
 
-			<!-- 待收货 -->
-			<template v-if="[SHOP_ORDER_UNRECEIVE].includes(orderData.status)">
-				<!-- <view class="handle-btn" @click.stop="jumpToAfterSale">
+      <!-- 待收货 -->
+      <template v-if="[SHOP_ORDER_UNRECEIVE].includes(orderData.status)">
+        <!-- <view class="handle-btn" @click.stop="jumpToAfterSale">
 					<text class="fs-32 btnColor" style="color: #FF19A0;">申请售后</text>
 				</view> -->
-				<!-- 随车订单不显示物流 -->
-				<!-- <view v-if="orderData.order_type !== ORDER_TYPE_BYCAR" class="handle-btn" @click.stop="getSliverInfo">
+        <!-- 随车订单不显示物流 -->
+        <!-- <view v-if="orderData.order_type !== ORDER_TYPE_BYCAR" class="handle-btn" @click.stop="getSliverInfo">
 					<text class="fs-32 btnColor" style="color: #FF19A0;">查看物流</text>
 				</view> -->
-				<view class="handle-btn" @click.stop="confirmSliver">
-					<text class="fs-32 btnColor">确认收货</text>
-				</view>
-			</template>
+        <view class="handle-btn" @click.stop="confirmSliver">
+          <text class="fs-32 btnColor">确认收货</text>
+        </view>
+      </template>
 
-			<!-- 已签收待评价 -->
-			<template v-if="[SHOP_ORDER_UNREMARK].includes(orderData.status)">
-				<view class="handle-btn" @click.stop="jumpToRemark">
-					<text class="fs-32 btnColor">立即评价</text>
-				</view>
-			</template>
+      <!-- 已签收待评价 -->
+      <template v-if="[SHOP_ORDER_UNREMARK].includes(orderData.status)">
+        <view class="handle-btn" @click.stop="jumpToRemark">
+          <text class="fs-32 btnColor">立即评价</text>
+        </view>
+      </template>
 
-			<!-- 已完成 -->
-			<template v-if="[SHOP_ORDER_DONE].includes(orderData.status)">
-				<view class="handle-btn" @click.stop="jumpToRemarkDetails">
-					<text class="fs-32 btnColor">查看评价</text>
-				</view>
-			</template>
-		</view>
+      <!-- 已完成 -->
+      <template v-if="[SHOP_ORDER_DONE].includes(orderData.status)">
+        <view class="handle-btn" @click.stop="jumpToRemarkDetails">
+          <text class="fs-32 btnColor">查看评价</text>
+        </view>
+      </template>
+    </view>
 
-		<good-info-modal v-if="showGoodInfoModal" :goods="orderData.goods_list" @close="showGoodInfoModal = false"
-			@clickGoodImg="jumpToGoodDetails" @clickGoodInfo="jumpToGoodDetails" />
+    <good-info-modal
+      v-if="showGoodInfoModal"
+      :goods="orderData.goods_list"
+      @close="showGoodInfoModal = false"
+      @clickGoodImg="jumpToGoodDetails"
+      @clickGoodInfo="jumpToGoodDetails"
+    />
 
-		<recharge-coupon-modal v-if="showCouponModal" :couponList="couponList" :price="payPrice" :showOptBtn="true"
-			@useCoupon="useCoupon" @close="showCouponModal = false" />
+    <recharge-coupon-modal
+      v-if="showCouponModal"
+      :couponList="couponList"
+      :price="payPrice"
+      :showOptBtn="true"
+      @useCoupon="useCoupon"
+      @close="showCouponModal = false"
+    />
 
-		<contact-modal v-if="showContact" :data="configInfo" @close="showContact = false" />
+    <contact-modal
+      v-if="showContact"
+      :data="configInfo"
+      @close="showContact = false"
+    />
 
-		<pop-up-modal v-if="showCancelModal" content="确定要退款吗？" @confirm="orderCancel"
-			@cancel="showCancelModal = false" />
+    <pop-up-modal
+      v-if="showCancelModal"
+      content="确定要退款吗？"
+      @confirm="orderCancel"
+      @cancel="showCancelModal = false"
+    />
 
-		<success-modal v-if="showRemindSliver" title="提醒成功" message="已通知商家，请耐心等待商家发货" @close="showRemindSliver = false"
-			@ok="showRemindSliver = false" />
+    <success-modal
+      v-if="showRemindSliver"
+      title="提醒成功"
+      message="已通知商家，请耐心等待商家发货"
+      @close="showRemindSliver = false"
+      @ok="showRemindSliver = false"
+    />
 
-		<success-modal v-if="showRefundModal" class="reject-modal" :showImg="false" title="驳回原因"
-			:message="orderData.tui_msg" @close="showRefundModal = false" @ok="showRefundModal = false" />
+    <success-modal
+      v-if="showRefundModal"
+      class="reject-modal"
+      :showImg="false"
+      title="驳回原因"
+      :message="orderData.tui_msg"
+      @close="showRefundModal = false"
+      @ok="showRefundModal = false"
+    />
 
-		<sliver-info v-if="showSliverRouteModal" :orderId="orderId" :orderInfo="orderData"
-			@close="showSliverRouteModal = false" />
+    <sliver-info
+      v-if="showSliverRouteModal"
+      :orderId="orderId"
+      :orderInfo="orderData"
+      @close="showSliverRouteModal = false"
+    />
 
-		<call-modal :phone-number="managerPhoneNum" v-if="isShowCallManagerModal"
-			@close="isShowCallManagerModal = false" />
-	</view>
+    <call-modal
+      :phone-number="managerPhoneNum"
+      v-if="isShowCallManagerModal"
+      @close="isShowCallManagerModal = false"
+    />
+  </view>
 </template>
 
 <script>
-	import moment from "moment";
-	import SelectModal from "@/components/select-modal.vue";
-	import GoodInfoModal from "./components/GoodInfoModal.vue";
-	import RechargeCouponModal from "@/components/coupon/RechargeCouponModal.vue";
-	import ContactModal from "@/components/ContactModal.vue";
-	import PopUpModal from "@/components/PopUpModal.vue";
-	import SuccessModal from "@/components/SuccessModal.vue";
-	import SliverInfo from "./components/SliverInfo.vue";
+import moment from "moment";
+import SelectModal from "@/components/select-modal.vue";
+import GoodInfoModal from "./components/GoodInfoModal.vue";
+import RechargeCouponModal from "@/components/coupon/RechargeCouponModal.vue";
+import ContactModal from "@/components/ContactModal.vue";
+import PopUpModal from "@/components/PopUpModal.vue";
+import SuccessModal from "@/components/SuccessModal.vue";
+import SliverInfo from "./components/SliverInfo.vue";
 import CallModal from "@/components/petOrder/call-modal.vue";
 import DraggableContact from "@/components/DraggableContact.vue";
 import {
-		walletTransaction,
-		cancelPetOrderRefund,
-		cancelPetOrderMall
-	} from "../../../api/login";
+  walletTransaction,
+  cancelPetOrderRefund,
+  cancelPetOrderMall,
+} from "../../../api/login";
 
+import { getConfig } from "../../../api/config";
+import {
+  cancelOrder,
+  confirmOrder,
+  getShopOrderDetails,
+  payOrder,
+  deleteCart,
+  remindOrder,
+} from "../../../api/shop";
+import {
+  SHOP_ORDER_UNPAY,
+  SHOP_ORDER_UNSLIVER,
+  SHOP_ORDER_UNRECEIVE,
+  SHOP_ORDER_DONE,
+  SHOP_ORDER_CANCEL,
+  SHOP_ORDER_AFTERSALE,
+  SHOP_ORDER_AFTERSALE_DONE,
+  SHOP_ORDER_AFTERSALE_REJECT,
+  SHOP_ORDER_UNREMARK,
+  ORDER_TYPE_ADDRESS,
+  ORDER_TYPE_BYCAR,
+  ORDER_TYPE_BYPET,
+} from "@/constants/app.business";
+import { jumpToWeChat, imgPrefix } from "@/utils/common";
 
-	import {
-		getConfig
-	} from "../../../api/config";
-	import {
-		cancelOrder,
-		confirmOrder,
-		getShopOrderDetails,
-		payOrder,
-		remindOrder,
-	} from "../../../api/shop";
-	import {
-		SHOP_ORDER_UNPAY,
-		SHOP_ORDER_UNSLIVER,
-		SHOP_ORDER_UNRECEIVE,
-		SHOP_ORDER_DONE,
-		SHOP_ORDER_CANCEL,
-		SHOP_ORDER_AFTERSALE,
-		SHOP_ORDER_AFTERSALE_DONE,
-		SHOP_ORDER_AFTERSALE_REJECT,
-		SHOP_ORDER_UNREMARK,
-		ORDER_TYPE_ADDRESS,
-		ORDER_TYPE_BYCAR,
-		ORDER_TYPE_BYPET
-	} from "@/constants/app.business";
-	import {
-		jumpToWeChat,
-		imgPrefix
-	} from "@/utils/common";
+export default {
+  components: {
+    SelectModal,
+    GoodInfoModal,
+    RechargeCouponModal,
+    ContactModal,
+    PopUpModal,
+    SuccessModal,
+    SliverInfo,
+    CallModal,
+    DraggableContact,
+  },
+  data() {
+    return {
+      SHOP_ORDER_UNPAY,
+      SHOP_ORDER_UNSLIVER,
+      SHOP_ORDER_UNRECEIVE,
+      SHOP_ORDER_DONE,
+      SHOP_ORDER_CANCEL,
+      SHOP_ORDER_AFTERSALE,
+      SHOP_ORDER_AFTERSALE_DONE,
+      SHOP_ORDER_AFTERSALE_REJECT,
+      SHOP_ORDER_UNREMARK,
+      ORDER_TYPE_ADDRESS,
+      ORDER_TYPE_BYCAR,
+      ORDER_TYPE_BYPET,
+      orderId: "",
+      orderData: {},
+      showGoodInfoModal: false,
+      showCouponModal: false,
+      couponList: Array.from(
+        {
+          length: 5,
+        },
+        (v, k) => k
+      ),
+      couponInfo: null,
+      showContact: false,
+      configInfo: {
+        kefu_pic: "",
+        kefu_time: "",
+      },
+      showCancelModal: false,
+      showRemindSliver: false,
+      showSliverRouteModal: false,
+      countDownTime: 0,
+      showRefundModal: false,
+      isShowCallManagerModal: false,
+      selected1: true,
+      selected2: false,
+      selected3: true,
+      selected4: false,
+      recharge: true,
+      record: false,
+      imgPrefix,
+      // 联系客服按钮拖拽相关
+      contactBtnRight: 0, // 默认右侧距离，始终为0
+      contactBtnBottom: 0, // 默认底部距离，需要计算
+      isDragging: false, // 是否正在拖拽
+      touchStartX: 0, // 触摸开始X坐标
+      touchStartY: 0, // 触摸开始Y坐标
+      initialRight: 0, // 初始右侧距离
+      initialBottom: 0, // 初始底部距离
+    };
+  },
+  computed: {
+    // 判断是否显示两个按钮
+    showTwoButtons() {
+      // 待支付状态显示两个按钮
+      if (
+        this.orderData.status === SHOP_ORDER_UNPAY &&
+        this.showBeforeSaleOrderStatus
+      ) {
+        return true;
+      }
+      // 待发货状态且没有售后时显示两个按钮
+      if (
+        this.orderData.status === SHOP_ORDER_UNSLIVER &&
+        this.showBeforeSaleOrderStatus
+      ) {
+        return true;
+      }
+      return false;
+    },
+    goodsImgs() {
+      return (this.orderData?.goods_list || [])
+        .map((item) => item.goods_pic)
+        .filter((v) => !!v);
+    },
+    sliverFee() {
+      return +this.orderData?.yunfei || 0;
+    },
+    couponFee() {
+      return +this.orderData?.dikou_price || 0;
+    },
+    payPrice() {
+      return +this.orderData?.pay_price || 0;
+    },
+    refundPrice() {
+      return +this.orderData?.refund_fee || 0;
+    },
+    showBeforeSaleOrderStatus() {
+      return (
+        !this.orderData.tui_status ||
+        this.orderData.tui_status === SHOP_ORDER_AFTERSALE_REJECT
+      );
+    },
+    carNumber() {
+      return this.orderData?.car_info?.car_no || "";
+    },
+    managerPhoneNum() {
+      return this.orderData?.guanjia_info?.mobile || "";
+    },
+    managerName() {
+      return this.orderData?.guanjia_info?.name || "";
+    },
+    guanjiaPic() {
+      return this.orderData?.guanjia_info?.guanjia_pic || "";
+    },
+  },
 
-	export default {
-		components: {
-			SelectModal,
-			GoodInfoModal,
-			RechargeCouponModal,
-			ContactModal,
-			PopUpModal,
-			SuccessModal,
-			SliverInfo,
-			CallModal,
-			DraggableContact
-		},
-		data() {
-			return {
-				SHOP_ORDER_UNPAY,
-				SHOP_ORDER_UNSLIVER,
-				SHOP_ORDER_UNRECEIVE,
-				SHOP_ORDER_DONE,
-				SHOP_ORDER_CANCEL,
-				SHOP_ORDER_AFTERSALE,
-				SHOP_ORDER_AFTERSALE_DONE,
-				SHOP_ORDER_AFTERSALE_REJECT,
-				SHOP_ORDER_UNREMARK,
-				ORDER_TYPE_ADDRESS,
-				ORDER_TYPE_BYCAR,
-				ORDER_TYPE_BYPET,
-				orderId: "",
-				orderData: {},
-				showGoodInfoModal: false,
-				showCouponModal: false,
-				couponList: Array.from({
-					length: 5
-				}, (v, k) => k),
-				couponInfo: null,
-				showContact: false,
-				configInfo: {
-					kefu_pic: "",
-					kefu_time: "",
-				},
-				showCancelModal: false,
-				showRemindSliver: false,
-				showSliverRouteModal: false,
-				countDownTime: 0,
-				showRefundModal: false,
-				isShowCallManagerModal: false,
-				selected1: true,
-				selected2: false,
-				selected3: true,
-				selected4: false,
-				recharge: true,
-				record: false,
-				imgPrefix,
-				// 联系客服按钮拖拽相关
-				contactBtnRight: 0, // 默认右侧距离，始终为0
-				contactBtnBottom: 0, // 默认底部距离，需要计算
-				isDragging: false, // 是否正在拖拽
-				touchStartX: 0, // 触摸开始X坐标
-				touchStartY: 0, // 触摸开始Y坐标
-				initialRight: 0, // 初始右侧距离
-				initialBottom: 0, // 初始底部距离
-			};
-		},
-		computed: {
-			goodsImgs() {
-				return (this.orderData?.goods_list || [])
-					.map((item) => item.goods_pic)
-					.filter((v) => !!v);
-			},
-			sliverFee() {
-				return +this.orderData?.yunfei || 0;
-			},
-			couponFee() {
-				return +this.orderData?.dikou_price || 0;
-			},
-			payPrice() {
-				return +this.orderData?.pay_price || 0;
-			},
-			refundPrice() {
-				return +this.orderData?.refund_fee || 0;
-			},
-			showBeforeSaleOrderStatus() {
-				return !this.orderData.tui_status || this.orderData.tui_status === SHOP_ORDER_AFTERSALE_REJECT
-			},
-			carNumber() {
-				return this.orderData?.car_info?.car_no || ''
-			},
-			managerPhoneNum() {
-				return this.orderData?.guanjia_info?.mobile || ''
-			},
-			managerName() {
-				return this.orderData?.guanjia_info?.name || ''
-			},
-			guanjiaPic() {
-				return this.orderData?.guanjia_info?.guanjia_pic || ''
-			},
-		},
-	
-		onLoad(options) {
-			this.orderId = options.id;
-			this.getOrderDetail();
+  onLoad(options) {
+    this.orderId = options.id;
+    this.getOrderDetail();
 
-			// 初始化联系客服按钮位置
-			const systemInfo = uni.getSystemInfoSync();
-			const windowHeight = systemInfo.windowHeight;
-			// 计算底部距离：calc(35vh - 130rpx - 48rpx) 转换为rpx
-			// 35vh = windowHeight * 0.35，转换为rpx (750rpx = windowHeight px)
-			const vh35InRpx = (windowHeight * 0.35 / windowHeight) * 750;
-			this.contactBtnBottom = vh35InRpx - 130 - 48;
-		},
-		beforeDestroy() {
-			const eventChannel = this.getOpenerEventChannel();
-			eventChannel && eventChannel.emit("refreshData");
-		},
-		methods: {
-			jumpToWeChat,
-			// 获取订单详情
-			getOrderDetail() {
-				getShopOrderDetails( Number(this.orderId) ).then((res) => {
-					this.orderData = res?.data || {};
-					if (
-						this.orderData.status === SHOP_ORDER_UNPAY &&
-						this.orderData.daojishi
-					) {
-						// 倒计时
-						this.coutDown();
-						this.countDownTime = this.orderData.daojishi;
-					}
-				});
-			},
-			coutDown() {
-				setTimeout(() => {
-					if (this.countDownTime > 0) {
-						this.countDownTime--;
-						this.coutDown();
-					} else {
-						this.getOrderDetail();
-					}
-				}, 1000);
-			},
-			useCoupon(data) {
-				this.showCouponModal = false;
-				this.couponInfo = {
-					...data
-				};
-			},
-		
-			// 取消订单
-			orderCancel() {
-				uni.showLoading({
-					icon: "none",
-					title: "处理中",
-					mask: true,
-				});
-				const data = {
-					order_id: Number(this.orderId),
-				}
-				cancelPetOrderMall(data).then((res) => {
-					uni.hideLoading();
-					this.showCancelModal = false;
-					this.getOrderDetail();
-				});
-			},
-			// 确认收货
-			confirmSliver() {
-				uni.showLoading({
-					icon: "none",
-					title: "处理中",
-					mask: true,
-				});
-				confirmOrder(Number(this.orderId) ).then((res) => {
-					uni.hideLoading();
-					this.getOrderDetail();
-				});
-			},
-			// 立即支付
-			pay() {
-				// if (this.WeChat === undefined && this.wallet === undefined) {
-				// 	uni.showToast({
-				// 		title: '请选择支付方式',
-				// 		icon: "none",
-				// 	});
-				// 	return
-				// }
-					uni.showLoading({
-						icon: "none",
-						title: "支付中",
-						mask: true,
-					});
-					payOrder({
-						type:4,
-						total_fee: Number(this.orderData.actual_price),
-						order_id:this.orderData.order_id,
-						order_no:this.orderData.order_no
-					}).then((res) => {
-						 tt.pay({
-							 orderInfo: { 
-                   order_id:res.data.orderInfo.order_id,
-                   order_token:res.data.orderInfo.order_token,
-                    },
-                    service:5,
-							success: (res) => {
-								uni.hideLoading();
-								uni.showToast({
-									title: "支付成功",
-									icon: "none",
-								});
-								this.getOrderDetail();
-							},
-							fail: (err) => {
-								uni.hideLoading();
-								uni.showToast({
-									title: err?.msg || "支付失败",
-									icon: "none",
-								});
-							},
-						});
-					});
+    // 初始化联系客服按钮位置
+    const systemInfo = uni.getSystemInfoSync();
+    const windowHeight = systemInfo.windowHeight;
+    // 计算底部距离：calc(35vh - 130rpx - 48rpx) 转换为rpx
+    // 35vh = windowHeight * 0.35，转换为rpx (750rpx = windowHeight px)
+    const vh35InRpx = ((windowHeight * 0.35) / windowHeight) * 750;
+    this.contactBtnBottom = vh35InRpx - 130 - 48;
+  },
+  beforeDestroy() {
+    const eventChannel = this.getOpenerEventChannel();
+    eventChannel && eventChannel.emit("refreshData");
+  },
+  methods: {
+    jumpToWeChat,
+    // 获取订单详情
+    getOrderDetail() {
+      getShopOrderDetails(Number(this.orderId)).then((res) => {
+        this.orderData = res?.data || {};
+        if (
+          this.orderData.status === SHOP_ORDER_UNPAY &&
+          this.orderData.daojishi
+        ) {
+          // 倒计时
+          this.coutDown();
+          this.countDownTime = this.orderData.daojishi;
+        }
+      });
+    },
+    coutDown() {
+      setTimeout(() => {
+        if (this.countDownTime > 0) {
+          this.countDownTime--;
+          this.coutDown();
+        } else {
+          this.getOrderDetail();
+        }
+      }, 1000);
+    },
+    useCoupon(data) {
+      this.showCouponModal = false;
+      this.couponInfo = {
+        ...data,
+      };
+    },
+    remindRefund(id) {
+      const data = {
+        id: Number(id),
+      };
+      cancelPetOrderMall(data).then((res) => {
+        const plugin = tt.requirePlugin("lifeServicePlugin");
+        plugin.applyRefund({
+        goodsList:res.data.goodsList,
+			outOrderNo:res.data.outOrderNo,
+			refundInfo:res.data.refundInfo,
+          success(res) {
+            uni.showToast({
+						title: '退款成功',
+						icon: 'success'
+					})
+            const { outRefundNo } = res;
+            tt.showToast({ title: outRefundNo });
+          },
+          fail(res) {
+            console.log("fail", res);
+          },
+        });
+      });
+    },
 
+    // 取消订单
+    orderCancel() {
+      uni.showLoading({
+        icon: "none",
+        title: "处理中",
+        mask: true,
+      });
+      const data = {
+        order_id: Number(this.orderId),
+      };
+      cancelPetOrderMall(data).then((res) => {
+        uni.hideLoading();
+        this.showCancelModal = false;
+        this.getOrderDetail();
+      });
+    },
+    // 确认收货
+    confirmSliver() {
+      uni.showLoading({
+        icon: "none",
+        title: "处理中",
+        mask: true,
+      });
+      confirmOrder(Number(this.orderId)).then((res) => {
+        uni.hideLoading();
+        this.getOrderDetail();
+      });
+    },
+    // 立即支付
+    pay() {
+      // if (this.WeChat === undefined && this.wallet === undefined) {
+      // 	uni.showToast({
+      // 		title: '请选择支付方式',
+      // 		icon: "none",
+      // 	});
+      // 	return
+      // }
+      uni.showLoading({
+        icon: "none",
+        title: "支付中",
+        mask: true,
+      });
+      payOrder({
+        type: 4,
+        total_fee: Number(this.orderData.actual_price),
+        order_id: this.orderData.order_id,
+        order_no: this.orderData.order_no,
+      }).then((res) => {
+        tt.pay({
+          orderInfo: {
+            order_id: res.data.orderInfo.order_id,
+            order_token: res.data.orderInfo.order_token,
+          },
+          service: 5,
+          success: (res) => {
+            uni.hideLoading();
+            uni.showToast({
+              title: "支付成功",
+              icon: "none",
+            });
+            this.getOrderDetail();
+          },
+          fail: (err) => {
+            uni.hideLoading();
+            uni.showToast({
+              title: err?.msg || "支付失败",
+              icon: "none",
+            });
+          },
+        });
+      });
+    },
+    // 提醒发货
+    remindSliver() {
+      this.showRemindSliver = true;
+      // remindOrder(this.orderId).then(() => {
+      // 	this.showRemindSliver = true;
+      // });
+    },
+    jumpToAfterSale() {
+      uni.navigateTo({
+        url: `/pages/client/order/refund?orderId=${this.orderId}`,
+      });
+    },
+    // 立即评价
+    jumpToRemark() {
+      uni.navigateTo({
+        url: `/pages/client/order/remark?orderId=${this.orderId}`,
+      });
+    },
+    // 查看评价
+    jumpToRemarkDetails() {
+      if (!this.orderData.pinglun_id) {
+        uni.showToast({
+          title: "暂无评价",
+          icon: "none",
+        });
+        return;
+      }
+      uni.navigateTo({
+        url: `/pages/client/remark/details?remarkId=${this.orderData.pinglun_id}`,
+      });
+    },
 
-			},
-			// 提醒发货
-			remindSliver() {
-				this.showRemindSliver = true;
-				// remindOrder(this.orderId).then(() => {
-				// 	this.showRemindSliver = true;
-				// });
-			},
-			jumpToAfterSale() {
-				uni.navigateTo({
-					url: `/pages/client/order/refund?orderId=${this.orderId}`,
-				});
-			},
-			// 立即评价
-			jumpToRemark() {
-				uni.navigateTo({
-					url: `/pages/client/order/remark?orderId=${this.orderId}`,
-				});
-			},
-			// 查看评价
-			jumpToRemarkDetails() {
-				if (!this.orderData.pinglun_id) {
-					uni.showToast({
-						title: "暂无评价",
-						icon: "none",
-					});
-					return
-				}
-				uni.navigateTo({
-					url: `/pages/client/remark/details?remarkId=${this.orderData.pinglun_id}`,
-				});
-			},
+    jumpToGoodDetails(goodInfo) {
+      uni.navigateTo({
+        url: `/pages/client/shop/details?id=${goodInfo.goods_id}`,
+      });
+    },
+    getSliverInfo() {
+      this.showSliverRouteModal = true;
+    },
+    formatTime(second) {
+      return moment(second * 1000).format("YYYY-MM-DD HH:mm");
+    },
+    // 联系客服按钮触摸开始
+    onContactBtnTouchStart(e) {
+      this.isDragging = false;
+      const touch = e.touches[0];
+      this.touchStartX = touch.clientX;
+      this.touchStartY = touch.clientY;
+      this.initialRight = this.contactBtnRight;
+      this.initialBottom = this.contactBtnBottom;
+    },
+    // 联系客服按钮触摸移动
+    onContactBtnTouchMove(e) {
+      const touch = e.touches[0];
+      const deltaX = touch.clientX - this.touchStartX;
+      const deltaY = touch.clientY - this.touchStartY;
 
-			jumpToGoodDetails(goodInfo) {
-				uni.navigateTo({
-					url: `/pages/client/shop/details?id=${goodInfo.goods_id}`,
-				});
-			},
-			getSliverInfo() {
-				this.showSliverRouteModal = true;
-			},
-			formatTime(second) {
-				return moment(second * 1000).format("YYYY-MM-DD HH:mm");
-			},
-			// 联系客服按钮触摸开始
-			onContactBtnTouchStart(e) {
-				this.isDragging = false;
-				const touch = e.touches[0];
-				this.touchStartX = touch.clientX;
-				this.touchStartY = touch.clientY;
-				this.initialRight = this.contactBtnRight;
-				this.initialBottom = this.contactBtnBottom;
-			},
-			// 联系客服按钮触摸移动
-			onContactBtnTouchMove(e) {
-				const touch = e.touches[0];
-				const deltaX = touch.clientX - this.touchStartX;
-				const deltaY = touch.clientY - this.touchStartY;
+      // 如果移动距离超过10px，认为是拖拽
+      if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {
+        this.isDragging = true;
+      }
 
-				// 如果移动距离超过10px，认为是拖拽
-				if (Math.abs(deltaX) > 10 || Math.abs(deltaY) > 10) {
-					this.isDragging = true;
-				}
+      if (this.isDragging) {
+        const systemInfo = uni.getSystemInfoSync();
+        const windowHeight = systemInfo.windowHeight;
 
-				if (this.isDragging) {
-					const systemInfo = uni.getSystemInfoSync();
-					const windowHeight = systemInfo.windowHeight;
+        // 只处理上下移动，将px转换为rpx
+        const deltaYRpx = (deltaY / windowHeight) * 750;
 
-					// 只处理上下移动，将px转换为rpx
-					const deltaYRpx = (deltaY / windowHeight) * 750;
+        // 计算新位置（只改变bottom，right始终保持为0）
+        // 向上移动时deltaY为负，但bottom值应该减小
+        let newBottom = this.initialBottom - deltaYRpx;
 
-					// 计算新位置（只改变bottom，right始终保持为0）
-					// 向上移动时deltaY为负，但bottom值应该减小
-					let newBottom = this.initialBottom - deltaYRpx;
+        // 限制在屏幕范围内
+        // 按钮高度约120rpx
+        const btnHeight = 120;
 
-					// 限制在屏幕范围内
-					// 按钮高度约120rpx
-					const btnHeight = 120;
+        newBottom = Math.max(
+          0,
+          Math.min(newBottom, windowHeight * 2 - btnHeight)
+        );
 
-					newBottom = Math.max(0, Math.min(newBottom, windowHeight * 2 - btnHeight));
+        // right始终保持为0
+        this.contactBtnRight = 0;
+        this.contactBtnBottom = newBottom;
+      }
+    },
+    // 联系客服按钮触摸结束
+    onContactBtnTouchEnd(e) {
+      // 松手后，right重置为0
+      this.contactBtnRight = 0;
+      this.isDragging = false;
+    },
+    // 联系客服按钮点击
+    handleContactBtnClick() {
+      // 如果正在拖拽，不触发点击事件
+      if (this.isDragging) {
+        return;
+      }
+      this.jumpToWeChat();
+    },
+    // 退款成功回调
+    handleRefundSuccess(e) {
+      console.log("退款成功:", e.detail);
+      uni.showToast({ title: "退款申请已提交", icon: "success" });
+      this.getOrderDetail();
+    },
 
-					// right始终保持为0
-					this.contactBtnRight = 0;
-					this.contactBtnBottom = newBottom;
-				}
-			},
-			// 联系客服按钮触摸结束
-			onContactBtnTouchEnd(e) {
-				// 松手后，right重置为0
-				this.contactBtnRight = 0;
-				this.isDragging = false;
-			},
-			// 联系客服按钮点击
-			handleContactBtnClick() {
-				// 如果正在拖拽，不触发点击事件
-				if (this.isDragging) {
-					return;
-				}
-				this.jumpToWeChat();
-			},
-			// 退款成功回调
-			handleRefundSuccess(e) {
-				console.log('退款成功:', e.detail)
-				uni.showToast({ title: '退款申请已提交', icon: 'success' })
-				this.getOrderDetail()
-			},
-			
-			// 退款错误回调
-			handleRefundError(e) {
-				console.error('退款错误:', e.detail)
-				uni.showToast({ title: e.detail.message || '退款失败', icon: 'none' })
-			},
-			
-			formatSecond(seconds) {
-				const hour = Math.floor(seconds / 3600);
-				const minutes = Math.floor((seconds - hour * 3600) / 60);
-				const second = seconds - hour * 3600 - minutes * 60;
-				return `${hour > 0 ? hour + "时" : ""}${
+    // 退款错误回调
+    handleRefundError(e) {
+      console.error("退款错误:", e.detail);
+      uni.showToast({ title: e.detail.message || "退款失败", icon: "none" });
+    },
+
+    formatSecond(seconds) {
+      const hour = Math.floor(seconds / 3600);
+      const minutes = Math.floor((seconds - hour * 3600) / 60);
+      const second = seconds - hour * 3600 - minutes * 60;
+      return `${hour > 0 ? hour + "时" : ""}${
         minutes > 0 ? minutes + "分" : ""
       }${second > 0 ? second + "秒" : ""}`;
-			},
-		},
-	};
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
-	.order-create-container {
-		height: 100%;
-		padding: 20rpx;
-		box-sizing: border-box;
-		background: #F7F8FA;
-		padding-top: 0;
-
-		.order-status {
-			padding: 20rpx 0rpx;
-
-			.status-icon {
-				width: 35rpx;
-				height: 35rpx;
-				margin-right: 14rpx;
-			}
-
-			.status-tips {
-				margin-top: 10rpx;
-			}
-
-			.refund-btn {
-				width: 216rpx;
-				height: 64rpx;
-				border-radius: 64rpx;
-				border: 1px solid #9b939a;
-				margin-top: 26rpx;
-			}
-		}
-
-		.info-cell {
-			background: #fff;
-			border-radius: 20rpx;
-			padding: 20rpx;
-			box-sizing: border-box;
-			margin-bottom: 20rpx;
-
-			.arrow-icon {
-				width: 11rpx;
-				height: 18rpx;
-				flex-shrink: 0;
-			}
-
-			&.address-info-cell {
-				.address-content {
-					display: flex;
-					flex-direction: column;
-					width: 100%;
-					position: relative;
-				}
-
-				.address-row-first {
-					display: flex;
-					align-items: center;
-					width: 100%;
-					margin-bottom: 10rpx;
-				}
-
-				.address-row-second {
-					display: flex;
-					width: 100%;
-				}
-
-				.address-icon {
-					width: 24rpx;
-					height: 32rpx;
-					flex-shrink: 0;
-					margin-right: 12rpx;
-				}
-
-				.address-name {
-					font-size: 28rpx;
-					color: #3D3D3D;
-
-					.address-phone {
-						margin-left: 8rpx;
-					}
-				}
-
-				.address-details {
-					font-size: 24rpx;
-					color: #999;
-					margin-left: 36rpx;
-				}
-			}
-
-			&.sliver-info-cell {
-				.sliver-content {
-					display: flex;
-					align-items: center;
-					width: 100%;
-				}
-
-				.sliver-icon {
-					width: 34rpx;
-					height: 34rpx;
-					flex-shrink: 0;
-					
-				}
-
-				.sliver-text {
-					flex: 1;
-					margin-left: 20rpx;
-					font-size: 24rpx;
-					color: #3D3D3D;
-				}
-			}
-
-			&.goods-info-cell {
-				padding: 20rpx;
-
-				.goods-item {
-					display: flex;
-					align-items: center;
-					width: 100%;
-					box-sizing: border-box;
-					margin-bottom: 20rpx;
-
-					&:last-child {
-						margin-bottom: 0;
-					}
-
-					.goods-img {
-						width: 100rpx;
-						height: 100rpx;
-						border-radius: 8rpx;
-						margin-right: 8rpx;
-						flex-shrink: 0;
-					}
-
-					.goods-content {
-						flex: 1;
-						display: flex;
-						flex-direction: column;
-						justify-content: center;
-						min-height: 100rpx;
-						min-width: 0;
-						overflow: hidden;
-
-						.goods-row-first {
-							display: flex;
-							align-items: center;
-							justify-content: space-between;
-							margin-bottom: 8rpx;
-
-							.goods-name {
-								flex: 1;
-								font-size: 28rpx;
-								color: #3D3D3D;
-								line-height: 40rpx;
-								overflow: hidden;
-								text-overflow: ellipsis;
-								white-space: nowrap;
-								margin-right: 20rpx;
-							}
-
-							.goods-price {
-								flex-shrink: 0;
-								font-size: 28rpx;
-								color: #3D3D3D;
-								font-weight: 500;
-							}
-						}
-
-						.goods-row-second {
-							display: flex;
-							align-items: center;
-							justify-content: space-between;
-
-							.goods-spec {
-								flex: 1;
-								font-size: 24rpx;
-								color: #999;
-								margin-right: 20rpx;
-							}
-
-							.goods-count {
-								flex-shrink: 0;
-								font-size: 24rpx;
-								color: #999;
-							}
-						}
-					}
-				}
-			}
-
-			&.payment-method-cell {
-				.payment-item {
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-
-					&:not(:last-child) {
-						padding-bottom: 20rpx;
-					}
-
-					.payment-left {
-						display: flex;
-						align-items: center;
-
-						.payment-icon {
-							width: 40rpx;
-							height: 40rpx;
-							margin-right: 20rpx;
-						}
-
-						.payment-text {
-							font-size: 24rpx;
-							color: #3D3D3D;
-						}
-					}
-
-					.payment-check {
-						width: 36rpx;
-						height: 36rpx;
-						flex-shrink: 0;
-					}
-				}
-			}
-
-			&.pay-cell {
-				padding-bottom: 0rpx;
-
-				.pay-info {
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					margin-bottom: 24rpx;
-
-					.pay-label {
-						font-size: 24rpx;
-						color: #9B939A;
-					}
-
-					.pay-value {
-						font-size: 24rpx;
-						color: #3D3D3D;
-					}
-				}
-
-				.coupon-row {
-					.coupon-price {
-						font-size: 28rpx;
-						color: #FF19A0;
-						margin-right: 12rpx;
-					}
-				}
-
-				.pay-price {
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					padding: 32rpx 0rpx;
-					border-top: 1rpx solid #ececec;
-
-					.pay-label {
-						font-size: 28rpx;
-						color: #3D3D3D;
-					}
-
-					.pay-total {
-						font-size: 28rpx;
-						color: #FF19A0;
-						font-weight: 500;
-					}
-				}
-			}
-
-			&.pay-type {
-				.pay-icon {
-					width: 52rpx;
-					height: 52rpx;
-					margin-right: 18rpx;
-				}
-
-				.pay-select-icon {
-					width: 36rpx;
-					height: 36rpx;
-				}
-
-				.pay-type-text {
-					flex: 1;
-				}
-			}
-
-			&.good-list {
-				padding: 20rpx;
-
-				.good-img {
-					width: 160rpx;
-					height: 160rpx;
-					margin-right: 20rpx;
-					border-radius: 20rpx;
-				}
-
-				.good-num {
-					margin-right: 12rpx;
-				}
-			}
-
-			&.order-info {
-				.order-row {
-					display: flex;
-					align-items: center;
-					justify-content: space-between;
-					margin-bottom: 24rpx;
-
-					&:last-child {
-						margin-bottom: 0;
-					}
-
-					.order-label {
-						font-size: 24rpx;
-						color: #9B939A;
-					}
-
-					.order-value {
-						font-size: 24rpx;
-						color: #3D3D3D;
-					}
-				}
-
-				.order-kefu {
-					margin-top: 20rpx;
-					padding: 30rpx 0 0;
-					border-top: 1rpx solid #ececec;
-
-					.kefu-icon {
-						width: 52rpx;
-						height: 52rpx;
-						margin-right: 12rpx;
-					}
-				}
-			}
-
-			&.info-cell-guanjia {
-				display: flex;
-				flex-direction: row;
-				align-items: center;
-
-				.head-icon {
-					width: 80rpx;
-					height: 80rpx;
-					flex-shrink: 0;
-					margin-right: 16rpx;
-					overflow: hidden;
-					border-radius: 40rpx;
-				}
-
-				.guan-jia-info-container {
-					display: flex;
-					flex: 1;
-					flex-direction: column;
-					justify-content: space-around;
-				}
-
-				.phone-view {
-					display: flex;
-					flex-direction: column;
-					align-items: center;
-					justify-content: center;
-
-					.call-img {
-						width: 60rpx;
-						height: 60rpx;
-						margin-bottom: 12rpx;
-					}
-				}
-			}
-		}
-
-		.place-view {
-			height: 166rpx;
-		}
-
-		.bottom-view {
-			position: fixed;
-			bottom: 0;
-			left: 0;
-			width: 100%;
-			padding: 36rpx 16rpx;
-			padding: 36rpx 16rpx calc(constant(safe-area-inset-bottom));
-			padding: 36rpx 16rpx calc(env(safe-area-inset-bottom));
-			box-sizing: border-box;
-			display: flex;
-			flex-direction: row;
-			justify-content: space-between;
-			background-color: #ffffff;
-			padding-top: 12rpx;
-			align-items: center;
-
-			.refund-btn-wrapper {
-				flex: 1;
-				min-width: 0;
-				width: calc(50% - 12rpx) !important;
-				height: 48px;
-			}
-
-			.handle-btn {
-				flex: 1;
-				min-width: 0;
-				height: 48px;
-				border-radius: 100px;
-				border: 2rpx solid #ff19a0;
-				display: flex;
-				align-items: center;
-				justify-content: center;
-				background: transparent;
-				width: calc(50% - 12rpx) !important;
-
-				.btnColor {
-					color: #ff19a0;
-					font-family: PingFang SC;
-					font-size: 14px;
-				}
-			}
-
-			// 最后一个按钮的特殊样式（优先级最高）
-			.handle-btn:last-child {
-				border: 2rpx solid #FF19A0 !important;
-				background: #FF19A0 !important;
-
-				text {
-					color: #fff !important;
-				}
-			}
-
-			// 确保 RefundButton 组件也能正确平均分配空间
-			::v-deep .refund-button-wrapper {
-				margin-left: 0 !important;
-				width: 100% !important;
-				height: 100% !important;
-				flex: 1 !important;
-				min-width: 0 !important;
-			}
-		}
-
-		.contact-float-btn {
-			position: fixed;
-			text-align: center;
-			z-index: 100;
-
-			.contact-icon {
-				width: 66rpx;
-				height: 66rpx;
-				margin: auto;
-			}
-
-			.contact-btn {
-				color: #FFFFFF;
-				background-color: #FF19A0;
-				border-radius: 257px;
-				padding: 6rpx 8rpx;
-				transform: translateY(-8px);
-			}
-		}
-
-		.sliver-content {
-			padding: 20rpx 0;
-
-			.sliver-item {
-				padding: 52rpx 0;
-				margin: 0 52rpx;
-				width: calc(100% - 52rpx * 2);
-				box-sizing: border-box;
-				border-bottom: 1rpx solid #f7f3f7;
-
-				.select-icon {
-					width: 32rpx;
-					height: 32rpx;
-					margin-left: 20rpx;
-				}
-			}
-
-			.sliver-btn {
-				width: 630rpx;
-				height: 92rpx;
-				background: #fe019b;
-				border-radius: 92rpx;
-				margin: 18rpx auto 10rpx;
-			}
-		}
-
-		.reject-modal {
-			::v-deep {
-				.tip-text {
-					color: $app_fc_main !important;
-					width: 100%;
-					text-align: left;
-					padding: 0 48rpx;
-					box-sizing: border-box;
-				}
-			}
-		}
-
-	}
+.order-create-container {
+  height: 100%;
+  padding: 20rpx;
+  box-sizing: border-box;
+  background: #f7f8fa;
+  padding-top: 0;
+
+  .order-status {
+    padding: 20rpx 0rpx;
+
+    .status-icon {
+      width: 35rpx;
+      height: 35rpx;
+      margin-right: 14rpx;
+    }
+
+    .status-tips {
+      margin-top: 10rpx;
+    }
+
+    .refund-btn {
+      width: 216rpx;
+      height: 64rpx;
+      border-radius: 64rpx;
+      border: 1px solid #9b939a;
+      margin-top: 26rpx;
+    }
+  }
+
+  .info-cell {
+    background: #fff;
+    border-radius: 20rpx;
+    padding: 20rpx;
+    box-sizing: border-box;
+    margin-bottom: 20rpx;
+
+    .arrow-icon {
+      width: 11rpx;
+      height: 18rpx;
+      flex-shrink: 0;
+    }
+
+    &.address-info-cell {
+      .address-content {
+        display: flex;
+        flex-direction: column;
+        width: 100%;
+        position: relative;
+      }
+
+      .address-row-first {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        margin-bottom: 10rpx;
+      }
+
+      .address-row-second {
+        display: flex;
+        width: 100%;
+      }
+
+      .address-icon {
+        width: 24rpx;
+        height: 32rpx;
+        flex-shrink: 0;
+        margin-right: 12rpx;
+      }
+
+      .address-name {
+        font-size: 28rpx;
+        color: #3d3d3d;
+
+        .address-phone {
+          margin-left: 8rpx;
+        }
+      }
+
+      .address-details {
+        font-size: 24rpx;
+        color: #999;
+        margin-left: 36rpx;
+      }
+    }
+
+    &.sliver-info-cell {
+      .sliver-content {
+        display: flex;
+        align-items: center;
+        width: 100%;
+      }
+
+      .sliver-icon {
+        width: 34rpx;
+        height: 34rpx;
+        flex-shrink: 0;
+      }
+
+      .sliver-text {
+        flex: 1;
+        margin-left: 20rpx;
+        font-size: 24rpx;
+        color: #3d3d3d;
+      }
+    }
+
+    &.goods-info-cell {
+      padding: 20rpx;
+
+      .goods-item {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        box-sizing: border-box;
+        margin-bottom: 20rpx;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .goods-img {
+          width: 100rpx;
+          height: 100rpx;
+          border-radius: 8rpx;
+          margin-right: 8rpx;
+          flex-shrink: 0;
+        }
+
+        .goods-content {
+          flex: 1;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          min-height: 100rpx;
+          min-width: 0;
+          overflow: hidden;
+
+          .goods-row-first {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            margin-bottom: 8rpx;
+
+            .goods-name {
+              flex: 1;
+              font-size: 28rpx;
+              color: #3d3d3d;
+              line-height: 40rpx;
+              overflow: hidden;
+              text-overflow: ellipsis;
+              white-space: nowrap;
+              margin-right: 20rpx;
+            }
+
+            .goods-price {
+              flex-shrink: 0;
+              font-size: 28rpx;
+              color: #3d3d3d;
+              font-weight: 500;
+            }
+          }
+
+          .goods-row-second {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+
+            .goods-spec {
+              flex: 1;
+              font-size: 24rpx;
+              color: #999;
+              margin-right: 20rpx;
+            }
+
+            .goods-count {
+              flex-shrink: 0;
+              font-size: 24rpx;
+              color: #999;
+            }
+          }
+        }
+      }
+    }
+
+    &.payment-method-cell {
+      .payment-item {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+
+        &:not(:last-child) {
+          padding-bottom: 20rpx;
+        }
+
+        .payment-left {
+          display: flex;
+          align-items: center;
+
+          .payment-icon {
+            width: 40rpx;
+            height: 40rpx;
+            margin-right: 20rpx;
+          }
+
+          .payment-text {
+            font-size: 24rpx;
+            color: #3d3d3d;
+          }
+        }
+
+        .payment-check {
+          width: 36rpx;
+          height: 36rpx;
+          flex-shrink: 0;
+        }
+      }
+    }
+
+    &.pay-cell {
+      padding-bottom: 0rpx;
+
+      .pay-info {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 24rpx;
+
+        .pay-label {
+          font-size: 24rpx;
+          color: #9b939a;
+        }
+
+        .pay-value {
+          font-size: 24rpx;
+          color: #3d3d3d;
+        }
+      }
+
+      .coupon-row {
+        .coupon-price {
+          font-size: 28rpx;
+          color: #ff19a0;
+          margin-right: 12rpx;
+        }
+      }
+
+      .pay-price {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        padding: 32rpx 0rpx;
+        border-top: 1rpx solid #ececec;
+
+        .pay-label {
+          font-size: 28rpx;
+          color: #3d3d3d;
+        }
+
+        .pay-total {
+          font-size: 28rpx;
+          color: #ff19a0;
+          font-weight: 500;
+        }
+      }
+    }
+
+    &.pay-type {
+      .pay-icon {
+        width: 52rpx;
+        height: 52rpx;
+        margin-right: 18rpx;
+      }
+
+      .pay-select-icon {
+        width: 36rpx;
+        height: 36rpx;
+      }
+
+      .pay-type-text {
+        flex: 1;
+      }
+    }
+
+    &.good-list {
+      padding: 20rpx;
+
+      .good-img {
+        width: 160rpx;
+        height: 160rpx;
+        margin-right: 20rpx;
+        border-radius: 20rpx;
+      }
+
+      .good-num {
+        margin-right: 12rpx;
+      }
+    }
+
+    &.order-info {
+      .order-row {
+        display: flex;
+        align-items: center;
+        justify-content: space-between;
+        margin-bottom: 24rpx;
+
+        &:last-child {
+          margin-bottom: 0;
+        }
+
+        .order-label {
+          font-size: 24rpx;
+          color: #9b939a;
+        }
+
+        .order-value {
+          font-size: 24rpx;
+          color: #3d3d3d;
+        }
+      }
+
+      .order-kefu {
+        margin-top: 20rpx;
+        padding: 30rpx 0 0;
+        border-top: 1rpx solid #ececec;
+
+        .kefu-icon {
+          width: 52rpx;
+          height: 52rpx;
+          margin-right: 12rpx;
+        }
+      }
+    }
+
+    &.info-cell-guanjia {
+      display: flex;
+      flex-direction: row;
+      align-items: center;
+
+      .head-icon {
+        width: 80rpx;
+        height: 80rpx;
+        flex-shrink: 0;
+        margin-right: 16rpx;
+        overflow: hidden;
+        border-radius: 40rpx;
+      }
+
+      .guan-jia-info-container {
+        display: flex;
+        flex: 1;
+        flex-direction: column;
+        justify-content: space-around;
+      }
+
+      .phone-view {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+
+        .call-img {
+          width: 60rpx;
+          height: 60rpx;
+          margin-bottom: 12rpx;
+        }
+      }
+    }
+  }
+
+  .place-view {
+    height: 166rpx;
+  }
+
+  .bottom-view {
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    padding: 36rpx 16rpx;
+    padding: 36rpx 16rpx calc(constant(safe-area-inset-bottom));
+    padding: 36rpx 16rpx calc(env(safe-area-inset-bottom));
+    box-sizing: border-box;
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    background-color: #ffffff;
+    padding-top: 12rpx;
+    align-items: center;
+
+    // 两个按钮时左右分布
+    &.two-buttons {
+      justify-content: space-between;
+    }
+
+    .refund-btn-wrapper {
+      flex: 1;
+      min-width: 0;
+      width: calc(50% - 12rpx) !important;
+      height: 48px;
+    }
+
+    .handle-btn {
+      flex: 1;
+      min-width: 0;
+      height: 48px;
+      border-radius: 100px;
+      border: 2rpx solid #ff19a0;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      background: transparent;
+      width: calc(50% - 12rpx) !important;
+
+      .btnColor {
+        color: #ff19a0;
+        font-family: PingFang SC;
+        font-size: 14px;
+      }
+    }
+
+    // 退款按钮保持粉色边框白色背景样式
+    .handle-btn.refund-btn {
+      border: 2rpx solid #ff19a0 !important;
+      background: transparent !important;
+
+      .btnColor {
+        color: #ff19a0 !important;
+      }
+    }
+
+    // 最后一个按钮（立即预约）保持粉色背景白色文字样式
+    .handle-btn:last-child {
+      border: 2rpx solid #ff19a0 !important;
+      background: #ff19a0 !important;
+
+      text {
+        color: #fff !important;
+      }
+    }
+
+    // 确保 RefundButton 组件也能正确平均分配空间
+    ::v-deep .refund-button-wrapper {
+      margin-left: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      flex: 1 !important;
+      min-width: 0 !important;
+    }
+  }
+
+  .contact-float-btn {
+    position: fixed;
+    text-align: center;
+    z-index: 100;
+
+    .contact-icon {
+      width: 66rpx;
+      height: 66rpx;
+      margin: auto;
+    }
+
+    .contact-btn {
+      color: #ffffff;
+      background-color: #ff19a0;
+      border-radius: 257px;
+      padding: 6rpx 8rpx;
+      transform: translateY(-8px);
+    }
+  }
+
+  .sliver-content {
+    padding: 20rpx 0;
+
+    .sliver-item {
+      padding: 52rpx 0;
+      margin: 0 52rpx;
+      width: calc(100% - 52rpx * 2);
+      box-sizing: border-box;
+      border-bottom: 1rpx solid #f7f3f7;
+
+      .select-icon {
+        width: 32rpx;
+        height: 32rpx;
+        margin-left: 20rpx;
+      }
+    }
+
+    .sliver-btn {
+      width: 630rpx;
+      height: 92rpx;
+      background: #fe019b;
+      border-radius: 92rpx;
+      margin: 18rpx auto 10rpx;
+    }
+  }
+
+  .reject-modal {
+    ::v-deep {
+      .tip-text {
+        color: $app_fc_main !important;
+        width: 100%;
+        text-align: left;
+        padding: 0 48rpx;
+        box-sizing: border-box;
+      }
+    }
+  }
+}
 </style>