feats

src/app.config.js

@@ -5,6 +5,7 @@ export default defineAppConfig({
     'pages/index3/index',
     'pages/index4/index',
     'pages/index5/index',
+    'pages/issue/add/index',
     'pages/reporting/index',
     'pages/reporting/detail/index',
     'pages/reset-password/index',
@@ -57,5 +58,8 @@ export default defineAppConfig({
   },
   requiredPrivateInfos: [
     'getLocation'
-  ]
+  ],
+  setting: {
+    urlCheck: false,
+  }
 })

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/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/pages/issue/add/index.config.js

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

src/pages/issue/add/index.jsx

@@ -0,0 +1,116 @@
+import React from 'react';
+import Taro from '@tarojs/taro';
+import { View } from '@tarojs/components';
+import { Notify, Field, Cell, CellGroup, Uploader } from '@antmjs/vantui';
+import Page from '@/layouts/index';
+import LocType from '@/components/locType';
+import IssueType from '@/components/issueType';
+import Map from '@/components/map';
+import getAuthorize from '@/utils/authorize';
+import { ROLE_INSPECTOR } from '@/utils/user';
+import mapIcon from '@/assets/icons/marker.png';
+
+export default (props) => {
+
+  const [showLocType, setShowLocType] = React.useState(false);
+  const [showIssueType, setShowIssueType] = React.useState(false);
+  const [loc, setLoc] = React.useState();
+  const [locType, setLocType] = React.useState();
+  const [issueType, setIssueType] = React.useState();
+  const [address, setAddress] = React.useState();
+
+  const onLocTypeChange = (_, it) => {
+    setLocType(it);
+    setShowLocType(false);
+  }
+  const onIssueTypeChange = (_, it) => {
+    setIssueType(it);
+    setShowIssueType(false);
+  }
+  
+  React.useMemo(() => {
+    getAuthorize('scope.userLocation').then(() => {
+      Taro.getLocation({
+        success(res) {
+          setLoc(`${res.longitude},${res.latitude}`);
+        },
+        fail() {
+          Notify.show({
+            message: '获取位置失败, 请退出重试',
+            type: 'warning',
+          })
+        }
+      });
+    }).catch((err) => {
+      Notify.show({
+        message: '未能获取位置, 程序部分功能将不能正常使用',
+        type: 'warning',
+      })
+    });
+  }, []);
+
+  return (
+    <Page roles={[ROLE_INSPECTOR]}>
+      <LocType
+        show={showLocType}
+        value={locType?.typeId}
+        onCancel={() => setShowLocType(false)}
+        onChange={onLocTypeChange}
+      />
+
+      <IssueType
+        show={showIssueType}
+        value={issueType?.typeId}
+        onCancel={() => setShowIssueType(false)}
+        onChange={onIssueTypeChange}
+      />
+
+      <Map location={loc} />
+
+      <Field
+        value={address}
+        leftIcon={mapIcon}
+        placeholder="请输入地址"
+        onChange={e => setAddress(e.detail)}
+      />
+
+      <CellGroup style={{marginTop: '20px'}}>
+        <Cell
+          isLink
+          title="点位"
+          value={locType?.name}
+          onClick={() => setShowLocType(true)}
+        />
+
+        <Cell title="问题描述" border={false} />
+
+        <Field
+          type="textarea"
+          placeholder="请输入问题描述"
+          autosize={{ minHeight: '120px' }}
+        />
+      </CellGroup>
+      
+      <Cell
+        isLink
+        title="问题分类"
+        style={{marginTop: '20px'}}
+        value={issueType?.name}
+        onClick={() => setShowIssueType(true)}
+      />
+
+      
+      <CellGroup style={{marginTop: '20px'}}>        
+        <Cell title="拍照" border={false} />
+
+        <Cell
+          renderTitle={
+            <Uploader
+              deletable
+            />
+          }
+        />
+      </CellGroup>
+    </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/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' });