feat: 订单详情路由搭建

src/router.js

@@ -141,7 +141,7 @@ const routes = [
             {
                 path: 'order/detail/:id',
                 name: 'order-detail',
-                component: () => import('./views/create-order/index.vue'),
+                component: () => import('./views/create-order/order-detail.vue'),
             },
             {
                 path: 'order/helpUserOrders',

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="order-actions-container">
+    订单操作列表
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrderActions',
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="order-desc-card-container">
+    订单简单信息列表
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrderDescInfo',
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,21 @@
+<template>
+  <div class="order-detail-card-container">
+    订单信息列表
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'OrderDetailCard',
+  components: {},
+  data() {
+    return {}
+  },
+  computed: {},
+  methods: {}
+}
+</script>
+
+<style lang="scss" scoped>
+
+</style>

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

@@ -0,0 +1,146 @@
+<template>
+  <div class="page-order-detail">
+    <div class="order-detail-container">
+      <div class="order-detail-header">
+        <el-tabs v-model="activeTabName">
+          <el-tab-pane
+            v-for="tab in tabList"
+            :key="tab.name"
+            :label="tab.label"
+            :name="tab.name">
+          </el-tab-pane>
+        </el-tabs>
+        <div class="order-action-container">
+          <OrderActions />
+        </div>
+        <div class="order-desc-container">
+          <OrderDescInfo />
+        </div>
+      </div>
+      <div class="order-detail-content">
+        <component v-if="currentShowComponentName" :is="currentShowComponentName"></component>
+        <div v-else>未配置动态组件</div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import OrderDetailCard from './components/order-detail-submodule/OrderDetailCard.vue'
+import OrderActions from './components/order-detail-submodule/OrderActions.vue'
+import OrderDescInfo from './components/order-detail-submodule/OrderDescInfo.vue'
+export default {
+  name: 'OrderDetail',
+  components: {
+    OrderActions,
+    OrderDescInfo,
+    OrderDetailCard,
+  },
+  data() {
+    return {
+      conf: {
+        tabList: [
+          {
+            label: '订单详情',
+            name: 'orderDetail',
+            componentName: 'OrderDetailCard'
+          },
+          {
+            label: '审核记录',
+            name: 'auditRecords',
+          },
+          {
+            label: '协议信息',
+            name: 'contractInfo',
+          },
+          {
+            label: '业绩归属信息',
+            name: 'performanceBelongs',
+          },
+          {
+            label: '回款计划',
+            name: 'paymentPlan',
+          },
+          {
+            label: '回款信息',
+            name: 'paymentInfo',
+          },
+          {
+            label: '发票信息',
+            name: 'invoiceInfo',
+          },
+          {
+            label: '退款信息',
+            name: 'refundInfo',
+          },
+          {
+            label: '红冲记录',
+            name: 'changeRecord',
+          },
+          {
+            label: '盖章记录',
+            name: 'stampRecord',
+          },
+        ]
+      },
+      activeTabName: 'orderDetail',
+    }
+  },
+  computed: {
+    tabList() {
+      return this.conf.tabList
+    },
+    currentShowComponentName() {
+      const t = this.tabList.find(r => r.name === this.activeTabName)
+      if (t) {
+        return t.componentName
+      } else {
+        return ''
+      }
+    }
+  },
+  created() {
+    this.getOrderDetail()
+  },
+  methods: {
+    getOrderDetail() {}
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.page-order-detail {
+  margin: 16px;
+}
+::v-deep {
+  .el-tabs__header {
+    margin-bottom: 0;
+  }
+  .el-tabs__nav-wrap {
+    padding: 0 32px;
+    &::after {
+      height: 1px;
+    }
+  }
+}
+
+.common-card {
+  background-color: #fff;
+  border-radius: 8px;
+  overflow: hidden;
+}
+.order-detail-header {
+  @extend .common-card;
+}
+.order-detail-content {
+  @extend .common-card;
+  margin-top: 16px;
+}
+
+.order-desc-container,
+.order-action-container {
+  padding: 12px 32px;
+  border-radius: 8px;
+  overflow: hidden;
+}
+</style>