feat(订单详情): 在订单来源字段显示具体小程序类型和图标

根据订单来源字段 orderFrom 的值动态显示"微信小程序"、"支付宝小程序"或默认的"商城小程序"
为微信和支付宝小程序订单添加对应的平台图标，提升用户识别度

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

@@ -10,7 +10,14 @@
                     </div>
                     <div class="info-item">
                         <span class="label">订单来源：</span>
-                        <span class="value">商城小程序</span>
+                        <span class="value">
+                            <span v-if="detail.orderFrom == 1">微信小程序</span>
+                            <span v-else-if="detail.orderFrom == 2">支付宝小程序</span>
+                            <span v-else>商城小程序</span>
+                            <el-image v-if="[1, 2].includes(detail.orderFrom)"
+                                :src="detail.orderFrom == 2 ? alipayIcon : wxIcon"
+                                style="width: 16px; height: 16px; margin-left: 4px; vertical-align: text-bottom;" />
+                        </span>
                     </div>
                     <div class="info-item">
                         <span class="label">支付渠道：</span>
@@ -111,6 +118,8 @@
     import { Lightning } from '@element-plus/icons-vue';
     import { EleMessage } from 'ele-admin-plus/es';
     import { ref } from 'vue';
+    import wxIcon from '@/assets/wx.png';
+    import alipayIcon from '@/assets/alipay.png';
 
     const props = defineProps({
         detail: {

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

@@ -6,11 +6,19 @@
             <span class="mr-4">订单编号: {{ order.orderId }} <el-button link type="primary" size="small"
                     @click="handleCopy(order.orderId)">复制</el-button></span>
             <span class="mr-4">创建时间: {{ order.createTime }}</span>
-            <span class="mr-4">支付渠道: 
+            <span class="mr-4">支付渠道:
                 <dict-data v-if="order.payType" code="shop_order_pay_type" type="text" :model-value="order.payType" />
                 <span v-else>-</span>
             </span>
-            <span class="mr-4">订单来源: 商城小程序</span>
+            <span class="mr-4">
+                订单来源:
+                <span v-if="order.orderFrom == 1">微信小程序</span>
+                <span v-else-if="order.orderFrom == 2">支付宝小程序</span>
+                <span v-else>商城小程序</span>
+                <el-image :src="order.orderFrom == 2 ? alipayIcon : wxIcon"
+                    v-if="order.orderFrom == 1 || order.orderFrom == 2"
+                    style="width: 16px; height: 16px; margin-left: 4px; vertical-align: text-bottom;" />
+            </span>
             <span class="flag-icon" v-if="order.flag"><el-icon>
                     <Flag />
                 </el-icon></span>
@@ -33,15 +41,15 @@
                             </div>
                             <div class="product-tags">
                                 <span class="tag">回收折扣: {{ product.discount || 1 }}折</span>
-                                <span class="tag success">(回收状态: {{ getRecycleStatusText(product.recycleStatus) }})</span>
+                                <span class="tag success">(回收状态: {{ getRecycleStatusText(product.recycleStatus)
+                                }})</span>
                             </div>
                         </div>
                     </div>
                     <div class="col-price">¥ {{ product.price }}</div>
                     <div class="col-qty">x{{ product.num }}</div>
                     <div class="col-aftersales">
-                        <span
-                            :class="{ 'text-blue': product.status === '3', 'text-red': product.status === '2' }">
+                        <span :class="{ 'text-blue': product.status === '3', 'text-red': product.status === '2' }">
                             {{ getDetailStatusText(product.status) }}
                         </span>
                     </div>
@@ -83,235 +91,237 @@
 </template>
 
 <script setup>
-import { Flag, CopyDocument } from '@element-plus/icons-vue';
-import { EleMessage } from 'ele-admin-plus/es';
-import { useClipboard } from '@vueuse/core';
-
-const props = defineProps({
-    order: {
-        type: Object,
-        required: true
-    }
-});
-
-defineEmits(['view-detail', 'push-sms', 'refund']);
-
-const { copy } = useClipboard();
-
-const handleCopy = async (text) => {
-    try {
-        await copy(text);
-        EleMessage.success('复制成功');
-    } catch (e) {
-        EleMessage.error('复制失败');
-    }
-};
+    import { Flag, CopyDocument } from '@element-plus/icons-vue';
+    import { EleMessage } from 'ele-admin-plus/es';
+    import { useClipboard } from '@vueuse/core';
+    import wxIcon from '@/assets/wx.png';
+    import alipayIcon from '@/assets/alipay.png';
+
+    const props = defineProps({
+        order: {
+            type: Object,
+            required: true
+        }
+    });
+
+    defineEmits(['view-detail', 'push-sms', 'refund']);
+
+    const { copy } = useClipboard();
+
+    const handleCopy = async (text) => {
+        try {
+            await copy(text);
+            EleMessage.success('复制成功');
+        } catch (e) {
+            EleMessage.error('复制失败');
+        }
+    };
 
-const getDetailStatusText = (status) => {
-    const map = {
-        '1': '正常',
-        '2': '退款中',
-        '3': '已退款'
+    const getDetailStatusText = (status) => {
+        const map = {
+            '1': '正常',
+            '2': '退款中',
+            '3': '已退款'
+        };
+        return map[status] || '';
     };
-    return map[status] || '';
-};
-
-const getConditionText = (type) => {
-    const map = {
-        '1': '良好',
-        '2': '中等',
-        '3': '次品',
-        '4': '全新'
+
+    const getConditionText = (type) => {
+        const map = {
+            '1': '良好',
+            '2': '中等',
+            '3': '次品',
+            '4': '全新'
+        };
+        return map[type] || '-';
     };
-    return map[type] || '-';
-};
-
-const getRecycleStatusText = (status) => {
-    const map = {
-        '1': '正在回收',
-        '2': '暂停回收',
-        '3': '未加入回收书单',
-        '4': '黑名单',
-        '5': '手动暂停'
+
+    const getRecycleStatusText = (status) => {
+        const map = {
+            '1': '正在回收',
+            '2': '暂停回收',
+            '3': '未加入回收书单',
+            '4': '黑名单',
+            '5': '手动暂停'
+        };
+        return map[status] || '-';
     };
-    return map[status] || '-';
-};
 </script>
 
 <style scoped>
-.order-item {
-    border: 1px solid #e4e7ed;
-    margin-bottom: 20px;
-    font-size: 13px;
-}
-
-.order-header {
-    background-color: #f5f7fa;
-    padding: 10px 20px;
-    display: flex;
-    align-items: center;
-    border-bottom: 1px solid #e4e7ed;
-}
-
-.order-body {
-    display: flex;
-    align-items: stretch;
-}
-
-.col-products-wrapper {
-    flex: 1;
-    min-width: 0;
-    display: flex;
-    flex-direction: column;
-    border-right: 1px solid #e4e7ed;
-}
-
-.product-row {
-    display: flex;
-    align-items: center;
-    padding: 15px 0;
-    border-bottom: 1px solid #ebeef5;
-}
-
-.product-row:last-child {
-    border-bottom: none;
-}
-
-.col-product {
-    flex: 1;
-    min-width: 200px;
-    padding-left: 20px;
-    display: flex;
-}
-
-.product-img {
-    width: 60px;
-    height: 60px;
-    border-radius: 4px;
-    margin-right: 10px;
-}
-
-.product-detail {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-}
-
-.product-title {
-    font-weight: 500;
-    margin-bottom: 4px;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: -webkit-box;
-    -webkit-line-clamp: 2;
-    -webkit-box-orient: vertical;
-}
-
-.col-price {
-    width: 100px;
-    flex: none;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.col-qty {
-    width: 80px;
-    flex: none;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.col-aftersales {
-    width: 100px;
-    flex: none;
-    text-align: center;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
-
-.col-merged {
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    align-items: center;
-    border-right: 1px solid #e4e7ed;
-    padding: 10px;
-    text-align: center;
-}
-
-.col-merged:last-child {
-    border-right: none;
-}
-
-.col-buyer {
-    width: 150px;
-    flex: none;
-}
-
-.col-payment {
-    width: 120px;
-    flex: none;
-}
-
-.col-logistics {
-    width: 150px;
-    flex: none;
-}
-
-.col-status {
-    width: 120px;
-    flex: none;
-}
-
-.col-action {
-    width: 120px;
-    flex: none;
-}
-
-.buyer-note {
-    background-color: #fff8e6;
-    padding: 8px 20px;
-    color: #e6a23c;
-    border-top: 1px solid #faecd8;
-}
-
-.text-blue {
-    color: #409eff;
-}
-
-.text-red {
-    color: #f56c6c;
-}
-
-.flag-icon {
-    color: #f56c6c;
-    margin-left: 10px;
-}
-
-.urge-tag {
-    background-color: #f56c6c;
-    color: #fff;
-    padding: 2px 6px;
-    border-radius: 4px;
-    font-size: 12px;
-    margin-left: 10px;
-}
-
-.tag {
-    background-color: #f0f2f5;
-    padding: 2px 6px;
-    border-radius: 4px;
-    margin-right: 5px;
-    font-size: 12px;
-}
-
-.tag.success {
-    background-color: #f0f9eb;
-    color: #67c23a;
-}
+    .order-item {
+        border: 1px solid #e4e7ed;
+        margin-bottom: 20px;
+        font-size: 13px;
+    }
+
+    .order-header {
+        background-color: #f5f7fa;
+        padding: 10px 20px;
+        display: flex;
+        align-items: center;
+        border-bottom: 1px solid #e4e7ed;
+    }
+
+    .order-body {
+        display: flex;
+        align-items: stretch;
+    }
+
+    .col-products-wrapper {
+        flex: 1;
+        min-width: 0;
+        display: flex;
+        flex-direction: column;
+        border-right: 1px solid #e4e7ed;
+    }
+
+    .product-row {
+        display: flex;
+        align-items: center;
+        padding: 15px 0;
+        border-bottom: 1px solid #ebeef5;
+    }
+
+    .product-row:last-child {
+        border-bottom: none;
+    }
+
+    .col-product {
+        flex: 1;
+        min-width: 200px;
+        padding-left: 20px;
+        display: flex;
+    }
+
+    .product-img {
+        width: 60px;
+        height: 60px;
+        border-radius: 4px;
+        margin-right: 10px;
+    }
+
+    .product-detail {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+    }
+
+    .product-title {
+        font-weight: 500;
+        margin-bottom: 4px;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+    }
+
+    .col-price {
+        width: 100px;
+        flex: none;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .col-qty {
+        width: 80px;
+        flex: none;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .col-aftersales {
+        width: 100px;
+        flex: none;
+        text-align: center;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    .col-merged {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: center;
+        border-right: 1px solid #e4e7ed;
+        padding: 10px;
+        text-align: center;
+    }
+
+    .col-merged:last-child {
+        border-right: none;
+    }
+
+    .col-buyer {
+        width: 150px;
+        flex: none;
+    }
+
+    .col-payment {
+        width: 120px;
+        flex: none;
+    }
+
+    .col-logistics {
+        width: 150px;
+        flex: none;
+    }
+
+    .col-status {
+        width: 120px;
+        flex: none;
+    }
+
+    .col-action {
+        width: 120px;
+        flex: none;
+    }
+
+    .buyer-note {
+        background-color: #fff8e6;
+        padding: 8px 20px;
+        color: #e6a23c;
+        border-top: 1px solid #faecd8;
+    }
+
+    .text-blue {
+        color: #409eff;
+    }
+
+    .text-red {
+        color: #f56c6c;
+    }
+
+    .flag-icon {
+        color: #f56c6c;
+        margin-left: 10px;
+    }
+
+    .urge-tag {
+        background-color: #f56c6c;
+        color: #fff;
+        padding: 2px 6px;
+        border-radius: 4px;
+        font-size: 12px;
+        margin-left: 10px;
+    }
+
+    .tag {
+        background-color: #f0f2f5;
+        padding: 2px 6px;
+        border-radius: 4px;
+        margin-right: 5px;
+        font-size: 12px;
+    }
+
+    .tag.success {
+        background-color: #f0f9eb;
+        color: #67c23a;
+    }
 </style>