react商品详情页、购物车逻辑、首页上拉加载、下滑刷新

1、回顾

2、点击列表进入产品的详情页面

• 设计向页面的布局结构,设计详情页面，入口导入布局文件

// index.js 入口文件
import Detail from '@/Detail';
<Route path="/d">
  <Detail />
</Route>

// Detail.js 布局文件
import React from 'react';
// 一种布局有很多的页面 --- Switch
import { Switch, Route } from 'react-router-dom';
import Detail from '@/views/detail';
// 布局找页面
function App() {
  return (
    <Switch>
      <Route path="/d/detail" component = { Detail } />
    </Switch>
  );
}

export default App;

// views/detail/index.jsx
import React, { Component } from 'react';

class Detail extends Component {

  render () {
    return (
      <div className="container">
        <div className="box">
          <header className="header">详情头部</header>
          <div className="content">
            详情内容
          </div>
        </div>    
        <footer className="footer">
          详情底部
        </footer>
      </div>
    )
  }
}

export default Detail

2.1 声明式跳转至详情页面

修改路由，添加参数 src/Detail.js 布局文件

<Switch>
  <Route path="/d/detail/:proid" component = { Detail } />
</Switch>

列表组件点击跳转 --- Link ---- /components/Prolist/index.jsx

<Link to={ '/d/detail/' + item.proid } className="proitem" key = { item.proid }>
  <div className="proimg">
    <img src={ item.proimg } alt="" />
  </div>
  <div className="proinfo">
    { item.proname }
  </div>
</Link>

• 设计请求详情的接口 utils/api.js

/**
 * 获取详情页面的数据
 * @param {*} type 
 */
const getDetailData = (proid) => {
  return new Promise(resolve => {
    request.get('/pro/detail', { params: { proid }}).then(res => {
      resolve(res.data)
    })
  })
}

// 3、暴露接口
export {
  getProlist,
  getBannerlist,
  getCartlist,
  login,
  getDetailData // ++++++++++++++++++++++++
}

• 详情页面获取数据

import React, { Component } from 'react';
import { getDetailData } from '@/utils/api'
class Detail extends Component {
  constructor(props) {
    super(props);
    this.state = { // +++++++++++++++
      proname: '',
      proimg: ''
    }
  }

  componentDidMount () { // +++++++++++++++++++++++
    // console.log(this.props)
    let proid = this.props.match.params.proid
    getDetailData(proid).then(data => {
      this.setState({
        proname: data.data.proname,
        proimg: data.data.proimg
      })
    })
  }

  render () {
    return (
      <div className="container">
        <div className="box">
          <header className="header">详情头部</header>
          <div className="content">
            <img src={ this.state.proimg } alt=""/>
            <p>{ this.state.proname }</p>
          </div>
        </div>    
        <footer className="footer">
          详情底部
        </footer>
      </div>
    )
  }
}

export default Detail

2.2 编程式跳转至详情页面

components/Prolist/index.jsx正常添加点击事件，并未获取到history这个属性

如果内层组件跟路由无关（页面找组件），页面调用组件时传递参数 history,或者是直接将 this.props 传递给组件

// views/home/index.jsx
<Prolist prolist = { this.state.prolist } history = { this.props.history } { ...this.props }/>

App.js中更改布局调用页面的方式

<Switch>
  <Route path = "/home" component = { Home }/>
  <Route path = "/kind" component = { Kind }/>
  <Route path = "/cart" component = { Cart }/>
  <Route path = "/user" component = { User }/>
  {
    //<Route path = "/user"><User /></Route>
  }
</Switch>

• 列表跳转 components/Prolist/index.jsx

<li onClick= { () => {
  console.log(this.props)
  // ++++++++++++++++++++++++++
  this.props.history.push('/d/detail/' + item.proid)
}} className="proitem" key = { item.proid }>
  <div className="proimg">
    <img src={ item.proimg } alt="" />
  </div>
  <div className="proinfo">
    { item.proname }
  </div>
</li>

3、加入购物车

• 设计加入购物车接口 utils/api.js

/**
 * 加入购物车
 * @param {*} type 
 */
