421 lines
15 KiB
JavaScript
421 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 URL from '../../serviceAPI.config'
|
||
import InteractionComponent from '../../component/interactionComponent/interactionComponent'
|
||
import LoginService from '../../util/LoginService'
|
||
|
||
|
||
import './myNeedsPublish.scss'
|
||
import loginExpired from '../../util/loginExpired';
|
||
|
||
|
||
|
||
class MyNeedsPublish extends Component {
|
||
|
||
config = {
|
||
navigationBarTitleText: '需求发布'
|
||
}
|
||
constructor() {
|
||
super(...arguments)
|
||
this.state = {
|
||
industryTypeSelected: { name: '全部', id: '-1' },// 当前行业分类
|
||
needsState: [{ name: '在用', id: '1' }, { name: '作废', id: '0' }], // 状态选择
|
||
needsStateSelected: { name: '在用', id: '1' },// 当前状态
|
||
needsType: [{ name: '业主需求', id: '4' }, { name: '效果图', id: '5' }],
|
||
needsTypeSelected: { name: '业主需求', id: '4' },
|
||
title: '',
|
||
contactName: Taro.getStorageSync('user_identity').username || '',
|
||
contactNumber: Taro.getStorageSync('user_identity').userphone || '',
|
||
contactAddress: '',
|
||
content: '',
|
||
pickerImageUrl: [], // 上传的图片
|
||
ImagesInfo: [],// 后台传回来的图片信息
|
||
|
||
isPublishAndNew: false,//是否点击发布新增按钮
|
||
}
|
||
}
|
||
|
||
|
||
|
||
|
||
|
||
// uploadMyNeeds 上传供求 的api
|
||
uploadMyNeedsApi() {
|
||
|
||
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.PublishMyNeed,
|
||
method: 'POST',
|
||
dataType: 'json',
|
||
data: {
|
||
action: 1,
|
||
sdInfo: JSON.stringify({
|
||
class_id: this.state.industryTypeSelected.id,
|
||
sd_type: this.state.needsTypeSelected.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.needsStateSelected.id,
|
||
file_path: file_path,
|
||
|
||
})
|
||
},
|
||
header: {
|
||
'content-type': 'application/x-www-form-urlencoded',
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
}
|
||
})
|
||
.then(response => {
|
||
console.log('上传需求', response)
|
||
|
||
const res = JSON.parse(response.data)
|
||
console.log('jonson parse', res)
|
||
Taro.hideLoading()
|
||
if (res.err_code === 0) {
|
||
Taro.showToast({
|
||
title: '发布成功',
|
||
icon: 'success',
|
||
duration: 1500
|
||
}).then(() => {
|
||
setTimeout(() => {
|
||
if (this.state.isPublishAndNew) {
|
||
Taro.navigateTo({
|
||
url: '/pages/myNeedsPublish/myNeedsPublish'
|
||
})
|
||
} else {
|
||
Taro.navigateTo({
|
||
url: '/pages/myNeedsEdit/myNeedsEdit?id=' + res.sd_id
|
||
})
|
||
}
|
||
}, 1500);
|
||
})
|
||
|
||
} else if (res.err_code === 88888) {
|
||
|
||
const resp = { data: { err_msg: res.err_msg } }
|
||
console.log('resp',resp)
|
||
loginExpired(resp)
|
||
} else {
|
||
Taro.showToast({
|
||
title: res.err_msg,
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
}
|
||
|
||
}
|
||
)
|
||
|
||
}
|
||
|
||
// 上传图片
|
||
onChangeImg(files, operationType, index) {
|
||
const that = this
|
||
if (operationType === 'add') {
|
||
Taro.uploadFile({
|
||
url: URL.MyNeedUploadImage,
|
||
filePath: files[files.length - 1].url,
|
||
name: 'file',
|
||
header: {
|
||
'content-type': 'multipart/form-data',
|
||
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
|
||
'X-Requested-With': 'XMLHttpRequest'
|
||
},
|
||
success(response) {
|
||
const data = JSON.parse(response.data)
|
||
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
|
||
})
|
||
}
|
||
})
|
||
}
|
||
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
|
||
})
|
||
}
|
||
}
|
||
// 修改需求类型
|
||
needsTypeHandler = e => {
|
||
this.setState({
|
||
needsTypeSelected: this.state.needsType[e.detail.value]
|
||
}, () => {
|
||
console.log(this.state.needsTypeSelected)
|
||
})
|
||
}
|
||
// 修改供求状态
|
||
needsStateHandler = e => {
|
||
this.setState({
|
||
needsStateSelected: this.state.needsState[e.detail.value]
|
||
}, () => {
|
||
console.log(this.state.needsStateSelected)
|
||
})
|
||
}
|
||
//改标题
|
||
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 })
|
||
}
|
||
// 发布按钮
|
||
publishButtonHandler() {
|
||
if (this.state.title &&
|
||
this.state.contactName
|
||
&& this.state.contactNumber
|
||
&& this.state.content && this.state.needsStateSelected) {
|
||
|
||
Taro.showLoading({
|
||
title: '发布中'
|
||
})
|
||
this.setState({ isPublishAndNew: false }, () => {
|
||
this.uploadMyNeedsApi({})
|
||
})
|
||
|
||
} else {
|
||
Taro.showToast({
|
||
title: '请填写完表格',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
}
|
||
|
||
|
||
}
|
||
// 发布新增按钮
|
||
publishAndNewButton() {
|
||
if (this.state.title &&
|
||
this.state.contactName
|
||
&& this.state.contactNumber
|
||
&& this.state.content && this.state.needsStateSelected) {
|
||
|
||
Taro.showLoading({
|
||
title: '发布中'
|
||
})
|
||
this.setState({ isPublishAndNew: true }, () => {
|
||
this.uploadMyNeedsApi({})
|
||
})
|
||
} else {
|
||
Taro.showToast({
|
||
title: '请填写完表格',
|
||
icon: 'none',
|
||
duration: 1500
|
||
})
|
||
}
|
||
|
||
|
||
}
|
||
goToMyNeedsPage() {
|
||
Taro.switchTab({
|
||
url: '/pages/myNeeds/myNeeds'
|
||
})
|
||
}
|
||
getDataFromChild(value) {
|
||
console.log('从子组件传回来的值', value)
|
||
this.setState({ industryTypeSelected: value })
|
||
}
|
||
|
||
|
||
componentDidMount() {
|
||
// console.log('this.$router.params.sdId',this.$router.params.sdId)
|
||
// Taro.showLoading({title:'加载中'})
|
||
// this.getSupplyDemandInfo()
|
||
// 如果路由参数为1 就默认显示 效果图，反之 显示业主需求
|
||
const isRenderingPic = this.$router.params.id
|
||
console.log(parseInt(isRenderingPic))
|
||
if (parseInt(isRenderingPic)) {
|
||
this.setState({ needsTypeSelected: { name: '效果图', id: '5' } })
|
||
}
|
||
}
|
||
componentWillReceiveProps(nextProps) {
|
||
console.log(this.props, nextProps)
|
||
}
|
||
|
||
componentWillUnmount() { }
|
||
|
||
componentDidShow() {
|
||
if (!Taro.getStorageSync('userInfo').user_id) {
|
||
LoginService()
|
||
return
|
||
}
|
||
}
|
||
|
||
componentDidHide() { }
|
||
|
||
render() {
|
||
return (
|
||
<View className='supply-demand'>
|
||
|
||
{/* 行业分类 */}
|
||
<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.needsTypeHandler.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='border-box'>
|
||
<Text className='require'>*</Text>
|
||
<AtInput
|
||
name='value'
|
||
title='需求标题：'
|
||
type='text'
|
||
value={this.state.title}
|
||
border={false}
|
||
onChange={this.titleChange.bind(this)}
|
||
|
||
/>
|
||
</View>
|
||
<View className='input-box'>
|
||
<Text className='require'>*</Text>
|
||
<AtInput
|
||
name='value'
|
||
title='联系人：'
|
||
type='text'
|
||
value={this.state.contactName}
|
||
border={false}
|
||
onChange={this.contactNameChange.bind(this)}
|
||
/>
|
||
</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='140'
|
||
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='140'
|
||
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.needsState} onChange={this.needsStateHandler}>
|
||
<View className='picker'>
|
||
<View className='title-box'>
|
||
<Text className='title'> <Text className='require'>*</Text>状态:</Text> <Text className='selected'>{this.state.needsStateSelected.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 className='button-green' size='mini' >发布并新增</Button>
|
||
</View>
|
||
<View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
|
||
<Button className='button-green' size='mini' >我的需求</Button>
|
||
</View>
|
||
</View>
|
||
<CopyrightComponent></CopyrightComponent>
|
||
|
||
|
||
</View>
|
||
)
|
||
}
|
||
}
|
||
|
||
export default MyNeedsPublish
|