jzmall_uni/pages/category/search/search.vue

<template>
    <view>
        <view style="height: 96rpx; background: #fff; padding-top: 20rpx; position: fixed; width: 750rpx; top: 0">
            <view class="search-header">
                <view class="input-box">
                    <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-search-grey.png" class="img" mode="aspectFit"></image>
                    <input
                        name="input"
                        class="keywrod"
                        :focus="true"
                        :value="keyword"
                        confirm-type="search"
                        @input="inputChange"
                        @focus="inputFocus"
                        @confirm="onKeywordConfirm"
                        placeholder="保洁、保姆、钟点工、家电清洗"
                        placeholder-style="font-size:26rpx;color:#BEC0C5;"
                    />
                    <view class="devide-line"></view>
                    <view class="search-text" @tap="onKeywordConfirmBtn">搜索</view>
                </view>
            </view>
        </view>
        <view class="no-search" v-if="!searchStatus">
            <view class="search-keywords search-history" v-if="!keyword && historyKeyword.length">
                <view class="h">
                    <text class="title">最近搜索</text>
                </view>
                <view class="b history">
                    <view class="item" @tap="onKeywordTap" :data-keyword="item.keyword" hover-class="navigator-hover" v-for="(item, index) in historyKeyword" :key="index">
                        {{ item.keyword }}
                    </view>
                </view>
            </view>
            <view class="search-keywords search-hot" v-if="!keyword && hotKeyword.length">
                <view class="h">
                    <text class="title">大家都在搜</text>
                </view>
                <view class="b">
                    <view
                        :class="'item ' + (item.is_hot === 1 ? 'active' : '') + ' line'"
                        hover-class="navigator-hover"
                        @tap="onKeywordTap"
                        :data-keyword="item.keyword"
                        v-for="(item, index) in hotKeyword"
                        :key="index"
                    >
                        <text>{{ item.keyword }}</text>

                        <image src="https://mall.zhaijieshi.cc/file/wx-dy/icon-fire.png" class="hot" mode="aspectFit" v-if="index == 0"></image>
                    </view>
                </view>
            </view>
        </view>

        <view class="search-result" v-if="searchStatus && goodsList.length">
            <view class="cate-item">
                <view class="b">
                    <navigator
                        :class="'item ' + ((iindex + 1) % 2 == 0 ? 'item-b' : '')"
                        :url="'/pages/goods/goods?id=' + iitem.id"
                        v-for="(iitem, iindex) in goodsList"
                        :key="iindex"
                    >
                        <image class="img" :src="iitem.picUrl" background-size="cover"></image>

                        <text class="name">{{ iitem.name }}</text>

                        <view class="price">
                            <view class="retailPrice">￥{{ iitem.retailPrice }}</view>
                        </view>
                    </navigator>
                </view>
            </view>
        </view>

        <view class="search-result-empty" v-if="!goodsList.length && searchStatus">
            <text class="text">暂无数据～</text>
        </view>
    </view>
</template>

