miniapp/src/pages/index/buildingDetail/components/PropertyConsultant/index.jsx

import { Image } from '@tarojs/components'
import Taro from '@tarojs/taro'
import '@/assets/css/iconfont.css'
import './index.scss'

const TipsList = [
  {name: '官方保障', icon: 'icon-baozhang'},
  {name: '免费咨询', icon: 'icon-zixun'},
  {name: '户型解读', icon: 'icon-jiedu'},
  {name: '贴心服务', icon: 'icon-tiexin'}
]

export default function PropertyConsultant (props) {
  const { Info } = props
  const List = Info?.consultants || []

  const CallPhone = (phone) => { // 拨打电话
    Taro.makePhoneCall({ phoneNumber: phone })
  }

  const handleMore = () => {
    Taro.navigateTo({
      url: `/pages/index/buildingPropertyConsultant/index?buildingId=${Info?.buildingId}`
    })
  }

  const handleChat = (item) => {
    Taro.navigateTo({
      url: `/pages/chat/chatDetail/index?friend=${item.id}`
    })
  }
  
  const gotoDetail = (item) => {
    Taro.navigateTo({
      url: `/subpackages/pages/consultant/myHomepage/index?id=${item.id}`
    })
  }

  return List.length > 0 ? (
    <view className='components PropertyConsultant'>

      <view className='Title flex-h'>
        <view className='flex-item'>
          <text>置业顾问</text>
        </view>
        <text onClick={handleMore}>更多</text>
        <text className='iconfont icon-jiantouright'></text>
      </view>

      <view className='TipsList flex-h'>
        {
          TipsList.map((item, index) => (
            <view className='flex-item' key={`TipsItem-${index}`}>
              <text className={`iconfont ${item.icon}`}></text>
              <text>{item.name}</text>
            </view>
          ))
        }
      </view>

      <view className='PersonList'>
        {
          List.map((item, index) => (
            <view key={`PersonItem-${index}`} className='flex-h'>
              <view className='Icon' onClick={() => gotoDetail(item)}>
                <Image mode='aspectFill' src={item.photo || item.avatarurl || item.avatar || item.picture}></Image>
              </view>
              <view className='flex-item' onClick={() => gotoDetail(item)}>
                <text>{item.userName}</text>
                <text>{item.description || ''}</text>
              </view>
              <text className='iconfont icon-liaotian Chat' onClick={() => handleChat(item)}></text>
              <text className='iconfont icon-dianhua Phone' onClick={() => CallPhone(item.phone || item.tel)}></text>
            </view>
          ))
        }
      </view>

    </view>
  ) : null
}