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

<template>
    <!-- 装备共享大厅 -->
    <view class="h5-container">
        <!-- <Navbar :navTitle="`装备共享大厅`" /> -->
        <van-nav-bar title="装备共享大厅" left-text="返回" left-arrow @click-left="onClickLeft" />
        <view
            class="h5-content"
            style="padding: 20px; background: linear-gradient(to bottom, #6caf97, #78b0a9, #b8d0cf)"
        >
            <SearchIpt @onSearchByType="onSearchByType" />
        </view>

        <view class="goods-items">
            <view class="filter-box">
                <view class="flex-row-start">
                    <view>
                        使用年限
                        <van-icon name="sort" />
                    </view>
                    <view>
                        租金
                        <van-icon name="sort" />
                    </view>
                    <view>
                        上架时间
                        <van-icon name="sort" />
                    </view>
                </view>
            </view>
        </view>

        <scroll-view scroll-y class="scroll-item" @scrolltolower="onScrollTolower">
            <van-grid :column-num="2" :border="false">
                <van-grid-item
                    v-for="(item, index) in deviceList"
                    :key="index"
                    @click="onViewGoodsDetails(item)"
                >
                    <GoodsItems :goodsInfo="item" />
                </van-grid-item>
            </van-grid>
        </scroll-view>
    </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 active = ref('')
const deviceList = ref([])
const onScrollTolower = () => {
    console.log('滚动触底')
}
const getDeviceListData = async () => {
    const { data: result } = await getDeviceListAPI({})
    deviceList.value = result.rows
    console.log(res, '装备列表')
}
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',
    })
}
onLoad(() => {
    getDeviceListData()
})
</script>

<style lang="scss" scoped>
.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 {
    padding: 10px;
    box-sizing: border-box;
    border-top-left-radius: 20px;
    border-top-right-radius: 20px;
    background: $uni-bg-color;
}

.flex-row-start view {
    margin-right: 6px;
}

.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;
}
</style>