首页以及装备共享大厅页面完善

components.d.ts

@@ -25,12 +25,8 @@ declare module 'vue' {
     ElImage: typeof import('element-plus/es')['ElImage']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
-    ElMenu: typeof import('element-plus/es')['ElMenu']
-    ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElOption: typeof import('element-plus/es')['ElOption']
-    ElPageHeader: typeof import('element-plus/es')['ElPageHeader']
     ElPagination: typeof import('element-plus/es')['ElPagination']
-    ElProgress: typeof import('element-plus/es')['ElProgress']
     ElRadioButton: typeof import('element-plus/es')['ElRadioButton']
     ElRadioGroup: typeof import('element-plus/es')['ElRadioGroup']
     ElRow: typeof import('element-plus/es')['ElRow']
@@ -40,16 +36,13 @@ declare module 'vue' {
     ElTabPane: typeof import('element-plus/es')['ElTabPane']
     ElTabs: typeof import('element-plus/es')['ElTabs']
     ElTag: typeof import('element-plus/es')['ElTag']
-    ElTimeline: typeof import('element-plus/es')['ElTimeline']
-    ElTimelineItem: typeof import('element-plus/es')['ElTimelineItem']
-    ElUpload: typeof import('element-plus/es')['ElUpload']
     EquipCard: typeof import('./src/components/equipCard.vue')['default']
+    EquipCardHall: typeof import('./src/components/equipCardHall/index.vue')['default']
     EquipCardNew: typeof import('./src/components/equipCardNew/index.vue')['default']
     EquipDetailTable: typeof import('./src/components/equipDetailTable.vue')['default']
     FooterInfo: typeof import('./src/components/FooterInfo/index.vue')['default']
     FormComponent: typeof import('./src/components/FormComponent/index.vue')['default']
     Header: typeof import('./src/components/header/index.vue')['default']
-    Hearder: typeof import('./src/components/hearder/index.vue')['default']
     Navmenu: typeof import('./src/components/Navmenu/index.vue')['default']
     PagingComponent: typeof import('./src/components/PagingComponent/index.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']

src/components/equipCardHall/index.vue

@@ -0,0 +1,191 @@
+<template>
+    <div class="equipCard" @click="cardClick">
+        <img :src="url" alt="" />
+        <ul class="item-details">
+            <li style="margin: 10px 0">
+                <span class="item_1_span"> {{ name }} </span>
+                <!-- <span class="item_2_span"> 待租 </span> -->
+            </li>
+            <li style="color: #b6b6b6">{{ company }}</li>
+            <li style="color: #b6b6b6">
+                <el-icon style="margin-right: 3px; color: #25ac9c"><PhoneFilled /></el-icon>
+                {{ personPhone }}
+            </li>
+        </ul>
+
+        <div style="margin: 10px 0; padding-right: 15px; text-align: right">
+            <span style="text-align: right; color: #ff4800">
+                <i style="font-size: 10px">￥</i>
+                <i style="margin: 0 6px; font-size: 17px; font-weight: bold">{{ price }}</i>
+                <i style="font-size: 10px">/ 天</i>
+            </span>
+        </div>
+    </div>
+</template>
+<script lang="ts" setup>
+const props: any = defineProps({
+    url: {
+        type: String,
+        default:
+            'https://img1.baidu.com/it/u=2080801041,3349735074&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1701536400&t=117e17eae3082b7b524f890245f7826f',
+    },
+    name: {
+        type: String,
+        default: '测试装备',
+    },
+    tags: {
+        type: Array,
+        default: ['待租', '合肥市'],
+    },
+    company: {
+        type: String,
+        default: '安徽某科技有限公司',
+    },
+    price: {
+        type: [String, Number],
+        default: 99,
+    },
+    timeUnit: {
+        type: String,
+        default: '月',
+    },
+    id: {
+        type: [String, Number],
+        default: '',
+    },
+    personPhone: {
+        type: String,
+        default: '',
+    },
+})
+
+const emit = defineEmits(['onClick'])
+const cardClick = () => {
+    const data = {
+        id: props.id,
+    }
+    emit('onClick', data)
+}
+
+const onHandelLessee = () => {
+    console.log('立即租赁')
+}
+</script>
+<style lang="scss" scoped>
+.equipCard {
+    width: 100%;
+    background: #f7f9fa;
+    display: flex;
+    flex-direction: column;
+
+    img {
+        height: 140px;
+    }
+
+    .title {
+        padding: 16px 2px;
+        font-size: 18px;
+        font-weight: bold;
+        color: #333333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+    }
+
+    .item-details {
+        padding: 0 10px 0 10px;
+
+        .address {
+            padding-right: 15px;
+        }
+        .address span {
+            width: 50%;
+        }
+
+        .item_1_span {
+            font-size: 16px;
+            font-weight: bold;
+        }
+        .item_2_span {
+            margin-left: 20px;
+            padding: 4px 10px;
+            color: #005af2;
+            border-radius: 4px;
+            background-color: #fff;
+            border: 1px solid #005af2;
+        }
+    }
+    .item-details li {
+        padding: 4px 0;
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+
+        span:first-child {
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+    }
+
+    .avatar {
+        width: 37%;
+        overflow: hidden;
+        border-radius: 15px;
+        .showImg {
+            width: 100%;
+            padding-bottom: 100%;
+            position: relative;
+            img {
+                position: absolute;
+                left: 0;
+                top: 0;
+                object-fit: cover;
+                width: 100%;
+                height: 100%;
+            }
+        }
+    }
+    .desc {
+        box-sizing: border-box;
+        margin-left: 10px;
+        flex: 1;
+        overflow: hidden;
+
+        .tag {
+            display: flex;
+            margin-top: 8px;
+            .item {
+                background: white;
+                font-size: 14px;
+                font-weight: 400;
+                color: #005af2;
+                padding: 2px 3px;
+                border: 1px solid #005af2;
+                margin-right: 10px;
+                border-radius: 4px;
+            }
+        }
+        .company {
+            margin-top: 10px;
+            font-size: 14px;
+            font-weight: 400;
+            color: #a5a4a4;
+            line-height: 20px;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+        }
+        .price {
+            font-size: 14px;
+            font-weight: 400;
+            color: #ff4800;
+            margin-top: 20px;
+            span {
+                font-size: 25px;
+                font-weight: 600;
+            }
+        }
+    }
+}
+</style>

src/components/header/index.vue

@@ -14,7 +14,7 @@ const isShowLogout = computed(() => {
     return store.token
 })
 
-const placeholderText = ref('请输入关键字')
+const placeholderText = ref('搜索设备关键词')
 
 // 退出登录
 const handlerLogout = () => {

src/components/uploadImg.vue

@@ -1,66 +1,71 @@
 <template>
-  <div class="uploadImg" :style="`width:${width}px;height:${width}px`">
+    <div class="uploadImg" :style="`width:${width}px;height:${width}px`">
-    <el-upload :disabled="disable" class="avatar-uploader" action="#" :show-file-list="false"
+        <el-upload
-      :on-change="handleAvatarSuccess">
+            :disabled="disable"
-      <img v-if="imageUrl" :src="imageUrl" @click="clickImg" class="avatar">
+            class="avatar-uploader"
-      <!--            <el-icon v-else class="avatar-uploader-icon"  :style="`line-height: ${width}px`"><Plus /></el-icon>-->
+            action="#"
-      <el-icon v-else class="avatar-uploader-icon">
+            :show-file-list="false"
-        <Plus />
+            :on-change="handleAvatarSuccess"
-      </el-icon>
+        >
-    </el-upload>
+            <img v-if="imageUrl" :src="imageUrl" @click="clickImg" class="avatar" />
-  </div>
+            <!--            <el-icon v-else class="avatar-uploader-icon"  :style="`line-height: ${width}px`"><Plus /></el-icon>-->
+            <el-icon v-else class="avatar-uploader-icon">
+                <Plus />
+            </el-icon>
+        </el-upload>
+    </div>
 </template>
 <script lang="ts" setup>
-import { ref } from "vue";
+import { ref } from 'vue'
 import { Plus } from '@element-plus/icons-vue'
 
 const props = defineProps(['disable', 'width'])
 const imageUrl = ref('')
 
 const handleAvatarSuccess = (res, file) => {
-  imageUrl.value = URL.createObjectURL(res.raw);
+    imageUrl.value = URL.createObjectURL(res.raw)
 }
 
 const emit = defineEmits(['onClick'])
 
 const clickImg = () => {
-  if (!props.disable) {
+    if (!props.disable) {
-    emit('onClick', {
+        emit('onClick', {
-      ...this.file,
+            ...this.file,
-      baseUrl: this.imageUrl
+            baseUrl: this.imageUrl,
-    })
+        })
-  }
+    }
 }
 </script>
 <style lang="scss" scoped>
 .uploadImg {
-  ::v-deep .avatar-uploader {
+    :deep .avatar-uploader {
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    border: 1px solid #dfdfdf;
-    overflow: hidden;
-
-    .el-upload--text {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 100%;
-      height: 100%;
-
-      .avatar-uploader-icon {
         width: 100%;
         height: 100%;
-      }
+        display: flex;
-    }
+        align-items: center;
+        justify-content: center;
+        border: 1px solid #dfdfdf;
+        overflow: hidden;
 
-    .avatar {
+        .el-upload--text {
-      width: 100%;
+            display: flex;
-      height: 100%;
+            align-items: center;
-      object-fit: cover;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+
+            .avatar-uploader-icon {
+                width: 100%;
+                height: 100%;
+            }
+        }
+
+        .avatar {
+            width: 100%;
+            height: 100%;
+            object-fit: cover;
+        }
     }
-  }
 }
 </style>

src/http/api/equip.ts

@@ -1,11 +1,13 @@
 import { post, get, put } from '../index'
 
+// 获取装备分类/maType/getTypeList
+export const getTypeListApi = () => {
+    return get(`/material-mall/maType/getTypeList`, {})
+}
+
 // 获取装备列表
-export const getList = (params = {}) => {
+export const getDeviceListApi = (data: any) => {
-    return post('/zlpt-equip/dev/list', {
+    return post('/material-mall/dev/list', data)
-        ...params,
-        maStatus: 16
-    })
 }
 
 //获取装备详情

src/http/api/home/index.ts

@@ -3,6 +3,9 @@ import { get, post } from '../../index'
 export const getGoodsClassListApi = () => {
     return get('/material-mall/maType/getEquipmentType', {})
 }
+export const getCompanyListApi = () => {
+    return get('/material-mall/dev/companyList', {})
+}
 export const getHotSearchListApi = () => {
     return get('/material-mall/maType/getHotSearch', {})
 }

src/layout/header.vue

@@ -15,7 +15,7 @@ const isShowLogout = computed(() => {
     return store.token
 })
 
-const placeholderText = ref('请输入关键字')
+const placeholderText = ref('搜索设备关键词')
 
 // 退出登录
 const handlerLogout = () => {
@@ -75,7 +75,7 @@ const searchKeywordBtn = () => {
     } else {
         router.push({
             name: 'equipList',
-            state: { keyWord: keywordIptValue.value },
+            query: { keyWord: keywordIptValue.value },
         })
     }
 }
@@ -196,7 +196,7 @@ const onCarts = () => {
                 @keydown.enter="searchKeywordBtn"
                 ref="inputRef"
                 @focus="placeholderText = ''"
-                @blur="placeholderText = '请输入关键字'"
+                @blur="placeholderText = '搜索设备关键词'"
             />
             <button class="search-btn" @click="searchKeywordBtn">搜索</button>
 

src/router/index.ts

@@ -84,7 +84,7 @@ const routes: Array<RouteRecordRaw> = [
                 component: () => import('views/home/index.vue'),
                 meta: {
                     title: '首页',
-                    keepAlive: false,
+                    keepAlive: true,
                     AuthFlag: false,
                     activeName: 'home',
                 },

src/views/cart/index.vue

@@ -53,13 +53,13 @@
                     </div>
                 </el-col>
                 <el-col :span="22" class="cart-user-info">
-                    <div>{{ item.company_name }}</div>
+                    <div>{{ item.companyPersonPhoneKey.companyName }}</div>
-                    <div class="user-name">{{ item.user_name }}</div>
+                    <div class="user-name">{{ item.companyPersonPhoneKey.person }}</div>
-                    <div class="user-phone">{{ item.user_phone }}</div>
+                    <div class="user-phone">{{ item.companyPersonPhoneKey.personPhone }}</div>
                 </el-col>
             </el-row>
 
-            <el-row class="cart-list" v-for="(goods, j) in item.good_list" :key="j">
+            <el-row class="cart-list" v-for="(goods, j) in item.devInfoVoList" :key="j">
                 <el-col :span="1">
                     <div style="text-align: center">
                         <el-checkbox v-model="goods.isChecked" @change="onChangeGoods(index)">
@@ -67,11 +67,14 @@
                     </div>
                 </el-col>
                 <el-col :span="9" class="goods-info">
-                    <img :src="goods.goods_pic" alt="" />
+                    <img
+                        src="https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1"
+                        alt=""
+                    />
                     <div class="goods-code">
-                        <div style="font-size: 14px; font-weight: bold">{{ goods.goods_name }}</div>
+                        <div style="font-size: 14px; font-weight: bold">{{ goods.deviceName }}</div>
-                        <div>装备编号： {{ goods.goods_code }}</div>
+                        <div>装备编号： {{ goods.code }}</div>
-                        <div>装备型号： {{ goods.goods_type }}</div>
+                        <div>装备型号： {{ goods.typeName }}</div>
                     </div>
                 </el-col>
                 <el-col :span="4">
@@ -176,122 +179,29 @@ import moment from 'moment'
 
 const protocolChecked = ref<boolean>(false)
 
-const cardList = ref([
+const cardList = ref<any>([])
-    {
-        company_name: '安徽博诺斯有限公司',
-        user_name: '王先生',
-        user_phone: '18725632356',
-        isChecked: false,
-        good_list: [
-            {
-                goods_pic:
-                    'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
-                goods_name: 'W190挖掘机',
-                goods_code: '995221_JHL',
-                goods_type: '挖地型号996',
-                lease_date: '',
-                lease_pic: 300,
-                lease_day: 1,
-                goods_num: 0,
-                totalAmount: 0,
-                isChecked: false,
-                lease_date_string: '',
-            },
-        ],
-    },
-    {
-        company_name: '安徽博诺斯有限公司',
-        user_name: '王先生',
-        user_phone: '18725632356',
-        isChecked: false,
-        good_list: [
-            {
-                goods_pic:
-                    'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
-                goods_name: 'W190挖掘机',
-                goods_code: '995221_JHL',
-                goods_type: '挖地型号996',
-                lease_date: '',
-                lease_pic: 300,
-                lease_day: 0,
-                goods_num: 0,
-                totalAmount: 0,
-                isChecked: false,
-                lease_date_string: '',
-            },
-            {
-                goods_pic:
-                    'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
-                goods_name: 'W190挖掘机',
-                goods_code: '995221_JHL',
-                goods_type: '挖地型号996',
-                lease_date: '',
-                lease_pic: 300,
-                lease_day: 0,
-                goods_num: 0,
-                totalAmount: 0,
-                isChecked: false,
-                lease_date_string: '',
-            },
-            {
-                goods_pic:
-                    'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
-                goods_name: 'W190挖掘机',
-                goods_code: '995221_JHL',
-                goods_type: '挖地型号996',
-                lease_date: '',
-                lease_pic: 300,
-                lease_day: 0,
-                goods_num: 0,
-                totalAmount: 0,
-                isChecked: false,
-                lease_date_string: '',
-            },
-        ],
-    },
-    {
-        company_name: '安徽博诺斯有限公司',
-        user_name: '王先生',
-        user_phone: '18725632356',
-        isChecked: false,
-        good_list: [
-            {
-                goods_pic:
-                    'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
-                goods_name: 'W190挖掘机',
-                goods_code: '995221_JHL',
-                goods_type: '挖地型号996',
-                lease_date: '',
-                lease_pic: 300,
-                lease_day: 0,
-                goods_num: 0,
-                totalAmount: 0,
-                isChecked: false,
-                lease_date_string: '',
-            },
-            {
-                goods_pic:
-                    'https://fc1tn.baidu.com/it/u=4185529537,1682541874&fm=202&src=766&fc=tdmatt&mola=new&crop=v1',
-                goods_name: 'W190挖掘机',
-                goods_code: '995221_JHL',
-                goods_type: '挖地型号996',
-                lease_date: '',
-                lease_pic: 300,
-                lease_day: 0,
-                goods_num: 0,
-                totalAmount: 0,
-                isChecked: false,
-                lease_date_string: '',
-            },
-        ],
-    },
-])
 
 const getBookCarDetailsData = async () => {
-    const res = await getBookCarDetailsApi()
+    const res: any = await getBookCarDetailsApi()
-    console.log(res, '购物车详情')
+    console.log(res, '----')
+
+    cardList.value = res.data
+
+    cardList.value.forEach((e: any) => {
+        e.isChecked = false
+        e.devInfoVoList.forEach((j: any) => {
+            j.isChecked = false
+        })
+    })
+
+    console.log(cardList.value, '***********')
+    // console.log(res, '购物车详情')
 }
-getBookCarDetailsData()
+
+onMounted(() => {
+    getBookCarDetailsData()
+})
+
 // 日期change事件
 const onLeaseDateChange = (e: any, item: any) => {
     item.lease_date_string = `${e[0]}至${e[1]}`
@@ -305,9 +215,9 @@ const onDeleteGoods = (index: number) => {
 
 // 全选change事件
 const onChangeAll = (e: boolean) => {
-    cardList.value.forEach((item) => {
+    cardList.value.forEach((item: any) => {
         item.isChecked = e
-        item.good_list.forEach((j) => {
+        item.devInfoVoList.forEach((j: any) => {
             j.isChecked = e
         })
     })
@@ -315,33 +225,33 @@ const onChangeAll = (e: boolean) => {
 
 // 公司全选事件
 const onChangeGoods = (index: number) => {
-    cardList.value[index].isChecked = cardList.value[index].good_list.every(
+    cardList.value[index].isChecked = cardList.value[index].devInfoVoList.every(
-        (e) => e.isChecked === true,
+        (e: any) => e.isChecked === true,
     )
 }
 // 公司全选事件
 const onChangeCompany = (e: boolean, index: number, item: any) => {
-    cardList.value[index].good_list.every((j) => (j.isChecked = e))
+    cardList.value[index].devInfoVoList.every((j) => (j.isChecked = e))
 }
 
 // 计算所有装备
 const amountNum = computed(() => {
     let amountNum = 0
     cardList.value.forEach((e) => {
-        amountNum = e.good_list.length + amountNum
+        amountNum = e.devInfoVoList.length + amountNum
     })
     return amountNum
 })
 // 计算全选按钮的选中状态
 const allChecked = computed(() => {
-    return cardList.value.every((e) => e.isChecked === true)
+    return cardList.value.every((e: any) => e.isChecked === true)
 })
 
 // 已勾选的所有装备
 const amountDevice = computed(() => {
     let amountNum = 0
     cardList.value.forEach((e) => {
-        e.good_list.forEach((g) => {
+        e.devInfoVoList.forEach((g) => {
             if (g.isChecked) {
                 amountNum++
             }
@@ -354,7 +264,7 @@ const amountDevice = computed(() => {
 const orderAmountPice = computed(() => {
     let orderAmountPice = 0
     cardList.value.forEach((e) => {
-        e.good_list.forEach((g) => {
+        e.devInfoVoList.forEach((g) => {
             if (g.isChecked) {
                 orderAmountPice = g.goods_num * g.lease_pic * g.lease_day + orderAmountPice
             }

src/views/home/index.vue

@@ -2,15 +2,20 @@
 import EquipCard from 'components/equipCard.vue'
 import EquipCardNew from 'components/equipCardNew/index.vue'
 import NavMenu from 'components/Navmenu/index.vue'
-import { getGoodsClassListApi } from 'http/api/home'
+import { getGoodsClassListApi, getCompanyListApi } 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 router: any = useRouter()
 
-const leftNavList: any = ref([])
+// const leftNavList: any = ref([])
+const companyList: any = ref([])
+const classList: any = ref([])
+
+const selectOptions = ref<boolean>(false) // 分类
+const selectOptionsValue = ref<string>('分类筛选')
 
 const loopList = ref([
     'https://zlpt-1259760603.cos.ap-nanjing.myqcloud.com/488bab245180ebf9f1f3d7db5301be4.png',
@@ -21,13 +26,42 @@ const getGoodsClassList = async () => {
     const res: any = await getGoodsClassListApi()
     console.log(res, '商品分类列表')
 
-    leftNavList.value = res.rows
+    // leftNavList.value = res.rows
+    classList.value = res.data
 }
 
 getGoodsClassList()
 
-const handlerGoodsDetails = (...arg) => {
+// 获取公司名称
-    const arr = arg.map((key, index) => {
+const getCompanyListData = async () => {
+    const res: any = await getCompanyListApi()
+    companyList.value = res.data
+    console.log('res公司名称', res)
+}
+
+getCompanyListData()
+
+// 点击跳转装备共享大厅
+const onSharedHall = (level: number, typeId: any) => {
+    router.push({
+        name: 'equipList',
+        query: {
+            level,
+            typeId,
+        },
+    })
+}
+const onSharedHallByCompany = (companyId: any) => {
+    router.push({
+        name: 'equipList',
+        query: {
+            companyId,
+        },
+    })
+}
+
+const handlerGoodsDetails = (...arg: any) => {
+    const arr = arg.map((key: any, index: number) => {
         return {
             level: index + 1 + '',
             typeId: key.id,
@@ -76,6 +110,21 @@ getHotDeviceList()
 const onClick = (val: any) => {
     router.push(`/equipDetail/${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>
@@ -85,60 +134,83 @@ const onClick = (val: any) => {
             <div class="home-goods">
                 <ul class="left-nav">
                     <!-- 左侧机械名称菜单按钮 -->
-                    <li class="item-nav" v-for="item in leftNavList" :key="item.name">
+                    <li class="left-filter" @click="onSelectOptions">
-                        {{ item.name }}
+                        {{ selectOptionsValue }}
-                        <ul class="sub-goods">
+                        <el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon>
-                            <!-- 级联框内 类别名称 -->
-                            <li v-for="child in item.children" :key="child.id">
-                                <!-- 第二级 -->
-                                <span class="second-name">
-                                    {{ child.name }}
-                                </span>
 
-                                <span
+                        <div class="select-options" v-if="selectOptions">
-                                    style="
+                            <div @click.stop="onSelectItem(1)">分类筛选</div>
-                                        display: flex;
+                            <div @click.stop="onSelectItem(2)">公司筛选</div>
-                                        flex: 1;
+                        </div>
-                                        flex-direction: column;
+                    </li>
-                                        flex-wrap: wrap;
+
-                                    "
+                    <template v-if="selectOptionsValue === '分类筛选'">
-                                >
+                        <div v-for="item in classList" :key="item.name" class="item-container">
-                                    <span
+                            <li class="item-nav" @click="onSharedHall(1, item.id)">
-                                        v-for="son in child.children"
+                                {{ item.name }}
-                                        :key="son.id"
+                                <ul class="sub-goods">
-                                        style="
+                                    <!-- 级联框内 类别名称 -->
-                                            font-size: 14px;
+                                    <li
-                                            font-weight: bold;
+                                        v-for="child in item.children"
-                                            width: 100%;
+                                        :key="child.id"
-                                            display: flex;
+                                        @click="onSharedHall(2, child.id)"
-                                        "
                                     >
-                                        <!-- {{ son.name }} -->
+                                        <!-- 第二级 -->
-
+                                        <span class="second-name">
-                                        <span style="width: 30%">
+                                            {{ child.name }}
-                                            {{ son.name }}
                                         </span>
 
-                                        <span style="width: 70%; display: flex; flex-wrap: wrap">
+                                        <span
+                                            style="
+                                                display: flex;
+                                                flex: 1;
+                                                flex-direction: column;
+                                                flex-wrap: wrap;
+                                            "
+                                        >
                                             <span
-                                                v-for="son_1 in son.children"
+                                                v-for="son in child.children"
-                                                :key="son_1.id"
+                                                :key="son.id"
                                                 style="
-                                                    font-size: 12px;
+                                                    font-size: 14px;
-                                                    font-weight: normal;
+                                                    font-weight: bold;
-                                                    padding: 0 2px;
+                                                    width: 100%;
-                                                    border-bottom: 1px solid #ccc;
+                                                    display: flex;
                                                 "
-                                                class="last-level"
+                                                @click="onSharedHall(3, son.id)"
-                                                @click="handlerGoodsDetails(item, child, son)"
                                             >
-                                                {{ son_1.name }}
+                                                <!-- {{ son.name }} -->
+
+                                                <span style="width: 30%">
+                                                    {{ son.name }}
+                                                </span>
+
+                                                <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>
-                                </span>
 
-                                <!-- <span>{{ child.name }}</span>
+                                        <!-- <span>{{ child.name }}</span>
                                 <span>
                                     <a
                                         v-for="son in child.children"
@@ -148,9 +220,23 @@ const onClick = (val: any) => {
                                         {{ son.name }}
                                     </a>
                                 </span> -->
+                                    </li>
+                                </ul>
                             </li>
-                        </ul>
+                        </div>
-                    </li>
+                    </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 }}
+                            </li>
+                        </div>
+                    </template>
                 </ul>
                 <div class="right-content">
                     <!-- 轮播图上方导航按钮 -->
@@ -273,80 +359,131 @@ const onClick = (val: any) => {
     .home-goods {
         height: 500px;
         display: flex;
+        position: relative;
 
         .left-nav {
-            position: relative;
+            // padding: 10px 0;
             // margin-top: 8px;
             width: 200px;
             height: 100%;
             display: flex;
-            // background-color: #f7f9fa;
-            background-color: #6599ed;
             flex-direction: column;
-            // justify-content: space-around;
+            align-items: center;
+            background-color: #f7f9fa;
+            overflow: hidden;
+            overflow-y: auto;
 
-            .item-nav {
+            .left-filter {
-                // text-align: left;
+                margin-top: 10px;
-                // padding-left: 50px;
+                padding: 3px 0;
-                color: #fff;
+                position: relative;
-                height: 46px;
+                display: flex;
-                line-height: 46px;
+                align-content: center;
-                text-align: center;
+                justify-content: center;
-                font-size: 16px !important;
+                color: #38b2a4;
+                // height: 46px;
+                // line-height: 46px;
+                // text-align: center;
+                font-weight: bold;
+                cursor: pointer;
 
-                &:hover {
+                .select-options {
-                    cursor: pointer;
+                    position: absolute;
-                    // color: #2282ff;
+                    width: 120%;
-                    // font-weight: bold;
+                    left: 50%;
-                    background-color: #1abc9c;
+                    bottom: -65px;
+                    border-radius: 4px;
+                    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+                    transform: translateX(-50%);
+                    background-color: #fff;
 
-                    .sub-goods {
+                    div {
-                        display: block;
+                        padding: 8px 6px;
+                        text-align: left;
+                        font-size: 14px;
+                        font-weight: normal;
+                        cursor: pointer;
+                        color: #333;
+                    }
+                    div:hover {
+                        color: #38b2a4;
                     }
                 }
             }
 
-            .sub-goods {
+            .item-container {
-                position: absolute;
+                width: 100%;
-                display: none;
+                text-align: center;
-                top: 0;
+                .item-nav {
-                left: 200px;
+                    // text-align: left;
-                width: 915px;
+                    // padding-left: 50px;
-                max-height: 100%;
+                    display: inline-block;
-                background-color: #f5f4f4;
+                    margin-top: 10px;
-                z-index: 999;
+                    padding: 0 10px;
-                // opacity: 0.9;
+                    color: #000;
-                border: 1px solid #333;
+                    height: 32px;
-                overflow-y: auto;
+                    line-height: 32px;
-                box-sizing: border-box;
+                    text-align: center;
+                    font-size: 16px !important;
 
-                li {
+                    &:hover {
-                    // margin: 10px 0;
+                        cursor: pointer;
-                    color: #333;
+                        // color: #2282ff;
-                    font-weight: bold;
+                        // font-weight: bold;
-                    display: flex;
+                        background-color: #1abc9c;
-
+                        border-radius: 18px;
-                    .second-name {
+                        color: #fff;
-                        width: 160px;
-                        margin-left: 10px;
                     }
+                }
 
-                    span a {
+                .sub-goods {
-                        margin: 0 15px;
+                    position: absolute;
-                        font-size: 14px;
+                    display: none;
-                        font-weight: normal;
+                    top: 0;
-                    }
+                    left: 200px;
+                    width: 915px;
+                    max-height: 100%;
+                    background-color: #f5f4f4;
+                    z-index: 999;
+                    // opacity: 0.9;
+                    border: 1px solid #333;
+                    overflow-y: auto;
+                    box-sizing: border-box;
 
-                    .last-level {
+                    li {
-                        margin-left: 3px;
+                        // margin: 10px 0;
-                    }
+                        color: #333;
+                        font-weight: bold;
+                        display: flex;
 
-                    .last-level:hover {
+                        .second-name {
-                        color: #1abc9c;
+                            width: 160px;
-                        border-bottom: 1px solid #1abc9c !important;
+                            margin-left: 10px;
+                        }
+
+                        span a {
+                            margin: 0 15px;
+                            font-size: 14px;
+                            font-weight: normal;
+                        }
+
+                        .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 {
@@ -467,7 +604,7 @@ const onClick = (val: any) => {
     }
 }
 
-::v-deep .el-carousel__container {
+:deep(.el-carousel__container) {
     height: 100%;
 }
 

vite.config.ts

@@ -132,7 +132,8 @@ export default ({ mode }: any) => {
           drop_console: isProduction, //生产正式 去除
           drop_debugger: isProduction //生产正式 去除
         }
-      }
+      },
+      minify: 'terser',
       /*
       rollupOptions: {
           output: {