const addCart = (userid, proid, num) => {
  return new Promise(resolve => {
    request.get('/cart/add', { params: { userid, proid, num } }).then(res => {
      resolve(res.data)
    })
  })
}

// 3、暴露接口
export {
  getProlist,
  getBannerlist,
  getCartlist,
  login,
  getDetailData,
  addCart //+++++++++++++++++
}

• 详情点击加入购物车，调用接口

<footer className="footer">
  <Button type="primary" onClick = { () => {
    let userid = localStorage.getItem('userid');
    let proid = this.state.proid;
    let num = 1;
    addCart(userid, proid, num).then(data => {
      if (data.code === '10119') {
        Toast.fail('还未登陆', 1);
        this.props.history.push('/o/login')
      } else {
        Toast.success('加入购物车成功', 1);
      }
    })
  }}>加入购物车</Button>
</footer>

• 修改服务器的 token验证的路由
  day05/app.js

4、重定向与404

• 先写一个404的页面 views/notfound/index.jsx

import React from 'react';

class Com extends React.Component {
  render () {
    return (
      <div className="box">
        <header className="header">404头部</header>
        <div className="content">404内容</div>
      </div>
    )
  }
}

export default Com;

• 修改App.js - exact 路由必须是当前的路由

<Switch>
  <Route path = "/home" component = { Home }/>
  <Route path = "/kind" component = { Kind }/>
  <Route path = "/cart" component = { Cart }/>
  <Route path = "/user" component = { User }/>
  <Redirect from="/" exact to="/home"/>
  <Route component = { NotFound } />
</Switch>

5、查看购物车

import React from 'react';
import { getCartlist } from '@/utils/api';
import { Link } from 'react-router-dom';
class Com extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      cartlist: [],
      flag: false, // 是不是有数据
    }
  }
  componentDidMount () {
    console.log('222222222')
    getCartlist(localStorage.getItem('userid')).then(data => {
      console.log(data)
      if (data.code === '10119') { // 有没有登陆
        this.props.history.push('/o/login')
      } else if (data.code === '11000'){ // 有没有数据
        this.setState({
          flag: false
        })
      } else {
        this.setState({
          flag: true,
          cartlist: data.data
        })
      }
    })
  }
  render () {
    return (
      <div className="box">
        <header className="header">购物车头部</header>
        <div className="content">
          {
            this.state.flag ? 
            <ul>
              {
                this.state.cartlist.map((item, index) => {
                  return (
                    <li key={ item.cartid }>
                      <img src={ item.proimg } alt=""/>
                      { item.proname } --- { item.price }
                    </li>
                  )
                })
              }
            </ul>
            : <div>购物车空空如也，<Link to="/home">请购物</Link></div>
          }
        </div>
      </div>
    )
  }
}

export default Com;

• 计算总价与总数

import React from 'react';
import { getCartlist } from '@/utils/api';
import { Link } from 'react-router-dom';
class Com extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      cartlist: [],
      flag: false, // 是不是有数据
      totalNum: 0, // ++++++++++++++++++++++
      totalPrice: 0 // +++++++++++++++++++++
    }
  }
  componentDidMount () {
    console.log('222222222')
    getCartlist(localStorage.getItem('userid')).then(data => {
      console.log(data)
      if (data.code === '10119') { // 有没有登陆
        this.props.history.push('/o/login')
      } else if (data.code === '11000'){ // 有没有数据
        this.setState({
          flag: false
        })
      } else {
        this.setState({
          flag: true,
          cartlist: data.data
        })
        this.getTotal() // ++++++++++++++++++++
      }
    })
  }
  // 计算总价以及总数量 ++++++++++++++++++++++++++
  getTotal () {
    console.log(3333)
    let totalNum = 0
    let totalPrice = 0
    this.state.cartlist.map(item => {
      totalNum += item.num
      totalPrice += item.num * item.price
    })
    this.setState({
      totalNum,
      totalPrice
    })
  }
  render () {
    return (
      <div className="box">
        <header className="header">购物车头部</header>
        <div className="content">
          {
            this.state.flag ? 
            <ul>
              {
                this.state.cartlist.map((item, index) => {
                  return (
                    <li key={ item.cartid }>
                      <img src={ item.proimg } alt=""/>
                      { item.proname } --- { item.price }
                      <button>-</button> { item.num } <button>+</button>
                    </li>
                  )
                })
              }
            </ul>
            : <div>购物车空空如也，<Link to="/home">请购物</Link></div>
          }
          <div>总数：{ this.state.totalNum }</div>
          <div>总价：{ this.state.totalPrice }</div>
        </div>
      </div>
    )
  }
}

