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

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

@@ -3,7 +3,7 @@
     <div class="audit-records-card">
       <InfoCard>
         <template #title>
-          审核记录（共<span class="num-active"> {{ orderDetail?.audit?.length || 0 }} </span>条）
+          审核记录<span style="font-size: 14px;line-height: 22px;">（共<span class="num-active"> 0 </span>条）</span>
         </template>
         <div class="audit-records-card-content">
           <el-table
@@ -76,13 +76,20 @@ export default {
 <style lang="scss" scoped>
 .audit-records-container {
   .audit-records-card-content-table {
+    border-radius: 4px;
     ::v-deep {
       .cell {
         text-align: center;
+        font-size: 14px;
+        color: $gray_10;
       }
       .has-gutter {
         th {
           background: #F9FAFB;
+          .cell {
+            padding: 0;
+            color: #686868;
+          }
         }
       }
     }

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

@@ -0,0 +1,149 @@
+<template>
+  <div class="contract-info">
+    <InfoCard title="协议签订信息">
+      <div class="contract-info-card">
+        <div class="contract-info-card-item">
+          协议签订状态：{{orderDetail?.contractStatus || '签协议'}}
+        </div>
+        <div class="contract-info-card-item">
+          签约主体：北京剑鱼信息技术有限公司
+        </div>
+        <div class="contract-info-card-item">
+          协议签订时间：2024-12-03
+        </div>
+        <div class="contract-info-card-item">
+          协议编号：XXXXXXXXXXXXX
+        </div>
+      </div>
+    </InfoCard>
+    <InfoCard>
+      <template #title>
+        <div class="contract-info-card-title">
+          <span>协议归档信息</span>
+          <button class="edit-btn">编辑</button>
+        </div>
+      </template>
+      <div class="contract-info-card">
+        <div class="contract-info-card-item">
+          协议签订状态：{{orderDetail?.contractStatus || '签协议'}}
+        </div>
+        <div class="contract-info-card-item">
+          签约主体：北京剑鱼信息技术有限公司
+        </div>
+        <div class="contract-info-card-item">
+          协议签订时间：2024-12-03
+        </div>
+        <div class="contract-info-card-item">
+          协议编号：XXXXXXXXXXXXX
+        </div>
+      </div>
+    </InfoCard>
+    <InfoCard>
+      <template #title>
+        <div class="contract-info-card-title">
+          <span>电子归档信息</span>
+          <button class="edit-btn">编辑</button>
+        </div>
+      </template>
+      <div class="contract-info-card card-noflex">
+        <div class="contract-info-card-item">
+          电子协议备注：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+        </div>
+        <div class="arow">
+          <div class="contract-info-card-item">
+            电子协议类型：有电子章
+          </div>
+          <div class="contract-info-card-item">
+            协议甲方类型：个人
+          </div>
+        </div>
+        <div class="contract-info-card-item">
+          协议甲方：个人
+        </div>
+        <div class="arow">
+          <div class="contract-info-card-item">
+            协议甲方联系人：XXXXXXX
+          </div>
+          <div class="contract-info-card-item">
+            协议乙方联系人：XXXXXXX
+          </div>
+        </div>
+        <div class="contract-info-card-item">
+          协议甲方地址：XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
+        </div>
+      </div>
+    </InfoCard>
+  </div>
+</template>
+
+<script>
+import InfoCard from '../../ui/InfoCard.vue';
+export default {
+  name: 'ContractInfo',
+  components: {
+    InfoCard
+  },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+
+    }
+  },
+}
+
+</script>
+
+<style lang="scss" scoped>
+.contract-info {
+  background: #F2F2F4;
+  ::v-deep {
+    .info-card {
+      margin-bottom: 16px;
+    }
+  }
+}
+.contract-info-card-title {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  .edit-btn { 
+    padding: 4px 31px;
+    background: $color_main;
+    color: $white;
+    border-radius: 4px;
+    font-size: 14px;
+    line-height: 22px;
+    border: none;
+    cursor: pointer;
+  }
+}
+.contract-info-card {
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  &.card-noflex {
+    display: block;
+  }
+  &-item {
+    display: flex;
+    align-items: center;
+    margin-right: 32px;
+    min-width: 255px;
+    font-size: 14px;
+    line-height: 22px;
+    color: $gray_10;
+  }
+  .arow {
+    display: flex;
+    align-items: center;
+    margin: 10px 0;
+  }
+}
+</style>

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

@@ -0,0 +1,208 @@
+<template>
+  <div class="payment-info">
+    <InfoCard title="回款概览">
+      <div class="payment-info-content">
+        <div class="payment-info-item">
+          回款状态：部分回款
+        </div>
+        <div class="payment-info-item">
+          已回款金额：¥5,000.00
+        </div>
+        <div class="payment-info-item">
+          未回款金额：¥5,000.00
+        </div>
+      </div>
+    </InfoCard>
+    <InfoCard title="回款概览">
+      <template #title>
+        回款交易详情<span style="font-size: 14px;line-height: 22px;">（共<span class="num-active"> 0 </span>条）</span>
+      </template>
+      <div class="payment-info-content">
+        <el-table
+            class="payment-info-content-table"
+            border
+            :data="paymentDetailList"
+            style="width: 1108px">
+            <el-table-column
+              prop="paytime"
+              label="回款时间"
+              width="112">
+            </el-table-column>
+            <el-table-column
+              prop="paymoney"
+              label="回款金额"
+              width="112">
+            </el-table-column>
+            <el-table-column
+              prop="paytype"
+              label="支付方式"
+              width="90">
+            </el-table-column>
+            <el-table-column
+              prop="commission"
+              label="手续费"
+              width="90">
+            </el-table-column>
+            <el-table-column
+              prop="bank"
+              label="回款银行"
+              width="150">
+            </el-table-column>
+            <el-table-column
+              prop="orderNumber"
+              label="支付单号/银行流水号"
+              width="150">
+            </el-table-column>
+            <el-table-column
+              prop="payAccountName"
+              label="支付户名"
+              width="90">
+            </el-table-column>
+            <el-table-column
+              prop="flowamount"
+              label="流水金额"
+              width="112">
+            </el-table-column>
+            <el-table-column
+              prop="bank"
+              label="操作时间"
+              width="112">
+            </el-table-column>
+            <el-table-column
+              prop="operator"
+              label="操作人"
+              width="90">
+            </el-table-column>
+          </el-table>
+      </div>
+    </InfoCard>
+    <InfoCard title="用户自助下单对公转账">
+      <div class="payment-info-content">
+        <el-table
+        class="payment-info-content-table"
+        border
+        :data="transerList"
+        style="width: 1108px">
+          <el-table-column
+            prop="submitTime"
+            label="提交时间">
+          </el-table-column>
+          <el-table-column
+            cell-class-name="payvoucher-column-cell"
+            prop="payVoucher"
+            label="支付凭证"
+          />
+          <el-table-column
+            prop="processStatus"
+            label="审核状态"
+          />
+          <el-table-column
+            prop="processTime"
+            label="审核时间"
+          />
+          <el-table-column
+            prop="operator"
+            label="操作人"
+          />
+          <el-table-column
+            prop="action"
+            label="操作"
+          />
+        </el-table>
+      </div>
+    </InfoCard>
+  </div>
+</template>
+
+<script>
+import InfoCard from '../../ui/InfoCard.vue';
+export default {
+  name: 'PaymentInfo',
+  components: {
+    InfoCard
+  },
+  props: {
+    orderDetail: {
+      type: Object,
+      default: () => {
+        return {}
+      }
+    }
+  },
+  data() {
+    return {
+      paymentDetailList: [
+        {
+          paytime: '2023-12-31 13:21:32',
+          paymoney: '¥2,000.00',
+          paytype: '微信支付',
+          commission: '¥100.00',
+          bank: '广发银行北京顺义支行',
+          orderNumber: '094640260820',
+          payAccountName: '张三',
+          flowamount: '¥2,000.00',
+          actionTime: '2023-12-31 13:21:32',
+          operator: '张三'
+        }
+      ],
+      transerList: [
+        {
+          submitTime: '2023-12-31 13:21:32',
+          payVoucher: '点击查看',
+          processStatus: '审核通过',
+          processTime: '2023-12-31 13:21:32',
+          operator: '张三',
+          action: '审核',
+        }
+
+      ]
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.payment-info {
+  background: #F2F2F4;
+  ::v-deep {
+    .info-card {
+      margin-bottom: 16px;
+    }
+  }
+  .payment-info-content {
+    width: 1108px;
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+  }
+  .payment-info-item{
+    margin-right: 32px;
+    min-width: 255px;
+    font-size: 14px;
+    line-height: 22px;
+    color: $gray_10;
+  }
+  .payment-info-content-table {
+    border-radius: 4px;
+    ::v-deep {
+      .cell {
+        text-align: center;
+        font-size: 14px;
+        color: $gray_10;
+      }
+      .has-gutter {
+        th {
+          background: #F9FAFB;
+          .cell {
+            padding: 0;
+            color: #686868;
+          }
+        }
+      }
+    }
+  }
+  .num-active {
+    color: $color_main;
+  }
+}
+</style>

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

@@ -30,6 +30,8 @@ import OrderDetailCard from './components/order-detail-submodule/OrderDetailCard
 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 ContractInfo from './components/order-detail-submodule/ContractInfo.vue'
+import PaymentInfo from './components/order-detail-submodule/PaymentInfo.vue'
 import { ajaxGetOrderDetail } from '@/api/modules/index'
 
 export default {
@@ -38,7 +40,9 @@ export default {
     OrderActions,
     OrderDescInfo,
     OrderDetailCard,
-    OrderAuditRecords
+    OrderAuditRecords,
+    ContractInfo,
+    PaymentInfo
   },
   data() {
     return {
@@ -57,6 +61,7 @@ export default {
           {
             label: '协议信息',
             name: 'contractInfo',
+            componentName: 'ContractInfo'
           },
           {
             label: '业绩归属信息',
@@ -69,6 +74,7 @@ export default {
           {
             label: '回款信息',
             name: 'paymentInfo',
+            componentName: 'PaymentInfo'
           },
           {
             label: '发票信息',

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

@@ -28,6 +28,8 @@ export default {
 <style lang="scss" scoped>
 .info-card {
   padding: 20px 32px;
+  background: #fff;
+  border-radius: 8px;
 }
 .info-title {
   position: relative;