云开发（微信-小程序）笔记（十五）---- 收藏，点赞（下）

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: cloud.DYNAMIC_CURRENT_ENV
})
// 云函数入口函数
exports.main = async (event, context) => {
  if (event.action == 'shouchang'){
  return await cloud.database().collection('Goods').doc(event.id)
  .update({
    data: {
      shouchang: event.shouchang
    }
  })
  .then(res =>{
    console.log('收藏状态成功',res)
    return res
  })
  .catch( res =>{
    console.log('收藏状态失败',res)
    return res
  })
}else{
  return await cloud.database().collection('Goods').doc(event.id)
  .update({
    data: {
      dianzan: event.dianzan
    }
  })
  .then(res =>{
    console.log('点赞状态成功',res)
    return res
  })
  .catch( res =>{
    console.log('点赞状态失败',res)
    return res
  })
}
}

// pages/tubiao/tubiao.js
let ID = ''
let shouchang = false
let dianzan = false
Page({
  data: {
    shouchangUrl: "../../imgs/chang-no.png ",
    dianzanUrl: "../../imgs/zan-no.png",
  },
  onLoad(res){
    console.log(res)
    ID = 'b69f67c06268c88b005446ac66f0ad09'
    wx.cloud.database().collection('Goods')
    .doc(ID)
    .get()
    .then(res => {
      console.log('详情页成功',res)
      shouchang=res.data.shouchang
      dianzan=res.data.dianzan
      this.setData({
        detail: res.data,
        shouchangUrl:shouchang?"../../imgs/chang-yes.png":"../../imgs/chang-no.png",
        dianzanUrl:dianzan?"../../imgs/zan-yes.png":"../../imgs/zan-no.png"
      })
    })
    .catch(res =>{
      console.log('请求数据失败',res)
    })
  },
    //收藏（三目运算符）
    clickMe1(){
      this.setData({
        shouchangUrl:shouchang?"../../imgs/chang-no.png":"../../imgs/chang-yes.png"
      })
      shouchang = !shouchang //取反（收藏与未收藏之间的切换）
       //调用云函数
       wx.cloud.callFunction({
         name: "tubiao", //云函数名
         data: {
           action:"shouchang",
           id: ID,
           shouchang: shouchang
         }
       }).then(res => {
         console.log('收藏成功')
       }).catch(res => {
         console.log('收藏失败')
       })
    },
    //收藏（三目运算符）
    clickMe2(){
      this.setData({
        dianzanUrl:dianzan?"../../imgs/zan-no.png":"../../imgs/zan-yes.png"
      })
      dianzan = !dianzan //取反（点赞与未点赞之间的切换）
       //调用云函数
       wx.cloud.callFunction({
        name: "tubiao",
        data: {
          action:"dianzan",
          id: ID,
          dianzan: dianzan
        }
      }).then(res => {
        console.log('点赞成功')
      }).catch(res => {
        console.log('点赞失败')
      })
    }, 
})

<!--pages/tubiao/tubiao.wxml-->
<view>
<image class = "image" src = "{{shouchangUrl}}" bindtap="clickMe1"></image>
<image class = "image" src = "{{dianzanUrl}}" bindtap="clickMe2"></image>
</view>
• 1
• 2
• 3
• 4
• 5

/* pages/tubiao/tubiao.wxss */
.image{
  width: 120rpx;
  height: 120rpx;
}