williamet/jiace-web
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

首页跟多和公共详情页面改造

Browse Source
This commit is contained in:
熊丽君
2021-08-12 16:21:59 +08:00
parent a7f7dcde08
commit 812db4de27
4 changed files with 411 additions and 86 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/views/home/home.vue
View File

@ -17,9 +17,17 @@
<img src="@/assets/image/icon4.png" alt="" />
<img src="@/assets/image/icon5.png" alt="" />
</div>
<router-link
target="_blank"
:to="{
path: '/portrait',
query: { key: 'policyRead', val: '归口' }
}"
>
<div class="title_top_r pointer">
更多<i class="el-icon-arrow-right"></i>
</div>
</router-link>
</div>
<span>{{ date }}</span>
</div>
@ -101,9 +109,17 @@
<div>
<img src="@/assets/image/icon6.png" alt="" />
</div>
<router-link
target="_blank"
:to="{
path: '/portrait',
query: { key: 'information', val: '' }
}"
>
<div class="title_top_r pointer">
更多<i class="el-icon-arrow-right"></i>
</div>
</router-link>
</div>
<div class="tab_list">
<div class="banner_r_list" v-for="item in list3" :key="item.id">

10
src/views/home/notice.vue
View File

@ -158,11 +158,17 @@
</div>
<div class="more">
<!-- query: { key: 'policy', id: item.id } -->
<router-link target="_blank" :to="{ path: '/portrait' }">
<router-link
target="_blank"
:to="{
path: '/portrait',
query: { key: 'policy', val: '企业画像' }
}"
>
<el-button
type="primary"
size="mini"
v-show="portraitData.length >= 4"
v-show="portraitData.length <= 4"
>
查看更多
</el-button>

93
src/views/portrait.vue
View File

