冲突合并
This commit is contained in:
BianLzhaoMin
commit
30cb53ac37
|
|
@ -7,17 +7,14 @@ export {}
|
|||
|
||||
declare module 'vue' {
|
||||
export interface GlobalComponents {
|
||||
ElBreadcrumb: typeof import('element-plus/es')['ElBreadcrumb']
|
||||
ElBreadcrumbItem: typeof import('element-plus/es')['ElBreadcrumbItem']
|
||||
ElButton: typeof import('element-plus/es')['ElButton']
|
||||
ElCheckbox: typeof import('element-plus/es')['ElCheckbox']
|
||||
ElCol: typeof import('element-plus/es')['ElCol']
|
||||
ElDatePicker: typeof import('element-plus/es')['ElDatePicker']
|
||||
ElCarousel: typeof import('element-plus/es')['ElCarousel']
|
||||
ElCarouselItem: typeof import('element-plus/es')['ElCarouselItem']
|
||||
ElConfigProvider: typeof import('element-plus/es')['ElConfigProvider']
|
||||
ElIcon: typeof import('element-plus/es')['ElIcon']
|
||||
ElImage: typeof import('element-plus/es')['ElImage']
|
||||
ElInputNumber: typeof import('element-plus/es')['ElInputNumber']
|
||||
ElRow: typeof import('element-plus/es')['ElRow']
|
||||
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']
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
@ -14,7 +14,7 @@ const isShowLogout = computed(() => {
|
|||
return store.token
|
||||
})
|
||||
|
||||
const placeholderText = ref('请输入关键字')
|
||||
const placeholderText = ref('搜索设备关键词')
|
||||
|
||||
// 退出登录
|
||||
const handlerLogout = () => {
|
||||
|
|
|
|||
|
|
@ -1,66 +1,71 @@
|
|||
<template>
|
||||
<div class="uploadImg" :style="`width:${width}px;height:${width}px`">
|
||||
<el-upload :disabled="disable" class="avatar-uploader" action="#" :show-file-list="false"
|
||||
:on-change="handleAvatarSuccess">
|
||||
<img v-if="imageUrl" :src="imageUrl" @click="clickImg" class="avatar">
|
||||
<!-- <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>
|
||||
<div class="uploadImg" :style="`width:${width}px;height:${width}px`">
|
||||
<el-upload
|
||||
:disabled="disable"
|
||||
class="avatar-uploader"
|
||||
action="#"
|
||||
:show-file-list="false"
|
||||
:on-change="handleAvatarSuccess"
|
||||
>
|
||||
<img v-if="imageUrl" :src="imageUrl" @click="clickImg" class="avatar" />
|
||||
<!-- <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) {
|
||||
emit('onClick', {
|
||||
...this.file,
|
||||
baseUrl: this.imageUrl
|
||||
})
|
||||
}
|
||||
if (!props.disable) {
|
||||
emit('onClick', {
|
||||
...this.file,
|
||||
baseUrl: this.imageUrl,
|
||||
})
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<style lang="scss" scoped>
|
||||
.uploadImg {
|
||||
::v-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 {
|
||||
:deep .avatar-uploader {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border: 1px solid #dfdfdf;
|
||||
overflow: hidden;
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
.el-upload--text {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
|
||||
.avatar-uploader-icon {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.avatar {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -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 = {}) => {
|
||||
return post('/zlpt-equip/dev/list', {
|
||||
...params,
|
||||
maStatus: 16
|
||||
})
|
||||
export const getDeviceListApi = (data: any) => {
|
||||
return post('/material-mall/dev/list', data)
|
||||
}
|
||||
|
||||
//获取装备详情
|
||||
|
|
|
|||
|
|
@ -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', {})
|
||||
}
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
||||
|
|
|
|||
|
|
@ -84,7 +84,7 @@ const routes: Array<RouteRecordRaw> = [
|
|||
component: () => import('views/home/index.vue'),
|
||||
meta: {
|
||||
title: '首页',
|
||||
keepAlive: false,
|
||||
keepAlive: true,
|
||||
AuthFlag: false,
|
||||
activeName: 'home',
|
||||
},
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -53,13 +53,13 @@
|
|||
</div>
|
||||
</el-col>
|
||||
<el-col :span="22" class="cart-user-info">
|
||||
<div>{{ item.company_name }}</div>
|
||||
<div class="user-name">{{ item.user_name }}</div>
|
||||
<div class="user-phone">{{ item.user_phone }}</div>
|
||||
<div>{{ item.companyPersonPhoneKey.companyName }}</div>
|
||||
<div class="user-name">{{ item.companyPersonPhoneKey.person }}</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>装备编号： {{ goods.goods_code }}</div>
|
||||
<div>装备型号： {{ goods.goods_type }}</div>
|
||||
<div style="font-size: 14px; font-weight: bold">{{ goods.deviceName }}</div>
|
||||
<div>装备编号： {{ goods.code }}</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([
|
||||
{
|
||||
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 cardList = ref<any>([])
|
||||
|
||||
const getBookCarDetailsData = async () => {
|
||||
const res = await getBookCarDetailsApi()
|
||||
console.log(res, '购物车详情')
|
||||
const res: any = await getBookCarDetailsApi()
|
||||
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(
|
||||
(e) => e.isChecked === true,
|
||||
cardList.value[index].isChecked = cardList.value[index].devInfoVoList.every(
|
||||
(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
|
||||
}
|
||||
|
|
|
|||
File diff suppressed because it is too large
Load Diff
|
|
@ -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">
|
||||
{{ item.name }}
|
||||
<ul class="sub-goods">
|
||||
<!-- 级联框内 类别名称 -->
|
||||
<li v-for="child in item.children" :key="child.id">
|
||||
<!-- 第二级 -->
|
||||
<span class="second-name">
|
||||
{{ child.name }}
|
||||
</span>
|
||||
<li class="left-filter" @click="onSelectOptions">
|
||||
{{ selectOptionsValue }}
|
||||
<el-icon style="margin-left: 10px"><ArrowDownBold /></el-icon>
|
||||
|
||||
<span
|
||||
style="
|
||||
display: flex;
|
||||
flex: 1;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
"
|
||||
>
|
||||
<span
|
||||
v-for="son in child.children"
|
||||
:key="son.id"
|
||||
style="
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
"
|
||||
<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 }}
|
||||
<ul class="sub-goods">
|
||||
<!-- 级联框内 类别名称 -->
|
||||
<li
|
||||
v-for="child in item.children"
|
||||
:key="child.id"
|
||||
@click="onSharedHall(2, child.id)"
|
||||
>
|
||||
<!-- {{ son.name }} -->
|
||||
|
||||
<span style="width: 30%">
|
||||
{{ son.name }}
|
||||
<!-- 第二级 -->
|
||||
<span class="second-name">
|
||||
{{ child.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"
|
||||
:key="son_1.id"
|
||||
v-for="son in child.children"
|
||||
:key="son.id"
|
||||
style="
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
padding: 0 2px;
|
||||
border-bottom: 1px solid #ccc;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
width: 100%;
|
||||
display: flex;
|
||||
"
|
||||
class="last-level"
|
||||
@click="handlerGoodsDetails(item, child, son)"
|
||||
@click="onSharedHall(3, son.id)"
|
||||
>
|
||||
{{ 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>
|
||||
</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 }}
|
||||
</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 {
|
||||
// text-align: left;
|
||||
// padding-left: 50px;
|
||||
color: #fff;
|
||||
height: 46px;
|
||||
line-height: 46px;
|
||||
text-align: center;
|
||||
font-size: 16px !important;
|
||||
.left-filter {
|
||||
margin-top: 10px;
|
||||
padding: 3px 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;
|
||||
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
// color: #2282ff;
|
||||
// font-weight: bold;
|
||||
background-color: #1abc9c;
|
||||
.select-options {
|
||||
position: absolute;
|
||||
width: 120%;
|
||||
left: 50%;
|
||||
bottom: -65px;
|
||||
border-radius: 4px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
|
||||
transform: translateX(-50%);
|
||||
background-color: #fff;
|
||||
|
||||
.sub-goods {
|
||||
display: block;
|
||||
div {
|
||||
padding: 8px 6px;
|
||||
text-align: left;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
cursor: pointer;
|
||||
color: #333;
|
||||
}
|
||||
div:hover {
|
||||
color: #38b2a4;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.sub-goods {
|
||||
position: absolute;
|
||||
display: none;
|
||||
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;
|
||||
.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;
|
||||
|
||||
li {
|
||||
// margin: 10px 0;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
|
||||
.second-name {
|
||||
width: 160px;
|
||||
margin-left: 10px;
|
||||
&:hover {
|
||||
cursor: pointer;
|
||||
// color: #2282ff;
|
||||
// font-weight: bold;
|
||||
background-color: #1abc9c;
|
||||
border-radius: 18px;
|
||||
color: #fff;
|
||||
}
|
||||
}
|
||||
|
||||
span a {
|
||||
margin: 0 15px;
|
||||
font-size: 14px;
|
||||
font-weight: normal;
|
||||
}
|
||||
.sub-goods {
|
||||
position: absolute;
|
||||
display: none;
|
||||
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 {
|
||||
margin-left: 3px;
|
||||
}
|
||||
li {
|
||||
// margin: 10px 0;
|
||||
color: #333;
|
||||
font-weight: bold;
|
||||
display: flex;
|
||||
|
||||
.last-level:hover {
|
||||
color: #1abc9c;
|
||||
border-bottom: 1px solid #1abc9c !important;
|
||||
.second-name {
|
||||
width: 160px;
|
||||
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%;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -132,7 +132,8 @@ export default ({ mode }: any) => {
|
|||
drop_console: isProduction, //生产正式 去除
|
||||
drop_debugger: isProduction //生产正式 去除
|
||||
}
|
||||
}
|
||||
},
|
||||
minify: 'terser',
|
||||
/*
|
||||
rollupOptions: {
|
||||
output: {
|
||||
|
|
|
|||
Loading…
Reference in New Issue