cf-wx-app/src/pages/myGoodList/myGoodList.js

import Taro, { Component } from '@tarojs/taro'
import { View, Radio,  } from '@tarojs/components'
import { AtInput, Text, AtButton, AtIcon, Picker, Image, AtPagination,AtToast  } from 'taro-ui'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import URL from '../../serviceAPI.config'


import './myGoodList.scss'



class MyGoodList extends Component {
  config = {
    navigationBarTitleText: '商品列表'
  }
  constructor() {
    super(...arguments)
    this.state = {
      productName: '',
      lowestPrice: '',
      heightestPrice: '',
      minimumSold: '',
      maximumSold: '',
      productId: '',
      productCate: ['全部类目', '衣柜', '人工服务', '开料机', '书柜', '橱柜', '更衣室'],
      productCateSelected: '全部类目',
      filterBar: ['filterPrice', 'filterStock', 'filterSold', 'filterPublishDate',], //筛选选项
      filterBarKeys: { filterPrice: '价格', filterStock: '库存', filterSold: '总销量', filterPublishDate: '发布时间' }, // 筛选选项对应值
      filterOptions: {
        filterPrice: false,
        filterStock: false,
        filterSold: false,
        filterPublishDate: false,
      }, // 正反排序
      selectedFilterValue: 0,   //筛选项
      myGoodList: [],// 保存后台返回的商品列表
      myGoodListTotal: 0,// 后台的商品总数
      currentPage: 1,
      goodsStateParam: 1,//商品状态参数
      pageCountParam: 10,// 商品数量参数
      currPageParam: 1,// 当前页面 参数
      isCheckAll:false,// 是否checked
      goodsIdList:[],//商品Id 列表
      isToast:false,// 是否显示轻提示
      toastText:''// 轻提示字段


    }
  }


  productNameChange(event) {
    this.setState({ productName: event })
  }
  productIdChange(event) {
    this.setState({ productId: event })
  }
  lowestPriceChange(event) {
    this.setState({ lowestPrice: event })
  }
  heightestPriceChange(event) {
    this.setState({ heightestPrice: event })
  }
  minimumSoldChange(event) {
    this.setState({ minimumSold: event })
  }
  maximumSoldChange(event) {
    this.setState({ maximumSold: event })
  }
  productCateChange = e => {
    this.setState({
      productCateSelected: this.state.productCate[e.detail.value]
    })
  }
  // 获取我的商品列表接口api
  getMyGoodListApi({ goodsState = this.state.goodsStateParam, pageCount = this.state.pageCountParam, currPage = this.state.currPageParam }) {
    Taro.request({
      url: URL.MyGoodList,
      method: 'POST',
      dataType: 'json',

      data: {
        goodsState: goodsState,
        pageCount: pageCount,
        currPage: currPage
      },
      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      if (res.statusCode === 200) {
         console.log('我的商品列表', JSON.parse(res.data))
        const data = JSON.parse(res.data)
        data.goods.forEach(item => {
          item.checked=false
        });
        const goodCount = Number(data.goodsCount)
        this.setState({
          myGoodList: data.goods,
          myGoodListTotal: goodCount
        })

      } else {
        console.log('我的商品列表获取失败')
      }


    })

  }
  // 获取搜索结果api
  getGoodListResultApi({ goodsName = this.state.productName, goodsSn = '', goodsClass = '', goodsPriceL = this.state.lowestPrice, goodsPriceU = this.state.heightestPrice, goodsSalesL = this.state.minimumSold, goodsSalesU = this.state.maximumSold, shopClassID = this.state.productId, goodsState = this.state.goodsStateParam, pageCount = this.state.pageCountParam, currPage = this.state.currPageParam, order = '', }) {
    Taro.request({
      url: URL.MyGoodList,
      method: 'POST',
      dataType: 'json',

      data: {
        goodsName: goodsName,
        goodsSn: goodsSn,
        goodsClass: goodsClass,
        goodsPriceL: goodsPriceL,
        goodsPriceU: goodsPriceU,
        goodsSalesL: goodsSalesL,
        goodsSalesU: goodsSalesU,
        shopClassID: shopClassID,
        goodsState: goodsState,
        pageCount: pageCount,
        currPage: currPage,
        order: order
      },
      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      if (res.statusCode === 200) {
        console.log('我的商品列表', JSON.parse(res.data))
        const data = JSON.parse(res.data)
        const goodCount = Number(data.goodsCount)
        this.setState({
          myGoodList: data.goods,
          myGoodListTotal: goodCount
        })

      } else {
        console.log('我的商品列表获取失败')
      }


    })

  }

