优化

hdApp/src/pagesPurchase/shopping.vue

@@ -1,15 +1,32 @@
 <template>
   <view class="order-page">
-    <app-tabs :tabs="tabs" :isFixed="true" :currentTab="tabIndex" @change="change" itemWidth="20%"/>
+    <view class="sticky-toolbar">
+      <app-tabs :tabs="tabs" :isFixed="false" :currentTab="tabIndex" @change="change" itemWidth="20%" />
 
-			<view style="margin-left:60upx;margin-top:110upx;padding-bottom:30upx;position: relative;">
-				<DateSelect ref="dateSelectRef" @selectDateFn="selectDateFn" defaultShowName="近30天" />
-        
-        <button class="admin-button-com mini-btn blue" style="position: absolute;right:300upx;top:-8upx;" @click="selGhs()">{{ ghsName==''?'选供货商':ghsName }}</button>
-
-        <button class="admin-button-com mini-btn blue" style="position: absolute;right:80upx;top:-8upx;" @click="resetSearch()">重置搜索</button>
-
-			</view>
+      <view class="filter-panel">
+        <view class="filter-row">
+          <view class="filter-chip filter-chip--date">
+            <DateSelect
+              ref="dateSelectRef"
+              class="filter-date-select"
+              top="0"
+              @selectDateFn="selectDateFn"
+              defaultShowName="近30天"
+            />
+          </view>
+          <view
+            class="filter-chip filter-chip--ghs"
+            :class="{ 'filter-chip--active': ghsId > 0 }"
+            @click="selGhs()"
+          >
+            <text class="filter-chip-text">{{ ghsFilterLabel }}</text>
+          </view>
+          <view class="filter-chip filter-chip--reset" @click="resetSearch()">
+            <text class="filter-chip-text">重置</text>
+          </view>
+        </view>
+      </view>
+    </view>
 
     <block v-if="!$util.isEmpty(list.data)">
     <view class="pay_list">
@@ -89,6 +106,16 @@ export default {
       ghsName:''
     }
   },
+  computed: {
+    /** 供货商筛选展示文案，过长时截断 */
+    ghsFilterLabel () {
+      const name = this.ghsName || '选供货商'
+      if (name.length <= 8) {
+        return name
+      }
+      return name.slice(0, 8) + '...'
+    }
+  },
   onReachBottom () {
     if (!this.list.finished) {
       this.getMyPurchase().then(res => {
@@ -192,90 +219,104 @@ export default {
 
 <style lang="scss" scoped>
 .order-page {
-  .tabs {
-    height: 80upx;
-    line-height: 80upx;
-    & > view {
-      // padding: 0 80upx;
-      width: 50%;
-      text-align: center;
-      font-size: 28upx;
-      color: #666;
-      display: inline-block;
-    }
-    & > .active {
-      position: relative;
-      color: #3385ff;
-      font-weight: 700;
-    }
-    & > .active::after {
-      content: "";
-      position: absolute;
-      bottom: 0;
-      left: 50%;
-      transform: translateX(-50%);
-      width: 70upx;
-      height: 6upx;
-      background: #3385ff;
-    }
-  }
-  .order_list {
-    // height: 200upx;
-    height: 100%;
-    background: #f0f2f6;
-    padding: 0 0 20upx;
-    .list_item {
-      margin: 20upx 0 0;
-      // padding-left: 20upx;
-      position: relative;
-      height: 180upx;
-      width: 100vw;
-      background: #fff;
-      display: flex;
-      align-items: center;
-      & > image {
-        margin-left: 30upx;
-        width: 120upx;
-        height: 120upx;
-        border-radius: 60upx;
-      }
-      & > .store_name {
-        margin-left: 30upx;
-        & > .store_title {
-          margin-bottom: 30upx;
-          font-size: 32upx;
-          font-weight: 700;
-          color: #333;
-        }
-        & > .accumulative {
-          font-size: 26upx;
-          color: #999;
-        }
-      }
-      & > .store_btn {
-        position: absolute;
-        right: 30upx;
-        // padding-right: 30upx;
-        & > .btn_entrance {
-          display: inline-block;
-          font-size: 26upx;
-          color: #3385ff;
-          border: 1px solid #3385ff;
-          border-radius: 8upx;
-          padding: 15upx 30upx;
-          margin-left: 30upx;
-        }
-        & > .btn_forbid {
-          border: 1px solid #999;
-          color: #999;
-        }
-      }
-    }
-  }
-  .pay_list {
-    padding-top:20upx;
-    padding-bottom: 100upx;
-    background-color: #f0f2f6;
-  }
+  min-height: 100vh;
+  background-color: #f0f2f6;
+}
+
+.sticky-toolbar {
+  position: sticky;
+  top: 0;
+  z-index: 30;
+  background: #ffffff;
+  box-shadow: 0 8upx 20upx rgba(24, 37, 30, 0.06);
+}
+
+.filter-panel {
+  padding: 12upx 24upx 20upx;
+  background: linear-gradient(180deg, #f8fcfa 0%, #ffffff 100%);
+  box-sizing: border-box;
+}
+
+.filter-row {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.filter-chip {
+  height: 68upx;
+  padding: 0 22upx;
+  border: 1upx solid #e3e8e6;
+  border-radius: 16upx;
+  background: #ffffff;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.filter-chip + .filter-chip {
+  margin-left: 16upx;
+}
+
+.filter-chip--date {
+  min-width: 148upx;
+}
+
+.filter-chip--ghs {
+  flex: 1;
+  min-width: 0;
+  justify-content: flex-start;
+}
+
+.filter-chip--reset {
+  min-width: 96upx;
+  border-color: #d9dee8;
+  background: #f7f8fa;
+}
+
+.filter-chip--active {
+  color: #09c567;
+  border-color: #09c567;
+  background: #f3fbf7;
+}
+
+.filter-chip-text {
+  font-size: 26upx;
+  color: #24282d;
+  line-height: 36upx;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.filter-chip--active .filter-chip-text {
+  color: #09c567;
+}
+
+.filter-chip--reset .filter-chip-text {
+  color: #666666;
+}
+
+.filter-date-select {
+  display: flex;
+  align-items: center;
+}
+
+.filter-date-select ::v-deep .select-title {
+  font-size: 26upx;
+  color: #24282d;
+}
+
+.filter-date-select ::v-deep .select-title.select_corlor {
+  color: #09c567;
+}
+
+.pay_list {
+  padding-top: 20upx;
+  padding-bottom: 100upx;
+  background-color: #f0f2f6;
 }
 </style>