feats

src/actions/user.js

   API_QUERY_DOCUMENTVERIFY
 } from '@/constants/api'
 
-import { createAction,createActionNormal } from '@/utils/redux'
+import { createAction, createActionNormal } from '@/utils/redux'
 
 /**
  * 获取用户信息
   payload,
   method: 'GET'
 })
-

src/components/Modal/index.jsx

       <View className='yz-modal'>
         <View className='yz-modal-header'>
           <View className='yz-modal-header-title'>{title}</View>
-          <View className='yz-modal-header-action' onClose={onClose}>X</View>
+          <View className='yz-modal-header-action' onClick={onClose}>×</View>
         </View>
         <View className='yz-modal-body'>
           {props.children}

src/components/Modal/style.scss

       flex: none;
       width: 48rpx;
       text-align: right;
+      font-size: 60rpx;
     }
   }
 

src/components/Spin/Spin2.jsx

+import React from 'react'
+import { View } from '@tarojs/components'
+import Spin from '.'
+
+import './style.scss'
+
+export default (props) => {
+  const { spinning, style, ...leftProps } = props
+
+  return spinning ? (
+    <View className='spin2box' style={style}>
+      <View className='spin2'>
+        {spinning && <Spin {...leftProps} />}
+      </View>
+    </View>
+  ) : null
+}

src/components/Spin/index.jsx

 import './style.scss'
 
 export default (props) => {
-  const { size = '160rpx' } = props
+  const { size = '160rpx', background = 'transparent' } = props
   const wrapperStyle = {
     width: size,
     height: size,
+    background,
   }
 
   const leftBarStyle = {
   }
 
   return (
-    <view className="spin" style={wrapperStyle}>
-      <view className="mask-left">
-        <view className="spin-bar" style={leftBarStyle}></view>
+    <view className='spin' style={wrapperStyle}>
+      <view className='mask-left'>
+        <view className='spin-bar' style={leftBarStyle}></view>
       </view>
-      <view className="mask-right">
-        <view className="spin-bar" style={rightBarStyle}></view>
+      <view className='mask-right'>
+        <view className='spin-bar' style={rightBarStyle}></view>
       </view>
     </view>
   )

src/components/Spin/style.scss

   80%, 90% {
     border-color: #ffa700;
   }
-}
+}
+
+.spin2box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  text-align: center;
+  background: rgba(255, 255, 255, .75);
+
+  .spin2 {
+    display: inline-block;
+    margin: auto;
+    position: absolute;
+    top: 50%;
+    transform: translateY(-50%);
+  }
+}

src/layout/Basic/index.jsx

-import React, { useEffect, useState } from 'react'
-import { connect } from 'react-redux'
-import Loading from '@/components/Loading'
-import Overlay from '@/components/Overlay'
-
-const BasicLayout = (props) => {
-  const {person, children, onProps, ...leftProps} = props
-  const loading = !person || !person.personId
-
-  if (onProps) {
-    onProps({person, ...leftProps})
-  }
-
-  return (
-    <>
-      <Overlay visible={loading} style={{background: '#fff'}}>
-        <Loading />
-      </Overlay>
-      {children}
-    </>
-  )
-}
-
-export default connect(({ user }) => ({...user.userInfo || {}}))(BasicLayout)

src/layout/WrapperPerson.jsx

+import React from 'react'
+import { useSelector } from 'react-redux'
+import { useRouter } from '@tarojs/taro'
+
+export default (props) => {
+  const { person, ...extInfo } = useSelector(s => s.user.userInfo)
+  const router = useRouter()
+
+  return person && person.personId
+    ? React.cloneElement(props.children, { person, router, ...extInfo })
+    : null
+}

src/layout/index.js

 import React, { useState, useEffect } from 'react'
-import { useRouter } from '@tarojs/taro'
+import { useSelector } from 'react-redux'
 import { View } from '@tarojs/components'
 import Overlay from '@/components/Overlay'
+import Loading from '@/components/Loading'
 import AuthAvatar from '@/components/Auth/AuthAvatar'
 import AuthPhone from '@/components/Auth/AuthPhone'
-import BasicLayout from './Basic'
+import Spin from '@/components/Spin/Spin2'
+import WrapperPerson from './WrapperPerson'
 import useAuth from './useAuth'
 
 import './style.scss'
 
-export default (Child) => (props) => {
-  // ext 里面包含的人员等基本信息
-  const [info, setInfo] = useState({})
-  // 路由信息
-  const router = useRouter()
+export default (ChildComponent) => (props) => {
+  const { person } = useSelector(s => s.user.userInfo)
+  const { spinning } = useSelector(s => s.user)
 
-  const [authPhone, authAvatar] = useAuth(info?.person)
+  const [loading, setLoading] = useState(false)
+  const [authPhone, authAvatar] = useAuth(person)
 
-  // 是否完成登录
-  const isLoged = !!info?.person?.personId
+  useEffect(() => {
+    setLoading(!person || !person.personId)
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [person])
 
   return (
     <>
-      <BasicLayout onProps={setInfo} />
-      {
-        isLoged && (
-          <>
-            <Overlay visible={authPhone} aligin='bottom'>
-              <View className='auth-wrapper'>
-                <AuthPhone />
-              </View>
-            </Overlay>
-            <Overlay visible={!authPhone && authAvatar} aligin='bottom'>
-              <View className='auth-wrapper'>
-                <AuthAvatar />
-              </View>
-            </Overlay>
-            <Child {...info} {...props} router={router} />
-          </>
-        )
-      }
+      <Overlay visible={loading} style={{background: '#fff'}}>
+        <Loading />
+      </Overlay>
+      <Overlay visible={authPhone} aligin='bottom'>
+        <View className='auth-wrapper'>
+          <AuthPhone />
+        </View>
+      </Overlay>
+      <Overlay visible={!authPhone && authAvatar} aligin='bottom'>
+        <View className='auth-wrapper'>
+          <AuthAvatar />
+        </View>
+      </Overlay>
+      <Spin size={32} spinning={spinning} />
+      <WrapperPerson>
+        <ChildComponent />
+      </WrapperPerson>
     </>
   )
 }

src/pages/index/buildingDetail/components/BasicInfo/index.jsx

 import { useState } from 'react'
+import Taro from '@tarojs/taro'
 import { ScrollView, Image } from '@tarojs/components'
 import classNames from 'classnames'
-import Modal from '@/components/Modal'
-import BuildingInfo from '@/pages/index/buildingInfo'
 import useFavor from '@/utils/hooks/useFavor'
 import '@/assets/css/iconfont.css'
 import './index.scss'
   const { buildingId, isSave } = Info
 
   const [isSaved, handleFavor] = useFavor(isSave)
-  const [showMore, setShowMore] = useState(false)
+
+  const goto = (url) => Taro.navigateTo({ url })
 
   return (
     <view className='components BasicInfo'>
 
       {/* 互动 */}
       <view className='Interact flex-h'>
