401 lines
15 KiB
JavaScript
401 lines
15 KiB
JavaScript
|
||
import Taro, { Component } from '@tarojs/taro'
|
||
import { View, Text, Button, Input } from '@tarojs/components'
|
||
import { AtInput, AtImagePicker, AtTextarea, Picker } from 'taro-ui'
|
||
|
||
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
|
||
import LoginService from '../../LoginService'
|
||
|
||
import URL from '../../serviceAPI.config'
|
||
import './supplyDemandPublish.scss'
|
||
|
||
|
||
|
||
class SupplyDemand extends Component {
|
||
|
||
config = {
|
||
navigationBarTitleText: '供求发布'
|
||
}
|
||
constructor() {
|
||
super(...arguments)
|
||
this.state = {
|
||
demandingSupplyCate: [{ name: '需求', id: '1' }, { name: '供应', id: '2' }, { name: '人才', id: '3' }], //供求类型选择
|
||
demandingSupplyCateSelected: { name: '需求', id: '1' },// 当前供求类型
|
||
demandingSupplyState: [{ name: '上架', id: '1' }, { name: '下架', id: '0' }], // 状态选择
|
||
demandingSupplyStateSelected: { name: '上架', id: '1' },// 当前状态
|
||
title: '',
|
||
contactName: Taro.getStorageSync('user_identity').username,
|
||
contactNumber: Taro.getStorageSync('user_identity').userphone,
|
||
contactAddress: '',
|
||
content: '',
|
||
pickerImageUrl: [], // 上传的图片
|
||
ImagesInfo: [],// 后台传回来的图片信息
|
||
isPublish: false,//是否点击发布按钮
|
||
isPublishAndNew: false,//是否点击发布新增按钮
|
||
}
|
||
}
|
||
|
||
|
||
|
||
// 这个需要写一个uploadDemSup 上传供求 的api
|
||
uploadDemSup({ sd_type = this.state.demandingSupplyCateSelected.id,
|
||
sd_title = this.state.title,
|
||
user_name = this.state.contactName,
|
||
user_phone = this.state.contactNumber,
|
||
user_address = this.state.contactAddress,
|
||
sd_desc = this.state.content,
|
||
state = this.state.demandingSupplyStateSelected.id }) {
|
||
const file_path = [];
|
||
this.state.ImagesInfo.forEach((item) => {
|
||
file_path.push({
|
||
file_name: item.file_name,
|
||
file_size: item.file_size,
|
||
file_path: item.file_path,
|
||
thumb_path: item.thumb_path
|
||
})
|
||
})
|
||
Taro.request({
|
||
url: URL.UploadSupplyDemand,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
action: 1,
|
||
sdInfo: JSON.stringify({
|
||
sd_type: sd_type,
|
||
sd_title: sd_title,
|
||
user_name: user_name,
|
||
user_phone: user_phone,
|
||
user_address: user_address,
|
||
sd_desc: sd_desc,
|
||
state: state,
|
||
file_path: file_path
|
||
})
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
}
|
||
})
|
||
.then(res => {
|
||
console.log('上传供求', res)
|
||
Taro.hideLoading()
|
||
if (res.data.err_msg === 'success') {
|
||
Taro.showToast({
|
||
title: '上传成功',
|
||
icon: 'success',
|
||
duration: 1000
|
||
}).then(() => {
|
||
setTimeout(() => {
|
||
if (this.state.isPublish) {
|
||
Taro.navigateTo({
|
||
url: '/pages/myDemandSupplyEdit/myDemandSupplyEdit?sdId=' + res.data.sd_id
|
||
})
|
||
|
||
} else if (this.state.isPublishAndNew) {
|
||
Taro.switchTab({
|
||
url: '/pages/supplyDemandPublish/supplyDemandPublish'
|
||
})
|
||
}
|
||
|
||
}, 1000);
|
||
})
|
||
} else {
|
||
Taro.showToast({
|
||
title: '上传失败',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
}
|
||
|
||
}
|
||
)
|
||
|
||
}
|
||
|
||
|
||
// 上传图片
|
||
onChangeImg(files, operationType, index) {
|
||
const that = this
|
||
if (operationType === 'add') {
|
||
Taro.uploadFile({
|
||
url: URL.UploadDSPorductImage,
|
||
filePath: files[files.length - 1].url,
|
||
name: 'file',
|
||
formData: {
|
||
'key': 'michael',
|
||
},
|
||
header: {
|
||
'content-type': 'multipart/form-data; boundary=----WebKitFormBoundaryAWxeadaAVmRVQCiz',
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
},
|
||
success(response) {
|
||
console.log('response', response)
|
||
const data = JSON.parse(response.data)
|
||
if (data.err_code === 0) {
|
||
const imagePath = URL.Base + data.file_path
|
||
const newPickerImageUrl = that.state.pickerImageUrl.concat({ url: imagePath })
|
||
const newImageInfo = that.state.ImagesInfo.concat(data)
|
||
that.setState({ pickerImageUrl: newPickerImageUrl, ImagesInfo: newImageInfo })
|
||
Taro.showToast({
|
||
title: '上传成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
} else {
|
||
Taro.showToast({
|
||
title: data.err_msg,
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
}
|
||
|
||
}
|
||
})
|
||
}
|
||
if (operationType === 'remove') {
|
||
this.state.ImagesInfo.splice(index, 1) // 删除显示的图片
|
||
this.state.pickerImageUrl.splice(index, 1)// 删除图片param
|
||
that.setState({
|
||
pockerImageUrl: this.state.pickerImageUrl,
|
||
ImagesInfo: this.state.ImagesInfo,
|
||
})
|
||
Taro.showToast({
|
||
title: '删除成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
}
|
||
}
|
||
// 修改供求类型
|
||
demandingSupplyCate = e => {
|
||
this.setState({
|
||
demandingSupplyCateSelected: this.state.demandingSupplyCate[e.detail.value]
|
||
})
|
||
}
|
||
// 修改供求状态
|
||
demSupplyStateChange = e => {
|
||
this.setState({
|
||
demandingSupplyStateSelected: this.state.demandingSupplyState[e.detail.value]
|
||
})
|
||
}
|
||
//改标题
|
||
titleChange(event) {
|
||
this.setState({ title: event })
|
||
}
|
||
contactNameChange(event) {
|
||
this.setState({ contactName: event })
|
||
}
|
||
contactNumberChange(e) {
|
||
this.setState({ contactNumber: e.detail.value })
|
||
}
|
||
contactAddressChange(event) {
|
||
this.setState({ contactAddress: event.target.value })
|
||
}
|
||
contentChange(event) {
|
||
this.setState({ content: event.target.value })
|
||
}
|
||
|
||
// 上传供求api
|
||
publishButtonHandler() {
|
||
if (!Taro.getStorageSync('userInfo').user_id) {
|
||
LoginService()
|
||
return
|
||
}
|
||
if (this.state.demandingSupplyCateSelected && this.state.title && this.state.contactName && this.state.contactNumber && this.state.content && this.state.demandingSupplyStateSelected) {
|
||
|
||
Taro.showLoading({ title: '发布中' }).then(() => {
|
||
this.setState({ isPublish: true }, () => {
|
||
this.uploadDemSup({})
|
||
})
|
||
})
|
||
} else {
|
||
Taro.showToast({
|
||
title: '请填写完表格',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
}
|
||
}
|
||
publishAndNewButton() {
|
||
if (!Taro.getStorageSync('userInfo').user_id) {
|
||
LoginService()
|
||
return
|
||
}
|
||
if (this.state.demandingSupplyCateSelected && this.state.title && this.state.contactName && this.state.contactNumber && this.state.content && this.state.demandingSupplyStateSelected) {
|
||
|
||
Taro.showLoading({ title: '发布中' }).then(() => {
|
||
this.setState({ isPublishAndNew: true }, () => {
|
||
this.uploadDemSup({})
|
||
})
|
||
})
|
||
} else {
|
||
Taro.showToast({
|
||
title: '请填写完表格',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
}
|
||
}
|
||
goToMyDemSupPage() {
|
||
if (!Taro.getStorageSync('userInfo').user_id) {
|
||
LoginService()
|
||
return
|
||
}
|
||
Taro.switchTab({
|
||
url: '/pages/mySupplyDemand/mySupplyDemand'
|
||
})
|
||
}
|
||
componentWillMount() {
|
||
|
||
}
|
||
|
||
componentDidMount() {
|
||
|
||
}
|
||
componentWillReceiveProps(nextProps) {
|
||
// console.log(this.props, nextProps)
|
||
}
|
||
|
||
componentWillUnmount() { }
|
||
|
||
componentDidShow() {
|
||
if (!Taro.getStorageSync('userInfo').user_id) {
|
||
LoginService()
|
||
return
|
||
}
|
||
}
|
||
|
||
componentDidHide() { }
|
||
|
||
render() {
|
||
|
||
|
||
return (
|
||
<View className='supply-demand'>
|
||
|
||
|
||
<View className='page-section'>
|
||
<View>
|
||
<Picker mode='selector' rangeKey='name' range={this.state.demandingSupplyCate} onChange={this.demandingSupplyCate.bind(this)}>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
<Text className='title'><Text className='require'>*</Text>供求类型:</Text> <Text className='selected'>{this.state.demandingSupplyCateSelected.name}</Text>
|
||
</View>
|
||
|
||
</View>
|
||
</Picker>
|
||
</View>
|
||
</View>
|
||
<View className='border-box'>
|
||
<Text className='require'>*</Text><AtInput
|
||
name='value'
|
||
title='需求标题：'
|
||
type='text'
|
||
value={this.state.title}
|
||
onChange={this.titleChange.bind(this)}
|
||
border={false}
|
||
/>
|
||
</View>
|
||
<View className='input-box'>
|
||
<Text className='require'>*</Text>
|
||
<AtInput
|
||
name='value'
|
||
title='联系人：'
|
||
type='text'
|
||
value={this.state.contactName}
|
||
onChange={this.contactNameChange.bind(this)}
|
||
border={false}
|
||
/>
|
||
</View>
|
||
<View className='input-box' style='padding:24rpx 0;font-size:32rpx'>
|
||
<View className='title' style='font-weight:bold;'>
|
||
<Text style='color:red'>*</Text>
|
||
<Text>联系电话：</Text>
|
||
</View>
|
||
<View style='margin-left:5%;'>
|
||
<Input name='value'
|
||
maxLength='11'
|
||
type='number'
|
||
value={this.state.contactNumber}
|
||
onInput={this.contactNumberChange.bind(this)}
|
||
/></View>
|
||
</View>
|
||
|
||
<View className='demanding-box'>
|
||
<View className='title-box'>
|
||
<Text className='title'>联系地址:</Text>
|
||
</View>
|
||
|
||
<AtTextarea
|
||
value={this.state.contactAddress}
|
||
onChange={this.contactAddressChange.bind(this)}
|
||
maxlength='200'
|
||
placeholder='联系地址'
|
||
/>
|
||
</View>
|
||
<View className='demanding-box'>
|
||
<View className='title-box'>
|
||
<Text className='title'><Text className='require'>*</Text>需求内容:</Text>
|
||
</View>
|
||
<AtTextarea
|
||
value={this.state.content}
|
||
onChange={this.contentChange.bind(this)}
|
||
maxlength='200'
|
||
placeholder=''
|
||
/>
|
||
</View>
|
||
<View className='img-box'>
|
||
<View className='title-box'>
|
||
<Text className='title'>需求图片:</Text>
|
||
<View className='warn'>(最多4张)</View>
|
||
</View>
|
||
|
||
<View className='img-container'>
|
||
<AtImagePicker
|
||
multiple
|
||
showAddBtn={this.state.pickerImageUrl.length < 4}
|
||
files={this.state.pickerImageUrl}
|
||
onChange={this.onChangeImg.bind(this)}
|
||
onFail={this.onFail.bind(this)}
|
||
onImageClick={this.onImageClick.bind(this)}
|
||
/>
|
||
</View>
|
||
|
||
</View>
|
||
<View className='page-section'>
|
||
|
||
<View>
|
||
<Picker mode='selector' rangeKey='name' range={this.state.demandingSupplyState} onChange={this.demSupplyStateChange}>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
<Text className='title'> <Text className='require'>*</Text>状态:</Text> <Text className='selected'>{this.state.demandingSupplyStateSelected.name}</Text>
|
||
</View>
|
||
|
||
</View>
|
||
</Picker>
|
||
</View>
|
||
</View>
|
||
|
||
<View className='button-box'>
|
||
<View className='button' onClick={this.publishButtonHandler.bind(this)}>
|
||
<Button size='mini' className='button-orange' >发布</Button>
|
||
</View>
|
||
<View className='button' onClick={this.publishAndNewButton.bind(this)}>
|
||
<Button size='mini' className='button-green' >发布并新增</Button>
|
||
</View>
|
||
<View className='button' onClick={this.goToMyDemSupPage.bind(this)}>
|
||
<Button size='mini' className='button-green' >我的供求</Button>
|
||
</View>
|
||
</View>
|
||
<CopyrightComponent></CopyrightComponent>
|
||
|
||
|
||
</View>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default SupplyDemand
|