football/pages/search/search.vue

<template>
    <view class="app-layout" :style="{background: isSearch ? '#f7f7f7' : '#ffffff'}">
    <app-layout>
        <view class="search">
            <view class="top">
                <view class="dir-left-nowrap box">
                    <input type="text" class="box-grow-1 input" confirm-type="搜索" @confirm="search" v-model="keyword">
                    <image class="search-close" @click="clear" v-if="keyword"
                           src="/static/image/icon/delete-yuan.png"></image>
                    <view class="box-grow-0 cross-center" @click="search">搜索</view>
                </view>
                <view class="radio dir-left-nowrap" v-if="searchList.length > 1">
                    <view class="box-grow-1 main-center"
                          v-for="(item,index) in searchList"
                          :key="index"
                          @click="switchSearch(item.key)"
                    >
                        <view :class="item.key === searchKey ? theme + '-color ' + theme + '-border ' + 'active' : ''"
                              class="radio-item"
                        >{{item.name}}
                        </view>
                    </view>
                </view>
            </view>
            <view v-if="!isSearch && historyList.length > 0" class="history">
                <view class="dir-left-nowrap cross-center title">
                    <view class="box-grow-1">历史搜索</view>
                    <image src="../../static/image/icon/delete.png" class="box-grow-0" @click="deleteHistory"></image>
                </view>
                <view class="dir-left-wrap list">
                    <view v-for="(item, index) in historyList"
                          class="box-grow-0 cross-center item"
                          @click="historyClick(item.keyword)"
                          :key="index"
                    >{{item.keyword}}
                    </view>
                </view>
            </view>
            <view v-if="isSearch" class="goods-list">
                <template v-if="list.length <= 0">
                    <view class="main-center no-result">
                        <view class="dir-left-nowrap cross-center">
                            <image class="box-grow-0 empty" src="../../static/image/icon/empty.png"></image>
                            <view class="box-grow-1">
                                <view>抱歉，没有相关商品</view>
                                <view v-if="!mch_id" class="text">以下是为您推荐的商品</view>
                            </view>
                        </view>
                    </view>
                </template>
                <view style="background-color: #f7f7f7">
                    <app-goods-list :list="newList"></app-goods-list>
                </view>
            </view>
        </view>
    </app-layout>
    </view>
</template>

