wiki/src/views/Study/Study.vue

<!--
  Copyright (c) 2020.
  author: bin
  email: binbin0314@126.com
  -->

<template>
  <div class="inner">
    <div class="search-list">
      <a-input-search
        @search="searchData"
        class="search"
        enter-button="搜索"
        placeholder="请输入..."
        style="width: 381px"
        v-model="iptCon"
      />
    </div>
    <div :key="index" class="post" v-for="(item, index) in lists">
      <div class="d-flex flex-nowrap">
        <img :src="item.visitLocation" alt class="post-img" v-if="item.visitLocation" />
        <div>
          <div class="post-content">
            <p class="post-title">{{ item.title }}</p>
            <div class="con-con" v-dompurify-html="item.content"></div>
          </div>
          <p style="color: rgba(0, 0, 0, 0.45); line-height: 30px; margin: 0 0 0 30px !important; margin-left: 0 !important">
            <span>{{ item.createdTime }}</span>
            <span style="margin-left: 20px"> 地点：太原 </span>
          </p>
        </div>
      </div>

      <p class="look-down baseColor">
        <span @click="getDet(item.id, index)">
          查看详情
          <a-icon type="arrow-right" />
        </span>
      </p>
      <!-- <div class="comment">
        <div :key="b" v-for="(a, b) in coms">
          <p style="padding-left: 20px">
            <a-avatar :size="20" :src="a.avatarUrl" style="margin-top: -4px" />
            <span>{{ a.userName }}</span>
            <span style="margin-left: 20px">{{ a.creatTime }}</span>
          </p>
          <p class="coms-con">{{ a.content }}</p>
        </div>
      </div> -->
    </div>
    <a-pagination
      :current="comCurrent"
      :page-size="pageSize"
      :total="total"
      @change="onShowSizeChange"
      class="pagination"
      show-less-items
      show-quick-jumper
      v-show="total > 5"
    />
  </div>
</template>

<script>
import { mapMutations, mapState } from 'vuex';
import { selComment } from 'config/selComment';

export default {
  name: 'Study',
  // components: { SearchList },
  data() {
    return {
      str: '这是交流社区界面',
      radioStyle: {
        height: '30px',
        lineHeight: '30px',
      },
      comment: '',
      total: 0,
      pageSize: 5,
      value: 1,
      iptCon: '',
      showType: -1,
      coms: [],
      lists: [],
    };
  },
  computed: mapState('home', ['comCurrent', 'postVal', 'postIpCon']),
  watch: {
    value(val) {
      this.setPostVal(val - 1);
      this.setComCurrent(1);
      this.searchData();
    },
  },
  created() {
    this.value = this.postVal + 1;
    this.iptCon = this.postIpCon;
    this.searchData();
  },
  methods: {
    ...mapMutations('home', ['setComCurrent', 'setPostDetail', 'setPostVal', 'setPostIpCon']),
    // 展开帖子，并且评论
    async getDet(id, index) {
      this.setPostDetail(this.lists[index]);
      this.$router.push('/StuDetails');
    },
    // 查询当前页帖子列表（5篇）
    async searchData() {
      try {
        this.setPostIpCon(this.iptCon);
        const params = {
          param: {
            category: this.value - 1,
            pageNum: this.comCurrent,
            pageSize: 5,
            title: this.iptCon,
          },
        };
        const res = await selComment(params);
        const { msg, data, code } = res.data;
        if (code === 200) {
          console.log(data);
          this.lists = data.list;
          this.total = parseInt(data.total);
        } else {
          console.log(msg);
        }
      } catch (error) {
        console.log(error);
      }
    },
    // 改变单当前页数
    onShowSizeChange(current, size) {
      this.setComCurrent(current);
      this.searchData();
    },
  },
};
</script>

<style scoped lang="stylus">
.inner {
  margin: 40px auto;
}

.post-title {
  // width: 165px;
  height: 26px;
  font-size: 20px;
  font-family: Microsoft YaHei;
  font-weight: bold;
  line-height: 26px;
  color: rgba(0, 0, 0, 0.85);
  overflow: hidden;
  opacity: 1;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}

.search-list {
  height: 72px;
  line-height: 72px;
  padding: 0 24px;
  position: relative;
}

.search {
  position: absolute;
  right: 0;
  top: 20px;
}

.btn {
  width: 75px;
  height: 32px;
  position: absolute;
  right: 25px;
  top: 20px;
}

.post {
  width: 100%;
  padding: 25px;
  position: relative;
  overflow: hidden;
  height: 270px;
  background: #fff;
  border-bottom: 1px solid #ccc;
  transition: all 0.25s;
}

.post-img {
  width: 233px;
  height: 100%;
  border: none !important;
  margin-right: 30px;
}

.post-content {
  // margin-left: 30px;
  overflow: hidden;
  height: 180px;
  text-indent: left;
}

.con-con {
  max-height: 130px;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
}

.look-down {
  position: absolute;
  right: 25px;
  bottom: 10px;
  cursor: pointer;
  margin-bottom: 0;
}

.pagination {
  margin-top: 48px;
  text-align: right;
}

.comment {
  min-height: 107px;
  max-height: 207px;
  overflow: auto;
  width: 1210px;
  opacity: 1;
  background: #FAFAFA;
  margin-top: 60px;
  padding: 16px 0;
}

.txtara {
  margin-top: 20px;
  position: relative;
}

.txt-btn {
  position: absolute;
  right: 0;
  bottom: 0;
}

.coms-con {
  background: rgba(19, 172, 196, 0.1);
  line-height: 24px;
  margin: 0 20px;
}
</style>