todo list：
首页：
商品发布页面：

供求发布页面
全部业主需求页面：
我的供求页面：
我的商品列表页面
 商品编辑页面

我的需求列表页面:
接口问题：
优惠卷和询价
bug： 商品编辑 增加图片后 图片顺序乱了




等待后台--- 单个我的商品页面的图片顺序，单个我的需求页面的接口, 当个我哦的需求编辑页面的接口

import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Swiper, SwiperItem, Image, } from '@tarojs/components'
import { AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
import FilteredShopComponent from '../../component/filteredShopComponent/filteredShopComponent'
import ScrollToTopComponent from '../../component/scrollToTopComponent/scrollToTopComponent'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'

import LoginService from '../../util/LoginService'
import weChatLogin from '../../util/weChatLogin'
import URL from '../../serviceAPI.config'
import './home.scss'



class Home extends Component {

  config = {
    navigationBarTitleText: '首页',

  }

  constructor() {
    super(...arguments);
    this.state = {
      shops: [], // 推荐店铺的信息
      ads: [],  //广告图片数组
      categories: [],// 大类
      subCate: [], //小类
      demanding: [],// 业主需求
      otherData: [], // 底部导航栏
      isOpen: false, // 抢单消息提示
      grabOrderId: '',//抢到订单的id
      userName: Taro.getStorageSync('user_identity').userName || '',//用户名字
      userPhone: Taro.getStorageSync('user_identity').userPhone || '',// 用户电话
      isShowTopNav: false,// 是否显示返回顶部按钮
      loadMorePageIndex: 1,//下拉加载页面数
      isAddToList: false,
      parentClass: '',// 大类的id
      childClass: '-1',//小类的id
      supplyLevel: 1,// 筛选1是小类或者2是大类,
      latitude: '',
      longitude: ''

    }
  }

  // onPullDownRefresh() {
  //   Taro.showLoading({ title: '加载中' })

  //   this.login().then(() => {
  //     this.getShops({})
  //     this.getHomeCategoriesInfo()
  //   }).catch(err => console.log('微信登入失败：', err))

  //   Taro.stopPullDownRefresh()
  // }


  //api得到首页的信息
  getHomeCategoriesInfo() {
    Taro.request({
      url: URL.ShopWxStore,
      header: {
        // 'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
      }
    })
      .then(res => {
        console.log('首页基本信息', res)
        if (res.data.err_msg === 'success') {

          this.setState({
            ads: res.data.data.adsLb,
            categories: [res.data.data.supplyClass[0], Object.values(res.data.data.supplyClass[1])],
            demanding: res.data.data.demand.supplys,
            otherData: res.data.otherData,
            userName: res.data.otherData.userName,
            userPhone: res.data.otherData.userPhone,
          })
        } else {
          Taro.showToast({
            title: res.data.err_msg,
            icon: 'none',
            duration: 1500
          })
        }
      })
  }
  // api 得到推荐商店的信息 
  getShops({ parent_supply_class = this.state.parentClass, supply_class = this.state.childClass, supply_level = this.state.supplyLevel, curr_page = 1,
    page_count = 5, action = "2" }) {
    Taro.request({
      url: URL.ShopSupplyShops,
      method: 'POST',
      dataType: 'json',
      data: {
        param: JSON.stringify({
          curr_page: curr_page,
          page_count: page_count,
          parent_supply_class: parent_supply_class, //父级class id
          supply_class: supply_class,// 子级class id
          supply_level: supply_level,// 层级
          action: action,
          latitude:this.state.latitude,
          longitude:this.state.longitude,
        })
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
      }
    })
      .then(res => {
        console.log('所有店铺的信息', res)
        Taro.hideLoading()
        if (res.data.err_code === 0) {
          if (this.state.isAddToList) {
            if (res.data.shops) {
              this.setState({ shops: this.state.shops.concat(res.data.shops), isAddToList: false })
            } else {
              Taro.showToast({
                title: '没有更多了',
                icon: 'none',
                duration: 1500
              })
            }
          } else {
            res.data.shops ? this.setState({ shops: res.data.shops }) : this.setState({ shops: [] })
          }
        } else {
          Taro.showToast({
            title: res.data.err_msg,
            icon: 'none',
            duration: 1500
          })
        }

        this.setState({ isAddToList: false })
      }
      )
  }
  getUserLocation(that) {
    Taro.getLocation({
      type: 'gcj02', // 返回可以用于wx.openLocation的经纬度
      success(res) {
        that.setState({
          latitude: res.latitude,
          longitude: res.longitude
        },()=>{
          that.getShops({})
          that.getHomeCategoriesInfo()
        })
      }
    })
  }


  // 微信用户设置
  // wxUserSetting() {
  //   Taro.getSetting({
  //     success(res) {
  //       if (res.authSetting['scope.userInfo']) {
  //         console.log('personal info', res)
  //         Taro.authorize({
  //           scope: 'scope.userInfo',
  //           success() {
  //             // 用户已经同意小程序使用录音功能，后续调用 wx.startRecord 接口不会弹窗询问
  //             // Taro.getUserInfo({
  //             //   success(res1) {
  //             //     console.log('res1',res1)
  //             //   }
  //             // })
  //             console.log('权限允许')
  //           }
  //         })
  //       }
  //     }
  //   })
  // }
  //  api 抢单请求
  GrabDemand({ demandId = 218 }) {
    Taro.request({
      url: URL.GrabDemand,
      method: 'POST',
      dataType: 'json',
      data: {
        demandId: demandId
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
      .then(res => {
        Taro.showToast({
          title: res.data.err_msg === 'success' ? '抢单成功' : res.data.err_msg,
          icon: 'none',
          duration: 1500
        })

        console.log('抢单请求：', res)

      })

  }
  // 点击大类icon
  onClickParentCate(item) {
    Taro.showLoading({
      title: '加载中'
    })
    this.setState({ parentClass: item.class_id, childClass: item.class_id, supplyLevel: 1, subCate: item.children || [] }, () => {
      this.getShops({})
    })


  }
  // 点击子类
  onClickChildCate(item) {
    Taro.showLoading({
      title: '加载中'
    })
    this.setState({ childClass: item.class_id, supplyLevel: 2 }, () => {
      this.getShops({})

    })
    // this.getShops(item.parent_class_id, item.class_id, 2)

  }
  scrollToSubCate(item) {

    Taro.pageScrollTo({
      scrollTop: 410,
      duration: 300
    })
    this.onClickParentCate(item)
  }
  // 转到其他页面
  goToAllDemandingPage() {
    if (!Taro.getStorageSync('userInfo').user_id) {
      LoginService()
      return
    }
    Taro.navigateTo({
      url: '/pages/allDemanding/allDemanding'
    })
  }

  grabOrderId(Id) {
    this.setState({ isOpen: true, grabOrderId: Id })
  }
  handleGrabModalClose() {
    this.setState({ isOpen: false })
  }
  handleGrabModalCancel() {
    this.setState({ isOpen: false })
  }
  handleGrabConfirm() {
    if (!Taro.getStorageSync('userInfo').user_id) {
      LoginService()
    }
    this.setState({ isOpen: false })
    // 确认抢单之后
    this.GrabDemand({ demandId: this.state.grabOrderId })
  }


  // 导航去抢单页面
  goToGrabOrderPage(orderId) {
    Taro.navigateTo({

      url: '/pages/grabOrderPage/grabOrderPage?orderId=' + orderId
    })
  }
  goToMyNeedsPublish() {
    // 传参数给myNeedsPublish页面- 显示效果图选项
    Taro.navigateTo({
      url: '/pages/myNeedsPublish/myNeedsPublish?id=1'
    })

  }


  componentDidMount() {
    // 页面加载后 得到首页的基本信息和推荐店铺的信息
    Taro.showLoading({ title: '加载中' })
    this.getUserLocation(this)
    if (!Taro.getStorageSync('userInfo').user_id) {
      weChatLogin()
    }
   

    // this.login().then(() => {
    //   this.getShops({})
    //   this.getHomeCategoriesInfo()
    // }).catch(err => console.log('微信登入失败：', err))

  }

  componentWillMount() {

  }
  componentWillUnmount() { }

  componentDidShow() {

  }

  componentDidHide() { }


  // 微信用户信息
  onGotUserInfo(e) {
    console.log(e.detail.errMsg)
    console.log(e.detail.userInfo)
    console.log(e.detail.rawData)
  }
  // 页面位置
  onPageScroll(location) {
    if (location.scrollTop <= 300 && this.state.isShowTopNav) {
      this.setState({ isShowTopNav: false })
    } else if (location.scrollTop > 300 && !this.state.isShowTopNav) {
      this.setState({ isShowTopNav: true })
    }
  }
  // 底部加载
  onReachBottom() {
    Taro.showLoading({
      title: '加载中'
    })
    this.setState({ loadMorePageIndex: this.state.loadMorePageIndex + 1, isAddToList: true }, () => {
      this.getShops({ curr_page: this.state.loadMorePageIndex, })
    })
  }

  render() {
    // 提示模态弹窗element
    const modalMessageGrabElement = <AtModal isOpened={this.state.isOpen}>
      <AtModalHeader>提示</AtModalHeader>
      <AtModalContent>
        确认抢单？
      </AtModalContent>
      <AtModalAction> <Button onClick={this.handleGrabModalCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleGrabConfirm.bind(this)}>确定</Button> </AtModalAction>
    </AtModal>

    const demandingElemensArray = this.state.demanding.length ? this.state.demanding.map((item, index) => {

      return <SwiperItem key={index} >
        <View className={this.state.demanding.length - 1 === index ? 'demanding-item last' : 'demanding-item'}>
          <View onClick={this.goToGrabOrderPage.bind(this, item.sd_id)}>
            <View className='item-tag'>
              <Text className='item-tag-text'> {item.class_name}</Text>
            </View>
            <View className='item-title'>
              {item.sd_title}
            </View>
            <View className='item-address'>
              {item.user_address || '--'}
            </View>
            <View className='item-name'>
              业主：{item.user_name}
            </View>
          </View>
          {item.state === '1' ? <View className='button' onClick={this.grabOrderId.bind(this, item.sd_id)}>
            <Button size='mini' className='button-orange'>抢单</Button>
          </View> : null || item.state === '2' ? <View className='button'>
            <Button size='mini' className='button-orange blur'>{item.state_name}</Button>
          </View> : null || item.state === '3' ? <View className='button'>
            <Button size='mini' className='button-orange blur'>{item.state_name}</Button>
          </View> : null}
          {/* <View className='item-button-box' onClick={this.grabOrderId.bind(this, item.sd_id)}>
            <Button className='item-button'  >  {item.state_name === '在用' ? '抢单' : '已抢光'}</Button>
          </View> */}
        </View>
      </SwiperItem >
    }) : null

    const adsImgElementsArray = this.state.ads.length ? this.state.ads.map((item, index) => {
      return <SwiperItem key={index}>
        <Image className='banner-img' src={URL.Base + item.ads_pic} />
      </SwiperItem>
    }) : null

    // 这里应该代码可以优化-----
    const categoriesElementsArray1 = this.state.categories.length ? this.state.categories[0].map((item, index) => {
      return <View className='category-item' key={index} onClick={this.scrollToSubCate.bind(this, item)}>
        {/* onClick={this.onClickParentCate.bind(this, item)}> */}
        <Image className='cate-img' src={URL.Base + item.icon} />
        <View>{item.class_name}</View>
      </View>
    }) : null
    const categoriesElementsArray2 = this.state.categories.length ? this.state.categories[1].map((item, index) => {
      return <View className='category-item' key={index} onClick={this.scrollToSubCate.bind(this, item)}>
        {/* onClick={this.onClickParentCate.bind(this, item)}> */}
        <Image className='cate-img' src={URL.Base + item.icon} />
        <View>{item.class_name}</View>
      </View>
    }) : null

    const shopCollectionElementsArray = this.state.shops.length ? this.state.shops.map((item, index) => {
      return <FilteredShopComponent
        shop={item}
        key={index}
        categoryLevel={this.state.supplyLevel}
        classId={this.state.parentClass === this.state.childClass ? this.state.parentClass : this.state.childClass}
      ></FilteredShopComponent>
    }) : <View className='no-more-title top'> 没有更多了</View>
    const subCateElementsArray = this.state.subCate.length ? this.state.subCate.map((item, index) => {
      return <SwiperItem key={index} onClick={this.onClickChildCate.bind(this, item)}>
        <View className='text'>{item.class_name}</View>
      </SwiperItem>
    }) : null

    return (
      <View className='home'>

        {/* 获取微信用户的信息 */}
        {/* <AtButton open-type='getUserInfo' lang='zh_CN' type='primary' size='normal' onGetUserInfo={this.onGotUserInfo.bind(this)}>获取微信用户的信息</AtButton> */}

        {modalMessageGrabElement}

        <View className='first-banner'>
          <Swiper
            className='swipper'
            style='height:120px;'
            indicatorColor='#999'
            indicatorActiveColor='#333'
            hotizontal
            circular
            indicatorDots
            autoplay
          >
            {adsImgElementsArray}

          </Swiper>
        </View>
        {/* 第二行图片滚动条 */}
        <View className='second-banner'>
          <Swiper
            style='height:100%;'
            className='swipper'
            indicatorColor='#999'
            indicatorActiveColor='#333'
            hotizontal
            circular
            indicatorDots
          // autoplay
          >
            <SwiperItem>
              <View className='categories'>
                {categoriesElementsArray1}
              </View>
            </SwiperItem>
            <SwiperItem>
              <View className='categories'>
                {categoriesElementsArray2}
              </View>
            </SwiperItem>
          </Swiper>
        </View>
        {/* 第三行图片滚动条 */}
        <View className='third-banner'>
          <Swiper
            style='height:100px;'
            className='swipper'
            indicatorColor='#999'
            indicatorActiveColor='#333'
            horizontal
            circular
            indicatorDots
            autoplay
          >
            <SwiperItem onClick={this.goToMyNeedsPublish.bind(this)}>
              <Image className='banner-img' src={URL.Base + 'Public/images/xgt.png'} />
            </SwiperItem>


          </Swiper>
        </View>

        {/* 业主需求和行业推荐 */}
        <View className='container'>
          <View className='title'>

            <Text className='title-block'></Text>
            <Text className='title-text'>业主需求</Text>

            <Text className='more-link' onClick={this.goToAllDemandingPage.bind(this)}>
              更多>>
                </Text>
          </View>
          <View className='customer-demanding'>
            <Swiper
              style='height:180px;'
              className='swipper swiper-sub'
              indicatorColor='#999'
              indicatorActiveColor='#333'
              horizontal

              displayMultipleItems='2.5'
            >
              {demandingElemensArray}
            </Swiper>
          </View>

          <View className='second-banner-level2'>
            {this.state.subCate.length ? <Swiper
              style='height:35px;'
              className='swipper swiper-sub'
              indicatorColor='#999'
              indicatorActiveColor='#333'
              horizontal
              displayMultipleItems={this.state.subCate.length > 4.5 ? 4.5 : this.state.subCate.length}
            >
              {subCateElementsArray}
            </Swiper> : null}
          </View>
          <View className='title'>
            <Text className='title-block'></Text>
            <Text className='title-text'>行业推荐</Text>

          </View>


          <View className='shop-box'>
            {shopCollectionElementsArray}


          </View>
          {this.state.isShowTopNav ? <ScrollToTopComponent ></ScrollToTopComponent> : null}

          <CopyrightComponent></CopyrightComponent>
          <View className='gap'>

          </View>


        </View>
        <View className='bottom-nav-box'>
          {/* <BottomNav otherData={this.state.otherData} /> */}
        </View>



      </View>
    )
  }
}

export default Home