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">
            <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-row>
      </div>
    </div> -->
    <headerPage />

    <div class="my_main content p0-100 min_h_285" style="display: flex">
      <div class="l" style="width: 77%; 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'"
            >价格：{{ setNumber(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"
          :class="type == 'policy' && formData.method == 1 ? '' : 'ql-editor'"
        >
          <!-- <editor v-model="formData.text" :min-height="192" /> -->
          <div v-html="formData.text" />
        </div>
      </div>
      <div
        class="r"
        style="
          width: 22%;
          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>

    <footerPage :totalNum="total.count" :goldNum="total.today" :flag="false" />
  </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 { numberFormat } from '@/utils';
import Editor from '@/components/Editor';
import headerPage from './components/header';
import footerPage from './components/footer';
// import headerPage2 from './components/header2';
export default {
  components: {
    Editor,
    headerPage,
    footerPage
    // headerPage2
  },
  data() {
    return {
      input: '',
      type: '',
      formData: {},
      noticeList: [],
      total: {}
    };
  },
  watch: {
    formData: {
      handler: function() {
        if (this.type == 'policy') {
          this.$nextTick(() => {
            this.formatRichText(this.formData.downloadUrl, this.formData.id);
          });
        } else {
          this.formData.text = this.formData.text.replaceAll('&nbsp;', '　');
        }
      }
    },
    deep: true
  },
  computed: {
    ...mapGetters(['token'])
  },
  methods: {
    setNumber(val) {
      return numberFormat(val);
    },
    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;
    }
    /deep/p {
      img {
        max-width: 100%;
      }
    }
  }
  .my_main {
    margin: 30px auto;
    .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;
            }
          }
        }
      }
    }
  }
}
</style>