-        <text className='flex-item' onClick={() => setShowMore(true)}>更多楼盘信息</text>
+        <text className='flex-item' onClick={() => goto(`/pages/index/buildingInfo/index?id=${buildingId}`)}>更多楼盘信息</text>
         <text className='flex-item active'>订阅活动通知</text>
       </view>
 
       {/* 提示 */}
       <view className='Tips'>
         <text className='iconfont icon-bangzhu'></text>
-        <text>查看报备规则？</text>
+        <text onClick={() => goto(`/pages/index/buildingRules/index?buildingId=${buildingId}`)}>查看报备规则？</text>
       </view>
-
-      <Modal title='楼盘信息' visible={showMore} onClose={() => setShowMore(false)}>
-        <BuildingInfo />
-      </Modal>
     </view>
   )
 }

src/pages/index/buildingDetail/index.jsx

 import withLayout from '@/layout'
 import { ScrollView } from '@tarojs/components'
 import '@/assets/css/iconfont.css'
-import { useSelector } from 'react-redux'
+import Spin from '@/components/Spin/Spin2'
 import { fetch } from '@/utils/request'
 import { API_ITEMS_DETAIL, API_PROJECT_TREND_LIST, API_ACTIVITY_GROUP, API_LIVE_LIST, API_NEWS_LIST } from '@/constants/api'
-import './index.scss'
 import DetailBottom from './components/DetailBottom/index'
 import Banner from './components/Banner/index'
 import BasicInfo from './components/BasicInfo/index'
 import News from './components/News/index'
 import Pictures from './components/Pictures/index'
 
