我的需求查看页面和所有需求抢单页面api

package.json

@@ -28,6 +28,7 @@
     "@tarojs/taro-h5": "^1.2.0-beta.3",
     "@tarojs/taro-swan": "^1.2.0-beta.3",
     "@tarojs/taro-weapp": "^1.2.0-beta.3",
+    "@tarojs/webpack-runner": "^1.2.8",
     "nerv-devtools": "^1.3.9",
     "nervjs": "^1.3.9",
     "redux": "^4.0.0",

src/app.js

@@ -1,7 +1,7 @@
 import '@tarojs/async-await'
 import Taro, { Component } from '@tarojs/taro'
 import { Provider } from '@tarojs/redux'
-import Index from './pages/index'
+import Home from './pages/home'
 import configStore from './store'
 
 import './app.scss'
@@ -18,7 +18,7 @@ class App extends Component {
 
   config = {
     pages: [
-      'pages/index/index', // index页面 
+      //'pages/index/index', // index页面 
       'pages/home/home',//首页 ---------------------
       'pages/shop/shop',//店铺页面 ---------------------
       'pages/goods/goods',// 商品页面 ---------------------
@@ -42,10 +42,46 @@ class App extends Component {
       navigationBarBackgroundColor: '#fff',
       navigationBarTitleText: 'WeChat',
       navigationBarTextStyle: 'black',
-     // enablePullDownRefresh:true
+      // enablePullDownRefresh:true
-     onReachBottomDistance: 0
+      onReachBottomDistance: 0
+    },
+
+    tabBar: {
+      list: [{
+        pagePath: "pages/home/home",
+        text: "首页",
+        iconPath: "./icons/home.png",
+        selectedIconPath: "./icons/home-actived.png"
+      }, {
+        pagePath: "pages/goodsPublish/goodsPublish",
+        text: "商品发布",
+        iconPath: "./icons/box.png",
+        selectedIconPath: "./icons/box-actived.png"
+      }, {
+        pagePath: "pages/supplyDemandPublish/supplyDemandPublish",
+        text: "供求发布",
+        iconPath: "./icons/publish.png",
+        selectedIconPath: "./icons/publish-actived.png"
+      }
+        , {
+        pagePath: "pages/mySupplyDemand/mySupplyDemand",
+        text: "我的供求",
+        iconPath: "./icons/menu.png",
+        selectedIconPath: "./icons/menu-actived.png"
+      }
+        , {
+        pagePath: "pages/myNeeds/myNeeds",
+        text: "我的需求",
+        iconPath: "./icons/user.png",
+        selectedIconPath: "./icons/user-actived.png"
+      }
+      ],
+      color: '#333',
+      selectedColor: '#333',
+      backgroundColor: '#fff',
+      borderStyle: '#ccc'
     }
-    ,
+
 
   }
 
@@ -64,7 +100,7 @@ class App extends Component {
   render() {
     return (
       <Provider store={store}>
-        <Index />
+        <Home />
       </Provider>
     )
   }

src/app.scss

@@ -55,7 +55,7 @@ $linearBlue:linear-gradient(to right, #337ab7, #337ab7);
 .button-no-margin{
     margin:10px 0
 }
-.no_more_title{
+.no-more-title{
     text-align: center;
     font-size: 25rpx;
     

src/component/scrollToTopComponent/scrollToTopComponent.scss

@@ -6,7 +6,7 @@
     border-radius:50%;
     text-align:center;
     position:fixed;
-    bottom:10%;
+    bottom:3%;
     right:5%;
     font-size:25rpx;
     .box{

src/pages/allDemanding/allDemanding.js

@@ -191,23 +191,12 @@ class AllDemanding extends Component {
         this.setState({ industryTypeSelected: value })
     }
 
-    // 翻页导航
+    goToGrabOrderPage(orderId) {
-    paginationNav(type) {
+        Taro.navigateTo({
-        Taro.showLoading({
+    
-            title: '加载中'
+          url: '/pages/grabOrderPage/grabOrderPage?orderId=' + orderId
         })
-        this.setState({ currentPage: type.current, }, () => {
+      }
-            this.searchDemanding({
-                curr_page: this.state.currentPage,
-                page_count: 10,
-                sd_title: this.state.title,
-                state: this.state.demandingStateSelected.id,
-                update_dateL: this.state.startDateSel,
-                update_dateU: this.state.endDateSel,
-                class_id: this.state.industryTypeSelected.id
-            })
-        })
-    }
 
     componentWillReceiveProps(nextProps) {
         console.log(this.props, nextProps)
@@ -277,7 +266,7 @@ class AllDemanding extends Component {
                     </View>
                 </View>
                 <View className='body'>
-                    <View className='image-container'>
+                    <View className='image-container' onClick={this.goToGrabOrderPage.bind(this,item.sd_id)}>
                         <Image style='width:100%;height:100%' src={URL.Base + item.file_path[0].thumb_path} />
                     </View>
                     <View className='detail'>
@@ -298,7 +287,7 @@ class AllDemanding extends Component {
                 </View>
 
             </View>
-        }) : <View className='no_more_title'>没有更多了</View>
+        }) : <View className='no-more-title'>没有更多了</View>
         return (
             <View className='allDemanding'>
                 {/* 模态框 */}

src/pages/allDemanding/allDemanding.scss

@@ -110,7 +110,6 @@ $themeColor: #FF7142;
             .watch{
                 padding-left: 10px;
             }
-            
         }
     }
     .body{

src/pages/grabOrderPage/grabOrderPage.js

@@ -1,6 +1,6 @@
 //grabOrderPage
 import Taro, { Component } from '@tarojs/taro'
-import { View, Text, Button } from '@tarojs/components'
+import { View, Text, Button, Image } from '@tarojs/components'
 import { AtModal, AtModalHeader, AtModalContent, AtModalAction, AtIcon } from 'taro-ui'
 
 import URL from '../../serviceAPI.config'
@@ -9,6 +9,7 @@ import CopyrightComponent from '../../component/copyrightComponent/copyrightComp
 
 
 import './grabOrderPage.scss'
+import { SymbolDef } from '_terser@3.14.1@terser';
 
 
 class GrabOrderPage extends Component {
@@ -25,10 +26,12 @@ class GrabOrderPage extends Component {
             contactNumber: '',
             address: '',
             content: '',
+            images: [],
             isOpen: false, // 抢单消息提示
             grabOrderId: this.$router.params.orderId,
-            stateId:'',
+            stateId: '',
-            stateName:''
+            stateName: '',
+            userId: ''
         }
     }
 
@@ -50,15 +53,17 @@ class GrabOrderPage extends Component {
             .then(res => {
                 console.log('抢单详情获取成功', res)
                 this.setState({
-                    type: res.data.sdInfo.sd_type,
+                    type: res.data.sdInfo.class_name,
                     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,
-                    stateId:res.data.sdInfo.state,
+                    images: res.data.sdInfo.file_path,
-                    stateName:res.data.sdInfo.state_name,
+                    stateId: res.data.sdInfo.state,
+                    stateName: res.data.sdInfo.state_name,
+                    userId: res.data.sdInfo.user_id
 
                 })
             }
@@ -144,7 +149,64 @@ class GrabOrderPage extends Component {
     componentDidHide() { }
 
     render() {
-      
+        const localStoageUserId = Taro.getStorageSync('userInfo').user_id
+
+
+        let ButtonElement
+        if (localStoageUserId === this.state.userId && this.state.stateId === '1') {
+            ButtonElement = <View className='button-box'>
+                <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>
+                    <Button size='mini' className='button-green'>
+                        <AtIcon value='add' size='12' color='white'></AtIcon>
+                        新增</Button>
+                </View>
+                <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
+                    <Button size='mini' className='button-green'>
+                        <AtIcon value='' size='12' color='white'></AtIcon>
+                        我的需求</Button>
+                </View>
+                <View className='button' onClick={this.goMyNeedEditPage.bind(this)}>
+                    <Button size='mini' className='button-orange'>
+                        <AtIcon value='settings' size='12' color='white'></AtIcon>
+                        修改</Button>
+                </View>
+
+                <View className='button' onClick={this.deleteButton.bind(this)}>
+                    <Button size='mini' className='button-dark-red'>
+                        <AtIcon value='trash' size='12' color='white'></AtIcon>
+                        删除</Button>
+                </View>
+            </View>
+        } else if (localStoageUserId === this.state.userId && this.state.stateId != '1') {
+            ButtonElement = <View className='button-box'>
+                <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>
+                    <Button size='mini' className='button-green'>
+                        <AtIcon value='add' size='12' color='white'></AtIcon>
+                        新增</Button>
+                </View>
+                <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
+                    <Button size='mini' className='button-green'>
+                        <AtIcon value='' size='12' color='white'></AtIcon>
+                        我的需求</Button>
+                </View>
+            </View>
+        } else if (this.state.stateId === '1') {
+            ButtonElement = <View className='button-box'><View className='button' onClick={this.grabButtonHandler.bind(this)}>
+                <Button size='mini' className='button-orange'>抢单</Button>
+            </View></View>
+
+        } else if (this.state.stateId === '2') {
+            ButtonElement = <View className='button-box'><View className='button'>
+                <Button size='mini' className='button-orange blur'>{this.state.stateName}</Button>
+            </View></View>
+        } else if (this.state.stateId === '3') {
+            ButtonElement = <View className='button-box'><View className='button'>
+                <Button size='mini' className='button-orange blur'>{this.state.stateName}</Button>
+            </View></View>
+        }
+
+
+
         // 提示模态弹窗element
         const modalMessageGrabElement = <AtModal isOpened={this.state.isOpen}>
             <AtModalHeader>提示</AtModalHeader>
@@ -153,6 +215,11 @@ class GrabOrderPage extends Component {
             </AtModalContent>
             <AtModalAction> <Button onClick={this.handleGrabModalCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleGrabConfirm.bind(this)}>确定</Button> </AtModalAction>
         </AtModal>
+        const imageElementArray = this.state.images.map((item, index) => {
+            return <View className='image-wrapper' key={index}>
+                <Image mode='aspectFit' src={URL.Base + item.file_path} style='max-width:100%; max-height:100%;' />
+            </View>
+        })
 
         return (
             <View className='grabOrderPage'>
@@ -185,20 +252,13 @@ class GrabOrderPage extends Component {
                     <Text className='title'>业主需求内容：</Text>
                     <Text className='content'>{this.state.content}</Text>
                 </View>
-               
+                <View className='image-container box'>
-                    {/* <View className='button' onClick={this.grabButtonHandler.bind(this)}>
+                    {this.state.images.length ? <Text className='title'>业主需求图片:</Text> : null}
-                        <Button size='mini' className='button-orange'>
+                    {imageElementArray}
-                            <AtIcon value='close' size='12' color='white'></AtIcon> 
+                </View>
-                            抢单</Button>
+                {ButtonElement}
-                    </View> */}
+
-                    {this.state.stateId === '1' ? <View className='button'  onClick={this.grabButtonHandler.bind(this)}>
+
-                            <Button size='mini' className='button-orange'>抢单</Button>
-                        </View> : null || this.state.stateId === '2' ? <View className='button'>
-                            <Button size='mini' className='button-orange blur'>{this.state.stateName}</Button>
-                        </View> : null || this.state.stateId === '3' ? <View className='button'>
-                            <Button size='mini' className='button-orange blur'>{this.state.stateName}</Button>
-                        </View> : null}
-               
                 <CopyrightComponent></CopyrightComponent>
 
             </View>

src/pages/grabOrderPage/grabOrderPage.scss

@@ -12,15 +12,27 @@
                 color:#0579c6
             }
         }
+        .image-wrapper{
+            border: 4rpx solid #ddd;
+            margin-top: 10px
+        }
      
 }
 
+.button-box{
+    display: flex;
+    flex-wrap: nowrap;
+    flex-direction: row;
+    margin: 40px 0 0;
+  justify-content: space-around;
+    
+    
     .button{
-       margin-top: 20%;
-        text-align: center;
-       // margin:2%;
-       // justify-content:center;
-
         
+        text-align: center;
+        .button-orange,.button-green,.button-dark-red{
+            font-size: 27rpx
+        }
     }
+}
  

src/pages/home/home.js

@@ -14,7 +14,8 @@ import './home.scss'
 class Home extends Component {
 
   config = {
-    navigationBarTitleText: '首页'
+    navigationBarTitleText: '首页',
+    
   }
 
   constructor() {
@@ -66,7 +67,7 @@ class Home extends Component {
           Taro.setStorageSync('user_identity', { username: res.data.otherData.userName, userphone: res.data.otherData.userPhone })
           this.setState({
             ads: res.data.data.adsLb,
-            categories: [res.data.data.supplyClass[0],Object.values(res.data.data.supplyClass[1])],
+            categories: [res.data.data.supplyClass[0], Object.values(res.data.data.supplyClass[1])],
             demanding: res.data.data.demand.supplys,
             otherData: res.data.otherData,
             userName: res.data.otherData.userName,
@@ -104,7 +105,7 @@ class Home extends Component {
       }
     })
       .then(res => {
-         console.log('所有店铺的信息', res)
+        console.log('所有店铺的信息', res)
         Taro.hideLoading()
         if (res.data.err_msg === 'success') {
           if (this.state.isAddToList) {
@@ -132,9 +133,10 @@ class Home extends Component {
       }
       )
   }
- 
+
   // 异步函数登入api
   async login() {
+    
     Taro.login({
       success(res) {
         if (res.code) {
@@ -153,22 +155,18 @@ class Home extends Component {
           })
             .then(response => {
               if (response.data.err_msg === 'success') {
+                
                 console.log('微信登入成功', response)
-                // Taro.showToast({
+                
-                //   title:'登入成功',
-                //   icon:'success',
-                //   duration:1500
-                // })
-                //储存后台返回的session_id 到local Storage
                 Taro.setStorageSync('session_id', response.data.session_id)
                 Taro.setStorageSync('shopInfo', response.data.shop_info)
                 Taro.setStorageSync('userInfo', response.data.user_info)
-
+               
               } else {
                 Taro.showToast({
                   title: '登入失败' + response.data.err_msg,
                   icon: 'none',
-                  duration: 1500
+                  duration: 2000
                 })
               }
 
@@ -176,6 +174,8 @@ class Home extends Component {
             ).catch(err => {
               console.log('登入微信失败', err)
 
+            }).then(()=>{
+              
             })
         }
         else {
@@ -303,14 +303,24 @@ class Home extends Component {
     })
 
   }
+
+
   componentDidMount() {
     // 页面加载后 得到首页的基本信息和推荐店铺的信息
-    Taro.showLoading({ title: '加载中' })
+    (async ()=>{
-
+      Taro.showLoading({ title: '加载中' })
-    this.login().then(() => {
+      await this.login()
       this.getShops({})
       this.getHomeCategoriesInfo()
-    }).catch(err => console.log('微信登入失败：', err))
+    })()
+     
+ 
+
+
+    // this.login().then(() => {
+    //   this.getShops({})
+    //   this.getHomeCategoriesInfo()
+    // }).catch(err => console.log('微信登入失败：', err))
 
   }
 
@@ -411,7 +421,7 @@ class Home extends Component {
         <View>{item.class_name}</View>
       </View>
     }) : null
-  
+
     const shopCollectionElementsArray = this.state.shops.length ? this.state.shops.map((item, index) => {
       return <FilteredShopComponent
         shop={item}
@@ -419,7 +429,7 @@ class Home extends Component {
         userPhone={this.state.userPhone}
         key={index}
       ></FilteredShopComponent>
-    }) : <View className='no_more_title'> 没有更多了</View>
+    }) : <View className='no-more-title'> 没有更多了</View>
     const subCateElementsArray = this.state.subCate.length ? this.state.subCate.map((item, index) => {
       return <SwiperItem key={index} onClick={this.onClickChildCate.bind(this, item)}>
         <View className='text'>{item.class_name}</View>
@@ -552,7 +562,7 @@ class Home extends Component {
 
         </View>
         <View className='bottom-nav-box'>
-          <BottomNav otherData={this.state.otherData} />
+          {/* <BottomNav otherData={this.state.otherData} /> */}
         </View>
 
 

src/pages/home/home.scss

@@ -6,11 +6,8 @@ $themeColor: #FF7142;
          height: 100%;
           width: 100%;
     }
-
     }
-   
 }
-
 .modalBox{
     .at-modal-footer--simple{
          .at-modal-action{
@@ -43,9 +40,8 @@ $themeColor: #FF7142;
                   vertical-align: middle;
              }
         .more-link{
-           // float: right;
            margin-left: 50%;
-            font-size: 30px;
+            font-size: 25px;
             color: #ccc;
             vertical-align: middle;
         }

src/pages/myGoodList/myGoodList.js

@@ -22,7 +22,8 @@ class MyGoodList extends Component {
       heightestPrice: '',
       minimumSold: '',
       maximumSold: '',
-      productId: '',
+      order: '',// 商品列表排序参数
+      productId: '',// 商品编号参数
       productCate: [], //宝贝类目
       productCateSelected: { id: '', name: '全部类目' },// 已选宝贝类目
       filterBar: ['filterPrice', 'filterStock', 'filterSold', 'filterPublishDate',], //筛选选项
@@ -37,7 +38,7 @@ class MyGoodList extends Component {
       myGoodList: [],// 保存后台返回的商品列表
       myGoodListTotal: '0',// 后台的商品总数 
       goodsStateParam: 1,//商品状态参数
-      pageCountParam: 10,// 商品数量参数
+      pageCountParam: 20,// 商品数量参数
       currPageParam: 1,// 当前页面 参数
       isCheckAll: false,// 是否checked
       goodsIdList: [],//商品Id 列表
@@ -108,17 +109,16 @@ class MyGoodList extends Component {
   // 获取我的商品列表接口api
   getMyGoodListApi({
     goodsName = this.state.productName,
-    goodsSn = '',
+    goodsSn = this.state.productId,
     goodsClass = this.state.productCateSelected.id,
     goodsPriceL = this.state.lowestPrice,
     goodsPriceU = this.state.heightestPrice,
     goodsSalesL = this.state.minimumSold,
     goodsSalesU = this.state.maximumSold,
-    shopClassID = this.state.productId,
     goodsState = this.state.goodsStateParam,
     pageCount = this.state.pageCountParam,
     currPage = this.state.currPageParam,
-    order = '', 
+    order = this.state.order,
   }) {
     Taro.request({
       url: URL.MyGoodList,
@@ -132,7 +132,6 @@ class MyGoodList extends Component {
         goodsPriceU: goodsPriceU,
         goodsSalesL: goodsSalesL,
         goodsSalesU: goodsSalesU,
-        shopClassID: shopClassID,
         goodsState: goodsState,
         pageCount: pageCount,
         currPage: currPage,
@@ -329,7 +328,7 @@ class MyGoodList extends Component {
     Taro.showLoading({
       title: '加载中',
     })
-    this.setState({ currPageParam: 1, isCheckAll: false,loadMorePageIndex:1 }, () => {
+    this.setState({ currPageParam: 1, isCheckAll: false,order:'' }, () => {
       this.getMyGoodListApi({})
     })
   }
@@ -339,7 +338,6 @@ class MyGoodList extends Component {
   emptyButtonHanlder() {
     this.setState({
       isCheckAll: false,
-      loadMorePageIndex:1,
       currPageParam: 1,
       productName: '',
       lowestPrice: '',
@@ -348,6 +346,7 @@ class MyGoodList extends Component {
       maximumSold: '',
       productId: '',
       productCateSelected: { id: '', name: '全部类目' },
+      order:'',
     }, () => {
       this.getMyGoodListApi({})
       Taro.showToast({
@@ -370,10 +369,15 @@ class MyGoodList extends Component {
           filterSold: false,
           filterPublishDate: false,
         }
-      }
+      }, () => {
-      )
+        this.state.filterOptions.filterPrice ? this.setState({ order: "goods_price" }, () => {
-      this.state.filterOptions.filterPrice ? this.getMyGoodListApi({ order: "goods_price desc" }) : this.getMyGoodListApi({ order: "goods_price" })
+          this.getMyGoodListApi({})
+        }) : this.setState({ order: "goods_price desc" }, () => {
+          this.getMyGoodListApi({})
+        })
 
+
+      })
     }
     if (value == 1) {
       this.setState({
@@ -385,7 +389,11 @@ class MyGoodList extends Component {
           filterPublishDate: false,
         }
       }, () => {
-        this.state.filterOptions.filterStock ? this.getMyGoodListApi({ order: "goods_stock desc" }) : this.getMyGoodListApi({ order: "goods_stock" })
+        this.state.filterOptions.filterStock ? this.setState({ order: "goods_stock" }, () => {
+          this.getMyGoodListApi({})
+        }) : this.setState({ order: "goods_stock desc" }, () => {
+          this.getMyGoodListApi({})
+        })
       }
       )
     }
@@ -400,11 +408,14 @@ class MyGoodList extends Component {
 
         }
       }, () => {
-        this.state.filterOptions.filterSold ? this.getMyGoodListApi({ order: "sales_volume desc" }) : this.getMyGoodListApi({ order: "sales_volume" })
+        this.state.filterOptions.filterSold ? this.setState({ order: "sales_volume " }, () => {
+          this.getMyGoodListApi({})
+        }) : this.setState({ order: "sales_volume desc" }, () => {
+          this.getMyGoodListApi({})
+        })
       }
 
       )
-
     }
     if (value == 3) {
       this.setState({
@@ -417,7 +428,11 @@ class MyGoodList extends Component {
 
         }
       }, () => {
-        this.state.filterOptions.filterPublishDate ? this.getMyGoodListApi({ order: "update_date desc" }) : this.getMyGoodListApi({ order: "update_date" })
+        this.state.filterOptions.filterPublishDate ? this.setState({ order: "update_date desc" }, () => {
+          this.getMyGoodListApi({})
+        }) : this.setState({ order: "update_date" }, () => {
+          this.getMyGoodListApi({})
+        })
       }
       )
     }
@@ -581,8 +596,8 @@ class MyGoodList extends Component {
     Taro.showLoading({
       title: '加载中'
     })
-    this.setState({ isAddToList: true, loadMorePageIndex: this.state.loadMorePageIndex + 1 }, () => {
+    this.setState({ isAddToList: true, currPageParam: this.state.currPageParam + 1 }, () => {
-      this.getMyGoodListApi({ currPage: this.state.loadMorePageIndex })
+      this.getMyGoodListApi({})
     })
 
 

src/pages/myNeeds/myNeeds.js

@@ -243,10 +243,11 @@ class MyNeeds extends Component {
       needsStateSelected: this.state.needsState[e.detail.value]
     })
   }
-  goToMyNeedsViewPage(id) {
+  goToMyNeedsViewPage(Id) {
-    Taro.navigateTo({
+      Taro.navigateTo({
-      url: '/pages/myNeedsView/myNeedsView?id=' + id
+        url: '/pages/grabOrderPage/grabOrderPage?orderId=' + Id
-    })
+      })
+    
   }
   goToMyNeedsEditPage(id) {
     Taro.navigateTo({
@@ -446,7 +447,7 @@ class MyNeeds extends Component {
         </View>
         {/* 我的需求信息 */}
         {<View className='info-box'>
-          {this.state.allNeedsList.length?myNeedsListArrayElement:<View>没有更多了</View>}
+          {this.state.allNeedsList.length?myNeedsListArrayElement:<View className='no-more-title'>没有更多了</View>}
         </View>}
 
         {this.state.isShowTopNav ? <ScrollToTopComponent ></ScrollToTopComponent> : null}

src/pages/myNeedsView/myNeedsView.js

@@ -18,7 +18,6 @@ class SupplyDemandView extends Component {
   constructor() {
     super(...arguments)
     this.state = {
-
       industryTypeSelected: '',
       needsType: [{ name: '业主需求', id: '4' }, { name: '效果图', id: '5' }],
       needsTypeSelected: { name: '业主需求', id: '4' },
@@ -35,14 +34,15 @@ class SupplyDemandView extends Component {
       contactAddress: '',
       content: '',//描述
       pickerImageUrl: [],
-      ImagesInfo: '',
+      ImagesInfo: [],
       isShowAllButtons:true// 是否显示所有按钮
     }
   }
   //获取需求信息api 
   getSingleMyNeedInfo() {
     Taro.request({
-      url: URL.EditMyNeeds,
+     // url: URL.EditMyNeeds,
+     url: URL.supplyDemandDetails,
       method: 'GET',
       dataType: 'json',
       data: {
@@ -79,13 +79,13 @@ class SupplyDemandView extends Component {
             }
           }
   
-          const needsType = this.state.needsType.filter(item => {
+          // const needsType = this.state.needsType.filter(item => {
-            return item.id === res.data.sdInfo.sd_type
+          //   return item.id === res.data.sdInfo.sd_type
-          })[0]
+          // })[0]
-          const imageFile = res.data.sdInfo.file_path.map(item => { return { url: URL.Base + item.file_path } })
+          // const imageFile = res.data.sdInfo.file_path.map(item => { return { url: URL.Base + item.file_path } })
-          const needsState = this.state.needsState.filter(item => {
+          // const needsState = this.state.needsState.filter(item => {
-            return item.id === res.data.sdInfo.state
+          //   return item.id === res.data.sdInfo.state
-          })[0]
+          // })[0]
           this.setState({
             sd_id: res.data.sdInfo.sd_id,
             industryTypeSelected: industryType,
@@ -212,9 +212,15 @@ class SupplyDemandView extends Component {
     </AtModalContent>
       <AtModalAction>  <Button onClick={this.handleWindowModCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleWindowConfirm.bind(this)}>确定</Button>  </AtModalAction>
     </AtModal>
-    const imageArrayElement = this.state.ImagesInfo.map((item, index) => {
+    // const imageArrayElement = this.state.ImagesInfo.map((item, index) => {
-      return <Image key={index} className='image' mode='widthFix' src={URL.Base + item.file_path} style='max-width: 100%; max-height:100%;' />
+    //   return <Image key={index} className='image' mode='widthFix' src={URL.Base + item.file_path} style='max-width: 100%; max-height:100%;' />
-    })
+    // })
+    const imageArrayElement=this.state.ImagesInfo.map((item, index) => {
+      return <View className='image-wrapper' key={index}>
+          <Image mode='aspectFit' src={URL.Base + item.file_path} style='max-width:100%; max-height:100%;' />
+      </View>
+  })
+    
 
     return (
       <View className='SupplyDemandItemView'>
@@ -248,13 +254,21 @@ class SupplyDemandView extends Component {
           <Text className='title'>业主需求内容：</Text>
           <Text className='content'>{this.state.content}</Text>
         </View>
-        {this.state.ImagesInfo.length?<View className='needed-image box'>
+        <View className='image-container box'>
+                {this.state.ImagesInfo.length?<Text className='title'>业主需求图片:</Text>:null}
+                {imageArrayElement}
+                </View>
+
+
+
+
+        {/* {this.state.ImagesInfo.length?<View className='needed-image box'>
           <Text className='title'>业主需求图片：</Text>
           <View className='img-box'>
             {imageArrayElement}
           </View>
         </View>:null
-}
+} */}
 
        {this.state.isShowAllButtons? <View className='button-box'>
           <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>

src/pages/myNeedsView/myNeedsView.scss

@@ -27,9 +27,7 @@ $themeColor:#FF7142;
         }
     }
 }
-.img-box{
+.image-wrapper{
-    padding:20px;
+    border: 4rpx solid #ddd;
-    .image{
+    margin-top: 10px
-        font-size: 0px
-    }
 }

src/pages/mySupplyDemand/mySupplyDemand.js

@@ -340,7 +340,7 @@ class MySupplyDemand extends Component {
 
 
             </View>
-        }) : <View className='no_more_title' >
+        }) : <View className='no-more-title' >
                 没有更多了....
     </View >
         return (

src/pages/mySupplyDemand/mySupplyDemand.scss

@@ -95,7 +95,7 @@ $themeColor:#FF7142;
         border: 3rpx solid #ddd;
         margin-bottom: 8px;
         box-shadow: 0 8px 8px #ddd;
-        padding: 10px;
+        padding: 10px 10px 0;
         View{
             margin-top: 5px;
         }
@@ -108,12 +108,11 @@ $themeColor:#FF7142;
     flex-wrap: nowrap;
     justify-content:flex-end;
     margin: 20px 0 0 0;
-    padding: 0 20px;
+
     border-top: 1px solid #ddd;
     .button{
-      // flex:1;
         text-align: center;
-        margin:1% 1% 0;
+        margin:0 1% 0;
         .button-orange,.button-green,.button-dark-red{
             font-size: 27rpx
         }

src/pages/shop/shop.js

@@ -9,10 +9,10 @@ import ScrollToTopComponent from '../../component/scrollToTopComponent/scrollToT
 
 import './shop.scss'
 import ShopItem from '../../component/shopItemComponent/shopItemComponent'
-import BottomNav from '../../component/bottomNav/bottomNav'
+//import BottomNav from '../../component/bottomNav/bottomNav'
 import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
 
-const locationIcon=require('../../assets/img/location.png')
+const locationIcon = require('../../assets/img/location.png')
 
 class Shop extends Component {
     // 项目配置
@@ -47,7 +47,6 @@ class Shop extends Component {
                 popularity: false,
             },
             filterCondition: '',// 筛选条件
-
             mainType: [],// 侧边筛选分类
             goodType: [],//侧边商品类型
             otherType: [],//侧边其他类型
@@ -66,13 +65,15 @@ class Shop extends Component {
             shop_class_id: '',
             order: '',
             goods_class_id: '',
+            class_filter: '',
+            goods_type: '',
             goodsSpec: [],
             goodsParam: [],
             goodsParamExt: [],
             // 地图的经度和维度
             longitude: '',
             latitude: '',
-            
+
 
         }
     }
@@ -117,13 +118,18 @@ class Shop extends Component {
                     console.log('筛选项目成功', res)
                     Taro.hideLoading()
                     this.formatFilterData(res.data).then(data => {
+                        console.log('data', data)
+
                         this.setState({
                             sideFilterdata: data,
-                            mainType: data.mainType || [],
+                            mainType: data.mainType,
-                            goodType: data.goodType || [],
+                            goodType: data.goodType,
-                            otherType: data.otherType || [],
+                            otherType: data.otherType,
-                            widthType: data.widthType || [],
+                            widthType: data.widthType,
                         })
+
+
+
                         console.log('formated data', data)
                     })
                 } else {
@@ -140,10 +146,26 @@ class Shop extends Component {
         //侧边筛选分类
         if (data.goods_class) {
             let typeArray = []
-            data.goods_class.forEach(item => {
+            // 如果后台返回的筛选项有和checkedFilterIdList重叠的 就不显示.
-                typeArray.push({ id: item.class_id, name: item.class_name, checked: false })
+            if (this.state.checkedFilterIdList.length) {
-            });
+                data.goods_class.forEach(item => {
+                    this.state.checkedFilterIdList.forEach((checkedItem) => {
+                        if (checkedItem.id !== item.class_id) {
+                            typeArray.push({ id: item.class_id, name: item.class_name, checked: false })
+                        }
+                    })
+                });
+            } else {
+                data.goods_class.forEach(item => {
+                    typeArray.push({ id: item.class_id, name: item.class_name, checked: false })
+                }
+                )
+            }
+
+
             formatedFilterOptions.mainType = typeArray
+        } else {
+            formatedFilterOptions.mainType = []
         }
         //侧边筛选商品类型
         if (data.goods_type) {
@@ -159,6 +181,9 @@ class Shop extends Component {
                 }
             });
             formatedFilterOptions.goodType = goodTypeArray
+        } else {
+            formatedFilterOptions.goodType = []
+
         }
         //侧边筛选其他类型
         if (data.goodsParam) {
@@ -177,6 +202,10 @@ class Shop extends Component {
             });
             formatedFilterOptions.otherType = goodsParamArray
         }
+        else {
+            formatedFilterOptions.otherType = []
+
+        }
         //侧边筛选宽度类型
         if (data.goodsParamExt) {
             let goodsParamExtArray = []
@@ -192,6 +221,8 @@ class Shop extends Component {
             });
             formatedFilterOptions.widthType = goodsParamExtArray
 
+        } else {
+            formatedFilterOptions.widthType = []
         }
 
         return formatedFilterOptions
@@ -234,7 +265,10 @@ class Shop extends Component {
                 goodsParamExt: JSON.stringify(goodsParamExt),
             },
             header: {
+                // 'content-type': 'application/x-www-form-urlencoded',
+                // 'X-Requested-With': 'XMLHttpRequest'
                 'content-type': 'application/x-www-form-urlencoded',
+                'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'),
                 'X-Requested-With': 'XMLHttpRequest'
             }
         })
@@ -502,7 +536,8 @@ class Shop extends Component {
 
         Taro.showLoading({ title: '加载中' })
         this.setState({
-            checkedFilterIdList: [], curr_page: 1,
+            checkedFilterIdList: [],
+            curr_page: 1,
             page_count: 10,
             shop_name: false,
             config_id: 4,
@@ -510,6 +545,8 @@ class Shop extends Component {
             order: '',
             curr_page: 1,
             goods_class_id: '',
+            class_filter: '',
+            goods_type: '',
             goodsSpec: [],
             goodsParam: [],
             goodsParamExt: [],
@@ -520,7 +557,14 @@ class Shop extends Component {
 
 
     }
+    openNavMap() {
+        Taro.openLocation({
+            latitude: Number(this.state.latitude),
+            longitude: Number(this.state.longitude),
+            name: this.state.shopAddress,
 
+        })
+    }
     componentDidMount() {
         Taro.showLoading({ title: '加载中' })
         //页面加载之后 得到指定店铺的商品 和 筛选标签
@@ -552,7 +596,7 @@ class Shop extends Component {
         }
     }
     render() {
-        
+
         const ShopItemElementsArray = this.state.shopItem.length ? this.state.shopItem.map((item, index) => {
             return <View key={index} className='shop-item' >
                 <ShopItem item={item}></ShopItem>
@@ -572,9 +616,9 @@ class Shop extends Component {
         // 侧边已选项
         const checkedFilterElementsArray = this.state.checkedFilterIdList.map((item, index) => {
             return <AtTag style='margin-left:5px' key={index}
-              name={item.id}
+                name={item.id}
-              type='primary'
+                type='primary'
-              active={item.checked}
+                active={item.checked}
             //onClick={this.selectTag.bind(this)}
             >{item.name}</AtTag>
         })
@@ -584,19 +628,19 @@ class Shop extends Component {
         // 侧边筛选的分类项
         const goodsClassElementsArray = this.state.mainType.map((item, index) => {
             return <AtTag style='margin-left:5px' key={index}
-              name={item.id}
+                name={item.id}
-              type='primary'
+                type='primary'
-              active={item.checked}
+                active={item.checked}
-              onClick={this.selectTag.bind(this)}
+                onClick={this.selectTag.bind(this)}
             >{item.name}</AtTag>
         })
         // 侧边筛选的商品类型项
         const goodsTypeElementsArray = this.state.goodType.map((item, index) => {
             return <AtTag style='margin-left:5px' key={index}
-              name={item.id}
+                name={item.id}
-              type='primary'
+                type='primary'
-              active={item.checked}
+                active={item.checked}
-              onClick={this.selectTag.bind(this)}
+                onClick={this.selectTag.bind(this)}
             >{item.name}</AtTag>
         })
 
@@ -610,10 +654,10 @@ class Shop extends Component {
                     let isCheck = subItem.checked
                     return <View className='button-box' key={subIndex}>
                         <AtTag style='margin-left:5px'
-                          name={name}
+                            name={name}
-                          type='primary'
+                            type='primary'
-                          active={isCheck}
+                            active={isCheck}
-                          onClick={this.selectTag.bind(this)}
+                            onClick={this.selectTag.bind(this)}
                         >{name}</AtTag>
                     </View>
                 })}
@@ -623,10 +667,10 @@ class Shop extends Component {
         //  侧边筛选宽度选项
         const widthnessElementsArray = this.state.widthType.map((item, index) => {
             return <AtTag style='margin-left:5px' key={index}
-              name={item.name}
+                name={item.name}
-              type='primary'
+                type='primary'
-              active={item.checked}
+                active={item.checked}
-              onClick={this.selectTag.bind(this)}
+                onClick={this.selectTag.bind(this)}
             >{item.name}</AtTag>
         })
         // 店铺页面/店铺主页
@@ -666,7 +710,7 @@ class Shop extends Component {
             </View>
             {/* 店铺的商品列表 */}
             <View className='container'>
-                {this.state.shopItem.length ? ShopItemElementsArray : <View className='no_more_title'> 没有更多了</View>}
+                {this.state.shopItem.length ? ShopItemElementsArray : <View className='no-more-title'> 没有更多了</View>}
             </View>
 
         </View>
@@ -705,26 +749,30 @@ class Shop extends Component {
             </View> */}
             {/* location.png */}
             <Map
-              id='map'
+                id='map'
-              longitude={this.state.longitude}
+                longitude={this.state.longitude}
-              latitude={this.state.latitude}
+                latitude={this.state.latitude}
-              scale='14'
+                scale='14'
-              controls='{{controls}}'
+                controls='{{controls}}'
-              bindcontroltap='controltap'
+                bindcontroltap='controltap'
-              markers={[{
+                markers={[{
-                iconPath: locationIcon,
+                    iconPath: locationIcon,
-                id: 0,
+                    id: 0,
-                latitude: this.state.latitude,
+                    latitude: this.state.latitude,
-                longitude: this.state.longitude,
+                    longitude: this.state.longitude,
-                width: 50,
+                    width: 30,
-                height: 50
+                    height: 30
-              }]}
+                }]}
-              bindmarkertap='markertap'
+                bindmarkertap='markertap'
-              polyline='{{polyline}}'
+                polyline='{{polyline}}'
-              bindregionchange='regionchange'
+                bindregionchange='regionchange'
-              show-location
+                show-location
-              style='width: 100%; height: 300px;'
+                style='width: 100%; height: 300px;'
             ></Map>
+            <View className='button-box'>
+                <Button className='button-blue' onClick={this.openNavMap.bind(this)}>打开地图</Button>
+            </View>
+
             {/* <Map
               id='map'
               longitude={this.state.longitude}
@@ -752,13 +800,13 @@ class Shop extends Component {
                 <View className='nav-box'>
                     <View className='nav'>
                         <View className='shop-cate'>
-                        <View>
+                            <View>
-                        <ShopTypeInteractionComp url={URL.GetShopCategoryList} style='position:absolute;z-index:2;opacity:0;left:0'
+                                <ShopTypeInteractionComp url={URL.GetShopCategoryList} style='position:absolute;z-index:2;opacity:0;left:0'
-                          shopId={this.state.shop_id}
+                                    shopId={this.state.shop_id}
-                          onPassDataToChild={this.getDataFromShopChild.bind(this)}
+                                    onPassDataToChild={this.getDataFromShopChild.bind(this)}
-                        ></ShopTypeInteractionComp>
+                                ></ShopTypeInteractionComp>
-                        </View>
+                            </View>
-                           <View className='interactive' onClick={this.showPopUp.bind(this)}>
+                            <View className='interactive' onClick={this.showPopUp.bind(this)}>
                                 <Text className='text'>
                                     店铺全部分类
                                 </Text>
@@ -786,7 +834,7 @@ class Shop extends Component {
                 <View className='gap' style='height:150rpx'>
                 </View>
                 <View className='bottom-nav-box'>
-                    <BottomNav otherData={{ menu: [{ name: '首页' }, { name: '分类' }, { name: '购物车' }, { name: '教程软件' }, { name: '更多' }] }} />
+                    {/* <BottomNav otherData={{ menu: [{ name: '首页' }, { name: '分类' }, { name: '购物车' }, { name: '教程软件' }, { name: '更多' }] }} /> */}
                 </View>
             </View>
         )

src/pages/shop/shop.scss

@@ -152,7 +152,7 @@ height:60rpx;
         padding:10px;
     
     }
-    .no_more_title{
+    .no-more-title{
         width:100%;
 margin-top:20%;
 

src/todo list.txt

@@ -20,236 +20,51 @@ bug： 商品编辑 增加图片后 图片顺序乱了
 
 
 
-// api
+         const selfAndAvailable = localStoageUserId === this.state.userId && this.state.stateId === '1' && <View className='button-box'>
-商品列表
+            <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>
--价格排序
+                <Button size='mini' className='button-green'>
--库存排序
+                    <AtIcon value='add' size='12' color='white'></AtIcon>
--总销量
+                    新增</Button>
--发布时间
+            </View>
-
+            <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
-
+                <Button size='mini' className='button-green'>
-
+                    <AtIcon value='' size='12' color='white'></AtIcon>
-import Taro, { Component } from '@tarojs/taro'
+                    我的需求</Button>
-import { View, Text } from '@tarojs/components'
+            </View>
-
+            <View className='button' onClick={this.goMyNeedEditPage.bind(this)}>
-import { Picker } from 'taro-ui'
+                <Button size='mini' className='button-orange'>
-
+                    <AtIcon value='settings' size='12' color='white'></AtIcon>
-import './interactionComponent.scss'
+                    修改</Button>
-
-class Interaction extends Component {
-
-    config = {
-        navigationBarTitleText: 'interactionComponent'
-    }
-    constructor() {
-        super(...arguments);
-
-        this.state = {
-            ///---行业分类 开始
-            objectMultiArray: '',
-            multiIndex: [0, 0],
-            formatInWindow: [],
-            ///---行业分类 结束
-
-        }
-
-    }
-    // 行业分类筛选列表GetIndustryTypeList
-    getIndustryTypeList(url) {
-        Taro.request({
-            url: url,
-            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.formatIndustryType(res.data.data)
-            this.formatIndustTypeInit(res.data.data)
-
-        }).catch(err => {
-            console.log('行业分类列表获取失败', err)
-        })
-    }
-    // 第一种formate 用于底部弹层滚动时的数据
-    formatIndustryType(data) {
-        const newIndustryType = [{ name: '全部', id: '-1', child: [{ name: '', id: '' }] }]
-        for (let outter of data) {
-            let outterObject = { name: outter.class_name, id: outter.class_id, child: [{name:'可选',id:''}] }
-            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 })
-    }
-    //第二种format 用于底部弹层的初始化数据
-    formatIndustTypeInit(data) {
-        const firstArray = [{ name: '全部', id: '1' }]
-        const secondArray = [{ name: '', id: '' }]
-        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] }, () => {
-        })
-
-    }
-    //--------------------开始-行业分类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] = this.state.formatInWindow[6].child
-                        break
-                    case 6:
-                        data.objectMultiArray[1] = [{ name: '' }]
-                        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
-                    case 15:
-                        data.objectMultiArray[1] = this.state.formatInWindow[15].child
-                        break
-                    case 15:
-                        data.objectMultiArray[1] = this.state.formatInWindow[16].child
-                        break
-
-                }
-                data.multiIndex[1] = 0
-                break
-
-        }
-        // console.log(data.multiIndex)
-        // console.log('objectMultiArray', data.objectMultiArray)
-        this.setState({
-            multiIndex: data.multiIndex,
-            objectMultiArray: data.objectMultiArray
-        }, () => {
-
-        })
-    }
-
-    //--------------------结束-行业分类picker
-    passDataToParent(industryTypeSelected) {
-        this.props.onPassDataToChild(industryTypeSelected)
-    }
-
-
-    componentDidMount() {
-
-        this.getIndustryTypeList(this.props.url)
-    }
-    // 当然父组件有新的props的 会从新渲染组件
-    componentWillReceiveProps(nextProps) {
-
-    }
-    componentWillUnmount() { }
-
-    componentDidShow() { }
-
-    componentDidHide() { }
-
-    render() {
-        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>
-
-                            <Text className='first-col'> {this.props.selectedValue.name}</Text>
-                            {/* {this.state.objectMultiArray[0] ? <Text className='first-col'> {this.state.objectMultiArray[0][this.state.multiIndex[0]].name}</Text> : null}
-                            {this.state.objectMultiArray[1] ? <Text className='second-col'> {this.state.objectMultiArray[1][this.state.multiIndex[1]].name}</Text> : null} */}
-                        </View>
-                    </View>
-                </Picker>
             </View>
 
+            <View className='button' onClick={this.deleteButton.bind(this)}>
+                <Button size='mini' className='button-dark-red'>
+                    <AtIcon value='trash' size='12' color='white'></AtIcon>
+                    删除</Button>
+            </View>
+        </View>
 
-        )
+        const selfAndUnAvaialble = localStoageUserId === this.state.userId && this.state.stateId != '1' && <View className='button-box'>
-    }
+            <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>
-}
+                <Button size='mini' className='button-green'>
+                    <AtIcon value='add' size='12' color='white'></AtIcon>
+                    新增</Button>
+            </View>
+            <View className='button' onClick={this.goToMyNeedsPage.bind(this)}>
+                <Button size='mini' className='button-green'>
+                    <AtIcon value='' size='12' color='white'></AtIcon>
+                    我的需求</Button>
+            </View>
+        </View>
+        const Avaialble = this.state.stateId === '1' && <View className='button' onClick={this.grabButtonHandler.bind(this)}>
+            <Button size='mini' className='button-orange'>抢单</Button>
+        </View>
+        const Unavailable = this.state.stateId === '2' && <View className='button'>
+            <Button size='mini' className='button-orange blur'>{this.state.stateName}</Button>
+        </View>
+        const SoldOut = this.state.stateId === '3' && <View className='button'>
+            <Button size='mini' className='button-orange blur'>{this.state.stateName}</Button>
+        </View>
 
-export default Interaction
+        const ButtonElement = selfAndAvailable || selfAndUnAvaialble || Avaialble || Unavailable || SoldOut