意向楼盘

src/components/BottomMoadl/index.jsx

@@ -9,152 +9,109 @@ import { fetch } from '@/utils/request'
 import { useState, useEffect, useRef } from 'react'
 import './style.css'
 
+const wrapAnimate = 'wrap wrapAnimate'
+const frameAnimate = 'frame-wrapper'
 
 export default (props) => {
-  const { closeModal, setBuidName, onChange = () => { }, type = '', frameTitle, flag, } = props
+  const { value, onChange, role } = props
 
-
-  let wrapAnimate = 'wrap wrapAnimate'
-  let frameAnimate = 'frame-wrapper'
-  const [textNextSum, setTextNext] = useState(1)
-  const [recommendContent, setRecommendContent] = useState([])
   const city = useSelector(state => state.city)
 
-  const [loading, setLoading] = useState(false)
   const [dicts, setDicts] = useState([])
+  const [visible, setVisible] = useState(false)
+  const [loading, setLoading] = useState(false)
+  const [val, setVal] = useState({ buildingName: '意向楼盘' })
 
-  const hideFrame = (e) => {
-    console.log('关闭', e);
-    closeModal()//关闭
-
-  }
-
+  useEffect(() => {
+    if (dicts) {
+      const building = dicts.filter(x => x.buildingId === value)[0] || { buildingName: '意向楼盘' }
+      setVal(building)
+    }
+  }, [value, dicts])
 
   useEffect(() => {
-    if (type !== ROLE_CODE.CUSTOMER && type !== ROLE_CODE.DRIFT && type !== ROLE_CODE.CONSULTANT) {
+    setLoading(true)
+    if (role !== ROLE_CODE.CUSTOMER && role !== ROLE_CODE.DRIFT && role !== ROLE_CODE.CONSULTANT) {
       fetch({ url: API_GET_AGENT_BUILDINGS }).then((res) => {
         setDicts(res || [])
-      })
+        setLoading(false)
+      }).catch(() => setLoading(false))
     } else {
       fetch({ url: API_ITEMS_LIST, payload: { pageNumber: 1, pageSize: 1000, cityId: city.curCity.id } }).then((res) => {
-
         setDicts(res.records)
-      })
+        setLoading(false)
+      }).catch(() => setLoading(false))
     }
-  }, [])
-
-  const [darkMode, setDarkMode] = useState('light')
-
-  useEffect(() => {
-    Taro.getSystemInfo({
-      success: function (res) {
-        console.log(res.theme)
-        setDarkMode(res.theme)
-
-      }
-    })
-
-  }, [darkMode])
-
-  const [conTent, setConTent] = useState()
-
-  const buildingConten = (e) => {
-    console.log(e, 'eeeeeeeeeeeeeeee');
-    setConTent(e.detail.value)
-
+  }, [city.curCity.id, role])
 
+  const handleSelect = (e) => {
 
+    const buildingId = e.detail.value
+    const building = dicts.filter(x => x.buildingId === buildingId)[0] || { buildingName: '意向楼盘' }
 
+    setVal(building)
   }
