674 lines
22 KiB
Vue
674 lines
22 KiB
Vue
<script setup lang="ts">
|
|
import EquipCard from 'components/equipCard.vue'
|
|
import EquipCardNew from 'components/equipCardNew/index.vue'
|
|
import NavMenu from 'components/Navmenu/index.vue'
|
|
import { getGoodsClassListApi, getCompanyListApi } from 'http/api/home'
|
|
import { useStore } from 'store/user'
|
|
import { mainStore } from 'store/main'
|
|
import { getHotList } from 'http/api/equip'
|
|
import userClass from '../../hooks/userClass'
|
|
|
|
import imgSrc from '../../assets/img/home/nw.png'
|
|
import swiper_1 from '../../assets/img/home/swiper01.png'
|
|
import swiper_2 from '../../assets/img/home/swiper02.png'
|
|
import swiper_4 from '../../assets/img/home/swiper04.png'
|
|
import swiper_5 from '../../assets/img/home/swiper05.png'
|
|
|
|
const { getCompanyList, getGoodsClassList } = userClass()
|
|
const router: any = useRouter()
|
|
const userStore = useStore()
|
|
const store: any = mainStore()
|
|
|
|
// const leftNavList: any = ref([])
|
|
const companyList: any = ref([])
|
|
const classList: any = ref([])
|
|
|
|
const selectOptions = ref<boolean>(false) // 分类
|
|
const selectOptionsValue = ref<string>('分类筛选')
|
|
|
|
const loopList = ref([swiper_2, swiper_4])
|
|
|
|
if (userStore.companyList.length === 0) {
|
|
getCompanyList()
|
|
companyList.value = userStore.companyList
|
|
} else {
|
|
companyList.value = userStore.companyList
|
|
}
|
|
if (userStore.goodsClassList.length === 0) {
|
|
getGoodsClassList().then(() => {
|
|
classList.value = userStore.goodsClassList
|
|
})
|
|
} else {
|
|
classList.value = userStore.goodsClassList
|
|
}
|
|
|
|
// // 获取公司名称
|
|
// const getCompanyListData = async () => {
|
|
// const res: any = await getCompanyListApi()
|
|
// companyList.value = res.data
|
|
// console.log('res公司名称', res)
|
|
// }
|
|
|
|
// getCompanyListData()
|
|
|
|
// 点击跳转装备共享大厅
|
|
const onSharedHall = (level: number, typeId: any, name: any) => {
|
|
router.push({
|
|
name: 'equipList',
|
|
query: {
|
|
level,
|
|
typeId,
|
|
name,
|
|
},
|
|
})
|
|
}
|
|
const onSharedHallByCompany = (companyId: any, name: any) => {
|
|
router.push({
|
|
name: 'equipList',
|
|
query: {
|
|
companyId,
|
|
name,
|
|
},
|
|
})
|
|
}
|
|
|
|
const handlerGoodsDetails = (...arg: any) => {
|
|
const arr = arg.map((key: any, index: number) => {
|
|
return {
|
|
level: index + 1 + '',
|
|
typeId: key.id,
|
|
typeName: key.name,
|
|
}
|
|
})
|
|
|
|
router.push({
|
|
name: 'equipList',
|
|
state: { typeTag: arr },
|
|
})
|
|
}
|
|
|
|
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.data
|
|
}
|
|
|
|
getHotDeviceList()
|
|
|
|
/* 热搜卡片点击跳转至详情页 */
|
|
const onClick = (val: any) => {
|
|
router.push({
|
|
name: 'equipDetail',
|
|
query: {
|
|
id: val.id,
|
|
},
|
|
})
|
|
}
|
|
|
|
// 分类点击事件
|
|
const onSelectOptions = () => {
|
|
selectOptions.value = !selectOptions.value
|
|
}
|
|
|
|
// 分类选择事件
|
|
const onSelectItem = (type: number) => {
|
|
if (type === 1) {
|
|
selectOptionsValue.value = '分类筛选'
|
|
} else {
|
|
selectOptionsValue.value = '公司筛选'
|
|
}
|
|
selectOptions.value = false
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<div class="home-index-banner">
|
|
<div class="home-index">
|
|
<!-- 商品菜单导航以及轮播图区域 -->
|
|
<div class="home-goods">
|
|
<ul class="left-nav">
|
|
<!-- 左侧机械名称菜单按钮 -->
|
|
<li class="left-filter" @click="onSelectOptions">
|
|
<div>
|
|
{{ selectOptionsValue }}
|
|
<el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon>
|
|
</div>
|
|
|
|
<div class="select-options" v-if="selectOptions">
|
|
<div @click.stop="onSelectItem(1)">分类筛选</div>
|
|
<div @click.stop="onSelectItem(2)">公司筛选</div>
|
|
</div>
|
|
</li>
|
|
|
|
<template v-if="selectOptionsValue === '分类筛选'">
|
|
<div v-for="item in classList" :key="item.name" class="item-container">
|
|
<li class="item-nav" @click="onSharedHall(1, item.id, item.name)">
|
|
{{ item.name }}
|
|
<ul class="sub-goods">
|
|
<!-- 级联框内 类别名称 -->
|
|
<li
|
|
v-for="child in item.children"
|
|
:key="child.id"
|
|
@click.stop="onSharedHall(2, child.id, child.name)"
|
|
>
|
|
<!-- 第二级 -->
|
|
<span class="second-name">
|
|
{{ child.name }}
|
|
</span>
|
|
|
|
<span style="display: flex; flex: 1; flex-wrap: wrap">
|
|
<a
|
|
v-for="son in child.children"
|
|
:key="son.id"
|
|
style="font-size: 14px; font-weight: normal"
|
|
@click.stop="onSharedHall(3, son.id, son.name)"
|
|
>
|
|
{{ son.name }} ( {{ son.maCount }} )
|
|
</a>
|
|
</span>
|
|
|
|
<!-- <span style="display: flex; flex: 1">
|
|
<span
|
|
v-for="son in child.children"
|
|
:key="son.id"
|
|
style="font-size: 14px; font-weight: normal"
|
|
@click="onSharedHall(3, son.id)"
|
|
>
|
|
{{ son.name }} -->
|
|
|
|
<!-- <span
|
|
style="
|
|
width: 70%;
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
"
|
|
>
|
|
<span
|
|
v-for="son_1 in son.children"
|
|
:key="son_1.id"
|
|
style="
|
|
font-size: 12px;
|
|
font-weight: normal;
|
|
padding: 0 2px;
|
|
border-bottom: 1px solid #ccc;
|
|
"
|
|
class="last-level"
|
|
@click="onSharedHall(4, son_1.id)"
|
|
>
|
|
{{ son_1.name }}
|
|
</span>
|
|
</span> -->
|
|
<!-- </span>
|
|
</span> -->
|
|
|
|
<!-- <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>
|
|
</div>
|
|
</template>
|
|
|
|
<template v-else>
|
|
<div
|
|
v-for="item in companyList"
|
|
:key="item.companyId"
|
|
class="item-container"
|
|
>
|
|
<li
|
|
class="item-nav"
|
|
@click="onSharedHallByCompany(item.companyId, item.companyName)"
|
|
>
|
|
{{ item.companyName }}
|
|
{{ item.maCount ? `(${item.maCount})` : '(0)' }}
|
|
</li>
|
|
</div>
|
|
</template>
|
|
</ul>
|
|
<div class="right-content">
|
|
<!-- 轮播图上方导航按钮 -->
|
|
<NavMenu />
|
|
<!-- 轮播图 -->
|
|
<div class="swiper-img">
|
|
<el-carousel :interval="5000" arrow="always" style="height: 100%">
|
|
<el-carousel-item
|
|
v-for="(item, index) in loopList"
|
|
:key="index"
|
|
style="height: 100%"
|
|
>
|
|
<el-image
|
|
style="width: 100%; height: 100%"
|
|
:src="item"
|
|
fit="cover"
|
|
/>
|
|
</el-carousel-item>
|
|
</el-carousel>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<!-- 热搜装备 -->
|
|
|
|
<div class="hot-equip-container" v-if="false">
|
|
<div class="hot-equip">
|
|
<span>最新装备</span>
|
|
<a
|
|
@click="
|
|
() => {
|
|
router.push({ name: 'equipList' })
|
|
}
|
|
"
|
|
style="
|
|
color: #00a288;
|
|
font-weight: bold;
|
|
text-decoration: underline;
|
|
font-size: 16px;
|
|
letter-spacing: 1px;
|
|
"
|
|
>更多产品</a
|
|
>
|
|
</div>
|
|
|
|
<div v-for="item in hotDeviceList" :key="item.typeName" style="margin-top: 15px">
|
|
<div class="hot-title">
|
|
{{ item.typeName }}
|
|
</div>
|
|
<ul class="equip-pic">
|
|
<li v-for="g in item.devInfoList" :key="g.maId" style="cursor: pointer">
|
|
<!-- <EquipCardNew
|
|
@onClick="onClick"
|
|
:company="item.companyName || '安徽博诺斯有限公司'"
|
|
:price="item.dayLeasePrice"
|
|
:tags="[item.maStatusStr || '待租', item.cityStr || '合肥']"
|
|
:name="item.modelName + item.deviceName"
|
|
|
|
:id="item.maId"
|
|
/> -->
|
|
<EquipCardNew
|
|
@onClick="onClick"
|
|
:id="g.maId"
|
|
:companyId="g.companyId"
|
|
:company="g.companyName"
|
|
:operateAddress="g.operateAddress"
|
|
:name="g.deviceName"
|
|
:typeName="g.typeName"
|
|
:price="g.dayLeasePrice"
|
|
:url="g.picUrl"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 专题咨询 -->
|
|
|
|
<!-- <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 5px;
|
|
// border-radius: 10px;
|
|
// box-sizing: border-box;
|
|
}
|
|
|
|
.home-index {
|
|
.home-goods {
|
|
height: 700px;
|
|
display: flex;
|
|
position: relative;
|
|
|
|
.left-nav {
|
|
// padding: 10px 0;
|
|
// margin-top: 8px;
|
|
width: 270px;
|
|
height: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
background-color: #f7f9fa;
|
|
overflow: hidden;
|
|
overflow-y: auto;
|
|
border-radius: 16px;
|
|
|
|
.left-filter {
|
|
margin-top: 10px;
|
|
padding: 8px 0;
|
|
position: relative;
|
|
display: flex;
|
|
align-content: center;
|
|
justify-content: center;
|
|
color: #38b2a4;
|
|
// height: 46px;
|
|
// line-height: 46px;
|
|
// text-align: center;
|
|
font-weight: bold;
|
|
cursor: pointer;
|
|
|
|
width: 100%;
|
|
|
|
.select-options {
|
|
position: absolute;
|
|
bottom: 0;
|
|
left: 0;
|
|
|
|
transform: translate(50%, 100%);
|
|
// left: 50%;
|
|
// bottom: -65px;
|
|
border-radius: 4px;
|
|
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
|
// transform: translateX(-50%);
|
|
background-color: #fff;
|
|
|
|
div {
|
|
padding: 10px 30px;
|
|
text-align: left;
|
|
// font-size: 14px;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
cursor: pointer;
|
|
color: #333;
|
|
}
|
|
div:hover {
|
|
color: #fff;
|
|
background-color: #00a288;
|
|
}
|
|
}
|
|
}
|
|
|
|
.item-container {
|
|
width: 100%;
|
|
text-align: center;
|
|
.item-nav {
|
|
// text-align: left;
|
|
// padding-left: 50px;
|
|
display: inline-block;
|
|
margin-top: 10px;
|
|
// padding: 0 10px;
|
|
color: #000;
|
|
height: 32px;
|
|
line-height: 32px;
|
|
text-align: center;
|
|
// font-size: 16px !important;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
// color: #2282ff;
|
|
// font-weight: bold;
|
|
background-color: #1abc9c;
|
|
border-radius: 18px;
|
|
color: #fff;
|
|
}
|
|
}
|
|
|
|
.sub-goods {
|
|
position: absolute;
|
|
display: none;
|
|
top: 0;
|
|
left: 270px;
|
|
width: 1242px;
|
|
min-height: 100%;
|
|
max-height: 100%;
|
|
background-color: #fff;
|
|
z-index: 999;
|
|
// opacity: 0.9;
|
|
border: 1px solid #eee;
|
|
overflow-y: auto;
|
|
box-sizing: border-box;
|
|
|
|
li {
|
|
// margin: 10px 0;
|
|
padding: 10px 80px;
|
|
color: #333;
|
|
font-weight: bold;
|
|
display: flex;
|
|
align-items: center;
|
|
// background: orange;
|
|
|
|
.second-name {
|
|
// width: 160px;
|
|
margin-left: 10px;
|
|
}
|
|
|
|
span a {
|
|
margin: 0 30px;
|
|
font-size: 16px;
|
|
font-weight: normal;
|
|
color: #333;
|
|
&:hover {
|
|
color: #1abc9c;
|
|
border-bottom: 1px solid #1abc9c !important;
|
|
}
|
|
}
|
|
|
|
.last-level {
|
|
margin-left: 3px;
|
|
}
|
|
|
|
.last-level:hover {
|
|
color: #1abc9c;
|
|
border-bottom: 1px solid #1abc9c !important;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
.item-container:hover {
|
|
.sub-goods {
|
|
display: block !important;
|
|
z-index: 9999;
|
|
}
|
|
}
|
|
}
|
|
|
|
.right-content {
|
|
box-sizing: border-box;
|
|
flex: 1;
|
|
height: 100%;
|
|
margin-left: 20px;
|
|
display: flex;
|
|
flex-direction: column;
|
|
|
|
.swiper-img {
|
|
margin-top: 20px;
|
|
flex: 1;
|
|
border-radius: 8px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.hot-equip {
|
|
margin-top: 30px;
|
|
height: 37px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
|
|
span {
|
|
background-color: #1abc9c;
|
|
padding: 10px 18px;
|
|
color: #fff;
|
|
}
|
|
|
|
a {
|
|
color: rgba(24, 103, 221, 0.8);
|
|
font-size: 14px;
|
|
cursor: pointer;
|
|
}
|
|
}
|
|
|
|
.hot-title {
|
|
padding: 15px 0 10px 20px;
|
|
font-size: 16px;
|
|
font-weight: bold;
|
|
letter-spacing: 1px;
|
|
}
|
|
.equip-pic {
|
|
display: flex;
|
|
flex-wrap: wrap;
|
|
li {
|
|
width: calc((100% - 100px) / 4);
|
|
margin: 8px 0 8px 20px;
|
|
&:nth-child(4n) {
|
|
margin-right: 20px;
|
|
}
|
|
}
|
|
}
|
|
|
|
.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 #3cb4a6;
|
|
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;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
:deep(.el-carousel__container) {
|
|
height: 100%;
|
|
}
|
|
|
|
.el-carousel--horizontal {
|
|
border-radius: 14px;
|
|
}
|
|
</style>
|