Merge branch 'dev/v2.4.46_tsz' of jianyu/qmx_page_admin into feature/v2.4.46

src/api/modules/index.js

@@ -75,5 +75,14 @@ export function ajaxGetBigMemberService() {
   })
 }
 
+// 获取订单详情
+export function ajaxGetOrderDetail(data) {
+  return request({
+    url: '/jyOrderManager/order/detail',
+    method: 'post',
+    data,
+  })
+}
+
 
 

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

@@ -0,0 +1,94 @@
+<template>
+  <div class="audit-records-container">
+    <div class="audit-records-card">
+      <InfoCard>
+        <template #title>
+          审核记录（共<span class="num-active"> {{ orderDetail?.audit?.length || 0 }} </span>条）
+        </template>
+        <div class="audit-records-card-content">
+          <el-table
+            class="audit-records-card-content-table"
+            border
+            :data="tableData"
+            style="width: 1108px">
+            <el-table-column
+              prop="name"
+              label="操作人"
+              width="120">
+            </el-table-column>
+            <el-table-column
+              prop="date"
+              label="操作时间"
+              width="172">
+            </el-table-column>
+            <el-table-column
+              prop="type"
+              label="操作类型"
+              width="100">
+            </el-table-column>
+            <el-table-column
+              prop="status"
+              label="审核状态"
+              width="100">
+            </el-table-column>
+            <el-table-column
+              prop="desc"
+              label="审核备注"
+              width="616">
+            </el-table-column>
+          </el-table>
+        </div>
+      </InfoCard>
+    </div>
+  </div>
+</template>
+
+<script>
+import InfoCard from '../../ui/InfoCard.vue';
+export default {
+  name: 'AuditRecords',
+  components: {
+    InfoCard
+  },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      tableData: [
+        {
+          date: '2016-05-02',
+          name: '王小虎',
+          type: '一审',
+          status: '已通过',
+          desc: '审核备注'
+        }
+      ]
+    }
+  },
+}
+</script>
+<style lang="scss" scoped>
+.audit-records-container {
+  .audit-records-card-content-table {
+    ::v-deep {
+      .cell {
+        text-align: center;
+      }
+      .has-gutter {
+        th {
+          background: #F9FAFB;
+        }
+      }
+    }
+  }
+  .num-active {
+    color: $color_main;
+  }
+}
+</style>

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

@@ -1,6 +1,10 @@
 <template>
   <div class="order-actions-container">
-    订单操作列表
+    <div class="order-actions-list">
+      <div v-for="(item, index) in actionList" :key="index" :class="{ 'order-action-item-active': item.active }" class="order-action-item">
+        <div class="order-action-text" @click="item.action">{{ item.text }}</div>
+      </div>
+    </div>
   </div>
 </template>
 
@@ -9,13 +13,101 @@ export default {
   name: 'OrderActions',
   components: {},
   data() {
-    return {}
+    return {
+      actionList: [
+        {
+          text: '编辑订单',
+          active: true,
+          action: () => {
+            this.editOrder()
+          } 
+        },
+        {
+          text: '作废订单',
+          active: false,
+          action: () => {
+            this.cancelOrder()
+          }
+        },
+        {
+          text: '下载电子协议',
+          active: false,
+          action: () => {
+            this.downloadProtocol() 
+          }
+        },
+        {
+          text: '微信/支付宝付款码',
+          active: false,
+          action: () => {
+            this.wxAliPay() 
+          }
+        },
+        {
+          text: '客户自助扫码开票',
+          active: false,
+          action: () => {
+            this.scanCodeInvoice()
+          }
+        },
+        // {
+        //   text: '协议归档',
+        //   active: false,
+        //   action: () => {
+        //     this.archiveProtocol() 
+        //   } 
+        // }
+      ]
+
+    }
   },
   computed: {},
-  methods: {}
+  methods: {
+    editOrder() {
+      console.log('editOrder') 
+    },
+    cancelOrder() {
+      console.log('cancelOrder') 
+    },
+    downloadProtocol() {
+      console.log('downloadProtocol') 
+    },
+    wxAliPay() {
+      console.log('wxAliPay')
+    },
+    scanCodeInvoice() {
+      console.log('scanCodeInvoice') 
+    },
+    // archiveProtocol() {
+    //   console.log('archiveProtocol') 
+    // }
+  }
 }
 </script>
 
 <style lang="scss" scoped>
