1216

src/components/filter/Country.vue

@@ -70,6 +70,10 @@ export default {
         size: {
             type: String,
             default: 'big'
+        },
+        country: {
+            type: String,
+            default: ''
         }
     },
     data() {
@@ -146,7 +150,30 @@ export default {
             }
         },
         backChoose(value) {
-            this.$emit('input', value || this.chooseId || '');
+            this.$nextTick(() => {
+                console.log(this.chooseInfo);
+                if (value) {
+                    const countries = [...(this.headerInfo.children || [])]
+                        .map(item => {
+                            return item.value;
+                        })
+                        .join(',');
+                    this.$emit('update:country', countries);
+                    this.$emit('input', value || this.chooseId || '');
+                } else if (this.chooseInfo && this.chooseInfo.children) {
+                    const countries = [...(this.chooseInfo.children || [])]
+                        .map(item => {
+                            return item.value;
+                        })
+                        .join(',');
+                    this.$emit('update:country', countries);
+                    this.$emit('input', value || this.chooseId || '');
+                } else {
+                    this.$emit('update:country', value || this.chooseId || '');
+                    this.$emit('input', value || this.chooseId || '');
+                }
+            });
+
             this.showPopup = false;
         },
         show() {

src/components/filter/ProductBrand.vue

@@ -0,0 +1,208 @@
+<template>
+    <div class="filterInfo" :class="`filter--${size}`">
+        <block v-if="size === 'big'">
+            <h3 class="filterInfoTitle">{{ $t('chan-pin-pin-pai') }}</h3>
+        </block>
+        <div class="filter-btn" :class="{ noChoose: !valueInfo }" @click="show">
+            <h3 class="fontNormal">{{ valueInfo ? valueInfo : size === 'big' ? '请选择' : $t('pin-pai') }}</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 color="#5E636D" @click="showPopup = false" :size="18" name="cross" />
+                </div>
+                <h3>{{ $t('xuan-ze-pin-pai') }}</h3>
+                <van-button :color="$colors.warn" size="small" plain @click="backChoose">确认</van-button>
+            </div>
+            <van-cell-group :border="false">
+                <!-- <van-cell
+                    @click="backChoose(headerInfo.id)"
+                    v-if="headerInfo"
+                    :border="false"
+                    :custom-class="chooseId === headerInfo.id ? 'active' : ''"
+                >
+                    <h3 class="fontNormal" slot="title">全部{{ getName(headerInfo) }}类别</h3>
+                    <van-icon
+                        slot="right-icon"
+                        :size="18"
+                        :color="$colors.warn"
+                        v-if="chooseId === headerInfo.id"
+                        name="success"
+                    />
+                </van-cell> -->
+                <block v-for="item in showList" :key="item.id">
+                    <van-cell
+                        @click="choose(item)"
+                        :border="false"
+                        :custom-class="chooseList.includes(item.chName) ? 'active' : ''"
+                    >
+                        <h3 class="fontNormal" slot="title">{{ getName(item) }}</h3>
+                        <van-icon
+                            slot="right-icon"
+                            :size="18"
+                            :color="$colors.warn"
+                            v-if="chooseList.includes(item.chName)"
+                            name="success"
+                        />
+                    </van-cell>
+                </block>
+            </van-cell-group>
+        </van-popup>
+    </div>
+</template>
+<script>
+import { getArray } from '../../utils/commont';
+export default {
+    props: {
+        value: {
+            type: String,
+            default: ''
+        },
+        size: {
+            type: String,
+            default: 'big'
+        }
+    },
+    data() {
+        return {
+            showPopup: false,
+            list: [],
+            chooseList: [],
+            main: null
+        };
+    },
+    computed: {
+        showList() {
+            const list = [...this.list];
+            return list;
+        },
+        valueInfo() {
+            const list = [...this.list];
+            const _values = this.value ? this.value.split(',') : [];
+            return list
+                .filter(item => {
+                    return _values.includes(item.chName);
+                })
+                .map(item => {
+                    return this.getName(item);
+                })
+                .join(',');
+        }
+    },
+    mounted() {
+        this.$http.get('/productTag/brand').then(res => {
+            this.list = getArray(res, '', 2);
+        });
+    },
+    methods: {
+        choose(info) {
+            const list = [...this.chooseList];
+            if (list.includes(info.chName)) {
+                list.splice(list.indexOf(info.chName), 1);
+            } else {
+                list.push(info.chName);
+            }
+            this.chooseList = list;
+        },
+        backChoose() {
+            this.$emit('input', this.chooseList.join(','));
+            this.showPopup = false;
+        },
+        show() {
+            this.chooseList = this.value ? this.value.split(',') : [];
+            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 16px;
+        margin-bottom: 6px;
+        z-index: 20;
+        h3 {
+            flex-grow: 1;
+            text-align: center;
+            padding: 0 10px;
+        }
+        .left-icon {
+            width: 18px;
+        }
+        --button-border-width: 0px;
+    }
+
+    .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: #f5f7fa;
+        border-radius: 4px;
+        display: flex;
+        align-items: center;
+
+        h3 {
+            flex-grow: 1;
+        }
+    }
+}
+</style>

src/components/product/Grid.vue

@@ -47,5 +47,8 @@ export default {
         }
     }
     background-color: #fff;
