|
|
@@ -4,96 +4,7 @@
|
|
|
<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="field && field.length > 0">
|
|
|
- <div class="active_left">技术领域：</div>
|
|
|
- <div class="active_right">
|
|
|
- <div class="active_label" v-for="(item, index) in field" :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> -->
|
|
|
- <div class="two">
|
|
|
- <div class="twoSeacher">
|
|
|
- <div class="twoLeft">
|
|
|
- <span>行业</span>
|
|
|
- </div>
|
|
|
- <div v-if="!oneShow" class="twoRight">
|
|
|
- <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="twoRight">
|
|
|
- <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in plateList" :key="index" @click="toSelect(item, '1')">
|
|
|
- {{ item.title }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="button">
|
|
|
- <span v-if="!oneShow" @click="oneShow = true">
|
|
|
- <el-icon><ArrowDown /></el-icon>
|
|
|
- </span>
|
|
|
- <span v-else @click="oneShow = false">
|
|
|
- <el-icon><ArrowUp /></el-icon>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="twoSeacher">
|
|
|
- <div class="twoLeft">
|
|
|
- <span>技术领域</span>
|
|
|
- </div>
|
|
|
- <div v-if="!twoShow" class="twoRight">
|
|
|
- <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList.slice(0, 10)" :key="index" @click="toSelect(item, '2')">
|
|
|
- {{ item.label }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div v-else class="twoRight">
|
|
|
- <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in typeList" :key="index" @click="toSelect(item, '2')">
|
|
|
- {{ item.label }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="button">
|
|
|
- <span v-if="!twoShow" @click="twoShow = true">
|
|
|
- <el-icon><ArrowDown /></el-icon>
|
|
|
- </span>
|
|
|
- <span v-else @click="twoShow = false">
|
|
|
- <el-icon><ArrowUp /></el-icon>
|
|
|
- </span>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="twoSeacher">
|
|
|
- <div class="twoLeft">
|
|
|
- <span>所在地</span>
|
|
|
- </div>
|
|
|
- <div class="twoRight">
|
|
|
- <div class="label" :class="[item.is_active ? 'show' : '']" v-for="(item, index) in cityList" :key="index" @click="toSelect(item, '3')">
|
|
|
- {{ item.name }}
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="two_ipunt">
|
|
|
- <a-input class="input" size="large" v-model:value="searchForm.name" placeholder="服务名称" />
|
|
|
- <a-input class="input" size="large" v-model:value="searchForm.tags" placeholder="标签名称" />
|
|
|
- <a-input class="input" size="large" v-model:value="searchForm.industry" placeholder="所属产业" />
|
|
|
- <a-button class="button" size="large" type="primary" @click="toSearchInfo">检索</a-button>
|
|
|
- </div>
|
|
|
+ <custom-search :cityList="cityList" :typeList="typeList" :plateList="plateList" :fields="fields" :searchFields="searchFields" @toSearchInfo="toSearchInfo"></custom-search>
|
|
|
<div class="twoTwo">
|
|
|
<div class="twoTable">
|
|
|
<div class="label" v-for="(item, index) in column" :key="index" :style="item.style">
|
|
|
@@ -129,16 +40,10 @@ const store = SupportStore()
|
|
|
const regionStore = RegionStore()
|
|
|
const sectorStore = SectorStore()
|
|
|
const dictDataStore = DictDataStore()
|
|
|
-import { UserStore } from '@/store/user'
|
|
|
-const userStore = UserStore()
|
|
|
-const user = computed(() => userStore.user)
|
|
|
// 加载中
|
|
|
const loading = ref(false)
|
|
|
// 路由
|
|
|
const router = useRouter()
|
|
|
-// 是否展开
|
|
|
-const oneShow = ref(false)
|
|
|
-const twoShow = ref(false)
|
|
|
const cityList = ref([])
|
|
|
const typeList = ref([])
|
|
|
const plateList = ref([])
|
|
|
@@ -154,10 +59,16 @@ const list = ref([])
|
|
|
let skip = 0
|
|
|
let limit = 8
|
|
|
const total = ref(0)
|
|
|
-// 查询
|
|
|
-const industry = ref([])
|
|
|
-const field = ref([])
|
|
|
-const city = ref([])
|
|
|
+const fields = ref([
|
|
|
+ { model: 'name', label: '公司名称' },
|
|
|
+ { model: 'tags', label: '标签名称' },
|
|
|
+ { model: 'time', label: '登记时间' }
|
|
|
+])
|
|
|
+const searchFields = ref([
|
|
|
+ { title: '行业', type: '1', list: plateList },
|
|
|
+ { title: '技术领域', type: '2', list: typeList },
|
|
|
+ { title: '所在地', type: '3', list: cityList }
|
|
|
+])
|
|
|
// 请求
|
|
|
onMounted(async () => {
|
|
|
loading.value = true
|
|
|
@@ -189,7 +100,8 @@ const search = async (query = { skip, limit }) => {
|
|
|
}
|
|
|
}
|
|
|
// 搜索
|
|
|
-const toSearchInfo = async () => {
|
|
|
+const toSearchInfo = async (data) => {
|
|
|
+ searchForm.value = data
|
|
|
await search({ skip, limit })
|
|
|
}
|
|
|
// 查看详情
|
|
|
@@ -206,110 +118,6 @@ const sizeChange = (limits) => {
|
|
|
currentPage.value = 1
|
|
|
search({ skip: 0, limit: limit })
|
|
|
}
|
|
|
-// 筛选条件
|
|
|
-const toSearchFind = async () => {
|
|
|
- if (industry.value && industry.value.length > 0) {
|
|
|
- searchForm.value.industry = industry.value.map((i) => {
|
|
|
- return i.title
|
|
|
- })
|
|
|
- } else delete searchForm.value.industry
|
|
|
- if (field.value && field.value.length > 0) {
|
|
|
- searchForm.value.field = field.value.map((i) => {
|
|
|
- return i.label
|
|
|
- })
|
|
|
- } else delete searchForm.value.field
|
|
|
- if (city.value && city.value.length > 0) {
|
|
|
- searchForm.value.area = city.value.map((i) => {
|
|
|
- return i.name
|
|
|
- })
|
|
|
- } else delete searchForm.value.area
|
|
|
- await search({ skip, limit })
|
|
|
-}
|
|
|
-const toSelect = async (data, type) => {
|
|
|
- if (data.is_active) {
|
|
|
- toDel(data, type)
|
|
|
- } else {
|
|
|
- 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 typeList.value) {
|
|
|
- if (data.id == val.id) val.is_active = true
|
|
|
- if (val.id == '-1') val.is_active = false
|
|
|
- }
|
|
|
- const res = field.value.find((i) => i.id == data.id)
|
|
|
- if (!res) field.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 typeList.value) {
|
|
|
- if (val.id == '-1') val.is_active = true
|
|
|
- else val.is_active = false
|
|
|
- }
|
|
|
- field.value = []
|
|
|
- } else {
|
|
|
- for (const val of cityList.value) {
|
|
|
- if (val.id == '-1') val.is_active = true
|
|
|
- else val.is_active = false
|
|
|
- }
|
|
|
- city.value = []
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- await toSearchFind()
|
|
|
-}
|
|
|
-const toDel = async (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 typeList.value) {
|
|
|
- if (data.id == val.id) val.is_active = false
|
|
|
- }
|
|
|
- field.value = field.value.filter((f) => f.id != data.id)
|
|
|
- if (field.value.length == 0) {
|
|
|
- for (const val of typeList.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
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- await toSearchFind()
|
|
|
-}
|
|
|
</script>
|
|
|
<style scoped lang="scss">
|
|
|
.main {
|
|
|
@@ -321,121 +129,9 @@ const toDel = async (data, type) => {
|
|
|
height: 350px;
|
|
|
}
|
|
|
}
|
|
|
- .active {
|
|
|
- .active_1 {
|
|
|
- display: inline-flex;
|
|
|
- background: #f5f7f9;
|
|
|
- border-radius: 2px;
|
|
|
- min-height: 28px;
|
|
|
- line-height: 28px;
|
|
|
- margin: 10px 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: 10px 0;
|
|
|
background-color: $global-color-fff;
|
|
|
- .twoSeacher {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: stretch;
|
|
|
- position: relative;
|
|
|
- border: solid 1px #e5e5e5;
|
|
|
- border-bottom: 0;
|
|
|
- font-size: $global-font-size-18;
|
|
|
- color: #666;
|
|
|
- min-height: 60px;
|
|
|
- overflow: hidden;
|
|
|
- .twoLeft {
|
|
|
- display: flex;
|
|
|
- justify-content: center;
|
|
|
- align-items: center;
|
|
|
- flex-shrink: 0;
|
|
|
- width: 110px;
|
|
|
- text-align: center;
|
|
|
- color: #000;
|
|
|
- font-weight: bold;
|
|
|
- background-color: #fafafa;
|
|
|
- }
|
|
|
- .twoRight {
|
|
|
- display: flex;
|
|
|
- flex-wrap: wrap;
|
|
|
- align-items: center;
|
|
|
- padding: 12px;
|
|
|
- flex: 1;
|
|
|
- border-left: solid 1px #e5e5e5;
|
|
|
- background-color: #fff;
|
|
|
- .label {
|
|
|
- margin-right: 3px;
|
|
|
- color: #313131;
|
|
|
- margin-bottom: 10px;
|
|
|
- padding: 8px 10px;
|
|
|
- border-radius: 3px;
|
|
|
- background-color: #fff;
|
|
|
- border: solid 1px transparent;
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- .show {
|
|
|
- color: #0a58c2;
|
|
|
- border: solid 1px #006dd2;
|
|
|
- }
|
|
|
- .label:hover {
|
|
|
- color: $global-color-107;
|
|
|
- }
|
|
|
- }
|
|
|
- .button {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- margin: 0 5px 0 0;
|
|
|
- }
|
|
|
- }
|
|
|
- }
|
|
|
- .two_ipunt {
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: space-between;
|
|
|
- margin: 10px 0;
|
|
|
- .input {
|
|
|
- margin: 0 5px 0 0;
|
|
|
- }
|
|
|
- .button {
|
|
|
- margin: 0 0 0 5px;
|
|
|
- }
|
|
|
}
|
|
|
.twoTwo {
|
|
|
margin: 10px 0;
|
