店铺分类组件 支付宝

src/app.js

@@ -20,13 +20,12 @@ class App extends Component {
   config = {
     pages: [
       //'pages/index/index', // index页面 
-   
+
-      'pages/goodsPublish/goodsPublish',// 商品发布页面 ---------------------
       'pages/home/home',//首页 ---------------------
       'pages/login/login',//登入页面 ---------------------
       'pages/shop/shop',//店铺页面 ---------------------
       'pages/goods/goods',// 商品页面 ---------------------
-     
+      'pages/goodsPublish/goodsPublish',// 商品发布页面 ---------------------
       'pages/supplyDemandPublish/supplyDemandPublish',// 供求发布页面 ---------------------
       'pages/mySupplyDemand/mySupplyDemand',// 我的供求列表页面 ---------------------
       'pages/myGoodsEdit/myGoodsEdit',// 我的商品编辑页面 ---------------------
@@ -90,7 +89,7 @@ class App extends Component {
   }
 
   componentDidMount() {
- 
+
   }
 
   componentDidShow() { }

src/component/AliShopTypeInteraction/AliShopTypeInteraction.js

@@ -0,0 +1,235 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text, Picker } from '@tarojs/components'
+import { AtList, AtListItem, } from 'taro-ui'
+
+
+import './AliShopTypeInteraction.scss'
+import loginExpired from '../../util/loginExpired';
+import { getGlobalStorage, setGlobalStorage } from '../../util/getSetStoage';
+
+
+class ShopTypeInteractionComp extends Component {
+
+    config = {
+        navigationBarTitleText: 'shopTypeInteractionComp'
+    }
+    constructor() {
+        super(...arguments);
+
+        this.state = {
+            initailMultiArray: [[{}], [{ name: '选择店铺分类', id: '' }]],
+            multiIndex: [0, 0],
+            interactionMultiArray: [],// 联动数据
+            AliIsShowPicker:false,
+        }
+
+    }
+    // 店铺分类筛选列表GetShopTypeList
+    getShopTypeList(url) {
+        Taro.request({
+            url: url,
+            method: 'POST',
+            dataType: 'json',
+            data: {
+                id: this.props.shopId,
+            },
+            header: {
+                'content-type': 'application/x-www-form-urlencoded',
+                'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
+            .then(res => {
+                // console.log('店铺分类目录', res)
+                // this.formatIndustryType(res.data.data)
+                // this.formatIndustTypeInit(res.data.data)
+                if (res.data.err_code === 0) {
+                    if (res.data.data === null) {
+                        return
+                    }
+                    console.log('店铺分类目录', res)
+                    if (!getGlobalStorage('shopTypeObject')) {
+                        setGlobalStorage('shopTypeObject', res.data.data)
+                    }
+                    this.setState({
+                        interactionMultiArray: this.interactionData(res.data.data),
+                        initailMultiArray: this.initializedData(res.data.data),
+                    }, () => {
+
+                        console.log('state', this.state.initailMultiArray, this.state.interactionMultiArray)
+                        // this.passDataToParent(this.state.initailMultiArray)
+                        //返回初始选项在 在商品编辑页面 
+
+
+                        // console.log('联动数据', this.state.interactionMultiArray)
+                        // console.log('初始化数据', this.state.initailMultiArray)
+                        // console.log('index初始化', this.state.multiIndex)
+
+
+                    }) // 用递归来整理无限层次的数据
+                } else if (res.data.err_code === 88888) {
+                    loginExpired(res)
+                } else {
+                    console.log('店铺分类目录获取失败', res)
+                }
+            }
+            )
+            .catch(error => {
+                console.log('店铺分类请求错误', error)
+            })
+    }
+
+
+    // 递归整理无限层联动数据
+    interactionData(data) {
+        let parentArrayHolder = []
+        const keys = Object.keys(data)
+        for (let key of keys) {
+            let childrenArrayHolder = []
+            let parent = { name: data[key].n, id: key }
+            parentArrayHolder.push(parent)
+            for (let childItem of data[key].c) {
+                let child = { name: childItem.n, id: childItem.id }
+                childrenArrayHolder.push(child)
+            }
+            parent.children = childrenArrayHolder
+        }
+        return parentArrayHolder
+    }
+    // 递归整理无限层初始数据
+    initializedData(data) {
+        let outter = []
+        let inner = []
+        const keys = Object.keys(data)
+        for (let key of keys) {
+            outter.push({ name: data[key].n, id: key })
+            for (let child of data[key].c) {
+                inner.push({ name: child.n, id: child.id })
+            }
+        }
+        return [outter, inner]
+    }
+
+    // 触动联动筛选
+    bindMultiPickerCol(e) {
+        console.log('e', e)
+        console.log('修改的列为', e.detail.column, '，值为', e.detail.value)
+        const data = {
+            multiArray: this.state.initailMultiArray,
+            multiIndex: this.state.multiIndex
+        }
+        data.multiIndex[e.detail.column] = e.detail.value
+        if (e.detail.column == 0) {
+            for (let index in data.multiArray[0]) {
+                const indexNumber = Number(index)
+                if (indexNumber === data.multiIndex[0]) {
+                    data.multiArray[1] = this.state.interactionMultiArray[indexNumber].children
+                }
+            }
+        }
+        this.setState({ multiIndex: data.multiIndex })
+    }
+    bindMultiPickerChange(e) {
+        //  console.log('picker发送选择改变，携带值为', e.detail.value)
+        if (getGlobalStorage('shopInfo').shop_id) {
+            this.setState({
+                multiIndex: e.detail.value,
+            }, () => {
+                //判断如果interactionMultiArray 的子类为空 那就取父类， 反之取子类
+                let industryTypeSelected
+                industryTypeSelected = this.state.interactionMultiArray[this.state.multiIndex[0]].children[this.state.multiIndex[1]]
+                this.passDataToParent(industryTypeSelected)
+            })
+
+        }
+
+
+    }
+
+
+
+    //--------------------结束-行业分类picker
+    passDataToParent(industryTypeSelected) {
+        this.props.onPassDataToChild(industryTypeSelected)
+    }
+    aliBindMultiPickerCol(e) {
+        console.log('e', e)
+        console.log('，值为', e.detail.value)
+
+        this.setState({ multiIndex: e.detail.value })
+    }
+
+    aliCancelButton() {
+        this.setState({
+            AliIsShowPicker:false
+        })
+    }
+    aliConfirmButton() {
+        this.setState({
+            AliIsShowPicker:false
+        })
+        let result = this.state.interactionMultiArray[this.state.multiIndex[0]].children[this.state.multiIndex[1]]
+
+        this.passDataToParent(result)
+    }
+    invokeAliPicker() {
+        this.setState({
+            AliIsShowPicker:true
+        })
+    }
+
+    componentDidMount() {
+        this.getShopTypeList(this.props.url)
+    }
+
+    // 当然父组件有新的props的 会从新渲染组件
+    componentWillReceiveProps(nextProps) {
+        console.log('next props', nextProps)
+
+    }
+    componentWillUnmount() { }
+
+    componentDidShow() { }
+
+    componentDidHide() { }
+
+    render() {
+        return (
+            <View className='shop-interaction' >
+                <View className='picker-wrapper' onClick={this.invokeAliPicker.bind(this)} >
+                    <AtList>
+                        <AtListItem title='店铺分类' extraText={this.props.selectedValue.name} arrow='right' />
+                    </AtList>
+                </View>
+                {this.state.AliIsShowPicker ? <View> 
+                    <View className='curtain' onClick={this.aliCancelButton.bind(this)} > </View>
+
+                    <View class='ali-picker-container'>
+                        <View className='button'>
+                            <View className='cancel-button' onClick={this.aliCancelButton.bind(this)}>取消</View>
+                            <View className='confirm-button' onClick={this.aliConfirmButton.bind(this)}>确定</View>
+                        </View>
+                        <picker-view value={this.state.multiIndex} onChange={this.aliBindMultiPickerCol.bind(this)}>
+                            <picker-view-column>
+                                {this.state.interactionMultiArray.map((item, index) => {
+                                    return <View key={index}>{item.name}</View>
+                                })}
+                            </picker-view-column>
+                            <picker-view-column>
+                                {this.state.interactionMultiArray[this.state.multiIndex[0]].children.map((item, index) => {
+                                    return <View key={index}>{item.name}</View>
+                                })}
+                            </picker-view-column>
+
+                        </picker-view>
+                    </View ></View> : null}
+
+
+            </View>
+
+
+        )
+    }
+}
+
+export default ShopTypeInteractionComp

src/component/AliShopTypeInteraction/AliShopTypeInteraction.scss

@@ -0,0 +1,83 @@
+.page-section{
+    border-bottom: 1Px solid #d6e4ef;
+    font-size:32rpx;
+
+    .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;
+    .require{
+        color:red
+    }
+   .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%
+ }
+
+}
+    }
+}
+.picker-wrapper{
+    padding-left:  20px;
+    padding-right: 20px;
+}
+.curtain{
+    height: 100%;
+    background-color: black;
+    width: 100%;
+    position: fixed;
+    z-index: 99;
+    opacity: 0.5;
+    position: fixed;
+    top: 0;
+}
+
+.ali-picker-container{
+    position: fixed;
+    width: 100%;
+    bottom: 0px;
+    background-color: #fff;
+    z-index: 100;
+    opacity: 1;
+    .button{
+        display: flex;
+        flex-direction: row;
+        padding:20px 30px;
+        border-bottom: 1px solid #d6e4ef;
+}
+        .cancel-button{
+            flex:1;
+            text-align: left;
+        }
+        .confirm-button{
+            flex:1;
+            color:#FF7142;
+            text-align: right;
+        }
+    }

src/component/clientTabBarComponent/clientTabBarComponent.js

@@ -1,47 +0,0 @@
-import Taro, { Component } from '@tarojs/taro'
-import { View } from '@tarojs/components'
-
-import { AtTabBar } from 'taro-ui'
-import './clientTabBarComponent.scss'
-
-
-
-class ClientTabBarComponent extends Component {
-    config = {
-        navigationBarTitleText: '业主底栏导航'
-    }
-
-    //http://ihome6.com/Shop-supplyShops
-    componentDidMount() {
-
-    }
-    componentWillReceiveProps(nextProps) {
-    }
-
-    componentWillUnmount() { }
-
-    componentDidShow() { }
-
-    componentDidHide() { }
-
-    render() {
-        return (
-            <View className='clientTabBarComponent'>
-                <AtTabBar
-                    fixed
-                    tabList={[
-                        { title: '首页', iconType: 'bullet-list', text: 'new' },
-                        { title: '需求发布', iconType: 'camera' },
-                        { title: '我的需求', iconType: 'folder', text: '100', max: '99' },
-                        { title: '个人中心', iconType: 'folder', text: '100', max: '99' },
-                    ]}
-                    onClick={this.handleClick.bind(this)}
-                    current={this.state.current}
-                />
-
-            </View>
-        )
-    }
-}
-
-export default ClientTabBarComponent

src/component/sellerTabBarComponent/sellerTabBarComponent.js

@@ -1,78 +0,0 @@
-import Taro, { Component } from '@tarojs/taro'
-import { View } from '@tarojs/components'
-
-import { AtTabBar } from 'taro-ui'
-import './sellerTabBarComponent.scss'
-
-
-
-class SellerTabBarComponent extends Component {
-    config = {
-        navigationBarTitleText: '店铺底栏导航'
-    }
-    constructor(){
-        this.state = {
-            current: 0,
-            options:[
-                { title: '首页', url: '/pages/home/home', iconType: 'bullet-list', text: 'new' },
-                { title: '商品发布', url: '/pages/goodsPublish/goodsPublish', iconType: 'camera' },
-                { title: '供求发布', url: '/pages/supplyDemandPublish/supplyDemandPublish', iconType: 'folder', text: '100', max: '99' },
-                { title: '我的供求', url: '/pages/mySupplyDemand/mySupplyDemand', iconType: 'folder', text: '100', max: '99' },
-                { title: '我的需求', url: '/pages/myNeeds/myNeeds', iconType: 'folder', text: '100', max: '99' }
-            ]
-           
-        }
-    }
-    handleClick(value) {
-
-        this.setState({
-            current: value
-        })
-
-        let path = this.state.options[value].url
-        Taro.navigateTo({
-            url: path,
-        })
-
-    }
-
-    componentDidMount() {
-        
-    }
-    componentWillReceiveProps(nextProps) {
-    }
-
-    componentWillUnmount() { }
-
-    componentDidShow() {
-       console.log('this.props.currentUrl',this.props.currentUrl)
-        if(this.props.currentUrl==='pages/home/home'){
-            this.setState({
-                current:0
-            })
-        }else if(this.props.currentUrl==='pages/supplyDemandPublish/supplyDemandPublish'){
-            this.setState({
-                current:2
-            })
-        }
-        
-     }
-
-    componentDidHide() { }
-
-    render() {
-        return (
-            <View className='sellerTabBarComponent'>
-                <AtTabBar
-                  fixed
-                  tabList={this.state.options}
-                  onClick={this.handleClick.bind(this)}
-                  current={this.state.current}
-                />
-
-            </View>
-        )
-    }
-}
-
-export default SellerTabBarComponent

src/component/shopTypeInteractionComp/shopTypeInteractionComp.scss

@@ -42,4 +42,4 @@
 
 }
     }
