caimei-applets-hehe/pages/goods/goods-coupon-list-search.vue

<template>
    <view class="good-coupon-list-search">
        <!-- 搜索 -->
        <view class="search">
            <sui-search
                placeholder="请输入商品关键词"
                :radius="30"
                :focus="true"
                class="sui-search"
                :value="inputValue"
                @search="searchBlur"
                @onFocus="searchFocus"
                @clear="searchClear"
            ></sui-search>
            <view class="search-btn" @click="handleSearch">搜索</view>
        </view>
        <!-- 历史关键词 -->
        <template v-if="serachRecordList.length > 0">
            <view class="history-keywords" v-show="resetType">
                <view class="line"></view>
                <view class="row history-title">
                    <view class="title">搜索历史</view>
                    <view class="iconfont icon-shanchu delete" @click="handleDetele"></view>
                </view>
                <view class="row keyword-list">
                    <view
                        class="keyword"
                        v-for="(keyword, index) in serachRecordList"
                        :key="index"
                        @click="keywordsClick(keyword)"
                        >{{ keyword }}
                    </view>
                </view>
            </view>
        </template>
        <!-- 列表为空 -->
        <cm-empty
            v-if="productList.length <= 0 && !resetType"
            message="暂无搜索结果~"
            :image="baseUrl + 'icon-empty-search.png'"
            :offset="90"
        ></cm-empty>
        <!-- 商品列表 -->
        <view class="product-list" v-show="!resetType">
            <view class="product" v-for="(product, index) in productList" :key="index">
                <image class="product-image" :src="product.mainImage"></image>
                <view class="product-info">
                    <view class="name tui-ellipsis-2">{{ product.name }}</view>
                    <view class="unit">规格：{{ product.unit }}</view>
                    <view class="tags">
                        <text class="tag type2" v-if="product.activeStatus === 1">活动价</text>
                        <text class="tag type2" v-if="product.couponsLogo">优惠券</text>
                    </view>
                    <view class="footer">
                        <view class="price">￥{{ product.price | priceFormat }}</view>
                        <text class="carts-add iconfont icon-gouwuche" @click.stop="handAddCarts(product)"></text>
                    </view>
                </view>
            </view>
            <!-- 加载更多 -->
            <template v-if="productList.length > 6">
                <tui-loadmore :index="2" :visible="isRequest"></tui-loadmore>
                <tui-nomore :text="loadingText" :visible="!isRequest" backgroundColor="#fff"></tui-nomore>
            </template>
        </view>
        <!-- 侧边 -->
        <scroll-top :isScrollTop="isScrollTop" :bottom="160"></scroll-top>
        <!-- 可拖动悬浮按钮 -->
        <cm-drag :cartNum="kindCount" :isDock="true" :existTabBar="true" @btnClick="btnClick"> </cm-drag>
        <!-- 操作弹窗 -->
        <tui-modal
            :show="showModal"
            @click="handleConfirm"
            @cancel="showModal = false"
            :content="contentModalText"
            color="#333"
            :size="32"
            shape="circle"
            :maskClosable="false"
        ></tui-modal>
    </view>
</template>

