支付宝 店铺页面 分类修改

src/component/AliShopTypeInteraction/AliShopTypeInteraction.js

@@ -10,227 +10,246 @@ import { getGlobalStorage, setGlobalStorage } from '../../util/getSetStoage';
 
 class ShopTypeInteractionComp extends Component {
 
-    config = {
-        navigationBarTitleText: 'shopTypeInteractionComp'
-    }
-    constructor() {
-        super(...arguments);
+  config = {
+    navigationBarTitleText: 'shopTypeInteractionComp'
+  }
+  constructor() {
+    super(...arguments);
 
-        this.state = {
-            initailMultiArray: [[{}], [{ name: '选择店铺分类', id: '' }]],
-            multiIndex: [0, 0],
-            interactionMultiArray: [],// 联动数据
-            AliIsShowPicker:false,
+    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('店铺分类目录ali', 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
     }
-    // 店铺分类筛选列表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('店铺分类目录ali', 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)
-            })
+    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]
+  }
 
-
-    // 递归整理无限层联动数据
-    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
+  // 触动联动筛选
+  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
         }
-        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)
-            })
-
-        }
-
+    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 })
+
+  //--------------------结束-行业分类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() {
+        // 只有店铺页面才有onAliCurtainValueFromChild
+
+    if (this.props.hasOwnProperty('onAliCurtainValueFromChild')) {
+      this.props.onAliCurtainValueFromChild(false)
+    } else {
+      this.setState({
+        AliIsShowPicker: false
+      })
     }
 
-    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() {
-      console.log('clicked')
-        this.setState({
-            AliIsShowPicker:true
-        })
+  }
+  aliConfirmButton() {
+    // 只有店铺页面才有onAliCurtainValueFromChild
+    if (this.props.hasOwnProperty('onAliCurtainValueFromChild')) {
+      this.props.onAliCurtainValueFromChild(false)
+    } else {
+      this.setState({
+        AliIsShowPicker: false
+      })
     }
 
-    componentDidMount() {
-        this.getShopTypeList(this.props.url)
+    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) {
+     // 只有店铺页面才有isShowCurtain
+
+    if (nextProps.hasOwnProperty('isShowCurtain')) {
+      this.setState({
+        AliIsShowPicker: nextProps.isShowCurtain
+      })
     }
 
-    // 当然父组件有新的props的 会从新渲染组件
-    componentWillReceiveProps(nextProps) {
+  }
+  componentWillUnmount() { }
 
+  componentDidShow() { }
 
-    }
-    componentWillUnmount() { }
-
-    componentDidShow() { }
-
-    componentDidHide() { }
-
-    render() {
-        return (
-            <View className='shop-interaction' >
-                <View className='picker-wrapper' onClick={this.invokeAliPicker.bind(this)} >
-                    <AtList>
-                        <AtListItem hasBorder={false} 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 ali-blue-color' 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}
+  componentDidHide() { }
 
+  render() {
+    return (
+      <View className='shop-interaction' >
+        <View className='picker-wrapper' onClick={this.invokeAliPicker.bind(this)} >
+          <AtList>
+            <AtListItem hasBorder={false} 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 ali-blue-color' 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/aliIndustryTypeInteraction/aliIndustryTypeInteraction.js

@@ -153,7 +153,7 @@ class AliIndustryTypeInteraction extends Component {
         const child = this.state.interactionMultiArray[this.state.multiIndex[0]].children[this.state.multiIndex[1]]
         child.id ? this.props.onPassDataToChild(child) : this.props.onPassDataToChild(parent)
     }
-   
+
     aliBindMultiPickerCol(e) {
         console.log('e', e)
         console.log('，值为', e.detail.value)

src/pages/shop/shop.js

@@ -76,6 +76,7 @@ class Shop extends Component {
       // 地图的经度和维度
       longitude: '',
       latitude: '',
+      aliShowCurtain:false
 
 
     }
@@ -573,6 +574,18 @@ class Shop extends Component {
 
     })
   }
+  // 这个函数只针对店铺页面
+  aliCurtainHandler(){
+    this.setState({
+      aliShowCurtain:!this.state.aliShowCurtain
+    })
+  }
+  // 这个函数只针对店铺页面
+  getAliCurtainValueFromChild(value){
+    this.setState({
+      aliShowCurtain:value
+    })
+  }
   componentDidMount() {
     showLoading({ title: '加载中' })
     //页面加载之后 得到指定店铺的商品 和 筛选标签
@@ -816,13 +829,13 @@ class Shop extends Component {
                 ></ShopTypeInteractionComp> : <AliShopTypeInteraction url={URL.GetShopCategoryList}
                   shopId={getGlobalStorage('shopInfo') ? getGlobalStorage('shopInfo').shop_id : ''}
                   // selectedValue={this.state.shopTypeSelected}
+                  isShowCurtain={this.state.aliShowCurtain}
                   onPassDataToChild={this.getDataFromShopChild.bind(this)}
+                  onAliCurtainValueFromChild={this.getAliCurtainValueFromChild.bind(this)}
                 ></AliShopTypeInteraction>}
-
-
               </View>
 
-              <View >
+              <View onClick={this.aliCurtainHandler.bind(this)} >
                 <Text className='text'>
                   店铺全部分类
                                 </Text>

src/pages/shop/shop.scss

@@ -59,7 +59,8 @@ $themeColor:#FF7142;
             position: relative;
             .interaction{
                 position: absolute;
-                opacity: 0;
+                // opacity: 0;
+                top:-100px;
 
             }
         }