caimei-applets-mcare/pages/goods/goods-doc-list.vue

<template>
    <view class="goods-doc-list" :class="{ hasBottom: isIphoneX }">
        <view class="search">
            <view class="search-control">
                <text class="iconfont icon-iconfonticonfontsousuo1"></text>
                <input
                    placeholder-class="search-placeholder"
                    placeholder="请输入商品名称/供应商名称"
                    class="search-input"
                    type="search"
                    v-model="listQuery.keyword"
                    @click="isFoucs = true"
                    @blur="handleBlur"
                    @input="handleInput"
                />
            </view>
        </view>
        <!-- tabs -->
        <tui-sticky :scrollTop="scrollTop" @sticky="handleSticky" v-if="!isSearch">
            <template v-slot:header>
                <view :class="{ hasBorder: isSitcky }">
                    <tui-tabs
                        :tabs="tabs"
                        :currentTab="currentTab"
                        sliderBgColor="#F3B574"
                        selectedColor="#F3B574"
                        itemWidth="50%"
                        @change="tabChange"
                    ></tui-tabs>
                </view>
            </template>
        </tui-sticky>
        <!-- list -->
        <view class="doc-list" :style="{ paddingTop: isSitcky ? '80rpx' : '' }">
            <view class="section" v-for="(item, index) in showList" :key="index" @click="handleRoute(item)">
                <image class="cover" :src="item.productImage ? item.productImage : 'https://static.caimei365.com/app/img/icon2/placeholder.png'"></image>
                <view class="content">
                    <view class="title" v-if="!isSearch">{{ item.productName }}</view>
                    <view class="title" v-else v-html="item.productName"></view>
                    <view class="params"><text>供应商：</text>{{ item.shopName || '暂无' }}</view>
                    <view class="params"><text>商品属性：</text>{{ item.productType === 1 ? '产品' : '仪器' }}</view>
                </view>
            </view>
            <view class="cm-emtpy" v-if="isEmpty">
                <image src="https://static.caimei365.com/app/img/icon2/PC-empty.png"></image> <text>暂无资料~</text>
            </view>
        </view>
        <!-- loading more -->
        <view v-if="showList.length > 6">
            <tui-loadmore :text="loadingText" :index="1" :visible="isLoading"></tui-loadmore>
            <tui-nomore :text="loadingText" :visible="!isLoading"></tui-nomore>
        </view>
        <!-- back top -->
        <!-- <tui-scroll-top :scrollTop="scrollTop"></tui-scroll-top> -->
    </view>
</template>

