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, AtModal, AtModalHeader, AtModalContent, AtModalAction, Button } 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: { id: '', 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: 5,// 商品数量参数
      currPageParam: 1,// 当前页面 参数
      isCheckAll: false,// 是否checked
      goodsIdList: [],//商品Id 列表
      isOpenDeleteModal: false,// 是否显示删除模态框
      isOpenOffStockModal: false,// 是否显示下架模态框



    }
  }


  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)
      const productCate = [{ name: '全部类目', id: '' }]
      for (let item of res.data.goodsClass) {
        productCate.push({ name: item.class_name, id: item.class_id })
      }
      this.setState({ productCate: productCate })

    }).catch(err => {
      Taro.showToast({
        title: '获取宝贝类目失败',
        icon: 'none',
        duration: 1500,

      })

    })

  }

  // 获取我的商品列表接口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)
        if (data.goods) {
          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.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
        })
        Taro.hideLoading()

      } 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(() => {
          this.setState({ isCheckAll: false })
          this.getMyGoodListApi({})

        })


      } 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(() => {

          this.setState({ isCheckAll: false })
          this.getMyGoodListApi({})

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


    })

  }




  // 搜索
  searchButtonHandler() {
    Taro.showLoading({
      title: '加载中',
    })
    this.setState({ currentPage: 1 ,isCheckAll:false}, () => {
      this.getGoodListResultApi({})
    })
  }


  // 清空搜索
  emptyButtonHanlder() {
    this.setState({
      productName: '',
      lowestPrice: '',
      heightestPrice: '',
      minimumSold: '',
      maximumSold: '',
      productId: '',
      productCateSelected: { id: '', name: '全部类目' },
    }, () => {
      
      this.setState({isCheckAll:false,currentPage: 1},()=>{
        this.getMyGoodListApi({})
      })
      Taro.showToast({
        title: '已清空',
        icon: 'success',
        duration: 1000
      })
    })

  }
  // 产品排序
  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() {
    if (this.state.myGoodList.length) {
      const newMyGoodList = this.state.myGoodList.map((item) => {
        item.checked = !this.state.isCheckAll
        return item
      })
      this.setState({ isCheckAll: !this.state.isCheckAll, myGoodList: newMyGoodList }, () => {
        console.log('全选列表', this.state.myGoodList)
      })
    }
    else {
      this.setState({
        isCheckAll:true
      },()=>{
       this.setState({isCheckAll:false})
      })
      Taro.showToast({
        title: '全选无效',
        icon: 'none',
        duration: 1500
      }).then(()=>{
       
      })
      
    }}


    // 单个商品选择
    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.setState({ isOpenDeleteModal: true }) : Taro.showToast({
        title: '请选择要删除的商品',
        icon: 'none',
        duration: 1500
      })
      // // this.deleteGood({ goodsID: checkedGoodsId })



    }
    // 改变商品状态
    offStockGoodHandler() {
      const checkedGoodsId = []
      this.state.myGoodList.forEach(item => {
        if (item.checked) {
          checkedGoodsId.push(item.goods_id)
        }
      });
      //this.changeGoodState({ goodsID: checkedGoodsId })
      checkedGoodsId.length ? this.setState({ isOpenOffStockModal: true }) : Taro.showToast({
        title: '请选择要下架的商品',
        icon: 'none',
        duration: 1500
      })
    }
    // 导航到商品编辑页面myGoodsEdit
    goToGoodEditPage(goodId) {
      Taro.navigateTo({
        url: '/pages/myGoodsEdit/myGoodsEdit?id=' + goodId
      })
    }
    goToGoodspage(goodId){
      Taro.navigateTo({
        url: '/pages/goods/goods?id=' + goodId
      })
    }

    DeleteConfirm(){
      this.setState({
        isOpenDeleteModal: false
      })
      const checkedGoodsId = []
      this.state.myGoodList.forEach(item => {
        if (item.checked) {
          checkedGoodsId.push(item.goods_id)
        }
      });
      this.deleteGood({ goodsID: checkedGoodsId })
    }
    deleteModalClose(){
      this.setState({
        isOpenDeleteModal: false
      })
    }
    OffStockConfirm(){

      this.setState({
        isOpenOffStockModal: false
      })
      const checkedGoodsId = []
      this.state.myGoodList.forEach(item => {
        if (item.checked) {
          checkedGoodsId.push(item.goods_id)
        }
      });
      this.changeGoodState({ goodsID: checkedGoodsId })
    }
    offStockModalClose(){
      this.setState({
        isOpenOffStockModal: false
      })
    }

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

    componentWillUnmount() { }

    componentDidShow() { }

    componentDidHide() { }

    render() {

      //等待接口数据  
      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>
      })
      // 删除提示模态弹窗element
      const modalMessageDeleteElement = <AtModal isOpened={this.state.isOpenDeleteModal}>
        <AtModalHeader>提示</AtModalHeader>
        <AtModalContent>
          确定要删除已选商品？
 </AtModalContent>
        <AtModalAction> <Button onClick={this.deleteModalClose.bind(this)}>取消</Button> <Button className='orange' onClick={this.DeleteConfirm.bind(this)}>确定</Button> </AtModalAction>
      </AtModal>
      // 下架提示模态弹窗element
      const modalMessageOffStockElement = <AtModal isOpened={this.state.isOpenOffStockModal}>
        <AtModalHeader>提示</AtModalHeader>
        <AtModalContent>
          确定要下架已选商品？
 </AtModalContent>
        <AtModalAction> <Button onClick={this.offStockModalClose.bind(this)}>取消</Button> <Button className='orange' onClick={this.OffStockConfirm.bind(this)}>确定</Button> </AtModalAction>
      </AtModal>

      return (
        <View className='MyGoodList'>
          {/* 删除模态提示框 */}
          {modalMessageDeleteElement}
          {/* 下架模态框提示 */}
          {modalMessageOffStockElement}

          <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='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.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'>

            {this.state.myGoodList.length ? goodListElementArray : <View className='nomore' >
              没有更多了....
    </View >}


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

          </View>

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

  export default MyGoodList