Zlpt_Portal_h5/src/pages/goods-list/index.vue

<template>
    <!-- 装备共享大厅 -->
    <view class="h5-container goods-list">
        <!-- <Navbar :navTitle="`装备共享大厅`" /> -->
        <!-- <van-nav-bar title="装备共享大厅" left-text="返回" left-arrow @click-left="onClickLeft" /> -->

        <view
            style="
                padding: 15px 0;
                display: flex;
                align-items: center;
                justify-content: space-between;
            "
        >
            <view>
                <van-icon name="arrow-left" @click="onClickLeft" />
                <text style="color: #000"> 装备共享大厅 </text>
            </view>
        </view>
        <view style="padding: 10px">
            <SearchIpt @onSearchByType="onSearchByType" />
        </view>

        <view class="goods-items">
            <view class="filter-box">
                <!-- <view class="filter-items">
                    使用年限
                    <view class="filter-type">
                        <van-icon name="play" size="12" />
                        <van-icon name="play" size="12" />
                    </view>
                </view> -->
                <view class="filter-items">
                    租金
                    <view class="filter-type">
                        <van-icon
                            name="play"
                            :color="searchParams.dayLeasePriceOrderBy === 'ASC' ? '#00a288' : ''"
                            @click="onClickPrice('ASC')"
                            size="12"
                        />
                        <van-icon
                            name="play"
                            :color="searchParams.dayLeasePriceOrderBy === 'DESC' ? '#00a288' : ''"
                            @click="onClickPrice('DESC')"
                            size="12"
                        />
                    </view>
                </view>
                <view class="filter-items">
                    上架时间
                    <view class="filter-type">
                        <van-icon
                            name="play"
                            :color="searchParams.updateTimeOrderBy === 'ASC' ? '#00a288' : ''"
                            @click="onClickTime('ASC')"
                            size="12"
                        />
                        <van-icon
                            name="play"
                            :color="searchParams.updateTimeOrderBy === 'DESC' ? '#00a288' : ''"
                            @click="onClickTime('DESC')"
                            size="12"
                        />
                    </view>
                </view>
            </view>

            <view @click="onFilter">
                筛选
                <van-icon name="filter-o" />
            </view>
        </view>

        <scroll-view scroll-y class="scroll-item" @scrolltolower="onScrollTolower">
            <van-grid :column-num="2" :border="false" :gutter="4">
                <van-grid-item
                    v-for="(item, index) in deviceList"
                    :key="index"
                    @click="onViewGoodsDetails(item)"
                >
                    <GoodsItems :goodsInfo="item" />
                </van-grid-item>
            </van-grid>

            <view class="loading-text">
                {{ finish ? '没有更多数据了~' : '正在加载...' }}
            </view>
        </scroll-view>

        <van-popup position="bottom" v-model:show="showBottom" :style="{ height: '60%' }">
            <view class="filter-bottom">
                <view
                    style="text-align: right; padding: 4px 8px"
                    @click="
                        () => {
                            showBottom = false
                        }
                    "
                >
                    <van-icon name="close" color="#575B66" size="20" />
                </view>
                <view
                    style="
                        text-align: center;
                        font-weight: bold;
                        color: #333333;
                        font-family: PingFangSC, PingFang SC;
                    "
                >
                    全部筛选
                </view>

                <view class="filter-content">
                    <van-sidebar v-model="activeSelect">
                        <van-sidebar-item
                            :key="index"
                            :title="item.selectName"
                            v-for="(item, index) in selectList"
                        />
                    </van-sidebar>

                    <scroll-view scroll-y class="right-btns">
                        <view>
                            <view> {{ selectList[activeSelect].selectName }} </view>
                            <view class="btns">
                                <view
                                    :class="{ active_btn: item.isChecked }"
                                    v-for="(item, index) in selectList[activeSelect].val_list"
                                    :key="index"
                                    @click="onClickTags(item)"
                                >
                                    {{ item.name }}
                                </view>
                            </view>
                        </view>
                    </scroll-view>
                </view>
            </view>
        </van-popup>
    </view>
</template>

