Merge branch 'master' of http://git.ycjcjy.com/civilized_city/miniapp

.eslintrc

@@ -3,6 +3,7 @@
   "rules": {
     "react/jsx-uses-react": "off",
     "react/react-in-jsx-scope": "off",
-    "no-unused-vars": "warn"
+    "no-unused-vars": "warn",
+    "jsx-quotes": ["warn", "prefer-double"]
   }
 }

babel.config.js

@@ -13,7 +13,7 @@ module.exports = {
       {
         libraryName: "@antmjs/vantui",
         libraryDirectory: "es",
-        style: true
+        style: (name) => `${name}/style/less`,
       },
       "@antmjs/vantui"
     ]

config/dev.js

@@ -3,7 +3,8 @@ module.exports = {
     NODE_ENV: '"development"'
   },
   defineConstants: {
-    HOST: '"http://192.168.89.147:9087"'
+    // HOST: '"http://127.0.0.1:9087"'
+    HOST: '"http://192.168.1.2:9087"'
   },
   mini: {},
   h5: {}

config/index.js

@@ -16,6 +16,7 @@ const config = {
   },
   copy: {
     patterns: [
+      { from: 'src/assets/tabbar/', to: 'dist/assets/tabbar/' },
     ],
     options: {
     }

package.json

@@ -48,6 +48,7 @@
     "@tarojs/taro": "3.5.7",
     "@tarojs/taro-h5": "3.5.7",
     "@zjxpcyc/react-tiny-store": "^2.0.1",
+    "md5": "^2.3.0",
     "react": "^18.0.0",
     "react-dom": "^18.0.0"
   },

src/app.config.js

@@ -1,37 +1,16 @@
+// eslint-disable-next-line no-undef
 export default defineAppConfig({
   pages: [
-    'pages/login/index',
     'pages/home/index',
+    'pages/login/index',
     'pages/index3/index',
     'pages/index4/index',
     'pages/index5/index',
+    'pages/issue/add/index',
     'pages/reporting/index',
     'pages/reporting/detail/index',
+    'pages/reset-password/index',
   ],
-  tabBar: {
-    list: [
-      {
-        "pagePath": "pages/login/index",
-        "text": "首页"
-      },
-      {
-        "pagePath": "pages/home/index",
-        "text": "公告"
-      },
-      {
-        "pagePath": "pages/index3/index",
-        "text": "发布"
-      },
-      {
-        "pagePath": "pages/index4/index",
-        "text": "测评标准"
-      },
-      {
-        "pagePath": "pages/index5/index",
-        "text": "我的"
-      },
-    ],
-  },
   window: {
     // backgroundColor: '#1A7565',
     backgroundTextStyle: 'light',
@@ -46,5 +25,8 @@ export default defineAppConfig({
   },
   requiredPrivateInfos: [
     'getLocation'
-  ]
+  ],
+  setting: {
+    urlCheck: false,
+  }
 })

src/app.js

@@ -10,7 +10,9 @@ const App = (props) => {
       success: (res) => {
         store.getState('user').login(res.code);
       }
-    })
+    });
+
+    store.getState('user').current();
   });
 
   return (

src/app.less

@@ -7,10 +7,11 @@ page {
   --main-space: 4vw;
 
   // antm-js 样式修改
-  // 按钮主色
-  --buttonPrimaryBackgroundColor: #1A7565;
+  // 按钮
+  --button-primary-color: #FFFFFF;
+  --button-primary-background-color: var(--main-bg-color);
   // 菊花转主色
-  --loading-spinner-color: #1A7565;
+  --loading-spinner-color: var(--main-bg-color);
 }
 
 view {

src/components/Auth.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+import { useModel } from '@/store';
+
+export default (props) => {
+  const { roles = [] } = props;
+  const { user } = useModel('user');
+
+  const targets = user?.dutyList || [];
+
+  let hasRights = false;
+  for(let role of roles) {
+    if (hasRights) {
+      continue;
+    }
+
+    const found = targets.indexOf(role) > -1;
+    if (found) {
+      hasRights = found;
+    }
+  }
+
+  return !roles.length || hasRights ? props.children : (
+    <View style={{width: '100%', height: '100%', display: 'grid', placeItems: 'center'}}>
+      <View>暂无权限</View>
+    </View>
+  );
+}

src/components/Pickerful/index.jsx

@@ -0,0 +1,69 @@
+import React from 'react';
+import { View, ScrollView } from '@tarojs/components';
+import { Button, Popup, Search, Cell, Icon } from '@antmjs/vantui';
+import style from './style.module.less';
+
+export default (props) => {
+  const { show, value, keyValue, labelValue = 'name', dictAPI, onChange, onCancel } = props;
+
+  const [dict, setDict] = React.useState([]);
+  const [checked, setChecked] = React.useState();
+  const [searchText, setSearchText] = React.useState('')
+  const onSearch = () => {
+    // todo
+  }
+
+  const list = React.useMemo(() => {
+    if (!searchText) return dict;
+    return dict.filter(x => x.name.indexOf(searchText) > -1);
+  }, [searchText, dict]);
+
+  const onClick = () => {
+    if (!checked) return;
+    onChange(checked[keyValue], checked)
+  }
+
+  React.useEffect(() => {
+    dictAPI({pageSize: 500}).then(res => {
+      setDict(res.records || []);
+    })
+  }, []);
+
+  React.useEffect(() => {
+    if (value && dict) {
+      setChecked(dict.filter(x => x[keyValue] == value)[0]);
+    }
+  }, [value, dict]);
+  
+  return (
+    <Popup position="right" show={show} onClose={onCancel}>
+      <View className={style['pickerful-box']}>
+        <Search
+          onChange={(e) => setSearchText(e.detail)}
+          placeholder="请输入搜索关键词"
+          onSearch={onSearch}
+          clearable
+        />
+        <ScrollView scrollY style={{ flex: 1 }}>
+          {
+            list.map(item => (
+              <Cell
+                key={item[keyValue]}
+                title={item[labelValue]}
+                renderRightIcon={
+                  checked && checked[keyValue] == item[keyValue] ?
+                  <Icon name="success" color="#1A7565" /> :
+                  null
+                }
+                onClick={() => setChecked(item)}
+              />
+            ))
+          }
+        </ScrollView>
+        <View style={{ padding: '8px 2em' }}>
+          <Button block type="primary" disabled={!checked} onClick={onClick}>确定</Button>
+        </View>
+      </View>
+    </Popup>
+  )
+}

src/components/Pickerful/style.module.less

@@ -0,0 +1,12 @@
+
+.pickerful-box {
+  width: 90vw;
+  height: 100vh;
+  display: flex;
+  flex-direction: column;
+
+  & > view {
+    flex: none;
+  }
+}
+

src/components/Uploader/index.jsx

@@ -0,0 +1,83 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View, Image, Video } from '@tarojs/components';
+import { Loading } from '@antmjs/vantui';
+import { uploadFiles } from '@/utils/request';
+import icon from '@/assets/icons/uploader.png';
+import closeIcon from '@/assets/icons/close.png';
+import style from './style.modules.less';
+
+export default (props) => {
+  // value 为数组
+  // 单个元素结构为 { url, fileType }
+  const { value = [], onChange } = props;
+  const [loading, setLoading] = React.useState(false);
+
+  const onAdd = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+
+    setLoading(true);
+    Taro.chooseMedia({
+      maxDuration: 60,
+      sizeType: 'compressed',
+      success: (res) => {
+        const { tempFiles } = res;
+        uploadFiles(tempFiles).then(resp => {
+          setLoading(false);          
+          onChange(value.concat(resp));
+        }).catch((err) => {
+          console.error(err);
+          setLoading(false);
+        })
+      },
+      fail: (err) => {
+        console.error(err);
+        setLoading(false);
+      }
+    })
+  }
+
+  const onDelete = (item) => {
+    const newVal = value.filter(x => x.url != item.url);
+    onChange(newVal);
+  }
+
+  const onPreview = (inx) => {
+    Taro.previewMedia({
+      sources: value.map(x => ({ url: x.url, type: x.fileType })),
+      current: inx,
+    })
+  }
+
+  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) => (
+            <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>
+            </View>
+          ))
+        }
+      </View>
+    </View>
+  )
+}

