feats

config/dev.js

@@ -6,6 +6,7 @@ module.exports = {
     // HOST: '"http://127.0.0.1:9087"',
     HOST: '"http://localhost:9087"',
     AD_IMAGE: '"https://h5.njyunzhi.com/images/citizen_banner.png"',
+    DEFAULT_POS: '"116.3476917447715,31.409912844296578"', // 霍山县人民政府 gcj02
   },
   mini: {},
   h5: {},

config/prod.js

@@ -5,6 +5,7 @@ module.exports = {
   defineConstants: {
     HOST: '"https://t.njyz.tech"',
     AD_IMAGE: '"https://h5.njyunzhi.com/images/citizen_banner.png"',
+    DEFAULT_POS: '"116.3476917447715,31.409912844296578"', // 霍山县人民政府 gcj02
   },
   mini: {},
   h5: {

src/app.config.js

@@ -16,8 +16,6 @@ export default defineAppConfig({
     // 'pages/checkStand/index',
     "pages/checkStand/list/index",
     "pages/checkStand/detail/index",
-    "pages/reporting/index",
-    "pages/reporting/detail/index",
     "pages/reset-password/index",
     "pages/check/list/index",
     "pages/check/loc/list/index",

src/components/map/index.jsx

@@ -6,66 +6,106 @@ import { getLocation } from '@/utils/authorize';
 import iconPath from '@/assets/icons/marker.png';
 import style from './style.module.less';
 
-// location 逻辑
-// 如果 props.location 有值, 那么放弃地图定位的点, 使用 props.location
-// 否则使用 地图定位的点
-// 如果地图定位失败 或者 props.location 为空, 那么不产生数据交互
-// 但是地图上默认使用 霍山县人民政府 的定位
 export default (props) => {
-  const { location, onLocChange } = props;
+  const { readOnly, location, onChange } = props;
+
+  const id = React.useMemo(() => `map-${Math.random().toString(36).substring(2, 10)}`, []);
+  const mapCtxRef = React.useRef();
 
-  const [currentPos, setCurPos] = React.useState();
   const [
-    markers,
-    lngLat,
+    // markers,
+    center,
   ] = React.useMemo(() => {
-    const loc = location || currentPos || '116.354259,31.415587';
+    // eslint-disable-next-line no-undef
+    const loc = location || DEFAULT_POS;
     const [longitude, latitude] = loc.split(',');
 
-    const mks = [{
-      id: 1,
-      longitude,
-      latitude,
-      iconPath,
-      width: 17,
-      height: 20
-    }];
+    // const mks = [{
+    //   id: 1,
+    //   longitude,
+    //   latitude,
+    //   iconPath,
+    //   width: 17,
+    //   height: 20
+    // }];
 
     return [
-      mks,
-      [longitude, latitude]
+      // mks,
+      {longitude, latitude}
     ]
-  }, [location, currentPos]);
+  }, [location]);
 
-  React.useEffect(() => {
-    getLocation().then((res) => {
-      setCurPos([res.longitude, res.latitude].join(','));
-    }).catch((err) => {
-      console.error(err);
-      Taro.showToast({
-        title: '定位失败',
-        icon: 'none',
+  const moveTo = (ctx, point) => {
+    ctx.moveToLocation({
+      ...point,
+      fail: console.error,
+    })
+  }
+
+  const getContext = React.useCallback(() => {
+    const query = Taro.createSelectorQuery();
+    query.select(`#${id}`).context(res => {
+      mapCtxRef.current = res.context;
+
+      // 修改中心图标 - 暂时不起作用, wx bug
+      mapCtxRef.current.setLocMarkerIcon({
+        iconPath,
+        fail: console.error,
       })
+    }).exec();
+  }, [id]);
+
+  const fixedLocation = () => {
+    return new Promise((resolve) => {
+      getLocation({ type: 'gcj02' }).then((res) => {
+        resolve(res);
+      }).catch((err) => {
+        console.error(err);
+        Taro.showToast({
+          title: '定位失败',
+          icon: 'none',
+        })
+      });
     });
-  }, []);
+  }
 
+  const onRefresh = () => {
+    if (mapCtxRef.current) {
+      fixedLocation().then((res) => {
+        const { longitude, latitude } = res;
+        onChange([res.longitude, res.latitude].join(','));
+        moveTo(mapCtxRef.current, {longitude, latitude});
+      })
+    }
+  }
+  
   React.useEffect(() => {
-    if (!location && !currentPos) return;
-
-    const loc = location || currentPos;
-    if (loc) {
-      onLocChange(loc);
+    if (!readOnly) {
+      fixedLocation().then((res) => {
+        const { longitude, latitude } = res;
+        onChange([longitude, latitude].join(','));
+      })
     }
-  }, [location, currentPos]);
+  }, [readOnly]);
+
+  React.useEffect(() => {
+    getContext();
+  }, [getContext]);
 
   return (
     <View className={style['map-wrapper']}>
       <Map
-        longitude={lngLat[0]}
-        latitude={lngLat[1]}
-        markers={markers}
+        id={id}
+        showLocation
+        longitude={center.longitude}
+        latitude={center.latitude}
+        // markers={markers}
       >
-        <CoverView className={style['control']}><Icon name="aim" size="26px" color="rgb(18,183,245)" /></CoverView>
+        {!readOnly && (
+          <CoverView className={style['control']} onClick={onRefresh}>
+            <Icon name="aim" size="24px" color="#1A7565" />
+          </CoverView>
+        )}
       </Map>
     </View>
   )

src/components/map/style.module.less

@@ -12,8 +12,8 @@
     left: 0;
     .control {
       position: absolute;
-      bottom: 14%;
-      right: 4%;
+      bottom: var(--main-space);
+      right: var(--main-space);
     }
   }
 }

src/pages/check/edit/components/LocForm.jsx

@@ -10,7 +10,6 @@ import AgePicker from './AgePicker';
 export default (props) => {
   const { checkItemInfo, checkType, answer, readonly, onChange, onLoadingChange } = props;
 
-  const [loc, setLoc] = React.useState();
   const [showAgePicker, setShowAgePicker] = React.useState(false);
 
   const setLoading = (v) => {
@@ -21,7 +20,6 @@ export default (props) => {
 
   const setFieldChange = (key, val) => {
     onChange({
-      location: loc,
       ...answer || {},
       [key]: val,
     })
@@ -46,7 +44,11 @@ export default (props) => {
 
   return (
     <View>
-      <Map location={answer?.location} onLocChange={setLoc} />
+      <Map
+        readOnly={readonly}
+        location={answer?.location}
+        onChange={e => setFieldChange('location', e)}
+      />
       <CellGroup>
         {
           checkType == 'loc' && (
@@ -56,18 +58,22 @@ export default (props) => {
             />
           )
         }
+        {
+          checkType == 'survey' && (
+            <Field
+              label="社区"
+              placeholder="请填写社区名称"
+              readonly={readonly}
+              value={answer?.communityName}
+              onChange={e => setFieldChange('communityName', e.detail)}
+            />
+          )
+        }
         <Field
           readonly={readonly}
-          placeholder={checkType == 'loc' ? '请输入地址' : '请填写社区名称'}
-          // value={answer}
-          leftIcon={mapIcon}
-        // onChange={e => setFieldChange('', e.detail)}
-        />
-        <Field
-          readonly={readonly}
+          label={checkType == 'loc' ? '地址' : '小区'}
           placeholder={checkType == 'loc' ? '请输入地址' : '请填写小区名称'}
           value={answer?.addr}
-          leftIcon={mapIcon}
           onChange={e => setFieldChange('addr', e.detail)}
         />
       </CellGroup>

src/pages/check/edit/index.jsx

@@ -44,8 +44,8 @@ export default (props) => {
     if (index == -1 && n != -1) {
       if (!readonly) {
         try {
+          warn(typ == 'survey' && !answer?.communityName, '请填写社区名称');
           warn(!answer?.addr, typ == 'loc' ? '请填写地址' : '请填写小区名称');
-          // warn(!answer, typ == 'loc' ? '请填写地址' : '请填写社区名称');
           warn(!answer?.location, '未能获取定位信息, 请重试');
           warn(typ == 'survey' && !answer?.sex, '请选择性别');
           warn(typ == 'survey' && !answer?.age, '请选择年龄段');

src/pages/check/loc/edit/components/LocForm.jsx

@@ -9,8 +9,6 @@ import mapIcon from '@/assets/icons/marker.png';
 export default (props) => {
   const { checkItemInfo, answer, readonly, onChange, onLoadingChange } = props;
 
-  const [loc, setLoc] = React.useState();
-
   const setLoading = (v) => {
     if (onLoadingChange) {
       onLoadingChange(v)
@@ -19,7 +17,6 @@ export default (props) => {
   
   const setFieldChange = (key, val) => {
     onChange({
-      location: loc,
       ...answer || {},
       [key]: val,
     })
@@ -42,7 +39,11 @@ export default (props) => {
   
   return (
     <View>
-      <Map location={answer?.location} onLocChange={setLoc} />
+      <Map
+        readOnly={readonly}
+        location={answer?.location}
+        onChange={(e) => setFieldChange('location', e)}
+      />
       <CellGroup>
         <Cell
           title="点位"

src/pages/feedback/issue/index.jsx

@@ -64,8 +64,9 @@ export default (props) => {
   return (
     <Page tabBar="feedback">
       <Map
+        readOnly={readOnly}
         location={formData.location}
-        onLocChange={e => !formData.location && setFieldChange('location', e)}
+        onChange={e => !formData.location && setFieldChange('location', e)}
       />
 
       <CellGroup>

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

@@ -144,8 +144,9 @@ export default (props) => {
       />
 
       <Map
+        readOnly={readOnly}
         location={formData.location}
-        onLocChange={e => !formData.location && setFieldChange('location', e)}
+        onChange={e => !formData.location && setFieldChange('location', e)}
       />
 
       <CellGroup>

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

@@ -1,20 +0,0 @@
-import React from 'react';
-import { View } from '@tarojs/components';
-import style from './issue.module.less';
-
-export default (props) => {
-  
-  return (
-    <View className={style['issue-container']}>
-      <View class={style.card}>
-        <View className={style.title}>状态</View>
-      </View>
-      <View class={style.card}>
-        <View className={style.title}>问题描述</View>
-      </View>
-      <View class={style.card}>
-        <View className={style.title}>拍照</View>
-      </View>
-    </View>
-  )
-}

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

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

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

@@ -1,21 +0,0 @@
-
-.issue-container {
-  margin-top: var(--main-space);
-
-  .card {
-    background: #fff;
-    padding: 0 var(--main-space);
-
-    & + .card {
-      margin-top: 2.67vw;
-    }
-  }
-
-  .title {
-    height: 90px;
-    font-size: 32px;
-    font-weight: bold;
-    color: #202020;
-    line-height: 90px;
-  }
-}

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

@@ -1,16 +0,0 @@
-
-.map-box {
-  width: 100vw;
-
-  .address {
-    width: 100%;
-    background: #fff;
-    height: 90px;
-    font-size: 24px;
-    font-weight: 500;
-    color: #202020;
-    line-height: 90px;
-    padding: 0 var(--main-space);
-  }
-  
-}

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

@@ -1,3 +0,0 @@
-export default definePageConfig({
-  navigationBarTitleText: '详情'
-})

src/pages/reporting/detail/index.jsx

@@ -1,41 +0,0 @@
-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 Map from './components/Map';
-import Issue from './components/Issue';
-
-export default (props) => {
-
-  const [loc, setLoc] = React.useState();
-
-  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>
-      <Map location={loc} />
-      <Issue />
-    </Page>
-  )
-}

src/pages/reporting/index.config.js

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

src/pages/reporting/index.jsx

@@ -1,9 +0,0 @@
-import React from 'react';
-import { View } from '@tarojs/components';
-
-export default (props) => {
-  
-  return (
-    <View></View>
-  )
-}

src/utils/authorize.js

@@ -25,10 +25,11 @@ export default function getAuthorize(scope) {
   });
 }
 
-export const getLocation = () => {
+export const getLocation = (options) => {
   return new Promise((resolve, reject) => {
     getAuthorize('scope.userLocation').then(() => {
       Taro.getLocation({
+        ...options || {},
         success(res) {
           resolve(res);
         },