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 { store } from '../../../../utils/store.js'
import { TopicModel } from '../../../../models/topic.js'
let topicModel = new TopicModel()


Page({

  /**
   * 页面的初始数据
   */
  data: {
    title:String,
    time: String,
    groupAvator: String,
    author:String,
    company:String,
    position:String,
    detail: String,
    imgArr:[],
    unStar: '/images/common/star.png',
    star: '/images/common/star_light.png',
    isStar:false,
    topicId:String,
    collectionId:String,
    isCollect:Number,
    currPage: 1,
    commentList: [],
    unPraise: '/images/topic/un_zan.png',
    praise: '/images/topic/zan.png',
    hiddenmodalput:true,
    currentComment:'',

    startX: 0, //开始坐标
    startY: 0,
    total:0,
    confirmTag:true
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
    //console.log(options.topicId)
    this.setData({
      topicId: options.topicId
    })
    this.fetchDetail()
    this.fetchDetailComment()
  },
  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {
    const page = this.data.currPage + 1
    this.setData({
      currPage: page
    })
    this.fetchDetailComment()
  },
  fetchDetail(){
    let topicId = this.data.topicId
    //console.log('议题详情' + topicId)
    topicModel.getTopicDetail(topicId,res => {
      let data = res.result
      this.setData({
        topicId: data.id,
        collectionId: data.collectionId,
        isCollect: data.isCollect,
        title: data.title || '',
        time: data.createTime || '',
        groupAvator: data.groupAvator,
        author: data.author || '',
        company: data.company || '',
        position: data.position || '',
        detail: data.content || '',
        imgArr: data.images.split(";").slice(0, -1)
      })
    })
  },
  fetchDetailComment(flag=false){

    if(flag){
      this.setData({
        currPage:1
      })
    }
    let topicId = this.data.topicId
    let page = this.data.currPage
    topicModel.getTopicDetailComment(topicId,page,res => {
      //console.log('议题评论')

      const datas = res.result.list
      this.setData({
        total: res.result.total
      })
      let tempDatas = []
      datas.forEach(item => {
        tempDatas.push({
          id:item.id,
          commentAvator: item.commentAvator,
          userName: item.username,
          isGoldenIdea: item.isGoldenIdea,
          detail: item.comment,
          time: item.createTime,
          praiseNum: item.supportNum,
          isSupport: item.isSupport,
          isTouchMove:false,
        })
      })
      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('收藏')
      if(res.code === 200){
        this.fetchDetail()
        wx.showToast({
          title: '收藏成功',
          icon: 'none'
        })
      }
    })
  },

  fetchTopicUnCollect(){
    let collectionId = this.data.collectionId
    topicModel.topicUnCollect(collectionId, res => {
      if (res.code === 200) {
        this.fetchDetail()
        wx.showToast({
          title: '取消收藏',
          icon: 'none'
        })
      }
    })
  },

  fetchTopicCommentPraise(commentId){
    wx.showLoading()
    topicModel.topicCommentPraise(commentId,res =>{
      if (res.code === 200) {
        wx.hideLoading();
        var list = this.data.commentList;

        for(var index in list){
          if(list[index]['id'] == res.result.id){
            list[index]['praiseNum'] = res.result.supportNum;
            list[index]['isSupport'] = res.result.isSupport;
            break;
          }
        }
        this.setData({
          commentList:list
        })
      }
    })
  },

  fetchDeleteComment(commentId){
    topicModel.deleteComment(commentId, res => {
      if (res.code === 200) {
        wx.showToast({
          title: res.message,
          icon: 'none'
        })
        this.fetchDetailComment()
      }
    })
  },

  onClickCollect() {
    this.setData({
      isCollect: !this.data.isCollect
    })
    this.data.isCollect === true ? this.fetchTopicCollect() : this.fetchTopicUnCollect()
    // 收藏功能
  },

  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){
        this.fetchTopicCommentPraise(selectItem.id)
      }
    })
  },

  // 点击查看图片
  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) { },
    })
  },

  // 点击评论
  onTapComment(){
    this.setData({
      hiddenmodalput: !this.data.hiddenmodalput
    })
  },
  // 弹出框 取消
  cancel: function () {
    this.setData({
      hiddenmodalput: true,
      currentComment: ''
    });
  },
  // 弹出框 确认
  confirm: function () {
    if(this.data.confirmTag){
      if (!this.data.currentComment){
        wx.showToast({
          title: '请输入评论',
          icon: 'none'
        })
        this.setData({
          confirmTag:true,
          currentComment: ''
        })
        return
      }
      this.setData({
        confirmTag:false,
        hiddenmodalput:true,
      })
      topicModel.topicAddComment(this.data.currentComment, this.data.topicId,res=>{
        if(res.code === 200){
          this.setData({
            hiddenmodalput: true,
            confirmTag:true,
            currentComment: ''
          })
          this.fetchDetailComment(true)
        }
      })
    }
  },

  // 评论输入框
  bingTextAreaInput(e){
    //console.log(e.detail.value)
    this.setData({
      currentComment: e.detail.value
    })
  },

  touchstart: function (e) {
    let { nickName } = store.readUserInfo()
    if (e.currentTarget.dataset.name === nickName) {
      //开始触摸时 重置所有删除
      this.data.commentList.forEach( item=>{
        if (item.isTouchMove) {
          item.isTouchMove = false
        }
      })
      this.setData({
        startX: e.changedTouches[0].clientX,
        startY: e.changedTouches[0].clientY,
        commentList: this.data.commentList
      })
    }
  },
  touchmove: function (e) {
    let { nickName } = store.readUserInfo()
    if (e.currentTarget.dataset.name === nickName) {
      var that = this
      const currentIndex = e.currentTarget.dataset.index//当前索引
      const startX = that.data.startX//开始X坐标
      const startY = that.data.startY//开始Y坐标
      const touchMoveX = e.changedTouches[0].clientX//滑动变化坐标
      const touchMoveY = e.changedTouches[0].clientY//滑动变化坐标
      //获取滑动角度
      const angle = that.angle({ X: startX, Y: startY }, { X: touchMoveX, Y: touchMoveY })
      if (Math.abs(angle) > 30) return;
      this.data.commentList.forEach((item,index) => {
        item.isTouchMove = false
        if (currentIndex == index) {
          if (touchMoveX > startX) //右滑
            item.isTouchMove = false
          else //左滑
            item.isTouchMove = true
        }
      })
      that.setData({
        commentList: that.data.commentList
      })
    }
  },
  angle: function (start, end) {
    var _X = end.X - start.X,
      _Y = end.Y - start.Y
    //返回角度 /Math.atan()返回数字的反正切值
    return 360 * Math.atan(_Y / _X) / (2 * Math.PI);
  },
  del: function (e) {
    let that = this
    let id = e.currentTarget.dataset.id
    topicModel.deleteComment(id,res=>{
      if (res.code === 200) {
        wx.showToast({
          title: '删除成功',
          icon: 'none',
          success() {
            that.setData({
              currPage: 1,
            })
            that.fetchDetailComment()
          }
        })
      }
    })
  }
})