diff --git a/src/component/AliShopTypeInteraction/AliShopTypeInteraction.js b/src/component/AliShopTypeInteraction/AliShopTypeInteraction.js index 2fef4ae..d0a5090 100644 --- a/src/component/AliShopTypeInteraction/AliShopTypeInteraction.js +++ b/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 ( - - - - - - - {this.state.AliIsShowPicker ? - - - - - 取消 - 确定 - - - - {this.state.interactionMultiArray.map((item, index) => { - return {item.name} - })} - - - {this.state.interactionMultiArray[this.state.multiIndex[0]].children.map((item, index) => { - return {item.name} - })} - - - - : null} + componentDidHide() { } + render() { + return ( + + + + + + + {this.state.AliIsShowPicker ? + + + + 取消 + 确定 + + + {this.state.interactionMultiArray.map((item, index) => { + return {item.name} + })} + + + {this.state.interactionMultiArray[this.state.multiIndex[0]].children.map((item, index) => { + return {item.name} + })} + + + + : null} - ) - } + + + + ) + } } export default ShopTypeInteractionComp diff --git a/src/component/aliIndustryTypeInteraction/aliIndustryTypeInteraction.js b/src/component/aliIndustryTypeInteraction/aliIndustryTypeInteraction.js index a1f9d4c..232d595 100644 --- a/src/component/aliIndustryTypeInteraction/aliIndustryTypeInteraction.js +++ b/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) diff --git a/src/pages/shop/shop.js b/src/pages/shop/shop.js index 3c110c0..bbebd13 100644 --- a/src/pages/shop/shop.js +++ b/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 { > : } - - - + 店铺全部分类 diff --git a/src/pages/shop/shop.scss b/src/pages/shop/shop.scss index 11ad162..4dd74d7 100644 --- a/src/pages/shop/shop.scss +++ b/src/pages/shop/shop.scss @@ -59,7 +59,8 @@ $themeColor:#FF7142; position: relative; .interaction{ position: absolute; - opacity: 0; + // opacity: 0; + top:-100px; } }