联动组件化

src/app.js

@@ -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: {

src/component/interaction/interaction.js

@@ -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
+

src/component/interaction/interaction.scss

@@ -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%
+ }
+
+}
+    }
+}

src/pages/myDemandSupplyEdit/myDemandSupplyEdit.js

@@ -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: '',
 
         }
     }
@@ -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

src/pages/myDemandSupplyEdit/myDemandSupplyEdit.scss

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

src/pages/myNeeds/myNeeds.js

@@ -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
+  //删除我的需求 api DeleteMyNeeds
- getGetMyNeedsList() {
+  deleteMyNeeds({ demandId = 10 }) {
     Taro.request({
-    url: URL.GetIndustryTypeList,
+      url: URL.DeleteMyNeeds,
-    method: 'GET',
+      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({IndustryTypeList:res.data.data})
-      // this.setState({
-      //   allNeedsList: res.data.supplys || [],
-      //   totalNeeds: Number(res.data.count)
-      // })
 
 
+      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.getMyNeedsList({})
-    this.getGetMyNeedsList()
+    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='title'>行业分类：</Text>
-          <Text classname='content'>{item.sd_type}</Text>
+          <Text className='content'>{item.sd_type}</Text>
 
         </View>
         <View className='needs-title box'>
-          <Text classname='title'>需求标题：</Text>
+          <Text className='title'>需求标题：</Text>
-          <Text classname='content'>{item.sd_title}</Text>
+          <Text className='content'>{item.sd_title}</Text>
-
         </View>
         <View className='needs-state box'>
-          <Text classname='title'>需求状态：</Text>
+          <Text className='title'>需求状态：</Text>
-          <Text classname='content'>{item.state}</Text>
+          <Text className='content'>{item.state_name}</Text>
-
         </View>
         <View className='update-time box'>
-          <Text classname='title'>更新时间：</Text>
+          <Text className='title'>更新时间：</Text>
-          <Text classname='content'>{item.update_date}</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'>
+        <Interaction data={this.state.IndustryTypeList} onPassDataToChild={this.getDataFromChild.bind(this)}></Interaction>
-          <View>
+        {/* <View class='page-section'>
-            <Picker mode='selector' rangeKey='name' range={this.state.demandSupplyCate} onChange={this.demSupplyCateChange.bind(this)}>
+          <Picker
-              <View className='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>
     )

src/pages/myNeeds/myNeeds.scss

@@ -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;
+    
+}

src/pages/myNeedsEdit/myNeedsEdit.js

@@ -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

src/pages/myNeedsEdit/myNeedsEdit.scss

@@ -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; 
+    }
+}

src/pages/myNeedsPublish/myNeedsPublish.js

@@ -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

src/pages/myNeedsPublish/myNeedsPublish.scss

@@ -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; 
+    }
+}

src/pages/myNeedsView/myNeedsView.js

@@ -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

src/pages/myNeedsView/myNeedsView.scss

@@ -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;
+        }
+    }
+}

src/serviceAPI.config.js

@@ -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'// 删除我的需求
 
 }
 

src/todo list.txt

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