Zlpt_Portal/src/views/home/index.vue

<script setup lang="ts">
    import EquipCard from 'components/equipCard.vue'
    import NavMenu from 'components/Navmenu/index.vue'
    import { getGoodsClassListApi } from 'http/api/home'
    import { mainStore } from 'store/main'
    import { getHotList } from 'http/api/equip'
    import { reactive, ref } from 'vue'
    import baseData from '@/assets/baseInformation.json'

    const router = useRouter()

    const leftNavList = ref([])

    const loopList = ref([
        'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png',
        'https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/41cd93cefd76c28c967f07ad33b5e6fe1575746850588196864475.jpg',
        'https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/11800b353f4d1332b73f18bf0f2133a31575743878894452736462.jpg',
        'https://hzgyp-prod-1259451974.cos.ap-guangzhou.myqcloud.com/85a09403e4328a37b2686d20b2fe717e20220728085635540.jpg'
    ])
    // 获取商品分类
    const getGoodsClassList = async () => {
        const res = await getGoodsClassListApi()
        console.log(res, '商品分类列表')

        leftNavList.value = res.rows
    }

    getGoodsClassList()

    const handlerGoodsDetails = (...arg) => {
        const arr = arg.map((key, index) => {
            return {
                level: index + 1 + '',
                typeId: key.id,
                typeName: key.name
            }
        })

        router.push({
            name: 'equipList',
            state: { typeTag: arr }
        })
    }

    const goInformation = (id) => {
        router.push({
            path: `/consultationDetails/${id}`
        })
    }

    const detailsList = ref([])

    const handelInformation = () => {
        detailsList.value = baseData.map((item) => {
            return {
                v_title: item.title,
                v_content_info: '',
                v_time: `[${item.create_time}]`,
                id: item.id
            }
        })
    }
    handelInformation()

    const hotDeviceList: any = ref([])

    /* 获取热搜装备 */
    const getHotDeviceList = async () => {
        const res: any = await getHotList({ pageSize: 3 })

        hotDeviceList.value = res.rows
        console.log(res, '热搜装备111')
    }

    getHotDeviceList()

    /* 热搜卡片点击跳转至详情页 */
    const onClick = (val: any) => {
        router.push(`/equipDetail/${val.id}`)
    }
</script>

