修改订单详情弹窗每次打开都是顶部开始

src/components/CommonPage/SimpleFormModal.vue

@@ -6,6 +6,7 @@
     v-model="visible"
     :title="title"
     position="center"
+    destroy-on-close
     :body-style="{ maxHeight: '84vh', position: 'relative', ...bodyStyle }"
   >
     <slot name="other"></slot>

src/views/recycleOrder/components/order-detail.vue

@@ -14,6 +14,7 @@
       padding: '0'
     }"
     position="center"
+    class="order-detail-modal"
   >
     <userDetail
       :detail="orderDetail"
@@ -95,6 +96,20 @@
         console.log(data, orderId.value, 'xxxx');
         getOrderDetail();
       }
+
+      resetScrollPosition();
+    });
+  };
+
+  // 重置滚动条位置
+  const resetScrollPosition = () => {
+    nextTick(() => {
+      setTimeout(() => {
+        const modalBody = document.querySelectorAll('.order-detail-modal .ele-modal-body');
+        if (modalBody) {
+          modalBody[modalBody.length - 1].scrollTop = 0;
+        }
+      }, 100);
     });
   };
 

src/views/recycleOrder/detail/order-base-info.vue

@@ -1,153 +1,171 @@
 <template>
-    <div class="base-info">
-        <ele-data-table ref="tableRef" row-key="userId" :columns="columns" :data="datasource" :tools="false"
-            :pagination="false">
-            <template #orderTime="{ row }">
-                <div class="common-text">
-                    <el-text>建单：</el-text>
-                    <el-text>{{ row.createTime }}</el-text>
-                </div>
-                <div class="common-text">
-                    <el-text>提交：</el-text>
-                    <el-text>{{ row.orderTime || '-' }}</el-text>
-                </div>
-            </template>
-            <template #status="{ row }">
-                <el-tag effect="dark" :type="row.status < 5 ? 'warning' : 'success'">{{ row.status < 5 ? '未发货' : '已发货'
-                        }}</el-tag>
-                        <el-tag style="margin-left: 15px" effect="dark"
-                            :type="row.status < 8 ? 'warning' : 'success'">{{ row.status < 8 ? '未收货' : '已收货' }}</el-tag>
-
-                                <el-tag style="margin-left: 15px" effect="dark"
-                                    :type="row.status == 11 ? ' success' : 'warning'">{{ row.status == 11
-                                        ? '已支付' : '未支付' }}</el-tag>
-            </template>
-        </ele-data-table>
-        <el-row :gutter="12" style="padding: 16px 10px; padding-bottom: 0">
-            <el-col :span="8">
-                <div class="common-text">
-                    <el-text>物流类型：</el-text>
-                    <el-text>平台物流</el-text>
-                </div>
-                <div class="common-text">
-                    <el-text>快递单号：</el-text>
-                    <el-text>{{ detail.waybillCode || '暂无信息' }}</el-text>
-                </div>
-                <div class="common-text">
-                    <el-text>快递公司：</el-text>
-                    <el-text>{{ finalExpressText || '暂无信息' }}</el-text>
-                </div>
-                <div class="common-text">
-                    <el-text>预约时间：</el-text>
-                    <el-text>{{ formatTime }}</el-text>
-                </div>
-            </el-col>
-            <el-col :span="8">
-                <div class="common-text">
-                    <el-text>发件人：</el-text>
-                    <el-text>{{ formatName(detail.sendName) }}(ID：{{ detail.userId }})</el-text>
-                </div>
-                <div class="common-text">
-                    <el-text>电 话：</el-text>
-                    <el-text>{{ formatPhone(detail.sendMobile) }}</el-text>
-                </div>
-                <div class="common-text">
-                    <el-text>地 址：</el-text>
-                    <el-text>{{ detail.sendAddress }}</el-text>
-                </div>
-                <div class="common-text">
-                    <el-text>备 注：</el-text>
-                    <el-text>{{ detail.userExpress || '暂无信息' }}</el-text>
-                </div>
-            </el-col>
-            <el-col :span="8">
-                <div class="common-text">
-                    <el-text>收货仓库：</el-text>
-                    <el-text>{{ detail.recipientGodown }}-{{ detail.recipientName }}</el-text>
-                </div>
-                <div class="common-text">
-                    <el-text>收 件 人：</el-text>
-                    <el-text>{{ detail.recipientName || '-' }}</el-text>
-                </div>
-                <div class="common-text">
-                    <el-text>电  话：</el-text>
-                    <el-text>{{ detail.recipientMobile || '-' }}</el-text>
-                </div>
-                <div class="common-text">
-                    <el-text>地  址：</el-text>
-                    <el-text>{{ detail.recipientAddress || '-' }}</el-text>
-                </div>
-            </el-col>
-        </el-row>
-    </div>
+  <div class="base-info">
+    <ele-data-table
+      ref="tableRef"
+      row-key="userId"
+      :columns="columns"
+      :data="datasource"
+      :tools="false"
+      :pagination="false"
+    >
+      <template #orderTime="{ row }">
+        <div class="common-text">
+          <el-text>建单：</el-text>
+          <el-text>{{ row.createTime }}</el-text>
+        </div>
+        <div class="common-text">
+          <el-text>提交：</el-text>
+          <el-text>{{ row.orderTime || '-' }}</el-text>
+        </div>
+      </template>
+      <template #status="{ row }">
+        <el-tag effect="dark" :type="row.status < 5 ? 'warning' : 'success'">{{
+          row.status < 5 ? '未发货' : '已发货'
+        }}</el-tag>
+        <el-tag
+          style="margin-left: 15px"
+          effect="dark"
+          :type="row.status < 8 ? 'warning' : 'success'"
+          >{{ row.status < 8 ? '未收货' : '已收货' }}</el-tag
+        >
+        <el-tag
+          style="margin-left: 15px"
+          effect="dark"
+          :type="row.status != 11 ? 'warning' : 'success'"
+          >{{ row.status == 11 ? '已支付' : '未支付' }}</el-tag
+        >
+      </template>
+    </ele-data-table>
+    <el-row :gutter="12" style="padding: 16px 10px; padding-bottom: 0">
+      <el-col :span="8">
+        <div class="common-text">
+          <el-text>物流类型：</el-text>
+          <el-text>平台物流</el-text>
+        </div>
+        <div class="common-text">
+          <el-text>快递单号：</el-text>
+          <el-text>{{ detail.waybillCode || '暂无信息' }}</el-text>
+        </div>
+        <div class="common-text">
+          <el-text>快递公司：</el-text>
+          <el-text>{{ finalExpressText || '暂无信息' }}</el-text>
+        </div>
+        <div class="common-text">
+          <el-text>预约时间：</el-text>
+          <el-text>{{ formatTime }}</el-text>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="common-text">
+          <el-text>发件人：</el-text>
+          <el-text
+            >{{ formatName(detail.sendName) }}(ID：{{ detail.userId }})</el-text
+          >
+        </div>
+        <div class="common-text">
+          <el-text>电 话：</el-text>
+          <el-text>{{ formatPhone(detail.sendMobile) }}</el-text>
+        </div>
+        <div class="common-text">
+          <el-text>地 址：</el-text>
+          <el-text>{{ detail.sendAddress }}</el-text>
+        </div>
+        <div class="common-text">
+          <el-text>备 注：</el-text>
+          <el-text>{{ detail.userExpress || '暂无信息' }}</el-text>
+        </div>
+      </el-col>
+      <el-col :span="8">
+        <div class="common-text">
+          <el-text>收货仓库：</el-text>
+          <el-text
+            >{{ detail.recipientGodown }}-{{ detail.recipientName }}</el-text
+          >
+        </div>
+        <div class="common-text">
+          <el-text>收 件 人：</el-text>
+          <el-text>{{ detail.recipientName || '-' }}</el-text>
+        </div>
+        <div class="common-text">
+          <el-text>电  话：</el-text>
+          <el-text>{{ detail.recipientMobile || '-' }}</el-text>
+        </div>
+        <div class="common-text">
+          <el-text>地  址：</el-text>
+          <el-text>{{ detail.recipientAddress || '-' }}</el-text>
+        </div>
+      </el-col>
+    </el-row>
+  </div>
 </template>
 
 <script setup>
