Files
jiace-web/src/views/home/demand.vue
熊丽君 bcab94bd2e 修改前
2021-10-21 11:29:02 +08:00

359 lines
9.2 KiB
Vue
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<div class="notice_page p0-100">
<!-- 搜索部分 -->
<div class="search">
<div class="search_input" style="display:flex">
<span>企业需求检索</span>
<el-input
v-model="queryParams.title"
placeholder="请输入搜索关键字"
@keyup.enter.native="getList"
clearable
@clear="getList"
></el-input>
<el-button type="warning" @click="getList">搜索</el-button>
</div>
</div>
<!-- 筛选部分 -->
<div class="screen">
<div class="screen_l" v-loading="loading">
<!-- 检索条件 -->
<div class="screen_l_t">
<div class="screen_l_t_item">
<span class="text_col">技术领域</span>
<el-radio-group v-model="queryParams.field" size="medium">
<el-radio-button label="">不限</el-radio-button>
<el-radio-button
:label="item.id"
v-for="item in levelList"
:key="item.id"
>
{{ item.name }}
</el-radio-button>
</el-radio-group>
</div>
<div class="screen_l_t_item">
<span class="text_col">需求类型</span>
<el-radio-group v-model="queryParams.type" size="medium">
<el-radio-button label="">不限</el-radio-button>
<el-radio-button
:label="item.id"
v-for="item in demandList"
:key="item.id"
>
{{ item.name }}
</el-radio-button>
</el-radio-group>
</div>
</div>
<!-- 检索列表 -->
<div class="screen_l_b">
<div class="screen_item" v-for="item in demandData" :key="item.id">
<router-link
target="_blank"
:to="{
path: '/result',
query: { key: 'companyNeed', id: item.id }
}"
>
<div class="title text_hidden_one">
<span class="txt">{{ item.price }}</span>
<span>{{ item.title }}</span>
</div>
<div class="tags">
<el-tag effect="dark">{{ item.fieldName }}</el-tag>
<el-tag effect="dark">{{ item.typeName }}</el-tag>
</div>
<div v-html="item.text" class="text text_hidden_four"></div>
<div class="time">
{{ parseTime(item.createTime, '{y}-{m}-{d}') }}发布
</div>
</router-link>
</div>
</div>
<div style="text-align: center;margin:30px 0" v-show="!total">
<div style="height:210px;display: inline-block;color:#999">
<img
style="width:100%;height:100%;"
src="@/assets/image/empty.png"
alt=""
/>
暂无数据
</div>
</div>
<!-- 分页 -->
<el-pagination
v-show="total > 0"
@size-change="handleSizeChange"
@current-change="handleCurrentChange"
:current-page="queryParams.pageNum"
:page-sizes="[6, 12, 18, 24]"
:page-size="queryParams.pageSize"
layout="total, sizes, prev, pager, next, jumper"
:total="total"
>
</el-pagination>
<!-- <pagination
v-show="10 > 0"
:total="24"
:page.sync="queryParams.pageNum"
:limit.sync="queryParams.pageSize"
@pagination="getList"
/> -->
</div>
</div>
</div>
</template>
<script>
import { mapGetters } from 'vuex';
import { getDictListByStatus } from '@/api/home/info';
import { getEnterpriseNeedList } from '@/api/home/demand';
export default {
data() {
return {
loading: true,
activeName: '1',
queryParams: {
pageNum: 1,
pageSize: 6,
title: '',
field: '', // 技术领域id
type: '' // 需求类型id
},
total: 0,
levelList: [], // 技术领域
demandList: [], // 需求类型
demandData: [] // 数据列表
};
},
computed: {
...mapGetters(['token'])
},
watch: {
'queryParams.field'() {
this.getList();
},
'queryParams.type'() {
this.getList();
}
},
methods: {
getList() {
this.loading = true;
getEnterpriseNeedList(this.queryParams).then(({ data }) => {
this.demandData = data.list;
this.total = data.total;
this.loading = false;
});
},
handleSizeChange(val) {
this.queryParams.pageSize = val;
this.getList();
},
handleCurrentChange(val) {
this.queryParams.pageNum = val;
this.getList();
}
},
created() {
getDictListByStatus({ type: 1 }).then(({ data }) => {
this.levelList = data;
});
getDictListByStatus({ type: 2 }).then(({ data }) => {
this.demandList = data;
});
this.getList();
}
};
</script>
<style lang="scss" scoped>
.notice_page {
.search {
padding-top: 52px;
padding-bottom: 52px;
text-align: center;
.search_input {
display: flex;
justify-content: center;
align-items: center;
/deep/.el-input--medium .el-input__inner {
height: 40px;
line-height: 40px;
border-radius: 6px 0 0 6px;
border: 1px solid #ffa32c;
border-right: 0;
}
span:nth-child(1) {
color: #333;
font-size: 24px;
margin-right: 21px;
}
.el-input {
width: 304px;
}
.el-button {
border-radius: 0 6px 6px 0;
background-color: #ffa32c;
font-size: 18px;
}
}
.tags {
margin-top: 26px;
.txt {
font-size: 18px;
color: #999;
}
.el-tag {
border-radius: 20px;
margin-right: 18px;
}
}
}
.screen {
display: flex;
.screen_l {
flex: 2;
.screen_l_t {
border-radius: 6px;
background-color: #f8f8f8;
.screen_l_t_item {
// height: 50px;
// line-height: 50px;
display: flex;
// align-items: center;
padding: 0 20px;
.text_col {
margin: 15px 0 0;
min-width: 100px;
color: #333;
font-size: 18px;
}
.el-radio-group {
display: flex;
flex-wrap: wrap;
align-items: center;
.el-radio-button {
margin: 10px 0;
}
}
}
}
.screen_l_b {
margin-top: 10px;
padding: 10px 0;
display: flex;
flex-wrap: wrap;
justify-content: flex-start;
.screen_item {
// display: flex;
// flex-direction: column;
// justify-content: space-between;
width: calc((100% - 24px) / 3);
height: 292px;
margin-right: 12px;
box-shadow: 0px 0px 6px 0px rgba(0, 0, 0, 0.08);
border: 1px solid #ffa32c;
margin-bottom: 14px;
cursor: pointer;
border-radius: 6px;
overflow: hidden;
padding: 30px 20px;
.title {
font-size: 18px;
color: #333;
.txt {
color: #ffa32c;
}
}
.tags {
margin-top: 22px;
.el-tag {
margin-right: 10px;
}
}
.text {
min-height: 124px;
max-height: 134px;
font-size: 16px;
color: #666;
line-height: 27px;
}
.time {
margin-top: 20px;
text-align: right;
font-size: 16px;
color: #999;
}
}
.screen_item:nth-of-type(3n + 0) {
margin-right: 0;
}
}
.el-pagination {
text-align: right;
}
}
.screen_r {
flex: 1;
margin-left: 10px;
max-width: 310px;
.title {
color: #ffffff;
height: 60px;
line-height: 60px;
font-size: 20px;
text-align: center;
background: #3394ff;
border-radius: 6px 6px 0px 0px;
}
.tabs {
height: 551px;
background: #f8f8f8;
padding: 0px 14px;
.tabs_row {
display: flex;
align-items: center;
.span {
width: 30%;
min-width: 84px;
}
.el-tabs {
// width: 240px;
width: 70%;
/deep/.el-tabs__nav-wrap::after {
height: 0;
}
/deep/.el-tabs__item.is-active {
font-weight: bold;
color: #1890ff;
}
}
}
.tabs_item {
height: 110px;
display: flex;
flex-direction: column;
justify-content: center;
border-bottom: 1px solid #e3e3e3;
div:nth-child(1) {
font-size: 18px;
color: #333333;
}
div:nth-child(2) {
margin-top: 16px;
font-size: 16px;
color: #999999;
}
}
.more {
text-align: center;
.el-button {
margin-top: 12px;
}
}
}
}
}
}
</style>