--地址列表组件增加焦点选择、是否显示添加按钮、默认选择值参数

This commit is contained in:
li tong bao 2022-05-18 18:18:24 +08:00
parent 0066256009
commit 072e818279

View File

@ -7,15 +7,29 @@ import {addressListApi} from "@/api/addressManager"
interface Params{ interface Params{
refresherEnabled?: boolean,//是否开启刷新 refresherEnabled?: boolean,//是否开启刷新
onSelect?: (item:any,index:number)=>void,//列表选择 onSelect?: (item:any,index:number)=>void,//列表选择
addButtonEnabled?: boolean, //是否显示添加按钮
focusBorderEnabled?: boolean, //焦点显示蓝色边框
id?: number, //默认选择值
} }
// 地址列表 // 地址列表
const AddressList = memo((props:Params)=>{ const AddressList = memo((props:Params)=>{
const {addButtonEnabled=true,focusBorderEnabled=false} = props;
const {fetchData, state} = addressListApi() const {fetchData, state} = addressListApi()
// 获取数据 // 获取数据
const getData = ()=>{ const getData = async ()=>{
fetchData(); 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(()=>{ useEffect(()=>{
getData(); getData();
@ -25,10 +39,19 @@ const AddressList = memo((props:Params)=>{
const [refreshState, setRefreshState] = useState(false); const [refreshState, setRefreshState] = useState(false);
const handleRefresh = async ()=>{ const handleRefresh = async ()=>{
setRefreshState(true); setRefreshState(true);
await fetchData(); await getData();
setRefreshState(false); setRefreshState(false);
} }
const data = Array.from({length:15}); 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 ( return (
<View className="address-scroll-view"> <View className="address-scroll-view">
@ -39,7 +62,7 @@ const AddressList = memo((props:Params)=>{
// data.length>0? // data.length>0?
// data.map((item,index)=>{ // data.map((item,index)=>{
return( return(
<View onClick={()=>props.onSelect&&props.onSelect(item,index)} className={`address-list ${item.is_default&&'address-active'}`}> <View onClick={()=>handleSelect(item,index)} className={`address-list ${focusId==item.id&&'address-active'}`}>
<View className="address-user"> <View className="address-user">
{item.name} {item.name}
{ {
@ -62,7 +85,7 @@ const AddressList = memo((props:Params)=>{
</View> </View>
); );
}): }):
<View className="address-no-data"></View> addButtonEnabled&&<View className="address-no-data"></View>
} }
</ScrollView> </ScrollView>
<Navigator url="/pages/addressAdd/index?type=add" hoverClass="none" className="add-address"></Navigator> <Navigator url="/pages/addressAdd/index?type=add" hoverClass="none" className="add-address"></Navigator>