export default Com;

• 购物车数据的加减数量

import React from 'react';
import { getCartlist, updateCart } from '@/utils/api';
import { Link } from 'react-router-dom';
class Com extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      cartlist: [],
      flag: false, // 是不是有数据
      totalNum: 0,
      totalPrice: 0
    }
  }
  componentDidMount () {
    console.log('222222222')
    getCartlist(localStorage.getItem('userid')).then(data => {
      console.log(data)
      if (data.code === '10119') { // 有没有登陆
        this.props.history.push('/o/login')
      } else if (data.code === '11000'){ // 有没有数据
        this.setState({
          flag: false
        })
      } else {
        this.setState({
          flag: true,
          cartlist: data.data
        })
        this.getTotal()
      }
    })
  }
  // 计算总价以及总数量
  getTotal () {
    console.log(3333)
    let totalNum = 0
    let totalPrice = 0
    this.state.cartlist.map(item => {
      totalNum += item.num
      totalPrice += item.num * item.price
      return 0
    })
    this.setState({
      totalNum,
      totalPrice
    })
  }

  add (index, num) {
    // 1、获取列表
    let cartlist = this.state.cartlist;
    // 2、获取加的这个产品 ---- 根据索引值
    let obj = cartlist[index];
    num++;
    // 3、调用接口

    updateCart(obj.cartid, num).then(data => {
      if (data.code === '10119') {
        this.props.history.push('/o/login')
      } else if (data.code === '11111'){ // 数据库数量更新成功
        console.log('update success')
        // 更新本地的数据
        cartlist[index].num = num
        this.setState({ // 重新渲染视图
          cartlist
        })
        this.getTotal()
      }
    })
  }

  reduce (index, num) {
    // 1、获取列表
    let cartlist = this.state.cartlist;
    // 2、获取加的这个产品
    let obj = cartlist[index];
    if(num <= 1) {
      num = 1
      return  // 代码不继续往下执行
    } else {
      num--
    }
    // 3、调用接口

    updateCart(obj.cartid, num).then(data => {
      if (data.code === '10119') {
        this.props.history.push('/o/login')
      } else if (data.code === '11111'){
        console.log('update success')
        cartlist[index].num = num
        this.setState({
          cartlist
        })
        this.getTotal()
      }
    })
  }
  render () {
    return (
      <div className="box">
        <header className="header">购物车头部</header>
        <div className="content">
          {
            this.state.flag ? 
            <ul>
              {
                this.state.cartlist.map((item, index) => {
                  return (
                    <li key={ item.cartid }>
                      <img src={ item.proimg } alt=""/>
                      { item.proname } --- { item.price }
                      <button onClick={ this.reduce.bind(this, index, item.num)}>-</button> { item.num } <button onClick={ this.add.bind(this, index, item.num) }>+</button>
                    </li>
                  )
                })
              }
            </ul>
            : <div>购物车空空如也，<Link to="/home">请购物</Link></div>
          }
          <div>总数：{ this.state.totalNum }</div>
          <div>总价：{ this.state.totalPrice }</div>
        </div>
      </div>
    )
  }
}

export default Com;

• 删除购物车

