和我一起学习微信小程序(九),用户分享点赞评论

 3 1条评论

显示点赞方法,如果用户点过赞,则不做任何处理,如果没有则把openid作为唯一标识传递后服务端。

zan() {
    //如果已经点过赞,则跳出
    if (this.data.zanclass === 'icon-dianzan') {
      return false
    } else {
      http({
        data: {
          useremail: `${getApp().globalData.openid}@xcx.com`,
          article: this.data.articleModel._id
        },
        method: 'post',
        url: '/zan'
      }).then((res) => {
        //给出一个小震动
        wx.vibrateShort({
          type: 'light'
        })
        this.haszan()
      }).catch(() => {
        wx.showToast({
          title: '发生错误!',
          icon: 'error',
          duration: 1000
        })
      })
    }

当点击评论按钮时,先判断用户是否已经授权用户名,如果没有则弹出授权框。

 showDialog() {
    if (!this.data.userInfo) {
      this.getUserProfile().then(() => {
        this.handelShowDialog()
      })
    } else {
      this.handelShowDialog()
    }
  },

定义getUserProfile方法,获取用户授权,这里进行了一层promise包装,当上层调用时,可以实现同步。

getUserProfile() {
    return new Promise((resolve, reject) => {
      wx.getUserProfile({
        desc: '用于完善会员资料',
        success: (res) => {
          wx.setStorageSync('SHUserInfo', res.userInfo)
          this.setData({
            userInfo: res.userInfo
          })
          resolve()
        },
        fail: () => {
          reject()
        }
      })
    })
  },

评论模块,我用的是比较简单的系统自带的模态框,自己写一个更友好界面的模态框比较复杂,暂时先凑合着用吧。

// 执行展开对话框事件
  handelShowDialog() {
    wx.showModal({
      editable: true,
      placeholderText: '请理性留言',
      confirmText: '提交',
      success: (res) => {
        if (res.confirm) {
          let content = res.content
          if (content.length === 0) {
            wx.showToast({
              title: '您啥都没有说',
              icon: 'error',
              duration: 1000
            })
          } else {
            let replyModel = {
              content,
              from: this.data.userInfo.nickName,
              article: this.data.articleModel._id,
              to: ''
            }
            http({
              data: replyModel,
              method: 'post',
              url: '/reply'
            }).then((res) => {
              wx.showToast({
                title: '已提交等待审核',
                icon: 'success',
                duration: 1800,
                mask: true
              })
            }).catch(() => {
              wx.showToast({
                title: '发生错误!',
                icon: 'error',
                duration: 1000
              })
            })
          }
        } else if (res.cancel) {
          return false
        }
      }
    })

最后,收藏的话,其实服务端也可以做一套收藏接口,不过留到以后吧,暂时先不添加实际功能了,提示用户自己收藏到微信即可。

shoucang() {
    wx.showToast({
      title: '点击右上后收藏!',
      icon: 'success',
      duration: 2000
    })
  },

好了,至此详情页全部完成了,接下去就是菜单底部的博客页面了。

第十篇:和我一起学习微信小程序(十),修改默认分享朋友圈内容

本文作者:双黑

版权声明:本站文章欢迎链接分享,禁止全文转载!

游客