1230

src/components/filter/ProductCustomCateId.vue

@@ -0,0 +1,201 @@
+<template>
+    <div class="filterInfo" :class="`filter--${size}`">
+        <block v-if="size === 'big'">
+            <h3 class="filterInfoTitle">产品目录</h3>
+        </block>
+        <div class="filter-btn" :class="{ noChoose: !valueInfo }" @click="show">
+            <h3 class="fontNormal">{{ valueInfo ? getName(valueInfo) : size === 'big' ? '请选择' : '目录' }}</h3>
+            <van-icon v-if="size === 'big'" color="#CBCFDB" :size="18" name="arrow" />
+            <van-icon
+                v-if="size === 'small'"
+                :color="valueInfo ? $colors.warn : '#878D99'"
+                :size="10"
+                name="arrow-down"
+            />
+        </div>
+
+        <van-popup :show="showPopup" round position="bottom" custom-style="height: 300px" @close="showPopup = false">
+            <div class="bar">
+                <div class="left-icon">
+                    <van-icon v-if="headerInfo" color="#5E636D" @click="back" :size="18" name="arrow-left" />
+                </div>
+                <h3>产品目录</h3>
+                <van-icon color="#5E636D" :size="18" name="cross" @click="showPopup = false" />
+            </div>
+            <van-cell-group :border="false">
+                <block v-for="item in showList" :key="item.id">
+                    <van-cell
+                        @click="chooseList(item)"
+                        :border="false"
+                        :custom-class="chooseId === item.id ? 'active' : ''"
+                    >
+                        <h3 class="fontNormal" slot="title">{{ getName(item) }}</h3>
+                        <van-icon
+                            slot="right-icon"
+                            :size="18"
+                            :color="$colors.warn"
+                            v-if="chooseId === item.id"
+                            name="success"
+                        />
+                    </van-cell>
+                </block>
+            </van-cell-group>
+        </van-popup>
+    </div>
+</template>
+<script>
+import { getArray } from '../../utils/commont';
+export default {
+    props: {
+        value: {
+            type: [Number, String],
+            default: 0
+        },
+        size: {
+            type: String,
+            default: 'big'
+        },
+        list: {
+            type: Array,
+            default: () => {
+                return [];
+            }
+        }
+    },
+    data() {
+        return {
+            showPopup: false,
+            chooseId: 0,
+            main: null
+        };
+    },
+    computed: {
+        showList() {
+            return [
+                {
+                    chName: '全部产品',
+                    id: 0
+                },
+                ...this.list
+            ];
+        },
+        chooseInfo() {
+            const list = [...this.list];
+            return list.find(item => {
+                return item.id === this.chooseId;
+            });
+        },
+        valueInfo() {
+            const list = [...this.showList];
+            return list.find(item => {
+                return item.id === Number(this.value);
+            });
+        }
+    },
+    mounted() {},
+    methods: {
+        chooseList(info) {
+            this.chooseId = info.id;
+            this.backChoose();
+        },
+        back() {
+            if (this.headerInfo) {
+                this.chooseId = this.headerInfo.parent || 0;
+            }
+        },
+        backChoose(id) {
+            this.$emit('input', id || this.chooseId);
+            this.showPopup = false;
+        },
+        show() {
+            this.chooseId = Number(this.value || '0');
+            this.showPopup = true;
+        }
+    }
+};
+</script>
+<style lang="less">
+.van-popup {
+    .bar {
+        position: sticky;
+        top: 0;
+        height: 48px;
+        background: #ffffff;
+        display: flex;
+        align-items: center;
+        padding: 0 0 0 16px;
+        margin-bottom: 6px;
+        z-index: 20;
+        h3 {
+            flex-grow: 1;
+            text-align: center;
+            padding: 0 10px;
+        }
+        .left-icon {
+            width: 18px;
+        }
+        .van-icon.van-icon-cross {
+            padding-right: 16px;
+        }
+    }
+
+    .van-cell {
+        padding: 12px 40px;
+
+        &.active {
+            h3 {
+                color: @warn;
+            }
+        }
+    }
+}
+.filterInfo {
+    &.filter--big {
+        padding: 0 16px 20px;
+        .filter-btn {
+            height: 44px;
+            padding: 0 16px;
+            h3 {
+                padding-right: 10px;
+            }
+            &.noChoose {
+                h3 {
+                    color: #bcc1cc;
+                }
+            }
+        }
+    }
+    &.filter--small {
+        .filter-btn {
+            height: 28px;
+            padding: 0 5px 0 10px;
+            background-color: #fff4e5;
+            h3 {
+                font-size: 12px;
+                color: @warn;
+                padding-right: 2px;
+            }
+
+            &.noChoose {
+                background: #f2f3f5;
+                h3 {
+                    color: #878d99;
+                }
+            }
+        }
+    }
+    h4 {
+        padding: 14px 0;
+    }
+    .filter-btn {
+        background: @bg;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+
+        h3 {
+            flex-grow: 1;
+        }
+    }
+}
+</style>