import React from 'react';
import { getCartlist, updateCart, deleteCart } from '@/utils/api';
import { Link } from 'react-router-dom';
class Com extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      cartlist: [],
      flag: false, // 是不是有数据
      totalNum: 0,
      totalPrice: 0
    }
  }
  componentDidMount () {
    console.log('222222222')
    getCartlist(localStorage.getItem('userid')).then(data => {
      console.log(data)
      if (data.code === '10119') { // 有没有登陆
        this.props.history.push('/o/login')
      } else if (data.code === '11000'){ // 有没有数据
        this.setState({
          flag: false
        })
      } else {
        this.setState({
          flag: true,
          cartlist: data.data
        })
        this.getTotal()
      }
    })
  }
  // 计算总价以及总数量
  getTotal () {
    console.log(3333)
    let totalNum = 0
    let totalPrice = 0
    this.state.cartlist.map(item => {
      totalNum += item.num
      totalPrice += item.num * item.price
      return 0
    })
    this.setState({
      totalNum,
      totalPrice
    })
  }

  add (index, num) {
    // 1、获取列表
    let cartlist = this.state.cartlist;
    // 2、获取加的这个产品 ---- 根据索引值
    let obj = cartlist[index];
    num++;
    // 3、调用接口

    updateCart(obj.cartid, num).then(data => {
      if (data.code === '10119') {
        this.props.history.push('/o/login')
      } else if (data.code === '11111'){ // 数据库数量更新成功
        console.log('update success')
        // 更新本地的数据
        cartlist[index].num = num
        this.setState({ // 重新渲染视图
          cartlist
        })
        this.getTotal()
      }
    })
  }

  reduce (index, num) {
    // 1、获取列表
    let cartlist = this.state.cartlist;
    // 2、获取加的这个产品
    let obj = cartlist[index];
    if(num <= 1) {
      num = 1
      return  // 代码不继续往下执行
    } else {
      num--
    }
    // 3、调用接口

    updateCart(obj.cartid, num).then(data => {
      if (data.code === '10119') {
        this.props.history.push('/o/login')
      } else if (data.code === '11111'){
        console.log('update success')
        cartlist[index].num = num
        this.setState({
          cartlist
        })
        this.getTotal()
      }
    })
  }

  del (index) {
    // 1、获取列表
    let cartlist = this.state.cartlist;
    // 2、获取加的这个产品
    let obj = cartlist[index];

    deleteCart(localStorage.getItem('userid'), obj.proid).then(data => {
      if(data.code === '10119') {
        this.props.history.push('/o/login')
      } else if (data.code === '11110') {
        cartlist.splice(index, 1)
        console.log(cartlist)
        this.setState({
          cartlist
        })
        this.getTotal()
      }
    })
  }

  render () {
    return (
      <div className="box">
        <header className="header">购物车头部</header>
        <div className="content">
          {
            this.state.flag ? 
            <ul>
              {
                this.state.cartlist.map((item, index) => {
                  return (
                    <li key={ item.cartid }>
                      <img src={ item.proimg } alt=""/>
                      { item.proname } --- { item.price }
                      <button onClick={ this.reduce.bind(this, index, item.num)}>-</button> { item.num } <button onClick={ this.add.bind(this, index, item.num) }>+</button>
                      <button onClick= { this.del.bind(this, index) }>删除</button>
                    </li>
                  )
                })
              }
            </ul>
            : <div>购物车空空如也，<Link to="/home">请购物</Link></div>
          }
          <div>总数：{ this.state.totalNum }</div>
          <div>总价：{ this.state.totalPrice }</div>
        </div>
      </div>
    )
  }
}

export default Com;

• 选择

import React from 'react';
import { getCartlist, updateCart, deleteCart } from '@/utils/api';
import { Link } from 'react-router-dom';
class Com extends React.Component {
  constructor (props) {
    super(props);
    this.state = {
      cartlist: [],
      flag: false, // 是不是有数据
      totalNum: 0,
      totalPrice: 0,
      all: true
    }
  }
  componentDidMount () {
    console.log('222222222')
    getCartlist(localStorage.getItem('userid')).then(data => {
      console.log(data)
      if (data.code === '10119') { // 有没有登陆
        this.props.history.push('/o/login')
      } else if (data.code === '11000'){ // 有没有数据
        this.setState({
          flag: false
        })
      } else {
        data.data.map(item => {
          item.checked = true
          return 0
        })
        this.setState({
          flag: true,
          cartlist: data.data
        })
        this.getTotal()
      }
    })
  }
  // 计算总价以及总数量
  getTotal () {
    console.log(3333)
    let totalNum = 0
    let totalPrice = 0
    this.state.cartlist.map(item => {
      if (item.checked) {
        totalNum += item.num
        totalPrice += item.num * item.price
      } else {
        totalNum += 0
        totalPrice += 0
      }
      return 0
    })
    this.setState({
      totalNum,
      totalPrice
    })
  }

