Merge branch 'dev' of xiongzhu/raex_front into master

src/views/product/Search.vue

@@ -1,11 +1,9 @@
 <template>
-    <van-pull-refresh
+    <div
         class="search"
         success-text="加载成功"
         success-duration="500"
-        :style="{ backgroundColor: isSearch ? $colors.bg3 : $colors.bg }"
-        v-model="isLoading"
-        @refresh="onRefresh"
+        :style="{ backgroundColor: isSearch ? $colors.bg3 : $colors.bg2 }"
         pageType="light"
     >
         <van-sticky v-if="!isSearch" ref="top" class="list-top" :offset-top="bar && bar.show ? bar.height : 0">
@@ -103,16 +101,19 @@
             :finished="finished"
             finished-text=""
             @load="getData"
-            v-if="isSearch"
+            v-show="isSearch"
         >
             <template v-for="(item, index) in list" :key="index">
                 <product-info v-model:info="list[index]" @update:info="init"></product-info>
             </template>
             <van-empty v-if="empty" description="什么都没有搜到哦~" :image="require('@assets/kong_png_wusousuo.png')" />
         </van-list>
-        <div class="search-content" v-else>
+        <div class="search-content" v-show="!isSearch">
             <div class="hot-content" v-if="historys.length > 0">
-                <div class="title">最近搜索</div>
+                <div class="title">
+                    <span>最近搜索</span>
+                    <img src="@assets/icon-delete.png" @click="clear" alt="" />
+                </div>
                 <div class="hot-list">
                     <span v-for="(item, index) in historys" :key="index" @click="getSearch(item)">{{ item }}</span>
                 </div>
@@ -123,8 +124,34 @@
                     <span v-for="(item, index) in hots" :key="index" @click="getSearch(item)">{{ item }}</span>
                 </div>
             </div>
+
+            <swiper @swiper="setSwiperRef" slides-per-view="auto" :space-between="16" class="mySwiper">
+                <swiper-slide class="tab-slide" v-for="item in tabs" :key="item.id">
+                    <div class="tab-top">
+                        <img src="@assets/png-sosuo-bg.png" alt="" />
+                        <span>{{ item.name }}</span>
+                    </div>
+                    <div class="tab-list">
+                        <div
+                            class="tab-item"
+                            @click="getSearch(child.name)"
+                            v-for="(child, childIndex) in item.children"
+                            :key="child.id"
+                        >
+                            <div class="num">{{ childIndex + 1 }}</div>
+                            <div class="text1">{{ child.name }}</div>
+                            <div class="new" v-if="isNew(child)">新</div>
+                        </div>
+                        <div class="tab-item"></div>
+                    </div>
+                    <div class="more">
+                        <img src="@assets/down.png" alt="" />
+                        <div>上滑显示更多</div>
+                    </div>
+                </swiper-slide>
+            </swiper>
         </div>
-    </van-pull-refresh>
+    </div>
 </template>
 
 <script>
@@ -132,11 +159,24 @@ import ProductInfo from '../../components/product/productInfo.vue';
 import product from '../../mixins/product';
 import list from '../../mixins/list';
 import search from '../../mixins/search';
+import { Swiper, SwiperSlide } from 'swiper/vue';
+
+import 'swiper/swiper.min.css';
+import 'swiper/swiper-bundle.min.css';
 export default {
     name: 'productSearch',
-    components: { ProductInfo },
+    components: { ProductInfo, Swiper, SwiperSlide },
     inject: ['bar', 'setKeeps', 'scrollWrapper', 'changeScroll'],
     mixins: [product, list, search],
+    setup() {
+        let swiperRef = null;
+
+        const setSwiperRef = swiper => {
+            swiperRef = swiper;
+        };
+
+        return { swiperRef: null, setSwiperRef };
+    },
     data() {
         return {
             list: [],
@@ -173,7 +213,9 @@ export default {
             ],
             salable: '',
             showAction: false,
-            showHall: false
+            showHall: false,
+            settings: [],
+            banners: []
         };
     },
     watch: {
@@ -194,6 +236,18 @@ export default {
                 list[2].color = this.$colors.prim;
             }
             return list;
+        },
+        tabs() {
+            let settings = [...this.settings];
+            let banners = [...this.banners];
+            return settings.map(item => {
+                return {
+                    ...item,
+                    children: banners.filter(banner => {
+                        return banner.settingId === item.id;
+                    })
+                };
+            });
         }
     },
     mounted() {
@@ -229,8 +283,48 @@ export default {
             .catch(() => {
                 this.showHall = false;
             });
+
+        this.$http
+            .post('/setting/byFlag', { flag: 1 })
+            .then(res => {
+                this.settings = res;
+                this.$http
+                    .post(
+                        '/banner/all',
+                        {
+                            query: {
+                                type: 'MARKET',
+                                del: false
+                            },
+                            size: 999,
+                            sort: 'sort,asc;createdAt,desc'
+                        },
+                        { body: 'json' }
+                    )
+                    .then(res => {
+                        this.banners = res.content;
+                        this.$nextTick(() => {
+                            if (this.swiperRef) {
+                                this.swiperRef.update();
+                            }
+                        });
+                    });
+            })
+            .catch(e => {
+                console.log(e);
+                this.$message.error(e.error);
+            });
     },
     methods: {
+        clear() {
+            this.$dialog
+                .confirm({
+                    message: '确定要清除全部搜索记录吗?'
+                })
+                .then(() => {
+                    this.clearHistory();
+                });
+        },
         changeSort() {
             this.showAction = true;
         },
@@ -282,15 +376,21 @@ export default {
                     this.isLoading = false;
                 });
             } else {
-                this.$http.get('sysConfig/get/hot_search').then(res => {
-                    this.hots = res.value.split(',').filter(item => {
-                        return item !== ' ' && !!item;
-                    });
+                this.isLoading = false;
+                // this.$http.get('sysConfig/get/hot_search').then(res => {
+                //     this.hots = res.value.split(',').filter(item => {
+                //         return item !== ' ' && !!item;
+                //     });
 
-                    this.isLoading = false;
-                });
-                this.getHistory();
+                //     this.isLoading = false;
+                // });
+                // this.getHistory();
             }
