feats

src/components/GetUserIcon/index.jsx

@@ -1,37 +1,73 @@
 import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
 import { Button } from '@tarojs/components'
 import request, { apis } from '@/utils/request'
-import Taro from '@tarojs/taro'
-import { store, useModel } from '@/store'
+import { useModel } from '@/store'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function GetUserIcon (props) {
-
-  const { setUser } = store.getModel('user').getState()
-  const { user } = useModel('user')
-  const { Show = false, Close = () => { } } = props
+  const [showPannel, setShowPannel] = useState(true)
+  const { user, setUser } = useModel('user')
 
   const ToGetUserIcon = (e) => { // 授权用户头像
-    if (e.detail.userInfo !== undefined) {
-      setUser({ ...user, avatarurl: e.detail.userInfo.avatarUrl, nickname: e.detail.userInfo.nickName })
-      Taro.showToast({ title: '头像授权成功', icon: 'none' })
+    const { errMsg, ...data } = e.detail
+    if (errMsg === 'getUserInfo:ok') {
+      request({
+        ...apis.userAutInfo,
+        data: {
+          sessionKey: Taro.getStorageSync('sessionKey'),
+          ...data,
+        }
+      }).then(res => {
+        const { person } = res
+        setUser({
+          ...user,
+          ...person
+        })
+        if (props.onOk) {
+          props.onOk(res)
+        }
+      }).catch(er => {
+        setShowPannel(true)
+        if (props.onError) {
+          props.onError(er.message || er.errMsg || er)
+        }
+      })
     } else {
-      Taro.showToast({ title: '头像授权失败', icon: 'none' })
+      setShowPannel(true)
+      if (props.onError) {
+        props.onError(errMsg)
+      }
+    }
+  }
+
+  const handleCancel = () => {
+    if (props.onCancel) {
+      props.onCancel()
     }
-    Close()
   }
 
-  return (
-    <view className='GetUserIcon' style={{ display: Show ? 'block' : 'none' }}>
-      <view className='centerLabel'>
-        <text>您暂未授权头像</text>
-        <view className='flex-h'>
-          <text className='flex-item' onClick={Close}>取消</text>
-          <Button className='flex-item' open-type='getUserInfo' lang='zh_CN' ongetuserinfo={ToGetUserIcon}>去授权</Button>
-        </view>
-      </view>
+  return props.visible && (
+    <view className='GetUserIcon'>
+      {
+        showPannel && (
+          <view className='centerLabel'>
+            <text>您暂未授权头像</text>
+            <view className='flex-h'>
+              <text className='flex-item' onClick={handleCancel}>取消</text>
+              <Button
+                className='flex-item'
+                open-type='getUserInfo'
+                lang='zh_CN'
+                onGetUserInfo={ToGetUserIcon}
+                onTap={() => setShowPannel(false)}
+              >去授权</Button>
+            </view>
+          </view>
+        )
+      }
     </view>
   )
 }

src/components/GetUserPhone/index.jsx

@@ -1,44 +1,71 @@
 import React, { useState } from 'react'
+import Taro from '@tarojs/taro'
 import { Button } from '@tarojs/components'
 import request, { apis } from '@/utils/request'
-import Taro from '@tarojs/taro'
-import { store, useModel } from '@/store'
+import { useModel } from '@/store'
 import '@/assets/css/reset.less'
 import '@/assets/css/iconfont.less'
 import './index.less'
 
 export default function GetUserPhone (props) {
-
-  const { setUser } = store.getModel('user').getState()
-  const { user } = useModel('user')
-  const { Show = false, Close = () => { } } = props
+  const [showPannel, setShowPannel] = useState(true)
+  const { user, setUser } = useModel('user')
 
   const ToGetUserPhone = (e) => { // 授权手机号
-    Close()
-    request({
-      ...apis.getUserPhone,
-      data: {
-        sessionKey: Taro.getStorageSync('sessionKey'),
-        encryptedData: e.detail.encryptedData,
-        iv: e.detail.iv
+    const { errMsg, ...data } = e.detail
+    if (errMsg === 'getPhoneNumber:ok') {
+      request({
+        ...apis.getUserPhone,
+        data: {
+          sessionKey: Taro.getStorageSync('sessionKey'),
+          encryptedData: data.encryptedData,
+          iv: data.iv
+        }
+      }).then((res) => {
+        setUser({ ...user, phone: res.phoneNumber })
+
+        if (props.onOk) {
+          props.onOk(res)
+        }
+      }).catch((er) => {
+        setShowPannel(true)
+        if (props.onError) {
+          props.onError(er.message || er.errMsg || er)
+        }
+      })
+    } else {
+      setShowPannel(true)
+      if (props.onError) {
+        props.onError(errMsg)
       }
-    }).then((res) => {
-      setUser({ ...user, phone: res.phoneNumber })
-      Taro.showToast({ title: '手机授权成功', icon: 'none' })
-    }).catch(() => {
-      Taro.showToast({ title: '手机授权失败', icon: 'none' })
-    })
+    }
   }
 
-  return (
-    <view className='GetUserPhone' style={{display: Show ? 'block' : 'none'}}>
-      <view className='centerLabel'>
-        <text>您暂未授权手机号</text>
-        <view className='flex-h'>
-          <text className='flex-item' onClick={Close}>取消</text>
-          <Button className='flex-item' open-type='getPhoneNumber' lang='zh_CN' onGetphonenumber={ToGetUserPhone}>去授权</Button>
-        </view>
-      </view>
+  const handleCancel = () => {
+    if (props.onCancel) {
+      props.onCancel()
+    }
+  }
+
+  return props.visible && (
+    <view className='GetUserPhone'>
+      {
+        showPannel && (
+          <view className='centerLabel'>
+            <text>您暂未授权手机号</text>
+            <view className='flex-h'>
+              <text className='flex-item' onClick={handleCancel}>取消</text>
+              <Button
+                className='flex-item'
+                open-type='getPhoneNumber'
+                lang='zh_CN'
+                onGetphonenumber={ToGetUserPhone}
+                onTap={() => setShowPannel(false)}
+              >去授权</Button>
+            </view>
+          </view>
+        )
+      }
     </view>
   )
 }

src/layouts/index.jsx

@@ -1,17 +1,88 @@
-import React from 'react'
+import React, { useState, useEffect } from 'react'
+import Taro from '@tarojs/taro'
 import { useModel } from '@/store'
 import Spin from '@/components/Spin'
+import GetUserPhone from '@/components/GetUserPhone/index'
+import GetUserIcon from '@/components/GetUserIcon/index'
 import useMountTrack from '@/utils/hooks/useMountTrack'
+import { getPage } from '@/utils'
+
+const pages = require('../pages')
+
+const showError = err => {
+  Taro.showModal({
+    title: '错误',
+    content: err,
+    showCancel: false
+  })
+}
 
 export default function(props) {
+  const [showAuthBasic, setShowAuthBasic] = useState(false)
+  const [showAuthYeZhu, setShowAuthYeZhu] = useState(false)
+  const [showAuthPhone, setShowAuthPhone] = useState(false)
   const { user } = useModel('user')
 
   const loading = !user || !user.personId
+  const isAuthedBasic = user && user.avatarurl && user.nickname
+  const isAuthedPhone = user && user.phone
+  const isAuthedYeZhu = user
+
+  const page = getPage()
+  const needAuthBasic = (page.auth || []).indexOf('avatar') > -1
+  const needAuthYeZhu = (page.auth || []).indexOf('yezhu') > -1
+  const needAuthPhone = (page.auth || []).indexOf('phone') > -1
   
   // 埋点
   useMountTrack()
 
+  // 授权手机
+  useEffect(() => {
+    if (!isAuthedPhone && needAuthPhone) {
+      setShowAuthPhone(true)
+    } else {
+      setShowAuthPhone(false)
+    }
+  }, [isAuthedPhone, needAuthPhone])
+
+  // 认证业主
+  useEffect(() => {
+    // 如果当前是认证业务页面
+    if (page.isYeZhuRenZheng) {
+      return
+    }
+
+    if (isAuthedPhone && !isAuthedYeZhu) {
+      const renZhengPage = pages.filter(x => x.isYeZhuRenZheng)[0]
+      if (renZhengPage) {
+        // 跳转到业主认证页面
+        // to = renZhengPage.page
+      }
+    }
+  }, [needAuthYeZhu, isAuthedPhone, page])
+
+  // 授权头像
+  useEffect(() => {
+    let needShow = false
+
+    // 授权手机之后才授权头像
+    if (isAuthedPhone) {
+      // 要求业主认证的
+      if (isAuthedYeZhu || !needAuthYeZhu) {
+        if (!isAuthedBasic && needAuthBasic) {
+          needShow = true
+        }
+      }
+    }
+
+    setShowAuthBasic(needShow)
+  }, [isAuthedBasic, needAuthBasic, isAuthedPhone, isAuthedYeZhu, needAuthYeZhu])
+
   return (
-    <Spin loading={loading}>{ props.children }</Spin>
+    <Spin loading={loading}>
+      <GetUserIcon visible={showAuthBasic} onError={err => showError(`授权头像失败: ${err}`)} />
+      <GetUserPhone visible={showAuthPhone} onError={err => showError(`授权手机失败: ${err}`)} />
+      { props.children }
+    </Spin>
   )
 }

src/pages.js

@@ -3,6 +3,7 @@ const Main = [
   {
     name: '首页',
     page: 'pages/ShouYe/index',
+    auth: [],
     track: {
       event: 'index',
       eventType: 'main',
@@ -11,6 +12,7 @@ const Main = [
   {
     name: '首页-活动',
     page: 'pages/ShouYe/HuoDong/index',
+    auth: ['avatar'],
     track: {
       event: 'list',
       eventType: 'activity',
@@ -19,6 +21,7 @@ const Main = [
   {
     name: '首页-资讯',
     page: 'pages/ShouYe/ZiXun/index',
+    auth: ['avatar'],
     track: {
       event: 'list',
       eventType: 'news',
@@ -30,6 +33,7 @@ const Property = [
   {
     name: '物业',
     page: 'pages/WuYe/index',
+    auth: ['avatar', 'phone', 'yezhu'],
     track: {
       event: 'list',
       eventType: 'property',
@@ -38,6 +42,7 @@ const Property = [
   {
     name: '物业-服务详情',
     page: 'pages/WuYe/FuWuDetail/index',
+    auth: ['avatar', 'phone', 'yezhu'],
     track: {
       event: 'detail',
       eventType: 'property',
@@ -46,6 +51,7 @@ const Property = [
   {
     name: '物业-公告详情',
     page: 'pages/WuYe/GongGaoDetail/index',
+    auth: ['avatar', 'phone', 'yezhu'],
     track: {
       event: 'detail',
       eventType: 'property',
@@ -54,11 +60,13 @@ const Property = [
   {
     name: '物业-报修区域',
     page: 'pages/WuYe/BaoXiuQuYu/index',
+    auth: ['avatar', 'phone', 'yezhu'],
     type: 'property',
   },
   {
     name: '物业-添加报修',
     page: 'pages/WuYe/TianJiaBaoXiu/index',
+    auth: ['avatar', 'phone', 'yezhu'],
     track: {
       event: 'detail',
       eventType: 'property',
@@ -67,6 +75,7 @@ const Property = [
   {
     name: '物业-报修详情',
     page: 'pages/WuYe/BaoXiuDetail/index',
+    auth: ['avatar', 'phone', 'yezhu'],
     track: {
       event: 'detail',
       eventType: 'property',
@@ -75,6 +84,7 @@ const Property = [
   {
     name: '物业-编辑报修',
     page: 'pages/WuYe/XiuGaiBaoXiu/index',
+    auth: ['avatar', 'phone', 'yezhu'],
     track: {
       event: 'detail',
       eventType: 'property',
@@ -83,6 +93,7 @@ const Property = [
   {
     name: '物业-报修费用',
     page: 'pages/WuYe/BaoXiuFeiYong/index',
+    auth: ['avatar', 'phone', 'yezhu'],
     track: {
       event: 'detail',
       eventType: 'property',
@@ -91,6 +102,7 @@ const Property = [
   {
     name: '物业-缴费详情',
     page: 'pages/WuYe/JiaoFeiDetail/index',
+    auth: ['avatar', 'phone', 'yezhu'],
     track: {
       event: 'detail',
       eventType: 'property',
@@ -102,6 +114,7 @@ const Activity = [
   {
     name: '活动',
     page: 'pages/HuoDong/index',
+    auth: ['avatar'],
     track: {
       event: 'list',
       eventType: 'activity',
@@ -110,6 +123,7 @@ const Activity = [
   {
     name: '活动-活动详情',
     page: 'pages/HuoDong/HuoDongDetail/index',
+    auth: ['avatar', 'phone'],
     track: {
       event: 'detail',
       eventType: 'activity',
@@ -118,6 +132,7 @@ const Activity = [
   {
     name: '活动-资讯详情',
     page: 'pages/HuoDong/ZiXunDetail/index',
+    auth: ['avatar', 'phone'],
     track: {
       event: 'detail',
       eventType: 'news',
@@ -129,6 +144,7 @@ const Shop = [
   {
     name: '福利',
     page: 'pages/FuLi/index',
+    auth: ['avatar', 'phone'],
     track: {
       event: 'list',
       eventType: 'shop',
@@ -137,6 +153,7 @@ const Shop = [
   {
     name: '福利-商品详情',
     page: 'pages/FuLi/ShangPinXiangQing/index',
+    auth: ['avatar', 'phone'],
     track: {
       event: 'detail',
       eventType: 'shop',
@@ -145,6 +162,7 @@ const Shop = [
   {
     name: '福利-商品兑换',
     page: 'pages/FuLi/ShangPinDuiHuan/index',
+    auth: ['avatar', 'phone'],
     track: {
       event: 'exchange',
       eventType: 'shop',
@@ -153,6 +171,7 @@ const Shop = [
   {
     name: '福利-积分规则',
     page: 'pages/FuLi/JiFenGuiZe/index',
+    auth: ['avatar', 'phone'],
     track: {
       event: 'points_rule',
       eventType: 'shop',
@@ -161,6 +180,7 @@ const Shop = [
   {
     name: '福利-积分明细',
     page: 'pages/FuLi/JiFenMingXi/index',
+    auth: ['avatar', 'phone'],
     track: {
       event: 'points_details',
       eventType: 'shop',
@@ -172,6 +192,7 @@ const Other = [
   {
     name: '我的',
     page: 'pages/WoDe/index',
+    auth: ['avatar', 'phone'],
     track: {
       event: 'list',
       eventType: 'other',
@@ -180,6 +201,7 @@ const Other = [
   {
     name: '我的-个人信息',
     page: 'pages/WoDe/GeRenXinXi/index',
+    auth: ['avatar', 'phone'],
     track: {
       event: 'detail',
       eventType: 'other',
@@ -188,19 +210,23 @@ const Other = [
   {
     name: '我的-我的认证',
     page: 'pages/WoDe/WoDeRenZheng/index',
+    auth: ['avatar', 'phone', 'yezhu'],
     type: 'other',
   },
   {
     name: '我的-业主认证',
     page: 'pages/WoDe/YeZhuRenZheng/index',
+    auth: ['avatar', 'phone', 'yezhu'],
     track: {
       event: 'detail',
       eventType: 'property',
-    }
+    },
+    isYeZhuRenZheng: true,
   },
   {
     name: '我的-业主审核',
     page: 'pages/WoDe/YeZhuShenHe/index',
+    auth: ['avatar', 'phone', 'yezhu'],
     track: {
       event: 'detail',
       eventType: 'property',
@@ -209,6 +235,7 @@ const Other = [
   {
     name: '我的-我的活动',
     page: 'pages/WoDe/WoDeHuoDong/index',
+    auth: ['avatar', 'phone'],
     track: {
       event: 'list',
       eventType: 'activity',
@@ -217,6 +244,7 @@ const Other = [
   {
     name: '我的-推荐二维码',
     page: 'pages/WoDe/TuiJianErWeiMa/index',
+    auth: ['avatar', 'phone'],
     track: {
       event: 'detail',
       eventType: 'other',
@@ -225,6 +253,7 @@ const Other = [
   {
     name: '我的-推荐分享',
     page: 'pages/WoDe/TuiJianFenXiang/index',
+    auth: ['avatar', 'phone'],
     track: {
       event: 'detail',
       eventType: 'other',

src/pages/ShouYe/index.jsx

@@ -1,7 +1,5 @@
 import React, { useState, useEffect } from 'react'
 import NavHeader from '@/components/NavHeader/index'
-import GetUserPhone from '@/components/GetUserPhone/index'
-import GetUserIcon from '@/components/GetUserIcon/index'
 import { Swiper, SwiperItem, Text } from '@tarojs/components'
 import request, { apis } from '@/utils/request'
 import { useModel } from '@/store'
@@ -15,8 +13,6 @@ import './index.less'
 export default function Index (props) {
 
   const { user } = useModel('user')
-  const [ShowGetUserPhoneLayer, setShowGetUserPhoneLayer] = useState(false)
-  const [ShowGetUserIconLayer, setShowGetUserIconLayer] = useState(false)
   const [ShowAdvLayer, setShowAdvLayer] = useState(false)
   const [IsPull, setIsPull] = useState(false)
   const [OwnerList] = useState([
@@ -266,12 +262,6 @@ export default function Index (props) {
           </view>
 
         </view>
-
-        {/* 获取用户手机号授权 */}
-        <GetUserPhone Show={ShowGetUserPhoneLayer} Close={() => { setShowGetUserPhoneLayer(false) }}></GetUserPhone>
-
-        {/* 获取用户头像 */}
-        <GetUserIcon Show={ShowGetUserIconLayer} Close={() => { setShowGetUserIconLayer(false) }}></GetUserIcon>
       </view >
     </Page>
   )

src/utils/api.js

@@ -140,7 +140,13 @@ const $api = {
   setShare: { // 分享
     method: 'put',
     url: `${prefix}/:type/share/:id`
-  }
+  },
+
+  // 授权头像等基本信息
+  userAutInfo: {
+    method: 'post',
+    url: `${prefix}/signup`
+  },
 
 }
 

src/utils/hooks/useMountTrack.js

@@ -1,10 +1,9 @@
 import React, { useEffect, useRef } from 'react'
 import { getCurrentInstance } from '@tarojs/taro'
 import { useModel } from '@/store'
+import { getPage } from '@/utils'
 import request, { apis } from '../request'
 
-const pages = require('../../pages')
-
 /**
  * 页面埋点
  * params 一般不需要传值,
@@ -22,7 +21,7 @@ export default function useMountTrack(params) {
     }
 
     const router = getCurrentInstance().router
-    const page = pages.filter(x => router.path.indexOf(x.page) > -1)[0]
+    const page = getPage()
     if (!page) {
       return
     }

src/utils/index.js

@@ -1,3 +1,12 @@
+import { getCurrentInstance } from '@tarojs/taro'
+
+const pages = require('../pages')
 
 // 深度拷贝
 export const deepCopy = x => JSON.parse(JSON.stringify(X))
+
+// 获取当前页面配置
+export const getPage = () => {
+  const router = getCurrentInstance().router
+  return pages.filter(x => router.path.indexOf(x.page) > -1)[0]
+}

src/utils/track.js

@@ -1,6 +1,5 @@
 import request, { apis } from './request'
-
-const pages = require('../pages')
+import { getPage } from '.'
 
 /**
  * 用户来源
@@ -10,7 +9,7 @@ const pages = require('../pages')
 export async function trackUserSource(router, qrcode) {
   const { path, scene, params } = router || {}
 
-  const page = pages.filter(x => path.indexOf(x.page) > -1)[0] || {}
+  const page = getPage()
 
   const trackPayload = {
     ...(page.track || {}),