miniapp/src/subpackages/pages/consultant/myHomepage/index.jsx

import { useState, useEffect } from 'react'
import Taro from '@tarojs/taro'
import withLayout from '@/layout'
import { ScrollView, Image, Button } from '@tarojs/components'
import ProjectListItem from '@/components/ProjectListItem/index'
import { useSelector } from 'react-redux'
import { fetch } from '@/utils/request'
import { API_CARDS_UV, API_ITEMS_DETAIL, API_CARDS_LIST } from '@/constants/api'
import { getImgURL } from '@/utils/image'
import useLike from "@/utils/hooks/useLike";
import '@/assets/css/iconfont.css'
import './index.scss'

export default withLayout((props) => {

  const { router, trackData } = props
  const { id } = router.params
  
  const [IsPull, setPull] = useState(false)
  const [ShowPopup, setShowPopup] = useState(false)
  const [PullTimer, setPullTimer] = useState(null)
  const [UserInfo, setUserInfo] = useState({})
  const [BuildingInfo, setBuildingInfo] = useState({})
  const [LikeNum, setLikeNum] = useState(0)

  const user = useSelector(state => state.user)
  const [PersonId, setPersonId] = useState(null)

  const [isSave, handleFavor] = useLike(UserInfo?.liked, {
    id: id || user.userInfo.person.personId,
    ...trackData,
    eventType: 'consultant'
  }, () => {
    if(!isSave) {
      AddHotNum()
    }
    const likeNum = isSave ? UserInfo.likeNum - 1 : UserInfo.likeNum + 1
    setLikeNum(likeNum)
  })

  useEffect(() => {
    if(UserInfo.id) {
      setLikeNum(UserInfo.likeNum)
    }
  }, [UserInfo])

  useEffect(() => {
    if (PersonId !== user.userInfo.person.personId) {
      if(id) {
        fetch({ url: `${API_CARDS_LIST}/${id}`, method: 'get' }).then((res) => {
          setUserInfo(res)
        })
      } else {
        setPersonId(user.userInfo.person.personId)
      }
    }
  }, [user])

  useEffect(() => {
    if (PersonId) {
      // GetUserInfo()
      fetch({ url: `${API_CARDS_LIST}/${PersonId}`, method: 'get' }).then((res) => {
        setUserInfo(res)
      })
    }
  }, [PersonId])

  useEffect(() => {
    if (UserInfo.buildingId && !BuildingInfo.buildingId) {
      GetBuildingInfo()
    }
  }, [UserInfo])

  const AddHotNum = () => {
    fetch({ url: API_CARDS_UV + `/${id || PersonId}`, method: 'post' }).then(() => {
      setUserInfo({...UserInfo, hotNum: (UserInfo.hotNum || 0) - 0 + 1})
    })
  }

  const GetBuildingInfo = () => {
    fetch({ url: `${API_ITEMS_DETAIL}/${UserInfo.buildingId}`, method: 'get', showToast: false }).then((res) => {
      setBuildingInfo(res)
    })
  }

  const PageRefresh = () => { // 页面下拉刷新回调
    setPull(true)
  }

  useEffect(() => { // 下拉刷新触发
    if (IsPull) {
      clearTimeout(PullTimer)
      setPullTimer(setTimeout(() => {
        setPull(false)
      }, 2000))
    }
  }, [IsPull])

  return (
    <view className='Page myHomepage'>

      <ScrollView scroll-y refresher-enabled refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#fff'>
        <view className='PageContent'>

          <view className='Card UserInfo'>
            <view className='flex-h Top'>
              <view className='Icon'>
                <Image mode='aspectFill' src={getImgURL(UserInfo.userPhoto || UserInfo.photo || UserInfo.avatarurl || UserInfo.avatar || UserInfo.picture)}></Image>
              </view>
              <view className='flex-item'>
                <view className='flex-h'>
                  <view className='flex-item'>
                    <text>{UserInfo.name} {UserInfo.phone}</text>
                  </view>
                  <text onClick={handleFavor} className='iconfont icon-dianzan' style={isSave ? { color: 'red' } : undefined}></text>
                  <text onClick={handleFavor}>{isSave ? `已点赞` : '赞'}</text>
                </view>
                <view className='Tag'>
                  <view>
                    <Image mode='heightFix' src={require('@/assets/mine-icon28.png')}></Image>
                    <text>金牌置业顾问</text>
                  </view>
                </view>
              </view>
            </view>
            <view className='Work flex-h'>
              <view className='flex-item'>
                <text>{UserInfo.department || '-'}</text>
                <text>部门</text>
              </view>
              <view className='flex-item'>
                <text>{UserInfo.post || '-'}</text>
                <text>职位</text>
              </view>
              <view className='flex-item'>
                <text>{UserInfo.buildingName || '-'}</text>
                <text>楼盘</text>
              </view>
            </view>
            <view className='Hot flex-h'>
              <view className='flex-item'>
                {
                  (UserInfo.visitRecords || []).map((item, index) => (
                    <view key={`UserItem-${index}`}>
                      <Image mode='aspectFill' src={item.avatar}></Image>
                    </view>
                  ))
                }
              </view>
              <text className='iconfont icon-renqi'></text>
              <text>人气值{(UserInfo.hotNum || 0) + 999}</text>
            </view>
          </view>

          <view className='Card DetailInfo'>
            <text className='Title'>详细信息</text>
            <view className='flex-h'>
              <text className='iconfont icon-dianhua'></text>
              <text>手机：</text>
              <view className='flex-item'>
                <text>{UserInfo.phone}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text className='iconfont icon-dingwei'></text>
              <text>地址：</text>
              <view className='flex-item'>
                <text>{UserInfo.address || '暂无地址'}</text>
              </view>
            </view>
            <view className='flex-h'>
              <text className='iconfont icon-jianjie'></text>
              <text>简介：</text>
              <view className='flex-item'>
                <text className='active'>{UserInfo.description || '暂无简介'}</text>
              </view>
            </view>
            <view className='Btn'>
              <Button className='Share' open-type='share'>分享主页</Button>
            </view>
          </view>

          {
            !!BuildingInfo.buildingId &&
            <view className='ProjectList'>
              <view className='flex-h'>
                <view className='flex-item'>
                  <text>项目信息</text>
                </view>
                <text onClick={() => { Taro.navigateTo({ url: `/pages/index/buildingList/index` }) }}>更多</text>
                <text className='iconfont icon-jiantouright'></text>
              </view>
              <view className='List'>
                <ProjectListItem Data={BuildingInfo}></ProjectListItem>
              </view>
            </view>
          }


          {/* bottom */}
          <view className='PageBottom'>
            <text>已经到底了~</text>
          </view>

        </view>
      </ScrollView>

      {
        ShowPopup &&
        <view className='SharePopup'>
          <view>
            <view className='flex-v'>
              <view className='Top flex-h'>
                <view className='flex-item'>
                  <text>保存后分享图片</text>
                </view>
                <text className='iconfont icon-guanbi' onClick={() => { setShowPopup(false) }}></text>
              </view>
              <view className='flex-item'>
                <view>
                  <view>
                    <Image className='centerLabel' mode='aspectFill' src={null}></Image>
                  </view>
                </view>
              </view>
              <view className='Btn'>
                <text>保存海报</text>
              </view>
            </view>
          </view>
        </view>
      }

    </view>
  )
})