miniapp/src/components/ProjectItemCard/index.jsx

import Taro from '@tarojs/taro'
import { Image } from '@tarojs/components'
import { getImgURL } from '@/utils/image'
import './style.scss'

export default (props) => {
  const { Data = {} } = props

  const goto = (it) => {
    Taro.navigateTo({
      url: `/pages/index/buildingDetail/index?id=${it.buildingId}`
    })
  }

  return (
    <view className='components ProjectItemCard'>
      <view className='Img' onClick={() => goto(Data)}>
        <Image mode='scaleToFill' src={getImgURL(Data?.buildingListImg?.length ? Data.buildingListImg[0].url : null)} className='centerLabel'></Image>
          {
            Data.panoramaList.length > 0 &&
            <Image mode='heightFix' className='Tips Vr' src={require('@/assets/index-icon18.png')} />
          }
          {
            Data.videoUrl !== null &&
            <Image mode='heightFix' className='Tips Video' src={require('@/assets/index-icon19.png')} />
          }
      </view>
      <view className='Name flex-h' onClick={() => goto(Data)}>
        <view className='flex-item'>
          <text>{Data.buildingName}</text>
        </view>
        <text></text>
        <text>{Data.price || '价格待定'}</text>
      </view>
      <text className='Address' onClick={() => goto(Data)}>{Data.address}</text>
      <view className='Tag' onClick={() => goto(Data)}>
        {
          (Data.buildingTag || []).map(x => x.tagName).slice(0, 6).map((x) => (<text key={x}>{x}</text>))
        }
      </view>
      <view className='Views flex-h' onClick={() => goto(Data)}>
        <view className='flex-item'>
          <text className='iconfont icon-fenxiang'></text>
          <text>{`${Data.shareList?.total || 0} 次分享`}</text>
        </view>
        {
          (Data.uvList?.length || 0) > 0 && (
            <view className='Icons'>
              {
                Data.uvList.map((x) => (
                  <view key={x.uvId}>
                    <Image mode='scaleToFill' src={getImgURL(x.photoOravatar)} className='centerLabel'></Image>
                  </view>
                ))
              }
            </view>
          )
        }
        <text>{`...${Data.uvList?.length || 0}人围观`}</text>
      </view>
      {props.children}
    </view>
  )
}