feat: 订单详情

Signed-off-by: tangshizhe <48740614+tangshizhe@users.noreply.github.com>

src/views/create-order/components/order-detail-submodule/OrderDetailCard.vue

@@ -1,21 +1,222 @@
 <template>
   <div class="order-detail-card-container">
-    订单信息列表
+    <InfoCard title="基本信息">
+      <div class="order-detail-card-content">
+        <div class="order-detail-card-item" v-for="(item, index) in basicInfoItems" :key="index">
+          {{ item.label }}：{{ getFilteredValue(orderData[item.key], item.filter) || '-' }}
+        </div>
+      </div>
+    </InfoCard>
+    <InfoCard title="产品信息">
+      <div class="order-detail-card-content">
+        <div class="order-detail-card-item" v-for="(item, index) in productInfoTotalItems" :key="index">
+          {{ item.label }}：{{ getFilteredValue(orderData[item.key], item.filter ) || '-' }}
+        </div>
+      </div>
+      <div class="order-detail-product-list">
+        <ProductCard v-for="(product, index) in productData" :key="product.id" :title="setProductTitle(product, index)" subtitle="该产品暂不支持系统自动开通权限，请联系运维开通">
+          <div class="order-detail-product-content">
+            <div class="order-detail-card-item" v-for="(item, index) in productInfoItems" :key="index">
+              <div v-if="item.key === 'linkedOrder'" class="linkedOrder">
+                {{ item.label }}
+                <TableCard :columns="linkOrderColumns"></TableCard>
+              </div>
+              <div v-else>{{ item.label }}：{{ getFilteredValue(product[item.key], item.filter) || '-' }}</div>
+            </div>
+          </div>
+        </ProductCard>
+      </div>
+    </InfoCard>
   </div>
 </template>
 
 <script>
+import InfoCard from '../../ui/InfoCard.vue';
+import ProductCard from '../../ui/ProductCard.vue';
+import { paymentTypeOptions } from '../../data/options.js';
+import { div } from '@/utils/number/';
+import TableCard from '../../ui/TableCard.vue';
 export default {
   name: 'OrderDetailCard',
-  components: {},
+  components: {
+    InfoCard,
+    ProductCard,
+    TableCard
+  },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => {} 
+    }
+  },
   data() {
-    return {}
+    return {
+      basicInfoItems: [
+        { label: '创建人', key: 'create_person' },
+        { label: '创建时间', key: 'create_time' },
+        { label: '最近更新人', key: 'last_update_person' },
+        { label: '最近更新时间', key: 'last_update_time' },
+        { label: '订单审核状态', key: 'audit_status', filter: 'orderCoursed' },
+        { label: '订单状态', key: 'order_status', filter: 'orderStatus' }
+      ],
+      productInfoTotalItems: [
+        { label: '合同金额合计', key: 'product_name' },
+        { label: '标准售价合计', key: 'product_type'},
+        { label: '折扣率', key: 'product_price' },
+        { label: '渠道佣金', key: 'product_type'},
+        { label: '净合同金额合计', key: 'product_type'},
+        { label: '0元订单类型', key: 'product_type'}
+      ],
+      productInfoItems: [
+        { label: '活动产品', key: 'activity_code' },
+        { label: '付费类型', key: 'service_type', filter: 'orderServiceType' },
+        { label: '升级内容', key: 'supServicelds' },
+        { label: '产品规格', key: 'combold'},
+        { label: '服务列表', key: 'product_type'},
+        { label: '有效周期', key: 'product_type'},
+        { label: '合同金额', key: 'final_price'},
+        { label: '标准售价', key: 'original_price'},
+        { label: '折扣率', key: 'rate'},
+        { label: '子账号数量', key: 'product_type'},
+        { label: '主账号数量', key: 'product_type'},
+        { label: '关联订单', key: 'linkedOrder'},
+        { label: '开通权益手机号', key: 'product_type'},
+        { label: '服务开始时间', key: 'product_type'},
+        { label: '服务结束时间', key: 'product_type'}
+      ],
+      orderData: {},
+      productData: [],
+      linkOrderColumns: [
+        {
+          prop: 'name',
+          label: '产品类型及规格',
+          width: 154
+        },
+        {
+          prop: 'empowerCount',
+          label: '账号数量',
+          width: 80 
+        },
+        {
+          prop: 'serviceEndTime',
+          label: '到期时间',
+          width: 102
+        },
+        {
+          prop: 'buySubject',
+          label: '购买主体',
+          width: 80
+        },
+        {
+          prop: 'buySubject',
+          label: '购买主体',
+          width: 80
+        },
+        {
+          prop: 'buySubject',
+          label: '购买主体',
+          width: 80
+        },
+        {
+          prop: 'buySubject',
+          label: '购买主体',
+          width: 80
+        },
+      ] 
+    }
+  },
+  mounted() {
+    this.orderData = this.orderDetail?.orderData || {}
+    if(this.orderDetail?.productData && this.orderDetail.productData.length > 0) {
+      this.productData = this.orderDetail.productData.map(product => { 
+        try {
+          const parsedFilter = JSON.parse(product.filter || '{}')
+          const rate = (div(product.final_price, product.original_price) * 100).toFixed(2) + '%'
+          return Object.assign(product, { filter: parsedFilter,  rate});
+        } catch (error) {
+          console.error('JSON 解析失败:', error);
+          return product;
+        }
+      })
+    }
+    this.productData = this.orderDetail?.productData || []
   },
   computed: {},
