Browse Source

巡查养护页面

release_0.0.1
liujiangyong 2 years ago
parent
commit
fcea9240bb
  1. 3
      weapp/src/packages/patrol/index.config.js
  2. 203
      weapp/src/packages/patrol/index.jsx
  3. 51
      weapp/src/packages/patrol/index.scss
  4. 2
      weapp/src/pages/auth/login/login.scss
  5. 4
      weapp/src/pages/home/index.scss
  6. 0
      weapp/src/static/img/home/fill-bg.svg
  7. 15
      weapp/src/static/img/patrol/arrow-down.svg

3
weapp/src/packages/patrol/index.config.js

@ -0,0 +1,3 @@
export default {
navigationBarTitleText: '巡查养护'
}

203
weapp/src/packages/patrol/index.jsx

@ -1,9 +1,206 @@
import React from 'react'
import { View } from '@tarojs/components';
import React, { useState, useEffect } from 'react';
import {
View,
RadioGroup,
Radio,
Button,
Image,
Input,
Textarea,
Picker
} from '@tarojs/components';
import { AtForm, AtInput, AtButton, AtTextarea, AtImagePicker, AtTimeline } from 'taro-ui';
// import InputPicker from '../components/inputPicker';
import './index.scss';
import arrowIcon from '../../static/img/patrol/arrow-down.svg';
const Index = () => {
const [isPatrol, setIsPatrol] = useState(true) // or
const [prjTypeSelector, setPrjTypeSelector] = useState([])
const [roadSelector, setRoadSelector] = useState([])
const [projectType, setProjectType] = useState('')
const [road, setRoad] = useState('')
const [images, setimages] = useState([])
const reportType = [
{
value: '巡查',
text: '巡查',
checked: true
},
{
value: '养护',
text: '养护',
checked: false
}
]
useEffect(() => {
const prjTypeSelector = ['道路', '桥梁', '涵洞']
const roadSelector = ['富山一路', '金沙大道', '玉湖路']
setPrjTypeSelector(prjTypeSelector)
setRoadSelector(roadSelector)
}, [])
useEffect(() => {
if (projectType) {
setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType)))
}
}, [projectType])
// useEffect(() => {
// if (projectType) {
// setPrjTypeSelector(prjTypeSelector.filter(s => s.includes(projectType)))
// }
// }, [projectType])
function onTypeChange(e) {
if (e.detail.value === '巡查') {
setIsPatrol(true)
} else {
setIsPatrol(false)
}
}
function onPrjTypeChange(e) {
setProjectType(selector[e.detail.value])
}
function onImgPickerChange() {
}
return (
<View>巡查养护</View>
<View className='patrol'>
<View className='report-type'>
<View className='text'>上报类型</View>
<RadioGroup onChange={onTypeChange}>
{
reportType.map((item, i) => {
return (
<Radio
key={i}
value={item.value}
checked={item.checked}
className='radio'
color='#346FC2'
>
{item.text}
</Radio>
)
})
}
</RadioGroup>
</View>
<View className='input-picker'>
<AtInput
className='input'
title='工程类型:'
type='text'
placeholder='请选择工程类型'
border={false}
value={projectType}
onChange={value => setProjectType(value)}
/>
<Picker mode='selector' range={prjTypeSelector} onChange={onPrjTypeChange}>
<Image src={arrowIcon} className='img-r' />
</Picker>
</View>
<View className='input-picker'>
<AtInput
className='input'
title='所在道路:'
type='text'
placeholder='请选择您所在的道路'
border={false}
value={road}
onChange={value => setRoad(value)}
/>
<Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}>
<Image src={arrowIcon} className='img-r' />
</Picker>
</View>
{/* <InputPicker
className='input-picker'
title='工程类型:'
placeholder='请选择工程类型'
value={projectType}
onChange={setProjectType}
selector={prjTypeSelector}
/>
<InputPicker
className='input-picker'
title='所在道路:'
placeholder='请选择您所在的道路'
value={road}
onChange={setRoad}
selector={roadSelector}
/> */}
<View className='input-picker'>
<AtInput
className='input'
title='所属路段:'
type='text'
placeholder='路段名称'
border={false}
// value={this.state.value}
// onChange={this.handleChange.bind(this, 'value')}
/>
<Image src={arrowIcon} className='img-l' />
<AtInput
className='input'
type='text'
placeholder='路段名称'
border={false}
// value={this.state.value}
// onChange={this.handleChange.bind(this, 'value')}
/>
<Image src={arrowIcon} className='img-r' />
</View>
<View>
<AtTextarea
count={false}
title='具体位置:'
type='text'
placeholder='具体位置:根据定位自动获取,可手动修改'
border={false}
// value={this.state.value}
// onChange={this.handleChange.bind(this, 'value')}
/>
</View>
{
isPatrol ?
<View className='img-picker'>
现场图片
<AtImagePicker
length={3}
files={images}
onChange={onImgPickerChange}
/>
</View> :
<View>
养护图片:
<AtTimeline
items={[
{
title: '养护前',
},
{ title: '养护中' },
{ title: '养护后' }
]}
>
</AtTimeline>
</View>
}
<AtButton formType='submit' type='primary' className='sub-btn'>上报</AtButton>
</View>
)
}

