mqzheng/cf-wx-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

联动组件化

Browse Source
This commit is contained in:
郑茂强 2019-01-04 17:33:38 +08:00
parent 8d81766dec
commit ecab2bd5a8
16 changed files with 1864 additions and 121 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/app.js
View File

@ -32,6 +32,9 @@ class App extends Component {
'pages/supplyDemandView/supplyDemandView',// 查看单个供求页面
'pages/grabOrderPage/grabOrderPage',// 抢单页面
'pages/myNeeds/myNeeds',// 我的需求页面
'pages/myNeedsView/myNeedsView',// 单个需求查看页面
'pages/myNeedsEdit/myNeedsEdit',// 单个需求编辑页面
'pages/myNeedsPublish/myNeedsPublish',// 需求发布
// 'pages/shopDescription/shopDescription',
],
window: {

210
src/component/interaction/interaction.js Normal file
View File

@ -0,0 +1,210 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtTabBar, Picker, AtButton } from 'taro-ui'
import URL from '../../serviceAPI.config'
import './interaction.scss'
class Interaction extends Component {
config = {
navigationBarTitleText: 'bottomNav'
}
constructor() {
super(...arguments);
this.state = {
///---行业分类 开始
objectMultiArray: [],
multiIndex: [0, 0],
formatInWindow: [],
///---行业分类 结束
}
}
// 第一种formate 用于底部弹层滚动时的数据
formatIndustryType(data) {
const newIndustryType = []
for (let outter of data) {
let outterObject = { name: outter.class_name, id: outter.class_id, child: [] }
if (outter.child.length) {
for (let inner of outter.child) {
outterObject.child.push({ name: inner.class_name, id: inner.class_id })
}
} else {
outterObject.child.push({ name: '', id: '' })
}
newIndustryType.push(outterObject)
}
this.setState({ formatInWindow: newIndustryType })
// console.log('newIndustryType1', newIndustryType)
}
//第二种format 用于底部弹层的初始化数据
formatIndustryTypei(data) {
const firstArray = []
const secondArray = []
for (let outter of data) {
firstArray.push({ name: outter.class_name, id: outter.class_id })
if (outter.child.length) {
for (let inner of outter.child) {
secondArray.push({ name: inner.class_name, id: inner.class_id })
}
}
}
this.setState({ objectMultiArray: [firstArray, secondArray] }, () => {
// console.log('newIndustryType2', this.state.objectMultiArray)
})
}
//--------------------开始-行业分类picker
bindMultiPickerChange(e) {
//判断如果formatInWindow 的子类为空 那就取父类， 反之取子类
let industryTypeSelected
if (this.state.formatInWindow[e.detail.value[0]].child[e.detail.value[1]].id === '') {
industryTypeSelected = this.state.formatInWindow[e.detail.value[0]]
} else {
industryTypeSelected = this.state.formatInWindow[e.detail.value[0]].child[e.detail.value[1]]
}
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setState({
multiIndex: e.detail.value,
},()=>{
this.passDataToParent(industryTypeSelected)
})
}
bindMulPickerColChge(e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value)
const data = {
objectMultiArray: this.state.objectMultiArray,
multiIndex: this.state.multiIndex
}
data.multiIndex[e.detail.column] = e.detail.value
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.objectMultiArray[1] = this.state.formatInWindow[0].child
break
case 1:
data.objectMultiArray[1] = this.state.formatInWindow[1].child
break
case 2:
data.objectMultiArray[1] = this.state.formatInWindow[2].child
break
case 3:
data.objectMultiArray[1] = this.state.formatInWindow[3].child
break
case 4:
data.objectMultiArray[1] = this.state.formatInWindow[4].child
break
case 5:
data.objectMultiArray[1] = [{ name: '' }]
break
case 6:
data.objectMultiArray[1] = this.state.formatInWindow[6].child
break
case 7:
data.objectMultiArray[1] = this.state.formatInWindow[7].child
break
case 8:
data.objectMultiArray[1] = this.state.formatInWindow[8].child
break
case 9:
data.objectMultiArray[1] = this.state.formatInWindow[9].child
break
case 10:
data.objectMultiArray[1] = this.state.formatInWindow[10].child
break
case 11:
data.objectMultiArray[1] = this.state.formatInWindow[11].child
break
case 12:
data.objectMultiArray[1] = this.state.formatInWindow[12].child
break
case 13:
data.objectMultiArray[1] = this.state.formatInWindow[13].child
break
case 14:
data.objectMultiArray[1] = this.state.formatInWindow[14].child
break
}
data.multiIndex[1] = 0
data.multiIndex[2] = 0
break
}
console.log(data.multiIndex)
this.setState({
multiIndex: data.multiIndex,
objectMultiArray: data.objectMultiArray
})
}
//--------------------结束-行业分类picker
passDataToParent(industryTypeSelected){
this.props.onPassDataToChild(industryTypeSelected)
}
componentWillMount() {
}
componentDidMount() {
}
// 当然父组件有新的props的 会从新渲染组件
componentWillReceiveProps(nextProps) {
if (nextProps.data.length) {
this.formatIndustryType(nextProps.data)
this.formatIndustryTypei(nextProps.data)
}
}
clickHandler() {
this.props.onFunction(33)
}
componentWillUnmount() { }
componentDidShow() { }
componentDidHide() { }
render() {
console.log('我拿到props', this.props)
console.log('objectMultiArray', this.state.objectMultiArray)
console.log('objectMultiwindow', this.state.formatInWindow)
return (
<View class='page-section'>
<Picker
rangeKey='name'
mode='multiSelector'
onChange={this.bindMultiPickerChange.bind(this)}
onColumnchange={this.bindMulPickerColChge.bind(this)}
value={this.state.multiIndex}
range={this.state.objectMultiArray}
>
<View class='picker type'>
<View className='title-box'>
<Text className='title'>行业分类：</Text>
{this.state.objectMultiArray.length ? <Text> <Text className='first-col'> {this.state.objectMultiArray[0][this.state.multiIndex[0]].name}</Text>
<Text className='second-col'> {this.state.objectMultiArray[1][this.state.multiIndex[1]].name}</Text></Text> : null}
</View>
</View>
</Picker>
</View>
)
}
}
export default Interaction