  add (index, num) {
    // 1、获取列表
    let cartlist = this.state.cartlist;
    // 2、获取加的这个产品 ---- 根据索引值
    let obj = cartlist[index];
    num++;
    // 3、调用接口

    updateCart(obj.cartid, num).then(data => {
      if (data.code === '10119') {
        this.props.history.push('/o/login')
      } else if (data.code === '11111'){ // 数据库数量更新成功
        console.log('update success')
        // 更新本地的数据
        cartlist[index].num = num
        this.setState({ // 重新渲染视图
          cartlist
        })
        this.getTotal()
      }
    })
  }

  reduce (index, num) {
    // 1、获取列表
    let cartlist = this.state.cartlist;
    // 2、获取加的这个产品
    let obj = cartlist[index];
    if(num <= 1) {
      num = 1
      return  // 代码不继续往下执行
    } else {
      num--
    }
    // 3、调用接口

    updateCart(obj.cartid, num).then(data => {
      if (data.code === '10119') {
        this.props.history.push('/o/login')
      } else if (data.code === '11111'){
        console.log('update success')
        cartlist[index].num = num
        this.setState({
          cartlist
        })
        this.getTotal()
      }
    })
  }

  del (index) {
    // 1、获取列表
    let cartlist = this.state.cartlist;
    // 2、获取加的这个产品
    let obj = cartlist[index];

    deleteCart(localStorage.getItem('userid'), obj.proid).then(data => {
      if(data.code === '10119') {
        this.props.history.push('/o/login')
      } else if (data.code === '11110') {
        cartlist.splice(index, 1)
        console.log(cartlist)
        this.setState({
          cartlist
        })
        this.getTotal()
      }
    })
  }
  // 全选
  selectAll () {
    let cartlist = this.state.cartlist;
    let all = this.state.all
    all = !all
    cartlist.map(item => {
      item.checked = all
      return 0
    })
    this.setState({
      cartlist,
      all
    })
    this.getTotal()
  }
  // 单选
  seletceItem (index) {
    let cartlist = this.state.cartlist;
    // 点击切换当前的选择框
    cartlist[index].checked = !cartlist[index].checked;

    if (cartlist[index].checked) {
      let flag = cartlist.every(item => { // 所有的值都为true
        return item.checked === true
      })
      if (flag) {
        this.setState({
          all: true,
          cartlist
        })
      } else {
        this.setState({
          all: false,
          cartlist
        })
      }
    } else {
      this.setState({
        all: false,
        cartlist
      })
    }
    this.getTotal()
  }
  render () {
    return (
      <div className="box">
        <header className="header">购物车头部</header>
        <div className="content">
          {
            this.state.flag ? 
            <ul>
              {
                this.state.cartlist.map((item, index) => {
                  return (
                    <li key={ item.cartid }>
                      <input type="checkbox" onChange={ this.seletceItem.bind(this, index)} checked={item.checked}/>
                      <img src={ item.proimg } alt=""/>
                      { item.proname } --- { item.price }
                      <button onClick={ this.reduce.bind(this, index, item.num)}>-</button> { item.num } <button onClick={ this.add.bind(this, index, item.num) }>+</button>
                      <button onClick= { this.del.bind(this, index) }>删除</button>
                    </li>
                  )
                })
              }
            </ul>
            : <div>购物车空空如也，<Link to="/home">请购物</Link></div>
          }
          <div><input type="checkbox" checked = { this.state.all } onChange = { this.selectAll.bind(this) }/> 全选</div>
          <div>总数：{ this.state.totalNum }</div>
          <div>总价：{ this.state.totalPrice }</div>
        </div>
      </div>
    )
  }
}

export default Com;

6、首页面的下拉刷新和上拉加载

cnpm i react-pullload -S

• 在页面处引入

import ReactPullLoad, { STATS } from "react-pullload";
import "react-pullload/dist/ReactPullLoad.css";

• 构造函数添加变量