src/components/Uploader/style.modules.less

@@ -0,0 +1,64 @@
+
+.uploader-wrapper {
+  display: inline-block;
+  .uploader-box {
+    display: flex;
+
+    & > view {
+      flex: none;
+      width: 160px;
+      height: 160px;
+      position: relative;
+
+      image {
+        width: 100%;
+        height: 100%;
+      }
+
+      video {
+        width: 100%;
+        height: 100%;
+      }
+
+      & + view {
+        margin-left: 20px;
+      }
+    }
+
+    .uploader-add {
+      & > view {
+        position: absolute;
+        z-index: 2;
+        width: 100%;
+        height: 100%;
+        left: 0;
+        top: 0;
+
+        display: grid;
+        place-items: center;
+        background-color: rgba(0, 0, 0, .75);
+      }
+    }
+
+    .uploader-item {
+      background-color: rgba(0, 0, 0, .05);
+
+      & > view {
+        position: absolute;
+        z-index: 2;
+        width: 40%;
+        height: 40%;
+        top: 0;
+        right: 0;
+
+        & > image {
+          position: absolute;
+          width: 60%;
+          height: 60%;
+          top: -10px;
+          right: -10px;
+        }
+      }
+    }
+  }
+}

src/components/issueType/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import Pickerful from '@/components/Pickerful';
+import { getTdIssueType } from '@/services/tdissuetype';
+
+export default (props) => {
+  return (
+    <Pickerful {...props} keyValue="typeId" dictAPI={getTdIssueType} />
+  )
+}

src/components/locType/index.jsx

@@ -0,0 +1,9 @@
+import React from 'react';
+import { getTdLocType } from '@/services/tdloctype';
+import Pickerful from '@/components/Pickerful';
+
+export default (props) => {
+  return (
+    <Pickerful {...props} keyValue="typeId" dictAPI={getTdLocType} />
+  )
+}

src/components/map/index.jsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import { View, Map, Marker } from '@tarojs/components';
+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 markers = React.useMemo(() => {
+    if (lng == undefined || lat == undefined) return [];
+  
+    return [{
+      longitude: lng - 0,
+      latitude: lat - 0,
+      iconPath,
+      width: 50,
+      height: 58
+    }];
+  }, [lng, lat]);
+  
+  return (
+    <View className={style['map-wrapper']}>
+      <Map
+        longitude={lng}
+        latitude={lat}
+        markers={markers}
+      ></Map>
+    </View>
+  )
+}

