96 lines
3.4 KiB
TypeScript
96 lines
3.4 KiB
TypeScript
|
|
import { Button, Navigator, ScrollView, Text, View } from "@tarojs/components"
|
|
import { memo, useEffect, useState } from "react"
|
|
import "./index.scss"
|
|
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 = 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();
|
|
},[])
|
|
|
|
// 处理刷新
|
|
const [refreshState, setRefreshState] = useState(false);
|
|
const handleRefresh = async ()=>{
|
|
setRefreshState(true);
|
|
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 (
|
|
<View className="address-scroll-view">
|
|
<ScrollView scrollY refresherEnabled={props.refresherEnabled} enhanced refresherTriggered={refreshState} onRefresherRefresh={handleRefresh}>
|
|
{
|
|
state?.data?.list?.length>0?
|
|
state?.data?.list?.map((item,index)=>{
|
|
// data.length>0?
|
|
// data.map((item,index)=>{
|
|
return(
|
|
<View onClick={()=>handleSelect(item,index)} className={`address-list ${focusId==item.id&&'address-active'}`}>
|
|
<View className="address-user">
|
|
{item.name}
|
|
{
|
|
item.is_default?<Text className="address-list-default">默认</Text>:
|
|
<Text className="address-list-phone">{item.phone}</Text>
|
|
}
|
|
</View>
|
|
<View className="address-list-bottom">
|
|
<View className="address-list-info">
|
|
{/* **省**市**区**街道****仓库 */}
|
|
{item.province_name+item.city_name+item.district_name} {item.address_detail}
|
|
{
|
|
item.is_default&&<Text className="address-list-phone">{item.phone}</Text>
|
|
}
|
|
</View>
|
|
<Navigator url={`/pages/addressAdd/index?type=edit&id=${item.id}`} hoverClass="none" className="address-edit">
|
|
<Text className="iconfont icon-bianji"></Text>
|
|
</Navigator>
|
|
</View>
|
|
</View>
|
|
);
|
|
}):
|
|
addButtonEnabled&&<View className="address-no-data">暂未添加地址</View>
|
|
}
|
|
</ScrollView>
|
|
<Navigator url="/pages/addressAdd/index?type=add" hoverClass="none" className="add-address">添加收货地址</Navigator>
|
|
</View>
|
|
)
|
|
})
|
|
|
|
export default AddressList; |