  // 商品列表下架API 
  changeGoodState({goodsState=0,goodsID= this.state.goodsIdList }) {
    Taro.request({
      url: URL.ChangeGoodState,
      method: 'POST',
      dataType: 'json',

      data: {
        goodsState: goodsState,
        goodsID:JSON.stringify(goodsID)
      },
      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      if (res.statusCode === 200) {
         console.log('商品状态返回', res)
         this.setState({isToast:true,toastText:'下架成功'},()=>{
          setTimeout(() => {
            this.setState({isToast:false})
            this.getMyGoodListApi({})// 从新获取商品列表数据
          }, 2000);
        })
         
      
      } else {
        console.log('我的商品列表获取失败')
      }


    })

  }
  // 商品列表删除api
  deleteGood({goodsState=1,goodsID= this.state.goodsIdList }) {
    Taro.request({
      url: URL.DeleteGood,
      method: 'POST',
      dataType: 'json',

      data: {
        goodsState: goodsState,
        goodsID:JSON.stringify(goodsID)
      },
      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      if (res.statusCode === 200) {
         console.log('商品删除返回', res)
         this.setState({isToast:true,toastText:'删除成功'},()=>{
          setTimeout(() => {
            this.setState({isToast:false})
            this.getMyGoodListApi({})// 从新获取商品列表数据
          }, 2000);
        })
    
        
      
      } else {
        console.log('我的商品列表获取失败')
      }


    })

  }




  // 搜索
  searchButtonHandler() {
    this.setState({ currentPage: 1 }, () => {
      this.getGoodListResultApi({})
    })
  }


  // 清空搜索
  emptyButtonHanlder() {
    this.setState({
      productName: '',
      lowestPrice: '',
      heightestPrice: '',
      minimumSold: '',
      maximumSold: '',
      productId: '',
      productCateSelected: '全部类目',
    })
  }
  // 产品排序
  accendingDescending(value) {
    this.setState({ selectedFilterValue: value })
    if (value == 0) {
      this.setState({
        currentPage: 1,
        filterOptions: {
          filterPrice: !this.state.filterOptions.filterPrice,
          filterStock: false,
          filterSold: false,
          filterPublishDate: false,
        }
      }
      )
      this.state.filterOptions.filterPrice ? this.getGoodListResultApi({ order: "goods_price desc" }) : this.getGoodListResultApi({ order: "goods_price" })

    }
    if (value == 1) {
      this.setState({
        currentPage: 1,
        filterOptions: {
          filterPrice: false,
          filterStock: !this.state.filterOptions.filterStock,
          filterSold: false,
          filterPublishDate: false,
        }
      }, () => {
        this.state.filterOptions.filterStock ? this.getGoodListResultApi({ order: "goods_stock desc" }) : this.getGoodListResultApi({ order: "goods_stock" })
      }
      )
    }
    if (value == 2) {
      this.setState({
        currentPage: 1,
        filterOptions: {
          filterPrice: false,
          filterStock: false,
          filterSold: !this.state.filterOptions.filterSold,
          filterPublishDate: false,

        }
      }, () => {
        this.state.filterOptions.filterSold ? this.getGoodListResultApi({ order: "sales_volume desc" }) : this.getGoodListResultApi({ order: "sales_volume" })
      }

      )

    }
    if (value == 3) {
      this.setState({
        currentPage: 1,
        filterOptions: {
          filterPrice: false,
          filterStock: false,
          filterSold: false,
          filterPublishDate: !this.state.filterOptions.filterPublishDate,

        }
      }, () => {
        this.state.filterOptions.filterPublishDate ? this.getGoodListResultApi({ order: "update_date desc" }) : this.getGoodListResultApi({ order: "update_date" })
      }
      )

    }

  }
 
