taro 地址栏组件

地址栏选择器

import { ComponentClass } from 'react'
import Taro, { Component } from '@tarojs/taro'
import { View, PickerView, PickerViewColumn } from '@tarojs/components'
import { DrivingService } from '@/services/index'
import './index.scss'
type PageStateProps = { //获取父组件的值
    province? : string,
    city?: string,
    chooseCity :any,
    arr:any
}

type PageOwnProps = {}
type IProps = PageStateProps & PageOwnProps

type PageState = { // 数据类型
    city: string,
    cityCode: string,
    cityList: any,
    province: any,
    provinceCode: string,
    provinceList: any,
    getValue: number[],
    getTitle: string,
    getClose: string
    showPicker: boolean,
    changeType: boolean
}

interface Index {
    props: IProps
}
class Index extends Component {
    constructor(props) {
        super(props);
        this.clickFun = this.clickFun.bind(this);
    }
    state: PageState = { // 默认数据
        city: '',
        cityCode: '',
        cityList: [],
        province:'',
        provinceCode: '',
        provinceList: [],
        getValue: [0, 0],
        getTitle: '选择地址',
        getClose:'',
        showPicker: false,
        changeType: false,
    }                                                                                                                                      

    componentWillMount() {  
        // console.log(this.props);

    }
    componentDidShow() {
        console.log('这是componentDidShow这是加载显示');
    }

    componentDidMount() { // 这是一个建立定时器的好地方
        let { province, city } = this.props.arr;
        this.setState({
            province,
            city
        }, () => {
            this.getProvinceList();
        })
    }
    componentWillReceiveProps() {
        //console.log('这是componentWillReceiveProps');
    }

    componentWillUnmount() { 
        console.log('这是componentWillUnmount');
    }

    componentDidHide() {
        console.log('componentDidHide');
    }
    
    getProvinceList = () => { // 获取省份接口
        DrivingService.getProvinceCityList({
            appointmentProject: 1,
            appointmentType: 0
        }).then(({ data }) => {
            this.setState({
                provinceList: data
            });
            this.getCity(data[0].areaCode, '');
        });
    }
    getCity = (code, val) => { // 获取城市接口
        DrivingService.getCityList({
            appointmentProject: 1,
            appointmentType: 0,
            areaShopProvinceCode: code
        }).then(({ data }) => {
            if (val && val.length > 0) {
                this.setState({
                    cityList: data,
                    province: this.state.provinceList[val[0]].areaName,
                    provinceCode: code,
                    city: data[val[1]].areaName,
                    getValue: val,
                    cityCode: data[val[1]].areaCode
                });
            } else {
                this.setState({
                    cityList: data
                });
            }
        });
    }
    onChange = (e) => { // 滑动改变值
        const val = e.detail.value;
        this.getCity(this.state.provinceList[val[0]].areaCode, val);
        this.setState({
            changeType: true
        })
    }
    openClose = () => { // 点击状态
        this.setState({
            showPicker: !this.state.showPicker,
        });
    }
    confirm = () => { //关闭
        if (this.state.province === '选择试驾城市' ) {
            this.setState({
                showPicker: false,
                province: this.state.provinceList[0].areaName,
                city: this.state.cityList[0].areaName,
                provinceCode: this.state.provinceList[0].areaCode,
                cityCode: this.state.cityList[0].areaCode,
                getValue: [0, 0]
            });
        } else {
            this.setState({
                showPicker: false
            });
        }
    }
    clickFun() { //点击确认
        if (this.state.province === '选择试驾城市' || this.state.changeType === false) {
            this.setState({
                showPicker: false,
                province: this.state.provinceList[0].areaName,
                city: this.state.cityList[0].areaName,
                provinceCode: this.state.provinceList[0].areaCode,
                cityCode: this.state.cityList[0].areaCode,
                getValue: [0, 0]
            });
            this.props.chooseCity(this.state.provinceList[0].areaName, this.state.provinceList[0].areaCode, this.state.cityList[0].areaName, this.state.cityList[0].areaCode) // 这个地方把值传递给了props的事件当中
        } else {
            this.setState({
                showPicker: false
            });
            this.props.chooseCity(this.state.province, this.state.provinceCode, this.state.city, this.state.cityCode) // 这个地方把值传递给了props的事件当中
        }
        // console.log(text,v);
    }
    render() {
        const { showPicker, city, province, getTitle, getClose} = this.state;
        return (
            <View className="addressBox">
                <View className="addressTitle" onClick={this.openClose}>
                    <View className="address" >{province}{city}</View>
                    <View className="rightIcon"></View>
                </View>
                {   showPicker
                    ?<View className="picker">
                        <View className="topList">
                            {getClose ? <View className="close" onClick={this.confirm}></View> : ''}
                            <View className="title">{getTitle?getTitle:''}</View>
                            <View className="sure" onClick={this.clickFun}>确认</View>
                        </View>
                        <PickerView indicatorStyle='height: 50px;' style=' 100%; height: 200px; text-align: center; line-height: 50px;' value={this.state.getValue} onChange={this.onChange}>
                            <PickerViewColumn>
                                {this.state.provinceList.map(item => {
                                    return (
                                        <View data-code={item.areaCode}>{item.areaName}</View>
                                    )
                                })}
                            </PickerViewColumn>
                            <PickerViewColumn>
                                {this.state.cityList.map((item) => {
                                    return (
                                        <View>{item.areaName}</View>
                                    );
                                })}
                            </PickerViewColumn>
                        </PickerView>
                    </View>
                    :''
                }
            </View>
        )
    }
}
export default Index as ComponentClass<PageOwnProps, PageState>

.addressBox {
    width: 660px;
    .addressTitle{
        display: flex;
        align-items: center;
        justify-content: space-between;
        .address {
            position: relative;
        }
        .rightIcon {
            width: 44px;
            height: 44px;
            background: url('https://ueapp-oss-static.leapmotor.com/leapMiniApp/appointment_driving/go_to.png')no-repeat;
            background-size: 44px 44px;
            display: block;
        }
    }
}
.picker{
    width: 100%;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    border-top:1px solid #E5E5E5;
    background: #fff;
    z-index: 99;
    .topList{
        height:100px;
        line-height:100px;
        display: flex;
        justify-content: flex-end;
        align-items: center;
        padding-right:10px;
        padding-left: 10px;
        .title {
            width: 260px;
        }
        .sure,
        .close {
            display: inline-block;
            height: 50px;
            width: 200px;
            text-align: center;
            line-height: 50px;
            color: #3d7abd;
        }
    }
}

使用方式

import AddressPicker from '@/components/address-picker'
    callback(pName, pCode, cName, cCode) {
        this.getCityStore(cCode, this.state.longitudeLatitude);
        this.setState({
            provinceCode: pCode,
            cityCode: cCode,
            province: pName,
            city: cName
        }, () => {
            console.log(this.state);
           //setState是异步操作，但是我们可以在它的回调函数里面进行操作
        });
    }
<AddressPicker arr={{ province, city }} chooseCity={this.callback}></AddressPicker>