山东大学软件学院暑期项目实训记录（六）

实现了写评论接口且将前端界面整合

<template>
  <div class="container">
<!--    <div v-for="item in comments" >hh{{item.content}}</div>-->
    <div style="height: 50px">
      <!--        v-if="item.reply.length > 0"
                   @click="showCommentInput(item)"-->
      <div class="write-reply" style="height: 100%;position:absolute;top: 10px; right: 15px"   @click="showCommentInput1()">
        <i class="el-icon-edit"></i>
        <span class="add-comment">添加新评论</span>
      </div>
    </div>

    <transition name="fade">
      <div class="input-wrapper" v-if="showItem == true"  >
        <el-input class="gray-bg-input"
                  v-model="content"
                  type="textarea"
                  :rows="3"
                  autofocus
                  placeholder="写下你的评论">
        </el-input>
        <div class="btn-control" style="padding:30px ">
          <el-button style="position:absolute;right: 170px;" class="cancel" type="primary" round
                     @click="cancel">取消</el-button>
          <el-button style="position:absolute;right: 70px" class="btn" type="success" round
                     @click="commitComment1">确定</el-button>
        </div>
      </div>
    </transition>


    <div class="comment" v-for="item in comments" :key="item">

  <div v-if="item.parentId == 0">
      <div class="info">
        <img class="avatar" :src="item.iconurl" width="36" height="36"/>
        <div class="right">
          <div class="name" :content="item.username">{{item.username}}</div>
          <div class="date" :content="item.publishDate">{{item.publishDate}}</div>
        </div>
      </div>
      <div class="content" :content="item.content">{{item.content}}</div>
     <!-- <div class="control">
<span class="like" :class="{active: item.isLike}" @click="likeClick(item)">
<i class="iconfont icon-like"></i>
<span class="like-num">{{item.likeNum > 0 ? item.likeNum + '⼈赞' : '赞'}}</span>
</span>
        <span class="comment-reply" @click="showInput(item)">
