逆战----用taro书写购物车页面功能

import Taro, { Component } from '@tarojs/taro'
import { View, Image, Checkbox, CheckboxGroup } from '@tarojs/components'
import { request } from './../../utils'
import './index.scss'
class Index extends Component {
  config = {//配置文件
    navigationBarTitleText: '购物车',
    enablePullDownRefresh: true,
    backgroundColor: '#efefef'
  }

  //初始化数据
  constructor(props) {
    super(props)
    this.state = {
      cartlist: [],//购物车商品列表
      isTrue: true,//控制页面的改变---有商品时和无商品时的变化
      totalNum: 0,//总数
      totalPrice: 0,//总价
      allSelected: true//全选/单选
    }
  }

  //清求购物车数据
  componentDidShow() {
    try {
      //获取本地的token和userid值
      let token = Taro.getStorageSync('token')
      let userid = Taro.getStorageSync('userid')

      //通过token和userid来判断是否需要登陆
      if (userid && token) {
        //存在，请求数据
        request({
          url: '/cart',
          data: {
            userid,
            token
          }
        }).then(res => {
          // console.log(res)
          let { code } = res.data
          //通过后端返回的code来判断状态
          if (code === '10119') {
            Taro.showToast({
              title: '您还没登陆，请登陆',
              icon: 'none'
            })
            Taro.navigateTo({
              url: '/pages/login/index'
            })
          } else if (code === '10112') {
            Taro.showToast({
              title: '购物车空空如也，请购买',
              icon: 'none'
            })
            this.setState({
              isTrue: true
            })
          } else {
            //在商品列表中的每个商品添加一个自定义属性，来控制商品是否选中
            res.data.data.map(item => {
              item.f = true
            })
            //修改数据
            this.setState({
              isTrue: false,
              cartlist: res.data.data
            }, () => {
              this.count()//计算总价
            })
          }

        })
      } else {
        //不存在，重新登陆
        Taro.showToast({//提示信息
          title: '您还未登陆，请先登录',
          icon: 'none'
        })
        Taro.navigateTo({//跳转到登陆页
          url: '/pages/login/index'
        })
      }
    } catch (err) {
      console.log(err)
    }
  }