<script>
var util = require('../../../utils/util.js');
var api = require('../../../config/api.js');
var app = getApp();
export default {
    data() {
        return {
            keyword: '',
            searchStatus: false,
            goodsList: [],
            helpKeyword: [],
            historyKeyword: [],
            categoryFilter: false,
            currentSort: 'name',
            currentSortType: 'default',
            currentSortOrder: 'desc',
            filterCategory: [],
            defaultKeyword: {},
            hotKeyword: [],
            page: 1,
            limit: 20,
            categoryId: 0,
            addressInfo: {},
            iindex: 0,

            iitem: {
                id: '',
                picUrl: '',
                name: '',
                retailPrice: ''
            }
        };
    },
    onLoad: function () {
        var addressInfo = uni.getStorageSync('addressInfo');
        if (addressInfo) {
            this.setData({
                addressInfo: addressInfo
            });
        }
        this.getSearchKeyword();
    },
    methods: {
        //事件处理函数
        closeSearch: function () {
            uni.navigateBack();
        },

        clearKeyword: function () {
            this.setData({
                keyword: '',
                searchStatus: false
            });
        },

        getSearchKeyword() {
            let that = this;
            util.request(api.SearchIndex).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        historyKeyword: res.data.historyKeywordList,
                        defaultKeyword: res.data.defaultKeyword,
                        hotKeyword: res.data.hotKeywordList
                    });
                }
            });
        },

        inputChange: function (e) {
            console.log(e);
            this.setData({
                keyword: e.detail.value,
                searchStatus: false
            });
            if (e.detail.value) {
            }
        },

        getHelpKeyword: function () {
            let that = this;
            let userInfo = uni.getStorageSync('userInfo');
            util.request(api.SearchHelper, {
                keyword: that.keyword,
                userId: userInfo.id
            }).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        helpKeyword: res.data
                    });
                }
            });
        },

        inputFocus: function () {
            this.setData({
                searchStatus: false,
                goodsList: []
            });
            if (this.keyword) {
            }
        },

        clearHistory: function () {
            this.setData({
                historyKeyword: []
            });
            util.request(api.SearchClearHistory, {}, 'POST').then(function (res) {
                console.log('清除成功');
            });
        },

        getGoodsList: function () {
            let that = this;
            util.request(api.GoodsList, {
                keyword: that.keyword,
                page: that.page,
                limit: that.limit,
                sort: that.currentSort,
                order: that.currentSortOrder,
                categoryId: that.categoryId,
                city: that.addressInfo.city,
                shopId: that.addressInfo.shopId
            }).then(function (res) {
                if (res.errno === 0) {
                    that.setData({
                        searchStatus: true,
                        categoryFilter: false,
                        goodsList: res.data.list,
                        filterCategory: res.data.filterCategoryList
                    });
                }

                //重新获取关键词
                that.getSearchKeyword();
            });
        },

        onKeywordTap: function (event) {
            this.getSearchResult(event.target.dataset.keyword);
        },

        getSearchResult(keyword) {
            this.setData({
                keyword: keyword,
                page: 1,
                categoryId: 0,
                goodsList: []
            });
            if (keyword === '') {
            } else {
                this.getGoodsList();
            }
        },

        openSortFilter: function (event) {
            let currentId = event.currentTarget.id;
            switch (currentId) {
                case 'categoryFilter':
                    this.setData({
                        categoryFilter: !this.categoryFilter,
                        currentSortType: 'category',
                        currentSort: 'add_time',
                        currentSortOrder: 'desc'
                    });
                    break;
                case 'priceSort':
                    let tmpSortOrder = 'asc';
                    if (this.currentSortOrder == 'asc') {
                        tmpSortOrder = 'desc';
                    }
                    this.setData({
                        currentSortType: 'price',
                        currentSort: 'retail_price',
                        currentSortOrder: tmpSortOrder,
                        categoryFilter: false
                    });
                    this.getGoodsList();
                    break;
                default:
                    //综合排序
                    this.setData({
                        currentSortType: 'default',
                        currentSort: 'name',
                        currentSortOrder: 'desc',
                        categoryFilter: false,
                        categoryId: 0
                    });
                    this.getGoodsList();
            }
        },

        selectCategory: function (event) {
            let currentIndex = event.target.dataset.categoryIndex;
            let filterCategory = this.filterCategory;
            let currentCategory = null;
            for (let key in filterCategory) {
                if (key == currentIndex) {
                    filterCategory[key].selected = true;
                    currentCategory = filterCategory[key];
                } else {
                    filterCategory[key].selected = false;
                }
            }
            this.setData({
                filterCategory: filterCategory,
                categoryFilter: false,
                categoryId: currentCategory.id,
                page: 1,
                goodsList: []
            });
            this.getGoodsList();
        },

        onKeywordConfirm(event) {
            this.getSearchResult(event.detail.value);
            this.getHelpKeyword();
        },

        onKeywordConfirmBtn() {
            this.setData({
                page: 1,
                categoryId: 0,
                goodsList: []
            });
            this.getGoodsList();
            this.getHelpKeyword();
        }
    }
};
</script>
<style>
page {
    min-height: 100%;
    background: #fff;
}

