地址栏选择器
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; } } }
使用方式
1 import AddressPicker from '@/components/address-picker' 2 callback(pName, pCode, cName, cCode) { 3 this.getCityStore(cCode, this.state.longitudeLatitude); 4 this.setState({ 5 provinceCode: pCode, 6 cityCode: cCode, 7 province: pName, 8 city: cName 9 }, () => { 10 console.log(this.state); 11 //setState是异步操作，但是我们可以在它的回调函数里面进行操作 12 }); 13 } 14 <AddressPicker arr={{ province, city }} chooseCity={this.callback}></AddressPicker>