-
+.order-actions-container {
+ .order-actions-list {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  .order-action-item {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 4px 15px;
+    margin-right: 12px;
+    min-width: 90px;
+    font-size: 14px;
+    border: 1px solid #E0E0E0;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: #fff;
+    &-active {
+      border: 1px solid #2ABED1;
+      color: #2ABED1;
+    }
+  }
+ } 
+}
 </style>

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

@@ -1,6 +1,22 @@
 <template>
   <div class="order-desc-card-container">
-    订单简单信息列表
+    <div class="order-desc-card-info">
+      <div class="order-desc-card-info-item">
+        订单编号: {{ orderInfo.order_code }}
+      </div>
+      <div class="order-desc-card-info-item">
+        购买主体: 个人
+      </div>
+      <div class="order-desc-card-info-item">
+        联系人: 张三
+      </div>
+      <div class="order-desc-card-info-item">
+        联系人手机号: 18843323424
+      </div>
+    </div>
+    <div class="order-desc-card-company">
+      公司名称: 北京剑鱼
+    </div>
   </div>
 </template>
 
@@ -8,6 +24,20 @@
 export default {
   name: 'OrderDescInfo',
   components: {},
+  props: {
+    orderInfo: {
+      type: Object,
+      default: () => {
+        return {
+          order_code: '094640260820',
+          buy_type: '',
+          buy_name: '',
+          buy_phone: '',
+          buy_company: ''
+        }
+      }
+    }
+  },
   data() {
     return {}
   },
@@ -17,5 +47,26 @@ export default {
 </script>
 
 <style lang="scss" scoped>
-
+.order-desc-card-container {
+ .order-desc-card-info {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    .order-desc-card-info-item {
+      margin-right: 32px;
+      width: 255px;
+      font-size: 14px;
+      color: #333;
+      line-height: 28px;
+      &:last-child {
+        margin-right: 0;
+      }
+    }
+  }
+  .order-desc-card-company {
+    margin-top: 10px;
+    font-size: 14px;
+    color: #333;
+  }
+}
 </style>

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

@@ -14,11 +14,11 @@
           <OrderActions />
         </div>
         <div class="order-desc-container">
-          <OrderDescInfo />
+          <OrderDescInfo :orderInfo="orderDetail?.orderData" />
         </div>
       </div>
       <div class="order-detail-content">
-        <component v-if="currentShowComponentName" :is="currentShowComponentName"></component>
+        <component :order-detail="orderDetail" v-if="currentShowComponentName" :is="currentShowComponentName"></component>
         <div v-else>未配置动态组件</div>
       </div>
     </div>
@@ -29,12 +29,16 @@
 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'
+import OrderAuditRecords from './components/order-detail-submodule/AuditRecords.vue'
+import { ajaxGetOrderDetail } from '@/api/modules/index'
+
 export default {
   name: 'OrderDetail',
   components: {
     OrderActions,
     OrderDescInfo,
     OrderDetailCard,
+    OrderAuditRecords
   },
   data() {
     return {
@@ -48,6 +52,7 @@ export default {
           {
             label: '审核记录',
             name: 'auditRecords',
+            componentName: 'OrderAuditRecords'
           },
           {
             label: '协议信息',
@@ -84,6 +89,7 @@ export default {
         ]
       },
       activeTabName: 'orderDetail',
+      orderDetail: {}
     }
   },
   computed: {
@@ -103,7 +109,15 @@ export default {
     this.getOrderDetail()
   },
   methods: {
-    getOrderDetail() {}
+    async getOrderDetail() {
+      const { id } = this.$route.params
+      const { error_code: code, data } = await ajaxGetOrderDetail({ orderCode: id })
+      if (code === 0) {
+        this.orderDetail = data
+      } else {
+        this.$message.error('获取订单详情失败')
+      }
+    }
   }
 }
 </script>

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

@@ -0,0 +1,51 @@
+<template>
+  <div class="info-card">
+    <div class="info-card-header">
+      <slot name="header">
+        <h3 class="info-title">
+          <slot name="title">{{ title }}</slot>
+        </h3>
+      </slot>
+    </div>
+    <div class="info-content">
+      <slot name="default"></slot>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoCard',
+  props: {
+    title: {
+      type: String,
+      default: ''
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.info-card {
+  padding: 20px 32px;
+}
+.info-title {
+  position: relative;
+  color: $gray_10;
+  font-size: 18px;
+  line-height: 28px;
+  &::before {
+    content: '';
+    position: absolute;
+    left: -32px;
+    display: inline-block;
+    width: 3px;
+    height: 24px;
+    border-radius: 0 2px 2px 0;
+    background-color: $main;
+  }
+}
+.info-content {
+  margin-top: 16px;
+}
+</style>