16 changed files with 396 additions and 3 deletions
@ -0,0 +1,125 @@ |
|||||
|
import React, { useState } from 'react' |
||||
|
import Taro, { useDidShow } from '@tarojs/taro' |
||||
|
import { View, Picker, Input, Image } from '@tarojs/components' |
||||
|
import moment from 'moment' |
||||
|
import './index.scss' |
||||
|
import NoData from '@/components/no-data/noData' |
||||
|
import chevronDown from '../../static/img/patrolView/chevron-down.png' |
||||
|
import searchIcon from '../../static/img/patrolView/search.png' |
||||
|
import cardImg from '../../static/img/patrolView/card-img.png' |
||||
|
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' |
||||
|
|
||||
|
function Index() { |
||||
|
const [datePicker, setDatePicker] = useState(moment().format('YYYY-MM-DD')) |
||||
|
const [listData, setListData] = useState([]) |
||||
|
const [inputSite, setInputSite] = useState('') |
||||
|
const [page, setPage] = useState(0) |
||||
|
const [total, setTotal] = useState(0) |
||||
|
const [num, setNum] = useState(Math.random()) |
||||
|
const [systemInfo, setSystemInfo] = useState('') |
||||
|
|
||||
|
const data = [ |
||||
|
{ |
||||
|
place: { |
||||
|
name: '飞尚' |
||||
|
}, |
||||
|
user: { |
||||
|
name: '用户1' |
||||
|
}, |
||||
|
time: '2022-7-1' |
||||
|
} |
||||
|
] |
||||
|
|
||||
|
useDidShow(() => { |
||||
|
let refresh = Taro.getStorageSync('refresh'); // 返回列表需要刷新 |
||||
|
if (refresh) { |
||||
|
setPage(0) |
||||
|
setNum(Math.random()) |
||||
|
Taro.removeStorageSync('refresh'); // 返回列表需要刷新 |
||||
|
} |
||||
|
Taro.getSystemInfo({ |
||||
|
success: (res) => { |
||||
|
// windows | mac为pc端 |
||||
|
// android | ios为手机端 |
||||
|
setSystemInfo(res.platform); |
||||
|
} |
||||
|
}); |
||||
|
}) |
||||
|
|
||||
|
const onDateChange = e => { |
||||
|
setDatePicker(e.detail.value); |
||||
|
} |
||||
|
|
||||
|
const handleConfirm = () => { |
||||
|
setPage(0) |
||||
|
setListData([]); |
||||
|
setTotal(0); |
||||
|
setNum(Math.random()) |
||||
|
} |
||||
|
|
||||
|
const handleInput = e => { |
||||
|
setInputSite(e.detail.value); |
||||
|
if (!e.detail.value) { |
||||
|
setPage(0) |
||||
|
setListData([]); |
||||
|
setTotal(0); |
||||
|
setNum(Math.random()) |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
return ( |
||||
|
<View> |
||||
|
<View className='type-box'> |
||||
|
<View className='item left'> |
||||
|
<Image className='type-img' src={patrolIcon} /> |
||||
|
<View>巡查</View> |
||||
|
</View> |
||||
|
<View className='line'></View> |
||||
|
<View className='item'> |
||||
|
<Image className='type-img' src={conserveIcon} /> |
||||
|
<View>养护</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
<View className='filter-box'> |
||||
|
<View className='filter-item'> |
||||
|
<View style={{ float: 'left', marginLeft: '20rpx', color: '#333' }}>日期：</View> |
||||
|
<Picker className='picker' style={{ overflow: 'hidden', float: 'left' }} mode='date' end={(systemInfo == 'windows' || systemInfo == 'mac') ? moment().add(1, 'd').format('YYYY-MM-DD') : moment().format('YYYY-MM-DD')} onChange={onDateChange}> |
||||
|
<View className='filter-name'>{datePicker || '请选择'}</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={inputSite} placeholder='请输入场所名称' onConfirm={handleConfirm} onInput={handleInput} /> |
||||
|
</View> |
||||
|
</View> |
||||
|
|
||||
|
<View style={{ marginTop: '70px' }}> |
||||
|
{ |
||||
|
data && data.length > 0 ? data && data.map((e, index) => { |
||||
|
return ( |
||||
|
<View className='cardBox' key={index} onClick={() => handleDetail(index)}> |
||||
|
<View className='card-item' > |
||||
|
<Image className='card-bg' src={cardImg} /> |
||||
|
<View className='card-position'> |
||||
|
<View className='card-title'>{e.place.name}</View> |
||||
|
<View style={{ float: 'left', width: '100%', fontSize: '28rpx', marginTop: '16rpx' }}> |
||||
|
<View style={{ float: 'left' }}>填报人：</View> |
||||
|
<View style={{ float: 'left' }}>{e.user.name}</View> |
||||
|
</View> |
||||
|
<View className='card-date'>{moment(e.time).format('YYYY-MM-DD HH:mm:ss')}</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
</View> |
||||
|
) |
||||
|
}) : <NoData top='400rpx'></NoData> |
||||
|
} |
||||
|
</View> |
||||
|
</View> |
||||
|
) |
||||
|
} |
||||
|
|
||||
|
export default Index |
||||
@ -0,0 +1,135 @@ |
|||||
|
page { |
||||
|
background-color: #f6f6f6; |
||||
|
|
||||
|
.type-box { |
||||
|
background-color: #fff; |
||||
|
height: 80px; |
||||
|
display: flex; |
||||
|
justify-content: space-around; |
||||
|
align-items: center; |
||||
|
|
||||
|
.item { |
||||
|
flex-grow: 1; |
||||
|
display: flex; |
||||
|
justify-content: center; |
||||
|
align-items: center; |
||||
|
|
||||
|
.type-img { |
||||
|
width: 40px; |
||||
|
height: 40px; |
||||
|
margin: 0 10px; |
||||
|
} |
||||
|
} |
||||
|
.line { |
||||
|
|
||||
|
width: 1px; |
||||
|
height: 30px; |
||||
|
background-color: #f6f6f6; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.filter-box { |
||||
|
position: fixed; |
||||
|
top: 80px; |
||||
|
display: flex; |
||||
|
width: 100%; |
||||
|
z-index: 100; |
||||
|
background: #fff; |
||||
|
color: #999999; |
||||
|
font-size: 28rpx; |
||||
|
border-top: 2rpx solid #f6f6f6; |
||||
|
|
||||
|
.filter-item { |
||||
|
overflow: hidden; |
||||
|
height: 98rpx; |
||||
|
line-height: 98rpx; |
||||
|
flex: 1; |
||||
|
|
||||
|
.filter-name { |
||||
|
float: left; |
||||
|
// margin-left: 20rpx; |
||||
|
} |
||||
|
|
||||
|
.filter-img { |
||||
|
width: 14px; |
||||
|
height: 8px; |
||||
|
float: left; |
||||
|
margin: 46rpx 20rpx 18rpx 10rpx; |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.head-search { |
||||
|
width: 400rpx; |
||||
|
display: flex; |
||||
|
background: #fff; |
||||
|
padding: 10rpx 26rpx 15rpx; |
||||
|
box-sizing: border-box; |
||||
|
border-radius: 50rpx; |
||||
|
box-shadow: 0 8rpx 10rpx 0rpx #00000008; |
||||
|
border: 2rpx solid #00000011; |
||||
|
height: 68rpx; |
||||
|
line-height: 68rpx; |
||||
|
margin: 14rpx 30rpx 14rpx 0; |
||||
|
|
||||
|
.search-img { |
||||
|
width: 36rpx; |
||||
|
height: 36rpx; |
||||
|
margin-top: 5rpx; |
||||
|
} |
||||
|
|
||||
|
.heard-search-input { |
||||
|
margin-left: 26rpx; |
||||
|
font-size: 28rpx; |
||||
|
width: 100%; |
||||
|
color: #333; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
|
||||
|
.cardBox { |
||||
|
width: 690rpx; |
||||
|
margin: 50rpx auto; |
||||
|
|
||||
|
.card-item { |
||||
|
position: relative; |
||||
|
margin-bottom: 10rpx; |
||||
|
|
||||
|
.card-bg { |
||||
|
width: 100%; |
||||
|
height: 260rpx; |
||||
|
display: block; |
||||
|
|
||||
|
} |
||||
|
|
||||
|
.card-position { |
||||
|
position: absolute; |
||||
|
top: 0; |
||||
|
left: 0; |
||||
|
width: 88%; |
||||
|
padding: 16rpx 0 16rpx 36rpx; |
||||
|
overflow: hidden; |
||||
|
text-align: justify; |
||||
|
|
||||
|
.card-title { |
||||
|
font-size: 28rpx; |
||||
|
color: #333333; |
||||
|
float: left; |
||||
|
margin-bottom: 30rpx; |
||||
|
width: 470rpx; |
||||
|
text-overflow: ellipsis; |
||||
|
white-space: nowrap; |
||||
|
overflow: hidden; |
||||
|
margin-top: 8rpx; |
||||
|
} |
||||
|
|
||||
|
.card-date { |
||||
|
float: left; |
||||
|
font-size: 28rpx; |
||||
|
color: #999999; |
||||
|
margin-top: 30rpx; |
||||
|
width: 100%; |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
} |
||||
|
After Width: | Height: | Size: 3.6 KiB |
|
After Width: | Height: | Size: 174 B |
|
After Width: | Height: | Size: 5.2 KiB |
|
After Width: | Height: | Size: 5.4 KiB |
|
After Width: | Height: | Size: 4.1 KiB |
|
After Width: | Height: | Size: 4.0 KiB |
|
After Width: | Height: | Size: 1.0 KiB |
Loading…
Reference in new issue