订单页面样式修改

pages/main/index/cloud_order.vue

@@ -1,7 +1,7 @@
 <template>
   <div id="cloud-balance">
     <section class="top">
-      <h3>交易订单中心</h3>
+      <!-- <h3>交易订单中心</h3> -->
       <section>
         <div class="type-boxs">
           <span class="vsub">订单类型:</span>
@@ -10,8 +10,19 @@
               <el-checkbox-button v-for="itm in TypeList" :label="itm.id" :key="itm.id">{{itm.type}}</el-checkbox-button>
             </el-checkbox-group>
           </div>
+          <div class="inlineb vsub">
+            <span>交易类型：</span>
+            <el-select v-model="status" placeholder="交易类型">
+              <el-option
+                v-for="item of jobStatusList"
+                :key="item.id"
+                :label="item.name"
+                :value="item.id"
+              ></el-option>
+            </el-select>
+          </div>
         </div>
-        <div class="type-boxs">
+        <!-- <div class="type-boxs">
           <span class="vsub">交易类型:</span>
           <div class="inlineb">
             <el-checkbox-group v-model="tradeType" @change="changeTrade" size="mini">
@@ -22,7 +33,7 @@
               >{{itm.type}}</el-checkbox-button>
             </el-checkbox-group>
           </div>
-        </div>
+        </div>-->
         <div class="type-boxs">
           <span class="vsub">支付方式:</span>
           <div class="inlineb">
@@ -33,7 +44,7 @@
         </div>
         <div class="type-boxs">
           <div class="inlineb">
-            <span class>订单类型:</span>
+            <span class>时间范围：</span>
             <el-date-picker
               v-model="timeRange"
               type="daterange"
@@ -47,8 +58,22 @@
           </div>
           <div class="inlineb">
             <span class>时间类型:</span>
-            <el-time-picker v-model="arriveTime" ElementUIplaceholder="到帐时间"></el-time-picker>
+            <el-time-picker v-model="arriveTime" placeholder="到帐时间"></el-time-picker>
           </div>
+          <div class="inlineb">
+            <span class>状态:</span>
+            <div class="inlineb">
+              <el-select v-model="status" placeholder="项目状态">
+                <el-option
+                  v-for="item of jobStatusList"
+                  :key="item.id"
+                  :label="item.name"
+                  :value="item.id"
+                ></el-option>
+              </el-select>
+            </div>
+          </div>
+          <el-checkbox v-model="checked">人工财务</el-checkbox>
         </div>
         <div class="type-boxs">
           <div class="inlineb">
@@ -79,22 +104,9 @@
               <el-input style="width: 100px;" v-model="checkUser" placeholder="项目ID"></el-input>
             </div>
           </div>
-          <div class="inlineb">
-            <span class>状态:</span>
-            <div class="inlineb">
-              <el-select v-model="status" placeholder="项目状态">
-                <el-option
-                  v-for="item of jobStatusList"
-                  :key="item.id"
-                  :label="item.name"
-                  :value="item.id"
-                ></el-option>
-              </el-select>
-            </div>
-          </div>
-          <el-checkbox v-model="checked">人工财务</el-checkbox>
+
           <el-button type="primary">筛选</el-button>
-          <el-button type="primary">导出报表</el-button>
+          <el-button>导出报表</el-button>
         </div>
         <div class="type-boxs">
           <div>
@@ -136,8 +148,9 @@
       </section>
       <el-button @click="clickExport" type="primary">导出</el-button>
     </section>-->
-    <div class="table tablex">
-      <el-table :data="tableData3" height="250" border style="width: 100%">
+    <div class>
+      <!-- height="250" -->
+      <el-table :data="tableData3" border style="width: 100%">
         <el-table-column prop="date" label="订单名称"></el-table-column>
         <el-table-column prop="name" label="用户"></el-table-column>
         <el-table-column label="实际金额">
@@ -164,16 +177,18 @@
         <el-table-column prop="name" label="人工"></el-table-column>
       </el-table>
     </div>
-    <el-pagination
-      background
-      @current-change="getTableData"
-      @size-change="changePageSize"
-      :current-page.sync="currentPage"
-      :page-sizes="[10, 20, 30, 40]"
-      :page-size="20"
-      layout="total, sizes, prev, pager, next, jumper"
-      :total="totalCount"
-    ></el-pagination>
+    <div class="order-footer">
+      <el-pagination
+        background
+        @current-change="getTableData"
+        @size-change="changePageSize"
+        :current-page.sync="currentPage"
+        :page-sizes="[10, 20, 30, 40]"
+        :page-size="20"
+        layout="total, sizes, prev, pager, next, jumper"
+        :total="totalCount"
+      ></el-pagination>
+    </div>
   </div>
 </template>
 
@@ -514,38 +529,12 @@ export default {
       if (!haveAll && this.orderType.length == this.TypeList.length - 1) {
         this.orderType = [0];
       }
-    },
-    // 改变交易类型
-    changeTrade() {
-      var haveAll = false;
-      for (var i = 0; i < this.tradeType.length; i++) {
-        if (this.tradeType[i] == 0) {
-          haveAll = true;
-        }
-      }
-
-      // 选择其他的时候，去掉全部,全部在第一位
-      if (
-        this.tradeType[0] == 0 &&
-        1 < this.tradeType.length < this.tradeList.length
-      ) {
-        var arr = [];
-        for (var i = 0; i < this.tradeType.length; i++) {
-          if (this.tradeType[i] != 0) {
-            arr.push(this.tradeType[i]);
-          }
-        }
-
-        this.tradeType = arr;
-      }
-      // 选择全部的时候去掉其他，全部在最后一位
-      if (this.tradeType[this.tradeType.length - 1] == 0) {
-        this.tradeType = [0];
-      }
-      if (!haveAll && this.tradeType.length == this.tradeList.length - 1) {
-        this.tradeType = [0];
+      if (this.orderType.length == 0) {
+        console.log("sss:", this.orderType);
+        this.orderType = [0];
       }
     },
+
     // 改变支付方式
     changePay() {
       var haveAll = false;
@@ -576,6 +565,10 @@ export default {
       if (!haveAll && this.payType.length == this.payList.length - 1) {
         this.payType = [0];
       }
+      if (this.payType.length == 0) {
+        console.log("sss:", this.orderType);
+        this.payType = [0];
+      }
     },
     clickExport() {
       window.open("/api/admin/job/get_all_periods?action=export");
@@ -691,12 +684,18 @@ export default {
 </script>
 
 <style scoped>
+.order-footer {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+}
 #order-wrap {
   width: 100%;
 }
 #cloud-balance {
   white-space: nowrap;
   overflow-x: scroll;
+  height: calc(100% - 40px);
 }
 .top {
   display: flex;