jiace-web/src/views/result.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>