.container {
    min-height: 100%;
}

.search-header {
    width: 690rpx;
    height: 76rpx;
    background: #f5f6fa;
    margin: 0 30rpx;
    font-size: 28rpx;
    color: #333;
    padding: 0 40rpx;
    border-radius: 76rpx;
}
.search-header .img {
    width: 34rpx;
    height: 34rpx;
}
.devide-line {
    width: 1rpx;
    height: 38rpx;
    background: #dcdcdc;
}
.search-text {
    color: #00c0ff;
    font-size: 26rpx;
    margin-left: 30rpx;
}
.search-header .van-icon-search {
    line-height: 59rpx;
}

.search-header .input-box {
    height: 76rpx;
    display: flex;
    align-items: center;
}

.search-header .icon {
    position: absolute;
    top: 14rpx;
    left: 20rpx;
    width: 31rpx;
    height: 31rpx;
}

.search-header .del {
    position: absolute;
    top: 3rpx;
    right: 10rpx;
    width: 53rpx;
    height: 53rpx;
    z-index: 10;
}

.search-header .keywrod {
    flex: 1;
    height: 76rpx;
    line-height: 76rpx;
    padding: 0 20rpx;
}

.search-header .right {
    margin-top: 24rpx;
    margin-left: 31rpx;
    margin-right: 6rpx;
    width: 58rpx;
    height: 43rpx;
    line-height: 43rpx;
    float: right;
}

.no-search {
    height: auto;
    overflow: hidden;
    margin-top: 96rpx;
    padding-left: 70rpx;
    background: #fff;
}

.search-keywords {
    background: #fff;
    width: 750rpx;
    height: auto;
}

.search-keywords .h {
    height: 93rpx;
    line-height: 93rpx;
    width: 100%;
    color: #999;
    font-size: 28rpx;
}

.search-keywords .title {
    font-size: 24rpx;
    color: #666;
}

.search-keywords .icon {
    margin-top: 19rpx;
    float: right;
    display: block;
    margin-left: 511rpx;
    height: 55rpx;
    width: 55rpx;
}

.search-keywords .b {
    width: 750rpx;
    height: auto;
    overflow: hidden;
}

.search-keywords .b .item {
    width: 750rpx;
    height: 84rpx;
    line-height: 84rpx;
    font-size: 28rpx;
    color: #666;
}

.search-keywords .item.active {
    color: #b4282d;
    border: 1px solid #b4282d;
}

.shelper-list {
    width: 750rpx;
    height: auto;
    overflow: hidden;
    background: #fff;
    padding: 0 31.25rpx;
}

.shelper-list .item {
    height: 93rpx;
    width: 687.5rpx;
    line-height: 93rpx;
    font-size: 24rpx;
    color: #333;
    border-bottom: 1px solid #f4f4f4;
}

.sort {
    position: fixed;
    top: 91rpx;
    background: #fff;
    width: 100%;
    height: 78rpx;
}

.sort-box {
    background: #fff;
    width: 100%;
    height: 78rpx;
    overflow: hidden;
    padding: 0 30rpx;
    display: flex;
    border-bottom: 1px solid #d9d9d9;
}

.sort-box .item {
    height: 78rpx;
    line-height: 78rpx;
    text-align: center;
    flex: 1;
    color: #333;
    font-size: 30rpx;
}

.sort-box .item .txt {
    color: #333;
}

.sort-box .item.active .txt {
    color: #b4282d;
}

.sort-box .item .van-icon {
    margin-left: 6rpx;
}

.sort-box-category {
    background: #fff;
    width: 100%;
    height: auto;
    overflow: hidden;
    padding: 40rpx 40rpx 0 0;
    border-bottom: 1px solid #d9d9d9;
}

