1 设计数据源

我们需要设计一个数据源来记录用户的投票，如何限制用户只能投一票呢？我们可以创建一个数组字段，里边放置用户的openid，这样用户在投票的时候我们就可以通过当前用户的openid和数据源存储的进行比较，来决定用户是否可以投票

在这里插入图片描述
点击数据源的管理数据，我们录入一下测试数据

2 创建自定义应用

登录控制台，点击新建自定义应用，创建我们的小程序
在这里插入图片描述

3 页面开发

我们投票的话需要先使用数据列表把我们的投票内容展示出来，往页面添加数据列表组件，然后选择我们创建的数据源
在这里插入图片描述
模板的话需要选择图文列表，默认是使用的向右的箭头图标，我们需要改成心形图标，并且需要显示一下点赞的数量

我们这里的逻辑是如果未点赞就显示空心的图标，如果是已点赞了就显示实心的图标。

如果要控制组件是一种互斥的关系，我们可以使用条件展示来判断。

空心图标的条件展示我们可以绑定如下的表达式
在这里插入图片描述

$w.item_listView1.dzjl==undefined||$w.item_listView1.dzjl.length==0||!$w.item_listView1.dzjl.includes($page.dataset.state.openid)

实心图标我们可以绑定如下的表达式
在这里插入图片描述

$w.item_listView1.dzjl.includes($page.dataset.state.openid)

在es6中，数组新增了一个includes方法，如果存在就返回true，不存在就返回false，我们正是用这个api来控制

条件展示设置完毕后，我们就要给不同的图标设置不同的事件。空心图标我们设置的事件使用自定义方法实现

export default async function ({ event, data }) {

  const toupiaoid = data.target._id
  const openid =$page.dataset.state.openid
  let dzs = data.target.dzs
  let dzjl = data.target.dzjl
  if(dzjl == undefined){
    dzjl = []
  }
  dzjl.push(openid)

   await app.cloud.callModel({
      name: 'tp_blzczle',
      methodName: 'wedaUpdate',
      params: {
        _id: toupiaoid,
        dzs: dzs + 1,
        dzjl:dzjl
      }
    })
 

}