<ListSearch onSearch={(searchType, searchKeyword) => {
this
.onSearch(searchType, searchKeyword)}} />
<TableList tableHeads={tableHeads}>
this
.state.list.map((product, index) => {
return
(
<tr key={index}>
<td>{product.id}</td>
<p>{product.name}</p>
<p>{product.subtitle}</p>
<td>￥{product.price}</td>
<span>{product.status == 1 ? '在售' : '已下架'}</span>
<button className="
btn btn-xs btn-warning
"
onClick={(e) => {
this
.onSetProductStatus(e, product.id, product.status)}}>{product.status == 1 ? '下架' : '上架'}</button>
<Link className="
opear
" to={`/product/detail/${product.id}`}>详情</Link>
<Link className="
opear
" to={`/product/save/${product.id}`}>编辑</Link>
</TableList>
<Pagination current={
this
.state.pageNum}
total={
this
.state.total}
onChange={(pageNum) =>
this
.onPageNumChange(pageNum)}/>
2.请求后台数据
this
.state = {
list : [],
pageNum : 1,
listType : 'list'
componentDidMount(){
this
.loadProductList();
// 加载商品列表
loadProductList(){
let listParam = {};
listParam.listType =
this
.state.listType;
listParam.pageNum =
this
.state.pageNum;
//如果是搜索的话需要传入搜索类型和搜索关键字
if
(
this
.state.listType === 'search'){
listParam.searchType=
this
.state.searchType;
listParam.keyword =
this
.state.searchKeyword;
_product.getProductList(listParam).then( res => {
this
.setState(res);
}, errMsg => {
this
.setState({
list : []
_mm.errorTips(errMsg);
3.当页码切换时，更新state里边pageNum的值
//更新页码
onPageNumChange(pageNum){
//获取当前页，然后更改this.state里边的pageNum,成功以后调用this.loadProductList()方法
this
.setState({
pageNum:pageNum
}, () => {
this
.loadProductList();
4.改变商品的上下架状态
//改变商品的上下架状态
//1是上架,2是下架
onSetProductStatus(e,productId,currentStatus){
let newStatus = currentStatus == 1 ? 2 : 1;
// 1是上架 ，2 是下架 确认应该是说相反的
let confirmTips=currentStatus == 1 ? "
确认下架该商品吗
" : "
确认上架该商品吗
"
if
(window.confirm(confirmTips)){
_product.setProductStatus(
productId:productId,
status:newStatus
).then(res => {
_mm.successTips(res);
this
.loadProductList();
}, errorMsg => {
_mm.errorTips(res);
