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='width: 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>
标签：province,city,taro,cityList,provinceList,state,组件,地址栏,setState 来源： https://www.cnblogs.com/Lolita-web/p/11996311.html