fix: 客户订单页面

src/components/allCustomers/allCustomersList.vue

@@ -137,6 +137,7 @@
       </div>
       <div class="list-section-table">
         <el-table
+          :max-height="maxHeight"
           v-loading="loading"
           :data="tableData"
           tooltip-effect="dark"
@@ -153,7 +154,7 @@
               :label="memberFieldsName[colum]"
               :prop="colum"
               show-overflow-tooltip
-              :min-width="colum==='name' ? 210 : colum == 'status' ? 170 : 150"
+              :min-width="colum==='name' ? 200 : colum == 'status' ? 170 : colum == 'lastCostTime' ? 210 : 150"
               :fixed="colum==='name'"
               :sortable="['name','grade','status','channel','createCardStoreName','cardNo','forzenStatus','mainStoreName'].includes(colum)?false:isExist[colum]?'custom':false"
             >

src/components/allCustomers/index.js

@@ -21,6 +21,7 @@ export default {
   name: "allCustomersList",
   data() {
     return {
+      maxHeight: '',
       selectChannelValue: '',
       selectChannelList: {
         selectOptions: {
@@ -242,11 +243,22 @@ export default {
     this.getGradeList();
     this.getCliqueGradeList();
     this.getMemberSourceList();
+    let screenHeight = document.documentElement.clientHeight - 293 + 'px';
+    this.$nextTick(() => {
+      this.maxHeight = screenHeight;
+    });
   },
   mounted() {
     this.getFindMemberFields();
     this.getAjaxMembers();
     this.getEnterpriseInfo();
+    const that = this;
+    window.onresize = () => {
+      return (() => {
+        let screenHeight = document.documentElement.clientHeight - 293 + 'px';
+        that.maxHeight = screenHeight;
+      })();
+    };
   },
   activated(){
     this.getAjaxMembers();

src/components/allCustomers/order-list.vue

@@ -13,14 +13,61 @@
             <span>门店订单</span>
           </p>
         </div>
-        <div class="order-report">
+        <div class="order-content-right">
+          <!-- 上 -->
+          <div class="order-report-box">
+            <div class="order-report-item">
+              <div class="order-report-label" style="width:118px">消费总额/实付</div>
+              <div class="order-report-label" style="width:96px">消费次数</div>
+              <div class="order-report-label" style="width:124px">最近消费时间</div>
+              <div class="order-report-label" style="width:82px">客单价</div>
+              <div class="order-report-label" style="width:82px">连带率</div>
+              <div class="order-report-label" style="width:131px">最高单笔/实付</div>
+              <div class="order-report-label" style="width:87px">平均折扣</div>
+              <div class="order-report-label" style="width:130px">消费总额/应收</div>
+              <div class="order-report-label" style="width:70px">件单价</div>
+              <div class="order-report-label" style="width:91px">最高单笔/应收</div>
+            </div>
+          </div>
+          <div style="display:flex;padding-top:3px">
+            <!-- 中 -->
+            <div class="order-report-middle">
+              <div class="order-report-value" style="width:118px">{{ storeOrderReport[0].value | fomatFloat }}</div>
+              <div class="order-report-value" style="width:96px">{{ storeOrderReport[1].value || 0 }}</div>
+              <div class="order-report-value" style="width:124px">{{ storeOrderReport[2].value | formatYMD }}</div>
+              <div class="order-report-value" style="width:82px">{{ storeOrderReport[3].value | fomatFloat }}</div>
+              <div class="order-report-value" style="width:82px">{{ storeOrderReport[4].value | fomatFloat }}</div>
+              <div class="order-report-value" style="width:131px">{{ storeOrderReport[5].value | fomatFloat }}</div>
+              <div class="order-report-value" style="width:87px">{{ storeOrderReport[6].value | fomatFloat }}</div>
+              <div class="order-report-value" style="width:130px"></div>
+              <div class="order-report-value" style="width:70px"></div>
+              <div class="order-report-value" style="width:91px"></div>
+            </div>
+          </div>
+          <div style="display:flex">
+            <!-- 下 -->
+            <div class="order-report-bottom">
+              <div class="order-report-value" style="width:118px">{{ storeOrderReport[0].value | fomatFloat }}</div>
+              <div class="order-report-value" style="width:96px">{{ storeOrderReport[1].value || 0 }}</div>
+              <div class="order-report-value" style="width:124px">{{ storeOrderReport[2].value | formatYMD }}</div>
+              <div class="order-report-value" style="width:82px">{{ storeOrderReport[3].value | fomatFloat }}</div>
+              <div class="order-report-value" style="width:82px">{{ storeOrderReport[4].value | fomatFloat }}</div>
+              <div class="order-report-value" style="width:131px">{{ storeOrderReport[5].value | fomatFloat }}</div>
+              <div class="order-report-value" style="width:87px">{{ storeOrderReport[6].value | fomatFloat }}</div>
+              <div class="order-report-value" style="width:130px">{{ storeOrderReport[7].value | fomatFloat }}</div>
+              <div class="order-report-value" style="width:70px">{{ storeOrderReport[8].value | fomatFloat }}</div>
+              <div class="order-report-value" style="width:91px">{{ storeOrderReport[9].value | fomatFloat }}</div>
+            </div>
+          </div>
+        </div>
+        <!-- <div class="order-report">
           <div class="order-report-item" v-for="(el, index) in storeOrderReport" :key="index">
             <div class="order-report-label">{{ el.label }}</div>
             <div class="order-report-value" v-if="el.type == 'int'">{{ el.value || 0 }}</div>
             <div class="order-report-value" v-else-if="el.type == 'date'">{{ el.value | formatYMD }}</div>
             <div class="order-report-value" v-else>{{ el.value | fomatFloat }}</div>
           </div>
-        </div>
+        </div> -->
       </div>
     </div>
     <el-tabs v-model="activeName" class="order-tab">
@@ -122,6 +169,7 @@ export default {
     .orderListTop {
       background: #F7F8FA;
       margin: 20px;
+      margin-bottom: -10px;
       .order-report-title {
         padding-left: 12px;
         padding-top: 14px;
@@ -158,6 +206,46 @@ export default {
             }
           }
         }
+        .order-content-right {
+          flex: 1;
+          margin: 16px 27px 18px 18px;
+          .order-report-box {
+              flex: 1;
+              line-height: 20px;
+              margin-bottom: 10px;
+              .order-report-item {
+                display: flex;
+                justify-content: space-between;
+                align-items: center;
+                .order-report-label {
+                  font-size: 14px;
+                  font-weight: 400;
+                  color: #606266;
+                  line-height: 20px;
+                }
+            }
+          }
+          .order-report-middle {
+            margin-bottom: 16px;
+          }
+          .order-report-middle, .order-report-bottom {
+            flex: 1;
+            display: flex;
+            justify-content: space-between;
+            align-items: center;
+            // .order-report-item {
+            //   flex-shrink: 0;
+              .order-report-value {
+                // margin-top: 12px;
+                font-size: 18px;
+                font-family: DIN Alternate;
+                font-weight: bold;
+                color: #303133;
+                line-height: 21px;
+              }
+            // }
+          }
+        }
       }
     }
   }
@@ -172,38 +260,39 @@ export default {
   }
   /deep/ .el-tabs__content {
     padding: 0 20px 20px;
+    padding-bottom: 10px;
     height: calc(100% - 60px);
     overflow-y: auto;
     box-sizing: border-box;
   }
 }
-.order-report {
-  flex: 1;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  margin-bottom: 20px;
-  padding: 20px 15px;
-  height: 86px;
-  // background: #F7F8FA;
-  border-radius: 4px;
-  box-sizing: border-box;
-  .order-report-item {
-    flex-shrink: 0;
-    .order-report-label {
-      font-size: 14px;
-      font-weight: 400;
-      color: #606266;
-      line-height: 20px;
-    }
-    .order-report-value {
-      margin-top: 12px;
-      font-size: 18px;
-      font-weight: bold;
-      color: #303133;
-      line-height: 21px;
-      font-family: DIN Alternate;
-    }
-  }
-}
+// .order-report {
+//   flex: 1;
+//   display: flex;
+//   justify-content: space-between;
+//   align-items: center;
+//   margin-bottom: 20px;
+//   padding: 20px 15px;
+//   height: 86px;
+//   // background: #F7F8FA;
+//   border-radius: 4px;
+//   box-sizing: border-box;
+//   .order-report-item {
+//     flex-shrink: 0;
+//     .order-report-label {
+//       font-size: 14px;
+//       font-weight: 400;
+//       color: #606266;
+//       line-height: 20px;
+//     }
+//     .order-report-value {
+//       margin-top: 12px;
+//       font-size: 18px;
+//       font-weight: bold;
+//       color: #303133;
+//       line-height: 21px;
+//       font-family: DIN Alternate;
+//     }
+//   }
+// }
 </style>