-}
+}

src/pages/goodsPublish/goodsPublish.js

@@ -1,11 +1,12 @@
 import Taro, { Component } from '@tarojs/taro'
 import { View, Text, Button } from '@tarojs/components'
-import { AtInput, AtImagePicker, AtTextarea, } from 'taro-ui'
+import { AtInput, AtTextarea, } from 'taro-ui'
 import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
 import PictureUploadComponent from '../../component/pictureUploadComponent/pictureUploadComponent'
 
 
 import ShopTypeInteractionComp from '../../component/shopTypeInteractionComp/shopTypeInteractionComp'
+import AliShopTypeInteraction from '../../component/AliShopTypeInteraction/AliShopTypeInteraction'
 import GoodsTypeInteractionComp from '../../component/goodsTypeInteractionComp/goodsTypeInteractionComp'
 
 import LoginService from '../../util/LoginService'
@@ -290,7 +291,7 @@ class GoodsPublish extends Component {
         console.log('从子组件商品分类传回来的值', value)
         this.setState({ goodsTypeSelected: value })
     }
-
+   
     componentWillMount() {
         if (!getGlobalStorage('userInfo').user_id) {
             LoginService()
@@ -380,11 +381,16 @@ class GoodsPublish extends Component {
                         </View> */}
                     </View>
                     {/* 店铺分类 */}
-                    <ShopTypeInteractionComp url={URL.GetShopCategoryList}
+                    {process.env.TARO_ENV === 'weapp' ? <ShopTypeInteractionComp url={URL.GetShopCategoryList}
                         shopId={getGlobalStorage('shopInfo') ? getGlobalStorage('shopInfo').shop_id : ''}
                         selectedValue={this.state.shopTypeSelected}
                         onPassDataToChild={this.getDataFromShopChild.bind(this)}
-                    ></ShopTypeInteractionComp>
+                    ></ShopTypeInteractionComp> : <AliShopTypeInteraction url={URL.GetShopCategoryList}
+                        shopId={getGlobalStorage('shopInfo') ? getGlobalStorage('shopInfo').shop_id : ''}
+                        selectedValue={this.state.shopTypeSelected}
+                        onPassDataToChild={this.getDataFromShopChild.bind(this)}
+                    ></AliShopTypeInteraction>
+                    }
                     {/* 店铺分类结束  */}
 
 

src/pages/goodsPublish/goodsPublish.scss

@@ -3,7 +3,7 @@ $themeColor:#FF7142;
 
 
 .goods-category{
-    padding: 10px 20px;
+    padding-top: 10px;
     .border-box{
          border-bottom: 1Px solid #d6e4ef;
          
@@ -18,6 +18,8 @@ $themeColor:#FF7142;
          }
     .img-box{
         margin-top:10Px;
+        padding-left:  20px;
+        padding-right: 20px;
          .img-container{
         border: 1Px solid #d6e4ef;
         border-radius:8rpx;
@@ -29,6 +31,8 @@ $themeColor:#FF7142;
     }
     .description-box{
          margin-top:10Px;
+         padding-left:  20px;
+         padding-right: 20px;
     }
    
 }
@@ -87,6 +91,8 @@ $themeColor:#FF7142;
 }
 .page-section{
       border-bottom: 1Px solid #d6e4ef;
+      padding-left:  20px;
+      padding-right: 20px;
      
 }
 .selected{
@@ -97,6 +103,8 @@ $themeColor:#FF7142;
 .input-box{
      border-bottom: 1Px solid #d6e4ef;
     display: flex;
+    padding-left:  20px;
+    padding-right: 20px;
 }
 .require{
     color:red;
@@ -104,5 +112,12 @@ $themeColor:#FF7142;
 
 }
 
-
+.picker-wrapper{
+   .item-content__info-title{
+       font-weight: bold
+   }
+   .item-extra__info{
+       color: black
+   }
+}
 

src/pages/grabOrderPage/grabOrderPage.js

@@ -74,10 +74,10 @@ class GrabOrderPage extends Component {
                     })
                 } else if (res.data.err_code === 88888) {
                     loginExpired(res)
-                }else{
+                } else {
                     Taro.showToast({
-                        title:res.data.err_msg,
+                        title: res.data.err_msg,
-                        icon:'none'
+                        icon: 'none'
                     })
                 }
 
@@ -112,7 +112,7 @@ class GrabOrderPage extends Component {
                     })
                     setTimeout(() => {
                         Taro.navigateBack({
-                           delta:1
+                            delta: 1
                         })
                     }, 1500);
 