51
weapp/src/packages/patrol/index.scss

@ -0,0 +1,51 @@
.patrol {
height: 100vh;
width: 100vw;
background-color: #f6f6f6;
padding-top: 20px;
.report-type {
height: 96px;
background-color: #fff;
margin-bottom: 20px;
display: flex;
justify-content: space-between;
align-items: center;
.text {
margin-left: 30px;
}
.radio {
margin-right: 30px;
}
}
.input-picker {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #fff;
margin-bottom: 5px;
.img-r {
width: 24px;
height: 14px;
margin-right: 30px;
// margin-left: 10px;
}
.img-l {
width: 24px;
height: 14px;
}
}
.img-picker {
background-color: #fff;
}
.sub-btn {
width: 70%;
}
}

2
weapp/src/pages/auth/login/login.scss

@ -1,5 +1,3 @@
@import "~taro-ui/dist/style/components/divider.scss";
.page {
height: 100vh;
background: #fff;

4
weapp/src/pages/home/index.scss

@ -8,7 +8,7 @@
padding: 10px;
width: 94%;
height: 360px;
background: url('../../static/img/patrol//fill-bg.svg') no-repeat;
background: url('../../static/img/home/fill-bg.svg') no-repeat;
background-size: 100% 100%;
}
@ -19,7 +19,7 @@
}
.btn {
margin: 20px 0 0 50px;
margin: 30px 0 0 50px;
color: #fff;
text-align: center;
width: 200px;

0
weapp/src/static/img/patrol/fill-bg.svg → weapp/src/static/img/home/fill-bg.svg

Before

Width:  |  Height:  |  Size: 12 KiB

After

Width:  |  Height:  |  Size: 12 KiB

15
weapp/src/static/img/patrol/arrow-down.svg

@ -0,0 +1,15 @@
<?xml version="1.0" encoding="UTF-8"?>
<svg width="12px" height="7px" viewBox="0 0 12 7" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<title>chevron-down</title>
<g id="页面-1" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd" fill-opacity="0.65">
<g id="首页_巡查养护-填写(第三方)" transform="translate(-349.000000, -164.000000)" fill="#000000" fill-rule="nonzero">
<g id="编组-5" transform="translate(0.000000, 80.000000)">
<g id="卡片-/-通栏" transform="translate(0.000000, 63.000000)">
<g id="chevron-down" transform="translate(349.000000, 21.000000)">
<path d="M1.46323438,0.256281566 C1.12849928,-0.0854271888 0.585786438,-0.0854271888 0.25105133,0.256281566 C-0.0836837768,0.597990322 -0.0836837768,1.15200968 0.25105133,1.49371843 L5.39390847,6.74371843 C5.72864358,7.08542719 6.27135642,7.08542719 6.60609153,6.74371843 L11.7489487,1.49371843 C12.0836838,1.15200968 12.0836838,0.597990322 11.7489487,0.256281566 C11.4142136,-0.0854271888 10.8715007,-0.0854271888 10.5367656,0.256281566 L6,4.88756313 L1.46323438,0.256281566 Z" id="Shape"></path>
</g>
</g>
</g>
</g>
</g>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB

Loading…
Cancel
Save