TestRestructureWechatLymarketDist/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";

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

export default memo(({
    addressOnSelect,
    addressOnClose,
    show = false

}: Params) => {
    const list1 = [
        {
            name:'广东1',
            id:1
        },
        {
            name:'广东2',
            id:2
        },
        {
            name:'广东3',
            id:3
        },
        {
            name:'广东4',
            id:4
        },
        {
            name:'广东5',
            id:5
        },
        {
            name:'广东6',
            id:6
        }
    ]

    const list2 = [
        {
            name:'佛山1佛山1佛山1佛山1佛山1',
            id:7
        },
        {
            name:'佛山2',
            id:8
        },
        {
            name:'佛山3',
            id:9
        },
        {
            name:'佛山4',
            id:10
        },
        {
            name:'佛山5',
            id:11
        },
        {
            name:'佛山6',
            id:12
        }
    ]

    const list3 = [
        {
            name:'禅城区1',
            id:13
        },
        {
            name:'禅城区2',
            id:14
        },
        {
            name:'禅城区3',
            id:15
        },
        {
            name:'禅城区4',
            id:16
        },
        {
            name:'禅城区5',
            id:17
        },
        {
            name:'禅城区6',
            id:18
        }
    ]

    const [list, setList] = useState(list1)
    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(list1)
            // getDomDes('#address_tab_0')
        } else if (selectIndex == 1) {
            getCity()
        } else {
            area()
        }
    }, [selectIndex])

    //获取市
    const getCity = () => {
        
        setTimeout(() => {
            if(list2.length > 0) {
                setSelectIndex(1)
                setList(() => { return list2 })
                setCityStatus(true)
                getDomDes('#address_tab_1')
            } else {
                setCityStatus(false)
            }
        },10)
    }

    //获取区
    const area = () => {
        // setAreaStatus(false)
        setTimeout(() => {
            if(list3.length > 0) {
                setSelectIndex(2)
                setList(() => { return list3 })
                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>
        </>
    )
})