From 94588b7aed93b9924b4b0af6c482c8e9683014ea Mon Sep 17 00:00:00 2001
From: jqtmviyu <jqtmviyu@gmail.com>
Date: Thu, 15 May 2025 16:11:04 +0800
Subject: [PATCH] =?UTF-8?q?fix:=20:bug:=20=E8=AE=A2=E5=8D=95=E8=AF=A6?=
 =?UTF-8?q?=E6=83=85=E9=A1=B5=E9=AA=A8=E6=9E=B6=E5=B1=8Fh5=E6=A0=B7?=
 =?UTF-8?q?=E5=BC=8F=E5=85=BC=E5=AE=B9?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../detail/components/PageSkeleton.vue        | 454 ++++++++++++++++++
 src/pagesOrder/detail/detail.scss             | 435 +++++++++++++++++
 src/pagesOrder/detail/detail.vue              | 439 +----------------
 3 files changed, 893 insertions(+), 435 deletions(-)
 create mode 100644 src/pagesOrder/detail/detail.scss

diff --git a/src/pagesOrder/detail/components/PageSkeleton.vue b/src/pagesOrder/detail/components/PageSkeleton.vue
index e69de29..87c3960 100644
--- a/src/pagesOrder/detail/components/PageSkeleton.vue
+++ b/src/pagesOrder/detail/components/PageSkeleton.vue
@@ -0,0 +1,454 @@
+<template name="skeleton">
+  <view class="sk-container">
+    <view class="overview sk-image" style="padding-top: 40px">
+      <view
+        class="status icon-clock sk-transparent sk-text-0-0000-538 sk-text sk-pseudo sk-pseudo-circle"
+        >等待付款</view
+      >
+      <view class="tips tips">
+        <text class="money sk-transparent sk-text-0-0000-37 sk-text">应付金额: ¥ 99.00</text>
+        <text class="time sk-transparent sk-text-0-0000-402 sk-text">支付剩余</text>
+        <view is="node-modules/@dcloudio/uni-ui/lib/uni-countdown/uni-countdown">
+          <view
+            class="uni-countdown countdown--uni-countdown data-v-342c352a countdown--data-v-342c352a"
+          >
+            <text
+              class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-825 sk-text"
+              style="
+                color: rgb(255, 255, 255);
+                font-size: 14px;
+                width: 22px;
+                line-height: 20px;
+                border-radius: 3px;
+                background-position-x: 50%;
+              "
+              >00</text
+            >
+            <text
+              class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
+              style="color: #fff; font-size: 12px; margin:"
+              >时</text
+            >
+            <text
+              class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-91 sk-text"
+              style="
+                color: rgb(255, 255, 255);
+                font-size: 14px;
+                width: 22px;
+                line-height: 20px;
+                border-radius: 3px;
+                background-position-x: 50%;
+              "
+              >29</text
+            >
+            <text
+              class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
+              style="color: #fff; font-size: 12px; margin:"
+              >分</text
+            >
+            <text
+              class="uni-countdown__number countdown--uni-countdown__number data-v-342c352a countdown--data-v-342c352a sk-transparent sk-text-15-0000-512 sk-text"
+              style="
+                color: rgb(255, 255, 255);
+                font-size: 14px;
+                width: 22px;
+                line-height: 20px;
+                border-radius: 3px;
+                background-position-x: 50%;
+              "
+              >36</text
+            >
+            <text
+              class="uni-countdown__splitor countdown--uni-countdown__splitor data-v-342c352a countdown--data-v-342c352a sk-transparent sk-opacity"
+              style="color: #fff; font-size: 12px; margin:"
+              >秒</text
+            >
+          </view>
+        </view>
+      </view>
+      <view
+        class="button sk-transparent sk-text-28-1250-663 sk-text"
+        style="background-position-x: 50%"
+        >去支付</view
+      >
+    </view>
+    <view class="shipment shipment">
+      <view class="locate sk-image">
+        <view class="user sk-transparent sk-text-14-2857-16 sk-text">马斯克 13900139000</view>
+        <view class="address sk-transparent sk-text-14-2857-206 sk-text"
+          >北京市 北京市 西城区1122332</view
+        >
+      </view>
+    </view>
+    <view class="goods goods">
+      <view class="item item">
+        <navigator :render-link="false" class="navigator navigator" hover-class="none">
+          <image class="cover sk-image"></image>
+          <view class="meta meta">
+            <view class="name ellipsis sk-transparent sk-text-14-2857-64 sk-text"
+              >亮碟多效合一洗涤块495g</view
+            >
+            <view class="type sk-transparent sk-text-22-2222-294 sk-text">495g</view>
+            <view class="price price">
+              <view class="actual actual">
+                <text class="symbol sk-transparent sk-opacity">¥</text>
+                <text class="sk-transparent sk-text-14-2857-809 sk-text">69.90</text>
+              </view>
+            </view>
+            <view class="quantity sk-transparent sk-opacity">x1</view>
+          </view>
+        </navigator>
+      </view>
+      <view class="total total">
+        <view class="row row">
+          <view class="text sk-transparent sk-text-0-0000-632 sk-text">商品总价: </view>
+          <view class="symbol sk-transparent sk-text-0-0000-436 sk-text sk-pseudo sk-pseudo-circle"
+            >99.00</view
+          >
+        </view>
+        <view class="row row">
+          <view class="text sk-transparent sk-text-0-0000-43 sk-text">运费: </view>
+          <view class="symbol sk-transparent sk-text-0-0000-596 sk-text sk-pseudo sk-pseudo-circle"
+            >0.00</view
+          >
+        </view>
+        <view class="row row">
+          <view class="text sk-transparent sk-text-0-0000-717 sk-text">应付金额: </view>
+          <view
+            class="symbol primary sk-transparent sk-text-0-0000-1000 sk-text sk-pseudo sk-pseudo-circle"
+            >69.90</view
+          >
+        </view>
+      </view>
+    </view>
+    <view class="detail detail">
+      <view class="title sk-transparent sk-text-0-0000-526 sk-text">订单信息</view>
+      <view class="row row">
+        <view class="item sk-transparent">
+          订单编号: 1922925007051165697
+          <text class="copy sk-transparent sk-text-0-0000-202 sk-text">复制</text>
+        </view>
+        <view class="item sk-transparent sk-text-0-0000-586 sk-text"
+          >下单时间: 2025-05-15 16:00:23</view
+        >
+      </view>
+    </view>
+    <view is="components/JbcGuess" class="r r">
+      <view class="caption JbcGuess--caption">
+        <text
+          class="text JbcGuess--text sk-transparent sk-text-0-0000-986 sk-text sk-pseudo sk-pseudo-circle"
+          >猜你喜欢</text
+        >
+      </view>
+      <view class="guess JbcGuess--guess">
+        <navigator :render-link="false" class="guess-item JbcGuess--guess-item">
+          <image class="image JbcGuess--image sk-image" mode="aspectFill"></image>
+        </navigator>
+        <navigator :render-link="false" class="guess-item JbcGuess--guess-item">
+          <image class="image JbcGuess--image sk-image" mode="aspectFill"></image>
+        </navigator>
+      </view>
+    </view>
+    <view class="toolbar toolbar" style="padding-bottom: 0px">
+      <view class="button primary sk-transparent sk-text-14-2857-301 sk-text"> 去支付 </view>
+      <view class="button sk-transparent sk-text-14-2857-130 sk-text"> 取消订单 </view>
+    </view>
+  </view>
+</template>
+
+<style lang="scss">
+/* #ifdef H5 */
+@import '../detail.scss';
+/* #endif */
+
+.sk-transparent {
+  color: transparent !important;
+}
+.sk-text-14-2857-450 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 44.8rpx;
+  position: relative !important;
+}
+.sk-text {
+  background-origin: content-box !important;
+  background-clip: content-box !important;
+  background-color: transparent !important;
+  color: transparent !important;
+  background-repeat: repeat-y !important;
+}
+.sk-text-0-0000-538 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 36rpx;
+  position: relative !important;
+}
+.sk-text-0-0000-37 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 28rpx;
+  position: relative !important;
+}
+.sk-text-0-0000-402 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 28rpx;
+  position: relative !important;
+}
+.sk-text-15-0000-825 {
+  background-image: linear-gradient(
+    transparent 15%,
+    #eeeeee 0%,
+    #eeeeee 85%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 40rpx;
+  position: relative !important;
+}
+.sk-opacity {
+  opacity: 0 !important;
+}
+.sk-text-15-0000-91 {
+  background-image: linear-gradient(
+    transparent 15%,
+    #eeeeee 0%,
+    #eeeeee 85%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 40rpx;
+  position: relative !important;
+}
+.sk-text-15-0000-512 {
+  background-image: linear-gradient(
+    transparent 15%,
+    #eeeeee 0%,
+    #eeeeee 85%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 40rpx;
+  position: relative !important;
+}
+.sk-text-28-1250-663 {
+  background-image: linear-gradient(
+    transparent 28.125%,
+    #eeeeee 0%,
+    #eeeeee 71.875%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 64rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-16 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 36.4rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-206 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-64 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 36.4rpx;
+  position: relative !important;
+}
+.sk-text-22-2222-294 {
+  background-image: linear-gradient(
+    transparent 22.2222%,
+    #eeeeee 0%,
+    #eeeeee 77.7778%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 43.2rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-809 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 33.6rpx;
+  position: relative !important;
+}
+.sk-text-0-0000-632 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 26rpx;
+  position: relative !important;
+}
+.sk-text-0-0000-436 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 26rpx;
+  position: relative !important;
+}
+.sk-text-0-0000-43 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 26rpx;
+  position: relative !important;
+}
+.sk-text-0-0000-596 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 26rpx;
+  position: relative !important;
+}
+.sk-text-0-0000-717 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 26rpx;
+  position: relative !important;
+}
+.sk-text-0-0000-1000 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 36rpx;
+  position: relative !important;
+}
+.sk-text-0-0000-526 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 30rpx;
+  position: relative !important;
+}
+.sk-text-0-0000-202 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 20rpx;
+  position: relative !important;
+}
+.sk-text-0-0000-586 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 26rpx;
+  position: relative !important;
+}
+.sk-text-0-0000-986 {
+  background-image: linear-gradient(
+    transparent 0%,
+    #eeeeee 0%,
+    #eeeeee 100%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 32rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-301 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 36.4rpx;
+  position: relative !important;
+}
+.sk-text-14-2857-130 {
+  background-image: linear-gradient(
+    transparent 14.2857%,
+    #eeeeee 0%,
+    #eeeeee 85.7143%,
+    transparent 0%
+  ) !important;
+  background-size: 100% 36.4rpx;
+  position: relative !important;
+}
+.sk-image {
+  background: #efefef !important;
+}
+.sk-pseudo::before,
+.sk-pseudo::after {
+  background: #efefef !important;
+  background-image: none !important;
+  color: transparent !important;
+  border-color: transparent !important;
+}
+.sk-pseudo-rect::before,
+.sk-pseudo-rect::after {
+  border-radius: 0 !important;
+}
+.sk-pseudo-circle::before,
+.sk-pseudo-circle::after {
+  border-radius: 50% !important;
+}
+.sk-container {
+  position: absolute;
+  left: 0;
+  top: 0;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+  background-color: transparent;
+}
+</style>
diff --git a/src/pagesOrder/detail/detail.scss b/src/pagesOrder/detail/detail.scss
new file mode 100644
index 0000000..c3c7438
--- /dev/null
+++ b/src/pagesOrder/detail/detail.scss
@@ -0,0 +1,435 @@
+page {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  overflow: hidden;
+}
+
+.navbar {
+  width: 750rpx;
+  color: #000;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 9;
+  /* background-color: #f8f8f8; */
+  background-color: transparent;
+
+  .wrap {
+    position: relative;
+
+    .title {
+      height: 44px;
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 32rpx;
+      /* color: #000; */
+      color: transparent;
+    }
+
+    .back {
+      position: absolute;
+      left: 0;
+      height: 44px;
+      width: 44px;
+      font-size: 44rpx;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      /* color: #000; */
+      color: #fff;
+    }
+  }
+}
+
+.viewport {
+  background-color: #f7f7f8;
+}
+
+.overview {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+
+  line-height: 1;
+  padding-bottom: 30rpx;
+  color: #fff;
+  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
+  background-size: cover;
+
+  .status {
+    font-size: 36rpx;
+  }
+
+  .status::before {
+    margin-right: 6rpx;
+    font-weight: 500;
+  }
+
+  .tips {
+    margin: 30rpx 0;
+    display: flex;
+    font-size: 14px;
+    align-items: center;
+
+    .money {
+      margin-right: 30rpx;
+    }
+  }
+
+  .button-group {
+    margin-top: 30rpx;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+  }
+
+  .button {
+    width: 260rpx;
+    height: 64rpx;
+    margin: 0 10rpx;
+    text-align: center;
+    line-height: 64rpx;
+    font-size: 28rpx;
+    color: #27ba9b;
+    border-radius: 68rpx;
+    background-color: #fff;
+  }
+}
+
+.shipment {
+  line-height: 1.4;
+  padding: 0 20rpx;
+  margin: 20rpx 20rpx 0;
+  border-radius: 10rpx;
+  background-color: #fff;
+
+  .locate,
+  .item {
+    min-height: 120rpx;
+    padding: 30rpx 30rpx 25rpx 75rpx;
+    background-size: 50rpx;
+    background-repeat: no-repeat;
+    background-position: 6rpx center;
+  }
+
+  .locate {
+    background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
+
+    .user {
+      font-size: 26rpx;
+      color: #444;
+    }
+
+    .address {
+      font-size: 24rpx;
+      color: #666;
+    }
+  }
+
+  .item {
+    background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
+    border-bottom: 1rpx solid #eee;
+    position: relative;
+
+    .message {
+      font-size: 26rpx;
+      color: #444;
+    }
+
+    .date {
+      font-size: 24rpx;
+      color: #666;
+    }
+  }
+}
+
+.goods {
+  margin: 20rpx 20rpx 0;
+  padding: 0 20rpx;
+  border-radius: 10rpx;
+  background-color: #fff;
+
+  .item {
+    padding: 30rpx 0;
+    border-bottom: 1rpx solid #eee;
+
+    .navigator {
+      display: flex;
+      margin: 20rpx 0;
+    }
+
+    .cover {
+      width: 170rpx;
+      height: 170rpx;
+      border-radius: 10rpx;
+      margin-right: 20rpx;
+    }
+
+    .meta {
+      flex: 1;
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      position: relative;
+    }
+
+    .name {
+      height: 80rpx;
+      font-size: 26rpx;
+      color: #444;
+    }
+
+    .type {
+      line-height: 1.8;
+      padding: 0 15rpx;
+      margin-top: 6rpx;
+      font-size: 24rpx;
+      align-self: flex-start;
+      border-radius: 4rpx;
+      color: #888;
+      background-color: #f7f7f8;
+    }
+
+    .price {
+      display: flex;
+      margin-top: 6rpx;
+      font-size: 24rpx;
+    }
+
+    .symbol {
+      font-size: 20rpx;
+    }
+
+    .original {
+      color: #999;
+      text-decoration: line-through;
+    }
+
+    .actual {
+      margin-left: 10rpx;
+      color: #444;
+    }
+
+    .text {
+      font-size: 22rpx;
+    }
+
+    .quantity {
+      position: absolute;
+      bottom: 0;
+      right: 0;
+      font-size: 24rpx;
+      color: #444;
+    }
+
+    .action {
+      display: flex;
+      flex-direction: row-reverse;
+      justify-content: flex-start;
+      padding: 30rpx 0 0;
+
+      .button {
+        width: 200rpx;
+        height: 60rpx;
+        text-align: center;
+        justify-content: center;
+        line-height: 60rpx;
+        margin-left: 20rpx;
+        border-radius: 60rpx;
+        border: 1rpx solid #ccc;
+        font-size: 26rpx;
+        color: #444;
+      }
+
+      .primary {
+        color: #27ba9b;
+        border-color: #27ba9b;
+      }
+    }
+  }
+
+  .total {
+    line-height: 1;
+    font-size: 26rpx;
+    padding: 20rpx 0;
+    color: #666;
+
+    .row {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      padding: 10rpx 0;
+    }
+
+    .symbol::before {
+      content: '¥';
+      font-size: 80%;
+      margin-right: 3rpx;
+    }
+
+    .primary {
+      color: #cf4444;
+      font-size: 36rpx;
+    }
+  }
+}
+
+.detail {
+  line-height: 1;
+  padding: 30rpx 20rpx 0;
+  margin: 20rpx 20rpx 0;
+  font-size: 26rpx;
+  color: #666;
+  border-radius: 10rpx;
+  background-color: #fff;
+
+  .title {
+    font-size: 30rpx;
+    color: #444;
+  }
+
+  .row {
+    padding: 20rpx 0;
+
+    .item {
+      padding: 10rpx 0;
+      display: flex;
+      align-items: center;
+    }
+
+    .copy {
+      border-radius: 20rpx;
+      font-size: 20rpx;
+      border: 1px solid #ccc;
+      padding: 5rpx 10rpx;
+      margin-left: 10rpx;
+    }
+  }
+}
+
+.toolbar-height {
+  height: 100rpx;
+  box-sizing: content-box;
+}
+
+.toolbar {
+  position: fixed;
+  left: 0;
+  right: 0;
+  bottom: calc(var(--window-bottom));
+  z-index: 1;
+
+  height: 100rpx;
+  padding: 0 20rpx;
+  display: flex;
+  align-items: center;
+  flex-direction: row-reverse;
+  border-top: 1rpx solid #ededed;
+  border-bottom: 1rpx solid #ededed;
+  background-color: #fff;
+  box-sizing: content-box;
+
+  .button {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    width: 200rpx;
+    height: 72rpx;
+    margin-left: 15rpx;
+    font-size: 26rpx;
+    border-radius: 72rpx;
+    border: 1rpx solid #ccc;
+    color: #444;
+  }
+
+  .delete {
+    order: 4;
+  }
+
+  .button {
+    order: 3;
+  }
+
+  .secondary {
+    order: 2;
+    color: #27ba9b;
+    border-color: #27ba9b;
+  }
+
+  .primary {
+    order: 1;
+    color: #fff;
+    background-color: #27ba9b;
+  }
+}
+
+.popup-root {
+  padding: 30rpx 30rpx 0;
+  border-radius: 10rpx 10rpx 0 0;
+  overflow: hidden;
+
+  .title {
+    font-size: 30rpx;
+    text-align: center;
+    margin-bottom: 30rpx;
+  }
+
+  .description {
+    font-size: 28rpx;
+    padding: 0 20rpx;
+
+    .tips {
+      color: #444;
+      margin-bottom: 12rpx;
+    }
+
+    .cell {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      padding: 15rpx 0;
+      color: #666;
+    }
+
+    .icon::before {
+      content: '\e6cd';
+      font-family: 'erabbit' !important;
+      font-size: 38rpx;
+      color: #999;
+    }
+
+    .icon.checked::before {
+      content: '\e6cc';
+      font-size: 38rpx;
+      color: #27ba9b;
+    }
+  }
+
+  .footer {
+    display: flex;
+    justify-content: space-between;
+    padding: 30rpx 0 40rpx;
+    font-size: 28rpx;
+    color: #444;
+
+    .button {
+      flex: 1;
+      height: 72rpx;
+      text-align: center;
+      line-height: 72rpx;
+      margin: 0 20rpx;
+      color: #444;
+      border-radius: 72rpx;
+      border: 1rpx solid #ccc;
+    }
+
+    .primary {
+      color: #fff;
+      background-color: #27ba9b;
+      border: none;
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/pagesOrder/detail/detail.vue b/src/pagesOrder/detail/detail.vue
index 483ac24..dc999e6 100644
--- a/src/pagesOrder/detail/detail.vue
+++ b/src/pagesOrder/detail/detail.vue
@@ -221,6 +221,7 @@
 </template>
 
 <script setup lang="ts">
+import PageSkeleton from './components/PageSkeleton.vue'
 import {
   deleteMemberOrderAPI,
   getMemberOrderLogisticsAPI,
@@ -272,6 +273,7 @@ const hasBack = pages.length > 1
 // 获取当前页面实例
 const pageInstance = pages.at(-1) as AnimationMethods
 
+// #ifdef MP-WEIXIN
 // 添加顶部动画
 onReady(() => {
   // 动画效果: 导航栏背景色
@@ -334,6 +336,7 @@ onReady(() => {
     },
   )
 })
+// #endif
 
 // 获取订单详情
 const orderDetail = ref<OrderResult>()
@@ -479,439 +482,5 @@ const handleDeleteOrder = async () => {
 </script>
 
 <style lang="scss">
-page {
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  overflow: hidden;
-}
-
-.navbar {
-  width: 750rpx;
-  color: #000;
-  position: fixed;
-  top: 0;
-  left: 0;
-  z-index: 9;
-  /* background-color: #f8f8f8; */
-  background-color: transparent;
-
-  .wrap {
-    position: relative;
-
-    .title {
-      height: 44px;
-      display: flex;
-      justify-content: center;
-      align-items: center;
-      font-size: 32rpx;
-      /* color: #000; */
-      color: transparent;
-    }
-
-    .back {
-      position: absolute;
-      left: 0;
-      height: 44px;
-      width: 44px;
-      font-size: 44rpx;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      /* color: #000; */
-      color: #fff;
-    }
-  }
-}
-
-.viewport {
-  background-color: #f7f7f8;
-}
-
-.overview {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-
-  line-height: 1;
-  padding-bottom: 30rpx;
-  color: #fff;
-  background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/order_bg.png);
-  background-size: cover;
-
-  .status {
-    font-size: 36rpx;
-  }
-
-  .status::before {
-    margin-right: 6rpx;
-    font-weight: 500;
-  }
-
-  .tips {
-    margin: 30rpx 0;
-    display: flex;
-    font-size: 14px;
-    align-items: center;
-
-    .money {
-      margin-right: 30rpx;
-    }
-  }
-
-  .button-group {
-    margin-top: 30rpx;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .button {
-    width: 260rpx;
-    height: 64rpx;
-    margin: 0 10rpx;
-    text-align: center;
-    line-height: 64rpx;
-    font-size: 28rpx;
-    color: #27ba9b;
-    border-radius: 68rpx;
-    background-color: #fff;
-  }
-}
-
-.shipment {
-  line-height: 1.4;
-  padding: 0 20rpx;
-  margin: 20rpx 20rpx 0;
-  border-radius: 10rpx;
-  background-color: #fff;
-
-  .locate,
-  .item {
-    min-height: 120rpx;
-    padding: 30rpx 30rpx 25rpx 75rpx;
-    background-size: 50rpx;
-    background-repeat: no-repeat;
-    background-position: 6rpx center;
-  }
-
-  .locate {
-    background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/locate.png);
-
-    .user {
-      font-size: 26rpx;
-      color: #444;
-    }
-
-    .address {
-      font-size: 24rpx;
-      color: #666;
-    }
-  }
-
-  .item {
-    background-image: url(https://pcapi-xiaotuxian-front-devtest.itheima.net/miniapp/images/car.png);
-    border-bottom: 1rpx solid #eee;
-    position: relative;
-
-    .message {
-      font-size: 26rpx;
-      color: #444;
-    }
-
-    .date {
-      font-size: 24rpx;
-      color: #666;
-    }
-  }
-}
-
-.goods {
-  margin: 20rpx 20rpx 0;
-  padding: 0 20rpx;
-  border-radius: 10rpx;
-  background-color: #fff;
-
-  .item {
-    padding: 30rpx 0;
-    border-bottom: 1rpx solid #eee;
-
-    .navigator {
-      display: flex;
-      margin: 20rpx 0;
-    }
-
-    .cover {
-      width: 170rpx;
-      height: 170rpx;
-      border-radius: 10rpx;
-      margin-right: 20rpx;
-    }
-
-    .meta {
-      flex: 1;
-      display: flex;
-      flex-direction: column;
-      justify-content: center;
-      position: relative;
-    }
-
-    .name {
-      height: 80rpx;
-      font-size: 26rpx;
-      color: #444;
-    }
-
-    .type {
-      line-height: 1.8;
-      padding: 0 15rpx;
-      margin-top: 6rpx;
-      font-size: 24rpx;
-      align-self: flex-start;
-      border-radius: 4rpx;
-      color: #888;
-      background-color: #f7f7f8;
-    }
-
-    .price {
-      display: flex;
-      margin-top: 6rpx;
-      font-size: 24rpx;
-    }
-
-    .symbol {
-      font-size: 20rpx;
-    }
-
-    .original {
-      color: #999;
-      text-decoration: line-through;
-    }
-
-    .actual {
-      margin-left: 10rpx;
-      color: #444;
-    }
-
-    .text {
-      font-size: 22rpx;
-    }
-
-    .quantity {
-      position: absolute;
-      bottom: 0;
-      right: 0;
-      font-size: 24rpx;
-      color: #444;
-    }
-
-    .action {
-      display: flex;
-      flex-direction: row-reverse;
-      justify-content: flex-start;
-      padding: 30rpx 0 0;
-
-      .button {
-        width: 200rpx;
-        height: 60rpx;
-        text-align: center;
-        justify-content: center;
-        line-height: 60rpx;
-        margin-left: 20rpx;
-        border-radius: 60rpx;
-        border: 1rpx solid #ccc;
-        font-size: 26rpx;
-        color: #444;
-      }
-
-      .primary {
-        color: #27ba9b;
-        border-color: #27ba9b;
-      }
-    }
-  }
-
-  .total {
-    line-height: 1;
-    font-size: 26rpx;
-    padding: 20rpx 0;
-    color: #666;
-
-    .row {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      padding: 10rpx 0;
-    }
-
-    .symbol::before {
-      content: '¥';
-      font-size: 80%;
-      margin-right: 3rpx;
-    }
-
-    .primary {
-      color: #cf4444;
-      font-size: 36rpx;
-    }
-  }
-}
-
-.detail {
-  line-height: 1;
-  padding: 30rpx 20rpx 0;
-  margin: 20rpx 20rpx 0;
-  font-size: 26rpx;
-  color: #666;
-  border-radius: 10rpx;
-  background-color: #fff;
-
-  .title {
-    font-size: 30rpx;
-    color: #444;
-  }
-
-  .row {
-    padding: 20rpx 0;
-
-    .item {
-      padding: 10rpx 0;
-      display: flex;
-      align-items: center;
-    }
-
-    .copy {
-      border-radius: 20rpx;
-      font-size: 20rpx;
-      border: 1px solid #ccc;
-      padding: 5rpx 10rpx;
-      margin-left: 10rpx;
-    }
-  }
-}
-
-.toolbar-height {
-  height: 100rpx;
-  box-sizing: content-box;
-}
-
-.toolbar {
-  position: fixed;
-  left: 0;
-  right: 0;
-  bottom: calc(var(--window-bottom));
-  z-index: 1;
-
-  height: 100rpx;
-  padding: 0 20rpx;
-  display: flex;
-  align-items: center;
-  flex-direction: row-reverse;
-  border-top: 1rpx solid #ededed;
-  border-bottom: 1rpx solid #ededed;
-  background-color: #fff;
-  box-sizing: content-box;
-
-  .button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-
-    width: 200rpx;
-    height: 72rpx;
-    margin-left: 15rpx;
-    font-size: 26rpx;
-    border-radius: 72rpx;
-    border: 1rpx solid #ccc;
-    color: #444;
-  }
-
-  .delete {
-    order: 4;
-  }
-
-  .button {
-    order: 3;
-  }
-
-  .secondary {
-    order: 2;
-    color: #27ba9b;
-    border-color: #27ba9b;
-  }
-
-  .primary {
-    order: 1;
-    color: #fff;
-    background-color: #27ba9b;
-  }
-}
-
-.popup-root {
-  padding: 30rpx 30rpx 0;
-  border-radius: 10rpx 10rpx 0 0;
-  overflow: hidden;
-
-  .title {
-    font-size: 30rpx;
-    text-align: center;
-    margin-bottom: 30rpx;
-  }
-
-  .description {
-    font-size: 28rpx;
-    padding: 0 20rpx;
-
-    .tips {
-      color: #444;
-      margin-bottom: 12rpx;
-    }
-
-    .cell {
-      display: flex;
-      justify-content: space-between;
-      align-items: center;
-      padding: 15rpx 0;
-      color: #666;
-    }
-
-    .icon::before {
-      content: '\e6cd';
-      font-family: 'erabbit' !important;
-      font-size: 38rpx;
-      color: #999;
-    }
-
-    .icon.checked::before {
-      content: '\e6cc';
-      font-size: 38rpx;
-      color: #27ba9b;
-    }
-  }
-
-  .footer {
-    display: flex;
-    justify-content: space-between;
-    padding: 30rpx 0 40rpx;
-    font-size: 28rpx;
-    color: #444;
-
-    .button {
-      flex: 1;
-      height: 72rpx;
-      text-align: center;
-      line-height: 72rpx;
-      margin: 0 20rpx;
-      color: #444;
-      border-radius: 72rpx;
-      border: 1rpx solid #ccc;
-    }
-
-    .primary {
-      color: #fff;
-      background-color: #27ba9b;
-      border: none;
-    }
-  }
-}
+@import './detail.scss';
 </style>