feats

src/components/Picker/index.jsx

@@ -0,0 +1,46 @@
+import { useEffect, useState } from 'react'
+import { Picker, View } from '@tarojs/components'
+import './style.scss'
+
+export default (props) => {
+  const { kv, value, onChange, dicts, placeholder, ...leftProps } = props
+  const [rangeKey, rangeVal] = kv || ['label', 'value']
+
+  const [inx, setInx] = useState()
+  const [text, setText] = useState()
+
+  const handleChange = (e) => {
+    const index = e.detail.value - 0
+    const item = dicts[index]
+    if (onChange) {
+      onChange(item[rangeVal], item)
+    }
+  }
+
+  useEffect(() => {
+    if (dicts && dicts.length > 0) {
+      if (value !== undefined && value !== null) {
+        for(let i = 0; i < dicts.length; i += 1) {
+          if (dicts[i][rangeVal] === value) {
+            setInx(i)
+            setText(dicts[i][rangeKey])
+            break;
+          }
+        }
+      }
+    }
+  }, [dicts, rangeKey, rangeVal, value])
+
+  return (
+    <Picker
+      className='g-picker'
+      rangeKey={rangeKey}
+      onChange={handleChange}
+      value={inx}
+      range={dicts}
+      {...leftProps}
+    >
+      <View>{text || placeholder || '请选择'}</View>
+    </Picker>
+  )
+}

src/constants/api.js

@@ -125,6 +125,7 @@ export const API_GOODS_BELONGS = resolvePath('goodsToBuilding')
 
 // client
 export const API_CLIENT_LIST = resolvePath('customer/recommend/mine')
+export const API_CHANNEL_CLIENT_LIST = resolvePath('channelCustomer/recommend/mine')
 export const API_RECOMENT_CLIENT = resolvePath('customer/new')
 export const API_CLIENT_PROGRESS = resolvePath('customer')
 export const API_TYPE_DATA = resolvePath('awesome/dict/recommendcustomer')

src/constants/user.js

@@ -17,3 +17,13 @@ export const ROLE_CODE = {
   CUSTOMER: 'customer', // 客户
   MARKETING: 'marketing', // 驻场
 }
+
+// 客户流转状态
+// 数组索引代表对应的 key
+export const BIZ_STATUS = {
+  '1': '报备',
+  '2': '到访',
+  '3': '认筹',
+  '4': '签约',
+  '5': '结佣',
+}

src/pages/mine/addCustomer/components/BuildingPicker.jsx

@@ -0,0 +1,18 @@
+import React, { useEffect, useState } from 'react'
+import Picker from '@/components/Picker'
+import { fetch } from '@/utils/request'
+import { API_GET_AGENT_BUILDINGS } from '@/constants/api'
+
+export default (props) => {
+  const [dicts, setDicts] = useState([])
+
+  useEffect(() => {
+    fetch({ url: API_GET_AGENT_BUILDINGS }).then((res) => {
+      setDicts(res || [])
+    })
+  }, [])
+
+  return (
+    <Picker kv={['buildingName', 'buildingId']} dicts={dicts} {...props} />
+  )
+}

src/pages/mine/addCustomer/components/ConsultantPicker.jsx

@@ -0,0 +1,29 @@
+import React, { useEffect, useState } from 'react'
+import { getCardList } from '@/services/card'
+import Picker from '@/components/Picker'
+
+export default (props) => {
+  const { buildingId } = props
+
+  const [dicts, setDicts] = useState([])
+
+  useEffect(() => {
+    if (buildingId) {
+      const params = {
+        pageNumber: 1,
+        pageSize: 50,
+        buildingId,
+      }
+      getCardList(params).then((res) => {
+        const { records } = res
+        setDicts(records || [])
+      })
+    } else {
+      setDicts([])
+    }
+  }, [buildingId])
+
+  return (
+    <Picker kv={['name', 'id']} dicts={dicts} {...props} />
+  )
+}

src/pages/mine/addCustomer/getSubmitor.jsx