src/components/filter/ProductTags.vue

@@ -136,7 +136,7 @@ export default {
                 this.chooseId = info.id;
             } else {
                 this.chooseId = info.id;
-                this.backChoose();
+                this.backChoose(info.id);
             }
         },
         back() {
@@ -145,7 +145,12 @@ export default {
             }
         },
         backChoose(id) {
-            this.$emit('input', id || this.chooseId);
+            if (this.value === id) {
+                this.$emit('input', 0);
+            } else {
+                this.$emit('input', id || this.chooseId);
+            }
+
             this.showPopup = false;
         },
         show() {

src/mixins/collection.js

@@ -74,7 +74,7 @@ export default {
                             userId: this.$store.state.userInfo.id,
                             cid: this.cId,
                             type: this.collectionType,
-                            isCollection: true,
+                            isCollect: true,
                             del: false
                         }
                     },

src/mixins/searchList.js

@@ -234,6 +234,7 @@ export default {
                     this.brand = this.filterInfo.brand;
                     this.tagIds = this.filterInfo.tagIds;
                     this.applicationField = this.filterInfo.applicationField;
+                    this.customCateId = this.filterInfo.customCateId;
                     this.page = 1;
                     this.getData();
                 }

src/pagesHome/FilterPage.vue

@@ -6,9 +6,15 @@
 </config>
 <template>
     <div>
+        <product-customCateId-filter
+            v-model="customCateId"
+            :list="customCateList"
+            @input="refreash"
+            v-if="!!vendorInfoId"
+        ></product-customCateId-filter>
         <product-category-filter v-model="categoryIds" :firstCategory="firstCategory"></product-category-filter>
-        <country v-model="continent" :country.sync="countries"></country>
-        <product-brand v-model="brand" v-if="pageType === 'product'"></product-brand>
+        <country v-if="!vendorInfoId" v-model="continent" :country.sync="countries"></country>
+        <product-brand v-model="brand" v-if="pageType === 'product' && !vendorInfoId"></product-brand>
         <product-tags v-model="tagIds" v-if="pageType === 'product'"></product-tags>
         <enterprise-type v-model="enterpriseType" v-if="pageType === 'vendor'"></enterprise-type>
         <application v-model="applicationField"></application>
@@ -28,10 +34,11 @@
 <script>
 import ProductCategoryFilter from '../components/filter/ProductCategory';
 import Country from '../components/filter/Country';
-import ProductTags from '../components/filter/ProductTags';
+import ProductTags from '../components/filter/ProductTags.vue';
 import Application from '../components/filter/Application';
 import EnterpriseType from '../components/filter/EnterpriseType';
 import ProductBrand from '../components/filter/ProductBrand.vue';
