小程序入门27:模拟购买(下)

52 阅读1分钟

写在前面

本篇文章是微信小程序开发入门的第二十七篇,模拟购买

上篇已经做完了模拟购买的数据库集合“fruit-order”的创建和云函数的开发,这篇文章介绍如何在小程序端调用云函数

小程序端

首先在index.wxml文件,新增购买按钮,同时在index.wxss文件下新增购买按钮的样式,代码如下:

点击事件使用catchtap可以阻止事件冒泡,这样点击购买按钮页面就不会跳转到详情页面了

同时使用data-fruitId="{{item._id}}"传递一个参数fruitId,等会儿调用云函数的时候要传过去

    <view class="fruit_price">
      <text class="oriPrice"><text class="qian"></text>{{item.oriPrice}}</text>
      <text class="curPrice"><text class="qian"></text>{{item.curPrice}}</text>
      <text class="vipPrice"><text class="qian"></text>{{item.vipPrice}} V</text>
      <text class="buy_btn" catchtap="onBuy" data-fruitId="{{item._id}}">购买</text>
    </view>

// index.wxss
.buy_btn {
  font-size: 28rpx;
  margin-left: 10rpx;
  background-color: rgba(255, 153, 0, 1);
  color: #fff;
  padding: 0 10rpx;
}

此时页面效果如下:

image.png

接下来我们编写onBuy方法,打开文件index.js,新增onBuy方法,新增代码如下:

在onBuy方法调用云函数buy,num参数我们固定传1,fruitId传上面传过来的参数(通过e.currentTarget.dataset获取),userId先不传,因为用户这一块还没有做

  onBuy(e) {
    wx.cloud.callFunction({
        // 云函数名称
        name: 'fruit-order',
        // 传给云函数的参数
        data: {
          type: 'buy',
          num: 1,
          fruitId: e.currentTarget.dataset.fruitid,
          userId: ''
        },
      })
      .then(res => {
        const {
          success,
          msg
        } = res.result
        if (success) {
          wx.showToast({
            title: msg,
            icon: 'success',
            duration: 1500
          })
        } else {
          wx.showToast({
            title: msg,
            icon: 'error',
            duration: 1500
          })
        }
      })
      .catch(err => {})
  },

此时我们点击页面上的“购买”按钮后,就会出现提示:

image.png

打开云开发控制器,我们可以看到数据库集合“fruit-order”多了一条记录,同时查看刚刚点击“购买的”水果的记录,可以看到记录的saleNum的值从0变成了1

image.png

写在最后

以上就是模拟购买(下)的全部代码