refactor(mallOrder): 使用字典组件统一支付方式和订单状态显示

- 将搜索组件中的支付方式选择器替换为字典选择器
- 在订单列表和详情中使用 dict-data 组件显示支付方式和订单状态
- 移除硬编码的映射函数和本地字典数据导入
- 修复订单商品数量显示问题，使用动态数据替代固定值

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

@@ -14,11 +14,19 @@
                     </div>
                     <div class="info-item">
                         <span class="label">支付渠道：</span>
-                        <span class="value">{{ getPayType(detail.payType) }}</span>
+                        <span class="value">
+                            <dict-data v-if="detail.payType" code="shop_order_pay_type" type="text"
+                                :model-value="detail.payType" />
+                            <span v-else>-</span>
+                        </span>
                     </div>
                     <div class="info-item">
                         <span class="label">交易状态：</span>
-                        <span class="value">{{ getStatusText(detail.status) }}</span>
+                        <span class="value">
+                            <dict-data v-if="detail.status" code="shop_order_status" type="tag"
+                                :model-value="detail.status" />
+                            <span v-else>-</span>
+                        </span>
                     </div>
                     <div class="info-item">
                         <span class="label">平台备注：</span>
@@ -100,82 +108,62 @@
 </template>
 
 <script setup>
-import { Lightning } from '@element-plus/icons-vue';
-import { EleMessage } from 'ele-admin-plus/es';
-import { ref } from 'vue';
+    import { Lightning } from '@element-plus/icons-vue';
+    import { EleMessage } from 'ele-admin-plus/es';
+    import { ref } from 'vue';
 
-import { useDictData } from '@/utils/use-dict-data';
+    const props = defineProps({
+        detail: {
+            type: Object,
+            required: true,
+            default: () => ({})
+        }
+    });
 
-const props = defineProps({
-    detail: {
-        type: Object,
-        required: true,
-        default: () => ({})
+    defineEmits(['add-package', 'edit-receiver']);
+
+    const activities = ref([]);
+
+    const viewLogistics = () => {
+        EleMessage.info('物流详情功能开发中');
+    };
+</script>
+
+<style scoped>
+    .order-base-info {
+        font-size: 13px;
     }
-});
 
-defineEmits(['add-package', 'edit-receiver']);
+    .info-layout {
+        display: flex;
+        gap: 20px;
+    }
 
-const activities = ref([]);
-const [shop_order_status] = useDictData(['shop_order_status']);
+    .info-column {
+        flex: 1;
+        display: flex;
+        flex-direction: column;
+        gap: 12px;
+    }
 
-const viewLogistics = () => {
-    EleMessage.info('物流详情功能开发中');
-};
+    .info-item {
+        display: flex;
+        align-items: flex-start;
+        line-height: 1.4;
+    }
 
-const getStatusText = (status) => {
-    const item = shop_order_status.value.find(d => d.dictValue == status);
-    return item ? item.dictLabel : status;
-};
+    .label {
+        color: #909399;
+        width: 70px;
+        flex-shrink: 0;
+    }
 
-const getPayType = (type) => {
-    if (!type) {
-        return '-';
+    .value {
+        color: #303133;
+        word-break: break-all;
     }
-    const map = {
-        '1': '余额',
-        '2': '微信',
-        '3': '支付宝'
-    };
-    return map[type] || type;
-};
-</script>
 
-<style scoped>
-.order-base-info {
-    font-size: 13px;
-}
-
-.info-layout {
-    display: flex;
-    gap: 20px;
-}
-
-.info-column {
-    flex: 1;
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-}
-
-.info-item {
-    display: flex;
-    align-items: flex-start;
-    line-height: 1.4;
-}
-
-.label {
-    color: #909399;
-    width: 70px;
-    flex-shrink: 0;
-}
-
-.value {
-    color: #303133;
-    word-break: break-all;
-}
-
-.action-area {
-    margin-top: auto;
-}
+    .action-area {
+        margin-top: auto;
+    }
 </style>

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

@@ -6,7 +6,10 @@
             <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">支付渠道: {{ getPayType(order.payType) }}</span>
+            <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="flag-icon" v-if="order.flag"><el-icon>
                     <Flag />
@@ -35,7 +38,7 @@
                         </div>
                     </div>
                     <div class="col-price">¥ {{ product.price }}</div>
-                    <div class="col-qty">x1</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' }">
@@ -62,7 +65,7 @@
                 <div>{{ order.waybillCode }}</div>
             </div>
             <div class="col-merged col-status">
-                <div :class="getStatusColor(order.status)">{{ getStatusText(order.status) }}</div>
+                <dict-data code="shop_order_status" type="text" :model-value="order.status" />
                 <el-button link type="primary" @click="$emit('view-detail', order)">[查看详情]</el-button>
             </div>
             <div class="col-merged col-action">
@@ -83,7 +86,6 @@
 import { Flag, CopyDocument } from '@element-plus/icons-vue';
 import { EleMessage } from 'ele-admin-plus/es';
 import { useClipboard } from '@vueuse/core';
-import { useDictData } from '@/utils/use-dict-data';
 
 const props = defineProps({
     order: {
@@ -95,7 +97,6 @@ const props = defineProps({
 defineEmits(['view-detail', 'push-sms', 'refund']);
 
 const { copy } = useClipboard();
-const [shop_order_status] = useDictData(['shop_order_status']);
 
 const handleCopy = async (text) => {
     try {
@@ -106,16 +107,6 @@ const handleCopy = async (text) => {
     }
 };
 
-const getStatusText = (status) => {
-    const item = shop_order_status.value.find(d => d.dictValue == status);
-    return item ? item.dictLabel : status;
-};
-
-const getStatusColor = (status) => {
-    // Implement color logic if needed, e.g. return 'text-red'
-    return '';
-};
-
 const getDetailStatusText = (status) => {
     const map = {
         '1': '正常',
@@ -145,18 +136,6 @@ const getRecycleStatusText = (status) => {
     };
     return map[status] || '-';
 };
-
-const getPayType = (type) => {
-    if (!type) {
-        return '-';
-    }
-    const map = {
-        '1': '余额支付',
-        '2': '微信支付',
-        '3': '支付宝支付'
-    };
-    return map[type] || type;
-};
 </script>
 
 <style scoped>

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

@@ -30,14 +30,10 @@ const formItems = reactive([
     },
     { type: 'input', label: '搜索备注关键字', prop: 'remark' },
     {
-        type: 'select',
+        type: 'dictSelect',
         label: '支付方式',
         prop: 'payType',
-        options: [
-            { label: '余额', value: '1' },
-            { label: '微信', value: '2' },
-            { label: '支付宝', value: '3' }
-        ]
+        props: { code: 'shop_order_pay_type' }
     },
     {
         type: 'daterange',