-import { formatName, formatPhone } from '@/utils/common';
-import { ref, reactive, watch } from 'vue';
-const props = defineProps({
+  import { formatName, formatPhone } from '@/utils/common';
+  import { ref, reactive, watch } from 'vue';
+  const props = defineProps({
     detail: { type: Object, default: () => ({}) }
-});
+  });
 
-import { useDictData } from '@/utils/use-dict-data';
+  import { useDictData } from '@/utils/use-dict-data';
 
-/** 字典数据 */
-const [expressDicts, orderFormDicts] = useDictData([
+  /** 字典数据 */
+  const [expressDicts, orderFormDicts] = useDictData([
     'final_express',
     'order_form'
-]);
+  ]);
 
-const finalExpressText = computed(() => {
+  const finalExpressText = computed(() => {
     if (props.detail.finalExpress == '0' || !props.detail.finalExpress) {
-        return '暂无信息';
+      return '暂无信息';
     }
     return (
-        expressDicts.value.find((d) => d.dictValue == props.detail.finalExpress)
-            ?.dictLabel || '暂无信息'
+      expressDicts.value.find((d) => d.dictValue == props.detail.finalExpress)
+        ?.dictLabel || '暂无信息'
     );
-});
+  });
 
-const formatTime = computed(() => {
+  const formatTime = computed(() => {
     if (!props.detail.schedulePickupStartTime) return '-';
     return (
-        props.detail.schedulePickupStartTime +
-        '-' +
-        props.detail.schedulePickupEndTime.split(' ')[1]
+      props.detail.schedulePickupStartTime +
+      '-' +
+      props.detail.schedulePickupEndTime.split(' ')[1]
     );
-});
+  });
 
