余额变动管理页标签优化

pages/main/index/balance_change.vue

@@ -2,16 +2,14 @@
   <div id="mainBody" v-if="coins">
     <el-row>
       <el-col :span="24">
-        <div class="grid-content top">
-          <h3>用户余额订单</h3>
-          <el-switch
-            name="allorder"
-            v-model="all"
-            active-text="全部"
-            inactive-color="#13ce66"
-            @change="orderStatus"
-            inactive-text="可用余额">
-          </el-switch>
+        <h3>用户余额订单</h3>
+        <div  class="type-boxs top">
+          <span class="vsub">订单类型:</span>
+          <div class="inlineb">
+            <el-checkbox-group v-model="orderType" @change="orderStatus" size="mini">
+              <el-checkbox-button  v-for="allorder in orders" :label="allorder" :key="allorder">{{allorder}}</el-checkbox-button>
+            </el-checkbox-group>
+          </div>
         </div>
       </el-col>
     </el-row>
@@ -141,6 +139,7 @@
 </template>
 
 <script>
+    const allorderOptions = ['全部', '可用余额'];
 export default {
   data(){
     return {
@@ -151,7 +150,8 @@ export default {
       user:'',
       order_no:'',
       timeRange:[],
-      all: true,
+        orderType: ['全部'],
+        orders: allorderOptions
     }
   },
   mounted() {
@@ -168,7 +168,7 @@ export default {
         page: this.currentPage,
         size: this.currentPageSize,
         user:this.user,
-        all: this.all
+          orderType: this.orderType
       };
       if (this.order_no){
         body.order_no=this.order_no;
@@ -192,12 +192,21 @@ export default {
       window.location.href = "http://" + url;
     },
       async orderStatus(val){
+
+          // this.orderType = ['全部'];
+          if (this.orderType[0]=='全部'){
+              this.orderType = ['可用余额']
+          }else if (this.orderType[0]=='可用余额'){
+              this.orderType = ['全部']
+          }else {
+              this.orderType = ['全部']
+          }
           let body = {
               page: this.currentPage,
               size: this.currentPageSize,
           };
-          if (this.all){
-              body.all=this.all;
+          if (this.orderType){
+              body.orderType=this.orderType;
           }
           const res = await this.$post("/api/admin/order/get_coins", body);
           this.coins = res.data.list;