Taro实现购物车流程

//这个是购物车使用的封装的request方法
import Taro from '@tarojs/taro'
const baseUrl = 'http://xxx'

export function request(options) {
  const { url, data, method, header } = options
  Taro.showLoading({
    title: '加载中'
  })
  return new Promise((resolve, reject) => {
    Taro.request({
      url: baseUrl + url,
      data: data || {},
      method: method || 'GET',
      header: header || {},
      success: res => {
        resolve(res)
      },
      fail: err => {
        reject(err)
      },
      complete: () => {
        Taro.hideLoading()
      }
    })
  })
}


import Taro, { Component } from '@tarojs/taro'
import { View, Checkbox, Text, Image, CheckboxGroup } from '@tarojs/components'
import { request } from './../../utils'
import './index.scss'
class Index extends Component {
  constructor(props) {
    super(props)
    this.state = {
      cartlist: [],
      totalNum: 0,
      totalPrice: 0,
      allSelected: true
    }
  }
  componentDidShow() {
    try {
      // 本地判断是否登陆
      let userid = Taro.getStorageSync('userid')
      let token = Taro.getStorageSync('token')
      if (userid && token) {
        request({
          url: '/cart',
          data: {
            userid,
            token
          }
        }).then(res => {
          if (res.data.code === '10119') {
            Taro.showToast({
              title: '还未登陆，请先登陆',
              icon: 'none'
            })
            Taro.navigateTo({
              url: '/pages/login/index'
            })
          } else if (res.data.code === '10112') {
            Taro.showToast({
              title: '购物车空空如也，请加购',
              icon: 'none'
            })
            this.setState({
              isTrue: true
            })
          } else {
            res.data.data.map(item => {
              item.flag = true
            })
            this.setState({
              isTrue: false,
              cartlist: res.data.data
            }, () => {
              this.count()
            })

          }
        })
      } else {
        Taro.showToast({
          title: '还未登陆，请先登陆',
          icon: 'none'
        })
        Taro.navigateTo({
          url: '/pages/login/index'
        })
      }
    } catch (error) {

    }
  }
  add = (item, index) => {
    let num = item.num + 1
    let cartid = item.cartid
    try {
      this.update_cart(num, cartid, index)
    } catch (error) {

    }
  }
  cut = (item, index) => {
    if (item.num === 1) return
    let num = item.num - 1
    let cartid = item.cartid
    try {
      this.update_cart(num, cartid, index)
    } catch (error) {

    }
  }
  update_cart = (num, cartid, index) => {
    let token = Taro.getStorageSync('token')
    request({
      url: '/cart/update',
      data: {
        num,
        cartid,
        token
      }
    }).then(res => {
      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()
        })
      }
    })
  }
  count = () => {
    let num = 0
    let price = 0
    this.state.cartlist.map(item => {
      item.flag ? num += item.num : num += 0
      item.flag ? price += item.num * item.price : price += 0
    })

    this.setState({
      totalNum: num,
      totalPrice: price
    })
  }
  tobuy = () => {
    let list = this.state.cartlist.filter(item => item.flag)
    try {
      let userid = Taro.getStorageSync('userid')
      let token = Taro.getStorageSync('token')
      if (userid && token) {
        request({
          url: '/order/add',
          method: 'POST',
          data: {
            userid,
            token,
            list: JSON.stringify(list)
          },
          header: { 'content-type': "application/json; charset=utf-8" }
        }).then(res => {
          if (res.data.code === '10119') {
            Taro.showToast({
              title: '还未登陆，请先登陆',
              icon: 'none'
            })
            Taro.navigateTo({
              url: '/pages/login/index'
            })
          } else {
            Taro.navigateTo({
              url: '/pages/order/index?orderid=' + res.data.data
            })
          }
        })
      }
    } catch (error) {

    }

  }
  render() {
    let { cartlist, totalPrice, allSelected } = this.state
    return (
      <View className='cart'>
        <View className='cartlist'>
        {
          cartlist.length !== 0 ? cartlist.map((item, index) => {
            return (
              <View
                className='cart_good_con'
                key={item.proid}>
                <CheckboxGroup
                  className='checkbox'
                  onChange={
                    () => {
                      cartlist[index].flag = !item.flag
                      allSelected = cartlist.every(it => it.flag)
                      this.setState({
                        cartlist, allSelected
                      }, () => {
                        this.count()
                      })
                    }
                  }>
                  <Checkbox checked={item.flag} />
                </CheckboxGroup>
                <View className='img_con'>
                  <Image
                    className='img'
                    src={item.proimg}></Image>
                </View>
                <View className='text_con'>
                  <View className='title'>
                    {item.proname}
                  </View>
                  <View className='price'>
                    ￥{item.price}
                  </View>
                  <View className='num'>
                    <Text className='num_change_con'
                      onClick={this.add.bind(null, item, index)}
                    >+</Text>
                    {item.num}
                    <Text className='num_change_con'
                      onClick={this.cut.bind(null, item, index)}
                    >-</Text>
                  </View>
                </View>
              </View>
            )
          }) : <View className='cart_good_con'>空空如也</View>
        }
        </View>
       
        <View className='tobuy_con'>
          <CheckboxGroup
            className='allcheckbox'
            onChange={
              () => {
                allSelected = !this.state.allSelected
                let list = cartlist.map(it => {
                  it.flag = !this.state.allSelected
                  return it
                })
                this.setState({
                  cartlist: list, allSelected
                }, () => {
                  this.count()
                })
              }
            }>
            <Checkbox
              checked={allSelected}
            > 全选</Checkbox>
          </CheckboxGroup>
          <Text className='total'>总价：<Text>￥{totalPrice}</Text></Text>
          <Text className='tobuy'
            onClick={this.tobuy}
          >立即购买</Text>
        </View>
      </View>
    )
  }
}

export default Index