hlplus/src/pagesHouse/components/indexDtl/header/index.jsx

import Taro, { Component } from '@tarojs/taro'
import { View, Image } from '@tarojs/components'
import { arrToObj } from '@utils'
import './index.scss'
export default class List extends Component {
  constructor (props) {
    super(props)
    this.state = {
      curObj: {},
      navVal: 'ld',
    }
  }


  componentWillMount () {
    this.props.onRef(this)
  }

  getData = (curObj) => {
    this.setState({
      curObj,
      navVal: curObj.vr_key ? 'hp' : curObj.video ? 'video' : 'ld'
    })
  }


  pkHandle () {
    const { curObj } = this.state
    let oldPkList = Taro.getStorageSync('APP_pkList') || []
    let addFalg = true
    oldPkList.forEach(item => {
      if (String(item.id) === String(curObj.id)) {
        addFalg = false
      }
    })
    if (addFalg) {
      Taro.api.house.admestatesimple({id: curObj.id}).then(res => {
        oldPkList.unshift(res)
        if (oldPkList.length > 19) oldPkList.splice(19, 1)
        Taro.setStorageSync('APP_pkList', oldPkList)
        Taro.navigateTo({
          url: '/pagesHouse/pkList'
        })
      })
    } else {
      Taro.navigateTo({
        url: '/pagesHouse/pkList'
      })
    }
  }
  headerImgChange (e) {
    this.setState({
      curImgIndex: e.detail.current || 0
    })
  }
  previewImageHandle (cur, arr) {
    const current = `${cur}_plus`
    const urls = arr.map(item => {
      return `${item}_plus`
    })
    Taro.previewImage({
      current,
      urls
    })
  }

  renderNav () {
    const {  curObj, navVal } = this.state

    const baseNavItems = [{name: '楼栋图', val: 'ld'}, {name: '图片', val: 'tp'}]
    let navArr = [...baseNavItems]
    if (curObj.video) {
      navArr.unshift({name: '视频', val: 'video'})
    }
    if (curObj.vr_key) {
      navArr.unshift({name: '航拍', val: 'hp'})
    }

    const curItems = navArr.map((item, index) => {
      return (
        <View className={navVal === item.val ? 'op cur' : 'op'} key={index} onClick={this.navClick.bind(this, item)}>{item.name}</View>
      )
    })
    return (
      <View className={curObj.vr_key ? 'sh-nav' : 'sh-nav  t2'}>
        <View className="main">
          <View className="bg"></View>  
          <View className="content">
            {curItems}
          </View>
          </View>
      </View>
    )
  }
  navClick (item) {
    if (item.val === 'tp') {
      const {  curObj } = this.state
      Taro.navigateTo({
        url: `/pagesHouse/photo?id=${curObj.id}&name=${curObj.estate_naem}`
      })
    } else {
      this.setState({
        navVal: item.val
      })
    }
  }

  
  render () {
    const { curObj, navVal } = this.state
    const iconPk = require('./img/PK.png')
    const iconShare = require('./img/share.png')
    const ed1 = require('./img/bg_ed1.png')
    const ed2 = require('./img/bg_ed2.png')
    const hpI1 = require('@img/icon_hp_1.png')
    const vrhx = require('@img/icon_vr.png')
    const hpI2 = require('@img/icon_hp_2.gif')
    const iconView = require('@img/icon_g_eye.png')
    return (
      <View className="scoped-header">
        {
          curObj.view_count
          ?
          <View className="view-num">
            <View className="bg"></View>
            <View className="content">
              <Image src={iconView} className="i" />
              <View className="t">{String((curObj.view_count * 11 + 1000) / 10000).substring(0, 4)}w</View>
            </View>
          </View>
          : ''
        }
        {
          curObj.tagDefine1 === '现房'
          ? <Image src={ed1} className="bg-t-r" />
          : ''
        }
        {
          curObj.tagDefine1 === '准现房'
          ? <Image src={ed2} className="bg-t-r" />
          : ''
        }
        {
          curObj.custom_tag && curObj.custom_tag.indexOf('户型VR') > -1
          ? 
            <Navigator url={'/pagesHouse/produceType?id=' + curObj.id + '&name=' + curObj.estate_name} className="scoped-hx-vr">
              <View className="text">
                <View className="bg"></View>
                <View className="t">户型VR</View>
              </View>
              <Image src={vrhx} className="i" />
            </Navigator>
          : ''
        }
        {
          navVal === 'hp'
          ?
          <Navigator url={`/pagesHouse/vrList?eid=${curObj.id}&id=${curObj.vr_key}&estateName=${curObj.estate_name}`} className="sh-img">
            <View className="icon">
              <Image src={hpI1} className="i i1" />
              <Image src={hpI2} className="i i2" />
            </View>
            <Image src={curObj.vr_image} className="img" />  
          </Navigator>
          : ''
        }
        {
          navVal === 'video'
          ?
          <View className='sh-img'>
            <Video
              className="img"
              src={curObj.video}
              controls={true}
              autoplay={false}
              initialTime='0'
              id='video'
              loop={false}
              muted={false}
            />
          </View>
          : ''
        }
        {
          navVal === 'ld'
          ?
          <View className="sh-img">
            <Image src={curObj.pri_image ? curObj.pri_image + '_white' : ''} className="img" onClick={this.previewImageHandle.bind(this, curObj.pri_image, [curObj.pri_image])} />  
          </View>
          : ''
        }
        <View className="sh-icon-right pk" onClick={this.pkHandle.bind(this)}>
          <Image className="img" src={iconPk} />
        </View>
        <Button className="sh-icon-right btn-to-div" openType="share">
          <Image className="img" src={iconShare} />
        </Button>
        {this.renderNav()}
      </View>
    )
  }
}