miniapp/src/pages/mine/addCustomer/index.jsx

import { useState, useEffect } from 'react'
import withLayout from '@/layout'
import { ScrollView, Input, Image, Picker, Block } from '@tarojs/components'
import '@/assets/css/iconfont.css'
import { useSelector } from 'react-redux'
import { fetch } from '@/utils/request'
import { API_ITEMS_LIST, API_CARDS_LIST, API_REPORT_CUETOMER, API_USER_ADD_CUSTOMER, API_CHANNEL_REPORT } from '@/constants/api'
import Taro from '@tarojs/taro'
import './index.scss'

const defaultSpecialImage = 'https://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/index-icon19.jpg'

export default withLayout((props) => {

  const { router } = props
  const { type } = router.params
  const user = useSelector(state => state.user)
  const [PersonId, setPersonId] = useState(null)
  const [BuildingName, setBuildingName] = useState(null)
  const [CanSubmit, setCanSubmit] = useState(false)
  const [BuildingId, setBuildingId] = useState(null)
  const [CardName, setCardName] = useState(null)
  const [CardId, setCardId] = useState(null)
  const [BuildingList, setBuildingList] = useState([])
  const [CardList, setCardList] = useState([])
  const [SexList] = useState([
    { name: '男', id: '1' },
    { name: '女', id: '2' }
  ])
  const [SexName, setSexName] = useState(null)
  const [SexId, setSexId] = useState(null)
  const [FormData, setFormData] = useState({
    name: '', // 姓名
    phone: '', // 电话
    sex: '', // 性别
    intention: '', // 意向楼盘
    realtyConsultant: '', // 置业顾问
    describe: '', // 描述
  })


  useEffect(() => {
    if (PersonId !== user.userInfo.person.personId) {
      setPersonId(user.userInfo.person.personId)
    }
  }, [user])

  useEffect(() => {
    if (CanSubmit) {
      let url = null
      if (type === 'consultant') { // 置业顾问
        url = API_REPORT_CUETOMER
      } else if (type === 'customer') { // 普通客户
        url = API_USER_ADD_CUSTOMER
      } else { // 经纪人
        url = API_CHANNEL_REPORT
      }
      let params = {}
      if (type === 'consultant') {
        params = { name: FormData.name, phone: FormData.phone, sex: SexId }
      } else {
        params = { ...FormData, sex: SexId, buildingId: BuildingId, realtyConsultant: CardId }
      }
      if (type === 'estateAgent') {
        params.channelCustomerId = PersonId
        params.channelId = user.userInfo.person.channelId
        params.buildingId = BuildingId
        params.orgId = `${user.userInfo.person.orgId}`
        params.personId = PersonId
      }
      fetch({ url, method: 'post', payload: params }).then(() => {
        Taro.showToast({ title: '添加成功', icon: 'none', duration: 2000 })
        setTimeout(() => {
          Taro.navigateBack({ delta: 1 })
          setCanSubmit(false)
        }, 2000)
      }).catch(() => {
        setCanSubmit(false)
      })
    }
  }, [CanSubmit])

  useEffect(() => {
    if (PersonId) {
      GetBuildingList()
    }
  }, [PersonId])

  useEffect(() => {
    if (BuildingId) {
      GetCardList()
    }
  }, [BuildingId])

  const GetBuildingList = () => {
    fetch({ url: API_ITEMS_LIST, method: 'get', params: { pageNumber: 1, pageSize: 1000, buildingId: BuildingId } }).then((res) => {
      setBuildingList((res.records || [].map((item) => { return { id: item.buildingId, name: item.name } })))
    })
  }

  const GetCardList = () => {
    fetch({ url: API_CARDS_LIST, method: 'get', params: { pageNumber: 1, pageSize: 1000 } }).then((res) => {
      setCardList((res.records || [].map((item) => { return { id: item.buildingId, name: item.name } })))
    })
  }

  const PickerChange = (e) => {
    setBuildingId(BuildingList[e.detail.value - 0].buildingId)
    setBuildingName(BuildingList[e.detail.value - 0].name)
    setCardId(null)
    setCardName(null)
  }

  const CardPickerChange = (e) => {
    setCardId(CardList[e.detail.value - 0].id)
    setCardName(CardList[e.detail.value - 0].name)
  }

  const SexPickerChange = (e) => {
    setSexId(SexList[e.detail.value - 0].id)
    setSexName(SexList[e.detail.value - 0].name)
  }

  const FormInput = (e) => {
    let Data = { ...FormData }
    Data[e.currentTarget.dataset.type] = e.detail.value
    setFormData(Data)
  }

  const ToSubmit = () => {
    if (FormData.name === '') {
      Taro.showToast({ title: '请填写客户姓名', icon: 'none' })
      return false
    }
    if (SexId === null) {
      Taro.showToast({ title: '请选择客户性别', icon: 'none' })
      return false
    }
    if (FormData.phone === '') {
      Taro.showToast({ title: '请填写客户电话', icon: 'none' })
      return false
    }
    if (!(/^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/.test(FormData.phone)) || FormData.phone.length != 11) {
      Taro.showToast({ title: '请填写正确的客户电话', icon: 'none' })
      return false
    }
    if (BuildingId === null) {
      Taro.showToast({ title: '请选择客户的意向楼盘', icon: 'none' })
      return false
    }
    if (CardId === null) {
      Taro.showToast({ title: '请选择内场接待', icon: 'none' })
      return false
    }
    if (!CanSubmit) {
      setCanSubmit(true)
    }
  }

  return (
    <view className='Page addCustomer'>

      <ScrollView scroll-y refresher-enabled={false} refresher-background='#fff'>
        <view className='PageContent'>

          <text>客户姓名</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input placeholder='请输入客户真实姓名' data-type='name' onInput={FormInput.bind(this)}></Input>
            </view>
          </view>

          <text>客户电话</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Input placeholder='请输入手机号' data-type='phone' onInput={FormInput.bind(this)}></Input>
            </view>
          </view>

          <text>性别</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Picker range-key='name' onChange={SexPickerChange} value={0} range={SexList}>
                <text>{SexName || '请选择'}</text>
              </Picker>
            </view>
            <text className='iconfont icon-jiantoudown'></text>
          </view>


          <text>意向楼盘</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Picker range-key='name' onChange={PickerChange} value={0} range={BuildingList}>
                <text>{BuildingName || '请选择'}</text>
              </Picker>
            </view>
          </view>

          <text>内场接待（选填）</text>
          <view className='FormLine flex-h'>
            <view className='flex-item'>
              <Picker range-key='name' onChange={CardPickerChange} value={0} range={CardList}>
                <text>{CardName || '请选择'}</text>
              </Picker>
            </view>
            <Image mode='heightFix' src={defaultSpecialImage}></Image>
            <text>选择</text>
          </view>

          {
            type !== 'consultant' &&
            <Block>
              <text>备注</text>
              <view className='FormLine flex-h'>
                <view className='flex-item'>
                  <Input placeholder='补充说明（选填）' data-type='describe' onInput={FormInput.bind(this)}></Input>
                </view>
              </view>
            </Block>
          }

          <view className='Btn'>
            <text onClick={ToSubmit}>提交</text>
          </view>

        </view>
      </ScrollView>

    </view>
  )
})