refactor(订单管理): 重构订单详情和退款相关组件

重构订单详情页，增加订单类型切换功能，优化退款流程状态显示和交互逻辑。调整退款组件布局和样式，统一状态处理逻辑，优化用户体验。

主要变更包括：
1. 订单详情页增加卖书/买书订单切换功能
2. 优化退款状态显示和倒计时提示
3. 调整退款组件布局和交互逻辑
4. 修复退款数量显示问题
5. 优化物流信息展示

src/views/data/defaultImage/index.vue

@@ -1,15 +1,16 @@
 <template>
     <ele-page flex-table>
         <ele-card flex-table header="默认图片设置">
-            <el-button
-                type="primary"
-                style="width: 200px"
-                @click="handleSetDefault"
-                v-permission="'data:defaultImage:set'"
-                >设置默认图片</el-button
-            >
+            <div>
+                <el-button
+                    type="primary"
+                    style="width: 200px"
+                    @click="handleSetDefault"
+                    v-permission="'data:defaultImage:set'"
+                    >设置默认图片</el-button
+                >
 
-            <el-checkbox-group
+                <el-checkbox-group
                 style="height: calc(100vh - 270px)"
                 v-model="checkList"
                 class="flex flex-wrap items-start content-start overflow-auto"
@@ -60,6 +61,7 @@
                 @update:currentPage="handleCurrentChange"
                 @update:pageSize="handlePageSizeChange"
             />
+            </div>
         </ele-card>
     </ele-page>
 </template>

src/views/mallOrder/all/components/order-base-info.vue

@@ -127,7 +127,7 @@
                         <el-popover
                             placement="bottom"
                             title="物流动态"
-                            :width="300"
+                            :width="400"
                             trigger="hover"
                         >
                             <template #reference>
@@ -136,19 +136,26 @@
                                     type="success"
                                     class="ml-2"
                                     v-if="detail.waybillCode"
-                                    @click="viewLogistics"
                                     >查看</el-button
                                 >
                             </template>
-                            <el-timeline>
+                            <el-timeline style="max-height: 400px; overflow-y: auto;" v-if="detail.trackingVoList && detail.trackingVoList.length > 0">
                                 <el-timeline-item
-                                    v-for="(activity, index) in activities"
+                                    v-for="(activity, index) in detail.trackingVoList"
                                     :key="index"
-                                    :timestamp="activity.timestamp"
+                                    :timestamp="activity.ftime"
+                                    :type="index === 0 ? 'success' : ''"
+                                    :color="index === 0 ? '#0bbd87' : ''"
                                 >
-                                    {{ activity.content }}
+                                    <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>
 
@@ -199,8 +206,6 @@
 
     defineEmits(['add-package', 'edit-receiver']);
 
-    const activities = ref([]);
-
     const getOutOfStockText = (value) => {
         const map = {
             1: '缺货时电话与我沟通',
@@ -209,10 +214,6 @@
         };
         return map[value] || value;
     };
-
-    const viewLogistics = () => {
-        EleMessage.info('物流详情功能开发中');
-    };
 </script>
 
 <style scoped>

src/views/mallOrder/all/components/order-item.vue

@@ -115,6 +115,8 @@
                     <div class="col-qty">x{{ product.num }}</div>
                     <div class="col-aftersales">
                         <span
+                            class="cursor-pointer"
+                            @click="$emit('view-refund-detail', product)"
                             :class="{
                                 'text-blue': product.status === '3',
                                 'text-red': product.status === '2'
@@ -147,15 +149,7 @@
                 <div>{{ order.waybillCode }}</div>
             </div>
             <div class="col-merged col-status">
-                <el-button
-                    link
-                    type="primary"
-                    @click="$emit('view-refund-detail', order)"
-                    v-if="order.status == 6"
-                    >退款中</el-button
-                >
                 <dict-data
-                    v-else
                     code="shop_order_status"
                     type="text"
                     :model-value="order.status"
