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