[移动开发]小程序云开发入门——增删查改综合案例源码展示（4）

1.demo1.json

{
  "usingComponents": {},
  "navigationBarTitleText": "商品列表页"
}

2.demo1.js

//定义全局变量
let goods_name=''
let goods_price=''
Page({
    data:{
        list:[]
    },
    onLoad(){
        this.getList()
    },
    //获取商品列表
    getList(){
        wx.cloud.database().collection('goods')
        .get()
        .then(res=>{
            console.log('商品列表请求成功',res)
            this.setData({
                list:res.data
            })
        })
        .catch(err=>{
            console.error('商品列表请求失败',err)
        })
    },
    //跳转到商品详情页
    goDetail(event){
        //获取ID
        console.log('点击了商品跳转详情的id',event.currentTarget.dataset.id)
        //跳转页面并携带id
        wx.navigateTo({
          url: '/pages/demo1-1/demo1-1?id=' + event.currentTarget.dataset.id,
          //注意，页面前面还有一个斜杠
        })
    },
    //获取用户输入的商品名
    getName(e){ 
        goods_name=e.detail.value
        //console.log(e)
    },
    //获取用户输入的商品价格
    getPrice(e){
        goods_price=e.detail.value
        //console.log(e)
    },
    //添加商品到数据库
    addGood(){
         console.log('商品名',goods_name)
         console.log('商品价格',goods_price)
         if(goods_name==''){
            console.log('商品名为空了')
            wx.showToast({
                icon:'error',
                title: '商品名为空啦',
            })
         }else if(goods_price==''){
            console.log('商品价格为空了')
            wx.showToast({
                icon:'error',
                title: '商品价格为空啦',
            })
         }else{
            //添加操作
            console.log('可以进行添加操作啦')
            wx.cloud.database().collection('goods')
            .add({
                data:{
                     name:goods_name,
                    price:goods_price
                }
            })
            .then(res=>{
                console.log('添加成功',res)
                this.getList()
            })
            .catch(err=>{
                console.log('添加失败',err)
            })
         }
    }
})

3.demo1.wxml

输入商品名：
<input bindinput="getName"></input>
输入商品价格：
<input bindinput="getPrice"></input>
<button bindtap="addGood" type="primary">添加商品</button>
<!--遍历列表，拿到list里面的所有数据-->
<view wx:for="{{list}}">
    <!--增加点击事件，跳转详情页-->
    <view bindtap="goDetail" data-id="{{item._id}}">商品名： {{item.name}} , 价格： {{item.price}}</view>
</view>

4.demo1.wxss

input{
    border: 1px solid gray;
}

5.demo1-1.json

{
  "usingComponents": {},
  "navigationBarTitleText": "商品详情页"
}

6.demo1-1.js

let newprice = ''
let id = ''
Page({
    data: {
        good: {}
    },
    onLoad(options) {
        console.log('列表携带的值', options)
        id = options.id
        this.getDetail()
    },
    //获取商品数据
    getDetail() {
        //查询单条数据
        wx.cloud.database().collection("goods")
            .doc(id)
            .get()
            .then(res => {
                console.log("商品详情页请求成功", res)
                this.setData({
                    good: res.data
                })
            })
            .catch(err => {
                console.error("商品详情页请求失败", err)
            })
    },

    //获取用户输入的新价格
    getnewPrice(e) {
        newprice = e.detail.value
    },
    //修改商品价格
    update() {
        console.log('新的商品价格', newprice)
        if (newprice == '') {
            wx.showToast({
                icon: 'error',
                title: '您没有输入商品价格',
            })
        } else {
            wx.cloud.database().collection('goods')
                .doc(id)
                .update({
                    data: {
                        price: newprice
                    }
                })
                .then(res => {
                    console.log('更新成功', res)
                    this.getDetail()
                })
                .catch(err => {
                    console.log('更新失败', res)
                })
        }
    },
    //删除操作
    delete() {
        console.log('点击了删除')
        //弹窗提示
        wx.showModal({
            title: '是否确定删除',
            content: '您是否真的要删除，删除后就找不回来了',
            success(res) {
                if (res.confirm == true) {
                    console.log('用户点击了确定')
                    //删除操作
                    wx.cloud.database().collection('goods')
                        .doc(id)
                        .remove()
                        .then(res => {
                            console.log('删除成功',res)
                            //回到商品首页
                            wx.navigateTo({
                              url: '/pages/demo1/demo1',
                            })
                        })
                        .catch(err => {
                            console.log('删除失败',err)
                        })
                } else if (res.cancel == true) {
                    console.log('用户点击了取消')
                }
            }
        })
    }
})

7.demo1-1.wxml

<view>商品名: {{good.name}} , 价格{{good.price}}</view>
更新商品价格
<input bindinput="getnewPrice"></input>
<button bindtap="update" type="primary">更新价格</button>
<button bindtap="delete">删除当前商品</button>

8.demo1-1.wxss

input{
    border:1px solid gray;
}