@ -1,15 +1,28 @@
<template>
<div class="portrait_page content">
<div class="header">
<span class="span">企业画像：</span>
<el-tabs v-model="queryParams.labelId" @tab-click="handleClick">
<el-tab-pane
:label="item.name"
:name="item.id"
<div class="header" v-if="type == 'policy'">
<span class="span">{{ val }}：</span>
<el-radio
v-model="queryParams.labelId"
v-for="item in portraitList"
:key="item.id"
></el-tab-pane>
</el-tabs>
:label="item.id"
border
@change="handleClick"
>{{ item.name }}</el-radio
>
</div>
<div class="header" v-else-if="type == 'policyRead'">
<span class="span">{{ val }}：</span>
<el-radio
v-model="queryParams.attributeId"
v-for="item in attributeOptions"
:key="item.value"
:label="item.value"
border
@change="handleClick"
>{{ item.label }}</el-radio
>
</div>
<div class="screen_l_b" v-for="item in portraitData" :key="item.id">
<div class="title text_hidden_one pointer">
@ -17,16 +30,19 @@
target="_blank"
:to="{
path: '/result',
query: { key: 'policy', id: item.id }
query: { key: type, id: item.id }
}"
>
{{ item.title }}
</router-link>
</div>
<div class="info">
<div class="info" v-if="type != 'information'">
<span>来源：{{ item.source }}</span>
<span>发布：{{ item.listDate }}</span>
</div>
<div class="info" style="justify-content: flex-end;" v-else>
<span>发布：{{ item.createTime }}</span>
</div>
</div>
<!-- 分页 -->
<pagination
@ -43,17 +59,37 @@
import { getPolicyMatch } from '@/api/home/notice';
import { mapGetters } from 'vuex';
import { userInfo, getLabelSetting } from '@/api/home/info';
import { getPolicyRead, getInformation } from '@/api/home/home';
export default {
data() {
return {
activeName: '',
type: '',
val: '',
queryParams: {
pageNum: 1,
pageSize: 10,
labelId: ''
pageSize: 10
},
total: 0,
portraitList: [], // 企业画像
// 归口选项
attributeOptions: [
{
value: 'KJJ',
label: '科技'
},
{
value: 'JXJ',
label: '经信'
},
{
value: 'FGW',
label: '发改'
},
{
value: 'OTHER',
label: '其他'
}
],
portraitData: [], // 企业画像绑定的政策列表
portraitTotal: 0
};
@ -64,10 +100,22 @@ export default {
methods: {
// 获取企业画像数据列表
getPortraitList() {
if (this.type == 'policy') {
getPolicyMatch(this.queryParams).then(({ data }) => {
this.portraitData = data.list;
this.total = data.total;
});
} else if (this.type == 'policyRead') {
getPolicyRead(this.queryParams).then(({ data }) => {
this.portraitData = data.list;
this.total = data.total;
});
} else if (this.type == 'information') {
getInformation(this.queryParams).then(({ data }) => {
this.portraitData = data.list;
this.total = data.total;
});
}
},
handleClick() {
this.getPortraitList();
@ -75,10 +123,16 @@ export default {
},
created() {
if (this.token) {
console.log();
const { key, val } = this.$route.query;
this.type = key;
this.val = val;
if (key == 'policy') {
userInfo().then(({ data }) => {
if (data.companyId) {
getLabelSetting({ companyId: data.companyId }).then(({ data }) => {
if (data.length) {
console.log(data);
this.portraitList = data.map(item =>
item.labelList
? item.labelList.filter(v => v.isHas)[0]
@ -92,8 +146,16 @@ export default {
});
}
});
} else if (key == 'policyRead') {
this.queryParams.attributeId = this.attributeOptions[0].value;
this.getPortraitList();
} else if (key == 'information') {
this.getPortraitList();
} else {
this.msgSuccess('请先登录');
this.msgError('非法进入');
}
} else {
this.msgError('请先登录');
}
}
};
@ -114,6 +176,9 @@ export default {
height: 0;
}
}
/deep/.el-radio__input {
display: none;
}
}
.screen_l_b {
height: 110px;

242
src/views/result.vue
View File

@ -1,6 +1,30 @@
<template>
<!-- 预览弹出层 -->
<div class="result_page content">
<div class="result_page">
<el-backtop target=".result_page" :visibility-height="500"></el-backtop>
<div class="my_header">
<div class="title content p0-100">
<el-row :gutter="20">
<el-col :span="8"><span>嘉策科技创新服务平台</span></el-col>
<el-col :span="8"
><el-input
v-model.trim="input"
placeholder="请输入搜索关键字"
prefix-icon="el-icon-search"
@keyup.enter.native="toSearch"
></el-input
></el-col>
<el-col :span="8" style="text-align:right">
<span
>服务热线：<span style="color:#ffa32c">400-0507-580</span></span
>
</el-col>
</el-row>
</div>
</div>
<div class="my_main content p0-100" style="display:flex">
<div class="l" style="width:75%;background-color: #fff;padding: 30px;">
<h2>{{ formData.title }}</h2>
<div class="info" v-if="type != 'information'">
<span v-if="type != 'companyNeed' && type != 'scienceResult'"
@ -44,6 +68,98 @@
<div v-html="formData.text" />
</div>
</div>
<div
class="r"
style="width:24%;margin-left:1%;background-color: #fff;padding: 20px 10px;"
>
<!-- 公告模块 -->
<div class="notice">
<div class="title">
<div>通知公告</div>
<router-link target="_blank" :to="{ path: '/notice' }">
<div class="pointer" style="color:#999">
更多<i class="el-icon-arrow-right"></i>
</div>
</router-link>
</div>
<div class="list">
<ul>
<li
class="text_hidden_one pointer"
v-for="item in noticeList"
:key="item.id"
>
<router-link
target="_blank"
:to="{
path: '/result',
query: { key: 'policy', id: item.id }
}"
>
<span>•</span>{{ item.title }}
</router-link>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="my_footer">
<div style="height: 4px;background: #FFA32C;"></div>
<div class="footer_one content">
<p>
<span>
<i><img src="@/assets/image/icon1.png" alt=""/></i>
总浏览量：1020</span
>
<span>
<i><img src="@/assets/image/icon1.png" alt=""/></i>
今日浏览：1020</span
>
</p>
<div class="footer_two">
<div class="footer_left">
<div class="footer_left_one">
<span class="footer_left_l">版权声明</span>
<span class="footer_left_r">
<i><img src="@/assets/image/icon3.png" alt=""/></i>
客服热线：(周一至周五8:30-18:00)
</span>
</div>
<div class="footer_left_two">
<span class="footer_left_l">用户协议</span>
</div>
<div class="footer_left_three">
<span class="footer_left_l">意见反馈</span>
<span class="footer_left_r">
<i><img src="@/assets/image/icon2.png" alt=""/></i>
公司地址：安徽省合肥市蜀山区黄山市601号412-414
</span>
</div>
</div>
<div class="footer_right">
<div class="item">
<img src="@/assets/image/scanloginqrcode.jpg" alt="" />
<div>嘉策公众号</div>
</div>
<div class="item">
<img src="@/assets/image/scanloginqrcode.jpg" alt="" />
<div>QQ群</div>
</div>
</div>
</div>
<div class="footer_three">
<div>
<span>商务合作</span>
<span>政策服务</span>
<span>在线解答</span>
</div>
<p>版权服务：合肥嘉策信息技术服务有限公司 皖ICP备45619723号</p>
</div>
</div>
</div>
</div>
</template>
<script>
@ -55,6 +171,7 @@ import {
getInfo2,
getInfo3
} from '@/api/search';
import { getPolicyList } from '@/api/home/notice';
import { mapGetters } from 'vuex';
import { add, cancel } from '@/api/search';
import Editor from '@/components/Editor';
@ -64,8 +181,10 @@ export default {
},
data() {
return {
input: '',
type: '',
formData: {}
formData: {},
noticeList: []
};
},
watch: {
@ -82,6 +201,14 @@ export default {
...mapGetters(['token'])
},
methods: {
toSearch() {
if (!this.input.length) return this.msgError('请输入搜索关键字');
let routerJump = this.$router.resolve({
path: '/search',
query: { val: this.input }
});
window.open(routerJump.href, '_blank');
},
addItem() {
add({ policyId: this.formData.id }).then(res => {
this.formData.collected = 1;
@ -124,6 +251,9 @@ export default {
this.formData = data;
});
}
getPolicyList({ pageNum: 1, pageSize: 5 }).then(({ data }) => {
this.noticeList = data.list;
});
}
};
</script>
@ -133,6 +263,9 @@ export default {
padding-top: 0;
}
.result_page {
height: 100vh;
overflow: auto;
background-color: #f1f1f1;
.info {
display: flex;
justify-content: space-between;
@ -146,5 +279,110 @@ export default {
border: 0;
}
}
.my_header {
position: fixed;
z-index: 1;
width: 100%;
height: 46px;
line-height: 46px;
background: #3d3e3e;
.title {
color: #fff;
}
}
.my_main {
padding-top: 70px;
.r {
.title {
display: flex;
justify-content: space-between;
}
.list {
ul {
padding-left: 0;
line-height: 35px;
li {
color: #999;
span {
margin-right: 5px;
}
&:hover {
color: #ffa32c;
}
}
}
}
}
}
.my_footer {
margin-top: 30px;
background-color: #fff;
.footer_one {
p {
text-align: center;
font-size: 14px;
color: #666;
span {
i {
margin-right: 3px;
img {
vertical-align: middle;
}
}
}
span:nth-child(2) {
margin-left: 40px;
}
}
}
.footer_two {
border-bottom: 1px solid #dcdcdc;
display: flex;
justify-content: space-between;
align-items: center;
.footer_left {
padding: 50px 0;
.footer_left_two {
margin: 20px 0;
}
.footer_left_l {
font-size: 18px;
color: #333;
margin-right: 30px;
}
.footer_left_r {
i {
img {
vertical-align: middle;
}
}
}
}
.footer_right {
display: flex;
.item {
font-size: 18px;
color: #333;
margin-right: 50px;
text-align: center;
}
}
}
.footer_three {
text-align: center;
padding: 36px 0;
div {
font-size: 16px;
color: #3394ff;
span:nth-child(2) {
margin: 0 39px;
}
}
p {
font-size: 14px;
color: #333;
}
}
}
}
</style>