add commentlist comment books in comment page get comment data and books top10 data

server/controllers/booklist.js

@@ -1,15 +1,20 @@
 const { mysql } = require('../qcloud')
 
 module.exports = async (ctx) => {
-  const {page} = ctx.request.query
+  const {page, openid} = ctx.request.query
   const size = 10
-  const books = await mysql('books')
+  const mysqlSelect =  mysql('books')
                       .select('books.*', 'cSessionInfo.user_info')
                       .join('cSessionInfo', 'books.openid', 'cSessionInfo.open_id')
-                      .limit(size)
-                      .offset(Number(page) * size)
                       .orderBy('books.id', 'desc')
-
+  let books
+  if (openid) {
+    // 根据opid过滤
+    books = await mysqlSelect.where('books.openid', openid)
+  } else {
+     // 全部图书 分页
+    books = await mysqlSelect.limit(size).offset(Number(page) * size)
+  }
   ctx.state.data = {
     list: books.map(v => {
       const info = JSON.parse(v.user_info)
@@ -21,5 +26,3 @@ module.exports = async (ctx) => {
     })
   }
 }
-
-

server/controllers/commentlist.js

@@ -0,0 +1,27 @@
+const { mysql } = require('../qcloud')
+
+module.exports = async (ctx) => {
+  const {bookid, openid} = ctx.request.query
+  const mysqlSelect = mysql('comments')
+                    .select('comments.*', 'cSessionInfo.user_info')
+                    .join('cSessionInfo', 'comments.openid', 'cSessionInfo.open_id')
+  let comments
+  if (bookid) {
+    // 图书详情的评论列表
+    comments = await mysqlSelect.where('bookid', bookid)
+  } else if (openid) {
+    // 根据个人的openid筛选
+    comments = await mysqlSelect.where('openid', openid)
+  }
+  ctx.state.data = {
+    list: comments.map(v => {
+      const info = JSON.parse(v.user_info)
+
+      return Object.assign({}, v, {
+        title: info.nickName,
+        image: info.avatarUrl
+      })
+    })
+  }
+}
+

server/routes/index.js

@@ -42,5 +42,6 @@ router.get('/bookdetail', controllers.bookdetail)
 router.get('/top', controllers.top)
 // 评论
 router.post('/addcomment', controllers.addcomment)
+router.get('/commentlist', controllers.commentlist)
 
 module.exports = router

src/App.vue

@@ -25,6 +25,15 @@ export default {
 .text-primary{
   color:#EA5149;
 }
+.page-title{
+  padding-left:20px;
+  background:#eee;
+  line-height: 40px;
+  font-size: 14px;
+}
+.right{
+  float: right;
+}
 .btn{
   color:white;
   background:#EA5A49;

src/components/CommentList.vue

@@ -0,0 +1,70 @@
+<template>
+  <div class="comment-list">
+    <div class="page-title"  v-if="comments.length">评论</div>
+    <div class="comment"
+        v-for="comment in comments"
+        :key="comment.id"
+        @click="handleClick(comment)"
+        >
+      <div class="user">
+        <div class="inline">
+          <img :src="comment.image"
+              class="avatar"
+              mode="aspectFit">
+          {{comment.title}}
+        </div>
+        <div class="right">
+          {{comment.location||'未知地点'}}
+          <span class="text-primary">
+            --
+          </span>
+          {{comment.phone||'未知型号'}}
+        </div>
+      </div>
+      <div class="content">
+        {{comment.comment}}
+      </div>
+    </div>
+  </div>
+</template>
+<script>
+export default {
+  props: ['comments', 'type'],
+  methods: {
+    handleClick(comment) {
+      if(this.type === 'user') {
+        wx.navigateTo({
+          url: '/pages/detail/main?id=' + comment.bookid
+        })
+      }
+    }
+  }
+}
+</script>
+<style lang="scss">
+.comment-list{
+  background:#eee;
+  font-size:14px;
+  .comment{
+    background: white;
+    margin-bottom:10px;
+    padding:5px 20px;
+    .content{
+      margin:10px 0;
+    }
+    .user{
+      .inline{
+        display:inline;
+        .avatar{
+          width:20px;
+          height:20px;
+          border-radius: 50%;
+        }
+      }
+
+    }
+
+  }
+}
+</style>
+

src/pages/comments/Comment.vue

@@ -1,11 +1,66 @@
 <template>
-  <div>
-    评论过的书页面
+<div class="container">
+  <CommentList v-if="userinfo.openId"
+      type="user"
+      :comments="comments"></CommentList>
+  <div v-if='userinfo.openId'>
+    <div class="page-title">我的图书</div>
+    <Card v-for="book in books"
+          :key="book.id"
+          :book="book"></Card>
+    <div  v-if='!books.length'>暂时还没添加过书，快去添加几本把</div>
   </div>
+</div>
 </template>
 <script>
+import {get} from '@/util'
+import CommentList from '@/components/CommentList'
+import Card from '@/components/Card'
 export default {
-
+  data() {
+    return {
+      comments: [],
+      books: [],
+      userinfo: {}
+    }
+  },
+  components: {
+    CommentList,
+    Card
+  },
+  methods: {
+    init(){
+      wx.showNavigationBarLoading()
+      this.getComments();
+      this.getBooks();
+      wx.hideNavigationBarLoading()
+    },
+    async getBooks() {
+      const books = await get('/weapp/booklist',{
+        openid: this.userinfo.openId
+      })
+      this.books = books.list
+    },
+    async getComments () {
+      const comments = await get('/weapp/commentlist', {
+        openid: this.userinfo.openId
+      });
+      this.comments = comments.list
+    }
+  },
+  onPullDownRefresh(){
+    this.init()
+    wx.stopPullDownRefresh()
+  },
+  onShow(){
+    if(!this.userinfo.openId){
+      let userinfo = wx.getStorageSync('userInfo')
+      if(userinfo){
+        this.userinfo = userinfo
+        this.init()
+      }
+    }
+  }
 }
 </script>
 <style>

src/pages/comments/main.js

@@ -3,3 +3,10 @@ import Comment from './Comment'
 
 const app = new Vue(Comment)
 app.$mount()
+
+export default{
+  config: {
+    navigationBarTitleText: '评论列表',
+    enablePullDownRefresh: true
+  }
+}

src/pages/detail/Detail.vue

@@ -2,8 +2,8 @@
   <div>
     <!-- 图书id{{bookid}} -->
     <BookInfo :info='info'></BookInfo>
-    <!-- <button open-type='share' class="btn">转发给好友</button> -->
-    <div class="comment">
+    <CommentList :comments="comments"></CommentList>
+    <div class="comment" v-if="showAdd">
       <textarea v-model="comment"
                 class="textarea"
                 :maxlength="100"
@@ -20,17 +20,24 @@
       </div>
       <button class="btn" @click="addComment">评论</button>
     </div>
+    <div v-else class="text-footer">
+      未登录或者已经评论过啦
+    </div>
+    <button open-type='share' class="btn">转发给好友</button>
   </div>
 </template>
 <script>
 import {get, post, showModal} from '@/util'
 import BookInfo from '@/components/BookInfo'
+import CommentList from '@/components/CommentList'
 export default {
   components: {
-    BookInfo
+    BookInfo,
+    CommentList
   },
   data () {
     return {
+      comments: [],
       userinfo: {},
       bookid: '',
       info: {},
@@ -39,6 +46,19 @@ export default {
       phone: ''
     }
   },
+  computed: {
+    showAdd () {
+      //未登录
+      if(!this.userinfo.openId) {
+        return false;
+      }
+      // 评论页面里查到有自己的openid
+      if (this.comments.filter(v => v.openid === this.userinfo.openId).length) {
+        return false
+      }
+      return true
+    }
+  },
   methods: {
     async addComment () {
       if (!this.comment) {
@@ -56,6 +76,7 @@ export default {
         console.log(data)
         await post('/weapp/addcomment', data);
         this.comment = '';
+        this.getComments();
       } catch (e) {
         showModal('失败', e.msg)
       }
@@ -109,6 +130,11 @@ export default {
       })
       console.log(info)
       this.info = info
+    },
+    async getComments () {
+      const comments = await get('/weapp/commentlist', {bookid: this.bookid});
+      console.log('comments', comments);
+      this.comments = comments.list || []
     }
   },
   onShareAppMessage: function(res) {
@@ -134,6 +160,7 @@ export default {
   mounted () {
     this.bookid = this.$root.$mp.query.id;  // 跳转页面使用this.$root.$mp.query获取参数
     this.getDetail();
+    this.getComments();
     const userinfo = wx.getStorageSync('userInfo')
     console.log('userInfo', userinfo);
     if (userinfo) {