feats

src/app.config.js

@@ -3,6 +3,8 @@ export default defineAppConfig({
   pages: [
     'pages/home/index',
     'pages/login/index',
+    'pages/issue/list/index',
+    'pages/issue/detail/index',
     'pages/index3/index',
     'pages/index4/index',
     'pages/index5/index',

src/app.less

@@ -12,12 +12,10 @@ page {
   --button-primary-background-color: var(--main-bg-color);
   // 菊花转主色
   --loading-spinner-color: var(--main-bg-color);
+  // tab 划线颜色
+  --tabs-bottom-bar-color: var(--main-bg-color);
 }
 
 view {
   box-sizing: border-box;
 }
-
-.page-wrapper {
-
-}

src/components/NavLoading/index.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import style from './style.module.less';
+
+export default (props) => {
+
+  const { loading } = props;
+  const [percent, setPercent] = React.useState(0);
+  const percentRef = React.useRef(0);
+  const tickerRef = React.useRef();
+  const startRef = React.useRef(false);
+
+  React.useEffect(() => {
+    if (loading) {
+      startRef.current = true;
+      
+      // 先前进一点, 大约 3s 内走 94%
+      const firstS = 94;
+      const startS = 4;
+      percentRef.current = startS;
+      setPercent(percentRef.current);
+
+      const step = (firstS - startS) / 300;
+      tickerRef.current = setInterval(() => {
+        percentRef.current += step;
+        setPercent(percentRef.current);
+
+        if (percentRef.current >= 94) {
+          clearInterval(tickerRef.current);
+          tickerRef.current = null;
+        }
+      }, 100);
+    } else {
+      // 还没开始
+      if (!startRef.current) return ;
+
+      // 剩下的在 200ms 内走完
+      clearInterval(tickerRef.current);
+      const leftS = 100 - percentRef.current;      
+      const step = leftS / 20;
+      tickerRef.current = setInterval(() => {  
+        percentRef.current += step;
+        setPercent(percentRef.current);
+
+        if (percentRef.current >= 100) {
+          clearInterval(tickerRef.current);
+          tickerRef.current = null;
+          startRef.current = false;
+        }
+      }, 10);
+    }
+  }, [loading]);
+  
+  return (
+    <View className={`${style['nav-loading']} ${percent >= 100 ? style.hidden : ''}`}>
+      <View className={style['nav-loading-bar']} style={{ width: `${percent}%` }}></View>
+    </View>
+  )
+}

src/components/NavLoading/style.module.less

@@ -0,0 +1,22 @@
+
+.nav-loading {
+  position: fixed;
+  z-index: 1000;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 6px;
+  background: transparent;
+  opacity: 1;
+  transition: opacity 200ms;
+
+  &.hidden {
+    opacity: 0;
+  }
+
+  .nav-loading-bar {
+    width: 0%;
+    height: 100%;
+    background-color: var(--main-bg-color);
+  }
+}

src/components/PowerList/index.jsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { PowerScrollView } from '@antmjs/vantui';
+
+export default (props) => {
+  const { request, params = {}, renderItem } = props;
+
+  const pageSize = 20;
+  const pageNumRef = React.useRef(1);
+  const listRef = React.useRef([]);
+  const [list, setList] = React.useState([]);
+  const [finished, setFinished] = React.useState(true);
+  listRef.current = list;
+
+  const queryData = React.useCallback((options = {}) => {
+    return new Promise((resolve, reject) => {
+      request({
+        pageSize,
+        ...params,
+        ...options
+      }).then((res) => {
+        const { records, current, pages } = res;
+
+        if (current == 1) {
+          setList(records || []);
+        } else {
+          setList(listRef.current.concat(records || []));
+        }
+
+        setFinished(current >= pages);
+        resolve();
+      }).catch((err) => {
+        reject(err);
+      });
+    });
+  }, [request, params]);
+
+  const onScrollToLower = React.useCallback((event = 0, isRefresh = false) => {
+    pageNumRef.current += 1;
+    return queryData({pageNum : pageNumRef.current});
+  }, [queryData]);
+
+  React.useEffect(() => {
+    pageNumRef.current = 1;
+    queryData({pageNum : pageNumRef.current});
+  }, [queryData])
+  
+  return (
+    <PowerScrollView
+      scrollY
+      finishedText="没有更多了"
+      refresherEnabled={false}
+      current={list.length}
+      pageSize={pageSize}
+      finished={finished}
+      onScrollToLower={onScrollToLower}
+    >
+      {
+        list.map(renderItem)
+      }
+    </PowerScrollView>
+  )
+}

src/components/Uploader/index.jsx

@@ -10,13 +10,15 @@ import style from './style.modules.less';
 export default (props) => {
   // value 为数组
   // 单个元素结构为 { url, fileType }
-  const { value = [], onChange } = props;
+  const { value, disabled = false, onChange } = props;
   const [loading, setLoading] = React.useState(false);
 
   const onAdd = (e) => {
     e.preventDefault();
     e.stopPropagation();
 
+    if (disabled) return;
+
     setLoading(true);
     Taro.chooseMedia({
       maxDuration: 60,
@@ -25,7 +27,7 @@ export default (props) => {
         const { tempFiles } = res;
         uploadFiles(tempFiles).then(resp => {
           setLoading(false);          
-          onChange(value.concat(resp));
+          onChange((value || []).concat(resp));
         }).catch((err) => {
           console.error(err);
           setLoading(false);
@@ -53,27 +55,35 @@ export default (props) => {
   return (
     <View className={style['uploader-wrapper']}>
       <View className={style['uploader-box']}>
-        <View className={style['uploader-add']}>
-          <Image src={icon} onClick={onAdd} />
-          {
-            loading && (
-              <View>
-                <Loading color="#fff" />
-              </View>
-            )
-          }
-        </View>
         {
-          value.map((item, inx) => (
+          !disabled && (
+            <View className={style['uploader-add']}>
+              <Image src={icon} onClick={onAdd} />
+              {
+                loading && (
+                  <View>
+                    <Loading color="#fff" />
+                  </View>
+                )
+              }
+            </View>
+          )
+        }
+        {
+          (value || []).map((item, inx) => (
             <View key={item.url} className={style['uploader-item']}>
               {
                 item.fileType == 'image' ?
                   <Image src={item.url} onClick={() => onPreview(inx)} /> :
                   <Video src={item.url} controls={false} onClick={() => onPreview(inx)} />
               }
-              <View onClick={() => onDelete(item)}>
-                <Image src={closeIcon} />
-              </View>
+              {
+                !disabled && (
+                  <View onClick={() => onDelete(item)}>
+                    <Image src={closeIcon} />
+                  </View>
+                )
+              }
             </View>
           ))
         }

src/components/map/index.jsx

@@ -1,29 +1,57 @@
 import React from 'react';
-import { View, Map, Marker } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { View, Map } from '@tarojs/components';
+import { getLocation } from '@/utils/authorize';
 import iconPath from '@/assets/icons/marker.png';
 import style from './style.module.less';
 
 export default (props) => {
-  const { location = '' } = props;
-  const {lng, lat} = location.split(',');
+  const { location } = props;
+
+  const [currentPos, setCurPos] = React.useState();
+  const [lngLat, setLngLat] = React.useState([,]);
 
   const markers = React.useMemo(() => {
-    if (lng == undefined || lat == undefined) return [];
-  
+    if (!location && !currentPos) return [];
+    
+    let longitude, latitude;
+    if (location) {
+      const [lng, lat] = location.split(',');
+      longitude = lng - 0;
+      latitude = lat - 0;
+    } else {
+      longitude = currentPos.longitude;
+      latitude = currentPos.latitude;
+    }
+
+    setLngLat([longitude, latitude]);
+
     return [{
-      longitude: lng - 0,
-      latitude: lat - 0,
+      id: 1,
+      longitude,
+      latitude,
       iconPath,
-      width: 50,
-      height: 58
+      width: 17,
+      height: 20
     }];
-  }, [lng, lat]);
+  }, [location, currentPos]);
+  
+  React.useEffect(() => {
+    getLocation().then((res) => {
+      setCurPos(res);
+    }).catch((err) => {
+      Taro.showToast({
+        title: '定位失败',
+        icon: 'none',
+      })
+    });
+  }, []);
   
   return (
     <View className={style['map-wrapper']}>
       <Map
-        longitude={lng}
-        latitude={lat}
+        longitude={lngLat[0]}
+        latitude={lngLat[1]}
         markers={markers}
       ></Map>
     </View>

src/layouts/index.jsx

@@ -3,16 +3,17 @@ import Taro from '@tarojs/taro';
 import { View, Image } from '@tarojs/components';
 import { useModel } from '@/store';
 import { Loading } from '@antmjs/vantui';
+import NavLoading from '@/components/NavLoading';
 import Auth from '@/components/Auth';
 import TabBar from './TabBar';
 import laySty from './layout.module.less';
 
 export default (props) => {
-  const { className, style, roles, tabBar = false } = props;
+  const { className, style, roles, tabBar = false, loading } = props;
 
   const { person, user } = useModel('user');
 
-  const classNames = `${laySty['page-wrapper']} ${className}`;
+  const conatinerClass = `${laySty['page-conatiner']} ${tabBar ? laySty['with-tabbar'] : ''} ${className}`;
 
   React.useEffect(() => {
     if (person && !user) {
@@ -26,8 +27,9 @@ export default (props) => {
   }, [person, user]);
 
   return (
-    <View className={classNames} style={style}>
-      <View className={laySty['page-conatiner']}>
+    <View className={laySty['page-wrapper']}>
+      <NavLoading loading={loading} />
+      <View className={conatinerClass} style={style}>
         {
           !person && (
             <View className={laySty.loading}>
@@ -40,6 +42,12 @@ export default (props) => {
         <Auth roles={roles}>
         {props.children}
         </Auth>
+
+        {
+          !tabBar && (
+            <View className={laySty['pdm-space']}></View>
+          )
+        }
       </View>
       {
         tabBar && <TabBar className={laySty['page-tabbar']} active={tabBar} />

src/layouts/layout.module.less

@@ -8,8 +8,15 @@
 
   .page-conatiner {
     width: 100%;
-    height: calc(100% - var(--tabbar-height, 100rpx));
-    overflow: hidden;
+    height: 100%;
+
+    &.with-tabbar {
+      height: calc(100% - var(--tabbar-height, 100rpx));
+    }
+
+    .pdm-space {
+      height: var(--main-space);
+    }
   }
 
   .page-tabbar {

src/pages/issue/add/components/Assigned.jsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Button } from '@antmjs/vantui';
+import { putTaIssue } from '@/services/taissue';
+import { warn } from '@/utils/message';
+import style from './style.module.less';
+
+export default (props) => {
+
+  const { issue, formData } = props;
+
+  const [loading, setLoading] = React.useState(false);
+  
+  // 新增问题单
+  const onSubmit = () => {
+    try {
+      warn(!formData.addr, '请填写地址')
+      warn(!formData.locId, '请选择点位')
+      warn(!formData.content, '请填写问题描述')
+      warn(!formData.typeId, '请选择问题分类')
+      warn(!formData.attachList || formData.attachList.length < 1, '请上传照片')
+    } catch (e) {
+      return;
+    }
+
+    setLoading(true)
+    putTaIssue(issue.issueId, { ...issue, formData }).then(() => {
+      setLoading(false);
+      Taro.navigateBack({delta: 1});
+    }).catch(() => {
+      setLoading(false);
+    })
+  }
+  
+  return (
+    <View class={style['assigned-btn-wrapper']}>
+      <View>
+        <Button square plain type="danger" loading={loading} onClick={onSubmit}>删除</Button>
+      </View>
+      <View>
+        <Button block square plain hairline type="info" loading={loading} onClick={onSubmit}>打回</Button>
+      </View>
+      <View>          
+        <Button block square type="primary" loading={loading} onClick={onSubmit}>交办</Button>
+      </View>
+    </View>
+  )
+}

src/pages/issue/add/components/Edit.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Button } from '@antmjs/vantui';
+import { putTaIssue } from '@/services/taissue';
+import { warn } from '@/utils/message';
+
+export default (props) => {
+
+  const { issue, formData } = props;
+
+  const [loading, setLoading] = React.useState(false);
+  
+  // 新增问题单
+  const onSubmit = () => {
+    try {
+      warn(!formData.addr, '请填写地址')
+      warn(!formData.locId, '请选择点位')
+      warn(!formData.content, '请填写问题描述')
+      warn(!formData.typeId, '请选择问题分类')
+      warn(!formData.attachList || formData.attachList.length < 1, '请上传照片')
+    } catch (e) {
+      return;
+    }
+
+    setLoading(true)
+    putTaIssue(issue.issueId, { ...issue, formData }).then(() => {
+      setLoading(false);
+      Taro.navigateBack({delta: 1});
+    }).catch(() => {
+      setLoading(false);
+    })
+  }
+  
+  return (
+    <View style={{ padding: '0 1em' }}>
+      <Button block type="primary" loading={loading} onClick={onSubmit}>修改</Button>
+    </View>
+  )
+}

src/pages/issue/add/components/Form.jsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Button, Notify, Field, Cell, CellGroup } from '@antmjs/vantui';
+import LocType from '@/components/locType';
+import IssueType from '@/components/issueType';
+import Map from '@/components/map';
+import Uploader from '@/components/Uploader/index';
+import mapIcon from '@/assets/icons/marker.png';
+
+export default (props) => {
+  const { issue, renderAction } = props;
+
+  const [formData, setFormData] = React.useState({
+    typeId: undefined,
+    typeName: undefined,
+    locId: undefined,
+    locName: undefined,
+    location: undefined,
+    addr: undefined,
+    content: undefined,
+    attachList: [],
+  });
+  const [showLocType, setShowLocType] = React.useState(false);
+  const [showIssueType, setShowIssueType] = React.useState(false);
+  
+  const onLocTypeChange = (_, it) => {
+    setFormData({
+      ...formData,
+      locId: it.typeId,
+      locName: it.name,
+    });
+    setShowLocType(false);
+  }
+
+  const onIssueTypeChange = (_, it) => {
+    setFormData({
+      ...formData,
+      typeId: it.typeId,
+      typeName: it.name,
+    });
+    setShowIssueType(false);
+  }
+
+  const onFieldChange = (field, value) => {
+    setFormData({
+      ...formData,
+      [field]: value,
+    })
+  }
+
+  React.useEffect(() => {
+    if (issue) {
+      setFormData(issue);
+    }
+  }, [issue]);
+  
+  return (
+    <View>
+      <LocType
+        show={showLocType}
+        value={formData.addr}
+        onCancel={() => setShowLocType(false)}
+        onChange={onLocTypeChange}
+      />
+
+      <IssueType
+        show={showIssueType}
+        value={formData.typeName}
+        onCancel={() => setShowIssueType(false)}
+        onChange={onIssueTypeChange}
+      />
+
+      <Map location={formData.location} />
+
+      <CellGroup>
+        <Cell
+          isLink
+          title="点位"
+          value={formData.locName}
+          onClick={() => setShowLocType(true)}
+        />
+        <Field
+          value={formData.addr}
+          leftIcon={mapIcon}
+          placeholder="请输入地址"
+          onChange={e => onFieldChange('addr', e.detail)}
+        />
+      </CellGroup>
+
+      <CellGroup style={{marginTop: '20px'}}>
+
+        <Cell
+          isLink
+          title="问题分类"
+          style={{marginTop: '20px'}}
+          value={formData.typeName}
+          onClick={() => setShowIssueType(true)}
+        />
+        <Cell title="问题描述" border={false} />
+
+        <Field
+          type="textarea"
+          placeholder="请输入问题描述"
+          autosize={{ minHeight: '120px' }}
+          value={formData.content}
+          onChange={e => onFieldChange('content', e.detail)}
+        />
+      </CellGroup>
+            
+      <CellGroup style={{marginTop: '20px'}}>        
+        <Cell title="拍照或视频" border={false} />
+
+        <Cell
+          renderTitle={
+            <Uploader value={formData.attachList} onChange={e => onFieldChange('attachList',e)} />
+          }
+        />
+      </CellGroup>
+
+      <View style={{margin: '20px auto'}}>
+        {renderAction(formData)}
+      </View>
+    </View>
+  )
+}

src/pages/issue/add/components/Save.jsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Button } from '@antmjs/vantui';
+import { postTaIssue } from '@/services/taissue';
+import { warn } from '@/utils/message';
+
+export default (props) => {
+
+  const { formData } = props;
+
+  const [loading, setLoading] = React.useState(false);
+  
+  // 新增问题单
+  const onSubmit = () => {
+    try {
+      warn(!formData.addr, '请填写地址')
+      warn(!formData.locId, '请选择点位')
+      warn(!formData.content, '请填写问题描述')
+      warn(!formData.typeId, '请选择问题分类')
+      warn(!formData.attachList || formData.attachList.length < 1, '请上传照片')
+    } catch (e) {
+      return;
+    }
+
+    setLoading(true)
+    postTaIssue(formData).then(() => {
+      setLoading(false);
+      Taro.navigateBack({delta: 1});
+    }).catch(() => {
+      setLoading(false);
+    })
+  }
+  
+  return (
+    <View style={{ padding: '0 1em' }}>
+      <Button block type="primary" loading={loading} onClick={onSubmit}>提交</Button>
+    </View>
+  )
+}

src/pages/issue/add/components/style.module.less

@@ -0,0 +1,19 @@
+
+
+.assigned-btn-wrapper {
+  display: flex;
+  background: #fff;
+  padding: 10px;
+  
+  & > view {
+    flex: 1;
+
+    &:first-child {
+      flex: 2;
+    }
+  
+    & + view {
+      margin-left: 10px;
+    }
+  }
+}

src/pages/issue/add/index.jsx

@@ -1,156 +1,44 @@
 import React from 'react';
 import Taro from '@tarojs/taro';
-import { View } from '@tarojs/components';
-import { Button, Notify, Field, Cell, CellGroup } from '@antmjs/vantui';
+import { Block } from '@tarojs/components';
 import Page from '@/layouts/index';
-import LocType from '@/components/locType';
-import IssueType from '@/components/issueType';
-import Map from '@/components/map';
-import Uploader from '@/components/Uploader/index';
-import { getLocation } from '@/utils/authorize';
-import { ROLE_INSPECTOR } from '@/utils/user';
-import mapIcon from '@/assets/icons/marker.png';
-import { postTaIssue } from '@/services/taissue';
-import { warn } from '@/utils/message';
+import { ROLE_INSPECTOR, ROLE_MANAGER } from '@/utils/user';
+import { getTaIssueById } from '@/services/taissue';
+import IssueForm from '../components/Issue';
+import Save from './components/Save';
+import Edit from './components/Edit';
 
 export default (props) => {
 
-  const [formData, setFormData] = React.useState({
-    typeId: undefined,
-    typeName: undefined,
-    locId: undefined,
-    locName: undefined,
-    location: undefined,
-    addr: undefined,
-    content: undefined,
-    attachList: [],
-  });
-  const [showLocType, setShowLocType] = React.useState(false);
-  const [showIssueType, setShowIssueType] = React.useState(false);
-  const [loading, setLoading] = React.useState(false);
-
-  const onLocTypeChange = (_, it) => {
-    setFormData({
-      ...formData,
-      locId: it.typeId,
-      locName: it.name,
-    });
-    setShowLocType(false);
-  }
-
-  const onIssueTypeChange = (_, it) => {
-    setFormData({
-      ...formData,
-      typeId: it.typeId,
-      typeName: it.name,
-    });
-    setShowIssueType(false);
-  }
+  const router = Taro.useRouter();
+  const { id, act } = router.params;
 
-  const onFieldChange = (field, value) => {
-    setFormData({
-      ...formData,
-      [field]: value,
-    })
-  }
-
-  const onSubmit = () => {
-    try {
-      warn(!formData.addr, '请填写地址')
-      warn(!formData.locId, '请选择点位')
-      warn(!formData.content, '请填写问题描述')
-      warn(!formData.typeId, '请选择问题分类')
-      warn(!formData.attachList || formData.attachList.length < 1, '请上传照片')
-    } catch (e) {
-      return;
+  const [loading, setLoading] = React.useState(false);
+  const [issue, setIssue] = React.useState();
+
+  React.useEffect(() => {
+    if (id) {
+      setLoading(true)
+      getTaIssueById(id).then(res => {
+        setLoading(false);
+        setIssue(res);
+      }).catch(() => {
+        setLoading(false);
+      });
     }
-
-    setLoading(true)
-    postTaIssue(formData).then(() => {
-      setLoading(false);
-      Taro.navigateBack({delta: 1});
-    }).catch(() => {
-      setLoading(false);
-    })
-  }
-  
-  React.useMemo(() => {
-    getLocation().then((res) => {
-      onFieldChange('location', `${res.longitude},${res.latitude}`);
-    }).catch((err) => {
-      Notify.show({
-        message: '获取位置失败, 请退出重试',
-        type: 'warning',
-      })
-    });
-  }, []);
+  }, [id]);
 
   return (
-    <Page roles={[ROLE_INSPECTOR]}>
-      <LocType
-        show={showLocType}
-        value={formData.addr}
-        onCancel={() => setShowLocType(false)}
-        onChange={onLocTypeChange}
-      />
-
-      <IssueType
-        show={showIssueType}
-        value={formData.typeName}
-        onCancel={() => setShowIssueType(false)}
-        onChange={onIssueTypeChange}
-      />
-
-      <Map location={formData.location} />
-
-      <Field
-        value={formData.addr}
-        leftIcon={mapIcon}
-        placeholder="请输入地址"
-        onChange={e => onFieldChange('addr', e.detail)}
+    <Page roles={[ROLE_INSPECTOR, ROLE_MANAGER]}>
+      <IssueForm
+        issue={issue}
+        renderAction={(formData) => (
+          <Block>
+            {!id && <Save formData={formData} />}
+            {id && !act && <Edit issue={issue} formData={formData} />}
+          </Block>
+        )}
       />
-
-      <CellGroup style={{marginTop: '20px'}}>
-        <Cell
-          isLink
-          title="点位"
-          value={formData.locName}
-          onClick={() => setShowLocType(true)}
-        />
-
-        <Cell title="问题描述" border={false} />
-
-        <Field
-          type="textarea"
-          placeholder="请输入问题描述"
-          autosize={{ minHeight: '120px' }}
-          value={formData.content}
-          onChange={e => onFieldChange('content', e.detail)}
-        />
-      </CellGroup>
-      
-      <Cell
-        isLink
-        title="问题分类"
-        style={{marginTop: '20px'}}
-        value={formData.typeName}
-        onClick={() => setShowIssueType(true)}
-      />
-
-      
-      <CellGroup style={{marginTop: '20px'}}>        
-        <Cell title="拍照" border={false} />
-
-        <Cell
-          renderTitle={
-            <Uploader value={formData.attachList} onChange={e => onFieldChange('attachList',e)} />
-          }
-        />
-      </CellGroup>
-
-      <View style={{margin: '20px auto', padding: '0 1em'}}>
-        <Button block type="primary" loading={loading} onClick={onSubmit}>提交</Button>
-      </View>
     </Page>
   )
 }

src/pages/issue/components/Card/index.jsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import dayjs from 'dayjs';
+import { View, ScrollView, RichText, Image, Text } from '@tarojs/components';
+import { getIssueStatus } from '@/utils/biz';
+import icon from '@/assets/icons/marker.png';
+import style from './style.module.less';
+
+const colors = [
+  ['rgba(130, 176, 254, 0.08)', 'rgba(52, 121, 237, 1)'], // 未交办
+  ['rgba(51, 218, 156, 0.08)', 'rgba(26, 117, 101, 1)'], // 已交办
+  ['rgba(251, 157, 75, 0.08)', 'rgba(232, 116, 16, 1)'], // 已办结
+  ['rgba(255, 245, 245, 1)', 'rgba(255, 76, 76, 1)'], // 已逾期
+  ['transparent', 'rgba(159, 159, 159, 1)'], // 已打回
+]
+
+export default (props) => {
+
+  const { detail, onClick } = props;
+
+  const [
+    content,
+    createDate,
+    styleColor,
+    statusTxt,
+  ] = React.useMemo(() => {
+    if (!detail) return [];
+
+    const {value : bizStatus = 0, label : statusText} = getIssueStatus(detail);
+
+    return [
+      (detail.content || '').replace('\r\n', '<br>').replace('\n', '<br>'),
+      dayjs(detail.createDate).format('YYYY-MM-DD HH:mm'),
+      colors[bizStatus],
+      statusText,
+    ];
+  }, [detail]);
+  
+  return (
+    <View className={style['issue-card-wrapper']} onClick={onClick}>
+      <View className={style['issue-card-header']}>
+        <View>问题:</View>
+        <View>{createDate}</View>
+      </View>
+      <View className={style['issue-card-body']} style={{ backgroundColor: styleColor[0] }}>
+        <ScrollView scrollY style={{ height: '100%' }}>
+          <RichText nodes={content} />
+        </ScrollView>
+      </View>
+      <View className={style['issue-card-footer']}>
+        <View>
+          <Image src={icon} />
+          <Text>{detail?.addr || ''}</Text>
+        </View>
+        <View style={{ color: styleColor[1] }}>{statusTxt}</View>
+      </View>
+    </View>
+  )
+}

src/pages/issue/components/Card/style.module.less

@@ -0,0 +1,64 @@
+
+.issue-card-wrapper {
+  width: calc(100% - var(--main-space) * 2);
+  margin: var(--main-space);
+  background: #FFFFFF;
+  box-shadow: 0px 18px 22px 1px rgba(0,0,0,0.06);
+  border-radius: 8px;
+  padding: 20px 20px 40px 20px;
+
+  .issue-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    & > view {
+      flex: 1;
+      font-size: 24px;
+      line-height: 42px;
+      color: #202020;
+
+      &:last-child {
+        flex: none;
+        font-size: 20px;
+        color: #222;
+      }
+    }
+  }
+
+  .issue-card-body {
+    padding: 20px;
+    font-size: 24px;
+    color: #333;
+    line-height: 54px;
+    height: 252px;
+    margin-top: calc(var(--main-space) / 2);
+  }
+
+  .issue-card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    
+    font-size: 24px;
+    line-height: 32px;
+    color: #202020;
+    margin-top: var(--main-space);
+
+    image {
+      display: inline-block;
+      width: 25px;
+      height: 29px;
+      margin-right: 10px;
+      vertical-align: middle;
+    }
+    
+    & > view {
+      flex: 1;
+
+      &:last-child {
+        flex: none;
+      }
+    }
+  }
+}

src/pages/issue/components/Issue/index.jsx

@@ -0,0 +1,153 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Button, Notify, Field, Cell, CellGroup } from '@antmjs/vantui';
+import LocType from '@/components/locType';
+import IssueType from '@/components/issueType';
+import Map from '@/components/map';
+import Uploader from '@/components/Uploader/index';
+import { getIssueStatus } from '@/utils/biz';
+import mapIcon from '@/assets/icons/marker.png';
+
+export default (props) => {
+  const { issue, readOnly, renderFields, renderAction } = props;
+
+  const [formData, setFormData] = React.useState({
+    typeId: undefined,
+    typeName: undefined,
+    locId: undefined,
+    locName: undefined,
+    location: undefined,
+    addr: undefined,
+    content: undefined,
+    attachList: [],
+  });
+  const [showLocType, setShowLocType] = React.useState(false);
+  const [showIssueType, setShowIssueType] = React.useState(false);
+  const [bizStatus, setBizStatus] = React.useState();
+  
+  const onLocTypeChange = (_, it) => {
+    setFormData({
+      ...formData,
+      locId: it.typeId,
+      locName: it.name,
+    });
+    setShowLocType(false);
+  }
+
+  const onIssueTypeChange = (_, it) => {
+    setFormData({
+      ...formData,
+      typeId: it.typeId,
+      typeName: it.name,
+    });
+    setShowIssueType(false);
+  }
+
+  const onFieldChange = (field, value) => {
+    setFormData({
+      ...formData,
+      [field]: value,
+    })
+  }
+
+  React.useEffect(() => {
+    if (issue) {
+      setFormData(issue);
+      setBizStatus(getIssueStatus(issue));
+    }
+  }, [issue]);
+  
+  return (
+    <View>
+      <LocType
+        show={showLocType}
+        value={formData.addr}
+        onCancel={() => setShowLocType(false)}
+        onChange={onLocTypeChange}
+      />
+
+      <IssueType
+        show={showIssueType}
+        value={formData.typeName}
+        onCancel={() => setShowIssueType(false)}
+        onChange={onIssueTypeChange}
+      />
+
+      <Map location={formData.location} />
+
+      <CellGroup>
+        <Cell
+          title="点位"
+          isLink={!readOnly}
+          value={formData.locName}
+          onClick={() => !readOnly && setShowLocType(true)}
+        />
+        <Field
+          placeholder="请输入地址"
+          value={formData.addr}
+          leftIcon={mapIcon}
+          readonly={readOnly}
+          onChange={e => onFieldChange('addr', e.detail)}
+        />
+      </CellGroup>
+
+      {
+        readOnly && bizStatus && (
+          <CellGroup style={{marginTop: '20px'}}>
+            <Cell
+              title="状态"
+              value={bizStatus.label}
+            />
+          </CellGroup>
+        )
+      }
+
+      <CellGroup style={{marginTop: '20px'}}>
+        <Cell
+          title="问题分类"
+          isLink={!readOnly}
+          style={{marginTop: '20px'}}
+          value={formData.typeName}
+          onClick={() => !readOnly && setShowIssueType(true)}
+        />
+        <Cell title="问题描述" border={false} />
+
+        <Field
+          type="textarea"
+          placeholder="请输入问题描述"
+          readonly={readOnly}
+          autosize={{ minHeight: '120px' }}
+          value={formData.content}
+          onChange={e => onFieldChange('content', e.detail)}
+        />
+      </CellGroup>
+            
+      <CellGroup style={{marginTop: '20px'}}>        
+        <Cell title="拍照或视频" border={false} />
+
+        <Cell
+          renderTitle={
+            <Uploader
+              value={formData.attachList}
+              disabled={readOnly}
+              onChange={e => onFieldChange('attachList',e)}
+            />
+          }
+        />
+      </CellGroup>
+
+      {
+        renderFields ? renderFields(formData, setFormData) : null
+      }
+
+      {
+        renderAction ? (
+          <View style={{margin: '20px auto'}}>
+            {renderAction(formData)}
+          </View>
+        ) : null
+      }
+    </View>
+  )
+}

src/pages/issue/detail/index.config.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-undef
+export default definePageConfig({
+  navigationBarTitleText: '问题单详情'
+})

src/pages/issue/detail/index.jsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View, RichText } from '@tarojs/components';
+import { Button, Notify, Field, Cell, CellGroup } from '@antmjs/vantui';
+import Page from '@/layouts/index';
+import Map from '@/components/map';
+import Uploader from '@/components/Uploader/index';
+import { ROLE_INSPECTOR } from '@/utils/user';
+import mapIcon from '@/assets/icons/marker.png';
+import { getTaIssueById } from '@/services/taissue';
+import IssueDetail from '../components/Issue';
+import style from './style.module.less';
+
+export default (props) => {
+
+  const router = Taro.useRouter();
+  const { id } = router.params;
+  
+  const [issue, setIssue] = React.useState(false);
+  const [loading, setLoading] = React.useState(false);
+
+  // const [
+  //   content,
+  //   bizStatus
+  // ] = React.useMemo(() => {
+  //   if (!formData || !formData.issueId) return [];
+
+  //   return [
+  //     (formData.content || '').replace('\r\n', '<br>').replace('\n', '<br>'),
+  //     getIssueStatus(formData).label,
+  //   ]
+  // }, [formData])
+
+  React.useEffect(() => {
+    if (id) {
+      setLoading(true)
+      getTaIssueById(id).then(res => {
+        setLoading(false);
+        setIssue(res);
+      }).catch(() => {
+        setLoading(false);
+      });
+    }
+  }, [id]);
+
+  return (
+    <Page roles={[ROLE_INSPECTOR]} loading={loading}>
+      <IssueDetail readOnly issue={issue} />
+    </Page>
+  )
+}

src/pages/issue/detail/style.module.less

@@ -0,0 +1,10 @@
+
+.issue-content {
+  padding: 0 24px;
+  padding-left: 60px;
+  rich-text {
+    line-height: 70px;
+    font-size: 24px;
+    color: #202020;
+  }
+}

src/pages/issue/list/index.config.js

@@ -0,0 +1,4 @@
+// eslint-disable-next-line no-undef
+export default definePageConfig({
+  navigationBarTitleText: '我的上报'
+})

src/pages/issue/list/index.jsx

@@ -0,0 +1,85 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Tab, Tabs } from '@antmjs/vantui';
+import Page from '@/layouts/index';
+import PowerList from '@/components/PowerList';
+import { getTaIssue } from '@/services/taissue';
+import { ROLE_INSPECTOR } from '@/utils/user';
+import Card from '../components/Card';
+
+export default (props) => {
+
+  const onClick = (item, act) => {
+    if (act) {
+      Taro.navigateTo({
+        url: `/pages/issue/detail/index?id=${item.issueId}&act=${act}`
+      })
+    } else {
+      Taro.navigateTo({
+        url: `/pages/issue/detail/index?id=${item.issueId}`
+      })
+    }
+  }
+  
+  return (
+    <Page roles={[ROLE_INSPECTOR]}>
+      <Tabs sticky>
+        <Tab title="全部">
+          <PowerList
+            request={getTaIssue}
+            params={{mine: true}}
+            renderItem={(item) => (
+              <Card key={item.issueId} detail={item} onClick={() => onClick(item, 'assigned')} />
+            )}
+          />
+        </Tab>
+        <Tab title="未交办">
+          <PowerList
+            request={getTaIssue}
+            params={{bizStatus: 'start', mine: true}}
+            renderItem={(item) => (
+              <Card key={item.issueId} detail={item} onClick={() => onClick(item)} />
+            )}
+          />
+        </Tab>
+        <Tab title="已交办">
+          <PowerList
+            request={getTaIssue}
+            params={{bizStatus: 'start', mine: true}}
+            renderItem={(item) => (
+              <Card key={item.issueId} detail={item} onClick={() => onClick(item)} />
+            )}
+          />
+        </Tab>
+        <Tab title="已办结">
+          <PowerList
+            request={getTaIssue}
+            params={{bizStatus: 'end', mine: true}}
+            renderItem={(item) => (
+              <Card key={item.issueId} detail={item} onClick={() => onClick(item)} />
+            )}
+          />
+        </Tab>
+        <Tab title="已逾期">
+          <PowerList
+            request={getTaIssue}
+            params={{bizStatus: 'expired', mine: true}}
+            renderItem={(item) => (
+              <Card key={item.issueId} detail={item} onClick={() => onClick(item)} />
+            )}
+          />
+        </Tab>
+        <Tab title="已打回">
+          <PowerList
+            request={getTaIssue}
+            params={{bizStatus: 'reject', mine: true}}
+            renderItem={(item) => (
+              <Card key={item.issueId} detail={item} onClick={() => onClick(item)} />
+            )}
+          />
+        </Tab>
+      </Tabs>
+    </Page>
+  )
+}

src/pages/login/components/Form.jsx

@@ -14,6 +14,7 @@ export default (props) => {
   const form = Form.useForm();
   const [accErr, setAccErr] = React.useState();
   const [pwdErr, setPwdErr] = React.useState();
+  const [loading, setLoading] = React.useState(false);
 
   const onFinish = (errs, res) => {
     if (!res.account) {
@@ -29,7 +30,13 @@ export default (props) => {
       setPwdErr();
     }
 
-    signin(res).then(onSuccess);
+    setLoading(true);
+    signin(res).then(() => {
+      onSuccess();
+      setLoading(false);
+    }).catch(err => {
+      setLoading(false);
+    })
   }
 
   const onForgetPwd = () => {
@@ -73,6 +80,7 @@ export default (props) => {
             block
             type="primary"
             formType="submit"
+            loading={loading}
           >
             登录
           </Button>

src/pages/login/index.jsx

@@ -25,7 +25,7 @@ export default (props) => {
   }
 
   return (
-    <Page className="index">
+    <Page>
       <View className="login-box">
         <Head />
         <Form onSuccess={onSuccess} />

src/utils/biz.js

@@ -0,0 +1,32 @@
+import dayjs from 'dayjs';
+
+export function getIssueStatus(taIssue) {
+  if (taIssue.processNode === 'start') {
+    return {
+      value: 0,
+      label: '未交办',
+    }
+  } else if (taIssue.processNode === 'assigned') {
+    return {
+      value: 1,
+      label: '已交办',
+    };
+  } else if (taIssue.processNode === 'end') {
+    return {
+      value: 2,
+      label: '已办结',
+    };
+  } else if (taIssue.processNode !== 'end' && taIssue.expireDate <= dayjs().format('YYYY-MM-DD')) {
+    return {
+      value: 3,
+      label: '已逾期',
+    };
+  } else if (taIssue.processNode !== 'end' && taIssue.processStatus === 'reject') {
+    return {
+      value: 4,
+      label: '已打回',
+    };
+  }
+
+  return {};
+}

src/utils/user.js

@@ -8,6 +8,9 @@ export const ROLE_MANAGER = 'manager';
 // 单位人员
 export const ROLE_ORG_USER = 'org_user';
 
+// 单位管理员
+export const ROLE_ORG_MANAGER = 'org_manager';
+
 // 查询员
 export const ROLE_QUERY_PERSON = 'query_person';
 
@@ -19,6 +22,7 @@ export const ROLES = {
   [ROLE_INSPECTOR]: '督察员',
   [ROLE_MANAGER]: '管理员',
   [ROLE_ORG_USER]: '单位人员',
+  [ROLE_ORG_MANAGER]: '单位管理员',
   [ROLE_QUERY_PERSON]: '查询员',
   [ROLE_CITIZEN]: '市民',
 }