+import './index.scss'
+
 export default withLayout((props) => {
   const { id } = props.router.params
 
 
   useEffect(() => {
     // 获取楼盘信息
-    fetch({ url: `${API_ITEMS_DETAIL}/${id}` }).then((res) => {
+    fetch({ url: `${API_ITEMS_DETAIL}/${id}`, spin: true }).then((res) => {
       setDetailInfo(res || {})
       
       if (res?.buildingApartment) {
         const List = res.buildingApartment.filter(item => item.apartmentType === 'photo')
         setPictureList(List.filter(item => item.buildingImgList.length > 0))
       }
+    }).catch((err) => {
+      console.error(err)
     })
 
     // 获取资讯列表
 
   return (
     <view className='Page buildingDetail flex-v'>
-
       <view className='flex-item'>
         <view>
           <ScrollView scroll-y refresher-enabled={false} refresher-triggered={IsPull} onrefresherrefresh={PageRefresh} refresher-background='#f8f8f8'>

src/pages/index/buildingInfo/index.config.js

+export default {
+  navigationBarTitleText: '楼盘详情'
+}

src/pages/index/buildingInfo/index.jsx

 import { useState, useEffect } from 'react'
+import withLayout from '@/layout'
 import { ScrollView } from '@tarojs/components'
+import { fetch } from '@/utils/request'
+import { API_ITEMS_DETAIL } from '@/constants/api'
 import '@/assets/css/iconfont.css'
 import './index.scss'
 
-export default (props) => {
+const formateDate = dt => dt ? dt.substring(0, 10) : undefined
 
-  const [InfoList, setInfoList] = useState([
+export default withLayout((props) => {
+  const { router } = props
+  const { id } = router.params
+
+  const [Info, setInfo] = useState({})
+
+  const InfoList = [
     [
-      { name: '项目名称', value: '葛洲坝·南京中国府', key: '' },
-      { name: '开发商', value: '暂无', key: '' },
-      { name: '均价', value: '待定', key: '' },
-      { name: '销售状态', value: '待定', key: '' },
-      { name: '开盘日期', value: '2019-08-05', key: '' },
-      { name: '楼盘地址', value: '南京建邺区友谊街交汇处南京建邺区友谊街交汇处', key: '' },
+      { name: '项目名称', value: Info.buildingName, key: '' },
+      { name: '开发商', value: Info.brandName || Info.serviceCompany || '暂无', key: '' },
+      { name: '均价', value: Info.price || '待定', key: '' },
+      { name: '销售状态', value: Info.marketStatus || '待定', key: '' },
+      { name: '开盘日期', value: formateDate(Info.openingDate) || '待定', key: '' },
+      { name: '楼盘地址', value: Info.address || '暂无', key: '' },
     ],
     [
-      { name: '装修标准', value: '精装', key: '' },
-      { name: '物业公司', value: '葛洲坝物业', key: '' },
-      { name: '物业费', value: '2.0元/㎡/月', key: '' },
+      { name: '装修标准', value: Info.decoration || '暂无', key: '' },
+      { name: '物业公司', value: Info.propertyDeveloper || '暂无', key: '' },
+      { name: '物业费', value: Info.serviceFee || '暂无', key: '' },
     ],
     [
-      { name: '容积率', value: '2.75', key: '' },
-      { name: '供水', value: '民水', key: '' },
-      { name: '供电', value: '民电', key: '' },
-      { name: '供暖方式', value: '自采暖', key: '' },
-      { name: '人车分流', value: '-', key: '' },
-      { name: '车位数量', value: '约1000', key: '' },
-      { name: '规划户数', value: '300', key: '' },
-      { name: '楼栋总数', value: '25', key: '' },
-      { name: '绿化率', value: '35.31%', key: '' },
-      { name: '项目说明', value: '南京建邺区友谊街交汇处南京建邺区友谊街交汇处', key: '' },
-      { name: '备案名', value: '暂无', key: '' },
+      { name: '容积率', value: Info.volumeRate || '暂无', key: '' },
+      { name: '供水', value: Info.waterSupply || '暂无', key: '' },
+      { name: '供电', value: Info.powerSupply || '暂无', key: '' },
+      { name: '供暖方式', value: Info.heatingSupply || '暂无', key: '' },
+      { name: '车位数量', value: Info.parkingRate || '待定', key: '' },
+      { name: '规划户数', value: Info.familyNum || '待定', key: '' },
+      { name: '楼栋总数', value: Info.buildingNum || '待定', key: '' },
+      { name: '绿化率', value: Info.greeningRate || '待定', key: '' },
+      { name: '项目说明', value: Info.dynamic || '暂无', key: '' },
+      { name: '备案名', value: Info.recordName || '暂无', key: '' },
     ]
-  ])
+  ]
+
+  useEffect(() => {
+    // 获取楼盘信息
+    fetch({ url: `${API_ITEMS_DETAIL}/${id}`, spin: true }).then((res) => {
+      setInfo(res || {})
+    }).catch((err) => {
+      console.error(err)
+    })
+  }, [id])
 
   return (
     <view className='Page buildingInfo'>
       </ScrollView>
     </view>
   )
-}
+})

src/pages/index/buildingInfo/index.scss

 .Page.buildingInfo {
   background: #f8f8f8;
-  width: 90vw;
-  height: 90vh;
-  max-height: 90vh;
+  width: 100%;
+  height: 100%;
   > scroll-view {
     width: 100%;
     height: 100%;

src/reducers/system.js

   orgInfo: {},
   userInfo: {},
   settings: [],
-  systemInfo: {}
+  systemInfo: {},
 };
 
 export default function(state = INITIAL_STATE, action) {

src/reducers/user.js

     extraInfo: {},
     miniApp: {},
   },
-  unRead: true
+  unRead: true,
+  spinning: false,
 }
 
 export default function user(state = INITIAL_STATE, action) {
         unReadNum,
       }
     }
+    case 'SET_SPINNING': {
+      return {
+        ...state,
+        spinning: action.payload
+      };
+    }
     default:
       return state
   }

src/routes.js

     pkg: 'main',
     type: 'building',
   },
-  // {
-  //   name: '楼盘信息',
-  //   page: 'pages/index/buildingInfo/index',
-  //   pkg: 'main',
-  //   type: 'building',
-  // },
+  {
+    name: '楼盘信息',
+    page: 'pages/index/buildingInfo/index',
+    pkg: 'main',
+    type: 'building',
+  },
   {
     name: '围观记录',
     page: 'pages/index/buildingViewsRecords/index',

src/utils/chatDate.js

 export default function getDateFormat(timestamp, mustIncludeTime,format='yyyy-M-d') {
 
   // 当前时间
-  var currentDate = new Date();
+  // var currentDate = new Date();
   // 目标判断时间
   var srcDate = new Date(parseInt(timestamp));
 
-  var currentYear = currentDate.getFullYear();
-  var currentMonth = (currentDate.getMonth() + 1);
-  var currentDateD = currentDate.getDate();
+  // var currentYear = currentDate.getFullYear();
+  // var currentMonth = (currentDate.getMonth() + 1);
+  // var currentDateD = currentDate.getDate();
 
-  var srcYear = srcDate.getFullYear();
-  var srcMonth = (srcDate.getMonth() + 1);
-  var srcDateD = srcDate.getDate();
+  // var srcYear = srcDate.getFullYear();
+  // var srcMonth = (srcDate.getMonth() + 1);
+  // var srcDateD = srcDate.getDate();
 
   var ret = "";
 

src/utils/request.js

 import Taro from '@tarojs/taro'
 import * as apis from '@/constants/api'
 // import login from '@/utils/login'
+import store from '@/store'
 import rtLog from './rtLog'
 
 const CODE_SUCCESS = 1000
 const CODE_AUTH_EXPIRED = 1002
 const accountInfo = wx.getAccountInfoSync();
 const appId = accountInfo.miniProgram.appId
+const { dispatch } = store
+const updateSpin = spinning => dispatch({ type: 'SET_SPINNING', payload: spinning })
 
 export { apis };
 
 export const fetch = async (options) => {
   const opts = optionBuilder(options)
 
+  const { spin } = opts[1]
+
+  if (spin) {
+    updateSpin(true)
+  }
   return Taro.request(opts[0])
-    .then((res) => reqSuccess(res, opts))
-    .catch((err) => reqFail(err, opts))
+    .then((res) => {
+      if (spin) {
+        updateSpin(false)
+      }
+      return reqSuccess(res, opts)
+    })
+    .catch((err) => {
+      if (spin) {
+        updateSpin(false)
+      }
+      return reqFail(err, opts)
+    })
 }
 
 export const uploadFiles = async (files) => {
 }
 
 export function optionBuilder(options) {
-  const { url, params = {}, payload = {}, method = 'GET', showToast = true, autoLogin = true, header } = options
+  const { url, params = {}, payload = {}, method = 'GET', showToast = true, autoLogin = true, header, spin = false } = options
   const showMessage = Object.prototype.hasOwnProperty.call(payload, 'showToast') ? payload.showToast : showToast
   const consultant = Taro.getStorageSync('consultantId') || ''
   const recommender = Taro.getStorageSync('recommender') || ''
     },
     {
       showMessage,
-      autoLogin
+      autoLogin,
+      spin,
     }
   ]
 }