@@ -411,6 +405,7 @@
 
     .text-red {
         color: #f56c6c;
+        cursor: pointer;
     }
 
     .flag-icon {

src/views/mallOrder/all/components/order-product-list.vue

@@ -1,8 +1,9 @@
 <template>
     <div class="order-product-list">
         <ele-card header="商品详情">
-            <el-table :data="detail.detailList" border style="width: 100%">
-                <!-- Image -->
+            <div>
+                <el-table :data="detail.detailList" border style="width: 100%">
+                    <!-- Image -->
                 <el-table-column label="图片" width="90" align="center">
                     <template #default="{ row }">
                         <el-image
@@ -96,15 +97,16 @@
 
             <!-- Summary Footer -->
             <div class="summary-footer">
-                <div
-                    class="summary-row"
-                    v-if="detail.discountList.length > 0"
-                    v-for="(item, index) in detail.discountList"
-                    :key="index"
-                >
-                    <span>{{ item.discountActivityMsg || '-' }}:</span>
-                    <span class="amount red">- ¥{{ item.discountMoney }}</span>
-                </div>
+                <template v-if="detail.discountList && detail.discountList.length > 0">
+                    <div
+                        class="summary-row"
+                        v-for="(item, index) in detail.discountList"
+                        :key="index"
+                    >
+                        <span>{{ item.discountActivityMsg || '-' }}:</span>
+                        <span class="amount red">- ¥{{ item.discountMoney }}</span>
+                    </div>
+                </template>
                 <div class="summary-row" v-if="detail.reduceMoney > 0">
                     <span>分享降价:</span>
                     <span class="amount red">- ¥{{ detail.reduceMoney }}</span>
@@ -120,6 +122,7 @@
                     >
                 </div>
             </div>
+            </div>
         </ele-card>
     </div>
 </template>

src/views/mallOrder/refund/components/page-search.vue

@@ -27,12 +27,13 @@
             label: '状态',
             prop: 'status',
             options: [
-                { label: '申请退款', value: 1 },
-                { label: '审核通过', value: 2 },
-                { label: '审核驳回', value: 3 },
-                { label: '超时关闭', value: 4 },
-                { label: '卖家已发货', value: 5 },
-                { label: '已完成', value: 6 }
+                { label: '进行中订单', value: '0' },
+                { label: '待商家处理', value: '1' },
+                { label: '待商家收货', value: '2' },
+                { label: '待买家发货', value: '3' },
+                { label: '已拒绝退款', value: '4' },
+                { label: '退款成功', value: '5' },
+                { label: '退款取消', value: '6' }
             ]
         },
         {
@@ -42,7 +43,8 @@
             options: [
                 { label: '极速退款', value: '0' },
                 { label: '退货退款', value: '1' },
-                { label: '仅退款', value: '2' }
+                { label: '仅退款', value: '2' },
+                { label: '缺货退款', value: '3' }
             ]
         },
         {

src/views/mallOrder/refund/components/refund-detail-dialog.vue

@@ -8,25 +8,27 @@
                     <div class="status-info">
                         <div class="text-xl font-bold mb-2 flex items-center">
                             <span>{{ getStatusText(form.status) }}</span>
+                            <span class="text-orange-500 text-sm ml-3 font-normal"
+                                v-if="['1', '2', '3', '7', '8', '9'].includes(String(form.status))">还剩 {{ form.countDown
+                                    || '1天11时19分' }}</span>
                         </div>
                         <div class="text-sm text-gray-500 space-y-1">
                             <template v-if="['1', '3'].includes(String(form.status))">
-                                <div>{{
-                                    isRefundOnly
-                                        ? '请及时联系买家协商退款事宜'
-                                        : '请及时联系买家协商退货事宜'
-                                }}</div>
+                                <div>请及时联系买家协商退货事宜</div>
                                 <div v-if="form.refundType == 1">该退款为卖家原因退款，若您同意买家退货，退货运费将由您承担。</div>
                             </template>
 
-                            <template v-else-if="
-                                String(form.status) === '7' && String(form.refundType) === '1'
-                            ">
-                                <div>买家已发货，请及时验货并处理退款</div>
+                            <template v-else-if="String(form.status) === '8'">
+                                <div>收到买家退货时，请验货后同意退款</div>
+                                <div>如果买家在超时结束前未退货，退货申请将自动关闭</div>
+                            </template>
+
+                            <template v-else-if="String(form.status) === '9'">
+                                <div>买家已退货，收到买家退货时，请验货后同意退款</div>
                             </template>
 
                             <template v-else-if="String(form.status) === '7'">
-                                <div>买家已发货，请及时验货并处理退款</div>
+                                <div>因买家信誉良好，平台已优先垫付退款给买家</div>
                             </template>
 
                             <template v-else-if="String(form.status) === '2'">
@@ -34,31 +36,20 @@
                                 <div>如果买家超时未响应，退款申请将自动关闭</div>
                             </template>
 
-                            <template v-else-if="String(form.status) === '8'">
+                            <template v-else-if="String(form.status) === '10'">
                                 <div>退款成功时间：{{ form.finishTime }}</div>
-                                <div>退款金额：¥
-                                    {{
-                                        form.refundMoneyFinal ||
-                                        form.refundMoney
-                                    }}元</div>
-                                <div>退款规则：符合未发货秒退
+                                <div>退款金额：¥ {{ form.refundMoneyFinal || form.refundMoney }}元</div>
+                                <div>退款规则：{{ form.shopStatus === '1' ? '符合未发货秒退' : '不符合未发货秒退' }}
                                 </div>
                             </template>
                         </div>
                     </div>
-                    <div style="min-width: 600px" class="pt-2">
-                        <el-steps :active="currentStep" align-center finish-status="success" :process-status="processStatus">
-                            <template v-if="isRefundOnly">
-                                <el-step :title="`买家申请${getRefundTypeText(form.refundType)}`" />
-                                <el-step title="卖家处理退款申请" />
-                                <el-step title="退款完毕" />
-                            </template>
-                            <template v-else>
-                                <el-step title="买家申请退货退款" />
-                                <el-step title="卖家处理退货申请" />
-                                <el-step title="买家退货" />
-                                <el-step title="退款完毕" />
-                            </template>
+                    <div style="min-width:600px" class="pt-2">
+                        <el-steps :active="currentStep" align-center finish-status="success">
+                            <el-step title="买家申请退货退款" />
+                            <el-step title="卖家处理退货申请" />
+                            <el-step title="买家退货" />
+                            <el-step title="退款完毕" />
                         </el-steps>
                     </div>
                 </div>
@@ -79,7 +70,7 @@
                     </div>
                     <div class="info-item">
                         <span class="label">申请件数：</span>
-                        <span class="value">{{ form.totalNum }}</span>
+                        <span class="value">{{ form.totalNum || refundCount }}</span>
                     </div>
                     <div class="info-item">
                         <span class="label">退款原因：</span>
@@ -87,15 +78,11 @@
                     </div>
                     <div class="info-item">
                         <span class="label">要求：</span>
-                        <span class="value">{{
-                            getRefundTypeText(form.refundType)
-                            }}</span>
+                        <span class="value">{{ getRefundTypeText(form.refundType) }}</span>
                     </div>
                     <div class="info-item">
                         <span class="label">货物状态：</span>
-                        <span class="value">{{
-                            getShopStatusText(form.shopStatus)
-                            }}</span>
+                        <span class="value">{{ getShopStatusText(form.shopStatus) }}</span>
                     </div>
                     <div class="info-item">
                         <span class="label">买家留言：</span>
@@ -118,10 +105,8 @@
                             <el-image :src="prod.cover" class="w-16 h-16 rounded mr-2" fit="cover" />
                             <div class="flex-1">
                                 <div class="text-sm font-bold truncate-2-lines">{{ prod.bookName }}</div>
-                                <div class="text-xs text-gray-500 mt-1">{{
-                                    prod.isbn
-                                    }}</div>
-                                <div class="text-xs text-gray-500 mt-1">{{ prod.payPrice }} × {{ prod.num }}</div>
+                                <div class="text-xs text-gray-500 mt-1">{{ prod.isbn }}</div>
+                                <div class="text-xs text-gray-500 mt-1">{{ prod.price }} × {{ prod.refundNum }}</div>
                             </div>
                         </div>
                     </div>
@@ -130,12 +115,12 @@
                         <span class="label">买家：</span>
                         <div class="flex items-center">
                             <el-avatar :size="20" :src="form.avatar" class="mr-2" />
-                            <span class="value text-blue-500">{{ form.userNick }}/{{ form.userId }}</span>
+                            <span class="value text-blue-500">{{ form.userNick }}</span>
                         </div>
                     </div>
                     <div class="info-item">
                         <span class="label">申请退款：</span>
-                        <span class="value">¥{{ form.refundMoney || '0.00' }}</span>
+                        <span class="value">¥{{ form.refundMoney || form.refundMoney }}</span>
                     </div>
                     <div class="info-item">
                         <span class="label">邮费：</span>
@@ -151,9 +136,7 @@
                     </div>
                     <div class="info-item">
                         <span class="label">订单编号：</span>
-                        <span class="value text-blue-500">{{
-                            form.originOrderId
-                            }}</span>
+                        <span class="value text-blue-500">{{ form.originOrderId }}</span>
                         <el-icon class="copy-icon" @click="handleCopy(form.originOrderId)">
                             <CopyDocument />
                         </el-icon>
@@ -191,27 +174,18 @@
                             </div>
                             <div class="content-wrapper flex-1">
                                 <div class="header flex justify-between items-start mb-1">
-                                    <span class="name font-bold text-gray-800">{{
-                                        activity.userName ||
-                                        (activity.userType === '2'
-                                            ? '客服'
-                                            : '用户')
-                                    }}</span>
-                                    <span class="time text-xs text-gray-400">{{
-                                        activity.createTime
-                                        }}</span>
+                                    <span class="name font-bold text-gray-800">{{ activity.userName ||
+                                        (activity.userType === '2' ?
+                                            '客服' : '用户') }}</span>
+                                    <span class="time text-xs text-gray-400">{{ activity.createTime }}</span>
                                 </div>
                                 <div class="main-content text-sm text-gray-600">
                                     <div v-if="activity.title" class="font-bold mb-1 text-gray-900">{{ activity.title }}
                                     </div>
-                                    <div class="whitespace-pre-wrap mb-2">{{
-                                        activity.content
-                                        }}</div>
-
-                                    <div v-if="
-                                        activity.imgList &&
-                                        activity.imgList.length
-                                    " class="mt-2 flex flex-wrap gap-2">
+                                    <div class="whitespace-pre-wrap mb-2">{{ activity.content }}</div>
+
+                                    <div v-if="activity.imgList && activity.imgList.length"
+                                        class="mt-2 flex flex-wrap gap-2">
                                         <el-image v-for="(img, i) in activity.imgList" :key="i" :src="img"
                                             class="w-20 h-20 rounded border border-gray-200"
                                             :preview-src-list="activity.imgList" fit="cover" />
@@ -224,319 +198,274 @@
             </div>
 
             <div class="policy-tip mt-4 text-xs text-gray-400">
-                <template v-if="isRefundOnly">
-                    · 如果您同意，请点击“同意退款”，退款将立即退到买家账户。<br />
-                    · 如果您拒绝，买家可以申请客服介入。<br />
-                    · 如果您逾期未处理申请，视作同意买家申请。<br />
-                </template>
-                <template v-else>
-                    · 如果您同意，请点击“同意退货”，将正确退货地址发给买家。<br />
-                    · 如果您拒绝，买家可以申请客服介入。<br />
-                    ·
-                    如果您逾期未处理申请，视作同意买家申请。系统会自动将当前交易的退货地址发给买家<br />
-                </template>
+                · 如果您同意，请点击“同意退货”，将正确退货地址发给买家。<br>
+                · 如果您拒绝，买家可以申请客服介入。<br>
+                · 如果您逾期未处理申请，视作同意买家申请。系统会自动将当前交易的退货地址发给买家<br>
             </div>
+
         </div>
 
         <template #footer>
             <div class="flex justify-center gap-4">
-                <el-button :disabled="!canOperate && !['4', '5'].includes(String(form.status))">备注</el-button>
-                <el-button @click="handleRefuse" :disabled="!canOperate">{{
-                    isRefundOnly ? '拒绝退款申请' : '拒绝退货申请'
-                    }}</el-button>
-                <el-button @click="handleAgree" :disabled="!canOperate">{{
-                    isRefundOnly ? '同意退款' : '同意退货'
-                    }}</el-button>
-                <el-button type="primary" @click="handleNegotiate" :disabled="!canOperate && !['4', '5'].includes(String(form.status))">与买家协商</el-button>
+                <el-button>备注</el-button>
+                <el-button @click="handleRefuse" :disabled="!canOperate">拒绝退货申请</el-button>
+                <el-button @click="handleAgree" :disabled="!canOperate">同意退货</el-button>
+                <el-button type="primary" @click="handleNegotiate" :disabled="!canOperate">与买家协商</el-button>
             </div>
         </template>
         <negotiation-apply-dialog v-model="negotiationDialogVisible" :refund-order-id="form.refundOrderId"
             :max-refund-amount="Number(form.refundMoney) || 0" @success="handleNegotiationSuccess" />
         <refuse-dialog ref="refuseDialogRef" @success="handleNegotiationSuccess" />
         <agree-dialog ref="agreeDialogRef" @success="handleNegotiationSuccess" />
-        <confirm-refund-dialog ref="confirmRefundDialogRef" @success="handleNegotiationSuccess" />
     </ele-modal>
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
-import { EleMessage } from 'ele-admin-plus/es';
-import { CopyDocument } from '@element-plus/icons-vue';
-import { useClipboard } from '@vueuse/core';
-import request from '@/utils/request';
-import NegotiationApplyDialog from './negotiation-apply-dialog.vue';
-import RefuseDialog from './refuse-dialog.vue';
-import AgreeDialog from './agree-dialog.vue';
-import ConfirmRefundDialog from './confirm-refund-dialog.vue';
-
-const visible = defineModel({ type: Boolean });
-const loading = ref(false);
-const form = ref({});
-const historyList = ref([]);
-const { copy } = useClipboard();
-const negotiationDialogVisible = ref(false);
-const refuseDialogRef = ref(null);
-const agreeDialogRef = ref(null);
-const confirmRefundDialogRef = ref(null);
-
-const isRefundOnly = computed(() => ['0', '2'].includes(String(form.value.refundType)));
-
-const refundCount = computed(() => {
-    if (form.value.totalNum) return form.value.totalNum;
-    if (!form.value.detailList) return 0;
-    return form.value.detailList.reduce(
-        (sum, item) => sum + (Number(item.refundNum) || 0),
-        0
-    );
-});
-
-// 进度条状态
-const processStatus = computed(() => {
-    const status = Number(form.value.status);
-    if ([5, 6].includes(status)) {
-        return 'error';
-    }
-    return 'process';
-});
-
-// 当前步骤
-const currentStep = computed(() => {
-    const status = Number(form.value.status);
-    if (isRefundOnly.value) {
-        // 1:申请, 2,3:协商中, 5:驳回, 6:超时关闭 -> 停在第2步(卖家处理)
-        if ([1, 2, 3, 5, 6].includes(status)) return 1;
-        // 7:买家已发货 -> 停在第3步(对于仅退款可能不常见)
-        if (status === 7) return 2;
-        // 4:审核通过, 8:已完成 -> 全绿(第3步完成)
-        if ([4, 8].includes(status)) return 3;
+    import { ref, reactive, computed } from 'vue';
+    import { EleMessage } from 'ele-admin-plus/es';
+    import { CopyDocument } from '@element-plus/icons-vue';
+    import { useClipboard } from '@vueuse/core';
+    import request from '@/utils/request';
+    import NegotiationApplyDialog from './negotiation-apply-dialog.vue';
+    import RefuseDialog from './refuse-dialog.vue';
+    import AgreeDialog from './agree-dialog.vue';
+
+    const visible = defineModel({ type: Boolean });
+    const loading = ref(false);
+    const form = ref({});
+    const historyList = ref([]);
+    const { copy } = useClipboard();
+    const negotiationDialogVisible = ref(false);
+    const refuseDialogRef = ref(null);
+    const agreeDialogRef = ref(null);
+
+    const refundCount = computed(() => {
+        if (form.value.totalNum) return form.value.totalNum;
+        if (!form.value.detailList) return 0;
+        return form.value.detailList.reduce((sum, item) => sum + (Number(item.refundNum) || 0), 0);
+    });
+
+    // 当前步骤
+    const currentStep = computed(() => {
+        const status = Number(form.value.status);
+        // 1-申请退款
+        if (status === 1) return 1;
+        // 2-协商中待用户确认 3-协商中待商家确认 -> 都在协商/处理中
+        if (status === 2 || status === 3) return 2;
+        // 7-卖家已发货 -> 可能是退货流程的一部分
+        if (status === 7) return 3;
+        // 4-审核通过 5-审核驳回 6-超时关闭 -> 结束状态
+        if ([4, 5, 6].includes(status)) return 4;
         return 1;
-    }
-
-    // 退货退款
-    // 1:申请, 2,3:协商中, 5:驳回, 6:超时关闭 -> 停在第2步(卖家处理)
-    if ([1, 2, 3, 5, 6].includes(status)) return 1;
-    // 4:审核通过(商家同意退货，等待买家退货) -> 停在第3步(买家退货)
-    if (status === 4) return 2;
-    // 7:买家已发货 -> 停在第4步(退款完毕，等待商家处理打款，实际业务这往往是个过渡态)
-    if (status === 7) return 3;
-    // 8:已完成 -> 全绿(第4步完成)
-    if (status === 8) return 4;
-    return 1;
-});
-
-// 是否可操作主流程（拒绝、同意）
-const canOperate = computed(() => {
-    return ['1', '3'].includes(String(form.value.status));
-});
-
-const handleOpen = (row) => {
-    if (row && row.refundOrderId) {
-        visible.value = true;
-        loading.value = true;
-
-        request
-            .get(`/shop/shopOrder/getRefundInfo/${row.refundOrderId}`)
-            .then((res) => {
-                if (res.data.code === 200) {
-                    const data = res.data.data || {};
-                    form.value = data;
-                    if (!form.value.orderTime) {
-                        form.value.orderTime = form.value.createTime;
-                    }
-                    // 处理协商历史数据
-                    if (
-                        data.complaintsLogList &&
-                        data.complaintsLogList.length
-                    ) {
-                        historyList.value = data.complaintsLogList;
+    });
+
+    // 是否可操作（仅在待商家处理状态下可用）
+    const canOperate = computed(() => {
+        // 1: 申请退款, 3: 协商中待商家确认
+        return ['1', '3'].includes(String(form.value.status));
+    });
+
+    const handleOpen = (row) => {
+        if (row && row.refundOrderId) {
+            visible.value = true;
+            loading.value = true;
+
+            request.get(`/shop/shopOrder/getRefundInfo/${row.refundOrderId}`)
+                .then(res => {
+                    if (res.data.code === 200) {
+                        const data = res.data.data || {};
+                        form.value = data;
+                        if (!form.value.orderTime) {
+                            form.value.orderTime = form.value.createTime;
+                        }
+                        // 处理协商历史数据
+                        if (data.complaintsLogList && data.complaintsLogList.length) {
+                            historyList.value = data.complaintsLogList;
+                        } else {
+                            historyList.value = [];
+                        }
                     } else {
-                        historyList.value = [];
+                        EleMessage.error(res.data.msg || '获取详情失败');
+                        fallbackToRow(row);
                     }
-                } else {
-                    EleMessage.error(res.data.msg || '获取详情失败');
+                })
+                .catch(e => {
+                    console.error(e);
+                    EleMessage.error('获取详情失败');
                     fallbackToRow(row);
-                }
-            })
-            .catch((e) => {
-                console.error(e);
-                EleMessage.error('获取详情失败');
-                fallbackToRow(row);
-            })
-            .finally(() => {
-                loading.value = false;
-            });
-    } else if (row) {
-        visible.value = true;
-        fallbackToRow(row);
-    }
-};
+                })
+                .finally(() => {
+                    loading.value = false;
+                });
+        } else if (row) {
+            visible.value = true;
+            fallbackToRow(row);
+        }
+    };
 
-const fallbackToRow = (row) => {
-    form.value = JSON.parse(JSON.stringify(row));
-    if (!form.value.orderTime) {
-        form.value.orderTime = form.value.createTime;
-    }
-    historyList.value = [];
-
-    // Fallback时也添加初始申请记录
-    const startEvent = {
-        createTime: form.value.createTime,
-        userName: form.value.userNick,
-        userType: '1',
-        imgPath: form.value.avatar || '',
-        title: '发起了退款申请',
-        content: `货物状态：${getShopStatusText(form.value.shopStatus)}\n原因：${form.value.refundReason}\n金额：¥${form.value.refundMoney}\n说明：${form.value.description || '无'}`,
-        imgList: []
+    const fallbackToRow = (row) => {
+        form.value = JSON.parse(JSON.stringify(row));
+        if (!form.value.orderTime) {
+            form.value.orderTime = form.value.createTime;
+        }
+        historyList.value = [];
+
+        // Fallback时也添加初始申请记录
+        const startEvent = {
+            createTime: form.value.createTime,
+            userName: form.value.userNick,
+            userType: '1',
+            imgPath: form.value.avatar || '',
+            title: '发起了退款申请',
+            content: `货物状态：${getShopStatusText(form.value.shopStatus)}\n原因：${form.value.refundReason}\n金额：¥${form.value.refundMoney}\n说明：${form.value.description || '无'}`,
+            imgList: []
+        };
+        historyList.value.push(startEvent);
     };
-    historyList.value.push(startEvent);
-};
-
-const handleCopy = async (text) => {
-    try {
-        await copy(text);
-        EleMessage.success('复制成功');
-    } catch (e) {
-        EleMessage.error('复制失败');
-    }
-};
-
-const mockHistory = (row) => {
-    // 移除模拟数据
-};
-
-const getRefundTypeText = (type) => {
-    const map = { 0: '极速退款', 1: '退货退款', 2: '仅退款' };
-    return map[type] || type;
-};
-
-const getStatusText = (status) => {
-    const key = String(status);
-    const map = {
-        1: '申请退款',
-        2: '协商中待用户确认',
-        3: '协商中待商家确认',
-        4: '审核通过',
-        5: '审核驳回',
-        6: '超时关闭',
-        7: '买家已发货',
-        8: '已完成'
+
+    const handleCopy = async (text) => {
+        try {
+            await copy(text);
+            EleMessage.success('复制成功');
+        } catch (e) {
+            EleMessage.error('复制失败');
+        }
     };
-    return map[key] || status;
-};
 
-const getShopStatusText = (status) => {
-    const map = { 1: '未收到货', 2: '已收到货' };
-    return map[status] || '-';
-};
+    const mockHistory = (row) => {
+        // 移除模拟数据
+    };
 
-const handleNegotiate = () => {
-    negotiationDialogVisible.value = true;
-};
+    const getRefundTypeText = (type) => {
+        const map = { '0': '极速退款', '1': '退货退款', '2': '仅退款' };
+        return map[type] || type;
+    };
 
-const handleNegotiationSuccess = () => {
-    handleOpen(form.value);
-};
+    const getStatusText = (status) => {
+        const map = {
+            '1': '请处理退货申请', // 原 申请退款
+            '2': '请等待买家响应', // 协商中待用户确认
+            '3': '请处理退货申请', // 协商中待商家确认
+            '4': '审核通过',
+            '5': '审核驳回',
+            '6': '超时关闭',
+            '7': '拦截快递后处理退款', // 卖家已发货
+            '8': '请等待买家退货',
+            '9': '请确认收货',
+            '10': '退款成功'
+        };
+        return map[status] || status;
+    };
 
-const handleRefuse = () => {
-    if (refuseDialogRef.value) {
-        refuseDialogRef.value.open(form.value.refundOrderId);
-    }
-};
-
-const handleAgree = () => {
-    if (isRefundOnly.value) {
-        confirmRefundDialogRef.value?.open(
-            form.value.refundOrderId,
-            form.value.refundMoneyFinal || form.value.refundMoney
-        );
-        return;
-    }
-    agreeDialogRef.value?.open(form.value.refundOrderId);
-};
+    const getShopStatusText = (status) => {
+        const map = { '1': '未收到货', '2': '已收到货' };
+        return map[status] || '-';
+    };
 
-const handleLeaveMessage = () => {
-    EleMessage.info('点击了我要留言');
-};
+    const handleNegotiate = () => {
+        negotiationDialogVisible.value = true;
+    };
 
-defineExpose({
-    handleOpen
-});
-</script>
+    const handleNegotiationSuccess = () => {
+        // Refresh data
+        handleOpen(form.value);
+    };
 
-<style scoped lang="scss">
-.status-bar {
-    background: #fff;
-    padding: 15px;
-    border-bottom: 1px solid #eee;
-}
+    const handleRefuse = () => {
+        if (refuseDialogRef.value) {
+            refuseDialogRef.value.open(form.value.refundOrderId);
+        }
+    };
 
-.detail-container {
-    gap: 20px;
+    const handleAgree = () => {
+        if (agreeDialogRef.value) {
+            agreeDialogRef.value.open(form.value.refundOrderId);
+        }
+    };
 
-    .section {
-        background: #fff;
+    const handleLeaveMessage = () => {
+        EleMessage.info('点击了我要留言');
+    };
 
-        .section-title {
-            font-size: 16px;
-            font-weight: bold;
-            margin-bottom: 15px;
-            color: #333;
-            padding-left: 10px;
-            border-left: 3px solid #409eff;
-            line-height: 1;
-        }
+    defineExpose({
+        handleOpen
+    });
+</script>
 
-        .info-item {
-            margin-bottom: 10px;
-            font-size: 13px;
-            display: flex;
+<style scoped lang="scss">
+    .status-bar {
+        background: #fff;
+        padding: 15px;
+        border-bottom: 1px solid #eee;
+    }
 
-            .label {
-                color: #999;
-                width: 70px;
-                flex-shrink: 0;
-            }
+    .detail-container {
+        gap: 20px;
+
+        .section {
+            background: #fff;
 
-            .value {
+            .section-title {
+                font-size: 16px;
+                font-weight: bold;
+                margin-bottom: 15px;
                 color: #333;
-                flex: 1;
-                word-break: break-all;
+                padding-left: 10px;
+                border-left: 3px solid #409eff;
+                line-height: 1;
             }
 
-            .copy-icon {
-                cursor: pointer;
-                color: #409eff;
-                margin-left: 5px;
-                font-size: 14px;
+            .info-item {
+                margin-bottom: 10px;
+                font-size: 13px;
+                display: flex;
+
+                .label {
+                    color: #999;
+                    width: 70px;
+                    flex-shrink: 0;
+                }
+
+                .value {
+                    color: #333;
+                    flex: 1;
+                    word-break: break-all;
+                }
+
+                .copy-icon {
+                    cursor: pointer;
+                    color: #409eff;
+                    margin-left: 5px;
+                    font-size: 14px;
+                }
             }
         }
-    }
 
-    .transaction-info {
-        padding: 0 10px;
-        border-left: 1px solid #eee;
-        border-right: 1px solid #eee;
-    }
+        .transaction-info {
+            padding: 0 10px;
+            border-left: 1px solid #eee;
+            border-right: 1px solid #eee;
+        }
 
-    .history-info {
-        padding-left: 10px;
+        .history-info {
+            padding-left: 10px;
+        }
     }
-}
 
-.history-card {
-    background: #f9f9f9;
-    padding: 10px;
-    border-radius: 4px;
+    .history-card {
+        background: #f9f9f9;
+        padding: 10px;
+        border-radius: 4px;
+
+        .detail-rows {
+            line-height: 1.6;
+        }
+    }
 
-    .detail-rows {
-        line-height: 1.6;
+    .truncate-2-lines {
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+        overflow: hidden;
     }
-}
-
-.truncate-2-lines {
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-    overflow: hidden;
-}
-</style>
+</style>

src/views/mallOrder/refund/components/refund-item.vue

@@ -6,15 +6,9 @@
             <el-tag type="success" size="small" class="mr-2" effect="plain">
                 {{ getRefundTypeText(item.refundType) }}
             </el-tag>
-            <span class="mr-4 text-black-600"
-                >退款编号: {{ item.refundOrderId }}</span
-            >
-            <span class="mr-4 text-black-600"
-                >原订单编号: {{ item.originOrderId }}</span
-            >
-            <span class="mr-4 text-black-600"
-                >申请时间: {{ item.createTime }}</span
-            >
+            <span class="mr-4 text-black-600">退款编号: {{ item.refundOrderId }}</span>
+            <span class="mr-4 text-black-600">原订单编号: {{ item.originOrderId }}</span>
+            <span class="mr-4 text-black-600">申请时间: {{ item.createTime }}</span>
             <span class="mr-4 text-black-600" v-if="item.cancelStatus == 2">
                 <el-tag type="info" size="small">已撤销</el-tag>
             </span>
@@ -24,35 +18,22 @@
         <div class="refund-body">
             <!-- Product Info (Flex 3) -->
             <div class="col-product-wrapper">
-                <div
-                    v-for="(product, idx) in item.detailList"
-                    :key="idx"
-                    class="product-row"
-                >
+                <div v-for="(product, idx) in item.detailList" :key="idx" class="product-row">
                     <div class="product-info">
-                        <el-image
-                            :src="product.cover"
-                            class="product-img"
-                            fit="cover"
-                        />
+                        <el-image :src="product.cover" class="product-img" fit="cover" />
                         <div class="product-detail">
                             <div class="product-title">{{
                                 product.bookName
-                            }}</div>
+                                }}</div>
                             <div class="product-isbn">
                                 ISBN:
                                 <span class="link">{{ product.isbn }}</span>
-                                <el-icon
-                                    class="cursor-pointer ml-1"
-                                    @click="handleCopy(product.isbn)"
-                                >
+                                <el-icon class="cursor-pointer ml-1" @click="handleCopy(product.isbn)">
                                     <CopyDocument />
                                 </el-icon>
                             </div>
                             <div class="product-price">
-                                <span class="mr-2"
-                                    >退回数量: {{ product.refundNum }}</span
-                                >
+                                <span class="mr-2">退回数量: {{ product.refundNum || product.num }}</span>
                                 <span>单价: ¥ {{ product.price }}</span>
                             </div>
                         </div>
@@ -63,10 +44,7 @@
             <!-- Refund Amount (Flex 1) -->
             <div class="col-merged col-amount">
                 <div class="amount">申请: ¥ {{ item.refundMoney }}</div>
-                <div
-                    class="final-amount text-green-500"
-                    v-if="item.refundMoneyFinal"
-                    >实退: ¥ {{ item.refundMoneyFinal }}
+                <div class="final-amount text-green-500" v-if="item.refundMoneyFinal">实退: ¥ {{ item.refundMoneyFinal }}
                 </div>
                 <div class="money-status text-xs text-gray-400 mt-1">
                     {{ getMoneyStatusText(item.moneyStatus) }}
@@ -78,280 +56,245 @@
                 <div class="buyer-info">
                     <el-avatar :size="30" :src="item.avatar" />
                     <div class="buyer-name">{{ item.userNick }}</div>
-                    <div class="buyer-id text-xs text-gray-400"
-                        >ID: {{ item.userId }}</div
-                    >
+                    <div class="buyer-id text-xs text-gray-400">ID: {{ item.userId }}</div>
                 </div>
             </div>
 
             <!-- Reason (Flex 1) -->
             <div class="col-merged col-reason">
                 <div class="font-bold">{{ item.refundReason }}</div>
-                <div class="text-xs text-gray-500 mt-1"
-                    >货物状态: {{ getShopStatusText(item.shopStatus) }}</div
-                >
+                <div class="text-xs text-gray-500 mt-1">货物状态: {{ getShopStatusText(item.shopStatus) }}</div>
             </div>
 
             <!-- Logistics (Flex 1.5) -->
-            <div
-                class="col-merged col-logistics flex flex-col justify-center items-center w-full"
-            >
-                <div
-                    class="logistics-row flex justify-center items-center mb-2 w-full"
-                >
-                    <span class="text-gray-600">商家发货：已收货</span>
+            <div class="col-merged col-logistics flex flex-col justify-center items-center w-full">
+                <div class="logistics-row flex justify-center items-center mb-2 w-full">
+                    <span class="text-gray-600">商家发货：{{ item.shopStatus == 2 ? '已收货' : '未发货' }}</span>
                 </div>
-                <div
-                    class="logistics-row flex justify-center items-center w-full"
-                    v-if="String(item.refundType) === '1'"
-                >
-                    <span class="text-gray-600"
-                        >买家退货：{{ getBuyerLogisticsStatus(item) }}</span
-                    >
+                <div class="logistics-row flex justify-center items-center w-full"
+                    v-if="String(item.refundType) === '1'">
+                    <span class="text-gray-600">买家退货：{{ getBuyerLogisticsStatus(item) }}</span>
                 </div>
             </div>
 
             <!-- Status (Flex 1) -->
             <div class="col-merged col-status">
                 <div class="text-red-500 font-bold mb-1">
-                    <dict-data
-                        code="shop_refund_status"
-                        v-model="item.status"
-                        type="text"
-                    />
-
-                    <el-button
-                        class="ml-2"
-                        type="primary"
-                        size="small"
-                        @click="$emit('confirm-refund', item)"
-                        v-if="item.status == 8 && item.moneyStatus == 1"
-                        >同意退款</el-button
-                    >
+                    <dict-data code="shop_refund_status" v-model="item.status" type="text" />
+
+                    <el-button class="ml-2" type="primary" size="small" @click="$emit('confirm-refund', item)"
+                        v-if="item.status == 8 && item.moneyStatus == 1">同意退款</el-button>
                 </div>
-                <el-button
-                    link
-                    type="primary"
-                    size="small"
-                    @click="$emit('view-detail', item)"
-                    >[查看详情]</el-button
-                >
+                <el-button link type="primary" size="small" @click="$emit('view-detail', item)">[查看详情]</el-button>
             </div>
 
             <!-- Action (Flex 1) -->
             <div class="col-merged col-action">
-                <div
-                    class="action-btn text-green-500"
-                    @click="$emit('push-sms', item)"
-                    >[推送短信]</div
-                >
-                <div
-                    class="action-btn text-orange-500"
-                    @click="$emit('send-packet', item)"
-                    >[发红包]</div
-                >
+                <div class="action-btn text-green-500" @click="$emit('push-sms', item)">[推送短信]</div>
+                <div class="action-btn text-orange-500" @click="$emit('send-packet', item)">[发红包]</div>
             </div>
         </div>
     </div>
 </template>
 
 <script setup>
-    import { CopyDocument } from '@element-plus/icons-vue';
-    import { EleMessage } from 'ele-admin-plus/es';
-    import { useClipboard } from '@vueuse/core';
-
-    const props = defineProps({
-        item: {
-            type: Object,
-            required: true
-        }
-    });
-
-    defineEmits([
-        'push-sms',
-        'send-packet',
-        'view-detail',
-        'view-logistics',
-        'confirm-refund'
-    ]);
-
-    const { copy } = useClipboard();
-
-    const handleCopy = async (text) => {
-        try {
-            await copy(text);
-            EleMessage.success('复制成功');
-        } catch (e) {
-            EleMessage.error('复制失败');
-        }
-    };
-
-    const getRefundTypeText = (type) => {
-        const map = {
-            0: '极速退款',
-            1: '退货退款',
-            2: '仅退款'
-        };
-        return map[type] || type;
-    };
-
-    const getShopStatusText = (status) => {
-        const map = {
-            1: '未收到货',
-            2: '已收到货'
-        };
-        return map[status] || '-';
+import { CopyDocument } from '@element-plus/icons-vue';
+import { EleMessage } from 'ele-admin-plus/es';
+import { useClipboard } from '@vueuse/core';
+
+const props = defineProps({
+    item: {
+        type: Object,
+        required: true
+    }
+});
+
+defineEmits([
+    'push-sms',
+    'send-packet',
+    'view-detail',
+    'view-logistics',
+    'confirm-refund'
+]);
+
+const { copy } = useClipboard();
+
+const handleCopy = async (text) => {
+    try {
+        await copy(text);
+        EleMessage.success('复制成功');
+    } catch (e) {
+        EleMessage.error('复制失败');
+    }
+};
+
+const getRefundTypeText = (type) => {
+    const map = {
+        0: '极速退款',
+        1: '退货退款',
+        2: '仅退款',
+        3: '缺货退款'
     };
+    return map[type] || type;
+};
 
-    const getBuyerLogisticsStatus = (item) => {
-        const status = String(item.status);
-        if (status === '7') return '运输中';
-        if (item.finishTime) return '已收货';
-        return '未发货';
+const getShopStatusText = (status) => {
+    const map = {
+        1: '未收到货',
+        2: '已收到货'
     };
-
-    const getMoneyStatusText = (status) => {
-        const map = {
-            1: '未退还',
-            2: '已退还',
-            3: '已到账'
-        };
-        return map[status] || '未退还';
+    return map[status] || '-';
+};
+
+const getBuyerLogisticsStatus = (item) => {
+    const status = String(item.status);
+    if (status === '7') return '运输中';
+    if (item.finishTime) return '已收货';
+    return '未发货';
+};
+
+const getMoneyStatusText = (status) => {
+    const map = {
+        1: '未退还',
+        2: '已退还',
+        3: '已到账'
     };
+    return map[status] || '未退还';
+};
 </script>
 
 <style lang="scss" scoped>
-    .refund-item {
-        border: 1px solid #ebeef5;
-        margin-bottom: 15px;
-        background: #fff;
-
-        .refund-header {
-            background-color: #f5f7fa;
-            padding: 8px 15px;
-            font-size: 13px;
-            display: flex;
-            align-items: center;
-            border-bottom: 1px solid #ebeef5;
-        }
+.refund-item {
+    border: 1px solid #ebeef5;
+    margin-bottom: 15px;
+    background: #fff;
+
+    .refund-header {
+        background-color: #f5f7fa;
+        padding: 8px 15px;
+        font-size: 13px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #ebeef5;
+    }
 
-        .refund-body {
+    .refund-body {
+        display: flex;
+        align-items: stretch;
+
+        .col-product-wrapper {
+            flex: 3;
             display: flex;
-            align-items: stretch;
+            flex-direction: column;
+            border-right: 1px solid #ebeef5;
 
-            .col-product-wrapper {
-                flex: 3;
+            .product-row {
                 display: flex;
-                flex-direction: column;
-                border-right: 1px solid #ebeef5;
+                padding: 15px;
+                border-bottom: 1px solid #ebeef5;
 
-                .product-row {
-                    display: flex;
-                    padding: 15px;
-                    border-bottom: 1px solid #ebeef5;
+                &:last-child {
+                    border-bottom: none;
+                }
 
-                    &:last-child {
-                        border-bottom: none;
+                .product-info {
+                    display: flex;
+                    width: 100%;
+
+                    .product-img {
+                        width: 80px;
+                        height: 80px;
+                        margin-right: 15px;
+                        border-radius: 4px;
+                        border: 1px solid #eee;
                     }
 
-                    .product-info {
-                        display: flex;
-                        width: 100%;
+                    .product-detail {
+                        font-size: 13px;
+                        flex: 1;
 
-                        .product-img {
-                            width: 80px;
-                            height: 80px;
-                            margin-right: 15px;
-                            border-radius: 4px;
-                            border: 1px solid #eee;
+                        .product-title {
+                            font-weight: 500;
+                            margin-bottom: 5px;
+                            color: #333;
                         }
 
-                        .product-detail {
-                            font-size: 13px;
-                            flex: 1;
-
-                            .product-title {
-                                font-weight: 500;
-                                margin-bottom: 5px;
-                                color: #333;
-                            }
-
-                            .product-isbn {
-                                color: #666;
-                                margin-bottom: 3px;
-                                font-size: 12px;
+                        .product-isbn {
+                            color: #666;
+                            margin-bottom: 3px;
+                            font-size: 12px;
 
-                                .link {
-                                    color: #409eff;
-                                }
+                            .link {
+                                color: #409eff;
                             }
+                        }
 
-                            .product-price {
-                                margin-top: 5px;
-                                color: #333;
-                            }
+                        .product-price {
+                            margin-top: 5px;
+                            color: #333;
                         }
                     }
                 }
             }
+        }
 
-            .col-merged {
-                border-right: 1px solid #ebeef5;
-                display: flex;
-                flex-direction: column;
-                justify-content: center;
-                align-items: center;
-                padding: 10px;
-                text-align: center;
-                font-size: 13px;
+        .col-merged {
+            border-right: 1px solid #ebeef5;
+            display: flex;
+            flex-direction: column;
+            justify-content: center;
+            align-items: center;
+            padding: 10px;
+            text-align: center;
+            font-size: 13px;
 
-                &:last-child {
-                    border-right: none;
-                }
+            &:last-child {
+                border-right: none;
+            }
 
-                &.col-amount {
-                    flex: 1;
-                }
+            &.col-amount {
+                flex: 1;
+            }
 
-                &.col-buyer {
-                    flex: 1;
-                }
+            &.col-buyer {
+                flex: 1;
+            }
 
-                &.col-reason {
-                    flex: 1;
-                }
+            &.col-reason {
+                flex: 1;
+            }
 
-                &.col-logistics {
-                    flex: 1.5;
-                    align-items: flex-start;
-                    padding-left: 15px;
+            &.col-logistics {
+                flex: 1.5;
+                align-items: flex-start;
+                padding-left: 15px;
 
-                    .logistics-row {
-                        display: flex;
-                        align-items: center;
-                        margin-bottom: 4px;
-                        color: #666;
-                    }
+                .logistics-row {
+                    display: flex;
+                    align-items: center;
+                    margin-bottom: 4px;
+                    color: #666;
                 }
+            }
 
-                &.col-status {
-                    flex: 1;
-                }
+            &.col-status {
+                flex: 1;
+            }
 
-                &.col-action {
-                    flex: 1;
-                }
+            &.col-action {
+                flex: 1;
             }
         }
+    }
 
-        .action-btn {
-            cursor: pointer;
-            margin-bottom: 5px;
-            font-size: 13px;
+    .action-btn {
+        cursor: pointer;
+        margin-bottom: 5px;
+        font-size: 13px;
 
-            &:hover {
-                opacity: 0.8;
-            }
+        &:hover {
+            opacity: 0.8;
         }
     }
+}
 </style>

src/views/mallOrder/refund/index.vue

@@ -73,12 +73,13 @@
             <!-- Tabs -->
             <el-tabs v-model="activeTab" @tab-click="handleTabClick">
                 <el-tab-pane label="全部" name="" />
-                <el-tab-pane label="申请退款" name="1" />
-                <el-tab-pane label="审核通过" name="2" />
-                <el-tab-pane label="审核驳回" name="3" />
-                <el-tab-pane label="超时关闭" name="4" />
-                <el-tab-pane label="卖家已发货" name="5" />
-                <el-tab-pane label="已完成" name="6" />
+                <el-tab-pane label="进行中订单" name="0" />
+                <el-tab-pane label="待商家处理" name="1" />
+                <el-tab-pane label="待商家收货" name="2" />
+                <el-tab-pane label="待买家发货" name="3" />
+                <el-tab-pane label="已拒绝退款" name="4" />
+                <el-tab-pane label="退款成功" name="5" />
+                <el-tab-pane label="退款取消" name="6" />
             </el-tabs>
 
             <!-- Table Header -->

src/views/profile/components/user-card.vue

@@ -1,7 +1,8 @@
 <template>
     <ele-card header="个人信息">
-        <div class="info-user">
-            <div class="info-user-avatar" @click="openCropper">
+        <div>
+            <div class="info-user">
+                <div class="info-user-avatar" @click="openCropper">
                 <el-avatar :size="100" :src="data.avatar" />
                 <el-icon class="info-user-avatar-icon">
                     <CloudUploadOutlined style="stroke-width: 3" />
@@ -69,6 +70,7 @@
             :modal-props="{ destroyOnClose: true }"
             @done="handleCrop"
         />
+        </div>
     </ele-card>
 </template>
 

src/views/recycleOrder/detail/index.vue

@@ -37,14 +37,16 @@
         </ele-card>
 
         <ele-card class="order-service" header="订单服务">
-            <el-tag size="large" style="margin-right: 20px">免费退回</el-tag>
-            <el-tag size="large" style="margin-right: 20px">72小时验</el-tag>
-            <el-tag size="large" style="margin-right: 20px">卖亏必赔</el-tag>
-            <el-tag size="large">极速打款</el-tag>
+            <div>
+                <el-tag size="large" style="margin-right: 20px">免费退回</el-tag>
+                <el-tag size="large" style="margin-right: 20px">72小时验</el-tag>
+                <el-tag size="large" style="margin-right: 20px">卖亏必赔</el-tag>
+                <el-tag size="large">极速打款</el-tag>
+            </div>
         </ele-card>
 
         <ele-card class="order-note" header="审核计价说明">
-            品相良好：按原始回收折扣计价；品相一般：按原始回收折扣*0.7计价；品相极差：不收。
+            <div>品相良好：按原始回收折扣计价；品相一般：按原始回收折扣*0.7计价；品相极差：不收。</div>
         </ele-card>
         <ele-card class="order-freight" header="物流动态">
             <orderFreightStatus :records="detail.trackingVoList || []" />

src/views/recycleOrder/needReturned/refund-detail.vue

@@ -46,14 +46,16 @@
         </ele-card>
 
         <ele-card class="order-service" header="订单服务">
-            <el-tag size="large" style="margin-right: 20px">免费退回</el-tag>
-            <el-tag size="large" style="margin-right: 20px">72小时验</el-tag>
-            <el-tag size="large" style="margin-right: 20px">卖亏必赔</el-tag>
-            <el-tag size="large">极速打款</el-tag>
+            <div>
+                <el-tag size="large" style="margin-right: 20px">免费退回</el-tag>
+                <el-tag size="large" style="margin-right: 20px">72小时验</el-tag>
+                <el-tag size="large" style="margin-right: 20px">卖亏必赔</el-tag>
+                <el-tag size="large">极速打款</el-tag>
+            </div>
         </ele-card>
 
         <ele-card class="order-note" header="审核计价说明">
-            品相良好：按原始回收折扣计价；品相一般：按原始回收折扣*0.7计价；品相极差：不收。
+            <div>品相良好：按原始回收折扣计价；品相一般：按原始回收折扣*0.7计价；品相极差：不收。</div>
         </ele-card>
         <ele-card class="order-freight" header="物流动态">
             <orderFreightStatus :records="detail.trackingVoList" />