922 lines
27 KiB
Vue
922 lines
27 KiB
Vue
<template>
|
||
<div class="equipList">
|
||
<NavMenu></NavMenu>
|
||
|
||
<!-- <div class="class-container" v-if="currentIndex !== null">
|
||
<a
|
||
v-for="(item, index) in currentIndex == 1 ? levelList : levelList_2"
|
||
:key="index"
|
||
:style="index + 1 == currentIndex ? 'color:#000' : 'color: #333'"
|
||
>{{ item.title
|
||
}}{{
|
||
currentIndex == 1
|
||
? index == levelList.length - 1
|
||
? ''
|
||
: '>'
|
||
: index == levelList_2.length - 1
|
||
? ''
|
||
: '>'
|
||
}}
|
||
</a>
|
||
</div> -->
|
||
<div class="screen">
|
||
<div class="choose">
|
||
<template v-for="(v, i) in screenChooseList" :key="i">
|
||
<div class="line" v-if="v.isShow">
|
||
<div class="label">
|
||
{{ v.name }}
|
||
</div>
|
||
<div class="select">
|
||
<template v-for="(val, index) in v.list" :key="index">
|
||
<div
|
||
class="item"
|
||
@click="selectScreen(v.type, val, i)"
|
||
:class="{
|
||
active: val.isChecked,
|
||
}"
|
||
>
|
||
<span style="color: #333">{{ val.name }}</span>
|
||
<!-- <span v-else>
|
||
{{ val.name }}
|
||
{{
|
||
index == 0
|
||
? ''
|
||
: val.maCount
|
||
? `(${val.maCount})`
|
||
: '(0)'
|
||
}}
|
||
</span> -->
|
||
</div>
|
||
</template>
|
||
|
||
<div v-if="i == 3" style="display: flex; align-items: center">
|
||
<el-input v-model="startPrice" style="width: 60px" size="small" />
|
||
<span style="margin: 0 5px">-</span>
|
||
<el-input v-model="endPrice" style="width: 60px" size="small" />
|
||
<el-button
|
||
@click.stop="onConfirmPrice"
|
||
size="small"
|
||
type="primary"
|
||
style="margin-left: 20px"
|
||
>确定</el-button
|
||
>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<div class="line" v-if="screenTags.length > 0">
|
||
<div class="label">已选条件：</div>
|
||
<div class="select tags">
|
||
<el-tag
|
||
v-for="(tag, i) in screenTags"
|
||
:key="i"
|
||
class="item"
|
||
@close="handleClose(tag)"
|
||
closable
|
||
>
|
||
{{ tag.name }}
|
||
</el-tag>
|
||
|
||
<span class="clear-btn" @click="onClearTags"> 清除选项 </span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="btns">
|
||
<div
|
||
class="item"
|
||
@click="changeOption(v)"
|
||
:class="v.id == optionActive && 'active'"
|
||
v-for="(v, i) in screenOptionList"
|
||
:key="i"
|
||
>
|
||
{{ v.name }}
|
||
<template v-if="v.sort">
|
||
<el-icon class="icon" v-show="v.sort == 'DESC'">
|
||
<CaretBottom />
|
||
</el-icon>
|
||
<el-icon class="icon" v-show="v.sort == 'ASC'">
|
||
<CaretTop />
|
||
</el-icon>
|
||
</template>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<!-- <div class="showScreen">
|
||
<div class="title">筛选条件：</div>
|
||
<div class="tags">
|
||
<el-tag
|
||
v-for="(tag, i) in screenTags"
|
||
:key="i"
|
||
class="item"
|
||
@close="handleClose(tag, i)"
|
||
closable
|
||
>
|
||
{{ tag.name }}
|
||
</el-tag>
|
||
<el-tag
|
||
class="item"
|
||
v-if="screenTags.length > 0"
|
||
type="danger"
|
||
@close="tagClear"
|
||
closable
|
||
>
|
||
清空所有条件
|
||
</el-tag>
|
||
</div>
|
||
</div> -->
|
||
|
||
<div class="showList" v-if="total > 0">
|
||
<EquipCardHall
|
||
class="card"
|
||
v-for="(v, i) in equipList"
|
||
:key="i"
|
||
:url="v.picUrl"
|
||
:name="v.deviceName"
|
||
:price="v.dayLeasePrice"
|
||
:company="v.companyName"
|
||
:personPhone="v.personPhone"
|
||
:typeName="v.typeName"
|
||
@click="onHandleDetails(v.maId)"
|
||
/>
|
||
<!-- <equip-card
|
||
class="card"
|
||
v-for="(v, i) in equipList"
|
||
:key="i"
|
||
:url="v.picUrl"
|
||
:company="v.companyName"
|
||
:tags="[v.maStatusStr, v.cityStr || '合肥市']"
|
||
:name="`${v.modelName}${v.deviceName}`"
|
||
:price="v.monthLeasePrice"
|
||
:id="v.maId"
|
||
time-unit="月"
|
||
@on-click="toDetail"
|
||
></equip-card> -->
|
||
</div>
|
||
<div class="noData" v-else>
|
||
<el-empty :image-size="200" />
|
||
</div>
|
||
|
||
<div class="pagination">
|
||
<!-- <el-pagination
|
||
v-model:current-page="pageData.pageNum"
|
||
:page-size="pageData.pageSize"
|
||
@current-change="pageChange"
|
||
:pager-count="5"
|
||
layout="prev, pager, next"
|
||
/> -->
|
||
|
||
<el-pagination
|
||
size="small"
|
||
background
|
||
layout="prev, pager, next"
|
||
:page-size="pageData.pageSize"
|
||
:total="total"
|
||
class="mt-4"
|
||
@current-change="onCurrentChange"
|
||
v-if="total > 0"
|
||
/>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
<script lang="ts" setup>
|
||
import { computed, onMounted, onUnmounted, reactive, ref } from 'vue'
|
||
import EquipCard from '@/components/equipCard.vue'
|
||
import EquipCardHall from '@/components/equipCardHall/index.vue'
|
||
|
||
import { useRoute, useRouter } from 'vue-router'
|
||
import {
|
||
apiGetAddressList,
|
||
apiGetEquipTypeList,
|
||
getTypeListApi,
|
||
getZoneListApi,
|
||
getCompanyCountApi,
|
||
} from 'http/api/equip'
|
||
import { getCompanyListApi, getGoodsClassListApi } from 'http/api/home'
|
||
import $bus from '@/utils/bus'
|
||
import NavMenu from '@/components/Navmenu/index.vue'
|
||
import { ElMessage } from 'element-plus'
|
||
|
||
const router = useRouter()
|
||
const route: any = useRoute()
|
||
const startPrice: any = ref(0)
|
||
const endPrice: any = ref(0)
|
||
const levelList = ref<any>([{ title: '一级分类' }, { title: '二级分类' }])
|
||
const levelList_2 = ref<any>([{ title: '一级分类' }, { title: '二级分类' }, { title: '三级分类' }])
|
||
let currentIndex = route.query.level || null
|
||
|
||
const onConfirmPrice = () => {
|
||
ElMessage.closeAll()
|
||
let rex = /^[1-9][0-9]*$/
|
||
if (!rex.test(startPrice.value) || !rex.test(endPrice.value)) {
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: '请输入大于0且不能以0开头的正整数',
|
||
})
|
||
return
|
||
}
|
||
|
||
if (parseInt(endPrice.value) < parseInt(startPrice.value)) {
|
||
ElMessage({
|
||
type: 'warning',
|
||
message: '结束值不可小于起始值',
|
||
})
|
||
return
|
||
}
|
||
|
||
const itemInfo = {
|
||
name: `${parseInt(startPrice.value)}-${parseInt(endPrice.value)}`,
|
||
value: [parseInt(startPrice.value), parseInt(endPrice.value)],
|
||
isChecked: true,
|
||
index: 2,
|
||
isShow: false,
|
||
isAdd: true,
|
||
}
|
||
|
||
screenChooseList[3].list[0].isChecked = false
|
||
screenChooseList[3].list.push(itemInfo)
|
||
|
||
getDeviceListData()
|
||
}
|
||
|
||
//筛选条件列表数据
|
||
const screenChooseList: any = reactive([
|
||
{
|
||
name: '使用年限：',
|
||
type: 'userYear',
|
||
isShow: true,
|
||
list: [
|
||
{
|
||
isChecked: true,
|
||
name: '全部',
|
||
value: '',
|
||
index: 0,
|
||
},
|
||
{
|
||
isChecked: false,
|
||
name: '0-1年',
|
||
value: [0, 1],
|
||
index: 0,
|
||
},
|
||
{
|
||
isChecked: false,
|
||
name: '1-3年',
|
||
value: [1, 3],
|
||
index: 0,
|
||
},
|
||
{
|
||
isChecked: false,
|
||
name: '3-5年',
|
||
value: [3, 5],
|
||
index: 0,
|
||
},
|
||
{
|
||
isChecked: false,
|
||
name: '5-8年',
|
||
value: [5, 8],
|
||
index: 0,
|
||
},
|
||
{
|
||
isChecked: false,
|
||
name: '10年以上',
|
||
value: ['', 10],
|
||
index: 0,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: 'deviceClass',
|
||
name: '装备分类：',
|
||
isShow: true,
|
||
list: [
|
||
{
|
||
name: '全部',
|
||
value: '',
|
||
isChecked: true,
|
||
index: 1,
|
||
},
|
||
],
|
||
},
|
||
{
|
||
type: 'deviceClass',
|
||
name: '下级分类：',
|
||
isShow: currentIndex === null ? false : true,
|
||
list: [
|
||
{
|
||
name: '全部',
|
||
value: '',
|
||
isChecked: true,
|
||
index: 2,
|
||
},
|
||
],
|
||
},
|
||
// {
|
||
// type: 'leasePrice',
|
||
// name: '租金(天/元)：',
|
||
// isShow: true,
|
||
// list: [
|
||
// {
|
||
// name: '全部',
|
||
// value: '',
|
||
// isChecked: true,
|
||
// index: 3,
|
||
// isShow: true,
|
||
// },
|
||
// {
|
||
// name: '0-500',
|
||
// value: [0, 500],
|
||
// isChecked: false,
|
||
// index: 3,
|
||
// isShow: true,
|
||
// },
|
||
// {
|
||
// name: '500-1000',
|
||
// value: [500, 1000],
|
||
// isChecked: false,
|
||
// index: 3,
|
||
// isShow: true,
|
||
// },
|
||
// {
|
||
// name: '1000-1500',
|
||
// value: [1000, 1500],
|
||
// isChecked: false,
|
||
// index: 3,
|
||
// isShow: true,
|
||
// },
|
||
// {
|
||
// name: '1500-2000',
|
||
// value: [1500, 2000],
|
||
// isChecked: false,
|
||
// index: 3,
|
||
// isShow: true,
|
||
// },
|
||
// {
|
||
// name: '2000-2500',
|
||
// value: [2000, 2500],
|
||
// isChecked: false,
|
||
// index: 3,
|
||
// isShow: true,
|
||
// },
|
||
// {
|
||
// name: '2500-3000',
|
||
// value: [2500, 3000],
|
||
// isChecked: false,
|
||
// index: 3,
|
||
// isShow: true,
|
||
// },
|
||
// ],
|
||
// },
|
||
// {
|
||
// type: 'companyId',
|
||
// name: '所属公司',
|
||
// isShow: true,
|
||
// list: [
|
||
// {
|
||
// isChecked: true,
|
||
// name: '全部',
|
||
// value: '',
|
||
// index: 4,
|
||
// },
|
||
// ],
|
||
// },
|
||
{
|
||
type: 'temp',
|
||
name: '',
|
||
isShow: false,
|
||
list: [],
|
||
},
|
||
])
|
||
|
||
// 已选条件的tag标签
|
||
const screenTags = computed(() => {
|
||
const selectTagList: any = []
|
||
screenChooseList.forEach((e: any) => {
|
||
e.list.forEach((j: any) => {
|
||
if (j.isChecked && j.name !== '全部') {
|
||
console.log(j, '******')
|
||
selectTagList.push(j)
|
||
}
|
||
})
|
||
})
|
||
|
||
return selectTagList
|
||
})
|
||
// 综合排序 更新时间 月租金 排序按钮
|
||
const screenOptionList: any = reactive([
|
||
{
|
||
name: '综合排序',
|
||
id: 0,
|
||
sort: '',
|
||
},
|
||
{
|
||
name: '租金',
|
||
id: 1,
|
||
sort: 'DESC',
|
||
},
|
||
{
|
||
name: '上架时间',
|
||
id: 2,
|
||
sort: 'DESC', //desc or desc
|
||
},
|
||
])
|
||
//激活 排序按钮
|
||
const optionActive = ref(0)
|
||
|
||
//分页参数
|
||
const pageData = reactive({
|
||
pageNum: 1,
|
||
pageSize: 20,
|
||
})
|
||
|
||
// 总条数
|
||
const total = ref(0)
|
||
|
||
//装备列表
|
||
const equipList: any = ref([])
|
||
|
||
// 获取装备分类
|
||
const getTypeListData = async () => {
|
||
let params: any = {}
|
||
if (route.query.level > 1) {
|
||
params.id = route.query.typeId
|
||
}
|
||
const res = await getTypeListApi()
|
||
const typeList = res.data.map((e: any) => {
|
||
return { ...e, name: e.typeName, value: e.typeId, isChecked: false, index: 1 }
|
||
})
|
||
screenChooseList[1].list.push(...typeList)
|
||
}
|
||
// 获取下级分类
|
||
const lowerClassData = async () => {
|
||
const res = await getTypeListApi({
|
||
typeId: route.query.typeId,
|
||
level: route.query.level,
|
||
})
|
||
|
||
const typeList_1 = res.data
|
||
.filter((e: any) => e.level == route.query.level)
|
||
.map((j: any) => {
|
||
return { ...j, name: j.typeName, value: j.typeId, isChecked: false, index: 1 }
|
||
})
|
||
const typeList_2 = res.data
|
||
.filter((e: any) => e.level == route.query.level * 1 + 1)
|
||
.map((j: any) => {
|
||
return { ...j, name: j.typeName, value: j.typeId, isChecked: false, index: 1 }
|
||
})
|
||
|
||
console.log(typeList_2, 'typeList_2')
|
||
|
||
screenChooseList[1].list.push(...typeList_1)
|
||
screenChooseList[2].list.push(...typeList_2)
|
||
|
||
// const typeList = res.data.map((e: any) => {
|
||
// return { ...e, name: e.typeName, value: e.typeId, isChecked: false, index: 1 }
|
||
// })
|
||
// screenChooseList[2].list.push(...typeList)
|
||
}
|
||
|
||
// 获取设备所在地
|
||
const getCompanyAddressListData = async () => {
|
||
const res: any = await getCompanyListApi()
|
||
const addressList = res.data
|
||
.filter((e: any) => e.isShow)
|
||
.map((e: any) => {
|
||
// console.log('🚀 ~ addressList ~ e:', e)
|
||
return { ...e, name: e.companyName, value: e.companyId, isChecked: false, index: 4 }
|
||
})
|
||
screenChooseList[4].list.push(...addressList)
|
||
}
|
||
// 获取分类
|
||
|
||
// 查询装备列表数据
|
||
const getDeviceListData = async (params: any = null, keyWord: any = null) => {
|
||
// 组装查询参数
|
||
const searchParams: any = {
|
||
keyWord: keyWord ? keyWord : keyWordsSearch.value ? keyWordsSearch.value : '',
|
||
ageMin: '',
|
||
ageMax: '',
|
||
companyId: '',
|
||
dayLeasePriceMin: '',
|
||
dayLeasePriceMax: '',
|
||
typeId: '',
|
||
level: '',
|
||
maStatus: 2,
|
||
dayLeasePriceOrderBy:
|
||
optionActive.value == 1 ? screenOptionList[optionActive.value].sort : '',
|
||
updateTimeOrderBy: optionActive.value == 2 ? screenOptionList[optionActive.value].sort : '',
|
||
}
|
||
|
||
screenChooseList.forEach((e: any, index: number) => {
|
||
e.list.forEach((j: any) => {
|
||
if (index === 0 && j.isChecked && j.value.length > 0) {
|
||
searchParams.ageMin = j.value[0]
|
||
searchParams.ageMax = j.value[1]
|
||
}
|
||
if (index === 1 && j.isChecked) {
|
||
searchParams.typeId = j.value
|
||
searchParams.level = j.level
|
||
}
|
||
if (index === 2 && j.isChecked && currentIndex !== null && j.value != '') {
|
||
searchParams.typeId = j.value
|
||
searchParams.level = j.level
|
||
}
|
||
if (index === 3 && j.isChecked && j.value.length > 0) {
|
||
searchParams.dayLeasePriceMin = j.value[0]
|
||
searchParams.dayLeasePriceMax = j.value[1]
|
||
}
|
||
if (index === 4 && j.isChecked) {
|
||
searchParams.companyId = j.value
|
||
}
|
||
})
|
||
})
|
||
|
||
if (params) {
|
||
searchParams.level = params.level ? params.level : ''
|
||
searchParams.typeId = params.typeId ? params.typeId : ''
|
||
searchParams.companyId = params.companyId ? params.companyId : ''
|
||
searchParams.keyWord = params.keyWord ? params.keyWord : ''
|
||
}
|
||
|
||
Object.assign(searchParams, pageData)
|
||
const { data: res } = await getZoneListApi(searchParams)
|
||
|
||
const searchParams_2 = JSON.parse(JSON.stringify(searchParams))
|
||
searchParams_2.companyId = ''
|
||
const result: any = await getCompanyCountApi(searchParams_2)
|
||
screenChooseList[4].list.forEach((e: any, index: any) => {
|
||
if (index != 0) {
|
||
e.name = e.companyName + `(${0})`
|
||
}
|
||
})
|
||
for (let key in result.data) {
|
||
screenChooseList[4].list.forEach((e: any, index: any) => {
|
||
if (e.companyId == key) {
|
||
e.name = ''
|
||
e.name = e.companyName + `(${result.data[key]})`
|
||
}
|
||
})
|
||
}
|
||
equipList.value = res.rows
|
||
total.value = res.total
|
||
}
|
||
|
||
// 清除筛选条件
|
||
const onClearTags = () => {
|
||
screenChooseList.forEach((e: any, i: any) => {
|
||
e.list.forEach((j: any, index: number) => {
|
||
j.isChecked = false
|
||
if (i != 5) {
|
||
if (index === 0) {
|
||
j.isChecked = true
|
||
}
|
||
}
|
||
if (j.isAdd) {
|
||
startPrice.value = 0
|
||
endPrice.value = 0
|
||
screenChooseList[2].list = screenChooseList[2].list.filter(
|
||
(e: any) => e.isAdd != true,
|
||
)
|
||
}
|
||
})
|
||
})
|
||
getDeviceListData()
|
||
}
|
||
|
||
//删除条件
|
||
const handleClose = (tag: any) => {
|
||
console.log(tag, '***')
|
||
tag.isChecked = false
|
||
if (tag.index != 5) {
|
||
screenChooseList[tag.index].list[0].isChecked = true
|
||
}
|
||
|
||
if (tag.isAdd) {
|
||
startPrice.value = 0
|
||
endPrice.value = 0
|
||
}
|
||
screenChooseList[tag.index].list = screenChooseList[tag.index].list.filter(
|
||
(e: any) => e.isAdd != true,
|
||
)
|
||
getDeviceListData()
|
||
}
|
||
|
||
// 排序操作
|
||
const changeOption = (val: any) => {
|
||
if (val.sort && optionActive.value == val.id) {
|
||
val.sort = val.sort == 'ASC' ? 'DESC' : 'ASC'
|
||
}
|
||
|
||
console.log(screenOptionList, 'screenOptionList')
|
||
optionActive.value = val.id
|
||
getDeviceListData()
|
||
}
|
||
|
||
//选中后添加到 大类中的select字段
|
||
const selectScreen = async (type: any, item: any, index: number) => {
|
||
screenChooseList[index].list.forEach((e: any) => {
|
||
e.isChecked = false
|
||
})
|
||
|
||
if (index == 1) {
|
||
screenChooseList[2].list = screenChooseList[2].list.slice(0, 1)
|
||
|
||
const params = {
|
||
typeId: '',
|
||
level: '',
|
||
}
|
||
if (item.value) {
|
||
params.typeId = item.typeId
|
||
params.level = item.level
|
||
} else {
|
||
params.typeId = route.query.typeId
|
||
params.level = route.query.level
|
||
}
|
||
const res = await getTypeListApi(params)
|
||
|
||
const typeList_2 = res.data
|
||
.filter((e: any) => e.level == route.query.level * 1 + 1)
|
||
.map((j: any) => {
|
||
return { ...j, name: j.typeName, value: j.typeId, isChecked: false, index: 1 }
|
||
})
|
||
screenChooseList[2].list.push(...typeList_2)
|
||
}
|
||
|
||
if (index == 2) {
|
||
currentIndex = route.query.level * 1 + 1
|
||
}
|
||
item.isChecked = !item.isChecked
|
||
getDeviceListData()
|
||
}
|
||
|
||
//分页page变化
|
||
const onCurrentChange = (val: number) => {
|
||
pageData.pageNum = val
|
||
getDeviceListData()
|
||
}
|
||
const keyWordsSearch = ref('')
|
||
onMounted(() => {
|
||
$bus.on('search', (val: any) => {
|
||
keyWordsSearch.value = val
|
||
getDeviceListData(null, val)
|
||
})
|
||
let routeParams: any = null
|
||
if (route.query.level && route.query.typeId) {
|
||
routeParams = {
|
||
level: route.query.level,
|
||
typeId: route.query.typeId,
|
||
}
|
||
|
||
Promise.all([getCompanyAddressListData(), lowerClassData()]).then(() => {
|
||
if (route.query.level == 1) {
|
||
screenChooseList[1].list.forEach((e: any, index: number) => {
|
||
if (index == 0) {
|
||
e.isChecked = false
|
||
}
|
||
if (route.query.typeId == e.typeId) {
|
||
e.isChecked = true
|
||
}
|
||
})
|
||
}
|
||
|
||
if (route.query.level == 2 || route.query.level == 3) {
|
||
screenChooseList[1].list.forEach((e: any, index: number) => {
|
||
if (index == 0) {
|
||
e.isChecked = false
|
||
}
|
||
if (route.query.typeId == e.typeId) {
|
||
e.isChecked = true
|
||
}
|
||
})
|
||
}
|
||
|
||
if (route.query.companyId) {
|
||
routeParams = {
|
||
companyId: route.query.companyId,
|
||
}
|
||
screenChooseList[4].list[0].isChecked = false
|
||
screenChooseList[4].list.forEach((e: any) => {
|
||
if (route.query.companyId == e.companyId) {
|
||
e.isChecked = true
|
||
}
|
||
})
|
||
}
|
||
getDeviceListData(routeParams, null)
|
||
})
|
||
}
|
||
|
||
if (route.query.keyWord) {
|
||
routeParams = {
|
||
keyWord: route.query.keyWord,
|
||
}
|
||
}
|
||
|
||
if (!route.query.level && !route.query.typeId) {
|
||
Promise.all([getCompanyAddressListData(), getTypeListData()]).then(() => {
|
||
if (route.query.level == 1) {
|
||
screenChooseList[1].list.forEach((e: any) => {
|
||
if (route.query.typeId == e.typeId) {
|
||
e.isChecked = true
|
||
}
|
||
})
|
||
}
|
||
|
||
if (route.query.level == 2 || route.query.level == 3) {
|
||
{
|
||
const item = {
|
||
isChecked: true,
|
||
name: route.query.name,
|
||
value: route.query.typeId,
|
||
index: 5,
|
||
}
|
||
screenChooseList[5].list = []
|
||
screenChooseList[5].list.push(item)
|
||
}
|
||
}
|
||
if (route.query.companyId) {
|
||
routeParams = {
|
||
companyId: route.query.companyId,
|
||
}
|
||
screenChooseList[4].list[0].isChecked = false
|
||
screenChooseList[4].list.forEach((e: any) => {
|
||
if (route.query.companyId == e.companyId) {
|
||
e.isChecked = true
|
||
}
|
||
})
|
||
}
|
||
getDeviceListData(routeParams, null)
|
||
})
|
||
}
|
||
})
|
||
|
||
onUnmounted(() => {
|
||
$bus.off('search')
|
||
})
|
||
|
||
// 点击跳转装备详情
|
||
const onHandleDetails = (id: number | string) => {
|
||
router.push({
|
||
name: 'equipDetail',
|
||
query: {
|
||
id,
|
||
},
|
||
})
|
||
}
|
||
</script>
|
||
<style lang="scss" scoped>
|
||
.equipList {
|
||
.showScreen {
|
||
margin: 15px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
border-bottom: 1px solid #ccc;
|
||
// height: 30px;
|
||
|
||
.title {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #949494;
|
||
}
|
||
}
|
||
|
||
.screen {
|
||
margin-bottom: 20px;
|
||
padding-bottom: 20px;
|
||
border-bottom: 1px solid #ccc;
|
||
.choose {
|
||
margin-top: 10px;
|
||
|
||
.line {
|
||
padding: 14px 0;
|
||
display: flex;
|
||
align-items: center;
|
||
// border-bottom: 1px solid #dddddd;
|
||
|
||
.label {
|
||
// width: 100px;
|
||
box-sizing: border-box;
|
||
|
||
// padding: 0 15px;
|
||
// background: #f3f3f3;
|
||
}
|
||
|
||
.select {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-wrap: wrap;
|
||
box-sizing: border-box;
|
||
padding: 0 15px;
|
||
|
||
.item {
|
||
padding: 2px 16px;
|
||
margin-right: 15px;
|
||
cursor: pointer;
|
||
color: #939393;
|
||
// font-size: 15px;
|
||
font-size: 17px;
|
||
line-height: 25px;
|
||
height: 25px;
|
||
|
||
&:hover {
|
||
color: #3cb4a6;
|
||
}
|
||
}
|
||
|
||
.active {
|
||
background-color: #3cb4a6;
|
||
color: #fff !important;
|
||
border-radius: 25px;
|
||
}
|
||
}
|
||
|
||
.tags {
|
||
display: flex;
|
||
align-items: center;
|
||
color: #138472;
|
||
.item {
|
||
margin-left: 10px;
|
||
}
|
||
|
||
.clear-btn {
|
||
cursor: pointer;
|
||
}
|
||
|
||
.el-tag {
|
||
background-color: #fff;
|
||
border: 1px solid #138472;
|
||
color: #138472;
|
||
}
|
||
:deep .el-tag .el-tag__close {
|
||
color: #138472;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.active {
|
||
color: #138472 !important;
|
||
font-weight: bold !important;
|
||
}
|
||
|
||
.btns {
|
||
display: flex;
|
||
align-items: center;
|
||
// margin-top: 20px;
|
||
|
||
.item {
|
||
background: #f7f9fa;
|
||
border-radius: 12px;
|
||
padding: 10px 20px;
|
||
|
||
// font-size: 17px;
|
||
font-weight: 500;
|
||
color: #9d9d9d;
|
||
margin-right: 10px;
|
||
cursor: pointer;
|
||
user-select: none;
|
||
|
||
.icon {
|
||
font-size: 15px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
.showList {
|
||
display: flex;
|
||
align-items: center;
|
||
flex-wrap: wrap;
|
||
|
||
.card {
|
||
width: calc((100% - 45px) / 4);
|
||
margin-right: 15px;
|
||
cursor: pointer;
|
||
&:nth-child(4n) {
|
||
margin-right: 0;
|
||
}
|
||
|
||
margin-bottom: 15px !important;
|
||
}
|
||
}
|
||
|
||
.pagination {
|
||
margin-top: 20px;
|
||
display: flex;
|
||
justify-content: flex-end;
|
||
}
|
||
}
|
||
|
||
:deep.el-pagination.is-background .el-pager li.is-active {
|
||
background-color: #3cb4a6;
|
||
}
|
||
|
||
.class-container {
|
||
margin-top: 20px;
|
||
// font-size: 14px;
|
||
color: #ccc;
|
||
|
||
a {
|
||
margin-right: 6px;
|
||
}
|
||
}
|
||
</style>
|