xinjiang_army/web/src/views/dynamic/detail.vue

<template>
  <lrLayout>
    <maside
      @clktitle="$router.push({ path: '/dynamic/list/info/none' })"
      slot="lcon"
      class="lcon"
      :title="title"
      @search="handleSearch"
    >
      <ul slot="content" class="content">
        <li
          v-for="(item, i) in list"
          :class="{ active: id == item.id }"
          class="liparimary"
          @click="$router.push({ params: { id: item.id } })"
          :key="i"
        >
          <span :title="item.name">{{ item.name }}</span>
        </li>
      </ul>
    </maside>
    <div slot="rcon" class="d-body">
      <Article :title="currentDetail.name">
        <div class="info" :slot="'info'">
          <span class="primaryColor"
            >{{ currentDetail.createTime }}&emsp;&emsp;浏览次数：{{
              currentDetail.visit
            }}</span
          >
        </div>
        <div
          :slot="'content'"
          class="content"
          v-html="currentDetail.content"
        ></div>
      </Article>
    </div>
  </lrLayout>
</template>

<script>
import Article from "@/components/Article";
import { getList, getDetailById } from "@/config/api";
import { title } from "./data";
import lrLayout from "@/components/lrLayout";

export default {
  components: {
    Article,
    lrLayout,
  },
  data() {
    return {
      list: [],
      currentDetail: {},
      title,
      searchKey: "",
    };
  },
  computed: {
    goodsModuleId(){
      return this.$route.params.goodsModuleId;
    },
    activeId() {
      return this.$route.params.type;
    },
    id() {
      return this.$route.params.id;
    },
  },
  mounted() {
    this.getData();
    console.log('-------',this.$route.params);
  },
  watch: {
    id(newVal) {
      this.getDetail(newVal);
    },
  },
  methods: {
    handleSearch(data) {
      this.searchKey = data;
      this.getData();
    },
    getDetail(id) {
      getDetailById(
        "news",
        {
          id: id || this.id,
        },
        (res) => {
          this.currentDetail = res.data;
          console.log(res);
        }
      );
    },
    async getData() {
      let params = {
        pageNum: 1,
        pageSize: 1000,
        searchKey: this.searchKey,
        type: this.activeId,
        goodsModuleId:this.goodsModuleId
      };
      getList("news", params, (res) => {
        res.data.list.forEach((item) => {
          item.time = this.formatTime(item.createTime);
        });
        this.list = res.data.list;
        this.getDetail(this.id);
      });
    },
  },
};
</script>

<style lang="less" scoped>
.lcon {
  .content {
    background: #fff;
    width: 100%;
    padding: 0 0;
    max-height: 50vh;
    overflow-y: auto;
    > li {
      min-height: 50px;
      line-height: 1.5;
      width: 100%;
      padding: 0 20px;
      cursor: pointer;
      text-align: left;
      display: flex;
      align-items: center;
      > span {
        overflow: hidden;
        text-overflow:ellipsis;
        white-space: nowrap;
        width: 100%;
        display: inline-block;
      }
      &.active,
      &:hover {
        background: #ebebeb;
        > span {
          &::before {
            display: none !important;
          }
        }
      }
    }
  }
}

.d-body {
  flex: 4;
  margin-left: 80px;
  text-align: center;
  font-size: 32px;
  .info {
    color: #9e9e9e;
    margin: 20px 0;
    > span {
      display: flex;
      align-items: center;
      margin-right: 30px;
    }
  }
  .content {
    text-indent: 32px;
    color: #333333;
  }
}
</style>