<i class="iconfont icon-comment"></i>
<span >回复</span>
</span>
      </div> -->
    <div style="padding-top: 20px">
      <transition name="fade">
        <div class="input-wrapper" v-if="showItemId === item.cid">
          <el-input class="gray-bg-input"
                    v-model="content"
                    type="textarea"
                    :rows="3"
                    autofocus
                    placeholder="写下你的评论"
                    >

          </el-input>
          <div class="btn-control" style="padding:30px ">
            <el-button style="position:absolute;right: 170px;" class="cancel" type="primary" round
                       @click="cancel">取消</el-button>
            <el-button style="position:absolute;right: 70px" class="btn" type="success" round
                       @click="commitComment1">确定</el-button>
          </div>
        </div>
      </transition>
    </div>
      </div>

      <!-- <div v-for="reply in comments" v-if="item.uid == reply.puid && item.cid == reply.parentId">

       <div class="reply">
         <div class="item"  :key="reply">
           <div class="reply-content">
             <span class="from-name">{{reply.username}}</span><span>: </span>
             <span class="to-name">@{{item.username}}</span>
             <span>{{reply.content}}</span>
           </div>
           <div class="reply-bottom">
             <span>{{reply.publishDate}}</span>
             <span class="reply-text" @click="showCommentInput(item, reply)">
 <i class="iconfont icon-comment"></i>
 <span>回复</span>
 </span>
           </div>
         </div>
       </div>

       </div>-->
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
const axios = require('axios');
import qs from 'qs';
export default {
  name: "comment",
  props: {
    comments: {
      type: Array,
      required: true
    }
  },
  data() {
    return {
      inputComment: '',
      showItemId: '',
      fromName:'',
      date: '',
      content: '',
      aid: 124,
      cid:'',
      iconurl: '',
      comments: [],
      showItem: false,
      username:'',
      puid:'',
      parentId:'',
      uid:"201800301203"

    }
  },
  created() {
    console.log(this.comments)
    const _this = this
    axios.get("http://47.107.40.143:8080/getComments", {params: {aid: this.aid}}).then(res => {
      for (let i = 0; i < res.data.data.length; i++) {
        _this.comments.push({

          uid: res.data.data[i].uid,
          iconurl: res.data.data[i].iconurl,
          parentId: res.data.data[i].parentId,
          publishDate: res.data.data[i].publishDate,
          puid: res.data.data[i].puid,
          content: res.data.data[i].content,
          username: res.data.data[i].username,
          cid: res.data.data[i].cid,

            }
        )


      }
      console.log(res)
      //console.log('传到页面的数据为' + this.content)

    });
  },
  components: {},
  computed: {},
  methods: {
    /**
     * 点赞
     */
    likeClick(item) {
      if (item.isLike === null) {
        Vue.$set(item, 'isLike', true)
        item.likeNum++
      } else {
        if (item.isLike) {
          item.likeNum--
        } else {
          item.likeNum++
        }
        item.isLike = !item.isLike
      }
    },
    /**
     * 点击取消按钮
     */
    cancel() {
      this.showItemId = ''
      this.showItem=false
      this.show=false
    },
    /**
     * 提交评论
     */
    commitComment() {
      console.log(this.inputComment)

    },

    commitComment1() {
      const _this=this
      this.showItem = false;
      let url='http://47.107.40.143:8080/comment'
      let url_data=this.$qs.stringify(
          {
            aid: _this.aid,
            uid:_this.uid,
            content:_this.content,
            parentId:-1,
            puid:"-1"
          }
      )
      axios.post(url,url_data).then(
          res =>{
            console.log(res.code)
            console.log(res.data.aid)
            this.$alert('评论成功','提示',
            {
              confirmButtonText:'确定',
            }
            )
          }
      )

    },

    /**
     * 点击评论按钮显示输⼊框
     * item: 当前⼤评论
     * reply: 当前回复的评论
     */

    showInput(item){
      this.inputComment = '@' + item.username + ' '
      this.showItemId = item.cid
    },
    showCommentInput(item, reply) {
      if (reply) {
        this.inputComment = '@' + reply.username + ' '
      } else {
        this.inputComment = ''
      }
      this.showItemId = item.cid
    },

    showCommentInput1() {
      this.showItem = true
    },
    showCommentInput2() {
      this.show = true
    },
  }
}
</script>
<style scoped>
.container {
  padding: 0 10px;
  box-sizing: border-box;
}
.container .comment {
  display: flex;
  flex-direction: column;
  padding: 10px;
  border-bottom: 1px solid #F2F6FC;
}
.container .comment .info {
  display: flex;
  align-items: center;
}
.container .comment .info .avatar {
  border-radius: 50%;
}
.container .comment .info .right {
  display: flex;
  flex-direction: column;
  margin-left: 10px;
}
.container .comment .info .right .name {
  font-size: 16px;
  color: #303133;
  margin-bottom: 5px;
  font-weight: 500;
}
.container .comment .info .right .date {
  font-size: 12px;
  color: #909399;
}
.container .comment .content {
  font-size: 16px;
  color: #303133;
  line-height: 20px;
  padding: 10px 0;
}
.container .comment .control {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #909399;
}
.container .comment .control .like {
  display: flex;
  align-items: center;
  margin-right: 20px;
  cursor: pointer;
}
.container .comment .control .like.active, .container .comment .control .like:hover {
  color: #409EFF;
}
.container .comment .control .like .iconfont {
  font-size: 14px;
  margin-right: 5px;
}
.container .comment .control .comment-reply {
  display: flex;
  align-items: center;
  cursor: pointer;
}
.container .comment .control .comment-reply:hover {
  color: #333;
}
.container .comment .control .comment-reply .iconfont {
  font-size: 16px;
  margin-right: 5px;
}
.container .comment .reply {
  margin: 10px 0;
  border-left: 2px solid #DCDFE6;
}
.container .comment .reply .item {
  margin: 0 10px;
  padding: 10px 0;
  border-bottom: 1px dashed #EBEEF5;
}
.container .comment .reply .item .reply-content {
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #303133;
}
.container .comment .reply .item .reply-content .from-name {
  color: #409EFF;
}
.container .comment .reply .item .reply-content .to-name {
  color: #409EFF;
  margin-left: 5px;
  margin-right: 5px;
}
.container .comment .reply .item .reply-bottom {
  display: flex;
  align-items: center;
  margin-top: 6px;
  font-size: 12px;
  color: #909399;
}
.container .comment .reply .item .reply-bottom .reply-text {
  display: flex;
  align-items: center;
  margin-left: 10px;
  cursor: pointer;
}
.container .comment .reply .item .reply-bottom .reply-text:hover {
  color: #333;
}
.container .comment .reply .item .reply-bottom .reply-text .icon-comment {
  margin-right: 5px;
}
.container .comment .reply .write-reply {
  height: 50px;
  display: flex;
  align-items: center;
  font-size: 14px;
  color: #909399;
  padding: 20px;
  cursor: pointer;
}
.container .comment .reply .write-reply:hover {
  color: #303133;
}
.container .comment .reply .write-reply .el-icon-edit {
  margin-right: 5px;
}
.container .comment .reply .fade-enter-active, .container .comment .reply fade-leave-active {
  transition: opacity 0.5s;
}
.container .comment .reply .fade-enter, .container .comment .reply .fade-leave-to {
  opacity: 0;
}
.container .comment .reply .input-wrapper {
  padding: 10px;
}
.container .comment .reply .input-wrapper .gray-bg-input, .container .comment .reply .input-wrapper .el-input__inner {
  /*background-color: #67C23A;*/
}
.container .comment .reply .input-wrapper .btn-control {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding-top: 10px;
}
.container .comment .reply .input-wrapper .btn-control .cancel {
  font-size: 16px;
  color: #606266;
  margin-right: 20px;
  cursor: pointer;
}
.container .comment .reply .input-wrapper .btn-control .cancel:hover {
  color: #333;
}
.container .comment .reply .input-wrapper .btn-control .confirm {
  font-size: 16px;
}
</style>