+        },
+        isNew(info) {
+            let date1 = this.dayjs(info.createdAt).add(1, 'week');
+
+            return date1.isAfter(this.dayjs());
         }
     },
     activated() {
@@ -420,8 +520,16 @@ export default {
 
     .title {
         font-size: @font2;
-        color: @text3;
+        color: #000000;
         line-height: 24px;
+        font-weight: normal;
+        .flex();
+
+        img {
+            width: 18px;
+            height: 18px;
+            margin-left: 6px;
+        }
     }
 
     .hot-list {
@@ -432,7 +540,7 @@ export default {
             line-height: 22px;
             padding: 0 12px;
             margin: 6px 16px 0 0;
-            background: @hotBg;
+            background: @bg;
             border-radius: 12px;
         }
     }
@@ -469,4 +577,132 @@ export default {
     //     font-size: @font1;
     // }
 }
+.mySwiper {
+    padding: 16px;
+}
+.tab-slide {
+    width: 240px;
+    background: #ffffff;
+    border-radius: 4px;
+    height: 457px;
+    overflow: auto;
+    position: relative;
+    .tab-top {
+        position: sticky;
+        top: 0;
+        z-index: 2;
+        img {
+            width: 240px;
+            height: 44px;
+        }
+        span {
+            position: absolute;
+            font-size: 14px;
+            font-weight: bold;
+            color: #3ab200;
+            line-height: 44px;
+            top: 0;
+            left: 12px;
+        }
+    }
+    .tab-item {
+        height: 37px;
+        .flex();
+        padding: 0 12px;
+        position: relative;
+        z-index: 1;
+        .text1 {
+            flex-grow: 1;
+            margin: 0 6px;
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+        }
+
+        .num {
+            font-size: 12px;
+            color: #ffffff;
+            line-height: 14px;
+            background-color: #00000044;
+            width: 14px;
+            text-align: center;
+            flex-shrink: 0;
+        }
+
+        .new {
+            font-size: 10px;
+            color: #ff733c;
+            line-height: 14px;
+            width: 14px;
+            flex-shrink: 0;
+            background-color: #ff733c20;
+            text-align: center;
+        }
+        &:nth-child(1) {
+            .num {
+                background: linear-gradient(180deg, #f48753 0%, #e54f29 100%);
+            }
+        }
+        &:nth-child(2) {
+            .num {
+                background: linear-gradient(180deg, #ffa934 0%, #f16f25 100%);
+            }
+        }
+        &:nth-child(3) {
+            .num {
+                background: linear-gradient(180deg, #f8c246 0%, #ff9819 100%);
+            }
+        }
+
+        &::after {
+            content: '';
+            left: 12px;
+            right: 12px;
+            height: 1px;
+            background: #f4f5f7;
+            position: absolute;
+            bottom: 0;
+        }
+
+        &:last-child {
+            z-index: 3;
+            background-color: #fff;
+            &::after {
+                content: '';
+                height: 52px;
+                background: #fff;
+                position: absolute;
+                left: 0;
+                right: 0;
+                bottom: -52px;
+                z-index: 2;
+            }
+        }
+
+        &:nth-last-child(2) {
+            &::after {
+                content: none;
+            }
+        }
+    }
+
+    .more {
+        padding: 10px 0;
+        background-color: #fff;
+        .flex-col();
+        align-items: center;
+        img {
+            width: 16px;
+            height: 16px;
+        }
+        div {
+            font-size: 10px;
+            color: rgba(0, 0, 0, 0.2);
+            line-height: 10px;
+        }
+        position: sticky;
+        bottom: 0;
+        z-index: 2;
+    }
+}
 </style>