41
src/component/interaction/interaction.scss Normal file
View File

@ -0,0 +1,41 @@
.page-section{
border-bottom: 1Px solid #d6e4ef;
.picker{
// padding: 24rpx 0;
.selected{
font-weight: normal;
display: inline-block;
margin-left: 20%;
font-size: 32rpx
}
.date{
margin-left: 0%
}
.title-box{
line-height:100rpx;
font-weight: bold;
.title{
//color: #333;
line-height:100rpx;
margin-right:16rpx;
width:172rpx;
font-size:32rpx;
vertical-align:middle;
text-align:left;
font-weight: bold;
}
.first-col{
font-weight: normal;
margin-left: 10%
}
.second-col{
font-weight: normal;
display: inline-block;
margin-left: 10%
}
}
}
}

2
src/pages/index/index.js
View File

@ -35,7 +35,7 @@ class Index extends Component {
// url: '/pages/mySupplyDemand/mySupplyDemand'
// url:'/pages/grabOrderPage/grabOrderPage'
url:'/pages/home/home'
//url:'/pages/myNeeds/myNeeds'
// url:'/pages/myNeeds/myNeeds'
})
}

38
src/pages/myDemandSupplyEdit/myDemandSupplyEdit.js
View File

@ -19,7 +19,7 @@ class MyDemandSupplyEdit extends Component {
constructor() {
super(...arguments)
this.state = {
demandingSupplyCate: [{ name: '需求', id: '1' }, { name: '供求', id: '2' }, { name: '人才', id: '3' }], //供求类型选择,
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' },// 当前状态
@ -30,11 +30,9 @@ class MyDemandSupplyEdit extends Component {
content: '',
pickerImageUrl: [], // 上传的图片
ImagesInfo: [],// 后台传回来的图片信息
isUploadImageSuccess: false,
uploadImageTextTip: '',
isFormCompleted: false,
isUploadDemSupSuccess: false,
uploadDemSupTextTip: '',
}
}
@ -67,7 +65,7 @@ class MyDemandSupplyEdit extends Component {
content: res.data.sdInfo.sd_desc,
demandingSupplyStateSelected: selectedState,
pickerImageUrl: imageFile,
ImagesInfo:res.data.sdInfo.file_path,
ImagesInfo: res.data.sdInfo.file_path,
})
Taro.hideLoading()
}
@ -133,7 +131,7 @@ class MyDemandSupplyEdit extends Component {
data: {
action: 2,
sdInfo: JSON.stringify({
sd_id:this.$router.params.sdId,
sd_id: this.$router.params.sdId,
sd_type: sd_type,
sd_title: sd_title,
user_name: user_name,
@ -157,7 +155,7 @@ class MyDemandSupplyEdit extends Component {
title: '上传成功',
icon: 'success',
duration: 1500
}).then(()=>{
}).then(() => {
setTimeout(() => {
Taro.navigateTo({
url: '/pages/mySupplyDemand/mySupplyDemand'
@ -212,8 +210,8 @@ class MyDemandSupplyEdit extends Component {
this.state.ImagesInfo.splice(index, 1) // 删除显示的图片
this.state.pickerImageUrl.splice(index, 1)// 删除图片param
that.setState({
pockerImageUrl:this.state.pickerImageUrl,
ImagesInfo:this.state.ImagesInfo,
pockerImageUrl: this.state.pickerImageUrl,
ImagesInfo: this.state.ImagesInfo,
})
Taro.showToast({
title: '删除成功',
@ -259,7 +257,7 @@ class MyDemandSupplyEdit extends Component {
componentDidMount() {
// console.log('this.$router.params.sdId',this.$router.params.sdId)
Taro.showLoading({title:'加载中'})
Taro.showLoading({ title: '加载中' })
this.getSupplyDemandInfo()
}
componentWillReceiveProps(nextProps) {
@ -273,22 +271,10 @@ class MyDemandSupplyEdit extends Component {
componentDidHide() { }
render() {
const imageUploadSuccessElement = <AtToast
isOpened={this.state.isUploadImageSuccess}
text={this.state.uploadImageTextTip}
duration={2000}
></AtToast>
const demandSupplyUploadSuccessElement = <AtToast
isOpened={this.state.isUploadDemSupSuccess}
text={this.state.uploadDemSupTextTip}
duration={2000}
></AtToast>
return (
<View className='supply-demand'>
{/* 图片上传模态框 */}
{imageUploadSuccessElement}
{/* 商品发布模态框 */}
{demandSupplyUploadSuccessElement}
<View className='page-section'>
<View>
@ -333,7 +319,7 @@ class MyDemandSupplyEdit extends Component {
</View>
<View className='demanding-box'>
<View className='title-box'>
<Text className='title'><Text className='require'>*</Text>联系地址:</Text>
<Text className='title'><Text className='require'></Text>联系地址:</Text>
</View>
<AtTextarea

5
src/pages/myDemandSupplyEdit/myDemandSupplyEdit.scss
View File

@ -78,3 +78,8 @@ $themeColor:#FF7142;
line-height:100rpx;
}
.demanding-box{
.title-box{
line-height:100rpx;
}
}

367
src/pages/myNeeds/myNeeds.js
View File

@ -4,6 +4,7 @@ import { View, Text, Button } from '@tarojs/components'
import { AtInput, AtButton, Picker, AtIcon, AtModal, AtModalHeader, AtModalContent, AtModalAction, AtPagination } from 'taro-ui'
import URL from '../../serviceAPI.config'
import Interaction from '../../component/interaction/interaction'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
@ -21,6 +22,7 @@ class MyNeeds extends Component {
startDateSel: '',
endDateSel: '',
industryType: '',
industryTypeSelected: { name: '', id: '' },
needsType: [{ name: '业主需求', id: '4' }, { name: '效果图', id: '5' }],
needsTypeSelected: { name: '业主需求', id: '4' },
needsState: [
@ -30,24 +32,47 @@ class MyNeeds extends Component {
{ name: '设计中', id: '2' },
{ name: '已设计', id: '3' }],
needsStateSelected: { name: '全部', id: '' },
pageCount: 10,// 列表数量
allNeedsList: [],// 我的需求列表
totalNeeds: 0,// 我的需求数量
currentPage: 1,
///---行业分类 开始
objectMultiArray: [],
multiIndex: [0, 0],
formatInWindow: [],
///---行业分类 结束
needsItem: '',// 确认框提示时 使用的供求名
isDeleteModal:false,
IndustryTypeList:[]
}
}
//请求我的需求列表 api GetMyNeedsList
getGetMyNeedsList({ curr_page = 1, page_count = 10, sd_type = 4 }) {
getMyNeedsList({ curr_page = 1,
page_count = 10,
sd_type = 4,
sd_title = '',
update_dateL = '',
update_dateU = '',
class_id = '',
state = ""
}) {
Taro.request({
url: URL.GetMyNeedsList,
method: 'POST',
dataType: 'json',
data: {
param: JSON.stringify({
curr_page: curr_page,
page_count: page_count,
sd_type: sd_type
sd_type: sd_type,
sd_title: sd_title,
update_dateL: update_dateL,
update_dateU: update_dateU,
class_id: class_id,
state: state
})
},
header: {
@ -69,37 +94,119 @@ class MyNeeds extends Component {
})
}
// 行业分类筛选列表GetIndustryTypeList
getGetMyNeedsList() {
//删除我的需求 api DeleteMyNeeds
deleteMyNeeds({ demandId = 10 }) {
Taro.request({
url: URL.GetIndustryTypeList,
method: 'GET',
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
})
}
})
}
// 行业分类筛选列表GetIndustryTypeList
getIndustryTypeList() {
Taro.request({
url: URL.GetIndustryTypeList,
method: 'GET',
dataType: 'json',
header: {
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
'content-type': 'application/x-www-form-urlencoded',
'X-Requested-With': 'XMLHttpRequest'
}
}).then(res => {
console.log('行业分类列表', res)
// this.setState({
// allNeedsList: res.data.supplys || [],
// totalNeeds: Number(res.data.count)
// })
this.setState({IndustryTypeList:res.data.data})
this.formatIndustryType(res.data.data)
this.formatIndustryTypei(res.data.data)
})}
}).catch(err => {
console.log('行业分类列表获取失败', err)
})
}
// 第一种formate 用于底部弹层滚动时的数据
formatIndustryType(data) {
const newIndustryType = []
for (let outter of data) {
let outterObject = { name: outter.class_name, id: outter.class_id, child: [] }
if (outter.child.length) {
for (let inner of outter.child) {
outterObject.child.push({ name: inner.class_name, id: inner.class_id })
}
} else {
outterObject.child.push({ name: '', id: '' })
}
newIndustryType.push(outterObject)
}
this.setState({ formatInWindow: newIndustryType })
console.log('newIndustryType1', newIndustryType)
}
//第二种format 用于底部弹层的初始化数据
formatIndustryTypei(data) {
const firstArray = []
const secondArray = []
for (let outter of data) {
firstArray.push({ name: outter.class_name, id: outter.class_id })
if (outter.child.length) {
for (let inner of outter.child) {
secondArray.push({ name: inner.class_name, id: inner.class_id })
}
}
}
this.setState({ objectMultiArray: [firstArray, secondArray] }, () => {
console.log('newIndustryType2', this.state.objectMultiArray)
})
}
// 搜索按钮
onSearchButtonHandler() {
Taro.showLoading({ title: '加载中' }).then(() => {
setTimeout(() => {
this.searchDemandSupply({})
this.getMyNeedsList({
curr_page: this.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
})
this.setState({ currentPage: 1 })
}, 1000);
@ -107,9 +214,9 @@ class MyNeeds extends Component {
}
// 新增我的需求
addDemandSupply() {
addNeeds() {
Taro.navigateTo({
url: '/pages/supplyDemandPublish/supplyDemandPublish'
url: '/pages/myNeedsPublish/myNeedsPublish'
})
}
titleChange(event) {
@ -128,14 +235,6 @@ class MyNeeds extends Component {
})
}
// needsStateChange = e => {
// this.setState({
// needsStatesSelected: this.state.needsState[e.detail.value]
// })
// }
needsTypeChange = e => {
this.setState({
needsTypeSelected: this.state.needsType[e.detail.value]
@ -146,10 +245,136 @@ class MyNeeds extends Component {
needsStateSelected: this.state.needsState[e.detail.value]
})
}
goToMyNeedsViewPage() {
Taro.navigateTo({
url: '/pages/myNeedsView/myNeedsView'
})
}
goToMyNeedsEditPage() {
Taro.navigateTo({
url: '/pages/myNeedsEdit/myNeedsEdit'
})
}
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 })
}
// 翻页导航
paginationNav(type) {
console.log(type.current)
this.setState({ currentPage: type.current, }, () => {
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.industryType,
state: this.state.needsStateSelected.id
})
})
}
//--------------------开始-行业分类picker
bindMultiPickerChange(e) {
//判断如果formatInWindow 的子类为空 那就取父类， 反之取子类
let industryTypeSelected
if( this.state.formatInWindow[e.detail.value[0]].child[e.detail.value[1]].id===''){
industryTypeSelected = this.state.formatInWindow[e.detail.value[0]]
}else{
industryTypeSelected = this.state.formatInWindow[e.detail.value[0]].child[e.detail.value[1]]
}
console.log('picker发送选择改变，携带值为', e.detail.value)
this.setState({
multiIndex: e.detail.value, industryTypeSelected: industryTypeSelected
})
}
bindMulPickerColChge(e) {
console.log('修改的列为', e.detail.column, '，值为', e.detail.value)
const data = {
objectMultiArray: this.state.objectMultiArray,
multiIndex: this.state.multiIndex
}
data.multiIndex[e.detail.column] = e.detail.value
switch (e.detail.column) {
case 0:
switch (data.multiIndex[0]) {
case 0:
data.objectMultiArray[1] = this.state.formatInWindow[0].child
break
case 1:
data.objectMultiArray[1] = this.state.formatInWindow[1].child
break
case 2:
data.objectMultiArray[1] = this.state.formatInWindow[2].child
break
case 3:
data.objectMultiArray[1] = this.state.formatInWindow[3].child
break
case 4:
data.objectMultiArray[1] = this.state.formatInWindow[4].child
break
case 5:
data.objectMultiArray[1] = [{ name: '' }]
break
case 6:
data.objectMultiArray[1] = this.state.formatInWindow[6].child
break
case 7:
data.objectMultiArray[1] = this.state.formatInWindow[7].child
break
case 8:
data.objectMultiArray[1] = this.state.formatInWindow[8].child
break
case 9:
data.objectMultiArray[1] = this.state.formatInWindow[9].child
break
case 10:
data.objectMultiArray[1] = this.state.formatInWindow[10].child
break
case 11:
data.objectMultiArray[1] = this.state.formatInWindow[11].child
break
case 12:
data.objectMultiArray[1] = this.state.formatInWindow[12].child
break
case 13:
data.objectMultiArray[1] = this.state.formatInWindow[13].child
break
case 14:
data.objectMultiArray[1] = this.state.formatInWindow[14].child
break
}
data.multiIndex[1] = 0
data.multiIndex[2] = 0
break
}
console.log(data.multiIndex)
this.setState({
multiIndex: data.multiIndex,
objectMultiArray: data.objectMultiArray
})
}
//--------------------结束-行业分类picker
componentDidMount() {
this.getGetMyNeedsList({})
this.getGetMyNeedsList()
this.getMyNeedsList({})
this.getIndustryTypeList()
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
@ -161,42 +386,63 @@ class MyNeeds extends Component {
componentDidHide() { }
getDataFromChild(value){
console.log('从子组件传回来的值',value)
}
render() {
const myNeedsListArrayElement = this.allNeedsList.map((item, index) => {
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.sd_type}</Text>
<Text className='title'>行业分类：</Text>
<Text className='content'>{item.sd_type}</Text>
</View>
<View className='needs-title box'>
<Text classname='title'>需求标题：</Text>
<Text classname='content'>{item.sd_title}</Text>
<Text className='title'>需求标题：</Text>
<Text className='content'>{item.sd_title}</Text>
</View>
<View className='needs-state box'>
<Text classname='title'>需求状态：</Text>
<Text classname='content'>{item.state}</Text>
<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>
<Text className='title'>更新时间：</Text>
<Text className='content'>{item.update_date}</Text>
</View>
{item.state === '1' ? <View className='info-button-box'>
<View className='button' onClick={this.goToMyNeedsViewPage.bind(this, item.sd_id)}>
<AtButton type='primary' size='small'>查看</AtButton>
</View>
<View className='button' onClick={this.goToMyNeedsEditPage.bind(this, item.sd_id)}>
<AtButton type='primary' size='small'>编辑</AtButton>
</View>
<View className='button-a' onClick={this.deleteButton.bind(this, item)}>
<AtButton type='primary' size='small'>删除</AtButton>
</View>
</View > :
<View className='info-button-box'>
<View className='button' onClick={this.goToSupplyDemandPage.bind(this, item.sd_id)}>
<View className='button' onClick={this.goToMyNeedsViewPage.bind(this, item.sd_id)}>
<AtButton type='primary' size='small'>查看</AtButton>
</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='需求标题：'
@ -212,7 +458,7 @@ class MyNeeds extends Component {
<Picker mode='date' className='picker-container' onChange={this.onStartDateChange}>
<View className='picker'>
<View className='title-box'>
<Text className='title'>开始日期:</Text> <Text className='selected'>{this.state.startDateSel}</Text>
开始日期:<Text className='selected date'>{this.state.startDateSel}</Text>
</View>
</View>
@ -220,7 +466,7 @@ class MyNeeds extends Component {
<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='selected'>{this.state.endDateSel}</Text>
结束日期: <Text className='selected date'>{this.state.endDateSel}</Text>
</View>
</View>
</Picker>
@ -228,18 +474,28 @@ class MyNeeds extends Component {
</View>
</View>
{/* 行业分类 */}
<View className='page-section'>
<View>
<Picker mode='selector' rangeKey='name' range={this.state.demandSupplyCate} onChange={this.demSupplyCateChange.bind(this)}>
<View className='picker'>
{/* 行业分类开始 */}
<Interaction data={this.state.IndustryTypeList} onPassDataToChild={this.getDataFromChild.bind(this)}></Interaction>
{/* <View class='page-section'>
<Picker
rangeKey='name'
mode='multiSelector'
onChange={this.bindMultiPickerChange.bind(this)}
onColumnchange={this.bindMulPickerColChge.bind(this)}
value={this.state.multiIndex}
range={this.state.objectMultiArray}
>
<View class='picker type'>
<View className='title-box'>
<Text className='title'>行业分类:</Text> <Text className='selected'>{this.state.demandSupplyCateSelected.name}</Text>
<Text className='title'>行业分类：</Text>
{this.state.objectMultiArray.length? <Text> <Text className='first-col'> {this.state.objectMultiArray[0][this.state.multiIndex[0]].name}</Text>
<Text className='second-col'> {this.state.objectMultiArray[1][this.state.multiIndex[1]].name}</Text></Text>:null}
</View>
</View>
</Picker>
</View>
</View>
</View> */}
{/* 行业分类结束 */}
{/* 需求类型 */}
<View className='page-section'>
<View>
@ -275,7 +531,7 @@ class MyNeeds extends Component {
<AtIcon value='search' size='12' color='white'></AtIcon>
搜索</AtButton>
</View>
<View className='button' onClick={this.addDemandSupply.bind(this)}>
<View className='button' onClick={this.addNeeds.bind(this)}>
<AtButton type='primary' className='button-a' size='small'>
<AtIcon value='add' size='12' color='white'></AtIcon>
新增</AtButton>
@ -285,13 +541,15 @@ class MyNeeds extends Component {
共<Text className='count'>{this.state.totalNeeds}</Text> 条记录
</View>
{/* 我的需求信息 */}
<View className='info-box'>
{this.state.totalNeeds != "0" ? <View className='info-box'>
{myNeedsListArrayElement}
</View>
</View> : <View className='nomore' >
没有更多了....
</View >}
<View className='pagination-box'>
<AtPagination
total={this.state.totalDemandSupply}
total={this.state.totalNeeds}
pageSize={10}
current={this.state.currentPage}
onPageChange={this.state.paginationNav.bind(this)}
@ -299,6 +557,7 @@ class MyNeeds extends Component {
</AtPagination>
</View>
<CopyrightComponent name='Wallace'></CopyrightComponent>
</View>
)

50
src/pages/myNeeds/myNeeds.scss
View File

@ -16,8 +16,6 @@ $themeColor:#FF7142;
}
}
.at-input__container{
color:black;
font-weight: bold;
@ -31,11 +29,17 @@ $themeColor:#FF7142;
.picker{
// padding: 24rpx 0;
.selected{
font-weight: normal;
display: inline-block;
margin-left: 20%;
font-size: 32rpx
}
.date{
margin-left: 0%
}
.title-box{
line-height:100rpx;
font-weight: bold;
.title{
//color: #333;
line-height:100rpx;
@ -47,6 +51,16 @@ $themeColor:#FF7142;
font-weight: bold;
}
.first-col{
font-weight: normal;
margin-left: 10%
}
.second-col{
font-weight: normal;
display: inline-block;
margin-left: 10%
}
}
}
}
@ -87,30 +101,37 @@ $themeColor:#FF7142;
}
}
}
.title{
text-align: center;
font-size: 35px;
}
.pagination-box{
margin: 50px 0;
}
.info-box{
font-size: 28px;
.needs-box{
margin-top: 10px;
border: 1px solid #ddd;
margin-bottom: 8px;
box-shadow: 0 8px 8px #ddd;
padding: 10px;
.box{
margin-top: 5px;
font-size: 28px;
}
.needs-title{
.content{
color:#337ab7
}
}
.info-button-box{
margin: 20px 0 0 0;
border-top: 1px solid #ddd;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content:flex-end;
.button{
// flex:1;
text-align: right;
@ -120,8 +141,23 @@ $themeColor:#FF7142;
background-color:#FF9500;
border:1PX solid #FF9500;
}
}
.button-a{
// flex:1;
text-align: right;
margin:1% 1% 0;
.at-button--primary{
background-color:#d9534f;
border:1PX solid #d9534f;
}
}
}
}}
.nomore{
text-align: center;
font-size: 35px;
}

409
src/pages/myNeedsEdit/myNeedsEdit.js Normal file
View File

@ -0,0 +1,409 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtInput, AtImagePicker, AtTextarea, AtButton, Picker, AtToast } from 'taro-ui'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import URL from '../../serviceAPI.config'
import './myNeedsEdit.scss'
class MyNeedsEdit extends Component {
config = {
navigationBarTitleText: '需求编辑'
}
constructor() {
super(...arguments)
this.state = {
demandingSupplyCate: [{ name: '需求', id: '1' }, { name: '供求', id: '2' }, { name: '人才', id: '3' }], //供求类型选择,
demandingSupplyCateSelected: { 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: '',
contactNumber: '',
contactAddress: '',
content: '',
pickerImageUrl: [], // 上传的图片
ImagesInfo: [],// 后台传回来的图片信息
isFormCompleted: false,
}
}
//获取商品信息api GetProductInfo
getSupplyDemandInfo() {
Taro.request({
url: URL.GetSupplyDemandInfo,
method: 'GET',
dataType: 'json',
data: {
sdID: this.$router.params.sdId,
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(res => {
console.log('供求详情获取成功', res)
const selectedType = this.state.demandingSupplyCate.filter(item => item.id == res.data.sdInfo.sd_type)[0]
const selectedState = this.state.needsState.filter(item => item.id == res.data.sdInfo.state)[0]
const imageFile = res.data.sdInfo.file_path.map(item => { return { url: URL.Base + item.file_path } })
this.setState({
demandingSupplyCateSelected: selectedType,
title: res.data.sdInfo.sd_title,
contactName: res.data.sdInfo.user_name,
contactNumber: res.data.sdInfo.user_phone,
contactAddress: res.data.sdInfo.user_address,
content: res.data.sdInfo.sd_desc,
needsStateSelected: selectedState,
pickerImageUrl: imageFile,
ImagesInfo:res.data.sdInfo.file_path,
})
Taro.hideLoading()
}
)
.catch(error => {
console.log('供求详情获取失败', error)
})
}
// 上传供求api
uploadSupplyDemand() {
if (this.state.demandingSupplyCateSelected && this.state.title && this.state.contactName && this.state.contactNumber && this.state.content && this.state.needsStateSelected) {
this.uploadDemSup({})
} else {
this.setState({ uploadDemSupTextTip: '请填写完表格', isUploadDemSupSuccess: true }, () => {
setTimeout(() => {
this.setState({ isUploadDemSupSuccess: false })
}, 2000)
})
}
// Taro.request({
// url: URL.UploadSupplyDemand,
// method: 'POST',
// dataType: 'json',
// data: {
// action: 1,
// sdInfo: JSON.stringify({ "sd_type": "2", "sd_title": "534523", "user_name": "杨夕兵", "user_phone": "18950295811", "user_address": "2342", "sd_desc": "42342", "state": "1", "file_path": [{ "file_name": "bg3.jpg", "file_size": "212678", "file_path": "Uploads/supply/user_27/201812/38bf91f30d215bbefb2686f2401217a6.jpg", "thumb_path": "Uploads/supply/user_27/201812/thumb/38bf91f30d215bbefb2686f2401217a6_200X200.jpg" }] })
// },
// header: {
// 'content-type': 'application/x-www-form-urlencoded',
// }
// })
// .then(res => {
// console.log('上传供求', res)
// }
// )
}
// 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.needsStateSelected.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: 2,
sdInfo: JSON.stringify({
sd_id:this.$router.params.sdId,
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)
if (res.data.err_msg === 'success') {
Taro.showToast({
title: '上传成功',
icon: 'success',
duration: 1500
}).then(()=>{
setTimeout(() => {
Taro.navigateTo({
url: '/pages/mySupplyDemand/mySupplyDemand'
})
}, 1500);
})
} else {
Taro.showToast({
title: res.data.err_msg,
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',
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
})
}
}
// 修改供求类型
demandingSupplyCate = e => {
this.setState({
demandingSupplyCateSelected: this.state.demandingSupplyCate[e.detail.value]
})
}
// 修改供求状态
demSupplyStateChange = e => {
this.setState({
needsStateSelected: this.state.needsState[e.detail.value]
})
}
//改标题
titleChange(event) {
this.setState({ title: event })
}
contactNameChange(event) {
this.setState({ contactName: event })
}
contactNumberChange(event) {
this.setState({ contactNumber: event })
}
contactAddressChange(event) {
this.setState({ contactAddress: event.target.value })
}
contentChange(event) {
this.setState({ content: event.target.value })
}
goToMyDemSupPage() {
Taro.navigateTo({
url: '/pages/mySupplyDemand/mySupplyDemand'
})
}
componentDidMount() {
// console.log('this.$router.params.sdId',this.$router.params.sdId)
// Taro.showLoading({title:'加载中'})
// this.getSupplyDemandInfo()
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
}
componentWillUnmount() { }
componentDidShow() { }
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='page-section'>
<View>
<Picker mode='selector' rangeKey='name' range={this.state.needsType} 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.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}
onChange={this.titleChange.bind(this)}
/>
</View>
<View className='input-box'>
<Text className='require'>*</Text>
<AtInput
name='value'
title='联系人：'
type='text'
value={this.state.contactName}
onChange={this.contactNameChange.bind(this)}
/>
</View>
<View className='input-box'>
<Text className='require'>*</Text>
<AtInput
name='value'
title='联系电话：'
type='number'
value={this.state.contactNumber}
onChange={this.contactNumberChange.bind(this)}
/>
</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.needsState} onChange={this.demSupplyStateChange}>
<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.uploadSupplyDemand.bind(this)}>
<AtButton type='primary' size='small'>保存</AtButton>
</View>
{/* <View className='button'>
<AtButton type='primary' className='button-a' size='small'>保存并新增</AtButton>
</View> */}
<View className='button' onClick={this.goToMyDemSupPage.bind(this)}>
<AtButton type='primary' className='button-a' size='small'>我的需求</AtButton>
</View>
</View>
<CopyrightComponent></CopyrightComponent>
</View>
)
}
}
export default MyNeedsEdit

85
src/pages/myNeedsEdit/myNeedsEdit.scss Normal file
View File

@ -0,0 +1,85 @@
$themeColor:#FF7142;
.supply-demand{
padding: 10px 20px;
.border-box{
border-bottom: 1Px solid #d6e4ef;
display: flex
}
.at-input__container{
color:black;
font-weight: bold;
.at-input__input{
font-weight: normal
}
}
.img-box{
margin-top:10Px;
.img-container{
border: 1Px solid #d6e4ef;
border-radius:8rpx;
}
}
.button-box{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
margin: 40px 0;
padding: 0 120px;
.button{
flex:1;
text-align: center;
.at-button--primary{
background-color:$themeColor,;
border:1PX solid $themeColor,;
}
.button-a{
background-color:#5cb85c;
border:1PX solid #5cb85c;
}
}
}
}
.title-box{
.title{
//color: #333;
margin-right:16rpx;
width:172rpx;
font-size:32rpx;
line-height:1.5;
vertical-align:middle;
text-align:left;
font-weight: bold;
}
}
.warn{
font-size: 25px;
color:red;
}
.page-section{
border-bottom: 1Px solid #d6e4ef;
}
.selected{
display: inline-block;
margin-left: 20%;
font-size: 32rpx
}
.input-box{
border-bottom: 1Px solid #d6e4ef;
display: flex;
}
.require{
color:red;
line-height:100rpx;
}
.demanding-box{
.title-box{
line-height:100rpx;
}
}

409
src/pages/myNeedsPublish/myNeedsPublish.js Normal file
View File

@ -0,0 +1,409 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Text } from '@tarojs/components'
import { AtInput, AtImagePicker, AtTextarea, AtButton, Picker, AtToast } from 'taro-ui'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import URL from '../../serviceAPI.config'
import './myNeedsPublish.scss'
class MyNeedsPublish extends Component {
config = {
navigationBarTitleText: '需求发布'
}
constructor() {
super(...arguments)
this.state = {
demandingSupplyCate: [{ name: '需求', id: '1' }, { name: '供求', id: '2' }, { name: '人才', id: '3' }], //供求类型选择,
demandingSupplyCateSelected: { 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: '',
contactNumber: '',
contactAddress: '',
content: '',
pickerImageUrl: [], // 上传的图片
ImagesInfo: [],// 后台传回来的图片信息
isFormCompleted: false,
}
}
//获取商品信息api GetProductInfo
getSupplyDemandInfo() {
Taro.request({
url: URL.GetSupplyDemandInfo,
method: 'GET',
dataType: 'json',
data: {
sdID: this.$router.params.sdId,
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(res => {
console.log('供求详情获取成功', res)
const selectedType = this.state.demandingSupplyCate.filter(item => item.id == res.data.sdInfo.sd_type)[0]
const selectedState = this.state.needsState.filter(item => item.id == res.data.sdInfo.state)[0]
const imageFile = res.data.sdInfo.file_path.map(item => { return { url: URL.Base + item.file_path } })
this.setState({
demandingSupplyCateSelected: selectedType,
title: res.data.sdInfo.sd_title,
contactName: res.data.sdInfo.user_name,
contactNumber: res.data.sdInfo.user_phone,
contactAddress: res.data.sdInfo.user_address,
content: res.data.sdInfo.sd_desc,
needsStateSelected: selectedState,
pickerImageUrl: imageFile,
ImagesInfo:res.data.sdInfo.file_path,
})
Taro.hideLoading()
}
)
.catch(error => {
console.log('供求详情获取失败', error)
})
}
// 上传供求api
uploadSupplyDemand() {
if (this.state.demandingSupplyCateSelected && this.state.title && this.state.contactName && this.state.contactNumber && this.state.content && this.state.needsStateSelected) {
this.uploadDemSup({})
} else {
this.setState({ uploadDemSupTextTip: '请填写完表格', isUploadDemSupSuccess: true }, () => {
setTimeout(() => {
this.setState({ isUploadDemSupSuccess: false })
}, 2000)
})
}
// Taro.request({
// url: URL.UploadSupplyDemand,
// method: 'POST',
// dataType: 'json',
// data: {
// action: 1,
// sdInfo: JSON.stringify({ "sd_type": "2", "sd_title": "534523", "user_name": "杨夕兵", "user_phone": "18950295811", "user_address": "2342", "sd_desc": "42342", "state": "1", "file_path": [{ "file_name": "bg3.jpg", "file_size": "212678", "file_path": "Uploads/supply/user_27/201812/38bf91f30d215bbefb2686f2401217a6.jpg", "thumb_path": "Uploads/supply/user_27/201812/thumb/38bf91f30d215bbefb2686f2401217a6_200X200.jpg" }] })
// },
// header: {
// 'content-type': 'application/x-www-form-urlencoded',
// }
// })
// .then(res => {
// console.log('上传供求', res)
// }
// )
}
// 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.needsStateSelected.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: 2,
sdInfo: JSON.stringify({
sd_id:this.$router.params.sdId,
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)
if (res.data.err_msg === 'success') {
Taro.showToast({
title: '上传成功',
icon: 'success',
duration: 1500
}).then(()=>{
setTimeout(() => {
Taro.navigateTo({
url: '/pages/mySupplyDemand/mySupplyDemand'
})
}, 1500);
})
} else {
Taro.showToast({
title: res.data.err_msg,
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',
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
})
}
}
// 修改供求类型
demandingSupplyCate = e => {
this.setState({
demandingSupplyCateSelected: this.state.demandingSupplyCate[e.detail.value]
})
}
// 修改供求状态
demSupplyStateChange = e => {
this.setState({
needsStateSelected: this.state.needsState[e.detail.value]
})
}
//改标题
titleChange(event) {
this.setState({ title: event })
}
contactNameChange(event) {
this.setState({ contactName: event })
}
contactNumberChange(event) {
this.setState({ contactNumber: event })
}
contactAddressChange(event) {
this.setState({ contactAddress: event.target.value })
}
contentChange(event) {
this.setState({ content: event.target.value })
}
goToMyDemSupPage() {
Taro.navigateTo({
url: '/pages/mySupplyDemand/mySupplyDemand'
})
}
componentDidMount() {
// console.log('this.$router.params.sdId',this.$router.params.sdId)
// Taro.showLoading({title:'加载中'})
// this.getSupplyDemandInfo()
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
}
componentWillUnmount() { }
componentDidShow() { }
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='page-section'>
<View>
<Picker mode='selector' rangeKey='name' range={this.state.needsType} 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.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}
onChange={this.titleChange.bind(this)}
/>
</View>
<View className='input-box'>
<Text className='require'>*</Text>
<AtInput
name='value'
title='联系人：'
type='text'
value={this.state.contactName}
onChange={this.contactNameChange.bind(this)}
/>
</View>
<View className='input-box'>
<Text className='require'>*</Text>
<AtInput
name='value'
title='联系电话：'
type='number'
value={this.state.contactNumber}
onChange={this.contactNumberChange.bind(this)}
/>
</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.needsState} onChange={this.demSupplyStateChange}>
<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.uploadSupplyDemand.bind(this)}>
<AtButton type='primary' size='small'>保存</AtButton>
</View>
{/* <View className='button'>
<AtButton type='primary' className='button-a' size='small'>保存并新增</AtButton>
</View> */}
<View className='button' onClick={this.goToMyDemSupPage.bind(this)}>
<AtButton type='primary' className='button-a' size='small'>我的需求</AtButton>
</View>
</View>
<CopyrightComponent></CopyrightComponent>
</View>
)
}
}
export default MyNeedsPublish

85
src/pages/myNeedsPublish/myNeedsPublish.scss Normal file
View File

@ -0,0 +1,85 @@
$themeColor:#FF7142;
.supply-demand{
padding: 10px 20px;
.border-box{
border-bottom: 1Px solid #d6e4ef;
display: flex
}
.at-input__container{
color:black;
font-weight: bold;
.at-input__input{
font-weight: normal
}
}
.img-box{
margin-top:10Px;
.img-container{
border: 1Px solid #d6e4ef;
border-radius:8rpx;
}
}
.button-box{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
margin: 40px 0;
padding: 0 120px;
.button{
flex:1;
text-align: center;
.at-button--primary{
background-color:$themeColor,;
border:1PX solid $themeColor,;
}
.button-a{
background-color:#5cb85c;
border:1PX solid #5cb85c;
}
}
}
}
.title-box{
.title{
//color: #333;
margin-right:16rpx;
width:172rpx;
font-size:32rpx;
line-height:1.5;
vertical-align:middle;
text-align:left;
font-weight: bold;
}
}
.warn{
font-size: 25px;
color:red;
}
.page-section{
border-bottom: 1Px solid #d6e4ef;
}
.selected{
display: inline-block;
margin-left: 20%;
font-size: 32rpx
}
.input-box{
border-bottom: 1Px solid #d6e4ef;
display: flex;
}
.require{
color:red;
line-height:100rpx;
}
.demanding-box{
.title-box{
line-height:100rpx;
}
}

172
src/pages/myNeedsView/myNeedsView.js Normal file
View File

@ -0,0 +1,172 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtButton, AtIcon } from 'taro-ui'
import URL from '../../serviceAPI.config'
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import './myNeedsView.scss'
class SupplyDemandView extends Component {
config = {
navigationBarTitleText: '供求查看'
}
constructor() {
super(...arguments)
this.state = {
demandingSupplyCate: [{name:'需求',id:'1'}, {name:'供求',id:'2'}, {name:'人才',id:'3'}], //供求类型选择
type: '',
title: '',
browsing: '',
contactName: '',
contactNumber: '',
address: '',
content: '',
images: [],
}
}
//获取商品信息api GetProductInfo
getSupplyDemandInfo() {
Taro.request({
url: URL.GetSupplyDemandInfo,
method: 'GET',
dataType: 'json',
data: {
sdID: this.$router.params.sdId,
},
header: {
'content-type': 'application/x-www-form-urlencoded',
'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
'X-Requested-With': 'XMLHttpRequest'
}
})
.then(res => {
console.log('供求详情获取成功', res)
const selectedType=this.state.demandingSupplyCate.filter(item=> item.id===res.data.sdInfo.sd_type)[0].name
this.setState({
type: selectedType,
title: res.data.sdInfo.sd_title,
browsing: res.data.sdInfo.browse_times,
contactName: res.data.sdInfo.user_name,
contactNumber: res.data.sdInfo.user_phone,
address: res.data.sdInfo.user_address,
content: res.data.sdInfo.sd_desc,
images: res.data.sdInfo.file_path,
})
Taro.hideLoading()
}
)
.catch(error => {
console.log('供求详情获取失败', error)
})
}
goToSDPublishPage() {
Taro.navigateTo({
url: '/pages/supplyDemandPublish/supplyDemandPublish',// 供求发布页面
})
}
goToSDEditPage() {
console.log('edit page')
// Taro.navigateTo({
// url: 'pages/supplyDemandPublish/supplyDemandPublish',// 供求发布页面
// })
}
goToMySDPage() {
Taro.navigateTo({
url: '/pages/mySupplyDemand/mySupplyDemand',//我的供求页面
})
}
deleteSD() {
console.log('删除供求')
}
componentDidMount() {
// Taro.showLoading({title:'加载中'})
// this.getSupplyDemandInfo()
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
}
componentWillUnmount() { }
componentDidShow() { }
componentDidHide() { }
render() {
return (
<View className='SupplyDemandItemView'>
<View className='type box'>
<Text className='title'>行业分类：</Text>
<Text className='content'>{this.state.type}</Text>
</View>
<View className='needed-title box'>
<Text className='title'>需求标题：</Text>
<Text className='content'>{this.state.title}</Text>
</View>
<View className='browsing-amount box'>
<Text className='title'>浏览量：</Text>
<Text className='content'>{this.state.browsing}</Text>
</View>
<View className='contact-name box'>
<Text className='title'>联系人：</Text>
<Text className='content'>{this.state.contactName}</Text>
</View>
<View className='phone-number box'>
<Text className='title'>联系电话：</Text>
<Text className='content'>{this.state.contactNumber}</Text>
</View>
<View className='address box'>
<Text className='title'>联系地址：</Text>
<Text className='content'>{this.state.address}</Text>
</View>
<View className='needed-content box'>
<Text className='title'>业主需求内容：</Text>
<Text className='content'>{this.state.content}</Text>
</View>
<View className='button-box'>
<View className='button' onClick={this.goToSDPublishPage.bind(this)}>
<AtButton type='primary' size='small'>
<AtIcon value='add' size='12' color='white'></AtIcon>
新增</AtButton>
</View>
<View className='button' onClick={this.goToMySDPage.bind(this)}>
<AtButton type='primary' className='button' size='small'>
<AtIcon value='' size='12' color='white'></AtIcon>
我的需求</AtButton>
</View>
<View className='button' onClick={this.goToSDEditPage.bind(this)}>
<AtButton type='primary' className='button' size='small'>
<AtIcon value='settings' size='12' color='white'></AtIcon>
修改</AtButton>
</View>
<View className='button' onClick={this.deleteSD.bind(this)}>
<AtButton type='primary' className='button-a' size='small'>
<AtIcon value='close' size='12' color='white'></AtIcon>
删除</AtButton>
</View>
</View>
<CopyrightComponent></CopyrightComponent>
</View>
)
}
}
export default SupplyDemandView

36
src/pages/myNeedsView/myNeedsView.scss Normal file
View File

@ -0,0 +1,36 @@
$themeColor:#FF7142;
.SupplyDemandItemView{
padding: 10px 20px;
font-size: 32rpx;
.box{
margin-top: 35px;
}
.title{
font-weight: bold
}
}
.button-box{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
margin: 40px 0;
padding: 0 20px;
.button{
flex:1;
text-align: center;
// margin:2%;
// justify-content:center;
.at-button--primary{
background-color:$themeColor;
border:1PX solid $themeColor;
}
.button-a{
background-color:#d9534f;
border:1PX solid #d9534f;
}
}
}

3
src/serviceAPI.config.js
View File

@ -51,7 +51,8 @@ const URL = {
GetProductInfo: LOCALURL + 'Goods-wxEditPhoneDeploy',// 获取单个商品信息
//我的需求列表
GetMyNeedsList:LOCALURL+'Supply-userDemandList',// 获取我的需求列表
GetIndustryTypeList:LOCALURL+'shop-getIndustryClass'// 获取行业分类筛选列表
GetIndustryTypeList:LOCALURL+'shop-getIndustryClass',// 获取行业分类筛选列表
DeleteMyNeeds:LOCALURL+'Supply-deleteUserDemand'// 删除我的需求
}

8
src/todo list.txt
View File

@ -19,10 +19,16 @@ todo list：
商品编辑页面
店铺分类--二级联动
我的需求列表页面
搜索栏的 行业分类--三级联动
接口问题：
优惠卷和询价
bug： 商品编辑 增加图片后 图片顺序乱了
我的商品 删除提示
等待后台--- 单个我的商品页面的图片顺序，单个我的需求页面的接口, 当个我哦的需求编辑页面的接口