<script>
import SuiSearch from '@/components/sui-search/sui-search.vue'
import CmEmpty from '@/components/cm-module/cm-empty/cm-empty.vue'
import CmDrag from '@/components/cm-module/cm-drag/cm-drag'
import { mapGetters, mapActions } from 'vuex'
export default {
    components: {
        SuiSearch,
        CmEmpty,
        CmDrag
    },
    data() {
        return {
            baseUrl: this.$Static,
            showModal: false,
            productList: [], //商品列表
            serachRecordList: [],
            listQuery: {
                userId: '',
                couponId: 48,
                pageNum: 1,
                pageSize: 10,
                productName: ''
            },
            inputValue: '',
            hasNextPage: false,
            isScrollTop: false,
            isRequest: true,
            timer: null,
            isSticky: false,
            isFocus: true,
            resetType: true, // true 重新搜索  false 上拉加载
            contentModalText: '确定删除历史记录？'
        }
    },
    computed: {
        ...mapGetters(['hasLogin', 'userInfo', 'userId', 'kindCount']),
        loadingText() {
            return this.hasNextPage ? '上拉加载' : '没有更多了'
        }
    },
    // 监听页面滚动事件
    onPageScroll(e) {
        this.isSticky = e.scrollTop > 0
        this.isScrollTop = e.scrollTop > 400
    },
    onReachBottom() {
        if (!this.hasNextPage) return
        clearTimeout(this.timer)
        this.timer = setTimeout(() => {
            console.log('触底了')
            this.fetchProductList()
        }, 200)
    },
    onReady() {
        this.getetSerachRecord()
    },
    methods: {
        ...mapActions('cart', ['addToCart']),
        // 获取商品列表
        fetchProductList() {
            this.listQuery.userId = this.userId
            this.CouponService.ProductInfoByCoupon(this.listQuery)
                .then(response => {
                    let data = response.data
                    if (this.resetType) {
                        this.productList = data.list
                    } else {
                        this.productList = [...this.productList, ...data.list]
                    }
                    this.hasNextPage = data.hasNextPage
                    this.listQuery.pageNum++
                    this.resetType = false
                    this.isRequest = false
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        },
        //查询搜索历史记录
        getetSerachRecord() {
            this.ProductService.GetProductSearchHistory({ userId: this.userId }).then(response => {
                if (response.code == 0) {
                    this.serachRecordList = response.data
                }
            })
        },
        // 搜索按钮事件
        handleSearch() {
            if (!this.listQuery.productName) return this.$util.msg('商品名称不能为空', 2000)
            this.listQuery.pageNum = 1
            this.productList = []
            this.fetchProductList()
        },
        // 点击关键词
        keywordsClick(keyword) {
            this.listQuery.productName = keyword
            this.inputValue = keyword
            this.handleSearch()
        },
        // 加入购物车
        handAddCarts(product) {
            this.addToCart({ productId: product.productId })
        },
        // 跳转购物车
        btnClick() {
            this.$api.navigateTo('/pages/goods/cart')
        },
        // 搜索框失去焦点
        searchBlur(val) {
            console.log('失去焦点')
            this.listQuery.productName = val
            this.isFocus = false
        },
        // 搜索框获取焦点
        searchFocus() {
            console.log('获取焦点')
            this.getetSerachRecord()
            this.resetType = true // 重新搜索
            this.isFocus = true
        },
        // 清空搜索
        searchClear() {
            this.inputValue = ''
            this.resetType = true // 重新搜索
            this.isFocus = true
            this.getetSerachRecord()
        },
        //清空历史记录
        handleDetele() {
            this.showModal = true
        },
        // 确认事件
        handleConfirm(e) {
            if (e.index === 1) this.removeAllKeywords()
            this.showModal = false
        },
        // 清空关键词
        removeAllKeywords() {
            this.ProductService.GetDeleteProductSearchHistory({ userId: this.userId })
                .then(response => {
                    this.$util.msg('删除成功', 2000, true, 'success')
                    this.serachRecordList = []
                })
                .catch(error => {
                    this.$util.msg(error.msg, 2000)
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.good-coupon-list-search {
    min-height: 100vh;
    padding-top: 124rpx;
    background: #f7f7f7;
    overflow: hidden;
    box-sizing: border-box;
}
.search {
    display: flex;
    position: fixed;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    top: 0;
    left: 0;
    z-index: 999;
    padding-right: 24rpx;
    box-sizing: border-box;
    background: #fff;
    // &.fixed {
    //     position: fixed;
    // }
    .sui-search {
        flex: 1;
    }
    .search-btn {
        font-size: 26rpx;
        color: #666;
    }
}
.history-keywords {
    background: #fff;
    // padding: 0 24rpx;
    .line {
        height: 1rpx;
        margin: 0 24rpx;
        background: #e1e1e1;
    }
    .history-title {
        margin: 48rpx 24rpx 24rpx;
        display: flex;
        justify-content: space-between;
        align-items: center;
        .title {
            height: 42rpx;
            line-height: 42rpx;
            font-size: 30rpx;
            font-weight: bold;
            color: #333333;
        }
        .delete {
            width: 32rpx;
            height: 32rpx;
            font-size: 32rpx;
            color: #999999;
        }
    }
    .keyword-list {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        padding: 0 12rpx;
        .keyword {
            height: 44rpx;
            padding: 0 12rpx;
            margin: 24rpx 12rpx;
            font-size: 26rpx;
            line-height: 44rpx;
            border-radius: 22rpx;
            color: #999999;
            text-align: center;
            background: #f7f7f7;
        }
    }
}
.product-list {
    padding: 0 24rpx;
    background: #fff;
    overflow: hidden;
    .product {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 0;
        border-bottom: 1px solid #e1e1e1;
        overflow: hidden;
        &:last-child {
            border-bottom: 0;
        }
        .product-image {
            display: block;
            width: 180rpx;
            height: 180rpx;
            border-radius: 8rpx;
            border: 1px solid #e1e1e1;
            border-radius: 8rpx;
            box-sizing: border-box;
        }
        .product-info {
            width: 495rpx;
            .name {
                height: 72rpx;
                line-height: 36rpx;
                font-size: $font-size-26;
                color: #333333;
                text-align: justify;
            }
            .unit,
            .tags,
            .footer {
                margin-top: 8rpx;
            }
            .unit {
                width: 100%;
                height: 28rpx;
                text-align: left;
                line-height: 28rpx;
                font-size: $font-size-20;
                color: #999999;
            }
            .tags {
                display: flex;
                justify-content: flex-start;
                align-items: center;
                width: 100%;
                height: 30rpx;
                .tag {
                    margin-right: 8rpx;
                    font-size: 22rpx;
                    height: 30rpx;
                    line-height: 30rpx;
                    text-align: center;
                    &.type2 {
                        width: 80rpx;
                        color: #f83c6c;
                        background: url(https://static.caimei365.com/app/mini-hehe/icon/icon-active.png) top center
                            no-repeat;
                        background-size: contain;
                    }
                }
            }
            .footer {
                display: flex;
                justify-content: space-between;
                align-items: flex-end;
                height: $font-size-26;
                .price {
                    font-size: $font-size-26;
                    color: #f83c6c;
                    font-weight: bold;
                    line-height: $font-size-26;
                }
                .carts-add {
                    width: 44rpx;
                    height: 44rpx;
                    line-height: 44rpx;
                    border-radius: 50%;
                    text-align: center;
                    font-size: 32rpx;
                    color: #ffffff;
                    background-color: #ff457b;
                }
            }
        }
    }
}
</style>