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

import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image, Button } from '@tarojs/components'
import {  AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'

import URL from '../../serviceAPI.config'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'


import './myNeedsView.scss'



class SupplyDemandView extends Component {
  config = {
    navigationBarTitleText: '需求查看'
  }
  constructor() {
    super(...arguments)
    this.state = {
      industryTypeSelected: '',
      needsType: [{ name: '业主需求', id: '4' }, { name: '效果图', id: '5' }],
      needsTypeSelected: { name: '业主需求', id: '4' },
      needsState: [
        { name: '作废', id: '0' },
        { name: '在用', id: '1' },
      ],
      needsStateSelected: { name: '全部', id: '' },
      title: '',
      browsing: '',
      sd_id: '', //需求id
      contactName: '',
      contactNumber: '',
      contactAddress: '',
      content: '',//描述
      pickerImageUrl: [],
      ImagesInfo: [],
      isShowAllButtons:true// 是否显示所有按钮
    }
  }
  //获取需求信息api 
  getSingleMyNeedInfo() {
    Taro.request({
     // url: URL.EditMyNeeds,
     url: URL.supplyDemandDetails,
      method: 'GET',
      dataType: 'json',
      data: {
        demandId: this.$router.params.id,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
      .then(res => {
        console.log('需求详情获取成功', res)
        // const selectedType = this.state.demandingSupplyCate.filter(item => item.id == res.data.sdInfo.sd_type)[0]
        // const selectedState = this.state.needsState.filter(item => item.id == res.data.sdInfo.state)[0]
        Taro.hideLoading()
        if(res.data.err_msg==='success'){
          let industryType = {}
          const classId = res.data.sdInfo.class_id
          for (let outter of res.data.supplyTree) {
            if (outter.children) {
              for (let inner of outter.children) {
                if (inner.class_id === classId) {
                  industryType.name = inner.class_name
                  industryType.id = inner.class_id
                  break
                }
              }
            }
            if (outter.class_id === classId) {
              industryType.name = outter.class_name
              industryType.id = outter.class_id
              break
            }
          }
  
          // const needsType = this.state.needsType.filter(item => {
          //   return item.id === res.data.sdInfo.sd_type
          // })[0]
          // const imageFile = res.data.sdInfo.file_path.map(item => { return { url: URL.Base + item.file_path } })
          // const needsState = this.state.needsState.filter(item => {
          //   return item.id === res.data.sdInfo.state
          // })[0]
          this.setState({
            sd_id: res.data.sdInfo.sd_id,
            industryTypeSelected: industryType,
            needsTypeSelected: needsType,
            title: res.data.sdInfo.sd_title,
            browsing: res.data.sdInfo.browse_times,
            contactName: res.data.sdInfo.user_name,
            contactNumber: res.data.sdInfo.user_phone,
            contactAddress: res.data.sdInfo.user_address,
            content: res.data.sdInfo.sd_desc,
            needsStateSelected: needsState,
            pickerImageUrl: imageFile,
            ImagesInfo: res.data.sdInfo.file_path,
            isDeleteModal: false,
  
          })

        }else{
          this.setState({
            isShowAllButtons:false
          })
          Taro.showToast({
            title:res.data.err_msg,
            icon:'none'
          })
        }
       

      }

      )
      .catch(error => {
        console.log('供求详情获取失败', error)
      })
  }
  //删除我的需求 api DeleteMyNeeds
  deleteMyNeeds({ demandId = 10 }) {
    Taro.request({
      url: URL.DeleteMyNeeds,
      method: 'POST',
      dataType: 'json',
      data: {

        demandId: demandId

      },
      header: {
        'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
        'content-type': 'application/x-www-form-urlencoded',
        'X-Requested-With': 'XMLHttpRequest'
      }
    }).then(res => {
      console.log('删除我的列表', res)
      if (res.data.err_msg === "success") {
        Taro.showToast({
          title: '删除成功',
          icon: 'success',
          duration: 1500
        })
        setTimeout(() => {
          this.goToMyNeedsPage()
        }, 1500);
      } else {
        Taro.showToast({
          title: res.data.err_msg,
          icon: 'none',
          duration: 1500
        })
      }
    })

  }

  goMyNeedsPublishPage() {
    Taro.navigateTo({
      url: '/pages/myNeedsPublish/myNeedsPublish',
    })
  }
  goMyNeedEditPage() {
    console.log('edit page')
    console.log('id', this.state.sd_id)
    Taro.navigateTo({
      url: '/pages/myNeedsEdit/myNeedsEdit?id=' + this.state.sd_id
    })

  }
  goToMyNeedsPage() {

    Taro.navigateTo({
      url: '/pages/myNeeds/myNeeds'
    })

  }
  deleteButton() {
    this.setState({ isDeleteModal: true })
  }
  handleWindowModCancel() {
    this.setState({ isDeleteModal: false })
  }
  handleWindowConfirm() {
    this.setState({ isDeleteModal: false })
    this.deleteMyNeeds({ demandId: this.state.sd_id })
  }

  componentDidMount() {
    Taro.showLoading({ title: '加载中' })
    this.getSingleMyNeedInfo()
  }
  componentWillReceiveProps(nextProps) {
    console.log(this.props, nextProps)
  }

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    const deleteModalWindowElement = <AtModal isOpened={this.state.isDeleteModal}>
      <AtModalHeader>提示</AtModalHeader>
      <AtModalContent>
        确认删除{this.state.needsItem.sd_title}？
    </AtModalContent>
      <AtModalAction>  <Button onClick={this.handleWindowModCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleWindowConfirm.bind(this)}>确定</Button>  </AtModalAction>
    </AtModal>
    // const imageArrayElement = this.state.ImagesInfo.map((item, index) => {
    //   return <Image key={index} className='image' mode='widthFix' src={URL.Base + item.file_path} style='max-width: 100%; max-height:100%;' />
    // })
    const imageArrayElement=this.state.ImagesInfo.map((item, index) => {
      return <View className='image-wrapper' key={index}>
          <Image mode='aspectFit' src={URL.Base + item.file_path} style='max-width:100%; max-height:100%;' />
      </View>
  })
    

    return (
      <View className='SupplyDemandItemView'>
        {/* 删除模态框 */}
        {deleteModalWindowElement}
        <View className='type box'>
          <Text className='title'>行业分类：</Text>
          <Text className='content'>{this.state.industryTypeSelected.name?this.state.industryTypeSelected.name:'--'}</Text>
        </View>
        <View className='needed-title box'>
          <Text className='title'>需求标题：</Text>
          <Text className='content'>{this.state.title}</Text>
        </View>
        <View className='browsing-amount box'>
          <Text className='title'>浏览量：</Text>
          <Text className='content'>{this.state.browsing}</Text>
        </View>
        <View className='contact-name box'>
          <Text className='title'>联系人：</Text>
          <Text className='content'>{this.state.contactName}</Text>
        </View>
        <View className='phone-number box'>
          <Text className='title'>联系电话：</Text>
          <Text className='content'>{this.state.contactNumber}</Text>
        </View>
        <View className='address box'>
          <Text className='title'>联系地址：</Text>
          <Text className='content'>{this.state.address}</Text>
        </View>
        <View className='needed-content box'>
          <Text className='title'>业主需求内容：</Text>
          <Text className='content'>{this.state.content}</Text>
        </View>
        <View className='image-container box'>
                {this.state.ImagesInfo.length?<Text className='title'>业主需求图片:</Text>:null}
                {imageArrayElement}
                </View>




        {/* {this.state.ImagesInfo.length?<View className='needed-image box'>
          <Text className='title'>业主需求图片：</Text>
          <View className='img-box'>
            {imageArrayElement}
          </View>
        </View>:null
} */}

       {this.state.isShowAllButtons? <View className='button-box'>
          <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>
            <Button  size='mini' className='button-green'>
              <AtIcon value='add' size='12' color='white'></AtIcon>
              新增</Button>
          </View>
          <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
            <Button  size='mini' className='button-green'>
              <AtIcon value='' size='12' color='white'></AtIcon>
              我的需求</Button>
          </View>
        <View className='button' onClick={this.goMyNeedEditPage.bind(this)}>
          <Button   size='mini' className='button-orange'>
            <AtIcon value='settings' size='12' color='white'></AtIcon>
            修改</Button>
        </View>

        <View className='button' onClick={this.deleteButton.bind(this)}>
          <Button   size='mini' className='button-dark-red'>
            <AtIcon value='trash' size='12' color='white'></AtIcon>
            删除</Button>
        </View>
        </View>:<View className='button-box'>
        <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>
            <Button  size='mini' className='button-green'>
              <AtIcon value='add' size='12' color='white'></AtIcon>
              新增</Button>
          </View>
          <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
            <Button  size='mini' className='button-green'>
              <AtIcon value='' size='12' color='white'></AtIcon>
              我的需求</Button>
          </View>
        </View>}
        <CopyrightComponent></CopyrightComponent>
      </View>



    )
  }
}

export default SupplyDemandView