@@ -156,14 +156,14 @@ class GrabOrderPage extends Component {
         // 确认抢单之后
         showLoading({
             title: '加载中'
-          })
+        })
         this.GrabDemand({ demandId: this.state.grabOrderId })
     }
 
     componentDidMount() {
         showLoading({
             title: '加载中'
-          })
+        })
         this.getGrabOrderInfo()
     }
     componentWillReceiveProps(nextProps) {
@@ -224,7 +224,7 @@ class GrabOrderPage extends Component {
                 })
                 setTimeout(() => {
                     Taro.navigateBack({
-                        delta:-1
+                        delta: -1
                     })
                 }, 1500);
             } else if (res.data.err_code === 88888) {
@@ -240,7 +240,7 @@ class GrabOrderPage extends Component {
     }
 
     render() {
-        const localStoageUserId = getGlobalStorage('userInfo')?getGlobalStorage('userInfo').user_id:''
+        const localStoageUserId = getGlobalStorage('userInfo') ? getGlobalStorage('userInfo').user_id : ''
 
         // 提示框
         const deleteModalWindowElement = <AtModal isOpened={this.state.isDeleteModal}>
@@ -250,7 +250,31 @@ class GrabOrderPage extends Component {
       </AtModalContent>
             <AtModalAction>  <Button onClick={this.handleWindowModCancel.bind(this)}>取消</Button> <Button className='orange' onClick={this.handleWindowConfirm.bind(this)}>确定</Button>  </AtModalAction>
         </AtModal>
-        let ButtonElement
+
+
+        let ButtonElement = localStoageUserId === this.state.userId ? <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-orange'>
+                    <AtIcon value='' size='12' color='white'></AtIcon>
+                    我的需求</Button>
+            </View>
+        </View> :
+            this.state.stateId === '1' ? <View className='button-box'><View className='button' onClick={this.grabButtonHandler.bind(this)}>
+                <Button size='mini' className='button-orange'>抢单</Button>
+            </View></View> :
+                this.state.stateId === '2' ? <View className='button-box'><View className='button'>
+                    <Button size='mini' className='button-orange blur'>已抢单</Button>
+                </View></View> :
+                    <View className='button-box'><View className='button'>
+                        <Button size='mini' className='button-orange blur'>已抢光</Button>
+                    </View></View>
+
+
         // if (localStoageUserId === this.state.userId && this.state.stateId === '1') {
         //     ButtonElement = <View className='button-box'>
         //         <View className='button' onClick={this.goMyNeedsPublishPage.bind(this)}>
@@ -325,7 +349,7 @@ class GrabOrderPage extends Component {
                 {modalMessageGrabElement}
                 {deleteModalWindowElement}
                 {this.state.isShowRendering ? <RenderingView rendering={this.state.renderingImage}></RenderingView> : null}
-                {this.state.stateId === '3' && !this.state.isShowRendering&&this.state.renderingImage.length ? <View className='button-box show-image-button'><View className='button' onClick={this.showImageButton.bind(this)}>
+                {this.state.stateId === '3' && !this.state.isShowRendering && this.state.renderingImage.length ? <View className='button-box show-image-button'><View className='button' onClick={this.showImageButton.bind(this)}>
                     <Button className='button-orange'>查看效果图</Button>
                 </View></View> : null}
                 <View className='type box'>

src/pages/myGoodsEdit/myGoodsEdit.js

@@ -1,8 +1,9 @@
 import Taro, { Component } from '@tarojs/taro'
-import { View, Text , Button} from '@tarojs/components'
+import { View, Text, Button } from '@tarojs/components'
-import { AtInput, AtImagePicker, AtTextarea,  } from 'taro-ui'
+import { AtInput, AtTextarea, } from 'taro-ui'
 
 import ShopTypeInteractionComp from '../../component/shopTypeInteractionComp/shopTypeInteractionComp'
+import AliShopTypeInteraction from '../../component/AliShopTypeInteraction/AliShopTypeInteraction'
 import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
 import PictureUploadComponent from '../../component/pictureUploadComponent/pictureUploadComponent'
 
@@ -52,7 +53,7 @@ class MyGoodsEdit extends Component {
         })
             .then(res => {
                 Taro.hideLoading()
-               
+
                 if (res.data.err_code === 0) {
                     console.log('商品详情获取成功', res)
 
@@ -72,7 +73,7 @@ class MyGoodsEdit extends Component {
                     if (getGlobalStorage('shopTypeObject')) {
                         let selectedValue = ''
                         const shopTypeObject = getGlobalStorage('shopTypeObject')
-                        console.log('shopTypeObject',shopTypeObject)
+                        console.log('shopTypeObject', shopTypeObject)
                         for (let key in shopTypeObject) {
                             for (let item of shopTypeObject[key].c) {
                                 if (item.id === res.data.goods.shop_class_id) {
@@ -88,13 +89,13 @@ class MyGoodsEdit extends Component {
                             pickerImageUrl: imageFile,
                             ImagesInfo: res.data.goodsFiles,
                             initialImageURL: imageFile,
-                            initialImagesInfo:  res.data.goodsFiles,
+                            initialImagesInfo: res.data.goodsFiles,
-                             shopTypeSelected: selectedValue,
+                            shopTypeSelected: selectedValue,
                             goodsTypeParam: res.data.goods.class_id,
                             goodId: res.data.goods.goods_id,
                         })
 
-                     }
+                    }
 
                 } else if (res.data.err_code === 88888) {
                     console.log('88888')
@@ -294,12 +295,12 @@ class MyGoodsEdit extends Component {
 
         }
     }
-      // 从图片子组件获取信息
+    // 从图片子组件获取信息
-  getImageDetails(value) {
+    getImageDetails(value) {
-    this.setState({
+        this.setState({
-      ImagesInfo: value
+            ImagesInfo: value
-    })
+        })
-  }
+    }
     shopCategoryChanged(e) {
         this.setState({
             shopCategoryCheckedPicker: this.state.shopCategoryList[e.detail.value]
@@ -376,8 +377,6 @@ class MyGoodsEdit extends Component {
         console.log('从子组件店铺分类传回来的值', value)
         this.setState({ shopTypeSelected: value })
     }
-
-
     componentDidMount() {
         showLoading({
             title: '加载中'
@@ -387,7 +386,7 @@ class MyGoodsEdit extends Component {
     }
 
     componentWillReceiveProps(nextProps) {
-        // console.log(this.props, nextProps)
+        
     }
     componentWillUnmount() { }
 
@@ -398,8 +397,10 @@ class MyGoodsEdit extends Component {
 
 
     render() {
+
         return (
             <View className='goods-publish'>
+
                 <View className='goods-category'>
                     <View className='input-box'>
                         <Text className='require'>*</Text>
@@ -444,13 +445,13 @@ class MyGoodsEdit extends Component {
                             <Text className='title'>上传图片:</Text>
                         </View>
                         <PictureUploadComponent
-            maxLength={20}
+                            maxLength={20}
-            isReceiveImageUrl={true}
+                            isReceiveImageUrl={true}
-            initialImageURL={this.state.initialImageURL}
+                            initialImageURL={this.state.initialImageURL}
-            initialImagesInfo={this.state.initialImagesInfo}
+                            initialImagesInfo={this.state.initialImagesInfo}
-            url={ URL.UploadGoodsPorductImage}
+                            url={URL.UploadGoodsPorductImage}
-            onGetImageDetails={this.getImageDetails.bind(this)}
+                            onGetImageDetails={this.getImageDetails.bind(this)}
-          />
+                        />
                         {/* <View className='img-container'>
                             <AtImagePicker
                                 multiple
@@ -462,12 +463,18 @@ class MyGoodsEdit extends Component {
                         </View> */}
                     </View>
                     {/* 店铺分类 */}
-                    <ShopTypeInteractionComp url={URL.GetShopCategoryList}
+                    {process.env.TARO_ENV === 'weapp' ? <ShopTypeInteractionComp url={URL.GetShopCategoryList}
-                        shopId={getGlobalStorage('shopInfo')?getGlobalStorage('shopInfo').shop_id:''}
+                        shopId={getGlobalStorage('shopInfo') ? getGlobalStorage('shopInfo').shop_id : ''}
                         selectedValue={this.state.shopTypeSelected}
-                        onPassDataToChild={this.getDataFromShopChild.bind(this)}
+                        onPassDataToChild={this.getDataFromShopChild.bind(this)
+                        }></ShopTypeInteractionComp> : <AliShopTypeInteraction url={URL.GetShopCategoryList}
+                            shopId={getGlobalStorage('shopInfo') ? getGlobalStorage('shopInfo').shop_id : ''}
+                            selectedValue={this.state.shopTypeSelected}
+                            onPassDataToChild={this.getDataFromShopChild.bind(this)}
+                          
+                        ></AliShopTypeInteraction>}
+
 
-                    ></ShopTypeInteractionComp>
                     {/* 店铺分类结束  */}
 
                     <View className='description-box'>

src/pages/myGoodsEdit/myGoodsEdit.scss

@@ -3,24 +3,28 @@ $themeColor:#FF7142;
 
 
 .goods-category{
-    padding: 10px 20px;
+    padding-top: 10px;
     .border-box{
          border-bottom: 1Px solid #d6e4ef;
          
-    
     }
     .at-input__container{
              color:black;
              font-weight: bold;
+             padding-left:  20px;
+             padding-right: 20px;
              .at-input__input{
                  font-weight: normal
              }
          }
     .img-box{
         margin-top:10Px;
+        padding-left:  20px;
+        padding-right: 20px;
          .img-container{
         border: 1Px solid #d6e4ef;
         border-radius:8rpx;
+       
 
     }
     }
@@ -29,6 +33,8 @@ $themeColor:#FF7142;
     }
     .description-box{
          margin-top:10Px;
+         padding-left:  20px;
+         padding-right: 20px;
     }
    
 }
@@ -97,6 +103,8 @@ $themeColor:#FF7142;
 .input-box{
      border-bottom: 1Px solid #d6e4ef;
     display: flex;
+    padding-left:  20px;
+    padding-right: 20px;
 }
 .require{
     color:red;

src/pages/myNeeds/myNeeds.js

@@ -187,21 +187,21 @@ class MyNeeds extends Component {
 
   // 搜索按钮
   onSearchButtonHandler() {
-    showLoading({ title: '加载中' }).then(() => {
+    showLoading({ title: '加载中' })
-      this.setState({ currentPage: 1, loadMorePageIndex: 1 }, () => {
+    this.setState({ currentPage: 1, loadMorePageIndex: 1 }, () => {
-        this.getMyNeedsList({
+      this.getMyNeedsList({
-          curr_page: this.state.currentPage,
+        curr_page: this.state.currentPage,
-          page_count: this.state.pageCount,
+        page_count: this.state.pageCount,
-          sd_type: this.state.needsTypeSelected.id,
+        sd_type: this.state.needsTypeSelected.id,
-          sd_title: this.state.title,
+        sd_title: this.state.title,
-          update_dateL: this.state.startDateSel,
+        update_dateL: this.state.startDateSel,
-          update_dateU: this.state.endDateSel,
+        update_dateU: this.state.endDateSel,
-          class_id: this.state.industryTypeSelected.id === '-1' ? '' : this.state.industryTypeSelected.id,
+        class_id: this.state.industryTypeSelected.id === '-1' ? '' : this.state.industryTypeSelected.id,
-          state: this.state.needsStateSelected.id
+        state: this.state.needsStateSelected.id
-        })
       })
     })
 
+
   }
   // 新增我的需求
   addNeeds() {

src/serviceAPI.config.js

@@ -1,6 +1,6 @@
 
  const LOCALURL = "http://192.168.1.230/"
-  //const LOCALURL = "https://www.ihome6.com/"
+  // const LOCALURL = "https://www.ihome6.com/"
 
 const URL = {
   Base: LOCALURL,

todo list.json

@@ -19,66 +19,202 @@ bug： 商品编辑 增加图片后 图片顺序乱了
 等待后台--- 单个我的商品页面的图片顺序，单个我的需求页面的接口, 当个我哦的需求编辑页面的接口
 <View className='details-box'>
 
+// shop interaction
+import Taro, { Component } from '@tarojs/taro'
+import { View, Text,Picker  } from '@tarojs/components'
 
-{/* 大类 */}
-<AtTabs className='alltabs' animated={false} current={this.state.current} tabList={mainTabList} onClick={this.handleClick.bind(this)}>
-    <AtTabsPane style='color:red' current={this.state.current} index={0} >
-        <View style='background-color: #FAFBFC;' >
 
-            <View className='description-title'>商品细节：</View>
+import './shopTypeInteractionComp.scss'
-            <View className='description-img'>
+import loginExpired from '../../util/loginExpired';
-                {itemDescriptionPicsElementArray}
+import { getGlobalStorage,setGlobalStorage } from '../../util/getSetStoage';
 
+
+class ShopTypeInteractionComp extends Component {
+
+    config = {
+        navigationBarTitleText: 'shopTypeInteractionComp'
+    }
+    constructor() {
+        super(...arguments);
+
+        this.state = {
+            initailMultiArray: [[{}], [{ name: '选择店铺分类', id: '' }]],
+            multiIndex: [0, 0],
+            interactionMultiArray: [],// 联动数据
+        }
+
+    }
+    // 店铺分类筛选列表GetShopTypeList
+    getShopTypeList(url) {
+        Taro.request({
+            url: url,
+            method: 'POST',
+            dataType: 'json',
+            data: {
+                id: this.props.shopId,
+            },
+            header: {
+                'content-type': 'application/x-www-form-urlencoded',
+                'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'),
+                'X-Requested-With': 'XMLHttpRequest'
+            }
+        })
+            .then(res => {
+                // console.log('店铺分类目录', res)
+                // this.formatIndustryType(res.data.data)
+                // this.formatIndustTypeInit(res.data.data)
+                if (res.data.err_code === 0) {
+                    if (res.data.data === null) {
+                        return
+                    }
+                    console.log('店铺分类目录', res)
+                    if(!getGlobalStorage('shopTypeObject')){
+                        setGlobalStorage('shopTypeObject',res.data.data)
+                    }
+                    this.setState({
+                        interactionMultiArray: this.interactionData(res.data.data),
+                        initailMultiArray: this.initializedData(res.data.data)[0],
+                    }, () => {
+
+                        console.log('state',this.state.initailMultiArray,this.state.interactionMultiArray)
+                        // this.passDataToParent(this.state.initailMultiArray)
+                        //返回初始选项在 在商品编辑页面 
+                       
+
+                        // console.log('联动数据', this.state.interactionMultiArray)
+                        // console.log('初始化数据', this.state.initailMultiArray)
+                        // console.log('index初始化', this.state.multiIndex)
+
+
+                    }) // 用递归来整理无限层次的数据
+                }else if (res.data.err_code === 88888) {
+                    loginExpired(res)
+                } else {
+                    console.log('店铺分类目录获取失败', res)
+                }
+            }
+            )
+            .catch(error => {
+                console.log('店铺分类请求错误', error)
+            })
+    }
+
+
+    // 递归整理无限层联动数据
+    interactionData(data) {
+        let parentArrayHolder = []
+        const keys = Object.keys(data)
+        for (let key of keys) {
+            let childrenArrayHolder = []
+            let parent = { name: data[key].n, id: key }
+            parentArrayHolder.push(parent)
+            for (let childItem of data[key].c) {
+                let child = { name: childItem.n, id: childItem.id }
+                childrenArrayHolder.push(child)
+            }
+            parent.children = childrenArrayHolder
+        }
+        return parentArrayHolder
+    }
+    // 递归整理无限层初始数据
+    initializedData(data) {
+        let outter = []
+        let inner = []
+        const keys = Object.keys(data)
+        for (let key of keys) {
+            outter.push({ name: data[key].n, id: key })
+            for (let child of data[key].c) {
+                inner.push({ name: child.n, id: child.id })
+            }
+        }
+        return [outter, inner]
+    }
+
+    // 触动联动筛选
+    bindMultiPickerCol(e) {
+        console.log('修改的列为', e.detail.column, '，值为', e.detail.value)
+        const data = {
+            multiArray: this.state.initailMultiArray,
+            multiIndex: this.state.multiIndex
+        }
+        data.multiIndex[e.detail.column] = e.detail.value
+        if (e.detail.column == 0) {
+            for (let index in data.multiArray[0]) {
+                const indexNumber = Number(index)
+                if (indexNumber === data.multiIndex[0]) {
+                    data.multiArray[1] = this.state.interactionMultiArray[indexNumber].children
+                }
+            }
+        }
+        this.setState({ multiIndex: data.multiIndex })
+    }
+    bindMultiPickerChange(e) {
+        //  console.log('picker发送选择改变，携带值为', e.detail.value)
+        if (getGlobalStorage('shopInfo').shop_id) {
+            this.setState({
+                multiIndex: e.detail.value,
+            }, () => {
+                //判断如果interactionMultiArray 的子类为空 那就取父类， 反之取子类
+                let industryTypeSelected
+                industryTypeSelected = this.state.interactionMultiArray[this.state.multiIndex[0]].children[this.state.multiIndex[1]]
+                this.passDataToParent(industryTypeSelected)
+            })
+
+        }
+
+
+    }
+
+
+    //--------------------结束-行业分类picker
+    passDataToParent(industryTypeSelected) {
+        this.props.onPassDataToChild(industryTypeSelected)
+    }
+
+
+    componentDidMount() {
+        this.getShopTypeList(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.bindMultiPickerCol.bind(this)}
+                    value={this.state.multiIndex}
+                    range={this.state.initailMultiArray}
+                >
+                    <View class='picker type'>
+                        <View className='title-box'>
+                            <Text className='require'>*</Text>
+                            <Text className='title'>店铺分类:</Text>
+                            <Text className='first-col'>
+                                {this.props.selectedValue.name}
+                            </Text>
+                        </View>
+                    </View>
+                </Picker>
             </View>
 
-        </View>
-    </AtTabsPane>
-    <AtTabsPane current={this.state.current} index={1}>
-        <View style='padding: 1px 0px 100px;background-color: #FAFBFC;text-align: center;'>
-            { /*子标签类*/}
-            <AtSegmentedControl selectedColor='#FF9500'
-                values={['全部', '好评', '中评', '差评', '公开', '匿名']}
-                onClick={this.onClick.bind(this)}
-                current={this.state.subCurrent}
-            />
-            {
-                this.state.subCurrent === 0
-                    ? <View className='tab-content'>
-                        <Text className='title'>全部</Text>
-                    </View>
-                    : null
-            }
-            {
-                this.state.subCurrent === 1
-                    ? <View className='tab-content'>好评</View>
-                    : null
-            }
-            {
-                this.state.subCurrent === 2
-                    ? <View className='tab-content'>中评</View>
-                    : null
-            }
-            {
-                this.state.subCurrent === 3
-                    ? <View className='tab-content'>差评</View>
-                    : null
-            }
-            {
-                this.state.subCurrent === 4
-                    ? <View className='tab-content'>公开</View>
-                    : null
-            }
-            {
-                this.state.subCurrent === 5
-                    ? <View className='tab-content'>匿名</View>
-                    : null
-            }
 
-        </View>
+        )
-    </AtTabsPane>
+    }
-    <AtTabsPane current={this.state.current} index={2}>
+}
-        <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
+
-    </AtTabsPane>
+export default ShopTypeInteractionComp
-</AtTabs>
+
 
-</View>