cf-wx-app/src/pages/supplyDemandView/supplyDemandView.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 './supplyDemandView.scss'
import loginExpired from '../../util/loginExpired';
import { getGlobalStorage } from '../../util/getSetStoage';



class SupplyDemandView extends Component {
  config = {
    navigationBarTitleText: '供求查看'
  }

  constructor() {
    super(...arguments)
    this.state = {
      demandingSupplyCate: [{ name: '需求', id: '1' }, { name: '供求', id: '2' }, { name: '人才', id: '3' }], //供求类型选择
      type: '',
      title: '',
      browsing: '',
      contactName: '',
      contactNumber: '',
      address: '',
      content: '',
      images: [],
      isDeleteModal: false
    }
  }
  //获取商品信息api GetProductInfo
  getSupplyDemandInfo() {
    Taro.request({
      url: URL.GetSupplyDemandInfo,
      method: 'GET',
      dataType: 'json',
      data: {
        sdID: this.$router.params.sdId,
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
      .then(res => {
        console.log('供求详情获取成功', res)
        Taro.hideLoading()
        if (res.data.err_code === 0) {
          const selectedType = this.state.demandingSupplyCate.filter(item => item.id === res.data.sdInfo.sd_type)[0].name
          this.setState({
            type: selectedType,
            title: res.data.sdInfo.sd_title,
            browsing: res.data.sdInfo.browse_times,
            contactName: res.data.sdInfo.user_name,
            contactNumber: res.data.sdInfo.user_phone,
            address: res.data.sdInfo.user_address,
            content: res.data.sdInfo.sd_desc,
            images: res.data.sdInfo.file_path,
            itemId: res.data.sdInfo.sd_id
          })
          
        } else if (res.data.err_code === 88888) {
          loginExpired(res)
        }else{
          Taro.showToast({
              title:res.data.err_msg,
              icon:'none'
          })
      }

      }
      )

  }
  // 删除我的供求api
  onDelete({ sdID = 0 }) {
    Taro.request({
      url: URL.DeleteDemandSupply,
      method: 'POST',
      dataType: 'json',
      data: {
        sdID: sdID
      },
      header: {
        'content-type': 'application/x-www-form-urlencoded',
        'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
        'X-Requested-With': 'XMLHttpRequest'
      }
    })
      .then(res => {
        Taro.hideLoading()
        if (res.data.err_code == 0) {
          console.log('删除成功')
          Taro.showToast({
            title: '删除成功',
            icon: 'success',
            duration: 1500
          }).then(() => {
            setTimeout(() => {
              this.goToMySDPage()
            }, 1500);
          })

        } else if (res.data.err_code === 88888) {
          loginExpired(res)
        } else {

          Taro.showToast({
            title: res.data.err_msg,
            icon: 'none'
          })

        }

      }
      )
      
  }
  goToSDPublishPage() {
    Taro.redirectTo({
      url: '/pages/supplyDemandPublish/supplyDemandPublish',// 供求发布页面
    })
  }
  // 跳转到我的供求编辑页面
  goToMyDSEditPage() {
    Taro.redirectTo({
      url: '/pages/myDemandSupplyEdit/myDemandSupplyEdit?sdId=' + this.state.itemId
    })

  }
  goToMySDPage() {
    Taro.redirectTo({
      url: '/pages/mySupplyDemand/mySupplyDemand',//我的供求页面
    })
  }
  makeAPhoneCall() {
    Taro.makePhoneCall({
      phoneNumber: this.state.contactNumber
    })
  }

  deleteButton() {
    this.setState({ isDeleteModal: true })
  }
  handleWindowModCancel() {
    this.setState({ isDeleteModal: false })
  }
  handleWindowConfirm() {
    this.setState({ isDeleteModal: false })
    Taro.showLoading({
      title: '加载中'
    })
    this.onDelete({ sdID: this.state.itemId })
  }


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

  componentWillUnmount() { }

  componentDidShow() { }

  componentDidHide() { }

  render() {
    const imageElementArray = this.state.images.map((item, index) => {
      return <View key={index} className='image-box'>
        <Image mode='widthFix' style='width: 100%;'
          src={URL.Base + item.file_path}
        />
      </View>
    })
    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>
    return (
      <View className='SupplyDemandItemView'>
        {deleteModalWindowElement}
        <View className='type box'>
          <Text className='title'>供求类型：</Text>
          <Text className='content'>{this.state.type}</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 highlight' onClick={this.state.makeAPhoneCall.bind(this)}>{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='needed-content box'>
          <Text className='title'>需求图片：</Text>
          <View className='image-container'>
            {imageElementArray}
          </View>
        </View>

        <View className='button-box'>
          <View className='button' onClick={this.goToSDPublishPage.bind(this)}>
            <Button className='button-green' size='mini' >
              <AtIcon value='add' size='12' color='white'></AtIcon>
              新增</Button>
          </View>
          <View className='button' onClick={this.goToMyDSEditPage.bind(this)}>
            <Button className='button-blue' size='mini'>
              <AtIcon value='settings' size='12' color='white'></AtIcon>
              修改</Button>
          </View>
          <View className='button' onClick={this.goToMySDPage.bind(this)}>
            <Button className='button-orange' size='mini'>
              <AtIcon value='' size='12' color='white'></AtIcon>
              我的供求</Button>
          </View>
          <View className='button' onClick={this.deleteButton.bind(this)}>
            <Button className='button-dark-red' size='mini'>
              <AtIcon value='trash' size='12' color='white'></AtIcon>
              删除</Button>
          </View>
        </View>
        <CopyrightComponent></CopyrightComponent>
      </View>



    )
  }
}

export default SupplyDemandView