<script>
import { mapState } from 'vuex'
export default {
    data() {
        return {
            isLoading: false,
            hasMore: false,
            scrollTop: 0,
            isSitcky: false,
            listQuery: {
                keyword: '', //查询关键词
                productType: 0, //商品类型 0 全部 1 产品 2 仪器
                pageNum: 1,
                pageSize: 10
            },
            isFoucs: false,
            tabs: [{ id: 0, name: '全部' }, { id: 1, name: '产品' }, { id: 2, name: '仪器' }],
            currentTab: 0,
            searchList: [],
            list: [],
            isEmpty: false
        }
    },
    computed: {
        ...mapState(['isIphoneX']),
        loadingText() {
            if (!this.hasMore) return '没有更多了'
            if (this.hasMore && !this.isLoading) return '上拉加载更多'
            return '加载中'
        },
        isSearch() {
            return this.listQuery.keyword.trim() !== '' || this.isFoucs
        },
        showList() {
            if (this.isSearch) return this.searchList
            return this.list
        }
    },
    watch: {
        isSearch(val) {
            if (!val) this.searchList = [] //退出搜索，清空搜索列表
        }
    },
    onLoad() {
        this.getList()
    },
    methods: {
        // 获取商品列表
        getList() {
            this.isLoading = true
            this.BeautyArchive.GetArchiveProduct(this.listQuery).then(res => {
                console.log(res)
                if (res.code) return
                if (this.isSearch) {
                    this.formatTitle(res.data.results) // 如果是搜索，需要高亮关键词
                    this.searchList = [...this.searchList, ...res.data.results]
                    this.isEmpty = this.searchList.length === 0
                } else {
                    this.list = [...this.list, ...res.data.results]
                    this.isEmpty = this.list.length === 0
                }
                this.hasMore = res.data.hasNextPage
                this.isLoading = false
            })
        },
        // 高亮文字
        formatTitle(list) {
            list.forEach((item, index) => {
                //正则表达式
                const reg = new RegExp(this.listQuery.keyword, 'g')
                item.productName = item.productName.replace(reg, $1 => {
                    return `<span style="color: #F3B574;">${$1}</span>`
                })
            })
        },
        // tab切换
        tabChange(e) {
            this.currentTab = e.index
            this.listQuery.productType = this.currentTab
            // 清空列表 重置页码为1
            this.list = []
            this.listQuery.pageNum = 1
            this.getList()
        },
        // 吸顶
        handleSticky(e) {
            this.isSitcky = e.isFixed
        },
        // 搜索框输入
        handleInput(e) {
            if (e.detail.value.trim() === '') return
            this.searchList = []
            // 从第一页开始 ， 搜索全部
            this.listQuery.pageNum = 1
            this.listQuery.productType = 0
            let timer = null
            clearTimeout(timer)
            timer = setTimeout(() => {
                this.getList()
            }, 500)
        },
        // 搜索框失去焦点
        handleBlur() {
            this.isFoucs = false
            this.listQuery.productType = this.currentTab
        },
        // 路由跳转
        handleRoute(item) {
            if (item.redirectType === 1) {
                this.$api.navigateTo(`/pages/goods/product?id=${item.productId}&open=caimei`)
            } else {
                this.$api.navigateTo(`/pages/goods/goods-doc-detail?id=${item.archiveId}`)
            }
        }
    },
    onPageScroll(e) {
        this.scrollTop = e.scrollTop
    },
    onReachBottom() {
        if (!this.hasMore) return
        let timer = null
        clearTimeout(timer)
        this.listQuery.pageNum++
        this.isLoading = true
        timer = setTimeout(() => {
            this.getList()
        }, 400)
    }
}
</script>

<style lang="scss" scoped>
page {
    height: initial;
}
.hasBorder {
    border-bottom: 1px solid #eee;
}
.hasBottom {
    padding-bottom: 60rpx;
}
.doc-list {
    padding: 0 24rpx;
    .section {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 32rpx 0;
        border-bottom: 1rpx solid #f0f0f0;
        &:last-child {
            border-bottom: 0;
            padding-bottom: 0;
        }
    }
    .cover {
        width: 180rpx;
        height: 180rpx;
        border-radius: 8rpx;
    }
    .content {
        width: 494rpx;
        margin-left: 24rpx;
        .title {
            height: 74rpx;
            margin-bottom: 34rpx;
            font-size: 26rpx;
            line-height: 37rpx;
            color: #333333;
            word-break: break-all;
            overflow: hidden; /*超出隐藏*/
            text-overflow: ellipsis; /*文本溢出时显示省略标记*/
            display: -webkit-box; /*设置弹性盒模型*/
            -webkit-line-clamp: 2; /*文本占的行数,如果要设置2行加...则设置为2*/
            -webkit-box-orient: vertical;
            text {
                color: #F3B574;
            }
        }
        .params {
            margin-top: 8rpx;
            font-size: 22rpx;
            color: #333333;
            text {
                color: #999999;
            }
        }
    }
}

.search-placeholder {
    color: #b2b2b2;
    font-size: 28rpx;
}

.search {
    display: flex;
    justify-content: center;
    width: 750rpx;
    padding: 24rpx 0 0;
    background: #fff;
    .search-control {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        width: 702rpx;
        border-radius: 40rpx;
        background: #f7f7f7;
        overflow: hidden;
        .search-input {
            flex: 1;
            border: 0;
            height: 66rpx;
            font-size: 28rpx;
            color: #333333;
        }
        .iconfont {
            font-size: 36rpx;
            margin: 0 20rpx;
            color: #b2b2b2;
        }
    }
}
.cm-emtpy {
    width: 100%;
    padding-top: 40vw;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    image {
        display: block;
        width: 260rpx;
        height: 260rpx;
    }
    text {
        display: block;
        margin-top: 10rpx;
        font-size: 26rpx;
        font-weight: 400;
        color: #999999;
    }
}
</style>