Browse Source

feat(退款详情): 将物流动态查看改为悬浮弹窗展示

移除独立的物流动态弹窗组件,改为使用el-popover实现悬浮查看
ylong 1 tuần trước cách đây
mục cha
commit
7f8e8f029a
1 tập tin đã thay đổi với 132 bổ sung75 xóa
  1. 132 75
      src/views/mallOrder/refund/components/refund-detail-dialog.vue

+ 132 - 75
src/views/mallOrder/refund/components/refund-detail-dialog.vue

@@ -168,18 +168,71 @@
                             <div>
                                 {{ form.expressName || '-' }}
                                 {{ form.waybillCode }}
-                                <el-button
-                                    link
-                                    type="success"
-                                    class="ml-2"
-                                    @click="
-                                        openTracking(
-                                            '退货物流动态',
-                                            form.trackingVoList
-                                        )
-                                    "
-                                    >查看</el-button
+                                <el-popover
+                                    placement="bottom"
+                                    title="物流动态"
+                                    :width="400"
+                                    trigger="hover"
                                 >
+                                    <template #reference>
+                                        <el-button
+                                            link
+                                            type="success"
+                                            class="ml-2"
+                                            >查看</el-button
+                                        >
+                                    </template>
+                                    <el-timeline
+                                        style="
+                                            max-height: 400px;
+                                            overflow-y: auto;
+                                        "
+                                        v-if="
+                                            form.trackingVoList &&
+                                            form.trackingVoList.length > 0
+                                        "
+                                    >
+                                        <el-timeline-item
+                                            v-for="(
+                                                activity, index
+                                            ) in form.trackingVoList"
+                                            :key="index"
+                                            :timestamp="activity.ftime"
+                                            :type="index === 0 ? 'success' : ''"
+                                            :color="index === 0 ? '#0bbd87' : ''"
+                                        >
+                                            <div>
+                                                <div
+                                                    style="margin-bottom: 5px"
+                                                    v-if="activity.status"
+                                                >
+                                                    <el-tag
+                                                        size="small"
+                                                        :type="
+                                                            index === 0
+                                                                ? 'success'
+                                                                : 'info'
+                                                        "
+                                                        >{{ activity.status }}</el-tag
+                                                    >
+                                                </div>
+                                                <div
+                                                    style="
+                                                        color: #606266;
+                                                        font-size: 13px;
+                                                        line-height: 1.5;
+                                                    "
+                                                    >{{ activity.context }}</div
+                                                >
+                                            </div>
+                                        </el-timeline-item>
+                                    </el-timeline>
+                                    <el-empty
+                                        v-else
+                                        description="暂无物流信息"
+                                        :image-size="60"
+                                    />
+                                </el-popover>
                             </div>
                             <div
                                 v-if="returnLatestTrack"
@@ -298,19 +351,74 @@
                                     >
                                         <CopyDocument />
                                     </el-icon>
-                                    <el-button
-                                        link
-                                        type="success"
-                                        class="ml-2"
-                                        v-if="item.originWaybillCode"
-                                        @click="
-                                            openTracking(
-                                                '原始订单物流动态',
-                                                item.originTrackingVoList
-                                            )
-                                        "
-                                        >查看</el-button
+                                    <el-popover
+                                        placement="bottom"
+                                        title="物流动态"
+                                        :width="400"
+                                        trigger="hover"
                                     >
+                                        <template #reference>
+                                            <el-button
+                                                link
+                                                type="success"
+                                                class="ml-2"
+                                                v-if="item.originWaybillCode"
+                                                >查看</el-button
+                                            >
+                                        </template>
+                                        <el-timeline
+                                            style="
+                                                max-height: 400px;
+                                                overflow-y: auto;
+                                            "
+                                            v-if="
+                                                item.originTrackingVoList &&
+                                                item.originTrackingVoList.length > 0
+                                            "
+                                        >
+                                            <el-timeline-item
+                                                v-for="(
+                                                    activity, index
+                                                ) in item.originTrackingVoList"
+                                                :key="index"
+                                                :timestamp="activity.ftime"
+                                                :type="
+                                                    index === 0 ? 'success' : ''
+                                                "
+                                                :color="index === 0 ? '#0bbd87' : ''"
+                                            >
+                                                <div>
+                                                    <div
+                                                        style="margin-bottom: 5px"
+                                                        v-if="activity.status"
+                                                    >
+                                                        <el-tag
+                                                            size="small"
+                                                            :type="
+                                                                index === 0
+                                                                    ? 'success'
+                                                                    : 'info'
+                                                            "
+                                                            >{{ activity.status }}</el-tag
+                                                        >
+                                                    </div>
+                                                    <div
+                                                        style="
+                                                            color: #606266;
+                                                            font-size: 13px;
+                                                            line-height: 1.5;
+                                                        "
+                                                        >{{ activity.context }}</div
+                                                    >
+                                                </div>
+                                            </el-timeline-item>
+                                        </el-timeline>
+                                        <el-empty
+                                            v-else
+                                            description="暂无物流信息"
+                                            :image-size="60"
+                                        />
+                                    </el-popover>
                                 </div>
                                 <div
                                     v-if="
@@ -498,48 +606,6 @@
             ref="leaveMessageDialogRef"
             @success="handleNegotiationSuccess"
         />
-        <ele-modal
-            :width="600"
-            v-model="trackingVisible"
-            :title="trackingTitle"
-            :body-style="{ padding: '20px' }"
-        >
-            <el-timeline
-                style="max-height: 500px; overflow-y: auto"
-                v-if="trackingRecords && trackingRecords.length > 0"
-            >
-                <el-timeline-item
-                    v-for="(activity, index) in trackingRecords"
-                    :key="index"
-                    :timestamp="activity.ftime"
-                    :type="index === 0 ? 'success' : ''"
-                    :color="index === 0 ? '#0bbd87' : ''"
-                >
-                    <div>
-                        <div style="margin-bottom: 5px" v-if="activity.status">
-                            <el-tag
-                                size="small"
-                                :type="index === 0 ? 'success' : 'info'"
-                                >{{ activity.status }}</el-tag
-                            >
-                        </div>
-                        <div
-                            style="
-                                color: #606266;
-                                font-size: 13px;
-                                line-height: 1.5;
-                            "
-                            >{{ activity.context }}</div
-                        >
-                    </div>
-                </el-timeline-item>
-            </el-timeline>
-            <el-empty
-                v-else
-                description="暂无物流信息"
-                :image-size="60"
-            />
-        </ele-modal>
     </ele-modal>
 </template>
 
@@ -568,9 +634,6 @@
     const confirmRefundDialogRef = ref(null);
     const negotiateReturnDialogRef = ref(null);
     const leaveMessageDialogRef = ref(null);
-    const trackingVisible = ref(false);
-    const trackingTitle = ref('物流动态');
-    const trackingRecords = ref([]);
 
     const deadline = ref(0);
 
@@ -622,7 +685,7 @@
     });
 
     const isPlatformConfirmReceipt = computed(() => {
-        return String(form.value.status) === '7';
+        return String(form.value.status) === '8';
     });
 
     const returnLatestTrack = computed(() => {
@@ -632,12 +695,6 @@
         return null;
     });
 
-    const openTracking = (title, records) => {
-        trackingTitle.value = title || '物流动态';
-        trackingRecords.value = records || [];
-        trackingVisible.value = true;
-    };
-
     const handleOpen = (row) => {
         if (row && row.refundOrderId) {
             visible.value = true;