<script setup>
import GoodsItems from '@/components/GoodsItems'
import SearchIpt from '@/components/SearchIpt/index'
import { getDeviceListAPI } from '@/services/index/index.js'
import { getTypeListAPI } from '@/services/common/index.js'
import { onLoad } from '@dcloudio/uni-app'
import { ref, computed } from 'vue'
import { useMemberStore } from '@/stores/index.js'
const memberStore = useMemberStore()
const activeSelect = ref(0)
const showBottom = ref(false)
const deviceList = ref([])
const total = ref(0)
import { debounce } from 'lodash-es'
const searchParams = ref({
    keyWord: '',
    ageMin: '',
    ageMax: '',
    companyId: '',
    dayLeasePriceMin: '',
    dayLeasePriceMax: '',
    typeId: '',
    level: '',
    maStatus: 2,
    pageNum: 1,
    pageSize: 10,
    updateTimeOrderBy: '',
    dayLeasePriceOrderBy: '',
})
const selectList = ref([
    {
        selectName: '使用年限',
        val_list: [
            {
                name: '全部',
                value: '',
                isChecked: true,
            },
            {
                name: '0-1年',
                value: [0, 1],
                isChecked: false,
            },
            {
                name: '1-3年',
                value: [1, 3],
                isChecked: false,
            },
            {
                name: '3-5年',
                value: [3, 5],
                isChecked: false,
            },
            {
                name: '5-8年',
                value: [5, 8],
                isChecked: false,
            },
            {
                name: '10年以上',
                value: ['', 10],
                isChecked: false,
            },
        ],
    },
    {
        selectName: '设备类型',
        val_list: [
            {
                name: '全部',
                value: '',
                isChecked: true,
            },
        ],
    },

    {
        selectName: '价格区间',
        val_list: [
            {
                name: '全部',
                value: '',
                isChecked: true,
            },
            {
                name: '0-500',
                value: [0, 500],
                isChecked: false,
            },
            {
                name: '500-1000',
                value: [500, 1000],
                isChecked: false,
            },
            {
                name: '1000-500',
                value: [1000, 1500],
                isChecked: false,
            },
            {
                name: '1500-2000',
                value: [1500, 2000],
                isChecked: false,
            },
            {
                name: '2000-2500',
                value: [2000, 2500],
                isChecked: false,
            },
        ],
    },
    {
        selectName: '设备所属公司',
        val_list: [
            {
                name: '全部',
                value: '',
                isChecked: true,
            },
        ],
    },
])

// 判断数据是否加载完毕
const finish = computed(() => {
    if (total.value === deviceList.value.length) return true
})
const onScrollTolower = debounce(() => {
    if (total.value > deviceList.value.length) {
        searchParams.value.pageNum++
        getDeviceListData()
    }
}, 500)

// 获取装备列表
const getDeviceListData = async (isTap = false) => {
    if (isTap) searchParams.value.pageNum = 1
    const { data: result } = await getDeviceListAPI(searchParams.value)
    total.value = result.total
    if (isTap) {
        deviceList.value = result.rows
    } else {
        if (result.rows.length == 0) {
            deviceList.value = []
        } else {
            deviceList.value.push(...result.rows)
        }
    }
}
const onViewGoodsDetails = (item) => {
    uni.navigateTo({ url: `/pages/goods-details/index?id=${item.maId}` })
}

// 获取装备分类
const getTypeListData = async () => {
    const { data: res } = await getTypeListAPI()
    const typeList = res.map((e) => {
        return { ...e, name: e.typeName, value: e.typeId, isChecked: false }
    })
    selectList.value[1].val_list.push(...typeList)
}

// 标签点击
const onClickTags = (item) => {
    selectList.value[activeSelect.value].val_list.forEach((e) => {
        e.isChecked = false
    })
    item.isChecked = true

    if (activeSelect.value == 0) {
        if (item.value == '') {
            searchParams.value.ageMin = ''
            searchParams.value.ageMax = ''
        } else {
            searchParams.value.ageMin = item.value[0]
            searchParams.value.ageMax = item.value[1]
        }
    }
    if (activeSelect.value == 1) {
        searchParams.value.typeId = item.value
        searchParams.value.level = item.value ? 1 : ''
    }
    if (activeSelect.value == 2) {
        if (item.value == '') {
            searchParams.value.dayLeasePriceMin = ''
            searchParams.value.dayLeasePriceMax = ''
        } else {
            searchParams.value.dayLeasePriceMin = item.value[0]
            searchParams.value.dayLeasePriceMax = item.value[1]
        }
    }
    if (activeSelect.value == 3) {
        searchParams.value.companyId = item.value
    }
    getDeviceListData(true)
}

