384 lines
15 KiB
JavaScript
384 lines
15 KiB
JavaScript
import Taro, { Component } from '@tarojs/taro'
|
||
import { View, Text, Image, Button } from '@tarojs/components'
|
||
import { AtInput, Picker, AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
|
||
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
|
||
import ScrollToTopComponent from '../../component/scrollToTopComponent/scrollToTopComponent'
|
||
|
||
import InteractionComponent from '../../component/interactionComponent/interactionComponent'
|
||
import loginExpired from '../../util/loginExpired'
|
||
import onClickValueService from '../../util/onClickValueService'
|
||
|
||
import URL from '../../serviceAPI.config'
|
||
import './allDemanding.scss'
|
||
import eyeIcon from '../../icons/eye.png'
|
||
import { getGlobalStorage } from '../../util/getSetStoage';
|
||
|
||
|
||
|
||
|
||
class AllDemanding extends Component {
|
||
config = {
|
||
navigationBarTitleText: '全部业主需求'
|
||
}
|
||
constructor() {
|
||
super(...arguments)
|
||
this.state = {
|
||
supplys: [], // 需求列表
|
||
demandingState: [{ name: '全部', id: '' }, { name: '在用', id: '1' }, { name: '已抢单', id: '2' }, { name: '已抢光', id: '3' },], // 供求状态选择
|
||
demandingStateSelected: { name: '全部', id: '' }, // 当前供求状态
|
||
industryTypeSelected: { name: '全部', id: '' },// 当前行业分类
|
||
title: '',
|
||
startDateSel: '',
|
||
endDateSel: '',
|
||
isOpenedGrabModal: false,
|
||
grabOrderId: '',//抢到订单的id
|
||
isGrabOrderSuccess: false,// 是否显示轻提示
|
||
grabOrderSuccess: '无法显示绑定后的字段',// 抢单成功返回字段
|
||
isAddToList: false,// / 请求业主需求的时候是否添加到旧列表里
|
||
isShowTopNav: false,// 是否显示返回顶部按钮
|
||
loadMorePageIndex: 1
|
||
|
||
}
|
||
}
|
||
|
||
// 搜索业主需求函数
|
||
searchDemanding({
|
||
curr_page = 1,
|
||
page_count = 10,
|
||
sd_title = this.state.title,
|
||
state = this.state.demandingStateSelected.id,
|
||
update_dateL = this.state.startDateSel,
|
||
update_dateU = this.state.endDateSel,
|
||
class_id = this.state.industryTypeSelected.id
|
||
}) {
|
||
Taro.request({
|
||
url: URL.GetAllDemanding,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
param: JSON.stringify({
|
||
curr_page: curr_page,
|
||
page_count: page_count,
|
||
sd_title: sd_title,
|
||
state: state,
|
||
update_dateL: update_dateL,
|
||
update_dateU: update_dateU,
|
||
class_id: class_id
|
||
|
||
}),
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'X-Requested-With': 'XMLHttpRequest',
|
||
'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
|
||
}
|
||
})
|
||
.then(res => {
|
||
Taro.hideLoading()
|
||
if (res.data.err_code === 0) {
|
||
if (res.data.supplys) {
|
||
if (this.state.isAddToList) {
|
||
this.setState({ supplys: this.state.supplys.concat(res.data.supplys), isAddToList: false })
|
||
} else {
|
||
this.setState({ supplys: res.data.supplys })
|
||
}
|
||
} else {
|
||
if (this.state.isAddToList) {
|
||
Taro.showToast({
|
||
title: '没有更多了',
|
||
icon: 'none'
|
||
})
|
||
} else {
|
||
this.setState({ supplys: [] })
|
||
}
|
||
|
||
}
|
||
} else if (res.data.err_code === 88888) {
|
||
loginExpired(res)
|
||
} else {
|
||
Taro.showToast({
|
||
title: res.data.err_msg,
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
}
|
||
this.setState({ isAddToList: false })
|
||
})
|
||
}
|
||
|
||
// 改变需求选项
|
||
changeDemandingState = e => {
|
||
this.setState({
|
||
demandingStateSelected: this.state.demandingState[e.detail.value]
|
||
})
|
||
}
|
||
titleChange(event) {
|
||
this.setState({ title: event })
|
||
}
|
||
|
||
//改变开始日期
|
||
onStartDateChange = e => {
|
||
this.setState({
|
||
startDateSel: e.detail.value,
|
||
|
||
})
|
||
}
|
||
// 改变结束日期
|
||
onEndDateChange = e => {
|
||
this.setState({
|
||
endDateSel: e.detail.value
|
||
})
|
||
}
|
||
// 抢单接口
|
||
GrabDemand({ demandId = 218 }) {
|
||
Taro.request({
|
||
url: URL.GrabDemand,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
demandId: demandId
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
}
|
||
})
|
||
.then(res => {
|
||
if (res.data.err_code === 0) {
|
||
Taro.showToast({
|
||
title: res.data.err_msg === 'success' ? '抢单成功' : res.data.err_msg,
|
||
icon: res.data.err_msg === 'success' ? 'success' : 'none'
|
||
})
|
||
this.searchDemanding({ curr_page: 1 })
|
||
} else if (res.data.err_code === 88888) {
|
||
loginExpired(res)
|
||
}
|
||
else {
|
||
|
||
Taro.showToast({
|
||
title: res.data.err_msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
|
||
console.log('抢单请求：', res)
|
||
})
|
||
|
||
}
|
||
grabOrder(e) {
|
||
const id = onClickValueService(e)
|
||
this.setState({ isOpenedGrabModal: true, grabOrderId: id })
|
||
}
|
||
handleGrabModalClose() {
|
||
this.setState({ isOpenedGrabModal: false })
|
||
}
|
||
handleGrabModalCancel() {
|
||
this.setState({ isOpenedGrabModal: false })
|
||
}
|
||
handleGrabConfirm() {
|
||
this.setState({ isOpenedGrabModal: false })
|
||
this.GrabDemand({ demandId: this.state.grabOrderId })
|
||
}
|
||
searchHanlder() {
|
||
Taro.showLoading({ title: '加载中' })
|
||
this.searchDemanding({})
|
||
}
|
||
//清空筛选项
|
||
emptyFilter() {
|
||
this.setState({
|
||
title: '',
|
||
endDateSel: '',
|
||
startDateSel: '',
|
||
demandingStateSelected: { name: '全部', id: '' },
|
||
industryTypeSelected: { name: '全部', id: '' },
|
||
})
|
||
Taro.showToast({
|
||
title: '已清空',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
}
|
||
|
||
getDataFromChild(value) {
|
||
console.log('从子组件传回来的值', value)
|
||
this.setState({ industryTypeSelected: value })
|
||
}
|
||
|
||
goToGrabOrderPage(e) {
|
||
const id = onClickValueService(e)
|
||
Taro.navigateTo({
|
||
url: '/pages/grabOrderPage/grabOrderPage?orderId=' + id
|
||
})
|
||
}
|
||
|
||
componentWillReceiveProps(nextProps) {
|
||
console.log(this.props, nextProps)
|
||
}
|
||
componentDidMount() {
|
||
// 得到第一页需求数据
|
||
Taro.showLoading({ title: '加载中' }).then(() => {
|
||
this.searchDemanding({})
|
||
})
|
||
|
||
|
||
}
|
||
|
||
componentWillUnmount() { }
|
||
|
||
componentDidShow() { }
|
||
|
||
componentDidHide() { }
|
||
// 页面位置
|
||
onPageScroll(location) {
|
||
if (location.scrollTop <= 300 && this.state.isShowTopNav) {
|
||
this.setState({ isShowTopNav: false })
|
||
} else if (location.scrollTop > 300 && !this.state.isShowTopNav) {
|
||
this.setState({ isShowTopNav: true })
|
||
}
|
||
}
|
||
|
||
// 底部加载
|
||
onReachBottom() {
|
||
Taro.showLoading({
|
||
title: '加载中'
|
||
})
|
||
|
||
this.setState({ isAddToList: true, loadMorePageIndex: this.state.loadMorePageIndex + 1 }, () => {
|
||
this.searchDemanding({ curr_page: this.state.loadMorePageIndex })
|
||
})
|
||
|
||
}
|
||
|
||
render() {
|
||
// 提示模态弹窗element
|
||
|
||
|
||
const modalMessageGrabElement = <AtModal isOpened={this.state.isOpenedGrabModal}>
|
||
<AtModalHeader>提示</AtModalHeader>
|
||
<AtModalContent>
|
||
确认抢单？
|
||
</AtModalContent>
|
||
<AtModalAction> <Button onClick={this.handleGrabModalCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleGrabConfirm.bind(this)}>确定</Button> </AtModalAction>
|
||
</AtModal>
|
||
|
||
const allDemandingElementArray = this.state.supplys.length ? this.state.supplys.map((item, index) => {
|
||
return <View className='demanding-info' key={index}>
|
||
<View className='header'>
|
||
<AtIcon value='user' size='12' color='#2196F3'></AtIcon>
|
||
<View className='name'> 业主:{item.user_name}</View>
|
||
<View className='others'>
|
||
<Text className='cate'>{item.class_name + ' '} </Text>
|
||
|
|
||
<Image src={eyeIcon} style='width:12px; height:12px; vertical-align:middle;' />
|
||
<Text className='watch'>{item.browse_times}</Text>
|
||
</View>
|
||
</View>
|
||
<View className='body'>
|
||
<View className='image-container' onClick={this.goToGrabOrderPage.bind(this, item.sd_id)}>
|
||
<Image style='width:100%;height:100%' src={URL.Base + item.file_path[0].thumb_path} />
|
||
</View>
|
||
<View className='detail'>
|
||
<View className='title'>{item.sd_title}</View>
|
||
<View className='para'>{item.sd_desc}</View>
|
||
{item.state === '1' ? <View className='button' onClick={this.grabOrder.bind(this, item.sd_id)}>
|
||
<Button size='mini' className='button-orange'>抢单</Button>
|
||
</View> : null || item.state === '2' ? <View className='button'>
|
||
<Button size='mini' className='button-orange blur'>{item.state_name}</Button>
|
||
</View> : null || item.state === '3' ? <View className='button'>
|
||
<Button size='mini' className='button-orange blur'>{item.state_name}</Button>
|
||
</View> : null}
|
||
</View>
|
||
</View>
|
||
<View className='footer'>
|
||
<View className='location'><AtIcon value='map-pin' size='12' color='black'></AtIcon>{item.user_address}</View>
|
||
<View className='time'>更新日期:{item.update_date}</View>
|
||
</View>
|
||
|
||
</View>
|
||
}) : <View className='no-more-title'>没有更多了</View>
|
||
return (
|
||
<View className='allDemanding'>
|
||
{/* 模态框 */}
|
||
{modalMessageGrabElement}
|
||
|
||
<View className='page-section'>
|
||
{/* 供求状态选择 */}
|
||
<View>
|
||
<Picker mode='selector' rangeKey='name' range={this.state.demandingState} onChange={this.changeDemandingState}>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
<Text className='title'> 供求状态:</Text> <Text className='selected'>{this.state.demandingStateSelected.name}</Text>
|
||
</View>
|
||
|
||
</View>
|
||
</Picker>
|
||
</View>
|
||
</View>
|
||
|
||
<View className='input-box'>
|
||
|
||
<AtInput
|
||
name='value'
|
||
title='需求标题：'
|
||
type='text'
|
||
placeholder='需求标题'
|
||
value={this.state.title}
|
||
onChange={this.titleChange.bind(this)}
|
||
/>
|
||
</View>
|
||
{/* 开始和结束日期选择 */}
|
||
<View className='page-section'>
|
||
<View className='picker-box'>
|
||
<View className='picker-wrapper'>
|
||
<Picker mode='date' className='picker-container' onChange={this.onStartDateChange}>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
<Text className='title'>开始日期:</Text> <Text className='date'>{this.state.startDateSel}</Text>
|
||
</View>
|
||
</View>
|
||
</Picker>
|
||
</View>
|
||
|
||
<View className='picker-wrapper'>
|
||
<Picker className='picker-container' mode='date' start={this.state.startDateSel} onChange={this.onEndDateChange}>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
<Text className='title'>结束日期:</Text> <Text className='date'>{this.state.endDateSel}</Text>
|
||
</View>
|
||
</View>
|
||
</Picker>
|
||
</View>
|
||
|
||
</View>
|
||
</View>
|
||
{/* 行业分类选择 */}
|
||
<InteractionComponent url={URL.GetIndustryTypeList} onPassDataToChild={this.getDataFromChild.bind(this)} selectedValue={this.state.industryTypeSelected}></InteractionComponent>
|
||
|
||
|
||
<View className='button-box'>
|
||
<View className='button' onClick={this.searchHanlder.bind(this)}>
|
||
<Button type='primary' size='mini' className='button-orange' >
|
||
<AtIcon value='search' size='12' color='white'></AtIcon>
|
||
搜索</Button>
|
||
</View>
|
||
|
||
<View className='button' onClick={this.emptyFilter.bind(this)}>
|
||
<Button type='primary' size='mini' className='button-dark-red' >
|
||
<AtIcon value='trash' size='12' color='white'></AtIcon>
|
||
清空</Button>
|
||
</View>
|
||
</View>
|
||
{/* 供求页面的数据加载 */}
|
||
<View className='demanding-box'>
|
||
{allDemandingElementArray}
|
||
</View>
|
||
{this.state.isShowTopNav ? <ScrollToTopComponent ></ScrollToTopComponent> : null}
|
||
<CopyrightComponent></CopyrightComponent>
|
||
</View>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default AllDemanding
|