493 lines
18 KiB
JavaScript
493 lines
18 KiB
JavaScript
import Taro, { Component } from '@tarojs/taro'
|
||
import { View, Text, Button, MovableArea, MovableView } 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 CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
|
||
import LoginService from '../../util/LoginService'
|
||
import loginExpired from '../../util/loginExpired'
|
||
|
||
|
||
import './mySupplyDemand.scss'
|
||
import onClickValueService from '../../util/onClickValueService';
|
||
|
||
|
||
class MySupplyDemand extends Component {
|
||
|
||
config = {
|
||
navigationBarTitleText: '我的供求'
|
||
}
|
||
constructor() {
|
||
super(...arguments)
|
||
this.state = {
|
||
demandSupplyCate: [{ name: '全部', id: '' }, { name: '需求', id: '1' }, { name: '供应', id: '2' }, { name: '人才', id: '3' },],
|
||
demandSupplyCateSelected: { name: '全部', id: '' },
|
||
demandSupplyState: [{ name: '全部', id: '' }, { name: '上架', id: '1' }, { name: '下架', id: '0' }],
|
||
demandSupplyStatesSelected: { name: '全部', id: '' },
|
||
title: '',
|
||
startDateSel: '',
|
||
endDateSel: '',
|
||
allDemandSupply: [],
|
||
isConfirmWindow: false, // 是否显示确认弹窗
|
||
demandSupplyItemName: '',// 确认框提示时 使用的供求名
|
||
demandSupplyId: '',// 删除我的供求时的供求id
|
||
totalDemandSupply: 0,//所有供求
|
||
currentPage: 1,//当前页数
|
||
isShowTopNav: false,// 是否显示返回顶部按钮
|
||
loadMorePageIndex: 1,//上拉加载页面数
|
||
screenWidth: '',
|
||
screenHeight: ''
|
||
}
|
||
}
|
||
//获取我的供求列表API
|
||
getMySupplyDemand({
|
||
curr_page = 1, page_count = 10,
|
||
sd_type = this.state.demandSupplyCateSelected.id,
|
||
state = this.state.demandSupplyStatesSelected.id,
|
||
sd_title = this.state.title,
|
||
update_dateL = this.state.startDateSel,
|
||
update_dateU = this.state.endDateSel
|
||
}) {
|
||
Taro.request({
|
||
url: URL.MySupplyDemand,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
|
||
data: {
|
||
param: JSON.stringify({
|
||
curr_page: curr_page,
|
||
page_count: page_count,
|
||
sd_type: sd_type,
|
||
state: state,
|
||
sd_title: sd_title,
|
||
update_dateL: update_dateL,
|
||
update_dateU: update_dateU
|
||
})
|
||
},
|
||
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_code === 0) {
|
||
if (this.state.isAddToList) {
|
||
if (res.data.supplys.length && res.data.count !== '0') {
|
||
this.setState({ allDemandSupply: this.state.allDemandSupply.concat(res.data.supplys) }, () => {
|
||
this.setState({ isAddToList: false })
|
||
})
|
||
} else {
|
||
this.setState({ isAddToList: false })
|
||
Taro.showToast({
|
||
title: '没有更多了',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
} else {
|
||
if (res.data.count !== '0') {
|
||
this.setState({ allDemandSupply: res.data.supplys, totalDemandSupply: res.data.count })
|
||
} else {
|
||
this.setState({ allDemandSupply: [], totalDemandSupply: res.data.count })
|
||
Taro.showToast({
|
||
title: '没有找到相关信息',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
} else if (res.data.err_code === 88888) {
|
||
loginExpired(res)
|
||
}
|
||
else {
|
||
|
||
Taro.showToast({
|
||
title: res.data.err_msg,
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
}
|
||
})
|
||
|
||
}
|
||
|
||
onSearchButtonHandler() {
|
||
|
||
Taro.showLoading({ title: '加载中' })
|
||
|
||
this.setState({ loadMorePageIndex: 1 }, () => {
|
||
this.getMySupplyDemand({ curr_page: this.state.loadMorePageIndex })
|
||
})
|
||
|
||
}
|
||
|
||
// 删除我的供求api
|
||
onDelete({ sdID = 0 }) {
|
||
Taro.request({
|
||
url: URL.DeleteDemandSupply,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
sdID: sdID
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
}
|
||
})
|
||
.then(res => {
|
||
Taro.hideLoading()
|
||
if (res.data.err_code == 0) {
|
||
console.log('删除成功')
|
||
Taro.showToast({
|
||
title: '删除成功'
|
||
}).then(() => {
|
||
this.getMySupplyDemand({})
|
||
})
|
||
|
||
} else if (res.data.err_code === 88888) {
|
||
loginExpired(res)
|
||
} else {
|
||
Taro.showToast({
|
||
title: res.data.err_msg,
|
||
icon: 'none'
|
||
})
|
||
|
||
}
|
||
|
||
}
|
||
)
|
||
|
||
}
|
||
|
||
// 新增我的供求
|
||
addDemandSupply() {
|
||
Taro.navigateTo({
|
||
url: '/pages/supplyDemandPublish/supplyDemandPublish'
|
||
})
|
||
}
|
||
//清空筛选项
|
||
emptyFilter() {
|
||
|
||
this.setState({
|
||
title: '',
|
||
endDateSel: '',
|
||
startDateSel: '',
|
||
demandSupplyCateSelected: { name: '全部', id: '' },
|
||
demandSupplyStatesSelected: { name: '全部', id: '' },
|
||
}, () => {
|
||
this.getMySupplyDemand({})
|
||
})
|
||
Taro.showToast({
|
||
title: '已清空',
|
||
icon: 'success',
|
||
duration: 1000
|
||
})
|
||
}
|
||
|
||
|
||
//修改供求类型
|
||
demSupplyCateChange = e => {
|
||
this.setState({
|
||
demandSupplyCateSelected: this.state.demandSupplyCate[e.detail.value]
|
||
}, () => {
|
||
console.log(this.state.demandSupplyCateSelected)
|
||
})
|
||
}
|
||
// 修改供求状态
|
||
demSupplyStateChange = e => {
|
||
this.setState({
|
||
demandSupplyStatesSelected: this.state.demandSupplyState[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
|
||
})
|
||
}
|
||
handleWindowModClose() {
|
||
this.setState({ isConfirmWindow: false })
|
||
}
|
||
handleWindowModCancel() {
|
||
this.setState({ isConfirmWindow: false })
|
||
}
|
||
handleWindowConfirm() {
|
||
this.setState({ isConfirmWindow: false })
|
||
Taro.showLoading({
|
||
title: '加载中'
|
||
})
|
||
this.onDelete({ sdID: this.state.demandSupplyId })
|
||
|
||
}
|
||
|
||
// 删除我的供求
|
||
handleOnDelete(e) {
|
||
const title = onClickValueService(e).sd_title
|
||
const id = onClickValueService(e).sd_id
|
||
this.setState({ isConfirmWindow: true, demandSupplyItemName: title, demandSupplyId: id })
|
||
}
|
||
|
||
|
||
// 编辑我的供求
|
||
|
||
// 跳转到我的供求编辑页面
|
||
goToMyDSEditPage(e) {
|
||
const sdId = onClickValueService(e)
|
||
Taro.navigateTo({
|
||
url: '/pages/myDemandSupplyEdit/myDemandSupplyEdit?sdId=' + sdId
|
||
})
|
||
|
||
}
|
||
// 转到供求查看页面
|
||
goSupplyDemandView(e) {
|
||
const sdId = onClickValueService(e)
|
||
Taro.navigateTo({
|
||
url: '/pages/supplyDemandView/supplyDemandView?sdId=' + sdId
|
||
})
|
||
}
|
||
goToCenterPage() {
|
||
Taro.switchTab({
|
||
url: '/pages/individualCenter/individualCenter'
|
||
})
|
||
}
|
||
getUserSystemInfo() {
|
||
Taro.getSystemInfo().then(res => {
|
||
return res
|
||
}).then(res => {
|
||
this.setState({
|
||
screenWidth: res.screenWidth - 80 + 'px',
|
||
screenHeight: res.screenHeight - 200 + 'px'
|
||
})
|
||
})
|
||
|
||
}
|
||
|
||
|
||
componentWillMount() {
|
||
|
||
}
|
||
componentWillReceiveProps(nextProps) {
|
||
console.log(this.props, nextProps)
|
||
}
|
||
|
||
componentDidMount() {
|
||
this.getUserSystemInfo()
|
||
Taro.showLoading({ title: '加载中' }).then(() => {
|
||
this.getMySupplyDemand({})
|
||
})
|
||
}
|
||
componentWillUnmount() { }
|
||
|
||
componentDidShow() {
|
||
if (!Taro.getStorageSync('userInfo').user_id) {
|
||
LoginService()
|
||
return
|
||
}
|
||
if (!Taro.getStorageSync('shopInfo').shop_id && Taro.getStorageSync('userInfo').user_id) {
|
||
Taro.showToast({
|
||
title: '您还没有店铺，不能使用该功能，快去申请吧',
|
||
icon: 'none'
|
||
})
|
||
}
|
||
}
|
||
|
||
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.getMySupplyDemand({ curr_page: this.state.loadMorePageIndex })
|
||
})
|
||
|
||
}
|
||
|
||
render() {
|
||
|
||
|
||
// 提示模态弹窗element
|
||
const modalMessageConfirmElement = <AtModal isOpened={this.state.isConfirmWindow}>
|
||
<AtModalHeader>提示</AtModalHeader>
|
||
<AtModalContent>
|
||
确认删除{this.state.demandSupplyItemName}？
|
||
</AtModalContent>
|
||
<AtModalAction> <Button onClick={this.handleWindowModCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleWindowConfirm.bind(this)}>确定</Button> </AtModalAction>
|
||
</AtModal>
|
||
|
||
|
||
const demandSupplyElementArray = this.state.allDemandSupply.length ? this.state.allDemandSupply.map((item, index) => {
|
||
const SDState = this.state.demandSupplyState.filter(stateItem => {
|
||
return stateItem.id == item.state
|
||
})[0].name
|
||
|
||
return <View key={index} className='info-container'>
|
||
<View className='type'>
|
||
<Text className='title'>需求类型：</Text>
|
||
<Text className='info'>{item.type_name}</Text>
|
||
</View>
|
||
<View className='demand-title'>
|
||
<Text className='title'>需求标题：</Text>
|
||
<Text className='info' onClick={this.goSupplyDemandView.bind(this, item.sd_id)}>{item.sd_title}</Text>
|
||
</View>
|
||
<View className='contact-name'>
|
||
<Text className='title'>联系人：</Text>
|
||
<Text className='info'>{item.user_name}</Text>
|
||
</View>
|
||
<View className='contact-number'>
|
||
<Text className='title'>电话号码：</Text>
|
||
<Text className='info'>{item.user_phone}</Text>
|
||
</View>
|
||
<View className='demand-status'>
|
||
<Text className='title'>需求状态：</Text>
|
||
<Text className='info'>{SDState}</Text>
|
||
</View>
|
||
<View className='update-time'>
|
||
<Text className='title'>更新时间：</Text>
|
||
<Text className='info'>{item.update_date}</Text>
|
||
</View>
|
||
<View className='info-button-box'>
|
||
|
||
{item.state === '0' ? null : <View className='button' onClick={this.goSupplyDemandView.bind(this, item.sd_id)}>
|
||
<Button size='mini' className='button-orange button-no-margin'>查看</Button>
|
||
</View>}
|
||
<View className='button' onClick={this.goToMyDSEditPage.bind(this, item.sd_id)} >
|
||
<Button size='mini' className='button-orange button-no-margin'>编辑</Button>
|
||
</View>
|
||
<View className='button' onClick={this.handleOnDelete.bind(this, item)}>
|
||
<Button size='mini' className='button-dark-red button-no-margin'>删除</Button>
|
||
</View>
|
||
</View>
|
||
|
||
|
||
</View>
|
||
}) : <View className='no-more-title' >
|
||
没有更多了....
|
||
</View >
|
||
return (<MovableArea style='height: 100vh; width: 100%; '>
|
||
<View className='mySupplyDemand'>
|
||
{/* 是否删除供求确认框 */}
|
||
{modalMessageConfirmElement}
|
||
|
||
|
||
{/* 供求类型 */}
|
||
<View className='page-section'>
|
||
<View>
|
||
<Picker mode='selector' rangeKey='name' range={this.state.demandSupplyCate} onChange={this.demSupplyCateChange.bind(this)}>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
<Text className='title'><Text className='require'>*</Text>供求类型:</Text> <Text className='selected'>{this.state.demandSupplyCateSelected.name}</Text>
|
||
</View>
|
||
</View>
|
||
</Picker>
|
||
</View>
|
||
</View>
|
||
{/* 供求状态 */}
|
||
<View className='page-section'>
|
||
|
||
<View>
|
||
<Picker mode='selector' rangeKey='name' range={this.state.demandSupplyState} onChange={this.demSupplyStateChange.bind(this)}>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
<Text className='title'> <Text className='require'>*</Text>供求状态:</Text> <Text className='selected'>{this.state.demandSupplyStatesSelected.name}</Text>
|
||
</View>
|
||
|
||
</View>
|
||
</Picker>
|
||
</View>
|
||
</View>
|
||
{/* 供求标题 */}
|
||
<View className='input-box'>
|
||
<Text className='require'>*</Text>
|
||
<AtInput
|
||
name='value'
|
||
title='供求标题：'
|
||
placeholder='供求标题·'
|
||
type='text'
|
||
value={this.state.title}
|
||
onChange={this.titleChange.bind(this)}
|
||
border={false}
|
||
/>
|
||
</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='title'><Text className='require'>*</Text>开始日期:</Text> <Text className='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='title'><Text className='require'>*</Text>结束日期:</Text> <Text className='date'>{this.state.endDateSel}</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.addDemandSupply.bind(this)}>
|
||
<Button className=' button-green' size='mini'>
|
||
<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-count'>一共<Text className='number'>{this.state.totalDemandSupply}</Text> 条记录</View>
|
||
{/* 我的供求信息 */}
|
||
<View className='info-box'>
|
||
{demandSupplyElementArray}
|
||
</View>
|
||
|
||
{this.state.isShowTopNav ? <ScrollToTopComponent ></ScrollToTopComponent> : null}
|
||
<CopyrightComponent></CopyrightComponent>
|
||
|
||
</View>
|
||
<MovableView className='movable-point' x={this.state.screenWidth} y={this.state.screenHeight} style='opacity:0.3' direction='all' onClick={this.goToCenterPage.bind(this)} >
|
||
|
||
个人中心
|
||
</MovableView>
|
||
</MovableArea>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default MySupplyDemand
|