diff --git a/src/components/AddressList/index.tsx b/src/components/AddressList/index.tsx index e60a20f..8d30912 100644 --- a/src/components/AddressList/index.tsx +++ b/src/components/AddressList/index.tsx @@ -7,15 +7,29 @@ import {addressListApi} from "@/api/addressManager" interface Params{ refresherEnabled?: boolean,//是否开启刷新 onSelect?: (item:any,index:number)=>void,//列表选择 - + addButtonEnabled?: boolean, //是否显示添加按钮 + focusBorderEnabled?: boolean, //焦点显示蓝色边框 + id?: number, //默认选择值 } // 地址列表 const AddressList = memo((props:Params)=>{ + const {addButtonEnabled=true,focusBorderEnabled=false} = props; const {fetchData, state} = addressListApi() // 获取数据 - const getData = ()=>{ - fetchData(); + const getData = async ()=>{ + const result = await fetchData(); + if(props.id){ + setFocusId(props.id as any); + }else{ + result.data.list?.every(item=>{ + if(item.is_default){ + setFocusId(item.id); + return false; + } + return true; + }) + } } useEffect(()=>{ getData(); @@ -25,10 +39,19 @@ const AddressList = memo((props:Params)=>{ const [refreshState, setRefreshState] = useState(false); const handleRefresh = async ()=>{ setRefreshState(true); - await fetchData(); + await getData(); setRefreshState(false); } const data = Array.from({length:15}); + // 焦点 + const [focusId, setFocusId] = useState(); + // 列表选择 + const handleSelect = (item: any, index: number)=>{ + props.onSelect&&props.onSelect(item,index); + if(focusBorderEnabled){ + setFocusId(item?.id); + } + } return ( @@ -39,7 +62,7 @@ const AddressList = memo((props:Params)=>{ // data.length>0? // data.map((item,index)=>{ return( - props.onSelect&&props.onSelect(item,index)} className={`address-list ${item.is_default&&'address-active'}`}> + handleSelect(item,index)} className={`address-list ${focusId==item.id&&'address-active'}`}> {item.name} { @@ -62,7 +85,7 @@ const AddressList = memo((props:Params)=>{ ); }): - 暂未添加地址 + addButtonEnabled&&暂未添加地址 } 添加收货地址