  //计算总数和总价
  count() {
    let num = 0
    let price = 0
    this.state.cartlist.map(item => {
      item.f ? num += item.num : num += 0
      item.f ? price += item.num * item.price : price += 0
    })
    this.setState({
      totalNum: num,
      totalPrice: price
    })
  }
  render() {
   Cannot read property 'map' of undefined ----报错解决方案
    const { cartlist = [] } = this.state
    return (
      <View className="view">
        {
          //三目判断状态
          this.state.isTrue ? <View>
            购物车空空如也，请购买
          </View> : <View>
              {/* 全选 */}
              <CheckboxGroup onChange={
                (event) => {
                //获取value的length，length===1为true，反之
                  let len = event.detail.value.length
                  let f = len === 1 ? true : false
                  let list = this.state.cartlist
                 //在通过全选按钮上的true或false来改变渲染出来的多选按钮的选中状态
                  list.map(item => {
                    f ? item.f = true : item.f = false
                  })
                  this.setState({
                    allSelected: f,
                    cartlist: list
                  }, () => {
                    this.count()//重新计算
                  })
                }
              }>
                <Checkbox checked={this.state.allSelected} />全选
            </CheckboxGroup>
              {
                //渲染数据
                cartlist.map((item, index) => {
                  return (
                    <View className="proitem" key={item.proid}>
                      {/* 单选 */}
                      <CheckboxGroup onChange={
                        (event) => {
                          let len = event.detail.value.length
                          let f = len === 1 ? true : false
                          let list = this.state.cartlist
                          if (f === true) {
                            list[index].f = true
                            let test = list.every(val => {
                              return val.f === true
                            })
                            if (test) {
                              this.setState({
                                allSelected: true,
                                cartlist: list
                              }, () => {
                                this.count()//重新计算
                              })
                            } else {
                              this.setState({
                                allSelected: false,
                                cartlist: list
                              }, () => {
                                this.count()
                              })
                            }
                          } else {
                            list[index].f = false
                            this.setState({
                              allSelected: false,
                              cartlist: list
                            }, () => {
                              this.count()
                            })
                          }
                        }
                      }>
                        <Checkbox checked={item.f} />
                      </CheckboxGroup>
                      <View className="itemimg">
                        <Image className="img" src={item.proimg} />
                      </View>
                      <View className="iteminfo">
                        <View className="title">{item.proname}</View>
                        <View className="title">￥{item.price}</View>
                        <View>
                          {/* 减 */}
                          <Text className='sub'
                            onClick={
                              () => {
                                let num = item.num > 1 ? item.num - 1 : 1
                                let cartid = item.cartid
                                if (num === item.num) {
                                  Taro.showToast({
                                    title: '只剩下一个了',
                                    icon: 'none'
                                  })
                                  return
                                }
                                //把数据存入数据库中，并修改视图
                                try {
                                  let token = Taro.getStorageSync('token')
                                  request({
                                    url: '/cart/update',
                                    data: {
                                      num,
                                      cartid,
                                      token
                                    }
                                  }).then(res => {
                                    console.log(res.data)
                                    if (res.data.code === '10119') {
                                      Taro.showToast({
                                        title: '还未登陆，请先登陆',
                                        icon: 'none'
                                      })
                                      Taro.navigateTo({
                                        url: '/pages/login/index'
                                      })
                                    } else {
                                      Taro.showToast({
                                        title: '数量减少成功',
                                        icon: 'none'
                                      })
                                      //获取数据，处理数据，修改数据
                                      let list = this.state.cartlist
                                      list[index].num = num
                                      this.setState({
                                        cartlist: list
                                      }, () => {
                                        this.count()
                                      })
                                    }
                                  })
                                } catch (err) {
                                  console.log(err)
                                }
                              }
                            }>-</Text>
                          <Text className='num'>{item.num}</Text>
                          {/* 加 */}
                          <Text className='sub'
                            onClick={
                              () => {
                                let num = item.num + 1
                                let cartid = item.cartid
                                //把数据存入数据库中，并修改视图
                                try {
                                  let token = Taro.getStorageSync('token')
                                  request({
                                    url: '/cart/update',
                                    data: {
                                      num,
                                      cartid,
                                      token
                                    }
                                  }).then(res => {
                                    console.log(res.data)
                                    if (res.data.code === '10119') {
                                      Taro.showToast({
                                        title: '还未登陆，请先登陆',
                                        icon: 'none'
                                      })
                                      Taro.navigateTo({
                                        url: '/pages/login/index'
                                      })
                                    } else {
                                      Taro.showToast({
                                        title: '数量增加成功',
                                        icon: 'none'
                                      })
                                      //获取数据，处理数据，修改数据
                                      let list = this.state.cartlist
                                      list[index].num = num
                                      this.setState({
                                        cartlist: list
                                      }, () => {
                                        this.count()
                                      })
                                    }
                                  })
                                } catch (err) {
                                  console.log(err)
                                }
                              }
                            }
                          >+</Text>
                        </View>
                      </View>
                      {/* 删除 */}
                      <View
                        onClick={() => {
                          let token = Taro.getStorageSync('token')
                          request({
                            url: '/cart/delete',
                            data: {
                              token,
                              cart: item.cartid//购物车的id
                            }
                          }).then(res => {
                            if (res.data.code === '10019') {
                              Taro.showToast({
                                title: '请先登录'
                              })
                              uni.navigateTo({
                                url: '/pages/login/login'
                              })
                            } else {
                              Taro.showToast({
                                title: '修改数量成功',
                                icon: 'none'
                              })
                              //删除一条数据
                              this.state.cartlist.splice(index, 1)
                              this.setState({
                                cartlist
                              }, () => {
                                this.count()
                              })
                              // 如果没有数据则显示去购物车购买的信息
                              if (this.state.cartlist.length === 0) {
                                this.isTrue = true
                              } else {
                                this.isTrue = false
                              }
                              console.log(this.state.cartlist)
                            }
                          })
                        }}
                      >删除</View>
                    </View>
                  )
                })
              }
              <View>总数：{this.state.totalNum}</View>
              <View>总价：{this.state.totalPrice}</View>
            </View>
        }
      </View>
    )
  }
}
export default Index

在删除功能上有点小问题。。。。