jiace-web/src/views/search.vue

<template>
  <div class="search_page">
    <div class="content">
      <div class="item" v-for="(value, key, index) in list" :key="index">
        <!-- 政策 -->
        <div>
          <!-- <el-tag effect="dark" v-if="key == 'policy'">政策</el-tag> -->
          <span class="tag" v-if="key == 'policy'">政策</span>
          <span class="tag" v-else-if="key == 'policyRead'">政策解读</span>
          <span class="tag" v-else-if="key == 'information'">资讯快报</span>
          <span class="tag" v-else-if="key == 'companyNeed'">企业需求</span>
          <span class="tag" v-else-if="key == 'scienceResult'">科学成功</span>
          <el-divider></el-divider>
          <div class="item_i" v-for="(item, index2) in value" :key="index2">
            <div>
              <h4 class="pointer" @click="handleItem(key, item.id)">
                {{ item.title }}
              </h4>
              <div class="info" v-if="key == 'policy' || key == 'policyRead'">
                <div>来源：{{ item.source }}</div>
                <div>发布：{{ item.listDate }}</div>
              </div>
              <div
                class="info"
                v-else-if="key == 'companyNeed' || key == 'scienceResult'"
              >
                <div>
                  <el-tag type="warning" size="mini" effect="dark">
                    {{ item.fieldName }}
                  </el-tag>
                  <el-tag type="warning" size="mini" effect="dark">
                    {{ item.typeName || item.labelName }}
                  </el-tag>
                </div>
                <div>发布：{{ parseTime(item.createTime, '{y}-{m}-{d}') }}</div>
              </div>
            </div>
            <el-divider></el-divider>
          </div>
        </div>
      </div>
    </div>
    <el-dialog title="" :visible.sync="dialogVisible" width="70%">
      <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">
            <i class="el-icon-star-on"></i><span>收藏</span>
          </el-button>
          <el-button type="info" size="mini">
            <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>
    </el-dialog>
  </div>
</template>
<script>
import { mapGetters } from 'vuex';
import Editor from '@/components/Editor';
import {
  search,
  getPolicyInfo,
  getPolicyReadInfo,
  getInfo,
  getInfo2,
  getInfo3,
  add,
  cancel
} from '@/api/search';
export default {
  components: {
    Editor
  },
  data() {
    return {
      list: {},
      dialogVisible: false,
      formData: {},
      type: ''
    };
  },
  computed: {
    ...mapGetters(['token'])
  },
  watch: {
    dialogVisible(a, b) {
      if (!a) this.formData = {};
    },
    formData: {
      handler: function() {
        this.$nextTick(() => {
          this.formatRichText(this.formData.downloadUrl);
        });
      }
    },
    deep: true
  },
  methods: {
    handleItem(key, id) {
      this.type = key;
      this.dialogVisible = true;
      if (key == 'policy') {
        // 政策
        getPolicyInfo({ policyId: id }).then(({ data }) => {
          this.formData = data;
        });
      } else if (key == 'policyRead') {
        // 政策解读
        getPolicyReadInfo({ readId: id }).then(({ data }) => {
          this.formData = data;
        });
      } else if (key == 'information') {
        // 资讯快报
        getInfo({ id }).then(({ data }) => {
          this.formData = data;
        });
      } else if (key == 'companyNeed') {
        // 企业需求
        getInfo2({ id }).then(({ data }) => {
          this.formData = data;
        });
      } else if (key == 'scienceResult') {
        // 科学成功
        getInfo3({ id }).then(({ data }) => {
          this.formData = data;
        });
      }
    }
  },
  created() {
    let { val: param } = this.$route.query;
    search({ param }).then(({ data }) => {
      this.list = data;
    });
  }
};
</script>
<style lang="scss" scoped>
.search_page {
  /deep/.el-dialog__body {
    padding-top: 0;
  }
  .el-dialog {
    .info {
      display: flex;
      justify-content: space-between;
    }
    #text {
      margin-top: 30px;
      /deep/.ql-toolbar {
        display: none;
      }
      /deep/.editor {
        border: 0;
      }
    }
  }

  .content {
    padding: 20px 30px;
    .item {
      margin-bottom: 40px;
      .tag {
        background-color: #1890ff;
        color: #fff;
        font-size: 18px;
        padding: 10px 25px;
        border-radius: 6px;
      }
      .item_i {
        .info {
          display: flex;
          justify-content: space-between;
          font-size: 14px;
          color: #333;
          .el-tag {
            margin-right: 10px;
          }
        }
      }
    }
  }
}
</style>