Zlpt_Portal_h5/src/pages/index/index.vue

<template>
    <!-- 首页 -->
    <view class="h5-container">
        <van-nav-bar title="机械化装备平台" />
        <view class="search-index flex-row-start">
            <van-field placeholder="搜索" />
            <van-button square type="primary" icon="search" />
        </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>

        <!-- <van-empty description="首页欢迎您" /> -->

        <van-tabbar v-model="active">
            <van-tabbar-item icon="home-o">首页</van-tabbar-item>
            <van-tabbar-item icon="search">租赁</van-tabbar-item>
            <van-tabbar-item icon="friends-o">消息</van-tabbar-item>
            <van-tabbar-item icon="setting-o">我的</van-tabbar-item>
        </van-tabbar>
    </view>
</template>

<script setup>
import GoodsItems from '@/components/GoodsItems'
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}` })
}
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;
    padding-bottom: 70px;

    .van-grid-item {
        border: none;
    }
}
</style>