+import ProductCustomCateIdFilter from '../components/filter/ProductCustomCateId.vue';
 export default {
     data() {
         return {
@@ -43,7 +50,10 @@ export default {
             applicationField: '',
             enterpriseType: '',
             firstCategory: '',
-            continent: ''
+            continent: '',
+            vendorInfoId: 0,
+            customCateId: 0,
+            customCateList: []
         };
     },
     onShow() {
@@ -63,6 +73,19 @@ export default {
             this.tagIds = this.$mp.options.tagIds;
             this.applicationField = this.$mp.options.applicationField;
             this.brand = this.$mp.options.brand;
+            this.customCateId = this.$mp.options.customCateId || 0;
+            this.vendorInfoId = this.$mp.options.vendorInfoId || 0;
+
+            if (this.$mp.options.vendorInfoId) {
+                this.$http
+                    .get('/customCategory/my', {
+                        vendorId: this.$mp.options.vendorInfoId
+                    })
+                    .then(res => {
+                        this.customCateList = res;
+                        console.log(this.customCateList);
+                    });
+            }
         }
     },
     components: {
@@ -71,7 +94,8 @@ export default {
         ProductTags,
         Application,
         EnterpriseType,
-        ProductBrand
+        ProductBrand,
+        ProductCustomCateIdFilter
     },
     methods: {
         restart() {
@@ -82,6 +106,7 @@ export default {
             this.applicationField = '';
             this.enterpriseType = '';
             this.continent = '';
+            this.customCateId = 0;
         },
         submit() {
             this.$store.commit('setFilterInfo', {
@@ -92,7 +117,8 @@ export default {
                 tagIds: this.tagIds,
                 applicationField: this.applicationField,
                 enterpriseType: this.enterpriseType,
-                firstCategory: this.firstCategory
+                firstCategory: this.firstCategory,
+                customCateId: this.customCateId
             });
             wx.navigateBack({
                 success: () => {

src/pagesVendor/Detail.vue

@@ -25,6 +25,8 @@
             scroll-y
             class="scrollView"
             efresher-background="#0F264D"
+            scroll-anchoring
+            :scroll-into-view="scrollId"
         >
             <div class="vendor" id="vendor">
                 <van-image :radius="4" :src="vendorInfo.logo" fit="cover" :width="60" :height="60" />
@@ -43,7 +45,8 @@
                     <div class="text">{{ isCollection ? '已关注' : '关注' }}</div>
                 </div>
             </div>
-            <div class="main" id="main">
+            <div class="line" id="top"></div>
+            <div class="main">
                 <van-sticky :scroll-top="scrollTop" :offset-top="offsetTop">
                     <van-tabs :sticky="false" :active="active" :line-height="0" @change="active = $event.detail.index">
                         <van-tab title="关于展商"> </van-tab>
@@ -51,6 +54,9 @@
                         <van-tab title="新闻资讯"> </van-tab>
                     </van-tabs>
                 </van-sticky>
+            </div>
+
+            <div id="main" class="main">
                 <about
                     v-if="active === 0"
                     :info="vendorInfo"
@@ -105,7 +111,8 @@ export default {
             scrollView: null,
             main: null,
             scrollTop: 0,
-            offsetTop: 0
+            offsetTop: 0,
+            scrollId: ''
         };
     },
     computed: {
@@ -124,10 +131,10 @@ export default {
             this.cId = this.$mp.options.id;
         },
         onScroll(event) {
+            this.scrollTop = event.detail.scrollTop;
             wx.createSelectorQuery()
                 .select('#scroller')
                 .boundingClientRect(res => {
-                    this.scrollTop = event.detail.scrollTop;
                     this.offsetTop = res.top;
                 })
                 .exec();
@@ -167,6 +174,7 @@ export default {
             .exec();
     },
     onPageScroll(e) {
+        console.log(e);
         if (e.scrollTop < 115) {
             this.showConnect = false;
         } else {
@@ -179,6 +187,14 @@ export default {
             path: '/pagesVendor/Detail?id=' + this.vendorInfo.id,
             imageUrl: this.getList(this.vendorInfo.logo) + '?x-oss-process=image/resize,m_pad,h_400,w_500,color_FFFFFF'
         };
+    },
+    watch: {
+        active() {
+            this.scrollId = 'top';
+            setTimeout(() => {
+                this.scrollId = '';
+            }, 200);
+        }
     }
 };
 </script>

src/pagesVendor/ProductList.vue

@@ -22,22 +22,23 @@
                     @changeShowType="changeShowType"
                 >
                     <span slot="filter1">
-                        <product-category-filter
+                        <product-customCateId-filter
                             size="small"
-                            v-model="categoryIds"
+                            v-model="customCateId"
+                            :list="customCateList"
                             @input="refreash"
-                        ></product-category-filter>
+                        ></product-customCateId-filter>
                     </span>
                     <span slot="filter2">
-                        <country-filter
+                        <product-category-filter
                             size="small"
-                            v-model="continent"
-                            :country.sync="countries"
+                            v-model="categoryIds"
                             @input="refreash"
-                        ></country-filter>
+                        ></product-category-filter>
                     </span>
+
                     <span slot="filter3">
-                        <product-brand-filter size="small" v-model="brand" @input="refreash"></product-brand-filter>
+                        <product-tags-filter size="small" v-model="tagIds" @input="refreash"></product-tags-filter>
                     </span>
                 </filter-sort-bar>
             </van-sticky>
@@ -58,11 +59,12 @@
 <script>
 import SearchBar from '../components/bar/SearchBarWithValue';
 import searchList from '../mixins/searchList';
-import FilterSortBar from '../components/bar/FilterSortBar';
-import SortList from '../components/SortList';
+import FilterSortBar from '../components/bar/FilterSortBar.vue';
+import SortList from '../components/SortList.vue';
 import ProductGrid from '../components/product/GridNormal';
-import ProductBrandFilter from '../components/filter/ProductBrand';
+import ProductTagsFilter from '../components/filter/ProductTags';
 import ProductCategoryFilter from '../components/filter/ProductCategory';
+import ProductCustomCateIdFilter from '../components/filter/ProductCustomCateId.vue';
 import CountryFilter from '../components/filter/Country';
 import ProductRow from '../components/product/RowNormal.vue';
 import { mapState } from 'vuex';
@@ -80,7 +82,9 @@ export default {
             main: null,
             ratio: 1,
             vendorInfoId: '',
-            defaultCategoryId: ''
+            defaultCategoryId: '',
+            customCateId: 0,
+            customCateList: []
         };
     },
     mixins: [searchList],
@@ -101,19 +105,23 @@ export default {
                 applicationField: this.applicationField,
                 query: JSON.stringify({
                     vendorInfoId: this.vendorInfoId
-                })
+                }),
+                customCateId: this.customCateId || ''
             };
         },
         filterQuery() {
             return {
                 pageType: 'product',
+                vendorInfoId: this.vendorInfoId,
                 categoryIds: this.categoryIds,
                 countries: this.countries,
                 continent: this.continent,
                 searchTop: this.searchTop,
                 tagIds: this.tagIds,
                 applicationField: this.applicationField,
-                brand: this.brand
+                brand: this.brand,
+                customCateId: this.customCateId,
+                customCateList: this.customCateList
             };
         }
     },
@@ -134,6 +142,15 @@ export default {
         }
         if (options.vendorId) {
             this.vendorInfoId = options.vendorId;
+
+            this.$http
+                .get('/customCategory/my', {
+                    vendorId: options.vendorId
+                })
+                .then(res => {
+                    this.customCateList = res;
+                    console.log(this.customCateList);
+                });
         }
         this.getData();
     },
@@ -147,9 +164,9 @@ export default {
         FilterSortBar,
         SortList,
         ProductGrid,
-        ProductBrandFilter,
+        ProductTagsFilter,
         ProductCategoryFilter,
-        CountryFilter,
+        ProductCustomCateIdFilter,
         SearchBar,
         ProductRow
     }