caimei-applets-mcare/pages/search/search_new.vue

<template>
    <view class="cm-search-container">
        <!-- 搜索框 -->
        <SearchHeader
            :menuList="menuItemList"
            :currentMenu="currentMenu"
            v-model="keyword"
            @clear="onClear"
            @search="onSearch"
            @input="onInput"
            @menuClick="onMenuItemClick"
        />
        <!-- 搜索历史记录 -->
        <view class="display-wrapper" v-show="showDisplay">
            <!-- 搜索历史 -->
            <view class="history" v-if="showHistory">
                <text class="iconfont icon-shanchu" @click="onClearHistory"></text>
                <view class="label">搜索历史</view>
                <view class="content">
                    <template v-for="(item, index) in historyList">
                        <view class="word" v-text="item.searchWord" :key="index"></view>
                    </template>
                </view>
            </view>
            <!-- 热门搜索 -->
            <view class="hot" v-if="showHotPorduct || showHotInstrument">
                <view class="label">热门搜索</view>
                <view class="content">
                    <!-- 产品 -->
                    <template v-if="showHotPorduct">
                        <view class="type-name">产品</view>
                        <view class="type-content">
                            <template v-for="(item, index) in hotProducts">
                                <view class="word" :class="{ light: item.isHot === '1' }" :key="index">
                                    <text v-text="item.name"></text>
                                    <text class="iconfont icon-resou"></text>
                                </view>
                            </template>
                        </view>
                    </template>
                    <!-- 仪器 -->
                    <template v-if="showHotInstrument">
                        <view class="type-name">仪器</view>
                        <view class="type-content">
                            <template v-for="(item, index) in hotInstruments">
                                <view class="word" :class="{ light: item.isHot === '1' }" :key="index">
                                    <text v-text="item.name"></text>
                                    <text class="iconfont icon-resou"></text>
                                </view>
                            </template>
                        </view>
                    </template>
                </view>
            </view>
        </view>
        <!-- 搜索列表 -->
        <view class="list-wrapper" v-show="showProduct">
            <ProductFullList :list="productList" @change="onProductFilterItemChange" />
        </view>

        <!-- 列表为空 -->
        <view class="empty-box" v-if="!isLoading && isEmpty">
            <image
                class="empty-image"
                src="https://img.caimei365.com/group1/M00/03/8D/Cmis215XHXWAHCoqAAELHadZ9Xg365.png"
            ></image>
            <text class="empty-text">抱歉，没有相关商品！</text>
        </view>

        <!-- 加载 loading -->
        <template v-if="!isEmpty">
            <tui-loadmore :index="2" :visible="isLoading"></tui-loadmore>
            <tui-nomore
                :text="hasMore ? '上拉加载更多' : '没有更多了'"
                :visible="!isLoading"
                backgroundColor="#f5f5f5"
            ></tui-nomore>
        </template>

        <!-- 商品筛选框 -->
        <tui-drawer mode="right" :visible="showDrawer" @close="showDrawer = false">
            <product-filter :brandList="brandList" @confirm="onDrawerConfirm" @reset="onDrawerConfirm"></product-filter>
        </tui-drawer>
    </view>
</template>

<script>
import SearchHeader from './components/search-header.vue'
import ProductFilter from './components/product-filter.vue'
import ProductFullList from './components/product-full-list.vue'
import { debounce } from '@/common/config/common'
import { mapGetters } from 'vuex'
const myDebounce = fn => debounce(fn, 200, false)

