巡查养护页面完善

weapp/src/packages/patrol/index.jsx

@@ -1,4 +1,5 @@
 import React, { useState, useEffect } from 'react';
+import Taro from '@tarojs/taro';
 import {
   View,
   RadioGroup,
@@ -37,7 +38,7 @@ const Index = () => {
   ]
 
   useEffect(() => {
-    const prjTypeSelector = ['道路', '桥梁', '涵洞']
+    const prjTypeSelector = ['道路', '桥梁', '涵洞', '其他']
     const roadSelector = ['富山一路', '金沙大道', '玉湖路']
     setPrjTypeSelector(prjTypeSelector)
     setRoadSelector(roadSelector)
@@ -66,10 +67,19 @@ const Index = () => {
     setProjectType(selector[e.detail.value])
   }
 
-  function onImgPickerChange() {
-
+  function onImgPickerChange(files) {
+    setimages(files)
+  }
+  function onImageClick(index, file) {
+    Taro.previewImage({
+      urls: [file.url] // 需要预览的图片http链接列表
+    })
   }
 
+  useEffect(() => {
+    console.log(images);
+  }, [images])
+
   return (
     <View className='patrol'>
       <View className='report-type'>
@@ -142,14 +152,16 @@ const Index = () => {
       <View className='input-picker'>
         <AtInput
           className='input'
-          title='所属路段:'
+          title='所属路段：'
           type='text'
           placeholder='路段名称'
           border={false}
         // value={this.state.value}
         // onChange={this.handleChange.bind(this, 'value')}
         />
-        <Image src={arrowIcon} className='img-l' />
+        <Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}>
+          <Image src={arrowIcon} className='img-l' />
+        </Picker>
         <AtInput
           className='input'
           type='text'
@@ -158,43 +170,71 @@ const Index = () => {
         // value={this.state.value}
         // onChange={this.handleChange.bind(this, 'value')}
         />
-        <Image src={arrowIcon} className='img-r' />
+        <Picker mode='selector' range={roadSelector} onChange={onPrjTypeChange}>
+          <Image src={arrowIcon} className='img-r' />
+        </Picker>
       </View>
 
-      <View>
-        <AtTextarea
-          count={false}
-          title='具体位置:'
-          type='text'
-          placeholder='具体位置：根据定位自动获取，可手动修改'
-          border={false}
-        // value={this.state.value}
-        // onChange={this.handleChange.bind(this, 'value')}
-        />
-      </View>
+      <AtTextarea
+        count={false}
+        title='具体位置：'
+        placeholder='具体位置：根据定位自动获取，可手动修改'
+      // value={this.state.value}
+      // onChange={this.handleChange.bind(this, 'value')}
+      />
+      <AtTextarea
+        count={false}
+        title='巡查内容：'
+        placeholder='请输入巡查内容'
+      // value={this.state.value}
+      // onChange={this.handleChange.bind(this, 'value')}
+      />
 
       {
         isPatrol ?
-          <View className='img-picker'>
+          <View className='patrol-picker'>
             现场图片：
             <AtImagePicker
-              length={3}
+              className='img-picker'
+              count={3 - images.length}
+              showAddBtn={images.length >= 3 ? false : true}
               files={images}
               onChange={onImgPickerChange}
+              onImageClick={onImageClick}
             />
           </View> :
-          <View>
+          <View className='conserve-picker'>
             养护图片:
-            <AtTimeline
-              items={[
-                {
-                  title: '养护前', 
-                },
-                { title: '养护中' },
-                { title: '养护后' }
-              ]}
-            >
-            </AtTimeline>
+            <View className='horizontal-line hl-one'>
+              <View className='circle c-one'></View>
+              <View className='text t-one'>养护前</View>
+            </View>
+            <AtImagePicker
+              className='img-picker'
+              count={3}
+              files={images}
+              onChange={onImgPickerChange}
+            />
+            <View className='horizontal-line hl-two'>
+              <View className='circle c-two'></View>
+              <View className='text t-two'>养护中</View>
+            </View>
+            <AtImagePicker
+              className='img-picker'
+              count={3}
+              files={images}
+              onChange={onImgPickerChange}
+            />
+            <View className='horizontal-line hl-three'>
+              <View className='circle c-three'></View>
+              <View className='text t-three'>养护后</View>
+            </View>
+            <AtImagePicker
+              className='img-picker'
+              count={3}
+              files={images}
+              onChange={onImgPickerChange}
+            />
           </View>
       }
 

weapp/src/packages/patrol/index.scss

@@ -40,12 +40,77 @@
     }
   }
 
-  .img-picker {
+  .patrol-picker {
     background-color: #fff;
+    padding: 20px;
 
   }
 
+  .conserve-picker {
+    background-color: #fff;
+    padding: 20px;
+
+    .horizontal-line {
+      height: 30px;
+      width: 100%;
+      display: flex;
+      justify-content: left;
+      align-items: center;
+
+      .circle {
+        margin-left: 4px;
+        width: 22px;
+        height: 22px;
+        background-color: #fff;
+        border-radius: 50%;
+      }
+
+      .text {
+        margin-left: 46px;
+        font-size: 24px;
+      }
+    }
+    .hl-one {
+      background-color: #DFDFDF;
+
+      .c-one {
+        border: solid 4px #999999;
+      }
+
+      .t-one {
+        color: #999999;
+      }
+    }
+    .hl-two {
+      background-color: #f7d3a5;
+
+      .c-two {
+        border: solid 4px #FE9B1C;
+      }
+
+      .t-two {
+        color: #FE9B1C;
+      }
+    }
+    .hl-three {
+      background-color: #a0f3a4;
+
+      .c-three {
+        border: solid 4px #08D514;
+      }
+
+      .t-three {
+        color: #08D514;
+      }
+    }
+
+    .img-picker {
+      margin: 20px;
+    }
+  }
+
   .sub-btn {
     width: 70%;
+    margin-top: 100px;
   }
 }