You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
85 lines
2.8 KiB
85 lines
2.8 KiB
import React, { useState, useEffect } from 'react'
|
|
import Taro from '@tarojs/taro'
|
|
import { View, Image, Input, Picker, LivePlayer } from '@tarojs/components'
|
|
import request from '@/services/request'
|
|
import './index.scss'
|
|
import '../patrolView/index.scss'
|
|
import patrolIcon from '../../static/img/patrolView/patrol.svg'
|
|
import patrolActiveIcon from '../../static/img/patrolView/patrol-active.svg'
|
|
import conserveIcon from '../../static/img/patrolView/conserve.svg'
|
|
import conserveActiveIcon from '../../static/img/patrolView/conserve-active.svg'
|
|
import chevronDown from '../../static/img/patrolView/chevron-down.png'
|
|
import searchIcon from '../../static/img/patrolView/search.png'
|
|
|
|
function Index() {
|
|
const [isBus, setIsBus] = useState(true)
|
|
const [filterText, setFilterText] = useState('')
|
|
const [videoList, setVideoList] = useState([])
|
|
|
|
useEffect(() => {
|
|
getVideoList()
|
|
}, [])
|
|
|
|
const getVideoList = () => {
|
|
let nextVideoList = []
|
|
for (let i = 0; i < 10; i++) {
|
|
nextVideoList.push({ title: '视频' + i, url: '链接' + i })
|
|
}
|
|
setVideoList(nextVideoList)
|
|
}
|
|
|
|
const onTypeChange = bool => {
|
|
setIsBus(bool)
|
|
}
|
|
|
|
const handleConfirm = e => {
|
|
|
|
}
|
|
|
|
const handleInput = e => {
|
|
|
|
}
|
|
|
|
return (
|
|
<View>
|
|
<View className='type-box'>
|
|
<View className='item' onClick={() => onTypeChange(true)}>
|
|
<Image className='type-img' src={isBus ? patrolActiveIcon : patrolIcon} />
|
|
<View style={{ color: isBus ? '#346FC2' : '#999999' }}>公交</View>
|
|
</View>
|
|
<View className='line'></View>
|
|
<View className='item' onClick={() => onTypeChange(false)}>
|
|
<Image className='type-img' src={isBus ? conserveIcon : conserveActiveIcon} />
|
|
<View style={{ color: isBus ? '#999999' : '#346FC2' }}>道路</View>
|
|
</View>
|
|
</View>
|
|
<View className='filter-box'>
|
|
<View className='filter-item'>
|
|
<View style={{ float: 'left', marginLeft: '20rpx', color: '#333' }}>路段：</View>
|
|
<Picker>
|
|
<View className='filter-name'>{'请选择'}</View>
|
|
<Image className='filter-img' src={chevronDown} />
|
|
</Picker>
|
|
</View>
|
|
<View class='head-search'>
|
|
<Image className='search-img' src={searchIcon} />
|
|
<Input class='heard-search-input' value={filterText} placeholder='请输入道路名称' onConfirm={handleConfirm} onInput={handleInput} />
|
|
</View>
|
|
</View>
|
|
<View className='video-box'>
|
|
{
|
|
videoList && videoList.map(v => {
|
|
return (
|
|
<View className='video-card'>
|
|
<View className='title'>{v.title}</View>
|
|
<LivePlayer className='video' src={v.url} mode='live' />
|
|
</View>
|
|
)
|
|
})
|
|
}
|
|
</View>
|
|
</View>
|
|
)
|
|
}
|
|
|
|
export default Index
|
|
|