关注和取消关注功能

提示：关注和取消关注功能（或者点赞和取消点赞等类似功能）

---

前言

关注和取消关注功能（或者点赞和取消点赞等类似功能）

---

一、效果图展示

二、功能实现

代码如下（示例）：

<view class="rightBtn">
      <u-button
         :icon="!item.isAtention ? '../../../static/images/myImages/tianjiabtn@2x.png' : ''"
         size="medium"
         plain
         shape="circle"
         :text="!item.isAtention ? '关注' : '已关注'"
         @click="addAttention(item)"
         :class="!item.isAtention ? 'custom-style' : 'custom-style2'">
       </u-button>
  </view>
      
   methods: {
    addAttention(item) {
      let pamise = {
        targetNumberId: item.userinfo.numberId,
      }
      let url = ''
      if (item.isAtention) {
        //取消关注
        url = '/atention/v1/cancel'
      } else {
        url = '/atention/v1/create'
      }
      backdata()
      requestMethod(url, pamise).then((res) => {
        if (res.code == 'SUCCESS') {
          item.isAtention = !item.isAtention
          if (item.isAtention) {
            uni.showToast({
              title: '关注成功',
              icon: 'none',
            })
          } else {
            uni.showToast({
              title: '取消关注',
              icon: 'none',
            })
          }
          //延时一秒清空数据，回到第一页，重新发起列表接口请求
          setTimeout(() => {
            this.pageNumber = 0
            this.atentionList = []
            this.attentionList()
          }, 1000)
        }
      })
    },
  }

---