460 lines
14 KiB
JavaScript
460 lines
14 KiB
JavaScript
//myNeeds
|
||
import Taro, { Component } from '@tarojs/taro'
|
||
import { View, Text, Button } from '@tarojs/components'
|
||
import { AtInput, Picker, AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction } from 'taro-ui'
|
||
import URL from '../../serviceAPI.config'
|
||
import ScrollToTopComponent from '../../component/scrollToTopComponent/scrollToTopComponent'
|
||
import InteractionComponent from '../../component/interactionComponent/interactionComponent'
|
||
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
|
||
|
||
|
||
import './myNeeds.scss'
|
||
|
||
|
||
class MyNeeds extends Component {
|
||
|
||
config = {
|
||
navigationBarTitleText: '我的需求'
|
||
}
|
||
constructor() {
|
||
super(...arguments)
|
||
this.state = {
|
||
title: '',
|
||
startDateSel: '',
|
||
endDateSel: '',
|
||
industryTypeSelected: { name: '全部', id: '' },
|
||
needsType: [{ name: '业主需求', id: '4' }, { name: '效果图', id: '5' }],
|
||
needsTypeSelected: { name: '业主需求', id: '4' },
|
||
needsState: [
|
||
{ name: '全部', id: '' },
|
||
{ name: '作废', id: '0' }
|
||
, { name: '在用', id: '1' },
|
||
{ name: '已抢单', id: '2' },
|
||
{ name: '已抢光', id: '3' }],
|
||
needsStateSelected: { name: '全部', id: '' },
|
||
pageCount: 10,// 列表数量
|
||
allNeedsList: [],// 我的需求列表
|
||
totalNeeds: 0,// 我的需求数量
|
||
currentPage: 1,
|
||
needsItem: '',// 确认框提示时 使用的供求名
|
||
isDeleteModal:false,// 删除提示框
|
||
isAddToList: false,// 请求需求的时候是否添加到旧列表里
|
||
isShowTopNav: false,// 是否显示返回顶部按钮
|
||
loadMorePageIndex:1,// 上拉加载页面数
|
||
}
|
||
}
|
||
|
||
|
||
//请求我的需求列表 api GetMyNeedsList
|
||
getMyNeedsList({
|
||
curr_page = this.state.currentPage,
|
||
page_count = this.state.pageCount,
|
||
sd_type = this.state.needsTypeSelected.id,
|
||
sd_title = this.state.title,
|
||
update_dateL = this.state.startDateSel,
|
||
update_dateU = this.state.endDateSel,
|
||
class_id = this.state.industryTypeSelected.id,
|
||
state = this.state.needsStateSelected.id
|
||
}) {
|
||
//由于后台返回的问题， 所有当state为空的时候不传state，反之传state
|
||
const param=state?{param: JSON.stringify({
|
||
curr_page: curr_page,
|
||
page_count: page_count,
|
||
sd_type: sd_type,
|
||
sd_title: sd_title,
|
||
update_dateL: update_dateL,
|
||
update_dateU: update_dateU,
|
||
class_id: class_id,
|
||
state: state
|
||
})}:{param: JSON.stringify({
|
||
curr_page: curr_page,
|
||
page_count: page_count,
|
||
sd_type: sd_type,
|
||
sd_title: sd_title,
|
||
update_dateL: update_dateL,
|
||
update_dateU: update_dateU,
|
||
class_id: class_id,
|
||
})}
|
||
|
||
Taro.request({
|
||
url: URL.GetMyNeedsList,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: param,
|
||
header: {
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
}
|
||
}).then(res => {
|
||
Taro.hideLoading()
|
||
console.log('我的需求列表', res)
|
||
if (res.data.err_msg === "success") {
|
||
if(res.data.supplys.length){
|
||
if(this.state.isAddToList){
|
||
this.setState({
|
||
allNeedsList:this.state.allNeedsList.concat(res.data.supplys)
|
||
},()=>{
|
||
this.setState({isAddToList:false})
|
||
})
|
||
|
||
}else{
|
||
this.setState({isAddToList:false})
|
||
this.setState({
|
||
allNeedsList: res.data.supplys || [],
|
||
totalNeeds: Number(res.data.count)
|
||
})
|
||
|
||
}
|
||
|
||
|
||
}else{
|
||
this.setState({isAddToList:false})
|
||
Taro.showToast({
|
||
title: '没有更多了',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}else{
|
||
Taro.showToast({
|
||
title: res.data.err_msg,
|
||
icon: 'none'
|
||
})
|
||
}
|
||
})
|
||
|
||
}
|
||
//删除我的需求 api DeleteMyNeeds
|
||
deleteMyNeeds({ demandId = 10 }) {
|
||
Taro.request({
|
||
url: URL.DeleteMyNeeds,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
|
||
demandId: demandId
|
||
|
||
},
|
||
header: {
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
}
|
||
}).then(res => {
|
||
console.log('删除我的列表', res)
|
||
if (res.data.err_msg === "success") {
|
||
Taro.showToast({
|
||
title: '删除成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
setTimeout(() => {
|
||
this.getMyNeedsList({
|
||
})
|
||
}, 1500);
|
||
} else {
|
||
Taro.showToast({
|
||
title: res.data.err_msg,
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
|
||
|
||
|
||
// 搜索按钮
|
||
onSearchButtonHandler() {
|
||
Taro.showLoading({ title: '加载中' }).then(() => {
|
||
this.setState({ currentPage: 1,loadMorePageIndex:1 },()=>{
|
||
this.getMyNeedsList({
|
||
curr_page: this.state.currentPage,
|
||
page_count: this.state.pageCount,
|
||
sd_type: this.state.needsTypeSelected.id,
|
||
sd_title: this.state.title,
|
||
update_dateL: this.state.startDateSel,
|
||
update_dateU: this.state.endDateSel,
|
||
class_id: this.state.industryTypeSelected.id==='-1'?'':this.state.industryTypeSelected.id,
|
||
state: this.state.needsStateSelected.id
|
||
})
|
||
|
||
})
|
||
|
||
|
||
|
||
|
||
})
|
||
|
||
}
|
||
// 新增我的需求
|
||
addNeeds() {
|
||
Taro.navigateTo({
|
||
url: '/pages/myNeedsPublish/myNeedsPublish'
|
||
})
|
||
}
|
||
//清空筛选项
|
||
emptyFilter(){
|
||
this.setState({
|
||
title:'',
|
||
endDateSel:'',
|
||
startDateSel:'',
|
||
industryTypeSelected: { name: '全部', id: '' },
|
||
needsTypeSelected: { name: '业主需求', id: '4' },
|
||
needsStateSelected: { name: '全部', id: '' },
|
||
currentPage:1,
|
||
loadMorePageIndex:1,
|
||
},()=>{
|
||
this.getMyNeedsList({})
|
||
})
|
||
Taro.showToast({
|
||
title:'已清空',
|
||
icon:'success',
|
||
duration:1000
|
||
})
|
||
}
|
||
titleChange(event) {
|
||
this.setState({ title: event })
|
||
}
|
||
// 修改开始日期
|
||
onStartDateChange = e => {
|
||
this.setState({
|
||
startDateSel: e.detail.value
|
||
})
|
||
}
|
||
// 修改结束日期
|
||
onEndDateChange = e => {
|
||
this.setState({
|
||
endDateSel: e.detail.value
|
||
})
|
||
}
|
||
|
||
needsTypeChange = e => {
|
||
this.setState({
|
||
needsTypeSelected: this.state.needsType[e.detail.value]
|
||
})
|
||
}
|
||
needsStateChange = e => {
|
||
this.setState({
|
||
needsStateSelected: this.state.needsState[e.detail.value]
|
||
})
|
||
}
|
||
goToMyNeedsViewPage(id) {
|
||
Taro.navigateTo({
|
||
url: '/pages/myNeedsView/myNeedsView?id='+id
|
||
})
|
||
}
|
||
goToMyNeedsEditPage(id) {
|
||
Taro.navigateTo({
|
||
url: '/pages/myNeedsEdit/myNeedsEdit?id='+id
|
||
})
|
||
}
|
||
deleteButton(item) {
|
||
this.setState({isDeleteModal:true,needsItem:item})
|
||
}
|
||
handleWindowModCancel(){
|
||
this.setState({isDeleteModal:false})
|
||
}
|
||
handleWindowConfirm(){
|
||
this.setState({isDeleteModal:false})
|
||
this.deleteMyNeeds({ demandId: this.state.needsItem.sd_id })
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
componentDidMount() {
|
||
Taro.showLoading({
|
||
title:'加载中'
|
||
})
|
||
this.getMyNeedsList({})
|
||
|
||
}
|
||
componentWillReceiveProps(nextProps) {
|
||
console.log(this.props, nextProps)
|
||
}
|
||
|
||
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.getMyNeedsList({ curr_page: this.state.loadMorePageIndex })
|
||
})
|
||
|
||
}
|
||
|
||
|
||
getDataFromChild(value){
|
||
console.log('从子组件传回来的值',value)
|
||
this.setState({industryTypeSelected:value})
|
||
}
|
||
render() {
|
||
const myNeedsListArrayElement = this.state.allNeedsList.map((item, index) => {
|
||
return <View className='needs-box' key={index}>
|
||
<View className='industy-type box'>
|
||
<Text className='title'>行业分类：</Text>
|
||
<Text className='content'>{item.class_name}</Text>
|
||
|
||
</View>
|
||
<View className='needs-title box'>
|
||
<Text className='title'>需求标题：</Text>
|
||
<Text className='content' onClick={this.state.goToMyNeedsViewPage.bind(this,item.sd_id)}>{item.sd_title}</Text>
|
||
</View>
|
||
<View className='needs-state box'>
|
||
<Text className='title'>需求状态：</Text>
|
||
<Text className='content'>{item.state_name}</Text>
|
||
</View>
|
||
<View className='update-time box'>
|
||
<Text className='title'>更新时间：</Text>
|
||
<Text className='content'>{item.update_date}</Text>
|
||
</View>
|
||
{item.state === '0'||item.state === '1' ? <View className='info-button-box'>
|
||
<View className='button' onClick={this.goToMyNeedsViewPage.bind(this, item.sd_id)}>
|
||
<Button size='mini' className='button-orange button-no-margin'>查看</Button>
|
||
</View>
|
||
<View className='button' onClick={this.goToMyNeedsEditPage.bind(this, item.sd_id)}>
|
||
<Button size='mini' className='button-orange button-no-margin'>编辑</Button>
|
||
</View>
|
||
<View className='button' onClick={this.deleteButton.bind(this, item)}>
|
||
<Button size='mini' className='button-dark-red button-no-margin' >删除</Button>
|
||
</View>
|
||
</View > : <View className='info-button-box'>
|
||
<View className='button' onClick={this.goToMyNeedsViewPage.bind(this, item.sd_id)}>
|
||
<Button size='mini' className='button-orange button-no-margin'>查看</Button>
|
||
</View>
|
||
</View>
|
||
}
|
||
|
||
</View>
|
||
})
|
||
const deleteModalWindowElement= <AtModal isOpened={this.state.isDeleteModal}>
|
||
<AtModalHeader>提示</AtModalHeader>
|
||
<AtModalContent>
|
||
确认删除{this.state.needsItem.sd_title}？
|
||
</AtModalContent>
|
||
<AtModalAction> <Button onClick={this.handleWindowModCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleWindowConfirm.bind(this)}>确定</Button> </AtModalAction>
|
||
</AtModal>
|
||
return (
|
||
<View className='myNeeds'>
|
||
{/* 删除模态框 */}
|
||
{deleteModalWindowElement}
|
||
{/* 需求标题 */}
|
||
<View className='input-box'>
|
||
<AtInput
|
||
name='value'
|
||
title='需求标题：'
|
||
placeholder='需求标题·'
|
||
type='text'
|
||
value={this.state.title}
|
||
onChange={this.titleChange.bind(this)}
|
||
/>
|
||
</View>
|
||
{/* 开始和结束日期 */}
|
||
<View className='page-section'>
|
||
<View className='picker-box'>
|
||
<Picker mode='date' className='picker-container' onChange={this.onStartDateChange}>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
开始日期:<Text className='selected date'>{this.state.startDateSel}</Text>
|
||
</View>
|
||
|
||
</View>
|
||
</Picker>
|
||
<Picker className='picker-container' mode='date' start={this.state.startDateSel} onChange={this.onEndDateChange}>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
结束日期: <Text className='selected date'>{this.state.endDateSel}</Text>
|
||
</View>
|
||
</View>
|
||
</Picker>
|
||
|
||
</View>
|
||
</View>
|
||
{/* 行业分类开始 */}
|
||
<InteractionComponent url={URL.GetIndustryTypeList} onPassDataToChild={this.getDataFromChild.bind(this)} selectedValue={this.state.industryTypeSelected}></InteractionComponent>
|
||
{/* 行业分类结束 */}
|
||
{/* 需求类型 */}
|
||
<View className='page-section'>
|
||
<View>
|
||
<Picker mode='selector' rangeKey='name' range={this.state.needsType} onChange={this.needsTypeChange.bind(this)}>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
<Text className='title'>需求类型:</Text> <Text className='selected'>{this.state.needsTypeSelected.name}</Text>
|
||
</View>
|
||
</View>
|
||
</Picker>
|
||
</View>
|
||
</View>
|
||
{/* 需求状态 */}
|
||
<View className='page-section'>
|
||
|
||
<View>
|
||
<Picker mode='selector' rangeKey='name' range={this.state.needsState} onChange={this.needsStateChange.bind(this)}>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
<Text className='title'> 需求状态:</Text> <Text className='selected'>{this.state.needsStateSelected.name}</Text>
|
||
</View>
|
||
|
||
</View>
|
||
</Picker>
|
||
</View>
|
||
</View>
|
||
|
||
|
||
|
||
<View className='button-box'>
|
||
<View className='button' onClick={this.onSearchButtonHandler.bind(this)}>
|
||
<Button size='mini' className='button-orange'>
|
||
<AtIcon value='search' size='12' color='white'></AtIcon>
|
||
搜索</Button>
|
||
</View>
|
||
<View className='button' onClick={this.addNeeds.bind(this)}>
|
||
<Button size='mini' className='button-green'>
|
||
<AtIcon value='add' size='12' color='white'></AtIcon>
|
||
新增</Button>
|
||
</View>
|
||
<View className='button' onClick={this.emptyFilter.bind(this)}>
|
||
<Button size='mini' className='button-dark-red'>
|
||
<AtIcon value='trash' size='12' color='white'></AtIcon>
|
||
清空</Button>
|
||
</View>
|
||
</View>
|
||
<View className='total'>
|
||
共<Text className='count'>{this.state.totalNeeds}</Text> 条记录
|
||
</View>
|
||
{/* 我的需求信息 */}
|
||
{ <View className='info-box'>
|
||
{myNeedsListArrayElement}
|
||
</View>}
|
||
|
||
{this.state.isShowTopNav ? <ScrollToTopComponent ></ScrollToTopComponent> : null}
|
||
|
||
<CopyrightComponent ></CopyrightComponent>
|
||
|
||
</View>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default MyNeeds
|