TestEShopDist/src/components/address/index.tsx

import { ScrollView, Text, View } from "@tarojs/components";
import { memo, ReactHTMLElement, useEffect, useRef, useState } from "react";
import Drawer from "@/components/popup";
import styles from "./index.module.scss"
import classnames from "classnames";
import Taro from "@tarojs/taro";
import { GetAddressListApi } from "@/api/addressList";


type Params = {
    addressOnSelect?: ({}:{name: string, id:string|number}) => void,
    addressOnClose?: () => void,
    show?: true|false
}

export default memo(({
    addressOnSelect,
    addressOnClose,
    show = false
}: 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 [list, setList] = useState<AddresParam[]>([])
    const [selectIndex, setSelectIndex] = useState(0) //0 省， 1 市，2 区
    const [selectId, setSelectId] = useState(0) //选中的id
    const [selectArr, setSelectArr] = useState<any>([]) //选中的省市区
    const [cityStatus, setCityStatus] = useState(false) //城市是否存在
    const [areaStatus, setAreaStatus] = useState(false) //区镇是否存在

    const [bottomStyle, setBottomStyle] = useState({width:'100rpx',left:'0rpx'}) //底部滚动条样式

    //选中内容
    const selectItem = (item) => {
        setSelectId(item.id)
        if(selectIndex == 0) {
            setSelectArr([item])
            getCity()
            setAreaStatus(false)
            setCityStatus(false)
        } else if(selectIndex == 1){
            setSelectArr([selectArr[0], item])
            area()
        } else {
            setSelectArr([selectArr[0], selectArr[1], item])
        }
    }
    
    //选中标题
    const onSelectIndex = (index) => {
        setSelectIndex(index)
        const selectid = selectArr[index]?selectArr[index].id:0
        setSelectId(selectid)
    }

    useEffect(() => {
        if(selectIndex == 0) {
            setList(provinceList)
        } else if (selectIndex == 1) {
            getCity()
        } else {
            area()
        }
    }, [selectIndex])

    //获取市
    const getCity = async () => {
        await getAddressList()
        if(cityList.length > 0) {
            setSelectIndex(1)
            setCityStatus(true)
            getDomDes('#address_tab_1')
        } else {
            setCityStatus(false)
        }
    }

    //获取区
    const area = () => {
        setTimeout(() => {
            if(areaList.length > 0) {
                setSelectIndex(2)
                setAreaStatus(true)
                getDomDes('#address_tab_2')
            } else {
                setAreaStatus(false)
            }
        },10)
    }

    //确定按钮
    const submitSelect = () => {
        addressOnClose?.()
        addressOnSelect?.(selectArr)
    }

    //获取省市区宽度
    const getDomDes = (id) => {
        Taro.nextTick(() => {
            let query = Taro.createSelectorQuery();
            query.select(id).boundingClientRect(rect=>{
                let left = rect.left;
                let clientWidth = rect.width;
                setBottomStyle({
                    width: clientWidth + 'px',
                    left: left + 'px'
                })
            }).exec();
        })
    }

    //点击标题栏
    const selectTab = (index) => {
        onSelectIndex(index)
        getDomDes('#address_tab_'+index)
    }

    return (
        <>
            <Drawer showTitle={false} show={show} onClose={() => addressOnClose?.()}>
                <View className={styles.address_main}>
                    <View className={styles.address_title}>
                        <View onClick={() => addressOnClose?.()}>取消</View>
                        <View onClick={() => submitSelect()}>确定</View>
                    </View>
                    <View className={styles.address_select}>
                        <View id="address_tab_0" onClick={() => selectTab(0)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 0)})}>{selectArr[0]?selectArr[0].name:'请选择'}</View>
                        {cityStatus&&<View id="address_tab_1" onClick={() => selectTab(1)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 1)})}>{selectArr[1]?selectArr[1].name:'请选择'}</View>}
                        {areaStatus&&<View id="address_tab_2" onClick={() => selectTab(2)} className={classnames(styles.address_item, {[styles.addresst_select]:(selectIndex == 2)})}>{selectArr[2]?selectArr[2].name:'请选择'}</View>}
                        <View style={bottomStyle} className={styles.bottom_index}></View>
                    </View>
                    <View className={styles.address_list}>
                        <ScrollView scrollY className={styles.address_scroll}>
                            <View className={styles.address_scroll_list}>
                                {list.map(item => {
                                    return (
                                        <View onClick={() => selectItem(item)} className={classnames(styles.address_list_item, {[styles.addresst_select]:(selectId == item.id)})}>
                                            <View className={styles.address_list_item_name}>{item.name}</View>
                                            {(selectId == item.id)&&<View className={`iconfont icon-a-tick1 ${styles.address_iconfont}` }></View>}
                                        </View>
                                    )
                                })}
                            </View>
                        </ScrollView>
                    </View>
                </View>
            </Drawer>
        </>
    )
})