// 金额筛选
const onClickPrice = (type) => {
    searchParams.value.dayLeasePriceOrderBy = type
    getDeviceListData(true)
}
// 时间筛选
const onClickTime = (type) => {
    searchParams.value.updateTimeOrderBy = type
    getDeviceListData(true)
}

const onSearchByType = (value, type) => {
    /**
     *  @type 1 查询机具 2 查询需求
     *  @value 搜索框值
     */
    if (type === 2) {
        uni.switchTab({
            url: `/pages/lease-demand/index?value=${value}`,
        })
    } else {
        searchParams.value.keyWord = value
        getDeviceListData(true)
    }
}
const onClickLeft = () => {
    uni.switchTab({
        url: '/pages/index/index',
    })
}

const onFilter = () => {
    showBottom.value = true
}
onLoad(() => {
    getDeviceListData(true)
    getTypeListData()
    const companyList = memberStore.companyList.map((e) => {
        return { ...e, name: e.companyName, value: e.companyId, isChecked: false }
    })
    selectList.value[3].val_list.push(...companyList)
})
</script>

<style lang="scss" scoped>
.goods-list {
    padding: 10px;
    color: #333;
    box-sizing: border-box;
    background: linear-gradient(to bottom, #c0e9ce, #e4f2f2, #f9f9f9);
}
.search-index {
    height: 80px;
    justify-content: center;

    .van-field {
        width: 65%;
        padding: 0;
        height: 36px;
        line-height: 36px;
        border: 1px solid #22ab9b;
        border-top-left-radius: 18px;
        border-bottom-left-radius: 18px;
        padding-left: 18px;
    }

    .van-button {
        height: 36px;
        width: 70px;
        line-height: 36px;
        background: #22ab9b;
        border: none;
        border-top-right-radius: 18px;
        border-bottom-right-radius: 18px;
        font-size: 18px;
    }
}

.goods-items {
    display: flex;
    justify-content: space-between;
    padding: 10px;
    box-sizing: border-box;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    // background: $uni-bg-color;

    .filter-box {
        display: flex;
        align-items: center;

        .filter-items {
            display: flex;
            align-items: center;

            .filter-type {
                display: flex;
                flex-direction: column;
                justify-content: center;
                align-items: center;
                padding: 0 6px;

                & .van-icon:first-child {
                    transform: rotateZ(-90deg);
                    margin-bottom: -3px;
                }
                & .van-icon:last-child {
                    transform: rotateZ(90deg);
                    margin-top: -3px;
                }
            }
        }
    }
}

.van-tabbar {
    height: 70px;
}
.scroll-item {
    background-color: $uni-bg-color;
    .van-grid-item {
        border: none;
    }
}

:deep(.van-nav-bar .van-icon),
:deep(.van-nav-bar__title) {
    color: #333;
}

.filter-bottom {
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow-y: hidden;
}

.filter-content {
    flex: 1;
    height: 100%;
    display: flex;

    .right-btns {
        flex: 1;
        padding: 10px;
        box-sizing: border-box;

        .btns {
            display: flex;
            flex-wrap: wrap;
            margin-top: 15px;
            view {
                min-width: calc((100% - 20px) / 3);
                padding: 0 8px;
                box-sizing: border-box;
                margin-bottom: 10px;
                margin-right: 10px;
                min-height: 28px;
                line-height: 28px;
                text-align: center;
                border-radius: 14px;
            }

            .active_btn {
                color: #22ab9b;
                background-color: #d1eae7;
            }

            & view:nth-child(3n) {
                margin-right: 0;
            }
        }
    }
}

:deep(.van-grid-item__content) {
    padding: 0;
}
</style>