import React, {Component} from 'react'
|
// import PropTypes from 'prop-types'
|
// import { is, fromJS } from 'immutable'
|
import { TabBar, Toast } from 'antd-mobile'
|
|
import Api from '@/api'
|
import '@/assets/css/style.css'
|
import './index.scss'
|
|
class NavBar1 extends Component {
|
static propTpyes = {}
|
|
state = {
|
selectedTab: ''
|
}
|
|
UNSAFE_componentWillMount () {
|
if (!this.props.location.state) {
|
Api.getMockData({
|
func: 'sPC_Get_LongParam',
|
MenuID: this.props.match.params.viewId,
|
TypeCharOne: 'mob'
|
}).then((res) => {
|
if (res.status) {
|
let config = ''
|
|
try {
|
// config = JSON.parse(window.decodeURIComponent(window.atob(res.LongParam)))
|
config = res.LongParam
|
} catch {
|
config = ''
|
}
|
|
if (!config) {
|
Toast.fail('配置解析错误!', 3)
|
return
|
}
|
|
let _config = config.components[0]
|
|
if (_config && _config.sublist && _config.sublist[0]) {
|
let _url = window.location.href.replace(/#(.*)/ig, '#/tabview/')
|
|
_config.sublist = _config.sublist.map((item, index) => {
|
item.url = _url + item.uuid
|
item.index = index
|
|
return item
|
})
|
|
this.setState({
|
selectedTab: _config.sublist[0].field,
|
config: _config
|
})
|
if (window.GLOB.systemType === 'ios' && window.webkit) {
|
let options = _config.sublist.map(item => ({url: item.url}))
|
|
window.webkit.messageHandlers.initContentFragments.postMessage(JSON.stringify(options))
|
window.webkit.messageHandlers.clickNavigation.postMessage(0)
|
} else if (window.GLOB.systemType === 'android' && window.android) {
|
let options = _config.sublist.map(item => ({url: item.url}))
|
|
window.android.initContentFragments(JSON.stringify(options))
|
window.android.clickNavigation(0)
|
}
|
}
|
} else {
|
Toast.fail(res.message, 3)
|
}
|
})
|
} else if (!this.props.location.state) {
|
this.props.history.replace({pathname: `/loading/${this.props.match.params.viewId}`})
|
return
|
} else {
|
let _config = this.props.location.state.config.components[0]
|
|
if (_config.sublist && _config.sublist[0]) {
|
this.setState({
|
selectedTab: _config.sublist[0].field,
|
config: _config
|
})
|
}
|
}
|
}
|
|
// shouldComponentUpdate (nextProps, nextState) {
|
// return !is(fromJS(this.props), fromJS(nextProps)) || !is(fromJS(this.state), fromJS(nextState))
|
// }
|
|
changeTab = (item) => {
|
this.setState({
|
selectedTab: item.field
|
})
|
if (window.GLOB.systemType === 'ios' && window.webkit) {
|
window.webkit.messageHandlers.clickNavigation.postMessage(item.index)
|
} else if (window.GLOB.systemType === 'android' && window.android) {
|
window.android.clickNavigation(item.index)
|
}
|
}
|
|
render () {
|
const { config, selectedTab } = this.state
|
|
return (
|
<div className="tab-bar-wrap">
|
<TabBar
|
unselectedTintColor="#949494"
|
tintColor="#33A3F4"
|
barTintColor="white"
|
>
|
{config && config.sublist.map(item => (
|
<TabBar.Item
|
title={item.label}
|
key={item.field}
|
icon={<i className={item.icon} />}
|
selectedIcon={<i className={item.icon} />}
|
selected={selectedTab === item.field}
|
onPress={() => {this.changeTab(item)}}
|
>
|
</TabBar.Item>
|
))}
|
</TabBar>
|
</div>
|
)
|
}
|
}
|
|
export default NavBar1
|