React后台管理系统-商品管理列表组件

React后台管理系统-商品管理列表组件

1.商品列表页面结构

2.              
3.                  
4.                      
5.                          
6.                          添加商品
7.                      
8.                  

             

              {this.onSearch(searchType, searchKeyword)}} />

             

                 {

                     this.state.list.map((product, index) => {

                         return (

                             

                                 {product.id}

                                 

                                     

{product.name}

                                     

{product.subtitle}

                                 

                                 ￥{product.price}

                                 

                                     {product.status == 1 ? '在售' : '已下架'}

                                     

                                         onClick={(e) => {this.onSetProductStatus(e, product.id, product.status)}}>{product.status == 1 ? '下架' : '上架'}

                                 

                                 

                                     详情

                                     编辑

                                 

                             

                         );

                     })

                 }

             

             this.state.pageNum}

                 total={this.state.total}

                 onChange={(pageNum) => this.onPageNumChange(pageNum)}/>

         

2.请求后台数据

1. this.state = {
2.            list : [],
3.            pageNum : 1,
4.            listType : 'list'
5.        };
6. componentDidMount(){
7.      this.loadProductList();
8.    }
9.    // 加载商品列表
10.    loadProductList(){
11.        let listParam = {};
12.        listParam.listType = this.state.listType;
13.        listParam.pageNum = this.state.pageNum;
14.        //如果是搜索的话需要传入搜索类型和搜索关键字
15.        if(this.state.listType === 'search'){
16.            listParam.searchType=this.state.searchType;
17.            listParam.keyword = this.state.searchKeyword;
18.        }
19.        _product.getProductList(listParam).then( res => {
20.            this.setState(res);
21.        }, errMsg => {
22.            this.setState({
23.                list : []
24.            })
25.            _mm.errorTips(errMsg);
26.        })
27.    }

3.当页码切换时，更新state里边pageNum的值

1. //更新页码
2.    onPageNumChange(pageNum){
3.       //获取当前页，然后更改this.state里边的pageNum,成功以后调用this.loadProductList()方法
4.       this.setState({
5.          pageNum:pageNum
6.       }, () => {
7.           this.loadProductList();
8.       });
9.    }

4.改变商品的上下架状态

1. //改变商品的上下架状态
2.     //1是上架,2是下架
3.     onSetProductStatus(e,productId,currentStatus){
4.         let newStatus = currentStatus == 1 ? 2 : 1;
5.         // 1是上架 ，2 是下架 确认应该是说相反的
6.         let confirmTips=currentStatus == 1 ? "确认下架该商品吗" : "确认上架该商品吗"
7.         if(window.confirm(confirmTips)){
8.             _product.setProductStatus(
9.                 {
10.                     productId:productId,
11.                     status:newStatus
12.                 }
13.             ).then(res => {
14.                 _mm.successTips(res);
15.                 this.loadProductList();
16.             }, errorMsg => {
17.                 _mm.errorTips(res);
18.  
19.             });
20.         }
21.     }

posted on 2018-06-26 19:26 gisery 阅读( ...) 评论( ...) 编辑 收藏