diff --git a/src/components/address/index.module.scss b/src/components/address/index.module.scss index 49b5975..ce7e7c7 100644 --- a/src/components/address/index.module.scss +++ b/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{ diff --git a/src/components/address/index.tsx b/src/components/address/index.tsx index 9d4725f..89fcc69 100644 --- a/src/components/address/index.tsx +++ b/src/components/address/index.tsx @@ -7,78 +7,78 @@ import Taro from "@tarojs/taro"; import { GetAddressListApi } from "@/api/addressList"; -type Params = { - addressOnSelect?: ({}:{name: string, id:string|number}) => void, - addressOnClose?: () => void, - show?: true|false +type DefaultValueParm = { + val: {name?: string, id?:string|number} } +type Params = { + addressOnSelect?: (val:DefaultValueParm[]) => void, + addressOnClose?: () => void, + show?: true|false, + defaultValue?:any[] +} + +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([]) - //市 - const [cityList, setCityList] = useState([]) - //区 - const [areaList, setAreaList] = useState([]) - - + //省 + const provinceList = useRef([]) + //市 + const cityList = useRef([]) + //区 + const areaList = useRef([]) + const [list, setList] = useState([]) const [selectIndex, setSelectIndex] = useState(0) //0 省, 1 市,2 区 - const [selectId, setSelectId] = useState(0) //选中的id - const [selectArr, setSelectArr] = useState([]) //选中的省市区 + const [selectId, setSelectId] = useState(1) //选中的id + const [selectArr, setSelectArr] = useState([]) //选中的省市区 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') } } @@ -87,23 +87,36 @@ export default memo(({ setSelectIndex(index) const selectid = selectArr[index]?selectArr[index].id:0 setSelectId(selectid) + 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 +125,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 +147,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) } //点击标题栏 diff --git a/src/pages/addressAdd/index.tsx b/src/pages/addressAdd/index.tsx index 1b60b60..3a6d42b 100644 --- a/src/pages/addressAdd/index.tsx +++ b/src/pages/addressAdd/index.tsx @@ -53,7 +53,7 @@ export default ()=>{ -
setShowSiteModal(false)} show={showSiteModal}/> +
console.log('地址::',e)} defaultValue={[{name: "广东省", id: 193}, {name: "佛山市", id: 202}, {name: "高明区", id: 204}]} addressOnClose={()=>setShowSiteModal(false)} show={showSiteModal}/> ) }