@@ -0,0 +1,26 @@
+
+import { ROLE_CODE } from '@/constants/user'
+import { fetch } from '@/utils/request'
+import { API_REPORT_CUETOMER, API_USER_ADD_CUSTOMER, API_CHANNEL_REPORT } from '@/constants/api'
+
+export default function getSubmitor(person) {
+  const { personType } = person
+
+  const builder = (url) => (payload) => fetch({ url, method: 'post', payload })
+  let fn = () => undefined
+  switch (personType) {
+    case ROLE_CODE.CONSULTANT:
+      fn = builder(API_REPORT_CUETOMER)
+      break
+    case ROLE_CODE.CHANNEL_AGENT:
+      fn = builder(API_CHANNEL_REPORT)
+      break
+    case ROLE_CODE.CUSTOMER:
+      fn = builder(API_USER_ADD_CUSTOMER)
+      break
+    default:
+      break
+  }
+  
+  return fn;
+}

src/pages/mine/addCustomer/index.jsx

@@ -1,33 +1,32 @@
 import { useState, useEffect } from 'react'
 import withLayout from '@/layout'
-import { ScrollView, Input, Image, Picker, Block } from '@tarojs/components'
+import { ScrollView, Input, Image, Block } from '@tarojs/components'
 import '@/assets/css/iconfont.css'
-import { useSelector } from 'react-redux'
 import { fetch } from '@/utils/request'
-import { API_GET_AGENT_BUILDINGS, API_CARDS_LIST, API_REPORT_CUETOMER, API_USER_ADD_CUSTOMER, API_CHANNEL_REPORT } from '@/constants/api'
+import { API_REPORT_CUETOMER, API_USER_ADD_CUSTOMER, API_CHANNEL_REPORT } from '@/constants/api'
+import { ROLE_CODE } from '@/constants/user'
 import Taro from '@tarojs/taro'
+import Picker from '@/components/Picker'
+import BuildingPicker from './components/BuildingPicker'
+import ConsultantPicker from './components/ConsultantPicker'
+import getSubmitor from './getSubmitor'
 import './index.scss'
 
 const defaultSpecialImage = 'https://yz-websit.oss-cn-hangzhou.aliyuncs.com/xlk/index-icon19.jpg'
 