  // 翻页导航
  paginationNav(type) {

    this.setState({ currentPage: type.current,isCheckAll:false }, () => {
      this.getMyGoodListApi({ currPage: this.state.currentPage })
    })

  }
  // 商品全部选择
  checkAllHandler(){
    const newMyGoodList=this.state.myGoodList.map((item)=>{
        item.checked=!this.state.isCheckAll
      return item
  })
    this.setState({isCheckAll:!this.state.isCheckAll,myGoodList:newMyGoodList})
    
  }


  // 单个商品选择
  handleCheckChange(Id) {
    //如果goodid 一样的那么checked 就取反
    const newMyGoodList=this.state.myGoodList.map((item)=>{
        if(item.goods_id===Id){
          item.checked=!item.checked
        }
        return item
    })
    this.setState({myGoodList:newMyGoodList})
  }
// 删除商品
  deleteGoodsHandler(){
    const checkedGoodsId=[]
    this.state.myGoodList.forEach(item => {
      if(item.checked){
        checkedGoodsId.push(item.goods_id)
      }
    });
    checkedGoodsId.length?this.deleteGood({goodsID:checkedGoodsId}):this.setState({isToast:true,toastText:'请选择要删除的商品'},()=>{
      setTimeout(() => {
        this.setState({isToast:false})
      }, 2000);
    })

  }
// 改变商品状态
 offStockGoodHandler(){
  const checkedGoodsId=[]
  this.state.myGoodList.forEach(item => {
    if(item.checked){
      checkedGoodsId.push(item.goods_id)
    }
  });
  checkedGoodsId.length?this.changeGoodState({goodsID:checkedGoodsId}):this.setState({isToast:true,toastText:'请选择要下架的商品'},()=>{
    setTimeout(() => {
      this.setState({isToast:false})
    }, 2000);
  })
 }
// 导航到商品编辑页面myGoodsEdit
 goToGoodEditPage(){
  Taro.navigateTo({
     url: '/pages/myGoodsEdit/myGoodsEdit'
   
  })
 }


  componentDidMount() {
    this.getMyGoodListApi({})
  }
  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    // 轻提示
    const  toastElement=<AtToast
  isOpened={this.state.isToast}
  text={this.state.toastText}
  ></AtToast>


    //等待接口数据  <Radio className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
    const goodListElementArray = this.state.myGoodList.map((item, index) => {
      return <View key={index} className='good-container'>
        <Radio className='radio' value={item.goods_id} checked={item.checked} onClick={this.handleCheckChange.bind(this,item.goods_id)} ></Radio>
        {/* onClick={this.handleCheckChange.bind(this,item.goods_id)} */}
        <View className='img-box'>
          <Image mode='aspectFit' className='img' style='height:50px;width:50px' src={URL.Base + item.goods_url} />
        </View>
        <View className='name-box'>{item.goods_name}</View>
        <View className='price-box'>￥{item.goods_price}</View>
        <View className='quantity-box'>{item.sales_volume}</View>
        <View className='button-box1' onClick={this.goToGoodEditPage.bind(this)}>
          <AtButton type='primary' className='button-a' size='small'>
            编辑商品</AtButton>
        </View>
      </View>
    })
    // 筛选项目排序element
    const filterElementsArray = this.state.filterBar.map((item, index) => {
      let isTure = this.state.filterOptions[item]

      return <View key={index} onClick={this.accendingDescending.bind(this, index)} className={index === this.state.selectedFilterValue ? 'filter-title actived' : 'filter-title'}>
        <Text className='text-a'>
          {this.state.filterBarKeys[item]}
        </Text>
        {isTure ? <AtIcon value='chevron-down' size='10' color='#F00'></AtIcon> : <AtIcon value='chevron-up' size='10' color='#F00'></AtIcon>}
      </View>
    })