src/components/map/style.module.less

@@ -0,0 +1,15 @@
+
+.map-wrapper {
+  width: 100%;
+  height: 0;
+  padding-bottom: 50%;
+  position: relative;
+
+  map {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    top: 0;
+    left: 0;
+  }
+}

src/layouts/TabBar.jsx

@@ -0,0 +1,137 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { Image } from '@tarojs/components';
+import { Tabbar, TabbarItem } from '@antmjs/vantui';
+import homeIcon from '@/assets/tabbar/page.png';
+import homeActiveIcon from '@/assets/tabbar/page click.png';
+import noticeIcon from '@/assets/tabbar/notice.png';
+import noticeActiveIcon from '@/assets/tabbar/notice click.png';
+import issueIcon from '@/assets/tabbar/release.png';
+import issueActiveIcon from '@/assets/tabbar/release click.png';
+import checkIcon from '@/assets/tabbar/evaluation.png';
+import checkActiveIcon from '@/assets/tabbar/evaluation click.png';
+import mineIcon from '@/assets/tabbar/my.png';
+import mineActiveIcon from '@/assets/tabbar/my click.png';
+
+const tabPages = {
+  home: '/pages/home/index',
+  notice: '/pages/index3/index',
+  issue: '/pages/issue/add/index',
+  check: '/pages/index4/index',
+  mine: '/pages/index5/index',
+}
+
+export default (props) => {
+  const { active = -1, className } = props;
+
+  const onChange = (e) => {
+    Taro.reLaunch({
+      url: tabPages[e.detail]
+    })
+  }
+
+  return (
+    <Tabbar
+      activeColor="#1A7565"
+      className={className}
+      active={active}
+      onChange={onChange}
+    >
+      <TabbarItem
+        name="home"
+        renderIcon={
+          <Image
+            src={homeIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+        renderIconActive={
+          <Image
+            src={homeActiveIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+      >
+        首页
+      </TabbarItem>
+      <TabbarItem
+        name="notice"
+        renderIcon={
+          <Image
+            src={noticeIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+        renderIconActive={
+          <Image
+            src={noticeActiveIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+      >
+        公告
+      </TabbarItem>
+      <TabbarItem
+        name="issue"
+        renderIcon={
+          <Image
+            src={issueIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+        renderIconActive={
+          <Image
+            src={issueActiveIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+      >
+        发布
+      </TabbarItem>
+      <TabbarItem
+        name="check"
+        renderIcon={
+          <Image
+            src={checkIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+        renderIconActive={
+          <Image
+            src={checkActiveIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+      >
+        测评标准
+      </TabbarItem>
+      <TabbarItem
+        name="mine"
+        renderIcon={
+          <Image
+            src={mineIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+        renderIconActive={
+          <Image
+            src={mineActiveIcon}
+            mode="aspectFit"
+            style="width: 30px; height: 18px;"
+          ></Image>
+        }
+      >
+        我的
+      </TabbarItem>
+    </Tabbar>
+  )
+}

src/layouts/index.jsx

@@ -1,28 +1,49 @@
 import React from 'react';
-import { View } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { View, Image } from '@tarojs/components';
 import { useModel } from '@/store';
 import { Loading } from '@antmjs/vantui';
+import Auth from '@/components/Auth';
+import TabBar from './TabBar';
 import laySty from './layout.module.less';
 
 export default (props) => {
-  const { className, style } = props;
+  const { className, style, roles, tabBar = false } = props;
 
-  const { person } = useModel('user');
+  const { person, user } = useModel('user');
 
   const classNames = `${laySty['page-wrapper']} ${className}`;
 
+  React.useEffect(() => {
+    if (person && !user) {
+      const currentPage = Taro.getCurrentPages().slice().pop();
+      if ('pages/login/index' !== currentPage.route) {
+        Taro.navigateTo({
+          url: '/pages/login/index',
+        })
+      }
+    }
+  }, [person, user]);
+
   return (
     <View className={classNames} style={style}>
+      <View className={laySty['page-conatiner']}>
+        {
+          !person && (
+            <View className={laySty.loading}>
+              <Loading size="32px" vertical>
+                加载中...
+              </Loading>
+            </View>
+          )
+        }
+        <Auth roles={roles}>
+          {props.children}
+        </Auth>
+      </View>
       {
-        !person && (
-          <View className={laySty.loading}>
-            <Loading size='32px' vertical>
-              加载中...
-            </Loading>
-          </View>
-        )
+        tabBar && <TabBar className={laySty['page-tabbar']} active={tabBar} />
       }
-      {props.children}
     </View>
   )
 }

src/layouts/layout.module.less

@@ -1,7 +1,20 @@
 
 .page-wrapper {
   position: relative;
-  height: 100%;
+  width: 100%;
+  box-sizing: content-box;
+  height: calc(100% - env(safe-area-inset-bottom));
+  padding-bottom: env(safe-area-inset-bottom);
+
+  .page-conatiner {
+    width: 100%;
+    height: calc(100% - var(--tabbar-height, 100rpx));
+    overflow: hidden;
+  }
+
+  .page-tabbar {
+    flex: none;
+  }
 
   .loading {
     position: fixed;

src/pages/home/components/Head.jsx

@@ -1,19 +1,25 @@
 import React from 'react';
-import { View } from '@tarojs/components';
+import { View, Image } from '@tarojs/components';
+import { ROLES, ROLE_CITIZEN } from '@/utils/user';
+import logo from '@/assets/image/logo.png';
 import style from './head.module.less';
 
 export default (props) => {
+  const { user = {} } = props;
+  const { dutyList = [] } = user;
+  const role = ROLES[dutyList[0] || ROLE_CITIZEN];
+
   return (
     <View className={style.head}>
       <View className={style.profile}>
-        <View>Hi, 张三!</View>
+        <View style={{ letterSpacing: '2px' }}>Hi, {user.name}!</View>
         <View className={style.badge}>
           <View className={style.icon}></View>
-          <View>督察员</View>
+          <View>{role}</View>
         </View>
       </View>
       <View className={style.avatar}>
-
+        <Image src={user.avatar || logo}></Image>
       </View>
     </View>
   )

src/pages/home/components/head.module.less

@@ -14,24 +14,39 @@
     font-size: 42px;
 
     .badge {
+      display: inline-block;
       position: relative;
-      padding-left: 64px;
+      padding-right: 24px;
+      padding-left: 72px;
       margin-top: var(--main-space);
       height: 48px;
-      line-height: 48px;
+      line-height: 46px; // 向上偏移2像素
       background: linear-gradient(0, #E36A00, #FFA658);
       border-radius: 22px;
       font-size: 24px;
+      text-align: center;
 
       .icon {
-        top: -8px;
-        left: -8px;
+        top: -12px;
+        left: -12px;
         position: absolute;
-        width: 64px;
-        height: 64px;
-        background: linear-gradient(0, #E36A00, #FFA658);
+        width: 56px;
+        height: 56px;
+        border: 8px solid rgba(251, 239, 121, 0.6);
         border-radius: 50%;
-        border: 8px solid rgba(251, 239, 121, 0.2);
+        box-sizing: content-box;
+
+        &::before {
+          content: '';
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 56px;
+          height: 56px;
+          background: linear-gradient(0, #E36A00, #FFA658);
+          border-radius: 50%;
+          overflow: hidden;
+        }
       }
     }
   }
@@ -42,5 +57,10 @@
     height: 16vw;
     border-radius: 50%;
     border: 4px solid #fff;
+
+    image {
+      width: 100%;
+      height: 100%;
+    }
   }
 }

src/pages/home/index.jsx

@@ -1,15 +1,19 @@
 import React from 'react'
 import { View, Text, Image } from '@tarojs/components'
 import Page from '@/layouts/index';
+import { useModel } from '@/store';
 import Head from './components/Head';
 import BannerCard from './components/BannerCard';
 import MenuCard from './components/MenuCard';
 import './index.less';
 
 export default (props) => {
+
+  const { user } = useModel('user');
+
   return (
-    <Page className='index'>
-      <Head />
+    <Page tabBar="home" className='index'>
+      <Head user={user} />
       <BannerCard />
       <MenuCard />
     </Page>

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

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '我要上报'
+})

src/pages/issue/add/index.jsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Button, Notify, Field, Cell, CellGroup } from '@antmjs/vantui';
+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';
+
+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 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;
+    }
+
+    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',
+      })
+    });
+  }, []);
+
+  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)}
+      />
+
+      <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/login/components/Form.jsx

@@ -1,30 +1,83 @@
 import React from 'react';
-import { View, Image, Input } from '@tarojs/components';
-import { Form, Button } from '@antmjs/vantui'
-import user from '../../../assets/image/user.png';
-import password from '../../../assets/image/password.png';
-import style from './form.module.less';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Form, FormItem, Field, Button } from '@antmjs/vantui'
+import { useModel } from '@/store';
+import user from '@/assets/image/user.png';
+import password from '@/assets/image/password.png';
+import './form.less';
 
 export default (props) => {
+  const { onSuccess } = props;
+
+  const { signin } = useModel('user');
+  const form = Form.useForm();
+  const [accErr, setAccErr] = React.useState();
+  const [pwdErr, setPwdErr] = React.useState();
+
+  const onFinish = (errs, res) => {
+    if (!res.account) {
+      setAccErr('账户不能为空');
+      return;
+    } else {
+      setAccErr();
+    }
+    if (!res.password) {
+      setPwdErr('密码不能为空');
+      return;
+    } else {
+      setPwdErr();
+    }
+
+    signin(res).then(onSuccess);
+  }
+
+  const onForgetPwd = () => {
+    Taro.navigateTo({
+      url: '/pages/reset-password/index'
+    });
+  }
+
   return (
-    <Form className={style.form}>
-      <View className={style['input-box']}>
-        <Image src={user} className={style['img-icon']} />账号<Input className={style.input} placeholder='请输入您的登录账号' />
-      </View>
-      <View className={style['input-box']}>
-        <Image src={password} className={style['img-icon']} />密码<Input className={style.input} placeholder='请输入您的登录密码' />
-      </View>
-      <View
-        className={style['forget-pwd']}
-      >
-        忘记密码?
-      </View>
-      <Button
-        type='primary'
-        className={style.submit}
-      >
-        登录
-      </Button>
-    </Form>
+    <View className="login-form">
+      <Form form={form} onFinish={onFinish}>
+        <FormItem
+          name="account"
+          valueFormat={(e) => e.detail}
+        >
+          <Field
+            border
+            label="账号"
+            leftIcon={user}
+            errorMessage={accErr}
+            placeholder="请输入您的登录账号"
+          ></Field>
+        </FormItem>
+        <FormItem
+          name="password"
+          valueFormat={(e) => e.detail}
+        >
+          <Field
+            password
+            label="密码"
+            leftIcon={password}
+            errorMessage={pwdErr}
+            placeholder="请输入您的登录密码"
+          ></Field>
+        </FormItem>
+        <View className="forget-password" onClick={onForgetPwd}>
+          忘记密码?
+        </View>
+        <View>
+          <Button
+            block
+            type="primary"
+            formType="submit"
+          >
+            登录
+          </Button>
+        </View>
+      </Form>
+    </View>
   )
 }

src/pages/login/components/form.less

@@ -0,0 +1,63 @@
+.login-form {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 0 var(--main-space);
+
+  .vant-form-formItem,
+  .vant-form-formItem-wrapper,
+  .vant-form-formItem-controll {
+    margin: 0;
+    padding: 0;
+    background-color: transparent;
+  }
+
+  .vant-form-formItem-wrapper {
+    & + .vant-form-formItem-wrapper {
+      margin-top: var(--main-space);
+    }
+  }
+
+  .vant-form-label {
+    width: 0;
+  }
+
+  .field-wrapper {
+    width: 100%;
+    padding: 0 var(--main-space);
+  }
+
+  .van-cell {
+    background-color: transparent;
+
+    &::after {
+      border-bottom-color: rgba(0,0,0,0.12);
+    }
+  }
+
+  .van-icon__image {
+    width: 42px;
+    height: 42px;
+    vertical-align: middle;
+  }
+
+  .van-cell__title {
+    margin-left: 20px;
+    font-size: 16px;
+    vertical-align: middle;
+    border-right: 1px solid #000;
+  }
+
+  .van-field__label {
+    font-size: 32px;
+  }
+
+  .forget-password {
+    text-align: right;
+    font-size: 28px;
+    font-weight: 400;
+    color: var(--main-bg-color);
+    height: 148px;
+    line-height: 148px;
+    padding: 0 var(--main-space);
+  }
+}

src/pages/login/components/form.module.less

@@ -1,36 +0,0 @@
-.form {
-  width: 620px;
-  .input-box {
-    display: flex;
-    border-bottom: 1px solid #e9eaea;
-    width: 600px;
-    margin: 26px auto;
-    padding-bottom: 30px;
-    margin-top: 60px;
-    .img-icon {
-      margin-right: 30px;
-      width: 42px;
-      height: 44px;
-    }
-    .input {
-      color: rgb(174, 174, 174);
-      margin-left: 15px;
-      padding-left: 20px;
-      flex-direction: column;
-      border-left: 1px solid black;
-    }
-  }
-  .forget-pwd {
-    font-size: 28px;
-    color: var(--main-bg-color);
-    float: right;
-    margin-right: 72px;
-    margin-bottom: 104px;
-  }
-  .submit {
-    width: 666px;
-    margin: 80px auto;
-    background-color: var(--main-bg-color);
-    color: #fff;
-  }
-}

src/pages/login/index.jsx

@@ -1,19 +1,36 @@
-import Page from '@/layouts/index';
+import React from 'react';
+import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
+import Page from '@/layouts/index';
 import Head from "./components/Head";
 import Form from "./components/Form";
 import Bottom from "./components/Bottom";
 import './index.less'
 
 export default (props) => {
+
+  React.useMemo(() => {  
+    Taro.hideTabBar();
+  }, []);
+
+  const onSuccess = () => {
+    Taro.navigateBack({
+      delta: 1,
+      fail: () => {
+        Taro.reLaunch({
+          url: '/pages/home/index'
+        })
+      }
+    });
+  }
+
   return (
-    <Page className='index'>
-      <View className='login-box'>
+    <Page className="index">
+      <View className="login-box">
         <Head />
-        <Form />
+        <Form onSuccess={onSuccess} />
         <Bottom />
       </View>
     </Page>
-
   )
 }

src/pages/reporting/detail/components/Map.jsx

@@ -1,18 +1,14 @@
 import React from 'react';
-import { View, Map } from '@tarojs/components';
+import { View } from '@tarojs/components';
+import Map from '@/components/map';
 import style from './map.module.less';
 
 export default (props) => {
   const { location } = props;
-  const loc = location ? location.split(',') : [,];
   
   return (
     <View className={style['map-box']}>
-      <Map
-        className={style.map}
-        longitude={loc[0]}
-        latitude={loc[1]}
-      ></Map>
+      <Map location={location} />
       <View className={style.address}>
         阳光丽景小区
       </View>

src/pages/reporting/detail/components/map.module.less

@@ -2,11 +2,6 @@
 .map-box {
   width: 100vw;
 
-  .map {
-    width: 100%;
-    height: 50vw;
-  }
-
   .address {
     width: 100%;
     background: #fff;

src/pages/reporting/detail/index.jsx

@@ -1,9 +1,9 @@
 import React from 'react';
 import Taro from '@tarojs/taro';
 import { View } from '@tarojs/components';
+import { Notify } from '@antmjs/vantui';
 import Page from '@/layouts/index';
 import getAuthorize from '@/utils/authorize';
-import { Notify } from '@antmjs/vantui';
 import Map from './components/Map';
 import Issue from './components/Issue';
 

src/pages/reset-password/components/Captcha.jsx

@@ -0,0 +1,102 @@
+import React from 'react';
+import { View } from '@tarojs/components';
+import { Field, Button } from '@antmjs/vantui';
+import { getCaptcha } from '@/services/comm';
+
+export default (props) => {
+  const { onNext } = props;
+
+  const [loading, setLoading] = React.useState(false);
+  const [phone, setPhone] = React.useState();
+  const [phoneErr, setPhoneErr] = React.useState();
+  const [captcha, setCaptcha] = React.useState();
+  const [captchaErr, setCaptchaErr] = React.useState();
+  const [disabled, setDisabled] = React.useState(false);
+  const [sec, setSec] = React.useState(0);
+
+  const btnText = disabled ? `剩余 ${sec} 秒` : '获取验证码';
+
+  const onCaptcha = () => {
+    if (!phone || phone.length != 11) {
+      setPhoneErr('请输入正确的手机号')
+      return;
+    } else {
+      setPhoneErr();
+    }
+    
+    setLoading(true);
+    getCaptcha(phone).then(() => {
+      setLoading(false);
+      let left = 60;
+      
+      setDisabled(true);
+      setSec(left --);
+      const ticker = setInterval(() => {
+        left -= 1;
+        setSec(left);
+  
+        if (left <= 1) {
+          setDisabled(false);
+          clearInterval(ticker);
+        }
+      }, 1000);
+    }).catch(() => {
+      setLoading(false);
+    });
+  }
+
+  const handleNext = () => {
+    if (!phone) {
+      setPhoneErr('请输入手机号');
+    }
+
+    if (!captcha) {
+      setCaptchaErr('请输入验证码')
+    }
+
+    if (!phone || !captcha) {
+      return;
+    }
+
+    onNext({phone, captcha});
+  }
+  
+  return (
+    <View>
+      <View className="title">找回密码</View>
+      <View className="form-box">
+        <Field
+          value={phone}
+          loading={loading}
+          placeholder="请输入注册手机号"
+          onChange={e => setPhone(e.detail)}
+          errorMessage={phoneErr}
+          renderButton={
+            <Button
+              round
+              size="small"
+              type="primary"
+              disabled={disabled}
+              onClick={onCaptcha}
+            >
+              {btnText}
+            </Button>
+          }
+        ></Field>
+        <Field
+          value={captcha}
+          placeholder="请输入验证码"
+          errorMessage={captchaErr}
+          onChange={e => setCaptcha(e.detail)}
+        ></Field>
+      </View>
+      <View className="form-act">
+        <View>
+        </View>
+        <View>
+          <Button block type="primary" size="small" onClick={handleNext}>下一步</Button>
+        </View>
+      </View>
+    </View>
+  )
+}

src/pages/reset-password/components/ResetPwd.jsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Field, Button } from '@antmjs/vantui';
+import md5 from 'md5';
+
+export default (props) => {
+  const { onPrev, onSubmit } = props;
+
+  const [loading, setLoading] = React.useState(false);
+  const [pwd1, setPwd1] = React.useState();
+  const [pwd1Err, setPwd1Err] = React.useState();
+  const [pwd2, setPwd2] = React.useState();
+  const [pwd2Err, setPwd2Err] = React.useState();
+  
+  const handlePrev = () => {
+    onPrev();
+  }
+
+  const handleSubmit = () => {
+    if (!pwd1) {
+      setPwd1Err('请输入密码');
+    } else{
+      setPwd1Err();
+    }
+    if (!pwd2) {
+      setPwd2Err('请确认密码');
+    } else {
+      setPwd2Err();
+    }
+
+    if (!pwd1 || !pwd2) {
+      return;
+    }
+
+    if (pwd1 != pwd2) {
+      setPwd2Err('两次密码不一致');
+      return;
+    } else {
+      setPwd2Err();
+    }
+
+    setLoading(true)
+    onSubmit({ password: md5(pwd1) }).then(() => {
+      setLoading(false);
+
+      Taro.navigateBack({
+        delta: 1,
+        fail: () => {
+          Taro.reLaunch({
+            url: '/pages/login/index',
+          })
+        }
+      })
+    }).catch(() => {
+      setLoading(false);
+    });
+  }
+  
+  return (
+    <View>
+      <View className="title">重置密码</View>
+      <View className="form-box">
+        <Field
+          value={pwd1}
+          placeholder="请设置新密码"
+          errorMessage={pwd1Err}
+          onChange={e => setPwd1(e.detail)}
+        ></Field>
+        <Field
+          value={pwd2}
+          placeholder="再次确认新密码"
+          errorMessage={pwd2Err}
+          onChange={e => setPwd2(e.detail)}
+        ></Field>
+      </View>
+      <View className="form-act">
+        <View>
+          <Button block hairline plain type="primary" size="small" onClick={handlePrev}>上一步</Button>
+        </View>
+        <View>
+          <Button block type="primary" size="small" loading={loading} onClick={handleSubmit}>确定</Button>
+        </View>
+      </View>
+    </View>
+  )
+}

src/pages/reset-password/index.config.js

@@ -0,0 +1,3 @@
+export default definePageConfig({
+  navigationBarTitleText: '找回密码'
+})

src/pages/reset-password/index.jsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import Page from '@/layouts/index';
+import { changePwd } from '@/services/wxma'; 
+import Captcha from './components/Captcha';
+import ResetPwd from './components/ResetPwd';
+import './index.less';
+
+export default (props) => {
+
+  const [direct, setDirect] = React.useState();
+  const transClass = direct == 'right' ? 'form-wrapper to-right' : 'form-wrapper';
+  const formData = React.useRef();
+
+  const onNext = (data) => {
+    formData.current = data;
+    setDirect('right');
+  }
+
+  const onSubmit = (data) => {
+    formData.current = {
+      ...formData.current,
+      ...data,
+    }
+
+    return changePwd(formData.current)
+  }
+  
+  return (
+    <Page>
+      <View className="reset-password-box">
+        <View className={transClass}>
+          <View>
+            <Captcha onNext={onNext} />
+          </View>
+          <View>
+            <ResetPwd onPrev={() => setDirect()} onSubmit={onSubmit} />
+          </View>
+        </View>
+      </View>
+    </Page>
+  )
+}

src/pages/reset-password/index.less

@@ -0,0 +1,50 @@
+.reset-password-box {
+  width: 100%;
+  padding: 80px 0;
+  overflow: hidden;
+
+  .title {
+    font-size: 36px;
+    font-weight: 500;
+    color: #000000;
+  }
+
+  .form-box {
+    margin-top: 80px;
+
+    .van-cell {
+      background: transparent;
+
+      &::after {
+        border-bottom-color: rgba(0, 0, 0, 0.12);
+      }
+    }
+  }
+
+  .form-act {
+    margin-top: 80px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+
+    & > view {
+      width: 180px;
+      flex: none;
+    }
+  }
+
+  .form-wrapper {
+    width: 200%;
+    transition: transform 200ms;
+
+    & > view {
+      padding: 0 60px;
+      display: inline-block;
+      width: 50%;
+    }
+
+    &.to-right {
+      transform: translate(-50%, 0);
+    }
+  }
+}

src/services/comm.js

@@ -0,0 +1,6 @@
+import request from '@/utils/request';
+
+/*
+ * 获取验证码
+ */
+export const getCaptcha = (phone) => request(`/api/ma/captcha?phone=${phone}`);

src/services/taissue.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request';
+
+/*
+ * 分页查询
+ */
+export const getTaIssue = (params) => request('/api/taIssue', { params });
+
+/*
+ * 新增数据
+ */
+export const postTaIssue = (data) => request('/api/taIssue', { data, method: 'post' });
+
+/*
+ * 通过ID查询单条数据
+ */
+export const getTaIssueById = (id) => request(`/api/taIssue/${id}`);
+
+/*
+ * 更新数据
+ */
+export const putTaIssue = (id, data) => request(`/api/taIssue/${id}`, { data, method: 'put' });
+
+/*
+ * 通过主键删除数据
+ */
+export const deleteTaIssue = (id) => request(`/api/taIssue/${id}`, { method: 'delete' });

src/services/tdissuetype.js

@@ -0,0 +1,26 @@
+import request from '@/utils/request';
+
+/*
+ * 分页查询
+ */
+export const getTdIssueType = (params) => request('/api/tdIssueType', { params });
+
+/*
+ * 新增数据
+ */
+export const postTdIssueType = (data) => request('/api/tdIssueType', { data, method: 'post' });
+
+/*
+ * 通过ID查询单条数据
+ */
+export const getTdIssueTypeById = (id) => request(`/api/tdIssueType/${id}`);
+
+/*
+ * 更新数据
+ */
+export const putTdIssueType = (id, data) => request(`/api/tdIssueType/${id}`, { data, method: 'put' });
+
+/*
+ * 通过主键删除数据
+ */
+export const deleteTdIssueType = (id) => request(`/api/tdIssueType/${id}`, { method: 'delete' });

src/services/tdloctype.js

@@ -0,0 +1,29 @@
+import request from '@/utils/request';
+
+/*
+ * 分页查询
+ */
+export const getTdLocType = (params) => request('/api/tdLocType', { params });
+
+/*
+ * 新增数据
+ */
+export const postTdLocType = (data) => request('/api/tdLocType', { data, method: 'post' });
+
+/*
+ * 通过ID查询单条数据
+ */
+export const getTdLocTypeById = (id) => request(`/api/tdLocType/${id}`);
+
+/**
+ * 更新数据
+ * @param {*} id
+ * @param {*} data
+ * @returns
+ */
+export const putTdLocType = (id, data) => request(`/api/tdLocType/${id}`, { data, method: 'put' });
+
+/*
+ * 通过主键删除数据
+ */
+export const deleteTdLocType = (id) => request(`/api/tdLocType/${id}`, { method: 'delete' });

src/services/wxma.js

@@ -14,3 +14,19 @@ export const authUser = (id, data) => request(`/api/ma/auth-user`, { data, metho
  * 小程序登录
  */
 export const login = (code) => request(`/api/ma/login?code=${code}`, { method: 'post', silent: true });
+
+/*
+ * 小程序登录
+ */
+export const signin = (data) => request(`/api/ma/signin`, { method: 'post', data });
+
+/*
+ * 获取当前人员
+ */
+export const currentUser = () => request(`/api/ma/current`);
+
+
+/*
+ * 修改密码
+ */
+export const changePwd = (data) => request(`/api/ma/change-password`, { method: 'post', data });

src/store/user.js

@@ -1,22 +1,42 @@
 import React from 'react';
 import Taro from '@tarojs/taro';
-import { login } from '@/services/wxma';
+import md5 from 'md5';
+import { login, signin, currentUser } from '@/services/wxma';
 
 export default function useUser() {
-  const [person, setPerson] = React.useState({});
-  const [user, setUser] = React.useState({});
+  const [person, setPerson] = React.useState();
+  const [user, setUser] = React.useState();
 
   const maLogin = (code) => {
     login(code).then(res => {
       setPerson(res.person);
-      setUser(res.user);
+      Taro.setStorage({ key: 'personId', data: res.person.personId })
       Taro.setStorage({ key: 'sessionKey', data: res.sessionKey })
     });
   }
 
+  const maSignIn = (params) => {
+    const data = {
+      ...params,
+      password: md5(params.password)
+    }
+
+    return signin(data).then(res => {
+      setUser(res.user);
+    })
+  }
+
+  const current = () => {
+    currentUser().then(res => {
+      setUser(res.user);
+    })
+  }
+
   return {
     user,
     person,
+    current,
+    signin: maSignIn,
     login: maLogin,
   }
 }

src/utils/authorize.js

@@ -1,6 +1,6 @@
 import Taro from '@tarojs/taro';
 
-export default (scope) => {
+export default function getAuthorize(scope) {
   return new Promise((resolve, reject) => {
     Taro.getSetting({
       success(res) {
@@ -24,3 +24,22 @@ export default (scope) => {
     });
   });
 }
+
+export const getLocation = () => {
+  return new Promise((resolve, reject) => {
+    getAuthorize('scope.userLocation').then(() => {
+      Taro.getLocation({
+        success(res) {
+          resolve(res);
+        },
+        fail(err) {
+          console.error(err);
+          reject(err);
+        }
+      });
+    }).catch((err) => {
+      console.error(err);
+      reject(err);
+    });
+  });
+}

src/utils/message.js

@@ -0,0 +1,12 @@
+
+import { Notify } from '@antmjs/vantui';
+
+export function warn(predicate, message) {
+  if (predicate) {
+    Notify.show({
+      message,
+      type: 'warning',
+    })
+    throw new Error(message);
+  }
+}

src/utils/request.js

@@ -16,7 +16,8 @@ export default function request(api, options = {}) {
     const { method = 'GET', params, data = {}, header = {}, silent = false, ...cfgs } = options;
     const queryStr = params ? getQueryStrByParams(params) : undefined;
     // eslint-disable-next-line no-undef
-    const url = queryStr ? `${HOST}${api}?${queryStr}` : `${HOST}${api}`
+    const url = queryStr ? `${HOST}${api}?${queryStr}` : `${HOST}${api}`;
+    const personId = Taro.getStorageSync('personId');
     
     const onError = (err) => {
       console.error(err);
@@ -39,6 +40,7 @@ export default function request(api, options = {}) {
       data,
       method,
       header: {
+        'x-personId': personId,
         'content-type': 'application/json',
         'authorization': getToken(),
         ...header,
@@ -70,3 +72,39 @@ export default function request(api, options = {}) {
 
   });
 }
+
+
+export const uploadFiles = async (files, url) => {
+  const uploads = []
+  const token = getToken();
+  for (var i = 0; i < files.length; i++) {
+    uploads[i] = new Promise((resolve, reject) => {
+      Taro.uploadFile({
+        // eslint-disable-next-line no-undef
+        url: url || `${HOST}/api/ma/file`,
+        filePath: files[i].tempFilePath,
+        header: {
+          'authorization': token,
+        },
+        name: 'file',
+        formData: {
+          fileType: files[i].fileType,
+        },
+        success: function (res) {
+          // debugger
+          const _data = JSON.parse(res.data)
+          // if (_data.code !== CODE_SUCCESS) {
+          //   reject(new Error(_data.message))
+          // }
+
+          resolve(_data.data)
+        },
+        fail(err) {
+          reject(err)
+        }
+      })
+    })
+  }
+
+  return Promise.all(uploads)
+}

src/utils/user.js

@@ -0,0 +1,24 @@
+
+// 督察员
+export const ROLE_INSPECTOR = 'inspector';
+
+// 管理员
+export const ROLE_MANAGER = 'manager';
+
+// 单位人员
+export const ROLE_ORG_USER = 'org_user';
+
+// 查询员
+export const ROLE_QUERY_PERSON = 'query_person';
+
+// 市民
+export const ROLE_CITIZEN = 'citizen';
+
+
+export const ROLES = {
+  [ROLE_INSPECTOR]: '督察员',
+  [ROLE_MANAGER]: '管理员',
+  [ROLE_ORG_USER]: '单位人员',
+  [ROLE_QUERY_PERSON]: '查询员',
+  [ROLE_CITIZEN]: '市民',
+}

yarn.lock

@@ -8180,7 +8180,7 @@ md5.js@^1.3.4:
 
 md5@^2.3.0:
   version "2.3.0"
-  resolved "https://registry.npmmirror.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"
+  resolved "https://registry.yarnpkg.com/md5/-/md5-2.3.0.tgz#c3da9a6aae3a30b46b7b0c349b87b110dc3bda4f"
   integrity sha512-T1GITYmFaKuO91vxyoQMFETst+O71VUPEU3ze5GNzDm0OWdP8v1ziTaAEPUr/3kLsY3Sftgz242A1SetQiDL7g==
   dependencies:
     charenc "0.0.2"