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" size="12" />
                        <van-icon name="play" size="12" />
                    </view>
                </view>
                <view class="filter-items">
                    上架时间
                    <view class="filter-type">
                        <van-icon name="play" size="12" />
                        <van-icon name="play" 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>
        </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">
                    <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"
                                    v-for="(item, index) in selectList[activeSelect].val_list"
                                    :key="index"
                                >
                                    {{ 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 Navbar from '@/components/Navbar/index'
import { getDeviceListAPI } from '@/services/index/index.js'
import { onLoad } from '@dcloudio/uni-app'
import { ref } from 'vue'
const activeSelect = ref(0)
const showBottom = ref(false)
const deviceList = ref([])
const selectList = ref([
    {
        selectName: '使用年限',
        val_list: [
            {
                name: '全部',
                value: '',
            },
            {
                name: '0-1年',
                value: [0, 1],
            },
        ],
    },
    {
        selectName: '设备类型',
        val_list: [
            {
                name: '全部',
                value: '',
            },
            {
                name: '0-1年',
                value: [0, 1],
            },
        ],
    },
    {
        selectName: '下级分类',
        val_list: [
            {
                name: '全部',
                value: '',
            },
            {
                name: '0-1年',
                value: [0, 1],
            },
        ],
    },
    {
        selectName: '价格区间',
        val_list: [
            {
                name: '全部',
                value: '',
            },
            {
                name: '0-1年',
                value: [0, 1],
            },
        ],
    },
    {
        selectName: '设备所属公司',
        val_list: [
            {
                name: '全部',
                value: '',
            },
            {
                name: '0-1年',
                value: [0, 1],
            },
        ],
    },
])
const onScrollTolower = () => {
    console.log('滚动触底')
}
const getDeviceListData = async () => {
    const { data: result } = await getDeviceListAPI({})
    deviceList.value = result.rows
}
const onViewGoodsDetails = (item) => {
    uni.navigateTo({ url: `/pages/goods-details/index?id=${item.maId}` })
}

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

const onFilter = () => {
    showBottom.value = true
}
onLoad(() => {
    getDeviceListData()
})
</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 {
                width: calc((100% - 20px) / 3);
                margin-bottom: 10px;
                margin-right: 10px;
                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>