Merge branch 'dev' of http://git.online.zzfzyc.com/mp/EShop into dev

src/components/address/index.module.scss

@@ -14,7 +14,7 @@
         padding: 30px 0;
         margin-top: 10px;
         font-size: $font_size_medium;
-        border-bottom: 1px solid $color_font_two;
+        border-bottom: 1px solid #eaeaea;
         color: $color_font_two;
         position: relative;
         .address_item{

src/components/address/index.tsx

@@ -7,78 +7,76 @@ import Taro from "@tarojs/taro";
 import { GetAddressListApi } from "@/api/addressList";
 
 
+type DefaultValueParm = {name?: string, id?:string|number}
+
 type Params = {
-    addressOnSelect?: ({}:{name: string, id:string|number}) => void,
+    addressOnSelect?: (val:DefaultValueParm[]) => void,
     addressOnClose?: () => void,
-    show?: true|false
+    show?: true|false,
+    defaultValue?:DefaultValueParm[]
 }
 
+type AddresParam = {
+    ad_code?: string,
+    id?: number,
+    level?: number,
+    level_name?: string,
+    name?: string,
+    parent_id?: number
+}
+
+
 export default memo(({
     addressOnSelect,
     addressOnClose,
-    show = false
+    show = false,
+    defaultValue = []
 }: Params) => {
-
-    //获取地址
-    const {fetchData} = GetAddressListApi()
-    useEffect(() => {
-        getAddressList()
-        setList(provinceList)
-    }, [])
-
-    const condition = useRef({parent_id:1})
-    const getAddressList = async () => {
-        let res = await fetchData(condition.current)
-        const lists = res.data.list||[]
-        if(selectIndex == 0) {
-            setProvinceList(lists)
-        } else if(selectIndex == 1) {
-            setCityList(lists)
-        } else {
-            setAreaList(lists)
-        }
-        setList(lists)
-    }
-
-
-    type AddresParam = {
-        ad_code?: string,
-        id?: number,
-        level?: number,
-        level_name?: string,
-        name?: string,
-        parent_id?: number
-    }
-    //省
-    const [provinceList, setProvinceList] = useState<AddresParam[]>([])
-    //市
-    const [cityList, setCityList] = useState<AddresParam[]>([])
-    //区
-    const [areaList, setAreaList] = useState<AddresParam[]>([])
-    
+     //省
+     const provinceList = useRef<AddresParam[]>([])
+     //市
+     const cityList = useRef<AddresParam[]>([])
+     //区
+     const areaList = useRef<AddresParam[]>([])
  
     const [list, setList] = useState<AddresParam[]>([])
     const [selectIndex, setSelectIndex] = useState(0) //0 省， 1 市，2 区
-    const [selectId, setSelectId] = useState(0) //选中的id
-    const [selectArr, setSelectArr] = useState<any>([]) //选中的省市区
+    const [selectId, setSelectId] = useState(1) //选中的id
+    const [selectArr, setSelectArr] = useState<DefaultValueParm[]>([]) //选中的省市区
     const [cityStatus, setCityStatus] = useState(false) //城市是否存在
     const [areaStatus, setAreaStatus] = useState(false) //区镇是否存在
 
     const [bottomStyle, setBottomStyle] = useState({width:'100rpx',left:'0rpx'}) //底部滚动条样式
 
+    useEffect(() => {
+        if(selectArr.length == 0) {
+            setSelectArr(defaultValue)
+            if(defaultValue.length > 1) setCityStatus(true)
+            if(defaultValue.length > 2) setAreaStatus(true)
+        }
+    }, [defaultValue])
+
+
+    //获取地址
+    const {fetchData} = GetAddressListApi()
+    useEffect(() => {
+        getProvince()
+    }, [])
+    
     //选中内容
     const selectItem = (item) => {
         setSelectId(item.id)
         if(selectIndex == 0) {
-            setSelectArr([item])
-            getCity()
+            setSelectArr([{name:item.name, id:item.id}])
+            getCity(item.id)
             setAreaStatus(false)
             setCityStatus(false)
         } else if(selectIndex == 1){
-            setSelectArr([selectArr[0], item])
-            area()
+            setSelectArr([selectArr[0], {name:item.name, id:item.id}])
+            area(item.id)
         } else {
-            setSelectArr([selectArr[0], selectArr[1], item])
+            setSelectArr([selectArr[0], selectArr[1], {name:item.name, id:item.id}])
+            getDomDes('#address_tab_2')
         }
     }
     
@@ -86,24 +84,37 @@ export default memo(({
     const onSelectIndex = (index) => {
         setSelectIndex(index)
         const selectid = selectArr[index]?selectArr[index].id:0
-        setSelectId(selectid)
+        setSelectId(selectid as number)
+        if(index == 0) {
+            getProvince()
+        } else if (index == 1) {
+            const id = selectArr[0]?.id
+            getCity(id)
+        } else {
+            const id = selectArr[1]?.id
+            area(id)
+        }
     }
 
-    useEffect(() => {
-        if(selectIndex == 0) {
-            setList(provinceList)
-        } else if (selectIndex == 1) {
-            getCity()
-        } else {
-            area()
+
+    //获取省
+    const getProvince = async () => {
+        let res = await fetchData({parent_id: 1})
+        provinceList.current = res.data.list||[]
+        if(provinceList.current.length > 0) {
+            setSelectIndex(0)
+            setList(() => provinceList.current)
+            getDomDes('#address_tab_0')
         }
-    }, [selectIndex])
+    }
 
     //获取市
-    const getCity = async () => {
-        await getAddressList()
-        if(cityList.length > 0) {
+    const getCity = async (id) => {
+        let res = await fetchData({parent_id: id})
+        cityList.current = res.data.list||[]
+        if(cityList.current.length > 0) {
             setSelectIndex(1)
+            setList(() => cityList.current)
             setCityStatus(true)
             getDomDes('#address_tab_1')
         } else {
@@ -112,16 +123,18 @@ export default memo(({
     }
 
     //获取区
-    const area = () => {
-        setTimeout(() => {
-            if(areaList.length > 0) {
-                setSelectIndex(2)
-                setAreaStatus(true)
-                getDomDes('#address_tab_2')
-            } else {
-                setAreaStatus(false)
-            }
-        },10)
+    const area = async (id) => {
+        let res = await fetchData({parent_id: id})
+        areaList.current = res.data.list||[]
+        if(areaList.current.length > 0) {
+            setSelectIndex(2)
+            setList(() => areaList.current)
+            setAreaStatus(true)
+            getDomDes('#address_tab_2')
+        } else {
+            setAreaStatus(false)
+        }
+        
     }
 
     //确定按钮
@@ -132,17 +145,19 @@ export default memo(({
 
     //获取省市区宽度
     const getDomDes = (id) => {
-        Taro.nextTick(() => {
+
+        setTimeout(() => {
             let query = Taro.createSelectorQuery();
             query.select(id).boundingClientRect(rect=>{
                 let left = rect.left;
                 let clientWidth = rect.width;
+                console.log(clientWidth)
                 setBottomStyle({
                     width: clientWidth + 'px',
                     left: left + 'px'
                 })
             }).exec();
-        })
+        }, 100)
     }
 
     //点击标题栏

src/pages/addressAdd/index.tsx

@@ -88,7 +88,7 @@ export default ()=>{
       <Button style={{"background": hozon?'#007aff':''}} hoverClass="none" className={`add-address-save`} onClick={handleSave}>
         保存
       </Button>
-      <Address addressOnClose={()=>setShowSiteModal(false)} show={showSiteModal}/>
+      <Address addressOnSelect={(e) => console.log('地址::',e)} defaultValue={[{name: "广东省", id: 193}, {name: "佛山市", id: 202}, {name: "高明区", id: 204}]} addressOnClose={()=>setShowSiteModal(false)} show={showSiteModal}/>
     </View>
   )
 }