增加更多按钮

qingyiay

2023-04-17 f91f1a3d5dd5a1fa2da8793849ea39c82ffd04fd

 pages/customer-page/customer-my/faYunstatistics/faYunstatistics.vue

@@ -15,7 +15,17 @@
                     <view class="condition-name">煤种：</view>
                     <view class="filter-name">
                        <view class="filter-button" v-for="(item, index) in coalList" :key="index" @click="filterCondition(0, index, item.condition)">
                           <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
                           <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small" v-if="index < coalShow"></u-button>
                        </view>
                        <view class="toggle-button">
                           <u-button
                              shape="circle"
                              :text="coalShow < coalTotal ? '查看更多' : '收起'"
                              type="primary"
                              size="small"
                              @click="toggle(0)"
                              v-if="coalTotal > 3"
                           ></u-button>
                        </view>
                     </view>
                  </view>
@@ -25,6 +35,16 @@
                        <view class="filter-button" v-for="(item, index) in typeList" :key="index" @click="filterCondition(1, index, item.condition)">
                           <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
                        </view>
                        <view class="toggle-button">
                           <u-button
                              shape="circle"
                              :text="typeShow < typeTotal ? '查看更多' : '收起'"
                              type="primary"
                              size="small"
                              @click="toggle(1)"
                              v-if="typeTotal > 3"
                           ></u-button>
                        </view>
                     </view>
                  </view>
                  <view class="filter-body">
@@ -32,6 +52,16 @@
                     <view class="filter-name">
                        <view class="filter-button" v-for="(item, index) in customerList" :key="index" @click="filterCondition(2, index, item.condition)">
                           <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
                        </view>
                        <view class="toggle-button">
                           <u-button
                              shape="circle"
                              :text="customerShow < customerTotal ? '查看更多' : '收起'"
                              type="primary"
                              size="small"
                              @click="toggle(2)"
                              v-if="customerTotal > 3"
                           ></u-button>
                        </view>
                     </view>
                  </view>
@@ -41,6 +71,16 @@
                        <view class="filter-button" v-for="(item, index) in forwarderList" :key="index" @click="filterCondition(3, index, item.condition)">
                           <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
                        </view>
                        <view class="toggle-button">
                           <u-button
                              shape="circle"
                              :text="forwarderShow < forwarderTotal ? '查看更多' : '收起'"
                              type="primary"
                              size="small"
                              @click="toggle(3)"
                              v-if="forwarderTotal > 3"
                           ></u-button>
                        </view>
                     </view>
                  </view>
                  <view class="filter-body" v-if="roleType != 3">
@@ -49,6 +89,16 @@
                        <view class="filter-button" v-for="(item, index) in fleetList" :key="index" @click="filterCondition(4, index, item.condition)">
                           <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
                        </view>
                        <view class="toggle-button">
                           <u-button
                              shape="circle"
                              :text="fleetShow < fleetTotal ? '查看更多' : '收起'"
                              type="primary"
                              size="small"
                              @click="toggle(4)"
                              v-if="fleetTotal > 3"
                           ></u-button>
                        </view>
                     </view>
                  </view>
                  <view class="filter-body" v-if="roleType != 1">
@@ -56,6 +106,16 @@
                     <view class="filter-name">
                        <view class="filter-button" v-for="(item, index) in filedList" :key="index" @click="filterCondition(5, index, item.condition)">
                           <u-button shape="circle" :text="item.condition" :type="item.active ? 'success' : ''" size="small"></u-button>
                        </view>
                        <view class="toggle-button">
                           <u-button
                              shape="circle"
                              :text="filedShow < filedTotal ? '查看更多' : '收起'"
                              type="primary"
                              size="small"
                              @click="toggle(5)"
                              v-if="filedTotal > 3"
                           ></u-button>
                        </view>
                     </view>
                  </view>
@@ -133,7 +193,20 @@
         taskList: [],
         filterList: [],
         totalLength: 0,
         totalTon: 0
         totalTon: 0,
         // 超过两行自动隐藏
         coalShow: 3,
         typeShow: 3,
         customerShow: 3,
         forwarderShow: 3,
         fleetShow: 3,
         filedShow: 3,
         coalToggeleState: false,
         typeToggeleState: false,
         customerToggeleState: false,
         forwarderToggeleState: false,
         fleetToggeleState: false,
         filedToggeleState: false
      };
   },
   onShow() {
@@ -308,6 +381,65 @@
      },
      opencalendar() {
         this.$refs.calendar.open();
      },
      // 点击查看更多
      toggle(value) {
         switch (value) {
            case 0:
               if (!this.coalToggeleState) {
                  this.coalShow = this.coalTotal;
                  this.coalToggeleState = true;
               } else {
                  this.coalShow = 3;
                  this.coalToggeleState = false;
               }
               break;
            case 1:
               if (!this.typeToggeleState) {
                  this.typeShow = this.typeTotal;
                  this.typeToggeleState = true;
               } else {
                  this.typeShow = 3;
                  this.typeToggeleState = false;
               }
               break;
            case 2:
               if (!this.customerToggeleState) {
                  this.customerShow = this.customerTotal;
                  this.customerToggeleState = true;
               } else {
                  this.customerShow = 3;
                  this.customerToggeleState = false;
               }
               break;
            case 3:
               if (!this.forwarderToggeleState) {
                  this.forwarderShow = this.forwarderTotal;
                  this.forwarderToggeleState = true;
               } else {
                  this.forwarderShow = 3;
                  this.forwarderToggeleState = false;
               }
               break;
            case 4:
               if (!this.fleetToggeleState) {
                  this.fleetShow = this.fleetTotal;
                  this.fleetToggeleState = true;
               } else {
                  this.fleetShow = 3;
                  this.fleetToggeleState = false;
               }
               break;
            case 5:
               if (!this.filedToggeleState) {
                  this.filedShow = this.filedTotal;
                  this.filedToggeleState = true;
               } else {
                  this.filedShow = 3;
                  this.filedToggeleState = false;
               }
               break;
         }
      }
   },
   computed: {
@@ -319,12 +451,29 @@
      },
      dateselect() {
         return `${this.first}-${this.last}`;
      },
      coalTotal() {
         return this.coalList.length;
      },
      typeTotal() {
         return this.typeList.length;
      },
      customerTotal() {
         return this.customerList.length;
      },
      forwarderTotal() {
         return this.forwarderList.length;
      },
      fleetTotal() {
         return this.fleetList.length;
      },
      filedTotal() {
         return this.filedList.length;
      }
   },
   watch: {
      dateselect(newV, old) {
         let tempDate = `${this.first}-${this.last}`;
         console.log(newV, '新', old, '旧', tempDate, '一开始');
         if (newV != old && old != '-') {
            this.first = newV.slice(0, 10);
            this.last = newV.slice(11);
@@ -410,6 +559,9 @@
                     margin-left: vww(48);
                  }
               }
               .toggle-button {
                  margin-top: vww(12);
               }
            }
         }
      }