+    &:active {
+        background-color: darken(#fff, 5);
+    }
 }
 </style>

src/components/product/GridBig.vue

@@ -54,5 +54,9 @@ export default {
         }
     }
     background-color: #fff;
+
+    &:active {
+        background-color: darken(#fff, 5);
+    }
 }
 </style>

src/components/product/Parameter.vue

@@ -10,7 +10,7 @@
             <div class="parameter-info" v-else>
                 <div class="parameter-pa" v-for="child in item.children" :key="child.id">
                     <div class="parameter-pa1">{{ getName(child) }}</div>
-                    <div class="parameter-pa1">{{ item.value || '-' }}</div>
+                    <div class="parameter-pa1">{{ child.value || '-' }}</div>
                 </div>
             </div>
         </div>

src/components/select/Country.vue

@@ -68,6 +68,10 @@ export default {
         province: {
             type: String,
             default: ''
+        },
+        continent: {
+            type: String,
+            default: ''
         }
     },
     data() {
@@ -108,7 +112,7 @@ export default {
             });
         },
         valueInfo() {
-            const list = [this.country, this.province, this.city];
+            const list = [this.continent, this.country, this.province, this.city];
 
             return list
                 .filter(item => {
@@ -150,17 +154,22 @@ export default {
         backChoose(value) {
             console.log(this.valueList);
             if (this.valueList.length > 0) {
-                this.$emit('update:country', this.valueList[0]);
+                this.$emit('update:continent', this.valueList[0]);
             } else {
-                this.$emit('update:country', '');
+                this.$emit('update:continent', '');
             }
             if (this.valueList.length > 1) {
-                this.$emit('update:province', this.valueList[1]);
+                this.$emit('update:country', this.valueList[1]);
             } else {
-                this.$emit('update:province', '');
+                this.$emit('update:country', '');
             }
             if (this.valueList.length > 2) {
-                this.$emit('update:city', this.valueList[2]);
+                this.$emit('update:province', this.valueList[2]);
+            } else {
+                this.$emit('update:province', '');
+            }
+            if (this.valueList.length > 3) {
+                this.$emit('update:city', this.valueList[3]);
             } else {
                 this.$emit('update:city', '');
             }
@@ -181,10 +190,11 @@ export default {
             const chooseInfo = _list.find(item => {
                 return item.value === id;
             });
+            console.log(chooseInfo);
             if (chooseInfo.parent) {
                 return this.getParent(chooseInfo.parent, [...[id], ...list]);
             } else {
-                return list;
+                return [chooseInfo.value, ...list];
             }
         }
     }

src/locales/zh.json

@@ -145,5 +145,7 @@
   "zi-xun-ren-shu": "咨询人数",
   "zhan-ting-fang-wen-ci-shu": "展厅访问次数",
   "zhan-ting-liu-lan-liang": "展厅浏览量",
-  "zhan-ting-fang-ke-ren-shu": "展厅访客人数"
+  "zhan-ting-fang-ke-ren-shu": "展厅访客人数",
+  "xuan-ze-pin-pai": "选择品牌",
+  "pin-pai": "品牌"
 }

src/mixins/searchList.js

@@ -21,7 +21,8 @@ export default {
             httpType: 'post',
             pushList: true, //是否往list后面push
             finish: false,
-            searchTop: 0
+            searchTop: 0,
+            noSearch: false
         };
     },
     computed: {
@@ -68,6 +69,9 @@ export default {
             if (this.listQuery) {
                 data = { ...data, ...this.listQuery };
             }
+            if (this.noSearch) {
+                delete data.search;
+            }
 
             const back = () => {
                 if (this.httpType === 'post') {
@@ -210,13 +214,15 @@ export default {
             if (this.filterQuery.pageType === 'vendor') {
                 this.categoryIds = this.filterInfo.categoryIds;
                 this.countries = this.filterInfo.countries;
+                this.continent = this.filterInfo.continent;
                 this.enterpriseType = this.filterInfo.enterpriseType;
                 this.page = 1;
                 this.getData();
             } else if (this.filterQuery.pageType === 'product') {
                 this.categoryIds = this.filterInfo.categoryIds;
                 this.countries = this.filterInfo.countries;
-                this.brands = this.filterInfo.brand;
+                this.continent = this.filterInfo.continent;
+                this.brand = this.filterInfo.brand;
                 this.tagIds = this.filterInfo.tagIds;
                 this.applicationField = this.filterInfo.applicationField;
                 this.page = 1;

src/pages/Home.vue

@@ -96,30 +96,31 @@
                 <van-tabs :active="hotActive" @change="hotActive = $event.detail.index" :ellipsis="false">
                     <van-tab :title="item.name" v-for="item in hotProductsList" :key="item.id"></van-tab>
                 </van-tabs>
-                <div class="van-content" v-if="nowProductsList.length > 0">
-                    <product-grid-big :info="mainProductInfo"></product-grid-big>
-                    <grid-big></grid-big>
-                    <swiper
-                        :style="{ height: swiperHeight + 'rpx' }"
-                        :current="hotSwiperIndex"
-                        @change="hotSwiperIndex = $event.detail.current"
-                    >
-                        <swiper-item v-for="(list, index) in swiperProduct" :key="index">
-                            <div class="product-list">
-                                <div class="col-3" v-for="item in list" :key="item.id">
-                                    <product-grid :info="item" :clo="3" :padding="3"></product-grid>
+                <div class="van-content" v-if="nowProductsList.length > 0 || mainProductInfo">
+                    <product-grid-big :info="mainProductInfo" v-if="mainProductInfo"></product-grid-big>
+                    <div v-if="nowProductsList.length > 0">
+                        <swiper
+                            :style="{ height: swiperHeight + 'rpx' }"
+                            :current="hotSwiperIndex"
+                            @change="hotSwiperIndex = $event.detail.current"
+                        >
+                            <swiper-item v-for="(list, index) in swiperProduct" :key="index">
+                                <div class="product-list">
+                                    <div class="col-3" v-for="item in list" :key="item.id">
+                                        <product-grid :info="item" :clo="3" :padding="3"></product-grid>
+                                    </div>
                                 </div>
-                            </div>
-                        </swiper-item>
-                    </swiper>
-
-                    <div class="dots">
-                        <div
-                            class="dot"
-                            :class="{ active: index === hotSwiperIndex }"
-                            v-for="(item, index) in swiperProduct"
-                            :key="index"
-                        ></div>
+                            </swiper-item>
+                        </swiper>
+
+                        <div class="dots">
+                            <div
+                                class="dot"
+                                :class="{ active: index === hotSwiperIndex }"
+                                v-for="(item, index) in swiperProduct"
+                                :key="index"
+                            ></div>
+                        </div>
                     </div>
                 </div>
 
@@ -271,7 +272,12 @@ export default {
         ...mapState(['userInfo', 'barHeight']),
         hotProductsList() {
             return this.hotProducts.map(item => {
-                return { name: this.getName(item), products: item.products, mainProduct: item.mainProduct };
+                return {
+                    name: this.getName(item),
+                    img: item.img,
+                    products: item.products,
+                    mainProduct: item.mainProduct
+                };
             });
         },
         nowProductsList() {
@@ -281,10 +287,11 @@ export default {
         },
         nowHotProductInfo() {
             const allList = [...this.hotProductsList];
-            return allList[Number(this.activeIndex)] ? allList[Number(this.activeIndex)] : {};
+            return allList[Number(this.hotActive)] ? allList[Number(this.hotActive)] : {};
         },
         mainProductInfo() {
-            return { ...this.nowHotProductInfo }.mainProduct;
+            const info = { ...this.nowHotProductInfo }.mainProduct;
+            return { ...info, img: this.nowHotProductInfo.img || info.img };
         },
         swiperProduct() {
             const list = [...this.nowProductsList];

src/pagesHome/Brand.vue

@@ -52,7 +52,12 @@
                         ></product-category-filter>
                     </span>
                     <span slot="filter2">
-                        <country-filter size="small" v-model="countries" @input="refreash"></country-filter>
+                        <country-filter
+                            size="small"
+                            v-model="continent"
+                            :country.sync="countries"
+                            @input="refreash"
+                        ></country-filter>
                     </span>
                     <span slot="filter3">
                         <enterprise-type-filter
@@ -106,6 +111,7 @@ export default {
             ratio: 0,
             categoryIds: '',
             countries: '',
+            continent: '',
             enterpriseType: '',
             showType: 'row'
         };
@@ -117,6 +123,7 @@ export default {
                 vendorSort: this.sort,
                 categoryIds: this.categoryIds,
                 countries: this.countries,
+                continent: this.continent,
                 enterpriseType: this.enterpriseType
             };
         },
@@ -125,6 +132,7 @@ export default {
                 pageType: 'vendor',
                 categoryIds: this.categoryIds,
                 countries: this.countries,
+                continent: this.continent,
                 enterpriseType: this.enterpriseType,
                 searchTop: this.searchTop
             };

src/pagesHome/Edit.vue

@@ -45,6 +45,7 @@
                     :country.sync="myInfo.country"
                     :city.sync="myInfo.city"
                     :province.sync="myInfo.province"
+                    :continent.sync="myInfo.continent"
                 ></country-select>
             </van-cell>
             <van-cell title="所属行业" is-link @click="$refs.industry.show()">

src/pagesHome/FilterPage.vue

@@ -7,7 +7,8 @@
 <template>
     <div>
         <product-category-filter v-model="categoryIds" :firstCategory="firstCategory"></product-category-filter>
-        <country v-model="countries"></country>
+        <country v-model="continent" :country.sync="countries"></country>
+        <product-brand v-model="brand" v-if="pageType === 'product'"></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" v-if="pageType === 'product'"></application>
@@ -30,6 +31,7 @@ import Country from '../components/filter/Country';
 import ProductTags from '../components/filter/ProductTags';
 import Application from '../components/filter/Application';
 import EnterpriseType from '../components/filter/EnterpriseType';
+import ProductBrand from '../components/filter/ProductBrand.vue';
 export default {
     data() {
         return {
@@ -40,7 +42,8 @@ export default {
             tagIds: '',
             applicationField: '',
             enterpriseType: '',
-            firstCategory: ''
+            firstCategory: '',
+            continent: ''
         };
     },
     onShow() {
@@ -48,13 +51,16 @@ export default {
         if (this.$mp.options.pageType === 'vendor') {
             this.categoryIds = this.$mp.options.categoryIds;
             this.countries = this.$mp.options.countries;
+            this.continent = this.$mp.options.continent;
             this.enterpriseType = this.$mp.options.enterpriseType;
         } else if (this.$mp.options.pageType === 'product') {
             this.categoryIds = this.$mp.options.categoryIds;
             this.countries = this.$mp.options.countries;
             this.firstCategory = this.$mp.options.firstCategory;
+            this.continent = this.$mp.options.continent;
             this.tagIds = this.$mp.options.tagIds;
             this.applicationField = this.$mp.options.applicationField;
+            this.brand = this.$mp.options.brand;
         }
     },
     components: {
@@ -62,7 +68,8 @@ export default {
         Country,
         ProductTags,
         Application,
-        EnterpriseType
+        EnterpriseType,
+        ProductBrand
     },
     methods: {
         restart() {
@@ -72,11 +79,13 @@ export default {
             this.tagIds = '';
             this.applicationField = '';
             this.enterpriseType = '';
+            this.continent = '';
         },
         submit() {
             this.$store.commit('setFilterInfo', {
                 categoryIds: this.categoryIds,
                 countries: this.countries,
+                continent: this.continent,
                 brand: this.brand,
                 tagIds: this.tagIds,
                 applicationField: this.applicationField,

src/pagesHome/Product.vue

@@ -46,10 +46,15 @@
                         ></product-category-filter>
                     </span>
                     <span slot="filter2">
-                        <country-filter size="small" v-model="countries" @input="refreash"></country-filter>
+                        <country-filter
+                            size="small"
+                            v-model="continent"
+                            :country.sync="countries"
+                            @input="refreash"
+                        ></country-filter>
                     </span>
                     <span slot="filter3">
-                        <product-tags-filter size="small" v-model="tagIds" @input="refreash"></product-tags-filter>
+                        <product-brand-filter size="small" v-model="brand" @input="refreash"></product-brand-filter>
                     </span>
                 </filter-sort-bar>
             </van-sticky>
@@ -75,7 +80,7 @@ import FilterSortBar from '../components/bar/FilterSortBar';
 import SortList from '../components/SortList';
 import ProductGrid from '../components/product/GridNormal';
 import ProductRow from '../components/product/RowNormal.vue';
-import ProductTagsFilter from '../components/filter/ProductTags';
+import ProductBrandFilter from '../components/filter/ProductBrand';
 import ProductCategoryFilter from '../components/filter/ProductCategory';
 import CountryFilter from '../components/filter/Country';
 import { mapState } from 'vuex';
@@ -86,7 +91,8 @@ export default {
             banners: [],
             categoryIds: '',
             countries: '',
-            brands: '',
+            continent: '',
+            brand: '',
             url: '/product/show',
             tagIds: '',
             applicationField: '',
@@ -108,7 +114,8 @@ export default {
                 categoryIds: this.categoryIds || this.defaultCategoryId,
                 countries: this.countries,
                 tagIds: this.tagIds,
-                applicationField: this.applicationField
+                applicationField: this.applicationField,
+                brand: this.brand
             };
         },
         filterQuery() {
@@ -117,9 +124,11 @@ export default {
                 firstCategory: this.defaultCategoryId,
                 categoryIds: this.categoryIds,
                 countries: this.countries,
+                continent: this.continent,
                 searchTop: this.searchTop,
                 tagIds: this.tagIds,
-                applicationField: this.applicationField
+                applicationField: this.applicationField,
+                brand: this.brand
             };
         },
         defaultCategoryId() {
@@ -167,7 +176,7 @@ export default {
         FilterSortBar,
         SortList,
         ProductGrid,
-        ProductTagsFilter,
+        ProductBrandFilter,
         ProductCategoryFilter,
         CountryFilter,
         ProductRow

src/pagesMine/ReadRecords.vue

@@ -4,7 +4,7 @@
 }
 </config>
 <template>
-    <sort-list :empty="empty" :loading="loading" :finish="finish" top="0px + 172rpx">
+    <sort-list :empty="empty" :loading="loading" :finish="finish" :top="`0px + ${barHeight}px`">
         <div class="product-list">
             <div class="clo-2" v-for="item in list" :key="item.id">
                 <product-grid :info="item"></product-grid>
@@ -16,6 +16,7 @@
 import SortList from '../components/SortList.vue';
 import searchList from '../mixins/searchList';
 import ProductGrid from '../components/product/GridNormal.vue';
+import { mapState } from 'vuex';
 export default {
     components: { SortList, ProductGrid },
     data() {
@@ -24,10 +25,12 @@ export default {
             httpType: 'get',
             type: 'PRODUCT',
             chooseList: [],
-            isEdit: false
+            isEdit: false,
+            noSearch: true
         };
     },
     computed: {
+        ...mapState(['barHeight']),
         listQuery() {
             return {
                 type: this.type,

src/pagesProduct/Detail.vue

@@ -135,6 +135,7 @@ import collection from '../mixins/collection';
 import CustomBar from '../components/bar/CustomBar.vue';
 import Parameter from '../components/product/Parameter.vue';
 import { mapState } from 'vuex';
+import { saveBrowse } from '../utils/commont';
 export default {
     components: { CustomBar, Banner, Parameter },
     data() {
@@ -218,6 +219,10 @@ export default {
                 .then(res => {
                     this.vendorInfo = res;
                 });
+
+            if (this.$store.state.userInfo) {
+                saveBrowse(this.productId);
+            }
         }
 
         setTimeout(() => {
@@ -451,6 +456,13 @@ export default {
     display: block;
     margin: 0 0px;
 }
+.detail {
+    video {
+        width: 345px;
+        height: 180px;
+        display: block;
+    }
+}
 
 .fixed-bottom {
     height: 60px;

src/utils/commont.js

@@ -45,4 +45,18 @@ function getArray(list, parent, num) {
     }
 }
 
-export { getBanner, getArray };
+function saveBrowse(cid, type = 'PRODUCT') {
+    if (!cid) {
+        return Promise.reject();
+    }
+    return http.http
+        .post('/collect/saveBrowse', {
+            type: type,
+            cid: cid
+        })
+        .then(res => {
+            return Promise.resolve(res);
+        });
+}
+
+export { getBanner, getArray, saveBrowse };