    return (
      <View className='MyGoodList'>
      {toastElement}
        <View className='border-box'>
          <AtInput
            name='value'
            title='宝贝名称：'
            type='text'
            value={this.state.productName}
            onChange={this.productNameChange.bind(this)}
          />
        </View>
        <View className='input-box'>
          <AtInput
            name='value'
            title='最低价：'
            className='input'
            type='number'
            value={this.state.lowestPrice}
            onChange={this.lowestPriceChange.bind(this)}
          />
          <AtInput
            name='value'
            title='最高价：'
            className='input'
            type='number'
            value={this.state.heightestPrice}
            onChange={this.heightestPriceChange.bind(this)}
          />
        </View>
        <View className='border-box'>
          <AtInput
            name='value'
            title='最低销量：'
            className='input'
            type='number'
            value={this.state.minimumSold}
            onChange={this.minimumSoldChange.bind(this)}
          />
          <AtInput
            name='value'
            title='最高销量：'
            className='input'
            type='number'
            value={this.state.maximumSold}
            onChange={this.maximumSoldChange.bind(this)}
          />
        </View>

        <View className='border-box'>
          <AtInput
            border={false}
            name='value'
            title='商品编码：'
            type='text'
            value={this.state.productId}
            onChange={this.productIdChange.bind(this)}
          />
        </View>
        <View className='page-section'>
          <Picker mode='selector' range={this.state.productCate} onChange={this.productCateChange.bind(this)}>
            <View className='picker'>
              <View className='title-box'>
                <Text className='title'>宝贝类目:</Text>

                <Text className='selected'>{this.state.productCateSelected}</Text>
              </View>

            </View>
          </Picker>
        </View>
        <View className='button-box'>
          <View className='button' onClick={this.searchButtonHandler.bind(this)}>
            <AtButton type='primary' size='small'>
              <AtIcon value='search' size='12' color='white'></AtIcon>
              搜索</AtButton>
          </View>
          <View className='button' onClick={this.emptyButtonHanlder.bind(this)}>
            <AtButton type='primary' className='button-a' size='small'>

              清空条件</AtButton>
          </View>
        </View>

        <View className='text'>
          <Text>出售中的宝贝{this.state.myGoodListTotal}条记录</Text>
        </View>
        <View className='filterbar-container'>
          <View className='filter-bar'>
              {filterElementsArray}
          
          </View>
          <View className='sub-filter'>
            <Radio className='radio'  checked={this.state.isCheckAll} onClick={this.checkAllHandler.bind(this)}>全选</Radio>
            <View className='button' onClick={this.deleteGoodsHandler.bind(this)}>
              <AtButton type='primary' size='small'>
                删除</AtButton>
            </View>
            <View className='button' onClick={this.offStockGoodHandler.bind(this)}>
              <AtButton type='primary' className='button-a' size='small'>

                下架</AtButton>
            </View>
          </View>
        </View>


        <View className='mygoodlist-container'>
          {/* <RadioGroup onChange={this.handleCheckChange.bind(this)}> */}

            {goodListElementArray}
            {/* </RadioGroup> */}


        </View>
        <View className='pagination-box'>
          <AtPagination
            total={this.state.myGoodListTotal}
            pageSize={10}
            current={this.state.currentPage}
            onPageChange={this.state.paginationNav.bind(this)}
          >
          </AtPagination>

        </View>

        <CopyrightComponent></CopyrightComponent>
      </View>
    )
  }
}

export default MyGoodList