小程序云开发——商品和商品价格的添加，修改，删除

添加商品和商品价格

1.到demo1-listde的demo1-listde.wxml添加输入框和添加按钮

商品名
<input bindinput="getName"></input>
商品价格
<input bindinput="getPrice"></input><!-- 输入框 -->
<button bindtap="addGood" type="primary">添加商品</button><!-- 添加按钮 -->

• 到demo1-listde的demo1-listde.wxss添加输入框和添加按钮的样式

input{
   
  border: 1px solid gray;/* 1像素，实心，灰色 */
  width: 200px;
}

• 保存运行则得到
  

2.到demo1-listde的demo1-listde.js

• 在页面顶端设置全局模式

let name = ''
let price = ''

• 获取用户输入的商品名和价格

  getName(n) {
   
     name= n.detail.value
  },
  getPrice(n) {
   
     price= n.detail.value
  },

• 把用户添加的商品添加到数据库

addGood() {
   
    console.log('商品名', name)
    console.log('商品价格', price)

• 为了避免代码重复
  把下图
  改为

 getList(){
   
    wx.cloud.database().collection("goods")
      .get()
      .then(res=> {
   
        console.log('列表请求成功',res)
        this.setData({
   //把请求的数据赋值给list
          list:res.data
        })
      })
      .catch(res=> {
   
        console.log('列表请求失败',err)
      })

• 为添加商品制作一个成功或失败提示弹窗

if (name == '') {
   
      wx.showToast({
   //提示弹窗
        icon:'none',
        title: '商品名为空',
      })
    } else if (price == '') {
   
      wx.showToast({
   //提示弹窗
        icon:'none',
        title: '价格为空',
      })
    } else{
     
      console.log('请添加商品')
      wx.cloud.database().collection('goods')
        .add({
   
          data:{
   
            name: name,
            price: price
          }
        })
        .then(res =>{
   
          console.log('添加成功',res)
          this.getList()
        })
        .catch(res =>{
   
          console.log('添加失败',err)
        })
    }

• 保存运行即可在小程序页面添加商品和价格

更改商品价格

1，到demo1.1-details的demo1.1-details.wxml添加输入框和添加按钮