|
@@ -4,18 +4,44 @@
|
|
|
<el-image class="image" :src="lists" fit="fill" />
|
|
|
</el-col>
|
|
|
<div class="w_1300">
|
|
|
+ <div class="active">
|
|
|
+ <div class="active_1" v-show="industry && industry.length > 0">
|
|
|
+ <div class="active_left">行业:</div>
|
|
|
+ <div class="active_right">
|
|
|
+ <div class="active_label" v-for="(item, index) in industry" :key="index">
|
|
|
+ {{ item.title }}<el-icon @click="toDel(item, '1')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="active_1" v-show="pattern && pattern.length > 0">
|
|
|
+ <div class="active_left">企业类型:</div>
|
|
|
+ <div class="active_right">
|
|
|
+ <div class="active_label" v-for="(item, index) in pattern" :key="index">
|
|
|
+ {{ item.label }}<el-icon @click="toDel(item, '2')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ <div class="active_1" v-show="city && city.length > 0">
|
|
|
+ <div class="active_left">所在地:</div>
|
|
|
+ <div class="active_right">
|
|
|
+ <div class="active_label" v-for="(item, index) in city" :key="index">
|
|
|
+ {{ item.name }}<el-icon @click="toDel(item, '3')"><Close /></el-icon>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
<el-col :span="24" class="two">
|
|
|
<div class="Seacher">
|
|
|
<div class="Left">
|
|
|
<span>行业</span>
|
|
|
</div>
|
|
|
<div v-if="!oneShow" class="Right">
|
|
|
- <div class="label" v-for="(item, index) in plateList.slice(0, 6)" :key="index">
|
|
|
+ <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList.slice(0, 6)" :key="index" @click="toSelect(item, '1')">
|
|
|
{{ item.title }}
|
|
|
</div>
|
|
|
</div>
|
|
|
<div v-else class="Right">
|
|
|
- <div class="label" v-for="(item, index) in plateList" :key="index">
|
|
|
+ <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList" :key="index" @click="toSelect(item, '1')">
|
|
|
{{ item.title }}
|
|
|
</div>
|
|
|
</div>
|
|
@@ -33,7 +59,7 @@
|
|
|
<span>企业类型</span>
|
|
|
</div>
|
|
|
<div class="Right">
|
|
|
- <div class="label" v-for="(item, index) in patternList" :key="index">
|
|
|
+ <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in patternList" :key="index" @click="toSelect(item, '2')">
|
|
|
{{ item.label }}
|
|
|
</div>
|
|
|
</div>
|
|
@@ -43,7 +69,7 @@
|
|
|
<span>所在地</span>
|
|
|
</div>
|
|
|
<div class="Right">
|
|
|
- <div class="label" v-for="(item, index) in cityList" :key="index">
|
|
|
+ <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in cityList" :key="index" @click="toSelect(item, '3')">
|
|
|
{{ item.name }}
|
|
|
</div>
|
|
|
</div>
|
|
@@ -119,6 +145,10 @@ const cityList = ref([])
|
|
|
const plateList = ref([])
|
|
|
// 搜索
|
|
|
const searchForm = ref({})
|
|
|
+// 查询
|
|
|
+const industry = ref([])
|
|
|
+const pattern = ref([])
|
|
|
+const city = ref([])
|
|
|
// 请求
|
|
|
onMounted(async () => {
|
|
|
loading.value = true
|
|
@@ -137,7 +167,7 @@ const searchOther = async () => {
|
|
|
// 企业类型
|
|
|
result = await dictDataStore.query({ code: 'companyType', is_use: '0' })
|
|
|
if ($checkRes(result)) patternList.value = result.data
|
|
|
- patternList.value.unshift({ value: '-1', label: '不限' })
|
|
|
+ patternList.value.unshift({ id: '-1', value: '-1', label: '不限', is_active: true })
|
|
|
// // 企业规模
|
|
|
// result = await dictDataStore.query({ code: 'companyScale', is_use: '0' })
|
|
|
// if ($checkRes(result)) scaleList.value = result.data
|
|
@@ -146,10 +176,10 @@ const searchOther = async () => {
|
|
|
// if ($checkRes(result)) IndustryList.value = result.data
|
|
|
result = await regionStore.list({ level: 'city', parent_code: 22 })
|
|
|
if ($checkRes(result)) cityList.value = result.data
|
|
|
- cityList.value.unshift({ code: '-1', name: '不限' })
|
|
|
+ cityList.value.unshift({ id: '-1', code: '-1', name: '不限', is_active: true })
|
|
|
result = await sectorStore.query({ is_use: '0' })
|
|
|
if ($checkRes(result)) plateList.value = result.data
|
|
|
- plateList.value.unshift({ id: '-1', title: '不限' })
|
|
|
+ plateList.value.unshift({ id: '-1', title: '不限', is_active: true })
|
|
|
}
|
|
|
const search = async (query = { skip, limit }) => {
|
|
|
skip = query.skip
|
|
@@ -200,6 +230,85 @@ const sizeChange = (limits) => {
|
|
|
currentPage.value = 1
|
|
|
search({ skip: 0, limit: limit })
|
|
|
}
|
|
|
+const toSelect = (data, type) => {
|
|
|
+ if (data.id != '-1') {
|
|
|
+ if (type == '1') {
|
|
|
+ for (const val of plateList.value) {
|
|
|
+ if (data.id == val.id) val.is_active = true
|
|
|
+ if (val.id == '-1') val.is_active = false
|
|
|
+ }
|
|
|
+ const res = industry.value.find((i) => i.id == data.id)
|
|
|
+ if (!res) industry.value.push(data)
|
|
|
+ } else if (type == '2') {
|
|
|
+ for (const val of patternList.value) {
|
|
|
+ if (data.id == val.id) val.is_active = true
|
|
|
+ if (val.id == '-1') val.is_active = false
|
|
|
+ }
|
|
|
+ const res = pattern.value.find((i) => i.id == data.id)
|
|
|
+ if (!res) pattern.value.push(data)
|
|
|
+ } else {
|
|
|
+ for (const val of cityList.value) {
|
|
|
+ if (data.id == val.id) val.is_active = true
|
|
|
+ if (val.id == '-1') val.is_active = false
|
|
|
+ }
|
|
|
+ const res = city.value.find((i) => i.id == data.id)
|
|
|
+ if (!res) city.value.push(data)
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ if (type == '1') {
|
|
|
+ for (const val of plateList.value) {
|
|
|
+ if (val.id == '-1') val.is_active = true
|
|
|
+ else val.is_active = false
|
|
|
+ }
|
|
|
+ industry.value = []
|
|
|
+ } else if (type == '2') {
|
|
|
+ for (const val of patternList.value) {
|
|
|
+ if (val.id == '-1') val.is_active = true
|
|
|
+ else val.is_active = false
|
|
|
+ }
|
|
|
+ pattern.value = []
|
|
|
+ } else {
|
|
|
+ for (const val of cityList.value) {
|
|
|
+ if (val.id == '-1') val.is_active = true
|
|
|
+ else val.is_active = false
|
|
|
+ }
|
|
|
+ city.value = []
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+const toDel = (data, type) => {
|
|
|
+ if (type == '1') {
|
|
|
+ for (const val of plateList.value) {
|
|
|
+ if (data.id == val.id) val.is_active = false
|
|
|
+ }
|
|
|
+ industry.value = industry.value.filter((f) => f.id != data.id)
|
|
|
+ if (industry.value.length == 0) {
|
|
|
+ for (const val of plateList.value) {
|
|
|
+ if (val.id == '-1') val.is_active = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else if (type == '2') {
|
|
|
+ for (const val of patternList.value) {
|
|
|
+ if (data.id == val.id) val.is_active = false
|
|
|
+ }
|
|
|
+ pattern.value = pattern.value.filter((f) => f.id != data.id)
|
|
|
+ if (pattern.value.length == 0) {
|
|
|
+ for (const val of patternList.value) {
|
|
|
+ if (val.id == '-1') val.is_active = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ for (const val of cityList.value) {
|
|
|
+ if (data.id == val.id) val.is_active = false
|
|
|
+ }
|
|
|
+ city.value = city.value.filter((f) => f.id != data.id)
|
|
|
+ if (city.value.length == 0) {
|
|
|
+ for (const val of cityList.value) {
|
|
|
+ if (val.id == '-1') val.is_active = true
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.main {
|
|
@@ -209,8 +318,53 @@ const sizeChange = (limits) => {
|
|
|
height: 350px;
|
|
|
}
|
|
|
}
|
|
|
+ .active {
|
|
|
+ .active_1 {
|
|
|
+ display: inline-flex;
|
|
|
+ background: #f5f7f9;
|
|
|
+ border-radius: 2px;
|
|
|
+ min-height: 28px;
|
|
|
+ line-height: 28px;
|
|
|
+ margin: 0 10px 0 0;
|
|
|
+ position: relative;
|
|
|
+ background-color: #fff;
|
|
|
+ padding: 10px;
|
|
|
+ .active_left {
|
|
|
+ flex: 0 0 auto;
|
|
|
+ font-family: PingFangSC-Regular;
|
|
|
+ color: #525a68;
|
|
|
+ line-height: 36px;
|
|
|
+ }
|
|
|
+ .active_right {
|
|
|
+ font-family: PingFangSC-Regular;
|
|
|
+ color: rgba(0, 0, 0, 0.85);
|
|
|
+ line-height: 28px;
|
|
|
+ padding-right: 4px;
|
|
|
+ display: flex;
|
|
|
+ flex-wrap: wrap;
|
|
|
+ overflow: hidden;
|
|
|
+ .active_label {
|
|
|
+ overflow: hidden;
|
|
|
+ display: inline-block;
|
|
|
+ margin-right: 10px;
|
|
|
+ margin-top: 3px;
|
|
|
+ margin-bottom: 3px;
|
|
|
+ padding: 10px;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ flex: none;
|
|
|
+ box-sizing: border-box;
|
|
|
+ max-width: 100%;
|
|
|
+ height: 30px;
|
|
|
+ background: #f5f5f5;
|
|
|
+ border: 1px solid #f0f0f0;
|
|
|
+ border-radius: 2px;
|
|
|
+ cursor: default;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
+ }
|
|
|
.two {
|
|
|
- margin: 25px 0;
|
|
|
.Seacher {
|
|
|
display: flex;
|
|
|
justify-content: center;
|
|
@@ -242,6 +396,7 @@ const sizeChange = (limits) => {
|
|
|
border-left: solid 1px #e5e5e5;
|
|
|
background-color: #fff;
|
|
|
.label {
|
|
|
+ margin-right: 3px;
|
|
|
color: #313131;
|
|
|
margin-bottom: 10px;
|
|
|
padding: 8px 10px;
|
|
@@ -250,7 +405,7 @@ const sizeChange = (limits) => {
|
|
|
border: solid 1px transparent;
|
|
|
cursor: pointer;
|
|
|
}
|
|
|
- .label:first-child {
|
|
|
+ .show {
|
|
|
color: #0a58c2;
|
|
|
border: solid 1px #006dd2;
|
|
|
}
|
|
@@ -283,12 +438,14 @@ const sizeChange = (limits) => {
|
|
|
}
|
|
|
.thr {
|
|
|
display: flex;
|
|
|
+ align-items: center;
|
|
|
+ justify-content: center;
|
|
|
flex-wrap: wrap;
|
|
|
.list {
|
|
|
float: left;
|
|
|
- width: 390px;
|
|
|
+ width: 405px;
|
|
|
padding: 15px;
|
|
|
- margin: 0 0 25px 41px;
|
|
|
+ margin: 0 10px 25px 10px;
|
|
|
background: #f0f8ff;
|
|
|
color: #000;
|
|
|
.name {
|