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, } 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: { class_Id: '', class_name: '全部类目' },// 已选宝贝类目
      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 列表
     


    }
  }


  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
  getBaoBeiCateList() {
    Taro.request({
      url: URL.BaoBeiCateList,
      method: 'POST',
      dataType: 'json',

      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      console.log('baobei', res)
      this.setState({ productCate: res.data.goodsClass })

    }).catch(err => {
      console.log('获取宝贝类目失败', err)
    })

  }

  // 获取我的商品列表接口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 = this.state.productCateSelected.class_Id,
    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) {
        Taro.showToast({
          title:'下架成功',
          icon:'success',
          duration:1500
        }).then(()=>{
          setTimeout(() => {
            this.setState({isCheckAll:false})
            this.getMyGoodListApi({})
           }, 1500);
        })


      } else {
        Taro.showToast({
          title:'下架失败',
          icon:'none',
          duration:1500
        })
        this.setState({isCheckAll:false})
      }


    })

  }
  // 商品列表删除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)
        Taro.showToast({
          title:'删除成功',
          icon:'success',
          duration:1500
        }).then(()=>{
          setTimeout(() => {
            this.setState({isCheckAll:false})
            this.getMyGoodListApi({})
           }, 1500);
        })
       
       

      } else {
        Taro.showToast({
          title:'删除失败',
          icon:'none',
          duration:1500
        })
        this.setState({isCheckAll:false})
      }


    })

  }




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


  // 清空搜索
  emptyButtonHanlder() {
    this.setState({
      productName: '',
      lowestPrice: '',
      heightestPrice: '',
      minimumSold: '',
      maximumSold: '',
      productId: '',
      productCateSelected: { class_Id: '', class_name: '全部类目' },
    })
  }
  // 产品排序
  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 }) :  Taro.showToast({
      title:'请选择要删除的商品',
      icon:'none',
      duration:1500
    })

  }
  // 改变商品状态
  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(goodId) {
    Taro.navigateTo({
      url: '/pages/myGoodsEdit/myGoodsEdit?id=' + goodId
  })
  }
  goToGoodspage(goodId){
    Taro.navigateTo({
      url: '/pages/goods/goods?id='+goodId
  })
  }


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

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
  

    //等待接口数据  <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' onClick={this.goToGoodspage.bind(this,item.goods_id)}>
          <Image mode='aspectFit' className='img' style='height:50px;width:50px' src={URL.Base + item.goods_url} />
        </View>
        <View className='name-box' onClick={this.goToGoodspage.bind(this,item.goods_id)} >{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,item.goods_id)}>
          <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'>
      
        <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' rangeKey='class_name' 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.class_name}</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