<script>
    import {mapState} from 'vuex';
    import appGoodsList from "../../components/page-component/app-goods-list/app-goods-list.vue";

    let page = 1;
    let is_loading = false;
    let is_no_more = false;

    export default {
        name: "search",
        components: {
            'app-goods-list': appGoodsList,
        },
        data() {
            return {
                searchList: [],
                searchKey: '',
                list: [],
                isSearch: false,
                historyList: [],
                keyword: '',
                recommend_list: [],
                mch_id: 0,
            };
        },
        computed: {
            ...mapState({
                theme: state => state.mallConfig.theme,
            }),
            newList() {
                if (this.list.length > 0) {
                    return this.list;
                } else {
                    return this.recommend_list;
                }
            }
        },
        onLoad(options) {
            this.mch_id = options.mch_id ? options.mch_id : 0;
            page = 1;
            is_loading = false;
            is_no_more = false;
            this.historyList = this.getHistory();
            if (!this.mch_id) {
                this.getSearchList();
            }
            this.getRecommend();
        },
        onReachBottom() {
            if (is_no_more) return;
            this.getGoodsList();
        },
        watch: {
            keyword: {
                handler(v) {
                    if (v == '') {
                        this.cancel();
                    }
                },
                immediate: true,
            }
        },
        methods: {
            clear() {
                this.keyword = '';
            },
            getSearchList() {
                this.$showLoading();
                this.$request({
                    url: this.$api.default.search_list,
                }).then(response => {
                    this.$hideLoading();
                    this.searchList = response.data;
                });
            },
            switchSearch(key) {
                this.searchKey = key;
                this.historyList = this.getHistory();
                this.reset();
            },
            cancel() {
                this.isSearch = false;
                this.keyword = '';
                this.list = [];
            },
            reset() {
                page = 1;
                this.getGoodsList();
            },
            search(e) {
                let keyword = this.keyword;
                if (keyword === '') return;
                this.keyword = keyword.trim();
                this.setHistory();
                this.reset();
            },
            getGoodsList() {
                if (!this.keyword) return;
                if (is_loading) return;
                is_loading = true;
                uni.showLoading();
                this.$request({
                    url: this.$api.default.goods_list,
                    data: {
                        keyword: this.keyword,
                        sign: this.searchKey,
                        mch_id: this.mch_id,
                        page: page,
                    }
                }).then(response => {
                    uni.hideLoading();
                    is_loading = false;
                    this.isSearch = true;
                    if (response.code === 0) {
                        if (page == 1) this.list = [];
                        if (response.data.list.length > 0) {
                            // this.list = this.list.concat(response.data.list);
	                        this.list.push(...response.data.list);
                            page++;
                        } else {
                            is_no_more = true;
                            if (page === 1) this.getRecommend();
                        }
                    } else {
                        uni.showModal({
                            content: response.msg,
                        })
                    }
                }).catch(() => {
                    is_loading = false;
                    uni.hideLoading();
                });
            },
            setHistory() {
                let historyList = this.getHistory();
                let keyword = this.keyword.trim();

                historyList.forEach((item, index) => {
                    if (item.keyword === keyword) historyList.splice(index, 1);
                });
                historyList.push({
                    keyword: keyword,
                });
                if (historyList.length > 20) historyList.shift();
                this.historyList = historyList;
                uni.setStorageSync("SEARCH_HISTORY_LIST", historyList);
            },
            getHistory() {
                let historyList = uni.getStorageSync('SEARCH_HISTORY_LIST');
                if (!historyList) historyList = [];
                return historyList;
            },
            deleteHistory() {
                uni.removeStorageSync("SEARCH_HISTORY_LIST");
                this.historyList = [];
            },
            historyClick(keyword) {
                this.keyword = keyword.trim();
                this.reset();
            },
            getRecommend() {
                if (this.mch_id) return;
                if (this.recommend_list.length > 0) return;
                this.$request({
                    url: this.$api.goods.new_recommend,
                    data: {
                        goods_id: 0,
                        type: 'goods'
                    }
                }).then(response => {
                    if (response.code === 0) this.recommend_list = response.data.list;
                });
            },
        }
    }
</script>

<style scoped lang="scss">

    .app-layout {
        min-height: 100vh;
    }

    .top {
        padding: #{20rpx} #{24rpx};
        background-color: #efeff4;
        font-size: $uni-font-size-import-two;
        color: $uni-general-color-one;

        .input {
            background-color: #ffffff;
            border-radius: #{50rpx};
            padding: 0 #{32rpx};
            font-size: $uni-font-size-general-one;
            margin-right: #{20rpx};
            height: #{64rpx};
        }

        .box {
            position: relative;

            .search-close {
                position: absolute;
                width: #{32rpx};
                height: #{32rpx};
                border-radius: 50%;
                z-index: 2;
                right: #{110rpx};
                top: #{(64rpx - 32rpx) / 2};
            }
        }

        .radio {
            margin-top: #{32rpx};

            .radio-item {
                padding-bottom: #{12rpx};
            }

            .active {
                border-bottom: #{4rpx} solid;
            }
        }
    }

    .history {
        padding: #{36rpx} #{24rpx};
        border-radius: #{16rpx} #{16rpx} 0 0;
        background-color: #ffffff;
        font-size: $uni-font-size-general-one;

        .title {
            padding-bottom: #{24rpx};
            color: $uni-general-color-one;

            image {
                width: #{28rpx};
                height: #{34rpx};
                display: block;
            }
        }

        .list {
            .item {
                height: #{64rpx};
                background-color: #f7f7f7;
                padding: 0 #{20rpx};
                margin-right: #{20rpx};
                margin-bottom: #{16rpx};
                border-radius: #{32rpx};
            }
        }
    }

    .goods-list {
        .no-result {
            height: #{156rpx};
            padding: #{28rpx} 0;
            font-size: $uni-font-size-general-one;
            background-color: #ffffff;

            .text {
                color: $uni-general-color-two;
            }

            .empty {
                width: #{100rpx};
                height: #{100rpx};
                display: block;
                margin-right: #{40rpx};
            }
        }
    }
</style>