437 lines
11 KiB
Vue
437 lines
11 KiB
Vue
<template>
|
||
<!-- 预览弹出层 -->
|
||
<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> -->
|
||
<img
|
||
src="@/assets/logo/logo2.png"
|
||
alt=""
|
||
style="vertical-align: middle;"
|
||
/>
|
||
</el-col>
|
||
<el-col :span="16">
|
||
<el-row
|
||
style="justify-content: flex-end;height: 100%;align-items: center;padding-right: 30px;"
|
||
>
|
||
<el-col :span="8">
|
||
<div class="search">
|
||
<el-input
|
||
v-model.trim="input"
|
||
placeholder="请输入搜索关键字"
|
||
@keyup.enter.native="toSearch"
|
||
></el-input>
|
||
<el-button type="warning" @click="toSearch">一站搜</el-button>
|
||
</div>
|
||
</el-col>
|
||
</el-row>
|
||
</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'"
|
||
>来源：{{ formData.source }}</span
|
||
>
|
||
<span v-if="type == 'companyNeed'">价格：{{ formData.price }}</span>
|
||
<el-image
|
||
v-if="type == 'scienceResult'"
|
||
style="width: 100px; height: 100px"
|
||
:src="formData.picList ? formData.picList[0] : ''"
|
||
fit="cover"
|
||
:preview-src-list="formData.picList"
|
||
></el-image>
|
||
<span
|
||
>发布：{{
|
||
formData.listDate || parseTime(formData.createTime, '{y}-{m}-{d}')
|
||
}}</span
|
||
>
|
||
<span v-if="token && type == 'policy'">
|
||
<el-button
|
||
type="primary"
|
||
size="mini"
|
||
v-if="formData.collected == 0"
|
||
@click="addItem"
|
||
>
|
||
<i class="el-icon-star-on"></i><span>收藏</span>
|
||
</el-button>
|
||
<el-button
|
||
type="info"
|
||
size="mini"
|
||
v-if="formData.collected == 1"
|
||
@click="cancelItem"
|
||
>
|
||
<i class="el-icon-star-on"></i><span>取消收藏</span>
|
||
</el-button>
|
||
</span>
|
||
</div>
|
||
<!-- <div v-html="formData.text"></div> -->
|
||
<div id="text">
|
||
<!-- <editor v-model="formData.text" :min-height="192" /> -->
|
||
<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>
|
||
总浏览量：{{ total.count }}</span
|
||
>
|
||
<span>
|
||
<i><img src="@/assets/image/icon1.png" alt=""/></i>
|
||
今日浏览：{{ total.today }}</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/wx.jpg" alt="" />
|
||
<div>嘉策公众号</div>
|
||
</div>
|
||
<div class="item">
|
||
<img src="@/assets/image/qq.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>
|
||
import {
|
||
search,
|
||
getPolicyInfo,
|
||
getPolicyReadInfo,
|
||
getInfo,
|
||
getInfo2,
|
||
getInfo3
|
||
} from '@/api/search';
|
||
import { getPolicyList, getRead } from '@/api/home/notice';
|
||
import { mapGetters } from 'vuex';
|
||
import { add, cancel } from '@/api/search';
|
||
import Editor from '@/components/Editor';
|
||
export default {
|
||
components: {
|
||
Editor
|
||
},
|
||
data() {
|
||
return {
|
||
input: '',
|
||
type: '',
|
||
formData: {},
|
||
noticeList: [],
|
||
total: {}
|
||
};
|
||
},
|
||
watch: {
|
||
formData: {
|
||
handler: function() {
|
||
this.$nextTick(() => {
|
||
this.formatRichText(this.formData.downloadUrl, this.formData.id);
|
||
});
|
||
}
|
||
},
|
||
deep: true
|
||
},
|
||
computed: {
|
||
...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;
|
||
this.msgSuccess('操作成功');
|
||
});
|
||
},
|
||
cancelItem() {
|
||
cancel({ policyId: this.formData.id }).then(res => {
|
||
this.formData.collected = 0;
|
||
this.msgSuccess('操作成功');
|
||
});
|
||
}
|
||
},
|
||
created() {
|
||
let { key, id } = this.$route.query;
|
||
this.type = key;
|
||
if (this.type == 'policy') {
|
||
// 政策
|
||
getPolicyInfo({ policyId: id }).then(({ data }) => {
|
||
this.formData = data;
|
||
});
|
||
} else if (this.type == 'policyRead') {
|
||
// 政策解读
|
||
getPolicyReadInfo({ readId: id }).then(({ data }) => {
|
||
this.formData = data;
|
||
});
|
||
} else if (this.type == 'information') {
|
||
// 资讯快报
|
||
getInfo({ id }).then(({ data }) => {
|
||
this.formData = data;
|
||
});
|
||
} else if (this.type == 'companyNeed') {
|
||
// 企业需求
|
||
getInfo2({ id }).then(({ data }) => {
|
||
this.formData = data;
|
||
});
|
||
} else if (this.type == 'scienceResult') {
|
||
// 科学成功
|
||
getInfo3({ id }).then(({ data }) => {
|
||
this.formData = data;
|
||
});
|
||
}
|
||
getRead({ id }).then(({ data }) => {
|
||
this.total = data;
|
||
});
|
||
getPolicyList({ pageNum: 1, pageSize: 5 }).then(({ data }) => {
|
||
this.noticeList = data.list;
|
||
});
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
/deep/.el-dialog__body {
|
||
padding-top: 0;
|
||
}
|
||
.result_page {
|
||
height: 100vh;
|
||
overflow: auto;
|
||
background-color: #f1f1f1;
|
||
.info {
|
||
display: flex;
|
||
justify-content: space-between;
|
||
}
|
||
#text {
|
||
margin-top: 30px;
|
||
/deep/.ql-toolbar {
|
||
display: none;
|
||
}
|
||
/deep/.editor {
|
||
border: 0;
|
||
}
|
||
}
|
||
.my_header {
|
||
position: fixed;
|
||
z-index: 1;
|
||
width: 100%;
|
||
height: 48px;
|
||
line-height: 48px;
|
||
background: #3d3e3e;
|
||
.title {
|
||
color: #fff;
|
||
.el-row {
|
||
display: flex;
|
||
.search {
|
||
align-items: center;
|
||
display: flex;
|
||
height: 30px;
|
||
overflow: hidden;
|
||
/deep/input {
|
||
color: #fff;
|
||
border-left: 0;
|
||
border-right: 0;
|
||
border-radius: 6px 0 0 6px;
|
||
background-color: rgba(255, 255, 255, 0.2);
|
||
}
|
||
.el-button {
|
||
height: 30px;
|
||
border-top-left-radius: 0;
|
||
border-bottom-left-radius: 0;
|
||
background-color: #ffa32c;
|
||
font-size: 16px;
|
||
padding: 0 16px;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
}
|
||
.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>
|