-  methods: {}
+  methods: {
+    // 替代过滤器的通用方法
+    getFilteredValue(value, filterName) {
+      if (!filterName || !value) return value || '-';
+      return this[filterName](value);
+    },
+    setProductTitle(product, index) {
+      return `${index + 1}.【售卖】${product.product_type}`;
+    },
+    orderCoursed(val) {
+        if (val == 0) {
+            return '待提交'
+        } else if (val == 1) {
+            return '待一审'
+        } else if (val == 2) {
+            return '待二审'
+        } else if (val == 4) {
+            return '待三审'
+        } else if (val == 3) {
+            return '已通过'
+        } else if (val == -2 || val == -3 || val == -4) {
+            return '已退回'
+        }
+    },
+    orderServiceType(val) {
+      console.log(val, 'orderServiceType val')
+      const matchedOption = paymentTypeOptions.find(option => option.value === val);
+      return matchedOption ? matchedOption.label : val; // 如果未找到匹配项，返回原始值
+    },
+    orderStatus(val) {
+        if (val == 0) {
+            return '未完成'
+        } else if (val == 1) {
+            return '已完成'
+        } else if (val == -1) {
+            return '逻辑删除'
+        } else if (val == -2) {
+            return '已取消'
+        } else if (val == -3) {
+            return '已退款'
+        } else if (val == -3) {
+            return '已退款'
+        }
+    },
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.order-detail-card-container {
+  background: #F2F2F4;
+  ::v-deep {
+    .info-card {
+      margin-bottom: 16px;
+    }
+  }
+  .order-detail-card-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 6px;
+  }
+  .order-detail-product-content {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    margin-bottom: 6px;
+  }
+  .order-detail-card-item {
+    min-width: 255px;
+    margin-right: 32px;
+    margin-bottom: 10px;
+    font-size: 14px;
+    line-height: 22px;
+    color: $gray_10;
+  }
+}
 </style>

src/views/create-order/order-detail.vue

@@ -18,7 +18,7 @@
         </div>
       </div>
       <div class="order-detail-content">
-        <component :order-detail="orderDetail" v-if="currentShowComponentName" :is="currentShowComponentName"></component>
+        <component :order-detail="orderDetail" v-if="currentShowComponentName && orderApiStatus" :is="currentShowComponentName"></component>
         <div v-else>未配置动态组件</div>
       </div>
     </div>
@@ -121,7 +121,11 @@ export default {
       } else {
         return ''
       }
+    },
+    orderApiStatus() {
+      return Object.keys(this.orderDetail).length > 0
     }
+
   },
   created() {
     this.getOrderDetail()

src/views/create-order/ui/TableCard.vue

@@ -0,0 +1,37 @@
+<template>
+  <div class="table-card">
+    <el-table
+      border
+      :data="tableData"
+      :style="{ width: width }"
+      >
+      <el-table-column
+        v-for="(item, index) in columns"
+        :key="index"
+        :prop="item.prop"
+        :label="item.label">
+      </el-table-column>
+    </el-table>
+  </div>
+</template>
+<script>
+export default {
+  name: 'TableCard',
+  props: {
+    tableData: { // 表格数据
+      type: Array,
+      default: () => []
+    },
+    columns: { // 表格列
+      type: Array,
+      default: () => []
+    },
+    width: { // 表格宽度
+      type: String,
+      default: '100%'
+    }
+  }
+}
+</script>
+<style lang="scss" scoped>
+</style>