<template>
    <div class="home-index-banner">
        <div class="home-index">
            <!-- 商品菜单导航以及轮播图区域 -->
            <div class="home-goods">
                <ul class="left-nav">
                    <!-- 左侧机械名称菜单按钮 -->
                    <li class="item-nav" v-for="item in leftNavList" :key="item.name">
                        {{ item.name }}
                        <ul class="sub-goods">
                            <!-- 级联框内 类别名称 -->
                            <li v-for="child in item.children" :key="child.id">
                                <span>{{ child.name }}</span>
                                <span>
                                    <!-- 小类名称 -->
                                    <a
                                        v-for="son in child.children"
                                        :key="son.id"
                                        @click="handlerGoodsDetails(item, child, son)">
                                        {{ son.name }}
                                    </a>
                                </span>
                            </li>
                        </ul>
                    </li>
                </ul>
                <div class="right-content">
                    <!-- 轮播图上方导航按钮 -->
                    <NavMenu />
                    <!-- 轮播图 -->
                    <div class="swpier-img">
                        <el-carousel :interval="5000" arrow="always" height="437px">
                            <el-carousel-item v-for="(item, index) in loopList" :key="index">
                                <!-- <h3 text="2xl" justify="center">{{ item }}</h3> -->
                                <el-image style="width: 100%" :src="item" fit="cover" />
                            </el-carousel-item>
                        </el-carousel>
                    </div>
                </div>
            </div>
            <!-- 热搜装备 -->
            <div class="hot-equip">
                <span>热搜装备</span>
                <a>查看更多</a>
            </div>

            <ul class="equip-pic">
                <li v-for="item in hotDeviceList" :key="item.maId" style="cursor: pointer">
                    <EquipCard
                        @onClick="onClick"
                        :company="item.companyName || '安徽博诺斯有限公司'"
                        :price="item.monthLeasePrice"
                        :tags="[item.maStatusStr || '待租', item.cityStr || '合肥']"
                        :name="item.modelName + item.deviceName"
                        :url="item.picUrl"
                        :id="item.maId" />
                </li>
            </ul>

            <!-- 专题咨询 -->

            <div class="hot-equip">
                <span>专题资讯</span>
                <a></a>
            </div>

            <ul class="consult-nav">
                <li>
                    <a>资讯</a>
                </li>
                <li>
                    <a>专题</a>
                </li>
                <li>
                    <a>检验</a>
                </li>
                <li>
                    <a>保险</a>
                </li>
            </ul>

            <div class="consult-content">
                <!-- 左侧背景图片 -->
                <div class="left-bg"></div>

                <!--  右侧信息 -->
                <div class="right-consult">
                    <div
                        class="consult-box"
                        @click="goInformation(item.id)"
                        v-for="item in detailsList"
                        :key="item.v_time">
                        <div class="consult-title">
                            <h3>{{ item.v_title }}</h3>
                            <span>{{ item.v_time }}</span>
                        </div>

                        <div class="consult-info">
                            {{ item.v_content_info }}
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<style lang="scss" scoped>
    :deep(.el-carousel__container) {
        .el-carousel__item {
            .el-image {
                height: 100%;
                img {
                }
            }
        }
    }
    .home-index-banner {
        background-color: #fff;
        padding: 20px 15px;
        border-radius: 10px;
        box-sizing: border-box;
    }

    .home-index {
        .home-goods {
            height: 500px;
            display: flex;

            .left-nav {
                position: relative;
                width: 200px;
                height: 100%;
                display: flex;
                background-color: #f7f9fa;
                flex-direction: column;
                justify-content: space-around;

                .item-nav {
                    // text-align: left;
                    // padding-left: 50px;
                    color: #8b8b8b;
                    height: 36px;
                    line-height: 36px;
                    text-align: center;

                    &:hover {
                        cursor: pointer;
                        color: #2282ff;
                        font-weight: bold;
                        background-color: #1abc9c;

                        .sub-goods {
                            display: block;
                        }
                    }
                }

                .sub-goods {
                    position: absolute;
                    display: none;
                    top: 0;
                    left: 200px;
                    width: 500px;
                    height: 100%;
                    background-color: #f5f4f4;
                    z-index: 999;
                    opacity: 0.9;

                    li {
                        margin: 15px 0;
                        color: #333;
                        font-weight: bold;
                        display: flex;

                        span:first-child {
                            width: 160px;
                            margin-left: 10px;
                        }

                        span a {
                            margin: 0 15px;
                            font-size: 14px;
                            font-weight: normal;
                        }
                    }
                }
            }

            .right-content {
                flex: 1;
                height: 100%;
                margin-left: 20px;

                .swpier-img {
                    width: 100%;
                    height: 437px;
                    margin-top: 10px;
                    border-radius: 8px;

                    .el-carousel {
                        height: 437px;
                    }

                    .el-carousel__item h3 {
                        color: #475669;
                        opacity: 0.75;
                        line-height: 300px;
                        margin: 0;
                        text-align: center;
                    }

                    .el-carousel__item:nth-child(2n) {
                        background-color: #99a9bf;
                    }

                    .el-carousel__item:nth-child(2n + 1) {
                        background-color: #d3dce6;
                    }
                }
            }
        }

        .hot-equip {
            margin-top: 30px;
            height: 37px;
            display: flex;
            align-items: center;
            justify-content: space-between;

            span {
                font-size: 18px;
                font-weight: bold;
                color: #333333;
            }

            a {
                color: #9d9d9d;
                font-size: 14px;
                cursor: pointer;
            }
        }

        .equip-pic {
            display: flex;
            align-items: center;
            li {
                width: calc((100% - 30px) / 3);
                &:nth-child(2n) {
                    margin: 0 15px;
                }
            }
        }

        .consult-nav {
            width: 100%;
            height: 40px;
            border-bottom: 1px solid #e0e0e0;
            display: flex;

            li {
                height: 40px;
                line-height: 40px;
                margin: 0 15px;

                &:hover {
                    border-bottom: 1px solid #2282ff;
                    cursor: pointer;
                }
            }
        }

        .consult-content {
            margin-top: 20px;
            height: 210px;
            display: flex;
            align-items: center;

            .left-bg {
                background: url(../../assets/img/home/2023_12_01_beijing2/left_bg.png) no-repeat;
                background-size: cover;
                width: 340px;
                height: 210px;
            }

            .right-consult {
                height: 210px;
                flex: 1;
                width: calc(100% - 340px);
                // padding-left: 35px;
                overflow-y: auto;
                .consult-box {
                    margin-bottom: 10px;
                    //height: 70px;
                    padding-left: 15px;
                    cursor: pointer;
                    .consult-title {
                        height: 30px;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;

                        h2 {
                            font-weight: bold;
                        }

                        span {
                            color: #827d7d;
                            font-size: 14px;
                        }
                    }

                    .consult-info {
                        width: calc(100% - 100px);
                        height: 10px;
                        line-height: 40px;
                        border-bottom: 1px dashed #979797;
                        overflow: hidden;
                        white-space: nowrap;
                        text-overflow: ellipsis;
                    }
                }
            }
        }
    }
</style>