coleava
commented
2 years ago 调用pickerH5 小程序和h5都兼容
import './index.css';
import React, { Component } from 'react';
import { View } from '@tarojs/components';
import PickerH5 from '@/components/PickerH5/index';
import { find, isArray, isEmpty, map } from 'lodash';
import Taro from '@tarojs/taro';
class Drawer extends Component {
constructor() {
super(...arguments);
this.state = {
showDrawerBox: false,
isZIndex: false,
step: 0,
areaValue: '',
toastTxt: '',
selectData: null,
rooms: [],
roomsCache: [],
};
this.Ref = React.createRef();
}
openClose = (e) => {
this.setState({
showDrawerBox: false,
step: 0,
});
setTimeout(() => {
this.setState({
isZIndex: false,
});
}, 500);
};
onOpen = () => {
this.setState(
{
showDrawerBox: true,
isZIndex: true,
},
() => {
let cols = document.getElementsByClassName('rv-picker-column');
if (Taro.getEnv() === 'WEAPP') {
cols.forEach((col, index) => {
if (index === 3) {
col.style.display = 'none';
}
});
} else {
// h5时整个页面需要加个loading效果
for (let index = 0; index < cols.length; index++) {
if (index === 3) {
cols[3].style.display = 'none';
}
}
}
}
);
};
onSave = (e) => {
if (isArray(e) && e.length > 0) {
let item = {
district: e[0].text,
building: e[1].text,
floor: e[2].text,
roomsChildren: e[2].children,
};
this.setState({ roomsCache: item }, () => {
let rooms = map(e[2].children, (child) => {
return { text: child.text };
});
this.setState({ rooms });
});
} else {
let room = find(
this.state.roomsCache.roomsChildren,
(cache) => cache.text === e.text
);
if (room) {
let selectData = {
district: this.state.roomsCache.district,
building: this.state.roomsCache.building,
floor: this.state.roomsCache.floor,
roomName: room.text,
id: room.id,
};
this.setState({ selectData });
} else {
console.log('暂无房间');
}
}
};
areaValueChange = (areaValue) => {
this.setState({
areaValue,
});
};
onAtToastClose = () => {
this.setState({
toastTxt: '',
});
};
initValue = () => {
// 不选择直接下一步 然后确定的情况
let { buildingsTree } = this.props;
let init = {
district: buildingsTree[0].text,
building: buildingsTree[0].children[0].text,
floor: buildingsTree[0].children[0].children[0].text,
roomsChildren: buildingsTree[0].children[0].children[0].children,
};
this.setState({
roomsCache: init,
rooms: buildingsTree[0].children[0].children[0].children,
});
};
nextStep = () => {
if (this.state.step == 0) {
this.setState(
{
step: 1,
// selectData: [this.state.selectData[0], [0]]
},
() => {
if (isEmpty(this.state.rooms)) {
this.initValue();
}
}
);
} else {
if (!this.state.selectData) {
// 此处存在 选择完楼层之后 不操作 直接点确定的情况
let selectData = {
district: this.state.roomsCache.district,
building: this.state.roomsCache.building,
floor: this.state.roomsCache.floor,
roomName: this.state.roomsCache.roomsChildren[0].text,
id: this.state.roomsCache.roomsChildren[0].id,
};
this.props.saveData(selectData);
} else {
this.props.saveData(this.state.selectData);
}
this.setState({ rooms: [], step: 0 }, () => {
this.openClose();
});
}
};
render() {
let { showDrawerBox, isZIndex, step, areaValue, toastTxt, rooms } =
this.state,
{ buildingsTree, type } = this.props;
return (
<View
className={`drawer-box ${showDrawerBox ? 'open-drawer-box' : ''} ${
isZIndex ? 'zIndex' : ''
}`}
>
<PickerH5
dataList={step === 0 ? buildingsTree : rooms}
onSave={this.onSave}
ref={this.Ref}
/>
</View>
);
}
}
export default Drawer;
借助react-vant Picker 基础控件添加原始数据