learning-system-portal/src/components/Qa/answerList.vue

<template>
    <div class="answer-list">
        <ul>
            <li class="answer-list-index" v-for="item in items" :key="item.id">
                <h6 class="answer-title-info follow-home-title">
                   <span class="pointer" @click="jumpDetail(item)">{{item.qtitle || item.title}}</span> <span v-if="item.type" style="font-weight: 400;">#回答#</span> 
                    <span class="follow-hide" style="float:right">
                        <el-button @click.stop="delCollectItem(item)" type="text" icon="el-icon-star-on" style="color:#8590A6">取消收藏</el-button>
                    </span>
                </h6>
                <p class="answer-text">
                    {{displayAll(item)}}
                    <span style="color:#0B4D9D;cursor:pointer;" v-if="item.content && item.content.length>180" @click.stop="changeIsAll(item)">
                        {{item.isAll?'收起':'全文展开'}}
                    </span>
                </p>
                <div>
                    <interactBar :type="0" :data="item" :shares="false" :comments="false" :views="false" :readonly="true"></interactBar>
                </div>
            </li>
        </ul>
    </div>
  </template>

  <script>
    import interactBar from "@/components/Portal/interactBar.vue";
    import author from "@/components/Portal/authorInfo.vue";
    import { mapGetters,mapActions } from 'vuex';
      export default{
        name:"answerList",
        components: {
          interactBar,
          // timeShow,
          author
        },
        props:{
            items:{
                type:Array,
                default:()=>[]
            },
        },
        computed: {
          ...mapGetters(['userInfo']),
        },
          data(){
              return{
                answerList:[]
              }
          },
      methods:{
        delCollectItem(item) {
            this.$confirm('您确定要取消收藏吗？', '取消提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            })
                .then(() => {
                this.$emit('confirm', item);
                // apiFavorites.del(item){
                //   console.log(this.$parent,"我拿到的父组件")
                // }
            })
            .catch(() => {});
        },
        jumpDetail(item){
          this.$router.push('/qa/answer?id='+item.qid)
        },
        emitHide(id) {
          this.$emit('hideIndex',id)
        },
        displayAll(item) {
          if (!item.isAll && item.content && item.content.length > 180) {
            return item.content.slice(0, 180) + "...";
          }
          return item.content;
        },
         //展示全部
         changeIsAll(item) {
          item.isAll = !item.isAll;
        },

       }
      }
  </script>

  <style lang="scss" scoped>
    .answer-list{
        ul{
            margin: 0;
        }
        .answer-list-index{
            padding: 30px 0;
            border-bottom: 1px solid rgba($color: #999999, $alpha: 0.2) !important;
          
        }
        .answer-title-info{
            margin: 0;
            margin-bottom: 16px;
        }
        .answer-text{
            margin-bottom: 18px;
            font-size: 14px;
            word-break:break-all;
            color: #333330;
            line-height: 20px;
        }
    }
  </style>