.sort-box-category .item {
    height: 54rpx;
    line-height: 54rpx;
    text-align: center;
    float: left;
    padding: 0 16rpx;
    margin: 0 0 40rpx 40rpx;
    border: 1px solid #666;
    color: #333;
    font-size: 24rpx;
}

.sort-box-category .item.active {
    color: #b4282d;
    border: 1px solid #b4282d;
}

.cate-item {
    margin-top: 112rpx;
    height: auto;
    overflow: hidden;
}

.cate-item .h {
    height: 145rpx;
    width: 750rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.cate-item .h .name {
    display: block;
    height: 35rpx;
    margin-bottom: 18rpx;
    font-size: 30rpx;
    color: #333;
}

.cate-item .h .desc {
    display: block;
    height: 24rpx;
    font-size: 24rpx;
    color: #999;
}

.cate-item .b {
    width: 750rpx;
    padding: 0 6.25rpx;
    height: auto;
    overflow: hidden;
}

.cate-item .list-filter {
    height: 80rpx;
    width: 100%;
    background: #fff;
    margin-bottom: 6.25rpx;
}

.cate-item .b .item {
    float: left;
    background: #fff;
    width: 365rpx;
    margin-bottom: 6.25rpx;
    padding-bottom: 33.333rpx;
    height: auto;
    overflow: hidden;
    text-align: center;
}

.cate-item .b .item-b {
    margin-left: 6.25rpx;
}

.cate-item .item .img {
    width: 302rpx;
    height: 302rpx;
    border-radius: 10rpx;
}

.cate-item .item .name {
    display: block;
    width: 360rpx;
    height: 68rpx;
    line-height: 34rpx;
    margin: 11.5rpx 0 0rpx 0;
    text-align: left;
    overflow: hidden;
    padding: 0 20rpx;
    font-size: 28rpx;
    color: #333;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.cate-item .item .price {
    height: 40rpx;
    line-height: 40rpx;
    text-align: center;
    font-size: 30rpx;
    color: #b4282d;
}

.search-result-empty {
    width: 100%;
    height: 100%;
    padding-top: 600rpx;
}

.search-result-empty .text {
    display: block;
    width: 100%;
    height: 40rpx;
    font-size: 28rpx;
    text-align: center;
    color: #999;
}
.cate-item .item .price {
    height: 40rpx;
    justify-content: center;
    display: flex;
    margin-top: 10rpx;
    align-items: flex-end;
}
.counterPrice {
    text-decoration: line-through;
    font-size: 24rpx;
    margin: 0 0 0 20rpx;
}

.retailPrice {
    font-size: 30rpx;
    height: 30rpx;
    line-height: 30rpx;
}
.memberPrice {
    font-size: 22rpx;
    color: #dd483e;
    margin: 0 10rpx 0 20rpx;
}
.member-price-tag {
    width: 88rpx;
    height: 26rpx;
    line-height: 26rpx;
    background: url('https://mall.zhaijieshi.cc/file/jzmall/weixin/member/member-price-bg.png') no-repeat center center;
    background-size: 100% 100%;
    color: #5e3a11;
    font-size: 16rpx;
    padding: 0 8rpx 0 0;
    text-align: right;
    margin: 0 0 6rpx 0;
}
.search-keywords .b.history {
}
.search-keywords .b.history .item {
    display: inline-block;
    height: 68rpx;
    line-height: 68rpx;
    padding: 0 15rpx;
    font-size: 26rpx;
    color: #666;
    margin-right: 30rpx;
}
.search-keywords .line {
    height: 84rpx;
    display: flex;
    align-items: center;
}
.search-keywords .line .hot {
    width: 24rpx;
    height: 24rpx;
    margin-left: 12rpx;
}

.search-keywords .b.history {
    display: flex;
    flex-wrap: wrap;
}
.search-keywords .b.history .item {
    width: auto;
    padding: 0;
    margin-right: 40rpx;
}
</style>