-const datasource = ref([]);
-watch(
+  const datasource = ref([]);
+  watch(
     () => props.detail,
     (newVal) => {
-        console.log(newVal, 'newVal');
-        datasource.value = newVal ? [newVal] : [];
-        console.log(datasource.value);
+      console.log(newVal, 'newVal');
+      datasource.value = newVal ? [newVal] : [];
+      console.log(datasource.value);
     },
     { immediate: true, deep: true }
-);
+  );
 
-const columns = ref([
+  const columns = ref([
     { label: '订单编号', prop: 'orderId' },
     {
-        label: '订单来源',
-        prop: 'orderFrom',
-        formatter: (row) =>
-            orderFormDicts.value.find((d) => d.dictValue == row.orderFrom)
-                ?.dictLabel
+      label: '订单来源',
+      prop: 'orderFrom',
+      formatter: (row) =>
+        orderFormDicts.value.find((d) => d.dictValue == row.orderFrom)
+          ?.dictLabel
     },
     { label: '用户', prop: 'userNick' },
     {
-        label: '预估书款',
-        prop: 'expectMoney',
-        formatter: (row) => '￥' + row.expectMoney
+      label: '预估书款',
+      prop: 'expectMoney',
+      formatter: (row) => '￥' + row.expectMoney
     },
     {
-        label: '审核书款',
-        prop: 'finalMoney',
-        formatter: (row) => typeof row.finalMoney == 'number' ? '￥' + row.finalMoney : '待核算'
+      label: '审核书款',
+      prop: 'finalMoney',
+      formatter: (row) =>
+        typeof row.finalMoney == 'number' ? '￥' + row.finalMoney : '待核算'
     },
     { label: '下单时间', prop: 'orderTime', slot: 'orderTime', width: 200 },
     { label: '交易状态', prop: 'status', slot: 'status', width: 240 }
-]);
+  ]);
 </script>