《逻辑005：实现点赞-收藏-复制》

描述：在开发小程序过程中，发现一些不错的案例，平时使用也比较多，稍微总结了下经验，以下内容可以直接复制使用，希望对大家有所帮助，废话不多说直接上干货！

一、实现点赞-收藏-复制

要做一个情绪类的文案的需求（积极情绪类：喜悦/快乐、幸福、爱、希望、感激、满足）

（1）页面1-主页面：这是一个展示不同类型的情绪，

（2）页面2-详情页面：点击其中一个“情绪”选项之后，会跳转到详情页面，然后页面展示一条又一条的文案（包括发表文案人的头像、实际、文案内容、点赞数、点赞按钮、复制按钮、收藏按钮、）

1、wxml代码实现如下

// 在 wxml 文件中

<!-- 主页面 -->
<view>
  <navigator url="/pages/detail/detail?emotion=joy">喜悦</navigator>
  <navigator url="/pages/detail/detail?emotion=happiness">幸福</navigator>
  <navigator url="/pages/detail/detail?emotion=love">爱</navigator>
  <navigator url="/pages/detail/detail?emotion=hope">希望</navigator>
  <navigator url="/pages/detail/detail?emotion=gratitude">感激</navigator>
  <navigator url="/pages/detail/detail?emotion=satisfaction">满足</navigator>
</view>


<!-- 详情页面 -->
<view>
  <block wx:for="{{emotions}}" wx:key="index">
    <view>{{item.authorAvatar}}</view>
    <view>{{item.date}}</view>
    <view>{{item.content}}</view>
    <view>{{item.likes}} Likes</view>
    <button bindtap="copyText">复制</button>
    <button bindtap="collect">收藏</button>
  </block>
</view>

2、js代码实现如下

// 在 js 文件中

// 主页面
Page({
  data: {
    emotions: [
      { emotion: 'joy', authorAvatar: 'url', date: '2024-01-17', content: '今天心情真好', likes: 0 },
      // 其他情绪的数据
    ]
  }
});

// 详情页面
Page({
  data: {
    emotions: []
  },
  onLoad: function (options) {
    // 从 options 中获取情绪类型
    const emotion = options.emotion;
    // 调用接口或其他数据源获取对应情绪的文案数据
    // 假设这里是从服务器获取的数据
    this.setData({
      emotions: /* 从服务器获取的数据 */
    });
  },

  copyText: function (event) {
    // 复制文案内容
    const index = event.currentTarget.dataset.index; // 获取点击的索引
    const emotions = this.data.emotions;
    const textToCopy = emotions[index].content;
    wx.setClipboardData({
      data: textToCopy,
      success: function () {
        wx.showToast({
          title: '复制成功',
          icon: 'success',
          duration: 1000
        });
      }
    });
  },
  collect: function (event) {
    // 收藏文案
    const index = event.currentTarget.dataset.index; // 获取点击的索引
    const emotions = this.data.emotions;
    // 假设这里是调用收藏接口或其他逻辑，将文案标记为已收藏
    // TODO代码
    // 这里只是简单的更新数据中的标记
    emotions[index].collected = true;
    this.setData({
      emotions: emotions
    });
    wx.showToast({
      title: '收藏成功',
      icon: 'success',
      duration: 1000
    });
  },
  like: function (event) {
    // 点赞（喜欢一次，点赞数加一）
    const index = event.currentTarget.dataset.index; // 获取点击的索引
    const emotions = this.data.emotions;
    emotions[index].likes += 1; // 点赞数加1
    this.setData({
      emotions: emotions
    });
  }
});