-
-  const buliClick = (e) => {
+  const handleSubmit = (e) => {
     e.stopPropagation()
-
-    if (conTent === '' || conTent === null || conTent === undefined) {
-      Taro.showToast({
-        title: '未正确选择楼盘',
-        icon: 'error',
-        duration: 2000
-      })
-
-    } else {
-      onChange(conTent)
-      return dicts.map((item, inx) => {
-
-
-        if (item.buildingId === conTent) {
-
-
-          const findIndex = inx
-          const name = dicts[findIndex].buildingName
-          //  item.buildingName
-          setBuidName(name)
-          console.log(name);
-
-          closeModal()
-
-          console.log('选中', conTent);
-          // const newArr = dicts.filter(function (obj) {
-          //   return obj.buildingId == e.detail.value;
-          // });
-          // console.log(newArr);
-
-
-
-        }
-        return item
-
-      })
-
-
-    }
-
+    setVisible(false)
+    onChange(val.buildingId, val)
   }
 
-
   return (
-    flag && <view   >
-      <view className={wrapAnimate} style='background:rgba(0,0,0,0);'></view>
-      <view onClick={hideFrame} className={frameAnimate} catchMove>
-        <view className={darkMode == 'dark' ? 'frame-dark' : 'frame'}>
-          {/* 标题  */}
-          <view className={darkMode == 'dark' ? 'title-wrapper-dark' : 'title-wrapper'}>
-            <view style={{ marginLeft: '-8vw' }}>{frameTitle}</view>
-          </view>
-          {/* 内容 */}
-          <view style='overflow-x: hidden;'>
-            <View className='page-section'>
-              <View className='radio-list' >
-                <scroll-view
-                  scrollY
-                  style={{ height: '40vh', overflow: 'hidden' }}
-                  catchMove
-                >
-                  <RadioGroup className='radio-list__RadioGroup' onChange={buildingConten} onClick={e => e.stopPropagation()}>
-                    {dicts.map((item, i) => {
-                      return (
-                        <Label catchMove className='radio-list__label' for={i} key={i}>
-                          <view className={darkMode == 'dark' ? 'radio-list__text-dark' : 'radio-list__text'}>{item.buildingName}</view>
-
-                          <Radio catchMove className='radio-list__radio' value={item.buildingId} checked={item.buildingId === conTent ? true : false}></Radio>
-
-                        </Label>
-                      )
-                    })}
-                  </RadioGroup>
-                </scroll-view>
-              </View>
-            </View>
-
-            {/* <view className='bottom-text' onClick={handleTextNext}> */}
-            <view style={{ display: 'flex', margin: '2em auto' }}>
-              <Button className='checkBtn' onClick={() => closeModal()}  >取消</Button>
-              <Button className='okBtn' onClick={buliClick}> 确定</Button>
+    <view>
+      {
+        visible ? (
+          <>
+            <view onClick={() => setVisible(false)} className={wrapAnimate}></view>
+            <view className={frameAnimate} catchMove>
+              <view className='frame'>
+                {/* 标题  */}
+                <view className='title-wrapper'>
+                  <view>{val.buildingName}</view>
+                </view>
+                {/* 内容 */}
+                <view style='overflow-x: hidden;'>
+                  <View className='page-section'>
+                    <View className='radio-list' >
+                      <scroll-view
+                        scrollY
+                        style={{ height: '40vh', overflow: 'hidden' }}
+                        catchMove
+                      >
+                        {loading && '加载中...'}
+                        {
+                          !loading && (
+                            <RadioGroup className='radio-list__RadioGroup' onChange={handleSelect} onClick={e => e.stopPropagation()}>
+                              {dicts.map((item, i) => {
+                                return (
+                                  <Label catchMove className='radio-list__label' for={`rdo-${i}`} key={i}>
+                                    <view className='radio-list__text'>{item.buildingName}</view>
+
+                                    <Radio id={`rdo-${i}`} catchMove className='radio-list__radio' value={item.buildingId} checked={item.buildingId === val.buildingId}></Radio>
+
+                                  </Label>
+                                )
+                              })}
+                            </RadioGroup>
+                          )
+                        }
+                      </scroll-view>
+                    </View>
+                  </View>
+
+                  {/* <view className='bottom-text' onClick={handleTextNext}> */}
+                  <view style={{ display: 'flex', margin: '2em auto' }}>
+                    <Button className='checkBtn' onClick={() => setVisible(false)}  >取消</Button>
+                    <Button className='okBtn' disabled={!val.buildingId} onClick={handleSubmit}> 确定</Button>
+                  </view>
+
+                </view>
+              </view>
             </view>
-
-          </view>
-        </view>
-      </view>
+          </>
+        ) :
+          <View onClick={() => setVisible(true)}>{val.buildingName}</View>
+      }
     </view>
 
   )

src/components/BottomMoadl/style.css

@@ -14,6 +14,8 @@
   height: 100vh;
   width: 100vw;
   z-index: 80;
+  top: 0;
+  left: 0;
 }
 .frame {
   background: #fff;

src/pages/mine/addCustomer/index.jsx

@@ -1,17 +1,17 @@
 import { useState, useEffect } from 'react'
 import withLayout from '@/layout'
-import { ScrollView, Input, Image, Block, View } from '@tarojs/components'
+import { ScrollView, Input, Image, Block, View, Button } from '@tarojs/components'
 import '@/assets/css/iconfont.css'
 import { fetch } from '@/utils/request'
 import BottomMoadl from '@/components/BottomMoadl/index'
 
-import { API_REPORT_CUETOMER, API_GET_AGENT_BUILDINGS, API_ITEMS_LIST, API_USER_ADD_CUSTOMER, API_CHANNEL_REPORT } from '@/constants/api'
+import { 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 BuildingPicker from './components/BuildingPicker'
 import ConsultantPicker from './components/ConsultantPicker'
-import getSubmitor from './getSubmitor'
+
 import './index.scss'
 
 
@@ -27,9 +27,6 @@ export default withLayout((props) => {
   const { personId, personType } = person
   const { buildingId: originBuiding } = router.params
 
-  const [showFrame, setShowFrame] = useState(false)
-  const [buidName, setBuidName] = useState('请选择意向楼盘')
-
   const [loading, setLoading] = useState(false)
   const [buildingId, setBuildingId] = useState(null)
   const [CardId, setCardId] = useState(null)
@@ -43,8 +40,6 @@ export default withLayout((props) => {
     remark: '', // 描述
   })
 
-  const postSubmit = getSubmitor(person)
-
   useEffect(() => {
     console.log('------originBuiding------>', originBuiding)
     if (originBuiding) {
@@ -81,12 +76,6 @@ export default withLayout((props) => {
     return true
   }
 
-  const closeModal = (e) => {
-
-    setShowFrame(!showFrame)
-
-  }
-
   const onSubmit = () => {
     const payload = personType === ROLE_CODE.CONSULTANT ?
       {
@@ -136,16 +125,13 @@ export default withLayout((props) => {
     setFormData(Data)
   }
 
-  const BuildingChange = (e) => {
-    setBuildingId(e)
-    console.log("🚀 ~ file: index父组件接收的 e", e, originBuiding)
-
-
+  const handleBuildingSelect = (bid, building) => {
+    setBuildingId(bid)
   }
 
   return (
     <view className='Page addCustomer'>
-      <BottomMoadl setBuidName={setBuidName} closeModal={closeModal} onChange={BuildingChange} frameTitle='意向楼盘' value={buildingId} type={personType} flag={showFrame} />
+
 
       <ScrollView scroll-y refresher-enabled={false} refresher-background='#fff'>
         <view className='PageContent'>
@@ -176,8 +162,8 @@ export default withLayout((props) => {
           <view className='FormLine flex-h'>
             <view className='flex-item'>
               {/* <BuildingPicker change={BuildingChange} value={buildingId} type={personType} /> */}
-              <View onClick={closeModal} >{buidName}</View>
-
+              {/* <View onClick={() => setShowFrame(true)} >{buildingName}</View> */}
+              <BottomMoadl onChange={handleBuildingSelect} role={personType} />
             </view>
           </view>
 
@@ -198,14 +184,14 @@ export default withLayout((props) => {
                   <view className='flex-item'>
                     {
                       //解决事件穿透
-                      !showFrame && <Input placeholder='补充说明（选填）' dataType='remark' onInput={FormInput.bind(this)}></Input>
+                      <Input placeholder='补充说明（选填）' dataType='remark' onInput={FormInput.bind(this)}></Input>
                     }
                   </view>
                 </view>
               </Block> : ''
           }
           <view className='Btn'>
-            <button loading={loading} onClick={onSubmit}>提交</button>
+            <Button loading={loading} onClick={onSubmit}>提交</Button>
           </view>
 
         </view>