筛选

src/components/product/productSelect.vue

@@ -123,6 +123,7 @@ export default {
         refreash() {
             this.settingId = 0;
             this.bannerName = '';
+            this.classification = false;
             this.rarityLabel = '';
             this.productId = '';
         },
@@ -187,8 +188,12 @@ export default {
             let info = [...this.list].find(item => {
                 return item.id === this.productId;
             });
+            let setting = [...this.settings].find(item => {
+                return item.id === this.settingId;
+            });
             this.show = false;
             this.$emit('select', {
+                setting: setting,
                 search: this.bannerName,
                 rarityLabel: this.rarityLabel,
                 productName: info ? info.name : ''
@@ -275,6 +280,7 @@ export default {
             text-overflow: ellipsis;
             &.prim {
                 color: @prim;
+                border: 1px solid @prim;
             }
 
             &.product {

src/styles/font.less

@@ -25,6 +25,11 @@
     -moz-osx-font-smoothing: grayscale;
 }
 
+.font_family-icon-shaixuan1:before{
+    content: "\e773";
+    font-size: 18px;
+}
+
 .font_family-icon-a-iconarrowdown1:before {
     content: '\e64c';
 }

src/views/product/HopeMarket.vue

@@ -70,17 +70,26 @@
                         </template>
                     </van-tab>
                 </van-tabs>
-                <div class="allCategories" @click="categorySelections">
+                <div class="allCategories" :class="{ prim: search }" @click="categorySelections">
                     <div class="allCategories_con" :class="categorySelection ? 'allCategories_con_one' : ''">
                         全部类目
                     </div>
-                    <img
-                        src="@assets/icon-quanbuleimu@3x.png"
-                        alt=""
-                        class="allCategories_img"
-                        v-if="categorySelection == false"
-                    />
-                    <img src="@assets/icon-quanbuleimuone@3x.png" alt="" class="allCategories_img" v-else />
+                    <van-icon name="icon-shaixuan1" class-prefix="font_family" />
+                </div>
+            </div>
+            <div class="selects" v-if="search">
+                <div class="select-info">
+                    {{ setting.name }}
+                </div>
+                <div class="select-info" v-if="search">
+                    {{ search }}
+                </div>
+                <div class="select-info" v-if="rarityLabel">
+                    {{ rarityLabel }}
+                </div>
+
+                <div class="select-info" v-if="productName">
+                    {{ productName }}
                 </div>
             </div>
             <div class="series_selection" v-if="categorySelection == true">
@@ -243,6 +252,7 @@ export default {
             settings: [],
             normalHeight: 0,
             settingId: 0,
+            setting: {},
             showSetting: false,
             barShow: false,
             notLike: '',
@@ -362,6 +372,7 @@ export default {
     },
     methods: {
         selectEvent(info) {
+            this.setting = info.setting;
             this.search = info.search;
             this.rarityLabel = info.rarityLabel;
             this.productName = info.productName;
@@ -638,6 +649,7 @@ export default {
         justify-content: space-between;
         .allCategories {
             display: flex;
+            align-items: center;
             .allCategories_con {
                 font-size: 14px;
                 font-family: PingFangSC-Regular, PingFang SC;
@@ -649,12 +661,26 @@ export default {
                 font-weight: bold;
                 color: #43ce00;
             }
+            .font_family {
+                color: #939599;
+                margin-left: 2px;
+            }
             .allCategories_img {
                 width: 18px;
                 height: 18px;
                 margin-left: 2px;
                 padding-top: 3px;
             }
+
+            &.prim {
+                .allCategories_con {
+                    color: #43ce00;
+                }
+
+                .font_family {
+                    color: #43ce00;
+                }
+            }
         }
     }
     .series_selection {
@@ -837,4 +863,28 @@ export default {
 /deep/ .van-overlay {
     z-index: 6;
 }
+
+.selects {
+    .flex();
+    padding: 0 16px 12px;
+    background-color: #222426;
+    overflow: hidden;
+    .select-info {
+        font-size: 12px;
+        color: #43ce00;
+        line-height: 28px;
+        border-radius: 4px;
+        border: 1px solid #43ce00;
+        flex-grow: 1;
+        overflow: hidden;
+        white-space: nowrap;
+        text-overflow: ellipsis;
+        padding: 0 12px;
+        text-align: center;
+    }
+
+    .select-info + .select-info {
+        margin-left: 10px;
+    }
+}
 </style>