小程序·云开发 - 仿瑞幸咖啡小程序（二） - 从入门到辞职

上次文章提到，我们可以利用按钮增减选项。那么当我们增减选项之后，就需要输入选项内容了。

这时候，我们需要绑定input监听。

<input class="input_type" bindinput="get_other_eat" placeholder="请输入奶油" id="other-eat-{{index}}"></input>

bindinput=“get_other_eat”。绑定之后，我们来实现这个方法：

get_other_eat: function (e) {
    let index = parseInt(e.currentTarget.id.replace("other-eat-", ""))
    let other_eat = e.detail.value
    let other_eat_all = this.data.other_eat_all
    other_eat_all.other_eats[index].other_eat = other_eat
    this.setData({
      other_eat_all: other_eat_all
    })
  },

这样就可以将输入的文字获取到了。

有了基本属性和选项属性，接下来，我们就需要添加图片了。调用云开发之后，上传图片不再是一件困难的事，首先，我们定义一个button

<button style="margin:5vw auto;" type="default" bindtap="upload_main">上传主图</button>

然后，我们需要对upload_main这个方法进行实现：

upload_main:function(e){
    var that = this
    wx.chooseImage({
      count: 1,
      sizeType: ['compressed'],
      sourceType: ['album', 'camera'],
      success: function (res) {

          const filePath = res.tempFilePaths[0]

          // 上传图片
        const cloudPath = timestamp + '-' + app.globalData.openid + '.png'

          that.setData({
            main_img:filePath,
            main_path:cloudPath
          })
        

      },
      fail: e => {
        console.error(e)
      }
    })
  },

在这里，我们选择好图片之后，不用急着上传，先保存好图片的路径。其中，上传云端时我们给图片定义名字的时候，为了避免重复，才用的是时间戳+用户openid的方法进行命名。这样就可以肯定不会有重复名字的图片出现。

当然，外链图也一样设置之后，我们就可以开始上传数据库了。

点击提交按钮，我们开始提交商品详情信息。

var that = this
    console.log(that.data)
    wx.showLoading({
      title: '上传中...',
      mask: true,
    });
    if(that.data.main_img.length>0){
      var cloudPath = that.data.main_path
      var filePath = that.data.main_img
      wx.cloud.uploadFile({
        cloudPath,
        filePath,
        success: res => {
          console.log('[上传文件] 成功：', res)
          

          that.setData({
            spMainFileID: res.fileID
          })
          var cloudPath2 = that.data.other_path
          var filePath2 = that.data.other_img
          wx.cloud.uploadFile({
            cloudPath:cloudPath2,
            filePath:filePath2,
            success: res => {
              console.log('[上传文件] 成功：', res)

              that.setData({
                spOtherFileID: res.fileID
              })
              const db = wx.cloud.database()
              // 查询当前用户所有的 counters
              db.collection('company_sp').add({
                data: {
                  spName: that.data.spName,
                  spPrice: that.data.spPrice,
                  spDetail: that.data.spDetail,
                  spUrl: that.data.spUrl,
                  spClass: that.data.spClass,
                  sweet_all: that.data.sweet_all,
                  temp_all: that.data.temp_all,
                  other_eat_all: that.data.other_eat_all,
                  spMainImg:that.data.spMainFileID,
                  spOtherFileID:that.data.spOtherFileID,
                },
                success: res => {
                  // 在返回结果中会包含新创建的记录的 _id
                  wx.hideLoading()
                  wx.showModal({
                    title: '恭喜您',
                    content: '信息提交成功',
                    showCancel: false,
                    success: function (res) {
                      if (res.confirm) {
                        console.log('点击确认回调')
                      }
                    }
                  })
                  console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)
                },
                fail: err => {
                  wx.hideLoading()
                  wx.showToast({
                    icon: 'none',
                    title: '新增记录失败'
                  })
                  console.error('[数据库] [新增记录] 失败：', err)
                }
              })
            },
            fail: e => {
              console.error('[上传文件] 失败：', e)
              wx.showToast({
                icon: 'none',
                title: '上传失败',
              })
            },
            complete: () => {
              wx.hideLoading()
            }
          })

          // wx.navigateTo({
          //   url: '../storageConsole/storageConsole'
          // })
        },
        fail: e => {
          console.error('[上传文件] 失败：', e)
          wx.showToast({
            icon: 'none',
            title: '上传失败',
          })
        },
        complete: () => {
          wx.hideLoading()
        }
      })
    }else{
      console.log("请添加主图")
    }
    
  },

首先，我们先上传主图片：

      var cloudPath = that.data.main_path
      var filePath = that.data.main_img
      wx.cloud.uploadFile({
        cloudPath,
        filePath,
        success: res => {

        },
        fail: e => {
          console.error('[上传文件] 失败：', e)
          wx.showToast({
            icon: 'none',
            title: '上传失败',
          })
        },
        complete: () => {
          wx.hideLoading()
        }
      })

如果成功的话，我们需要在添加外链图，当然外链图也可以为空。方法同上传主图片一样。上传完图片之后，我们开始将信息汇总传入数据库。

const db = wx.cloud.database()
              // 查询当前用户所有的 counters
              db.collection('company_sp').add({
                data: {
                  spName: that.data.spName,
                  spPrice: that.data.spPrice,
                  spDetail: that.data.spDetail,
                  spUrl: that.data.spUrl,
                  spClass: that.data.spClass,
                  sweet_all: that.data.sweet_all,
                  temp_all: that.data.temp_all,
                  other_eat_all: that.data.other_eat_all,
                  spMainImg:that.data.spMainFileID,
                  spOtherFileID:that.data.spOtherFileID,
                },
                success: res => {
                  // 在返回结果中会包含新创建的记录的 _id
                  wx.hideLoading()
                  wx.showModal({
                    title: '恭喜您',
                    content: '信息提交成功',
                    showCancel: false,
                    success: function (res) {
                      if (res.confirm) {
                        console.log('点击确认回调')
                      }
                    }
                  })
                  console.log('[数据库] [新增记录] 成功，记录 _id: ', res._id)
                },
                fail: err => {
                  wx.hideLoading()
                  wx.showToast({
                    icon: 'none',
                    title: '新增记录失败'
                  })
                  console.error('[数据库] [新增记录] 失败：', err)
                }
              })

其中，主图片和外链图的连接我们需要用回调回来的图片id来保存，因为这些图片id可以在之后被我们调用。

至此，上传商品详情的页面就完成了。