From 567782f8ead4a706063812b5f80e5a6895126fe6 Mon Sep 17 00:00:00 2001 From: Maoqiang Zheng Date: Mon, 21 Jan 2019 17:25:14 +0800 Subject: [PATCH] =?UTF-8?q?=E5=9B=9B=E7=BA=A7=E8=81=94=E5=8A=A8bug=20fixed?= =?UTF-8?q?=20=E3=80=82=E5=BA=97=E9=93=BA=E8=AF=A6=E6=83=85=E5=9C=B0?= =?UTF-8?q?=E5=9B=BE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/img/location.png | Bin 0 -> 5890 bytes .../goodsTypeInteractionComp.js | 73 +--- .../interactionComponent.js | 225 ++++++------- .../shopTypeInteractionComp.js | 207 +++++------- src/pages/allDemanding/allDemanding.js | 2 +- src/pages/allDemanding/allDemanding.scss | 8 +- src/pages/home/home.js | 54 +-- src/pages/shop/shop.js | 235 +++++++------ src/pages/shop/shop.scss | 15 +- src/todo list.txt | 316 +++++++----------- 10 files changed, 437 insertions(+), 698 deletions(-) create mode 100644 src/assets/img/location.png diff --git a/src/assets/img/location.png b/src/assets/img/location.png new file mode 100644 index 0000000000000000000000000000000000000000..d17ac9c50d38d2868ac7f7119886e4793656b9e8 GIT binary patch literal 5890 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 P+gMs^I;v$)t>6D2&M6wA literal 0 HcmV?d00001 diff --git a/src/component/goodsTypeInteractionComp/goodsTypeInteractionComp.js b/src/component/goodsTypeInteractionComp/goodsTypeInteractionComp.js index 2ec1b2e..8a75292 100644 --- a/src/component/goodsTypeInteractionComp/goodsTypeInteractionComp.js +++ b/src/component/goodsTypeInteractionComp/goodsTypeInteractionComp.js @@ -19,9 +19,9 @@ class GoodsTypeInteractionComp extends Component { this.state = { ///---行业分类 开始 - initailMultiArray: [[{ class_name: '选择商品分类', class_id: '' }], [], []], + initailMultiArray: [[{ class_name: '选择商品分类', class_id: '' }], [], []], // 初始化底部数据 multiIndex: [0, 0, 0, 0],// 默认联动列数为4个并且每一列都是第一行 - interactionMultiArray: [], + interactionMultiArray: [],// 联动 ///---行业分类 结束 @@ -49,8 +49,10 @@ class GoodsTypeInteractionComp extends Component { multiIndex: this.recursionDepth(res.data.data), initailMultiArray: this.recursionInitialized(res.data.data).reverse() }, () => { - console.log('联动数据', this.state.interactionMultiArray) - console.log('初始化数据', this.state.initailMultiArray) + initialDataArray=[]// 把全局变变量赋值给state之后,初始化商品分类为空, 不然第二次进去的时候会自动添加进去 + // console.log('联动数据', this.state.interactionMultiArray) + // console.log('初始化数据', this.state.initailMultiArray) + }) // 用递归来整理无限层次的数据 @@ -66,67 +68,7 @@ class GoodsTypeInteractionComp extends Component { - // 第一种formate 用于底部弹层滚动时的数据 - formatIndustryType(data) { - const newIndustryType = [] - if (data) { - for (let outter of data) { - let outterObject = { name: outter.class_name, id: outter.class_id, children: [] } - if (outter.children) { - for (let middler of outter.children) { - const middleObject = { name: middler.class_name, id: middler.class_id, children: [] } - outterObject.children.push(middleObject) - if (middler.children) { - for (let inner of middler.children) { - const innerObject = { name: inner.class_name, id: inner.class_id, children: [] } - middleObject.children.push(innerObject) - if (inner.children) { - for (let final of inner.children) { - innerObject.children.push({ name: final.class_name, id: final.class_id }) - } - } else { - innerObject.children.push({ name: '', id: '' }) - } - } - } else { - middleObject.children.push({ name: '', id: '' }) - } - } - } else { - outterObject.children.push({ name: '', id: '', children: [] }) - } - newIndustryType.push(outterObject) - } - } else { - console.log('店铺分类数据问题') - } - this.setState({ interactionMultiArray: newIndustryType }, () => { - console.log('滚动时的数据', this.state.interactionMultiArray) - }) - } - // 第二种format 用于底部弹层的初始化数据 - formatIndustTypeInit(data) { - const firstArray = [] - const secondArray = [] - const thirdArray = [] - for (let outter of data) { - firstArray.push({ name: outter.class_name, id: outter.class_id }) - if (outter.children) { - for (let middler of outter.children) { - secondArray.push({ name: middler.class_name, id: middler.class_id }) - if (middler.children) { - for (let inner of middler.children) { - thirdArray.push({ name: inner.class_name, id: inner.class_id }) - } - } - } - } - } - // 这里不能加入secondArray,和thirdArray 会有bug - this.setState({ initailMultiArray: [firstArray, secondArray, thirdArray] }, () => { - console.log('初始化数据', this.state.initailMultiArray) - }) - } + //联动确认 bindMultiPickerChange(e) { console.log('e', e) @@ -352,6 +294,7 @@ class GoodsTypeInteractionComp extends Component { componentDidMount() { this.getProductCateList(this.props.url) + } // 当然父组件有新的props的 会从新渲染组件 diff --git a/src/component/interactionComponent/interactionComponent.js b/src/component/interactionComponent/interactionComponent.js index 1f340b9..ee963e5 100644 --- a/src/component/interactionComponent/interactionComponent.js +++ b/src/component/interactionComponent/interactionComponent.js @@ -6,6 +6,9 @@ import { Picker } from 'taro-ui' import './interactionComponent.scss' + +let maxDepth = 0 +let initialDataArray = [] class Interaction extends Component { config = { @@ -16,9 +19,9 @@ class Interaction extends Component { this.state = { ///---行业分类 开始 - objectMultiArray: '', + initailMultiArray: '',// 初始化底部数据 multiIndex: [0, 0], - formatInWindow: [], + interactionMultiArray: [],// 联动 ///---行业分类 结束 } @@ -36,146 +39,112 @@ class Interaction extends Component { 'X-Requested-With': 'XMLHttpRequest' } }).then(res => { - // console.log('行业分类列表', res) - this.formatIndustryType(res.data.data) - this.formatIndustTypeInit(res.data.data) + if (res.data.err_msg === 'success') { + console.log('行业分类目录', res) + let initailMultiArray = this.recursionInitialized(res.data.data) + initialDataArray[1].unshift({ name: '全部', id: '-1' }) // 默认 + + this.setState({ + initailMultiArray: initailMultiArray.reverse(), + interactionMultiArray: [{ name: '全部', id: '-1', children: [{ name: '', id: '' }] }, ...this.recursionInteraction(res.data.data)], + multiIndex: this.recursionDepth(res.data.data), + + }, () => { + initialDataArray = []// 把全局变变量赋值给state之后,初始化商品分类为空, 不然第二次进去的时候会自动添加进去 + // console.log('联动数据', this.state.interactionMultiArray) + // console.log('初始化数据', this.state.initailMultiArray) + + + }) // 用递归来整理无限层次的数据 - }).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 }) - } + console.log('行业分类请求没有成功', res) } } - this.setState({ objectMultiArray: [firstArray, secondArray] }, () => { - }) - + ) + .catch(error => { + console.log('行业分类请求错误', error) + }) } - //--------------------开始-行业分类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]] + // 递归整理无限层联动数据 + recursionInteraction(data) { + let arrayTem = [] + for (let items of data) { + arrayTem.push({ name: items.class_name, id: items.class_id }) + if (items.child.length) { + arrayTem[arrayTem.length - 1].children = [{ name: '可选', id: '' }, ...this.recursionInteraction(items.child)] + } else { + arrayTem[arrayTem.length - 1].children = [{ name: '', id: '' }] + } + } + return arrayTem // 返回联动数据 + // return arrayTem + } + // 递归整理无限层初始数据 + recursionInitialized(data) { + const arrayTem = [] + const childrenHolderArray = [] + if (data.length) { + for (let item of data) { + arrayTem.push({ name: item.class_name, id: item.class_id }) + item.child.length ? childrenHolderArray.push(...item.child) : null + } + this.recursionInitialized(childrenHolderArray) } - // console.log('picker发送选择改变,携带值为', e.detail.value) - - this.setState({ - multiIndex: e.detail.value, - }, () => { - this.passDataToParent(industryTypeSelected) - }) - + arrayTem.length ? initialDataArray.push(arrayTem) : null // 数组为空则不添加 + return initialDataArray } - bindMulPickerColChge(e) { - // console.log('修改的列为', e.detail.column, ',值为', e.detail.value) + // 递归整理无限层层次 + recursionDepth(data) { + const arrayTem = [] + const childrenHolderArray = [] + if (data.length) { + for (let item of data) { + arrayTem.push({ name: item.class_name, id: item.class_id }) + item.child.length ? childrenHolderArray.push(...item.child) : null + } + this.recursionDepth(childrenHolderArray) + maxDepth += 1 + } + return new Array(maxDepth).fill(0) + } + bindMultiPickerCol(e) { + console.log('修改的列为', e.detail.column, ',值为', e.detail.value) + console.log(this.state.initailMultiArray) const data = { - objectMultiArray: this.state.objectMultiArray, + multiArray: this.state.initailMultiArray, 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 - + 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 } - data.multiIndex[1] = 0 - break - + } } - // console.log(data.multiIndex) - // console.log('objectMultiArray', data.objectMultiArray) - this.setState({ - multiIndex: data.multiIndex, - objectMultiArray: data.objectMultiArray - }, () => { + this.setState({ multiIndex: data.multiIndex }) - }) } + //--------------------开始-行业分类picker + bindMultiPickerChange(e) { + this.setState({ + multiIndex: e.detail.value, + }, () => { + this.returnResultToParent() + }) + + } + + //--------------------结束-行业分类picker - passDataToParent(industryTypeSelected) { - this.props.onPassDataToChild(industryTypeSelected) + returnResultToParent() { + const parent = this.state.interactionMultiArray[this.state.multiIndex[0]] + const child = this.state.interactionMultiArray[this.state.multiIndex[0]].children[this.state.multiIndex[1]] + child.id ? this.props.onPassDataToChild(child) : this.props.onPassDataToChild(parent) } @@ -200,17 +169,17 @@ class Interaction extends Component { rangeKey='name' mode='multiSelector' onChange={this.bindMultiPickerChange.bind(this)} - onColumnchange={this.bindMulPickerColChge.bind(this)} + onColumnchange={this.bindMultiPickerCol.bind(this)} value={this.state.multiIndex} - range={this.state.objectMultiArray} + range={this.state.initailMultiArray} > 行业分类: {this.props.selectedValue.name} - {/* {this.state.objectMultiArray[0] ? {this.state.objectMultiArray[0][this.state.multiIndex[0]].name} : null} - {this.state.objectMultiArray[1] ? {this.state.objectMultiArray[1][this.state.multiIndex[1]].name} : null} */} + {/* {this.state.initailMultiArray[0] ? {this.state.initailMultiArray[0][this.state.multiIndex[0]].name} : null} + {this.state.initailMultiArray[1] ? {this.state.initailMultiArray[1][this.state.multiIndex[1]].name} : null} */} diff --git a/src/component/shopTypeInteractionComp/shopTypeInteractionComp.js b/src/component/shopTypeInteractionComp/shopTypeInteractionComp.js index bedb4d2..d2d6f9e 100644 --- a/src/component/shopTypeInteractionComp/shopTypeInteractionComp.js +++ b/src/component/shopTypeInteractionComp/shopTypeInteractionComp.js @@ -1,12 +1,11 @@ - - import Taro, { Component } from '@tarojs/taro' import { View, Text } from '@tarojs/components' -import { AtTabBar, Picker, AtButton } from 'taro-ui' +import { Picker } from 'taro-ui' import './shopTypeInteractionComp.scss' + class ShopTypeInteractionComp extends Component { config = { @@ -16,12 +15,9 @@ class ShopTypeInteractionComp extends Component { super(...arguments); this.state = { - ///---行业分类 开始 - objectMultiArray: [[{}], [{ name: '选择店铺分类', id: '' }]], + initailMultiArray: [[{}], [{ name: '选择店铺分类', id: '' }]], multiIndex: [0, 0], - formatInWindow: [], - ///---行业分类 结束 - + interactionMultiArray: [],// 联动数据 } } @@ -32,7 +28,7 @@ class ShopTypeInteractionComp extends Component { method: 'POST', dataType: 'json', data: { - id: Taro.getStorageSync('shopInfo').shop_id + id: this.props.shopId || Taro.getStorageSync('shopInfo').shop_id }, header: { 'content-type': 'application/x-www-form-urlencoded', @@ -41,149 +37,95 @@ class ShopTypeInteractionComp extends Component { } }) .then(res => { - console.log('店铺分类目录', res) - this.formatIndustryType(res.data.data) - this.formatIndustTypeInit(res.data.data) + // console.log('店铺分类目录', res) + // this.formatIndustryType(res.data.data) + // this.formatIndustTypeInit(res.data.data) + if (res.data.err_msg === 'success') { + console.log('店铺分类目录', res) + this.setState({ + interactionMultiArray: this.recursionInteraction(res.data.data), + initailMultiArray: this.recursionInitialized(res.data.data) + }, () => { + // console.log('联动数据', this.state.interactionMultiArray) + // console.log('初始化数据', this.state.initailMultiArray) + // console.log('index初始化', this.state.multiIndex) + + }) // 用递归来整理无限层次的数据 + } else { + console.log('店铺分类目录获取失败', res) + } } ) .catch(error => { console.log('店铺分类请求错误', error) }) } - // 第一种formate 用于底部弹层滚动时的数据 - formatIndustryType(data) { - const newIndustryType = [] - if (Object.keys(data).length) { - for (let key in data) { - let outterObject = { name: data[key].n, id: '', child: [] } - if (data[key].c.length) { - for (let child of data[key].c) { - outterObject.child.push({ name: child.n, id: child.id }) - } - } else { - outterObject.child.push({ name: '', id: '' }) - } - newIndustryType.push(outterObject) - } - } else { - console.log('店铺分类数据问题') - } - this.setState({ formatInWindow: newIndustryType }, () => { - console.log('滚动时的数据', this.state.formatInWindow) - }) + + + // 递归整理无限层联动数据 + recursionInteraction(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 } - //第二种format 用于底部弹层的初始化数据 - formatIndustTypeInit(data) { - const firstArray = [] - const secondArray = [] - if (Object.keys(data).length) { - for (let key in data) { - firstArray.push({ name: data[key].n, id: '' }) - if (data[key].c.length) { - for (let child of data[key].c) { - secondArray.push({ name: child.n, id: child.id }) - } + // 递归整理无限层初始数据 + recursionInitialized(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 } } - - } else { - console.log('店铺分类数据问题') } - - this.setState({ objectMultiArray: [firstArray, secondArray] }, () => { - // console.log('初始化数据', this.state.objectMultiArray) - }) - + this.setState({ multiIndex: data.multiIndex }) } - //--------------------开始-行业分类picker bindMultiPickerChange(e) { // console.log('picker发送选择改变,携带值为', e.detail.value) this.setState({ multiIndex: e.detail.value, }, () => { - //判断如果formatInWindow 的子类为空 那就取父类, 反之取子类 + //判断如果interactionMultiArray 的子类为空 那就取父类, 反之取子类 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]] - } + industryTypeSelected = this.state.interactionMultiArray[this.state.multiIndex[0]].children[this.state.multiIndex[1]] this.passDataToParent(industryTypeSelected) }) } - bindMulPickerColChge(e) { - const data = { - objectMultiArray: this.state.objectMultiArray, - multiIndex: this.state.multiIndex - } - // console.log(' this.state.formatInWindow', this.state.formatInWindow) - data.multiIndex[e.detail.column] = e.detail.value - switch (e.detail.column) { - case 0: - switch (data.multiIndex[0]) { - case 0: - data.objectMultiArray[1] = this.state.formatInWindow[0].child - break - case 1: - data.objectMultiArray[1] = this.state.formatInWindow[1].child - break - case 2: - data.objectMultiArray[1] = this.state.formatInWindow[2].child - break - case 3: - data.objectMultiArray[1] = this.state.formatInWindow[3].child - break - case 4: - data.objectMultiArray[1] = this.state.formatInWindow[4].child - break - case 5: - data.objectMultiArray[1] = [{ name: '' }] - break - case 6: - data.objectMultiArray[1] = this.state.formatInWindow[6].child - break - case 7: - data.objectMultiArray[1] = this.state.formatInWindow[7].child - break - case 8: - data.objectMultiArray[1] = this.state.formatInWindow[8].child - break - case 9: - data.objectMultiArray[1] = this.state.formatInWindow[9].child - break - case 10: - data.objectMultiArray[1] = this.state.formatInWindow[10].child - break - case 11: - data.objectMultiArray[1] = this.state.formatInWindow[11].child - break - case 12: - data.objectMultiArray[1] = this.state.formatInWindow[12].child - break - case 13: - data.objectMultiArray[1] = this.state.formatInWindow[13].child - break - case 14: - data.objectMultiArray[1] = this.state.formatInWindow[14].child - break - } - data.multiIndex[1] = 0 - break - - } - // console.log(data.multiIndex) - // console.log('objectMultiArray', data.objectMultiArray) - this.setState({ - multiIndex: data.multiIndex, - objectMultiArray: data.objectMultiArray - }, () => { - - }) - } //--------------------结束-行业分类picker passDataToParent(industryTypeSelected) { @@ -195,6 +137,7 @@ class ShopTypeInteractionComp extends Component { this.getShopTypeList(this.props.url) } + // 当然父组件有新的props的 会从新渲染组件 componentWillReceiveProps(nextProps) { @@ -206,20 +149,22 @@ class ShopTypeInteractionComp extends Component { componentDidHide() { } render() { + + return ( * - 店铺分类: + 店铺分类: {this.props.selectedValue.name} diff --git a/src/pages/allDemanding/allDemanding.js b/src/pages/allDemanding/allDemanding.js index 0ac6d38..5f3440d 100644 --- a/src/pages/allDemanding/allDemanding.js +++ b/src/pages/allDemanding/allDemanding.js @@ -278,7 +278,7 @@ class AllDemanding extends Component { - + {item.sd_title} diff --git a/src/pages/allDemanding/allDemanding.scss b/src/pages/allDemanding/allDemanding.scss index fb9cbee..ca1c551 100644 --- a/src/pages/allDemanding/allDemanding.scss +++ b/src/pages/allDemanding/allDemanding.scss @@ -116,10 +116,14 @@ $themeColor: #FF7142; .body{ display: flex; border-bottom: 1px solid #F2F2F2; - margin:20px 0; + padding:10px 0; + .image-container{ - margin: 20px; + margin:0 10px; flex:1; + height: 220rpx; + width: 250rpx + } .detail{ flex:2; diff --git a/src/pages/home/home.js b/src/pages/home/home.js index 937bb34..23dff9f 100644 --- a/src/pages/home/home.js +++ b/src/pages/home/home.js @@ -66,7 +66,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, + 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,13 +104,11 @@ class Home extends Component { } }) .then(res => { - // console.log('所有店铺的信息', res) - - console.log('我是res', res) + console.log('所有店铺的信息', res) Taro.hideLoading() if (res.data.err_msg === 'success') { if (this.state.isAddToList) { - if (res.data.shops) { + if (res.data.shops.length) { this.setState({ shops: this.state.shops.concat(res.data.shops), isAddToList: false }) } else { Taro.showToast({ @@ -134,46 +132,7 @@ class Home extends Component { } ) } - // getShops({ parent_supply_class = this.state.parentClass, supply_class = this.state.childClass, supply_level = 1, curr_page = 1, - // page_count = 20, action = "2" }) { - // Taro.request({ - // url: URL.ShopSupplyShops, - // method: 'POST', - // dataType: 'json', - // data: { - // param: JSON.stringify({ - // curr_page: curr_page, - // page_count: page_count, - // parent_supply_class: parent_supply_class, //父级class id - // supply_class: supply_class,// 子级class id - // supply_level: supply_level,// 层级 - // action: action - // }) - // }, - // header: { - // 'content-type': 'application/x-www-form-urlencoded', - // 'Cookie': 'PFWSSS=' + Taro.getStorageSync('session_id'), - // } - // }) - // .then(res => { - // console.log('所有店铺的信息', res) - // Taro.hideLoading() - // if (res.data.err_msg === 'success') { - - // this.setState({ shops: res.data.shops }) - // Taro.hideLoading() - - // } else { - // Taro.showToast({ - // title: res.data.err_msg, - // icon: 'none', - // duration: 1500 - // }) - // } - // } - // ) - // } - + // 异步函数登入api async login() { Taro.login({ @@ -346,7 +305,6 @@ class Home extends Component { } componentDidMount() { // 页面加载后 得到首页的基本信息和推荐店铺的信息 - console.log('地址', this.$router) Taro.showLoading({ title: '加载中' }) this.login().then(() => { @@ -448,10 +406,12 @@ class Home extends Component { }) : null const categoriesElementsArray2 = this.state.categories.length ? this.state.categories[1].map((item, index) => { return - + {/* onClick={this.onClickParentCate.bind(this, item)}> */} + {item.class_name} }) : null + const shopCollectionElementsArray = this.state.shops.length ? this.state.shops.map((item, index) => { return { console.log('searchGood', res) Taro.hideLoading() - if (res.data.goods.length) { + if (res.data.goods && res.data.goods.length) { if (this.state.isAddToList) { this.setState({ shopItem: this.state.shopItem.concat(res.data.goods) @@ -250,10 +252,16 @@ class Shop extends Component { this.setState({ shopItem: res.data.goods, filterCondition: order }) } } else { - Taro.showToast({ - title: '没有更多了', - icon: 'none' - }) + if (this.state.isAddToList) { + Taro.showToast({ + title: '没有更多了', + icon: 'none' + }) + } else { + this.setState({ shopItem: res.data.goods }) + } + + } this.setState({ isAddToList: false }) @@ -283,8 +291,9 @@ class Shop extends Component { contactName: res.data.userRes.name, contactNumber: res.data.userRes.phone, shopDescription: res.data.data.shop_desc, - latitude: res.data.data.shop_map.split(',')[0], - longitude: res.data.data.shop_map.split(',')[1] + latitude: res.data.data.shop_map.split(',')[1], + longitude: res.data.data.shop_map.split(',')[0], + }, () => { // console.log(this.state.shopDescriptionData) }) @@ -292,46 +301,17 @@ class Shop extends Component { } ) } - // api 获取店铺内的店铺分类请求 GetShopCategoryList - getShopInnerCate({ id = this.state.shop_id }) { - Taro.request({ - url: URL.GetShopCategoryList, - method: 'POST', - dataType: 'json', - data: { - id: id, - }, - header: { - 'content-type': 'application/x-www-form-urlencoded', - 'X-Requested-With': 'XMLHttpRequest' - } + + getDataFromShopChild(value) { + console.log('从子组件店铺分类传回来的值', value) + this.setState({ shop_class_id: value.id }, () => { + this.goodsSearch({}) }) - .then(res => { - if (res.statusCode === 200) { - Taro.hideLoading() - const originalData = res.data.data - const sortedData = [] - for (let item in originalData) { - let each = originalData[item] - each['id'] = item - sortedData.push(each) - } - // console.log('sorteddata', sortedData) - this.setState({ shopAllInnerCate: sortedData }) - - } else { - console.log('获取店铺内部分类失败') - } - - - } - ) } - // 产品排序 accendingDescending(value) { Taro.showLoading({ title: '加载中' }) @@ -344,10 +324,22 @@ class Shop extends Component { newProduct: false, price: false, popularity: false - } + }, + curr_page: 1, + page_count: 10, + shop_name: false, + config_id: 4, + shop_class_id: '', + order: '', + goods_class_id: '', + goodsSpec: [], + goodsParam: [], + goodsParamExt: [], + }, () => { + this.goodsSearch({}) } ) - this.goodsSearch({ currPage: 1 }) + } if (value == 1) { this.setState({ @@ -499,19 +491,7 @@ class Shop extends Component { showDescriptionPage() { this.setState({ showShopHomePage: false }) } - isShowShopAllCate() { - this.setState({ isShowShopAllCate: !this.state.isShowShopAllCate, isBlurWindow: true }) - } - handleShopInnerCate(id) { - - Taro.showLoading({ title: '加载中' }) - this.setState({ - isShowShopAllCate: false, isBlurWindow: false - }) - this.goodsSearch({ shop_class_id: id, shop_id: this.$router.params.id }) - - } // 确认筛选 submitFilter() { this.setState({ isShowFilter: false }) @@ -541,23 +521,12 @@ class Shop extends Component { } - // 关闭背景window - closeBgWindow() { - this.setState({ - isShowShopAllCate: false, isBlurWindow: false - }) - } - - componentWillMount() { - - } componentDidMount() { Taro.showLoading({ title: '加载中' }) //页面加载之后 得到指定店铺的商品 和 筛选标签 this.goodsSearch({}) // 加载店铺商品 this.getSearchParams({})// 加载筛选项 this.getShopDescription({}) // 加载店铺说明 - this.getShopInnerCate({}) } componentDidShow() { } @@ -583,6 +552,7 @@ class Shop extends Component { } } render() { + const ShopItemElementsArray = this.state.shopItem.length ? this.state.shopItem.map((item, index) => { return @@ -602,9 +572,9 @@ class Shop extends Component { // 侧边已选项 const checkedFilterElementsArray = this.state.checkedFilterIdList.map((item, index) => { return {item.name} }) @@ -614,19 +584,19 @@ class Shop extends Component { // 侧边筛选的分类项 const goodsClassElementsArray = this.state.mainType.map((item, index) => { return {item.name} }) // 侧边筛选的商品类型项 const goodsTypeElementsArray = this.state.goodType.map((item, index) => { return {item.name} }) @@ -640,10 +610,10 @@ class Shop extends Component { let isCheck = subItem.checked return {name} })} @@ -653,10 +623,10 @@ class Shop extends Component { // 侧边筛选宽度选项 const widthnessElementsArray = this.state.widthType.map((item, index) => { return {item.name} }) // 店铺页面/店铺主页 @@ -696,7 +666,7 @@ class Shop extends Component { {/* 店铺的商品列表 */} - {ShopItemElementsArray} + {this.state.shopItem.length ? ShopItemElementsArray : 没有更多了} @@ -721,60 +691,81 @@ class Shop extends Component { 店铺简介 + 店铺介绍: {this.state.shopDescription} - - - + + {/* - + */} + {/* location.png */} + {/* */} - const shopAllCateElementArray = this.state.shopAllInnerCate.map((item, index) => { - return {item.n} - }) + return ( - {this.state.shopName} - - - - - 店铺全部分类 - - + + + - - {shopAllCateElementArray} + + + 店铺全部分类 + + + + + 首页 diff --git a/src/pages/shop/shop.scss b/src/pages/shop/shop.scss index c9b4c94..9fd52cd 100644 --- a/src/pages/shop/shop.scss +++ b/src/pages/shop/shop.scss @@ -45,6 +45,9 @@ $themeColor:#FF7142; display: flex; line-height: 55px; text-align: center; + overflow:hidden; +height:60rpx; + .text{ color:white; font-size: 28px; @@ -53,7 +56,12 @@ $themeColor:#FF7142; .shop-cate{ flex:1; margin-left: 30px; - + position: relative; + .interactive{ + position: absolute; + left: 0; + top:0; + } } .homepage-link{ flex:1; @@ -144,6 +152,11 @@ $themeColor:#FF7142; padding:10px; } + .no_more_title{ + width:100%; +margin-top:20%; + + } } .pagination{ diff --git a/src/todo list.txt b/src/todo list.txt index fa3eef8..6019384 100644 --- a/src/todo list.txt +++ b/src/todo list.txt @@ -20,267 +20,187 @@ bug: 商品编辑 增加图片后 图片顺序乱了 +// api +商品列表 +-价格排序 +-库存排序 +-总销量 +-发布时间 + + + import Taro, { Component } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import { Picker } from 'taro-ui' -import './goodsTypeInteractionComp.scss' +import './interactionComponent.scss' -class GoodsTypeInteractionComp extends Component { +class Interaction extends Component { config = { - navigationBarTitleText: 'goodsTypeInteractionComp' + navigationBarTitleText: 'interactionComponent' } constructor() { super(...arguments); this.state = { ///---行业分类 开始 - objectMultiArray: [[{ name: '选择商品分类', id: '' }], [], []], - multiIndex: [0, 0, 0, 0], + objectMultiArray: '', + multiIndex: [0, 0], formatInWindow: [], ///---行业分类 结束 + } } - //商品目录请求api GetShopCategoryList - getProductCateList(url) { + // 行业分类筛选列表GetIndustryTypeList + getIndustryTypeList(url) { Taro.request({ url: url, - method: 'POST', + method: 'GET', dataType: 'json', header: { - 'content-type': 'application/x-www-form-urlencoded', '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) }) - .then(res => { - if (res.data.err_msg === 'success') { - console.log('商品分类目录', res) - this.formatIndustryType(res.data.data) - this.formatIndustTypeInit(res.data.data) - this.setState({goodsTypeList:res.data.data}) - - } else { - console.log('商品分类请求没有成功', res) - } - } - ) - .catch(error => { - console.log('商品分类请求错误', error) - }) } - - - // 第一种formate 用于底部弹层滚动时的数据 formatIndustryType(data) { - const newIndustryType = [] - if (data) { - for (let outter of data) { - let outterObject = { name: outter.class_name, id: outter.class_id, children: [] } - if (outter.children) { - for (let middler of outter.children) { - const middleObject = { name: middler.class_name, id: middler.class_id, children: [] } - outterObject.children.push(middleObject) - if (middler.children) { - for (let inner of middler.children) { - const innerObject={ name: inner.class_name, id: inner.class_id,children: [] } - middleObject.children.push(innerObject) - - if (inner.children) { - for (let final of inner.children) { - innerObject.children.push({ name: final.class_name, id: final.class_id }) - - } - } else { - innerObject.children.push({ name: '', id: '' }) - } - } - } else { - middleObject.children.push({ name: '', id: '' }) - } - } - } else { - outterObject.children.push({ name: '', id: '', children: [] }) + 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 }) } - newIndustryType.push(outterObject) + } else { + outterObject.child.push({ name: '', id: '' }) } - } else { - console.log('店铺分类数据问题') + newIndustryType.push(outterObject) } - - - this.setState({ formatInWindow: newIndustryType }, () => { - console.log('滚动时的数据', this.state.formatInWindow) - }) + this.setState({ formatInWindow: newIndustryType }) } //第二种format 用于底部弹层的初始化数据 formatIndustTypeInit(data) { - const firstArray = [] - const secondArray = [] - const thirdArray = [] + 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.children) { - for (let middler of outter.children) { - secondArray.push({ name: middler.class_name, id: middler.class_id }) - if (middler.children) { - for (let inner of middler.children) { - thirdArray.push({ name: inner.class_name, id: inner.class_id }) - } - } + if (outter.child.length) { + for (let inner of outter.child) { + secondArray.push({ name: inner.class_name, id: inner.class_id }) } } } - // 这里不能加入secondArray,和thirdArray 会有bug - this.setState({ objectMultiArray: [firstArray, [{ name: '', id: '' }], [{ name: '', id: '' }]] }, () => { - console.log('初始化数据', this.state.objectMultiArray) + this.setState({ objectMultiArray: [firstArray, secondArray] }, () => { }) + } - //--- 三级联动-------------- + //--------------------开始-行业分类picker bindMultiPickerChange(e) { - console.log('picker发送选择改变,携带值为', e.detail.value) - this.setState({ - multiIndex: e.detail.value - }, () => { - this.returnResultToParent() - }) - } - returnResultToParent() { - let result = '' - let outter = this.state.formatInWindow[this.state.multiIndex[0]] - let middler = outter.children[this.state.multiIndex[1]] - let inner = middler.children[this.state.multiIndex[2]] - if (outter.id) { - result = outter - if (middler.id) { - result = middler - if (inner.id) { - result = inner - } - } + //判断如果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]] } - this.passDataToParent(result) + // console.log('picker发送选择改变,携带值为', e.detail.value) + + this.setState({ + multiIndex: e.detail.value, + }, () => { + this.passDataToParent(industryTypeSelected) + }) + } - bindMultiPickerCol(e) { - console.log('修改的列为', e.detail.column, ',值为', e.detail.value) + bindMulPickerColChge(e) { + // console.log('修改的列为', e.detail.column, ',值为', e.detail.value) const data = { - multiArray: this.state.objectMultiArray, + 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.multiArray[1] = this.state.formatInWindow[0].children - data.multiArray[2] = this.state.formatInWindow[0].children + data.objectMultiArray[1] = this.state.formatInWindow[0].child break case 1: - data.multiArray[1] = this.state.formatInWindow[1].children + data.objectMultiArray[1] = this.state.formatInWindow[1].child break case 2: - data.multiArray[1] = this.state.formatInWindow[2].children + data.objectMultiArray[1] = this.state.formatInWindow[2].child break case 3: - data.multiArray[1] = this.state.formatInWindow[3].children + data.objectMultiArray[1] = this.state.formatInWindow[3].child break case 4: - data.multiArray[1] = this.state.formatInWindow[4].children + data.objectMultiArray[1] = this.state.formatInWindow[4].child break - } - data.multiIndex[1] = 0 - data.multiIndex[2] = 0 - data.multiIndex[3] = 0 - break - case 1: - switch (data.multiIndex[0]) { - case 0: - + case 5: + data.objectMultiArray[1] = this.state.formatInWindow[6].child break - case 1: - switch (data.multiIndex[1]) { - case 0: - data.multiArray[2] = this.state.formatInWindow[1].children[0].children - break - case 1: - data.multiArray[2] = this.state.formatInWindow[1].children[1].children - break - case 2: - data.multiArray[2] = this.state.formatInWindow[1].children[2].children - break - case 3: - data.multiArray[2] = this.state.formatInWindow[1].children[3].children ? this.state.formatInWindow[1].children[3].children : [{ class_name: '' }] - break - } + case 6: + data.objectMultiArray[1] = [{ name: '' }] break - case 2: - switch (data.multiIndex[1]) { - case 0: - data.multiArray[2] = this.state.formatInWindow[2].children[0].children - break - case 1: - data.multiArray[2] = this.state.formatInWindow[2].children[1].children - break - case 2: - data.multiArray[2] = this.state.formatInWindow[2].children[2].children - break - case 3: - data.multiArray[2] = this.state.formatInWindow[2].children[3].children - break - case 4: - data.multiArray[2] = this.state.formatInWindow[2].children[4].children - break - case 5: - data.multiArray[2] = this.state.formatInWindow[2].children[5].children - break - } + case 7: + data.objectMultiArray[1] = this.state.formatInWindow[7].child break - case 3: - switch (data.multiIndex[1]) { - case 0: - data.multiArray[2] = this.state.formatInWindow[3].children[0].children - break - case 1: - data.multiArray[2] = this.state.formatInWindow[3].children[1].children - break - case 2: - data.multiArray[2] = this.state.formatInWindow[3].children[2].children - break - case 3: - data.multiArray[2] = this.state.formatInWindow[3].children[3].children - break - case 3: - data.multiArray[2] = this.state.formatInWindow[3].children[3].children - break - } + case 8: + data.objectMultiArray[1] = this.state.formatInWindow[8].child break - case 4: - switch (data.multiIndex[1]) { - case 0: - data.multiArray[2] = this.state.formatInWindow[4].children[0].children - break - case 1: - data.multiArray[2] = this.state.formatInWindow[4].children[1].children - break - case 2: - data.multiArray[2] = this.state.formatInWindow[4].children[2].children - 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[2] = 0 - data.multiIndex[3] = 0 + data.multiIndex[1] = 0 break + } - this.setState({ multiIndex: data.multiIndex }) + // console.log(data.multiIndex) + // console.log('objectMultiArray', data.objectMultiArray) + this.setState({ + multiIndex: data.multiIndex, + objectMultiArray: data.objectMultiArray + }, () => { + + }) } //--------------------结束-行业分类picker @@ -290,8 +210,8 @@ class GoodsTypeInteractionComp extends Component { componentDidMount() { - this.getProductCateList(this.props.url) + this.getIndustryTypeList(this.props.url) } // 当然父组件有新的props的 会从新渲染组件 componentWillReceiveProps(nextProps) { @@ -310,22 +230,17 @@ class GoodsTypeInteractionComp extends Component { rangeKey='name' mode='multiSelector' onChange={this.bindMultiPickerChange.bind(this)} - onColumnchange={this.bindMultiPickerCol.bind(this)} + onColumnchange={this.bindMulPickerColChge.bind(this)} value={this.state.multiIndex} range={this.state.objectMultiArray} > - * - 商品分类: - - {this.props.selectedValue.name} - - - {/* {this.state.objectMultiArray[0].length? {this.state.objectMultiArray[0][this.state.multiIndex[0]].name}:null} - {this.state.objectMultiArray[1].length?{this.state.objectMultiArray[1][this.state.multiIndex[1]].name}:null} - {this.state.objectMultiArray[2].length?{this.state.objectMultiArray[2][this.state.multiIndex[2]].name}:null} */} + 行业分类: + {this.props.selectedValue.name} + {/* {this.state.objectMultiArray[0] ? {this.state.objectMultiArray[0][this.state.multiIndex[0]].name} : null} + {this.state.objectMultiArray[1] ? {this.state.objectMultiArray[1][this.state.multiIndex[1]].name} : null} */} @@ -336,6 +251,5 @@ class GoodsTypeInteractionComp extends Component { } } -export default GoodsTypeInteractionComp - +export default Interaction