-export default withLayout((props) => {
+const sexDicts = [
+  { name: '男', id: '1' },
+  { name: '女', id: '2' },
+]
 
-  const { router } = props
+export default withLayout((props) => {
+  const { router, person } = props
   const { type } = router.params
-  const user = useSelector(state => state.user)
-  const [PersonId, setPersonId] = useState(null)
-  const [BuildingName, setBuildingName] = useState(null)
-  const [CanSubmit, setCanSubmit] = useState(false)
-  const [BuildingId, setBuildingId] = useState(null)
-  const [CardName, setCardName] = useState(null)
+  const { personId, personType } = person
+
+  const [loading, setLoading] = useState(false)
+  const [buildingId, setBuildingId] = useState(null)
   const [CardId, setCardId] = useState(null)
-  const [BuildingList, setBuildingList] = useState([])
-  const [CardList, setCardList] = useState([])
-  const [SexList] = useState([
-    { name: '男', id: '1' },
-    { name: '女', id: '2' }
-  ])
-  const [SexName, setSexName] = useState(null)
   const [SexId, setSexId] = useState(null)
   const [FormData, setFormData] = useState({
     name: '', // 姓名
@@ -38,97 +37,10 @@ export default withLayout((props) => {
     describe: '', // 描述
   })
 
+  const postSubmit = getSubmitor(person)
 
-  useEffect(() => {
-    if (PersonId !== user.userInfo.person.personId) {
-      setPersonId(user.userInfo.person.personId)
-    }
-  }, [user])
-
-  useEffect(() => {
-    if (CanSubmit) {
-      let url = null
-      if (type === 'consultant') { // 置业顾问
-        url = API_REPORT_CUETOMER
-      } else if (type === 'customer') { // 普通客户
-        url = API_USER_ADD_CUSTOMER
-      } else { // 经纪人
-        url = API_CHANNEL_REPORT
-      }
-      let params = {}
-      if (type === 'consultant') {
-        params = { name: FormData.name, phone: FormData.phone, sex: SexId }
-      } else {
-        params = { ...FormData, sex: SexId, buildingId: BuildingId, realtyConsultant: CardId }
-      }
-      if (type === 'estateAgent') {
-        params.channelCustomerId = PersonId
-        params.channelId = user.userInfo.person.channelId
-        params.buildingId = BuildingId
-        params.orgId = `${user.userInfo.person.orgId}`
-        params.personId = PersonId
-      }
-      fetch({ url, method: 'post', payload: params }).then(() => {
-        Taro.showToast({ title: '添加成功', icon: 'none', duration: 2000 })
-        setTimeout(() => {
-          Taro.navigateBack({ delta: 1 })
-          setCanSubmit(false)
-        }, 2000)
-      }).catch(() => {
-        setCanSubmit(false)
-      })
-    }
-  }, [CanSubmit])
-
-  useEffect(() => {
-    if (PersonId) {
-      GetBuildingList()
-    }
-  }, [PersonId])
-
-  useEffect(() => {
-    if (BuildingId) {
-      GetCardList()
-    }
-  }, [BuildingId])
-
-  const GetBuildingList = () => {
-    fetch({ url: API_GET_AGENT_BUILDINGS, method: 'get' }).then((res) => {
-      setBuildingList((res.records || [].map((item) => { return { id: item.buildingId, name: item.name } })))
-    })
-  }
-
-  const GetCardList = () => {
-    fetch({ url: API_CARDS_LIST, method: 'get', params: { pageNumber: 1, pageSize: 1000 } }).then((res) => {
-      setCardList((res.records || [].map((item) => { return { id: item.buildingId, name: item.name } })))
-    })
-  }
-
-  const PickerChange = (e) => {
-    setBuildingId(BuildingList[e.detail.value - 0].buildingId)
-    setBuildingName(BuildingList[e.detail.value - 0].name)
-    setCardId(null)
-    setCardName(null)
-  }
-
-  const CardPickerChange = (e) => {
-    setCardId(CardList[e.detail.value - 0].id)
-    setCardName(CardList[e.detail.value - 0].name)
-  }
-
-  const SexPickerChange = (e) => {
-    setSexId(SexList[e.detail.value - 0].id)
-    setSexName(SexList[e.detail.value - 0].name)
-  }
-
-  const FormInput = (e) => {
-    let Data = { ...FormData }
-    Data[e.currentTarget.dataset.type] = e.detail.value
-    setFormData(Data)
-  }
-
-  const ToSubmit = () => {
-    if (FormData.name === '') {
+  const preSubmit = (payload) => {
+    if (payload.name === '') {
       Taro.showToast({ title: '请填写客户姓名', icon: 'none' })
       return false
     }
@@ -136,21 +48,55 @@ export default withLayout((props) => {
       Taro.showToast({ title: '请选择客户性别', icon: 'none' })
       return false
     }
-    if (FormData.phone === '') {
+    if (payload.phone === '') {
       Taro.showToast({ title: '请填写客户电话', icon: 'none' })
       return false
     }
-    if (!(/^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/.test(FormData.phone)) || FormData.phone.length != 11) {
+    if (!(/^1[3|4|5|6|7|8|9][0-9]\d{4,8}$/.test(payload.phone)) || payload.phone.length != 11) {
       Taro.showToast({ title: '请填写正确的客户电话', icon: 'none' })
       return false
     }
-    if (BuildingId === null && type !== 'consultant') {
+    if (buildingId === null && personType !== ROLE_CODE.CONSULTANT) {
       Taro.showToast({ title: '请选择客户的意向楼盘', icon: 'none' })
       return false
     }
-    if (!CanSubmit) {
-      setCanSubmit(true)
+    return true
+  }
+
+  const onSubmit = () => {
+    const payload = personType === ROLE_CODE.CONSULTANT ?
+      {
+        name: FormData.name, // 姓名
+        phone: FormData.phone, // 电话
+        sex: SexId, // 性别
+        describe: FormData.describe, // 描述
+      } :
+      {
+        ...FormData,
+        sex: SexId,
+        buildingId,
+        realtyConsultant: CardId
+      };
+    
+    if (!preSubmit(payload)) {
+      return;
     }
+
+    setLoading(true)
+    postSubmit(payload).then(() => {
+      setLoading(false)
+      Taro.showToast({ title: '操作成功', icon: 'none' })
+      Taro.navigateBack({ delta: 1 })
+    }).catch((err) => {
+      console.error(err)
+      setLoading(false)
+    })
+  }
+
+  const FormInput = (e) => {
+    let Data = { ...FormData }
+    Data[e.currentTarget.dataset.type] = e.detail.value
+    setFormData(Data)
   }
 
   return (
@@ -176,9 +122,7 @@ export default withLayout((props) => {
           <text>性别</text>
           <view className='FormLine flex-h'>
             <view className='flex-item'>
-              <Picker range-key='name' onChange={SexPickerChange} value={null} range={SexList}>
-                <text>{SexName || '请选择'}</text>
-              </Picker>
+              <Picker kv={['name', 'id']} dicts={sexDicts} onChange={setSexId} value={SexId} />
             </view>
             <text className='iconfont icon-jiantoudown'></text>
           </view>
@@ -189,18 +133,14 @@ export default withLayout((props) => {
               <text>意向楼盘</text>
               <view className='FormLine flex-h'>
                 <view className='flex-item'>
-                  <Picker range-key='name' onChange={PickerChange} value={null} range={BuildingList}>
-                    <text>{BuildingName || '请选择'}</text>
-                  </Picker>
+                  <BuildingPicker onChange={setBuildingId} value={buildingId} />
                 </view>
               </view>
 
               <text>内场接待（选填）</text>
               <view className='FormLine flex-h'>
                 <view className='flex-item'>
-                  <Picker range-key='name' onChange={CardPickerChange} value={null} range={CardList}>
-                    <text>{CardName || '请选择'}</text>
-                  </Picker>
+                  <ConsultantPicker onChange={setCardId} value={CardId} />
                 </view>
                 <Image mode='heightFix' src={defaultSpecialImage}></Image>
                 <text>选择</text>
@@ -216,7 +156,7 @@ export default withLayout((props) => {
           }
 
           <view className='Btn'>
-            <text onClick={ToSubmit}>提交</text>
+            <button loading={loading} onClick={onSubmit}>提交</button>
           </view>
 
         </view>

src/pages/mine/addCustomer/index.scss

@@ -55,7 +55,7 @@
         padding: 40px;
         position: relative;
         overflow: hidden;
-        > text {
+        > button {
           display: block;
           text-align: center;
           font-size: 32px;

src/pages/mine/components/MyCustomerListItem/index.jsx

@@ -1,10 +1,15 @@
 
 import { Image } from '@tarojs/components'
 import Taro from '@tarojs/taro'
+import { BIZ_STATUS } from '@/constants/user'
 import './index.scss'
 
 export default function MyCustomerListItem (props) {
   const { data = {} } = props
+
+  const { expirationDate, customerStatus } = data
+  const expStr = expirationDate && customerStatus === '1' ? `${expirationDate.substring(0, 10)} 回收` : ''
+
   return (
     <view className='components MyCustomerListItem flex-h' onClick={() => { Taro.navigateTo({ url: `/pages/mine/myCustomerDetail/index?id=${data.customerId}` }) }}>
       <view className='Img'>
@@ -13,11 +18,11 @@ export default function MyCustomerListItem (props) {
       <view className='flex-item'>
         <view className='Name flex-h'>
           <text className='flex-item'>{data.name}</text>
-          <text>11/11 15:12:58收回</text>
+          <text>{expStr}</text>
         </view>
         <view className='Time flex-h'>
           <text className='flex-item'>{data.phone}</text>
-          <text>{data.status === 0 ? '' : data.status === 1 ? '报备' : data.status === 2 ? '到访' : data.status === 3 ? '认筹' : '签约'}</text>
+          <text>{BIZ_STATUS[customerStatus]||'报备'}</text>
         </view>
       </view>
     </view>

src/pages/mine/myCustomer/TypePicker.jsx

@@ -0,0 +1,15 @@
+import React from 'react'
+import Picker from '@/components/Picker'
+import { BIZ_STATUS } from '@/constants/user'
+
+const dicts = [{ id: '', name: '全部' }].concat(Object.keys(BIZ_STATUS).map((key) => ({ id: key, name: BIZ_STATUS[key] })))
+
+export default (props) => {
+  return (
+    <Picker
+      kv={['name', 'id']}
+      dicts={dicts}
+      {...props}
+    />
+  )
+}

src/pages/mine/myCustomer/index.jsx

@@ -1,57 +1,52 @@
-import { useState, useEffect } from 'react'
+import { useState, useEffect, useRef } from 'react'
 import withLayout from '@/layout'
 import { ScrollView } from '@tarojs/components'
 import '@/assets/css/iconfont.css'
 import { useSelector } from 'react-redux'
 import { fetch } from '@/utils/request'
-import { API_CLIENT_LIST } from '@/constants/api'
+import { API_CLIENT_LIST, API_CHANNEL_CLIENT_LIST } from '@/constants/api'
+import { ROLE_CODE } from '@/constants/user'
 import './index.scss'
 import MyCustomerListItem from '../components/MyCustomerListItem/index'
+import TypePicker from './TypePicker'
 
-export default withLayout(() => {
-  
-  const user = useSelector(state => state.user)
+export default withLayout((props) => {
+  const { person } = props
   const [PageList, setPageList] = useState([])
   const [IsPull, setPull] = useState(false)
-  const [PersonId, setPersonId] = useState(null)
   const [pageNumber, setPageNumber] = useState(1)
   const [HasNextPage, setHasNextPage] = useState(true)
+  const [bizType, setBizType] = useState('')
+  const GetPageList = useRef()
 
-  useEffect(() => {
-    if(user?.userInfo?.person?.personId) {
-      setPersonId(user.userInfo.person.personId)
-    }
-  }, [user])
-
-  useEffect(() => {
-    if(PersonId) {
-      GetPageList()
-    }
-  }, [pageNumber, PersonId])
-
-  const PageRefresh = () => { // 页面下拉刷新回调
-    setPull(true)
-  }
-
-  const GetPageList = () => {
+  GetPageList.current = () => {
     setHasNextPage(false)
-    fetch({ url: API_CLIENT_LIST, method: 'get', payload: { customerId: PersonId, pageNumber, pageSize: 10 } }).then((res) => {
+    const url = ROLE_CODE.CHANNEL_AGENT === person.personType ? API_CHANNEL_CLIENT_LIST : API_CLIENT_LIST
+    fetch({ url, payload: { pageNumber, pageSize: 10 } }).then((res) => {
       setPageList(pageNumber === 1 ? res.records || [] : PageList.concat(res.records || []))
       setHasNextPage(res.current < res.pages)
       setPull(false)
     })
   }
 
+  const PageRefresh = () => { // 页面下拉刷新回调
+    setPull(true)
+  }
+
   const PageLoadMore = () => { // 页面上拉加载更多
     if(HasNextPage) {
       setPageNumber(pageNumber + 1)
     }
   }
 
+  useEffect(() => {
+    GetPageList.current()
+  }, [pageNumber])
+
   useEffect(() => { // 下拉刷新触发
     if (IsPull) {
       if(pageNumber === 1) {
-        GetPageList()
+        GetPageList.current()
       } else {
         setPageNumber(1)
       }
@@ -68,7 +63,7 @@ export default withLayout(() => {
             <text className='iconfont icon-sanjiaoxingdown'></text>
           </view>
           <view className='Type'>
-            <text>全部类型</text>
+            <TypePicker value={bizType} onChange={setBizType} />
             <text className='iconfont icon-sanjiaoxingdown'></text>
           </view>
           <view className='flex-item'></view>

src/pages/mine/myCustomer/index.scss

@@ -33,7 +33,7 @@
             display: none;
           }
         }
-        >text {
+        >text, picker {
           display: inline-block;
           vertical-align: middle;
           font-size: 30px;