shibeirencai_wechat/pages/topics/interactive/topicArticle/index.js

// pages/topics/interactive/article/index.js
import dayjs from '../../../../utils/dayjs/index.js'
import relativeTime from '../../../../utils/dayjs/relativeTime.js'
dayjs.extend(relativeTime);
import { TopicModel } from '../../../../models/topic.js'
let topicModel = new TopicModel()


Page({

  /**
   * 页面的初始数据
   */
  data: {
    title:"市北区举行国际航运贸易金融创新中心核心区产业建设",
    time:"6月7日",
    userInfo:{
      icon:"",
      name:"用户名",
      company:"青岛誉群投资有限公司",
      position:"董事长"
    },
    detail:"9月16日晚7时，市北区委、区政府在区机关二楼会议厅举行国际航运贸易金融创新中心核心区产业招商工作方案答辩。这是市北区借鉴市委、市政府推动15个攻势作战经验，围绕创新中心核心区建设举行的首场答辩。区委书记张新竹主持答辩并讲话。",
    imgArr:['http://bpic.588ku.com/element_origin_min_pic/16/10/30/528aa13209e86d5d9839890967a6b9c1.jpg',
      'http://bpic.588ku.com/element_origin_min_pic/16/10/30/54fcef525fa8f6037d180f3c26f3be65.jpg',
      'http://bpic.588ku.com/element_origin_min_pic/16/10/30/62e3ca3a02dddb002eff00482078d194.jpg',
      'http://bpic.588ku.com/element_origin_min_pic/16/10/31/c7167fcfb4ebcd12621c05b0c852e98e.jpg'
    ],

    comments:[
      {
        userIcon:"",
        userName:"用户名",
        detail:"评论内容",
        time:"刚刚",
        praiseNum:"30"
      },
      {
        userIcon: "",
        userName: "用户名",
        detail: "评论内容",
        time: "1小时前",
        praiseNum: "30"
      }
    ],

    unStar: '/images/common/star.png',
    star: '/images/common/star_light.png',
    isStar:true,
    topicId:String,
    currPage: 1,
    commentList: [],
    unPraise: '/images/common/zan.png',
    praise: '/images/common/star_light.png',
    commentId:String
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    console.log(options.topicId)
    this.setData({
      topicId: options.topicId
    })
    this.fetchDetail()
    this.fetchDetailComment()
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    const page = this.data.currPage + 1
    this.setData({
      currPage: page
    })
    this.fetchDetailComment()
  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  },
  fetchDetail(){
    let topicId = this.data.topicId
    topicModel.getTopicDetail(topicId,res => {
      console.log('议题详情')
      console.log(res)
      let data = res.result
      this.setData({
        title:data.title,
        time: data.createTime,
        userInfo:{
          icon: data.groupAvator,
          name:data.author,
          company: data.company,
          position: data.position,
        },
        detail:data.content,
        imgArr: data.images.split(";").slice(0, -1)
      })
      console.log(this.data.imgArr)
    })
  },
  fetchDetailComment(){
    let topicId = this.data.topicId
    let page = this.data.currPage
    topicModel.getTopicDetailComment(topicId,page,res => {
      console.log('议题评论')
      console.log(res)

      const datas = res.result.list
      let tempDatas = []
      datas.forEach(item => {
        tempDatas.push({
          isPraise: false,
          id:item.id,
          userIcon: item.commentAvator,
          userName: item.username,
          detail: item.comment,
          time: item.createTime,
          praiseNum: item.supportNum
        })
      })
      if (page == 1) {
        this.setData({
          commentList: tempDatas
        })
      } else {
        if (tempDatas.length > 0) {
          const list = [...this.data.commentList, ...tempDatas]
          this.setData({
            commentList: list
          })
        } else {
          const page = this.data.currPage - 1
          this.setData({
            currPage: page
          })
          wx.showToast({
            title: '已加载全部',
            icon: 'none'
          })
        }
      }
      console.log(this.data.commentList)
      wx.stopPullDownRefresh()
    })
  },
  fetchTopicCollect(){
    let topicId = this.data.topicId
    topicModel.topicCollect(topicId,res =>{
      console.log('收藏')
      console.log(res)
      if(res.code === 200){
        wx.showToast({
          title: '收藏成功',
          icon: 'none'
        })
      }
    })
  },
  fetchTopicCommentPraise(){
    let commentId = this.data.commnetId
    topicModel.topicCommentPraise(commentId,res =>{
      console.log(res)
      if (res.code === 200) {
        wx.showToast({
          title: '点赞',
          icon: 'none'
        })
      }
    })
  },
  onClickCollect() {
    this.setData({
      isStar: !this.data.isStar
    })
    this.fetchTopicCollect()
    // 收藏功能
  },

  onClickPraise(e){
    console.log(e)
    const sIndex = e.currentTarget.dataset.index
    var selectItem = e.currentTarget.dataset.item
    const commentList = this.data.commentList
    const tempList = []
    commentList.forEach( (item,index)=>{
      if (sIndex === index){
        item.isPraise = !item.isPraise
      }
      tempList.push(item)
    })
    this.setData({
      commentList:tempList,
      commentId: selectItem.id
    })
    this.fetchTopicCommentPraise()
    // 评论点赞
  },
  previewImg: function (e) {
    console.log(e.currentTarget.dataset.index);
    var index = e.currentTarget.dataset.index;
    var imgArr = this.data.imgArr;
    wx.previewImage({
      current: imgArr[index],     //当前图片地址
      urls: imgArr,               //所有要预览的图片的地址集合 数组形式
      success: function (res) { },
      fail: function (res) { },
      complete: function (res) { },
    })
  }
})