constructor (props) {
  super(props);
  this.state = {
    bannerlist: [{ bannerid: 1, img: 'images/1.jpg'}],
    prolist: [],
    hasMore: true, // 上拉加载时还有没有更多的数据 ++++++++++++++++
    action: STATS.init, // 下拉刷新和上拉加载的状态 ++++++++++++
    pageCode: 1 // 页码 +++++++++++++++++++
  }
}

• 使用组件包裹内容

<ReactPullLoad
    downEnough={150}
    ref="reactpullload"
    isBlockContainer={true}
    action={this.state.action}
    handleAction={this.handleAction.bind(this)}
    hasMore={this.state.hasMore}
    distanceBottom={100}
  >
  <ul></ul>
</ReactPullLoad>

render () {
    return (
      <div className="box">
        <header className="header">首页头部</header>
        <div className="content">
        <ReactPullLoad
            downEnough={150}
            ref="reactpullload"
            isBlockContainer={true}
            action={this.state.action}
            handleAction={this.handleAction.bind(this)}
            hasMore={hasMore}
            distanceBottom={100}
          >
          <Carousel
            autoplay={ true }
            infinite
            beforeChange={(from, to) => console.log(`slide from ${from} to ${to}`)}
            afterChange={index => console.log('slide to', index)}
          >
            {this.state.bannerlist.map(item => (
              <a
                key={ item.bannerid }
                href="https://www.baidu.com"
                style={{ display: 'inline-block',  '100%', height: '176px' }}
              >
                <img
                  src={`http://47.92.152.70/${item.img}`}
                  alt=""
                  style={{  '100%', verticalAlign: 'top' }}
                  onLoad={() => {
                    // fire window resize event to change height
                    window.dispatchEvent(new Event('resize'));
                    this.setState({ imgHeight: 'auto' });
                  }}
                />
              </a>
            ))}
          </Carousel>
          <Prolist prolist = { this.state.prolist } history = { this.props.history } { ...this.props }/>
          </ReactPullLoad>
        </div>
      </div>
    )
  }

• 实现滑动事件 handleAction

handleAction (action) {
    console.info(action, this.state.action, action === this.state.action);
    //new action must do not equel to old action
    if (action === this.state.action) { // 如果状态并且发生改变
      return false;
    }

    if (action === STATS.refreshing) { // 如果用户在下拉并且触发了更新的条件
      //刷新
      this.handRefreshing(); // 下拉刷新函数
    } else if (action === STATS.loading) { // 上拉加载条件成立
      //加载更多
      this.handLoadMore(); // 上拉加载函数
    } else {
      //DO NOT modify below code
      this.setState({ // 其他状态
        action: action
      });
    }
  };

• 显示下拉刷新以及上拉加载函数

handLoadMore () {

}

handRefreshing () {}

• 上拉加载

handLoadMore () {
    if (STATS.loading === this.state.action) { // 如果正在加载数据
      return false;
    }
    //无更多内容则不执行后面逻辑
    if (!this.state.hasMore) {
      return;
    }
    // 设置为加载状态
    this.setState({
      action: STATS.loading
    });
    // 获取页码
    let pageCode = this.state.pageCode
    // 请求数据
    getProlist(pageCode).then(data => {
      let more = data.data.length === 0 // 还有没有数据
      pageCode++
      if (more) { // 没有数据了
        this.setState({
          action: STATS.reset, // 重置action，重置状态
          hasMore: false // 没有数据了
        });
      } else {
        this.setState({
          prolist: [...this.state.prolist, ...data.data], // 先合并在赋值
          action: STATS.reset, // 重置状态
          pageCode: pageCode // 重置页码
        })
        console.log(this.state.prolist)
      }
    })
  }

• 下拉刷新

handRefreshing () {
    if (STATS.refreshing === this.state.action) { //如果正在刷新
      return false;
    }
    this.setState({ // 设置为刷新状态
      action: STATS.refreshing
    });
    // 请求数据
    getProlist().then(data => {
      this.setState({
        prolist: data.data, //默认数据
        hasMore: true, // 代表可以请求下一页数据
        action: STATS.refreshed // 重置当前状态
      })
    })
    
  };

修改样式 去修改 test.scss