export default {
    components: {
        SearchHeader,
        ProductFilter,
        ProductFullList
    },
    data() {
        const menuItemList = [{ id: 1, name: '产品' }, { id: 2, name: '供应商' }]
        return {
            isLoading: false,
            // 用户信息
            userInfo: {
                userId: 0,
                userIdentity: 1,
                vipFlag: 0,
                firstClubType: 0
            },
            menuItemList: menuItemList,
            currentMenu: 0,
            keyword: '',
            // 产品相关
            showProduct: false,
            showDrawer: false,
            currentSortItem: {},
            brandList: [],
            productList: [],
            total: 0,
            hasMore: true,
            listQuery: {
                identity: 1,
                keyword: '',
                pageNum: 1,
                pageSize: 10,
                sortField: '',
                sortType: 1,
                newType: 1,
                actiType: 1,
                brandIds: '', // 品牌Id
                newFlag: 0, // 查询新品标记，默认0，新品1
                promotionFlag: 0 // 查询促销标记，默认0，促销1
            },
            // 历史记录相关
            showDisplay: true,
            historyList: [], // 热搜词
            hotProducts: [], // 热搜产品
            hotInstruments: [] // 热搜仪器
        }
    },
    computed: {
        showHistory() {
            return this.historyList.length > 0
        },
        showHotPorduct() {
            return this.hotProducts.length > 0
        },
        showHotInstrument() {
            return this.hotInstruments.length > 0
        },
        isEmpty() {
            return this.productList.length === 0
        }
    },

    onLoad() {
        this.initStorage()
    },
    onReachBottom() {},

    methods: {
        initDisplay() {
            this.fetchhistoryList()
            this.fetchHotItemList()
        },

        //查询搜索历史记录
        async fetchhistoryList() {
            try {
                const res = await this.ProductService.GetProductSearchHistory({ userId: this.userInfo.userId })
                this.historyList = res.data
            } catch (e) {
                this.$util.msg(e.msg, 2000)
            }
        },

        // 清空搜索历史
        onClearHistory() {
            //清空历史记录
            this.$util.modal('提示', '确定删除历史记录？', '确定', '取消', true, async () => {
                try {
                    await this.ProductService.GetDeleteProductSearchHistory({ userId: this.userInfo.userId })
                    this.$util.msg('删除成功', 2000, true, 'success')
                    this.historyList = []
                } catch (e) {
                    this.$util.msg(e.msg, 2000)
                }
            })
        },

        // 获取热搜
        async fetchHotItemList() {
            try {
                const res = await this.CommonService.GetHomeHotSearchTerms({})
                this.hotInstruments = res.data.instrumentHotSearch
                this.hotProducts = res.data.productHotSearch
            } catch (e) {
                this.$util.msg(e.msg, 2000)
            }
        },

        // 获取用户信息
        async initStorage(option) {
            const userInfo = await this.$api.getStorage()
            if (!userInfo) return
            this.userInfo = { ...this.userInfo, ...userInfo }
            this.initDisplay()
        },

        // 初始化产品列表
        initProductList() {
            this.productList = []
            this.listQuery.pageNum = 1
            this.listQuery.keyword = this.keyword
            this.listQuery.identity = this.userInfo.userIdentity
            this.listQuery.sortType = 1
            this.listQuery.sortField = ''
            this.fetchProductList()
            this.fetchBrandList()
        },

        // 获取产品列表
        fetchProductList: myDebounce(async function() {
            try {
                this.isLoading = true
                const { data } = await this.ProductService.GetProductSearchList(this.productListQuery)
                if (!data) return
                const result = JSON.parse(data)
                this.productTotal = result.total
                this.fetchProductPrice(result.items)
                this.productListQuery.pageNum++
            } catch (e) {
                this.isLoading = false
            }
        }),

        // 产品筛选
        productFilter() {
            this.isLoading = true
            this.productList = []
            this.productListQuery.pageNum = 1
            const sortType = { asc: 0, desc: 1 }
            const currentSortItem = this.currentSortItem
            switch (currentSortItem.id) {
                case 1:
                    this.productListQuery.sortField = ''
                    this.productListQuery.sortType = 1
                    break
                case 2:
                    this.productListQuery.sortField = 'sales'
                    this.productListQuery.sortType = sortType[currentSortItem.sortType]
                    break
                case 3:
                    this.productListQuery.sortField = 'favorite'
                    this.productListQuery.sortType = sortType[currentSortItem.sortType]
                    break
                case 4:
                    this.productListQuery.sortField = 'price'
                    this.productListQuery.sortType = sortType[currentSortItem.sortType]
                    break
            }
            this.fetchProductList()
        },

        // 产品筛选切换
        onProductFilterItemChange(item) {
            if (item.id === 5) {
                this.showDrawer = true
                return
            }
            this.currentSortItem = item
            this.productFilter()
        },

        // 获取品牌列表
        async fetchBrandList() {
            try {
                this.brandListQuery.keyword = this.keyword
                const { data } = await this.ProductService.getCommoditySearchQUeryBrand(this.brandListQuery)
                if (!data) return
                this.brandList = data.map(brand => {
                    brand.checked = false
                    return brand
                })
            } catch (e) {
                console.log(e)
            }
        },

        // drawer reset or confirm
        onDrawerConfirm(e) {
            this.showDrawer = false
            this.productListQuery.brandIds = e.brandList.map(brand => brand.id).join(',')
            this.productListQuery.promotionFlag = e.promotionFlag
            this.productListQuery.newFlag = e.newFlag
            this.productFilter()
        },

        // 搜索
        onSearch() {},

        // 清空搜索框
        onClear() {
            this.keyword = ''
        },

        // 用户输入
        onInput() {
            this.fetchLibraryWordList()
        },

        // menu-item 点击事件
        onMenuItemClick(index) {
            this.currentMenu = index
        }
    }
}
</script>

<style lang="scss" scoped>
.cm-search-container {
    min-height: 100vh;
    background: #f5f5f5;
}

.display-wrapper {
    padding: 32rpx 24rpx;
    background: #fff;
    // max-height: calc(100vh - 86rpx);
    box-sizing: border-box;

    .label {
        font-size: 30rpx;
        font-weight: bold;
    }

    .history {
        position: relative;
        .icon-shanchu {
            position: absolute;
            right: 24rpx;
            top: 0;
            font-size: 36rpx;
            color: #333333;
        }

        .content {
            display: flex;
            flex-wrap: wrap;
        }
    }

    .hot {
        margin-top: 64rpx;

        .type-name {
            font-size: 26rpx;
            color: #333;
            margin-top: 32rpx;
        }
        .type-content {
            display: flex;
            flex-wrap: wrap;
        }
    }

    .history,
    .hot {
        .word {
            display: flex;
            max-width: 200rpx;
            font-size: 24rpx;
            color: #8a8a8a;
            background: #f3f3f3;
            line-height: 48rpx;
            padding: 0 20rpx;
            border-radius: 24rpx;
            margin-right: 24rpx;
            margin-top: 24rpx;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;

            .icon-resou {
                display: none;
                font-size: 30rpx;
                color: #F3B574;
                margin-left: 12rpx;
            }

            &.light {
                background: #fef6f3;
                color: #F3B574;

                .icon-resou {
                    display: block;
                }
            }
        }
    }
}
</style>