refactor: 物料选择-交互修改

src/pages/parts/addParts.vue

 <template>
   <view class="u-flex content">
+    <view class="categary" v-if="type === '2'">
+      <view class="u-flex u-col-center">
+        <view :class="['txt', {'active': categoryId === item.categoryId }]" v-for="item in categary" :key="item.categoryId" @click="changeCategary(item)">{{item.label}}</view>
+      </view>
+    </view>
+
     <view class="search">
       <u-search
         :clearabled="true"
@@ -11,15 +17,6 @@
       ></u-search>
     </view>
 
-    <view class="categary" v-if="type === '2'">
-      <view class="u-flex u-col-center">
-        <picker mode="selector" :value="categaryIndex" range-key="label" :range="categary" @click="show = true" @change="changeCategary">
-          <view class="txt">{{categary[categaryIndex].label || '请选择'}}</view>
-        </picker>
-        <u-icon class="input-icon" color="#2272FF" :name="show ? 'arrow-up' : 'arrow-down'"></u-icon>
-      </view>
-    </view>
-
     <view class="warp u-flex">
       <view class="brand u-flex" v-if="brand.length > 0">
         <view class="label-content u-flex">
@@ -40,6 +37,25 @@
         </view>
       </view>
 
+      <view class="model u-flex" v-if="brand.length > 0">
+        <view class="label-content u-flex">
+          <scroll-view
+            style="width:100%;white-space: nowrap;"
+            scroll-x="true"
+            class="u-flex"
+            :scroll-into-view="scrollId"
+          >
+            <view :id="`brand${item.brandId}`" :class="['label-title', { selected: item.brandId == brandId }]" v-for="(item, index) in brand" :key="index" @click="selectBrand(item, index)">{{ item.label }}</view>
+          </scroll-view>
+        </view>
+        <view class="more u-flex" @click="handleClick">
+          <!-- <picker mode="selector" :value="brandIndex" range-key="label" :range="brand" @click="show = true" @change="changeBrand"> -->
+            <!-- <view class="more-text">更多</view> -->
+          <!-- </picker> -->
+          <u-icon class="input-icon" color="#666" name="arrow-down"></u-icon>
+        </view>
+      </view>
+
       <view class="lists">
         <scroll-view
           style="height:100%;"
@@ -92,7 +108,7 @@ export default {
       categary: [],
       brand: [],
       categaryIndex: 0,
-      categaryId: '',
+      categoryId: '',
       brandIndex: 0,
       brandId: 0,
       scrollId: '',
@@ -131,7 +147,7 @@ export default {
 	getApp().trackPage('选择配件页')
 	if (e) {
 		if (e.type == 1) {
-			this.categaryId = e.categaryId || ''
+			this.categoryId = e.categaryId || ''
 			this.type = e.type
 			this.getBrandList(e.brandId)
 		} else if (e.type == 2) {
@@ -161,7 +177,11 @@ export default {
               v.label = v.categoryName
               return v
             })
-            this.categaryId = this.categary[0].categoryId
+            this.categary.push({
+              categoryId: 2,
+              label: '非桩类',
+            })
+            this.categoryId = this.categary[0].categoryId
             this.getBrandList()
           } else {
             this.getPartsList()
@@ -171,10 +191,9 @@ export default {
     },
     // 获取品牌
     getBrandList(id) {
-      this.$u.api.getBrandList({categoryId: this.categaryId}).then(res => {
+      this.$u.api.getBrandList({categoryId: this.categoryId}).then(res => {
         if (res.code === 200) {
           const data = res.data
-          if (data.length > 0) {
           let item, index
           this.brand = data.map((v, i) => {
             if (id && parseInt(id) === v.brandId) {
@@ -189,12 +208,11 @@ export default {
             this.selectBrand(item, index)
             this.scrollId = `brand${item.brandId}`
           } else {
-              this.brandId = this.brand[0].brandId
+            this.brandId = this.brand?.[0]?.brandId
             this.lists = []
             this.getPartsList()
           }
         }
-        }
       })
     },
     // 获取配件列表
@@ -204,7 +222,7 @@ export default {
       const params = {
         pageNumber: this.pageNumber,
         pageSize: this.pageSize,
-        categoryId: this.categaryId || '',
+        categoryId: this.categoryId || '',
         brandId: this.brandId || '',
         keyword: this.keyword
       }
@@ -239,8 +257,7 @@ export default {
     },
     // 选择品类
     changeCategary(data) {
-      this.categaryIndex = data.detail.value
-      this.categaryId = this.categary[this.categaryIndex || 0].categoryId
+      this.categoryId = data.categoryId
       this.brandIndex = ''
       this.show = false
       this.pageNumber = 1
@@ -272,7 +289,7 @@ export default {
     },
 	// 点击更多
 	handleClick() {
-		this.$u.route({url: 'pages/order/document-tag' + '?categoryId=' + this.categaryId + '&selectedId=' + this.brandId})
+		this.$u.route({url: 'pages/order/document-tag' + '?categoryId=' + this.categoryId + '&selectedId=' + this.brandId})
 	},
     // 加入申请
     apply(item, index) {
@@ -319,12 +336,17 @@ export default {
   }
   .categary {
     width: 100%;
-    padding: 0 30rpx 30rpx;
+    padding: 20rpx 30rpx 0rpx;
     .txt {
-      font-size: 32rpx;
+      font-size: 36rpx;
+      color: #333;
+      margin-right: 30rpx;
+    }
+    .active {
+      font-size: 48rpx;
       color: #333;
       font-weight: bold;
-      margin-right: 15rpx;
+      margin-right: 30rpx;
     }
   }
   
@@ -339,7 +361,6 @@ export default {
     overflow: hidden;
     .brand {
       width: 100%;
-      border-bottom: 2rpx solid #F4F5F7;
       padding-bottom: 20rpx;
       .label-content {
         flex: 1;
@@ -348,19 +369,50 @@ export default {
         border-right: 2rpx solid #F4F5F7;
         .label-title {
           color:#666;
+          padding: 10rpx 0rpx;
+          margin-right: 40rpx;
+          display:inline-block;
+          font-size: 32rpx;
+          &.selected {
+            color: #2272ff;
+            border-bottom: 4rpx solid #2272ff;
+            font-size: 36rpx;
+            font-weight: bold;
+          }
+        }
+      }
+      .more {
+        width: 100rpx;
+        padding-left: 20rpx;
+        .more-text {
+          color: #2272FF;
+          font-size: 26rpx;
+        }
+      }
+    }
+    .model {
+      width: 100%;
+      padding: 20rpx 0; 
+      .label-content {
+        flex: 1;
+        overflow: hidden;
+        padding-right: 20rpx;
+        border-right: 2rpx solid #F4F5F7;
+        .label-title {
           background: #F4F5F7;
-          padding: 12rpx 40rpx;
+          color: #999;
+          padding: 7rpx 30rpx;
           margin-right: 20rpx;
-          border-radius: 10rpx;
-          display:inline-block;
+          display: inline-block;
+          font-size: 26rpx;
+          border-radius: 30rpx;
           &.selected {
             color: #fff;
-            background: #2272ff;
+            background: #2272FF;
           }
         }
       }
       .more {
-        width: 100rpx;
         padding-left: 20rpx;
         .more-text {
           color: #2272FF;