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

import { useState, useEffect } from 'react'
import Taro from "@tarojs/taro";
import withLayout from '@/layout'
import '@/assets/css/iconfont.css'
import { Image, Textarea } from '@tarojs/components'
import { fetch } from '@/utils/request'
import { API_GET_CUSTOMER_INFO, API_FOLLOW_LIST } from '@/constants/api'
import { getImgURL } from '@/utils/image'
import './index.scss'
import UserDetailBasicInfo from '../components/UserDetailBasicInfo/index'
import UserDetailViewRecord from '../components/UserDetailViewRecord/index'
import UserDetailActivityInfo from '../components/UserDetailActivityInfo/index'
import UserDetailFollowRecord from '../components/UserDetailFollowRecord/index'

export default withLayout((props) => {

  const { name, sex, phone, avatarurl, status } = props.router.params
  const [CustomerId] = useState(props.router.params.id)
  const [CustomerInfo, setCustomerInfo] = useState({})
  const [ShowAddFollow, setShowAddFollow] = useState(false)
  const [MenuList] = useState([
    { name: '基本信息', id: 1 },
    { name: '访问记录', id: 2 },
    { name: '活动信息', id: 3 },
    { name: '跟进记录', id: 4 }
  ])
  const [CurrentMenuId, setCurrentMenuId] = useState(1)
  const [FollowContent, setFollowContent] = useState('')
  const [FollowAddCounts, setFollowAddCounts] = useState(0)

  useEffect(() => {
    if (CustomerId) {
      UpdateCustomerInfo()
    }
  }, [CustomerId])

  const UpdateCustomerInfo = () => {
    fetch({ url: `${API_GET_CUSTOMER_INFO}${CustomerId}` }).then((res) => {
      if (res) {
        setCustomerInfo(res)
      }
    })
  }

  const CutMenu = (item) => {
    return () => {
      setCurrentMenuId(item.id)
    }
  }

  const AddFollow = () => {
    setShowAddFollow(true)
  }

  const FollowInput = (e) => {
    setFollowContent(e.detail.value.substring(0, 10))
  }

  const SaveFollow = () => {
    fetch({ url: API_FOLLOW_LIST, method: 'post', payload: { recordType: '添加跟进', recordContent: FollowContent, customerSex: CustomerInfo.sex, customerId: CustomerId } }).then((res) => {
      Taro.showToast({
        title: '添加跟进成功',
        icon: 'none'
      })
      setShowAddFollow(false)
      setFollowContent('')
      if (CurrentMenuId === 4) {
        setFollowAddCounts(FollowAddCounts + 1)
      }
    }).catch(() => {
      Taro.showToast({
        title: '添加跟进失败',
        icon: 'none'
      })
    })
  }

  const CancelAddFollow = () => {
    setShowAddFollow(false)
    setFollowContent('')
  }

  return (
    <view className='Page customerDetail flex-v'>

      <view className='UserInfo'>
        <view>
          <view>
            <view className='centerLabel'>
              <view className='flex-h'>
                <view className='Icon'>
                  <Image mode='aspectFill' src={getImgURL(CustomerInfo.avatarurl || avatarurl)}></Image>
                </view>
                <view className='flex-item'>
                  <view>
                    <text>{CustomerInfo.name || name}</text>
                    <text className={CustomerInfo.sex - 0 === 1 || sex - 0 === 1 ? 'iconfont icon-nanxing' : 'iconfont icon-nvxing'}></text>
                  </view>
                  <text>{CustomerInfo.phone || phone}</text>
                </view>
                <text className='iconfont icon-liaotian'></text>
                <text className='iconfont icon-dianhua' onClick={() => { Taro.makePhoneCall({ phoneNumber: CustomerInfo.phone || phone }) }}></text>
              </view>
            </view>
            <text className='Status'>{status - 0 === 1 || status - 0 === 0 ? '已报备' : status - 0 === 2 ? '已到访' : status - 0 === 3 ? '已认筹' : '已签约'}</text>
            <text className='Tips'>NEW</text>
            <text className='Tips'>NEW</text>
          </view>
        </view>
      </view>

      <view className='MenuList'>
        <view>
          {
            MenuList.map((item, index) => (
              <text key={`MenuItem-${index}`} className={CurrentMenuId === item.id ? 'active' : ''} onClick={CutMenu(item)}>{item.name}</text>
            ))
          }
        </view>
      </view>

      <view className='flex-item'>
        <view>

          {/* 基本信息 */}
          {
            CurrentMenuId === 1 &&
            <UserDetailBasicInfo CustomerId={CustomerId} CustomerInfo={CustomerInfo} AddFollow={AddFollow} Update={UpdateCustomerInfo}></UserDetailBasicInfo>
          }

          {/* 访问记录 */}
          {
            CurrentMenuId === 2 &&
            <UserDetailViewRecord CustomerId={CustomerId} AddFollow={AddFollow}></UserDetailViewRecord>
          }

          {/* 活动信息 */}
          {
            CurrentMenuId === 3 &&
            <UserDetailActivityInfo CustomerId={CustomerId} AddFollow={AddFollow}></UserDetailActivityInfo>
          }

          {/* 跟进记录 */}
          {
            CurrentMenuId === 4 &&
            <UserDetailFollowRecord CustomerId={CustomerId} AddFollow={AddFollow} AddFollowCounts={FollowAddCounts}></UserDetailFollowRecord>
          }
        </view>
      </view>

      {
        ShowAddFollow &&
        <view className='AddFollow'>
          <view className='centerLabel'>
            <view>
              <view>
                <text>跟进内容</text>
                <view className='FollowContent'>
                  <Textarea placeholder='不超过150字' maxLength={150} value={FollowContent} onInput={FollowInput} />
                </view>
                <view className='Save flex-h'>
                  <view className='flex-item'>
                    <text onClick={CancelAddFollow}>取消</text>
                  </view>
                  <view className='flex-item'>
                    <text onClick={SaveFollow}>保存</text>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      }

    </view>
  )
})