四级联动bug fixed 。店铺详情地图
This commit is contained in:
parent
6b8102feb6
commit
567782f8ea
BIN
src/assets/img/location.png
Normal file
BIN
src/assets/img/location.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.8 KiB |
@ -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的 会从新渲染组件
|
||||
|
||||
@ -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}
|
||||
>
|
||||
<View class='picker type'>
|
||||
<View className='title-box'>
|
||||
<Text className='title'>行业分类：</Text>
|
||||
|
||||
<Text className='first-col'> {this.props.selectedValue.name}</Text>
|
||||
{/* {this.state.objectMultiArray[0] ? <Text className='first-col'> {this.state.objectMultiArray[0][this.state.multiIndex[0]].name}</Text> : null}
|
||||
{this.state.objectMultiArray[1] ? <Text className='second-col'> {this.state.objectMultiArray[1][this.state.multiIndex[1]].name}</Text> : null} */}
|
||||
{/* {this.state.initailMultiArray[0] ? <Text className='first-col'> {this.state.initailMultiArray[0][this.state.multiIndex[0]].name}</Text> : null}
|
||||
{this.state.initailMultiArray[1] ? <Text className='second-col'> {this.state.initailMultiArray[1][this.state.multiIndex[1]].name}</Text> : null} */}
|
||||
</View>
|
||||
</View>
|
||||
</Picker>
|
||||
|
||||
@ -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 (
|
||||
<View class='page-section'>
|
||||
<Picker
|
||||
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}
|
||||
>
|
||||
<View class='picker type'>
|
||||
<View className='title-box'>
|
||||
<Text className='require'>*</Text>
|
||||
<Text className='title'>店铺分类：</Text>
|
||||
<Text className='title'>店铺分类:</Text>
|
||||
<Text className='first-col'>
|
||||
{this.props.selectedValue.name}
|
||||
</Text>
|
||||
|
||||
@ -278,7 +278,7 @@ class AllDemanding extends Component {
|
||||
</View>
|
||||
<View className='body'>
|
||||
<View className='image-container'>
|
||||
<Image style='width:110px;height:80px' src={URL.Base + item.file_path[0].thumb_path} />
|
||||
<Image style='width:100%;height:100%' src={URL.Base + item.file_path[0].thumb_path} />
|
||||
</View>
|
||||
<View className='detail'>
|
||||
<View className='title'>{item.sd_title}</View>
|
||||
|
||||
@ -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;
|
||||
|
||||
@ -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 <View className='category-item' key={index} onClick={this.scrollToSubCate.bind(this, item)}>
|
||||
<View> <Image className='cate-img' src={URL.Base + item.icon} /></View>
|
||||
{/* onClick={this.onClickParentCate.bind(this, item)}> */}
|
||||
<Image className='cate-img' src={URL.Base + item.icon} />
|
||||
<View>{item.class_name}</View>
|
||||
</View>
|
||||
}) : null
|
||||
|
||||
const shopCollectionElementsArray = this.state.shops.length ? this.state.shops.map((item, index) => {
|
||||
return <FilteredShopComponent
|
||||
shop={item}
|
||||
|
||||
@ -3,6 +3,7 @@ import { View, Button, Text, Image, Map } from '@tarojs/components'
|
||||
import { AtTag, AtIcon, } from 'taro-ui'
|
||||
import URL from '../../serviceAPI.config'
|
||||
|
||||
|
||||
import ShopTypeInteractionComp from '../../component/shopTypeInteractionComp/shopTypeInteractionComp'
|
||||
import ScrollToTopComponent from '../../component/scrollToTopComponent/scrollToTopComponent'
|
||||
|
||||
@ -11,6 +12,7 @@ import ShopItem from '../../component/shopItemComponent/shopItemComponent'
|
||||
import BottomNav from '../../component/bottomNav/bottomNav'
|
||||
import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent'
|
||||
|
||||
const locationIcon=require('../../assets/img/location.png')
|
||||
|
||||
class Shop extends Component {
|
||||
// 项目配置
|
||||
@ -45,9 +47,7 @@ class Shop extends Component {
|
||||
popularity: false,
|
||||
},
|
||||
filterCondition: '',// 筛选条件
|
||||
isShowShopAllCate: false,
|
||||
shopAllInnerCate: '',// 店铺内部分类
|
||||
isBlurWindow: false,
|
||||
|
||||
mainType: [],// 侧边筛选分类
|
||||
goodType: [],//侧边商品类型
|
||||
otherType: [],//侧边其他类型
|
||||
@ -69,8 +69,10 @@ class Shop extends Component {
|
||||
goodsSpec: [],
|
||||
goodsParam: [],
|
||||
goodsParamExt: [],
|
||||
// 地图的经度和维度
|
||||
longitude: '',
|
||||
latitude: ''
|
||||
latitude: '',
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
@ -239,7 +241,7 @@ class Shop extends Component {
|
||||
.then(res => {
|
||||
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 <View key={index} className='shop-item' >
|
||||
<ShopItem item={item}></ShopItem>
|
||||
@ -602,9 +572,9 @@ class Shop extends Component {
|
||||
// 侧边已选项
|
||||
const checkedFilterElementsArray = this.state.checkedFilterIdList.map((item, index) => {
|
||||
return <AtTag style='margin-left:5px' key={index}
|
||||
name={item.id}
|
||||
type='primary'
|
||||
active={item.checked}
|
||||
name={item.id}
|
||||
type='primary'
|
||||
active={item.checked}
|
||||
//onClick={this.selectTag.bind(this)}
|
||||
>{item.name}</AtTag>
|
||||
})
|
||||
@ -614,19 +584,19 @@ class Shop extends Component {
|
||||
// 侧边筛选的分类项
|
||||
const goodsClassElementsArray = this.state.mainType.map((item, index) => {
|
||||
return <AtTag style='margin-left:5px' key={index}
|
||||
name={item.id}
|
||||
type='primary'
|
||||
active={item.checked}
|
||||
onClick={this.selectTag.bind(this)}
|
||||
name={item.id}
|
||||
type='primary'
|
||||
active={item.checked}
|
||||
onClick={this.selectTag.bind(this)}
|
||||
>{item.name}</AtTag>
|
||||
})
|
||||
// 侧边筛选的商品类型项
|
||||
const goodsTypeElementsArray = this.state.goodType.map((item, index) => {
|
||||
return <AtTag style='margin-left:5px' key={index}
|
||||
name={item.id}
|
||||
type='primary'
|
||||
active={item.checked}
|
||||
onClick={this.selectTag.bind(this)}
|
||||
name={item.id}
|
||||
type='primary'
|
||||
active={item.checked}
|
||||
onClick={this.selectTag.bind(this)}
|
||||
>{item.name}</AtTag>
|
||||
})
|
||||
|
||||
@ -640,10 +610,10 @@ class Shop extends Component {
|
||||
let isCheck = subItem.checked
|
||||
return <View className='button-box' key={subIndex}>
|
||||
<AtTag style='margin-left:5px'
|
||||
name={name}
|
||||
type='primary'
|
||||
active={isCheck}
|
||||
onClick={this.selectTag.bind(this)}
|
||||
name={name}
|
||||
type='primary'
|
||||
active={isCheck}
|
||||
onClick={this.selectTag.bind(this)}
|
||||
>{name}</AtTag>
|
||||
</View>
|
||||
})}
|
||||
@ -653,10 +623,10 @@ class Shop extends Component {
|
||||
// 侧边筛选宽度选项
|
||||
const widthnessElementsArray = this.state.widthType.map((item, index) => {
|
||||
return <AtTag style='margin-left:5px' key={index}
|
||||
name={item.name}
|
||||
type='primary'
|
||||
active={item.checked}
|
||||
onClick={this.selectTag.bind(this)}
|
||||
name={item.name}
|
||||
type='primary'
|
||||
active={item.checked}
|
||||
onClick={this.selectTag.bind(this)}
|
||||
>{item.name}</AtTag>
|
||||
})
|
||||
// 店铺页面/店铺主页
|
||||
@ -696,7 +666,7 @@ class Shop extends Component {
|
||||
</View>
|
||||
{/* 店铺的商品列表 */}
|
||||
<View className='container'>
|
||||
{ShopItemElementsArray}
|
||||
{this.state.shopItem.length ? ShopItemElementsArray : <View className='no_more_title'> 没有更多了</View>}
|
||||
</View>
|
||||
|
||||
</View>
|
||||
@ -721,60 +691,81 @@ class Shop extends Component {
|
||||
<View className='title'>
|
||||
店铺简介
|
||||
</View>
|
||||
|
||||
<View className='description'>
|
||||
<Text className='title-sub'>店铺介绍：</Text>
|
||||
<Text className='detail'>{this.state.shopDescription}</Text>
|
||||
|
||||
</View>
|
||||
|
||||
</View>
|
||||
<View className='description-img'>
|
||||
|
||||
{/* <View className='description-img'>
|
||||
<View className='img-box'> <Image mode='aspectFit' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='max-width: 100%; max-height:100%;' /></View>
|
||||
<View className='img-box'> <Image mode='aspectFit' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='max-width: 100%;max-height:100%;' /></View>
|
||||
<View className='img-box'> <Image mode='aspectFit' src={URL.Base + 'Public/images/shop/bg_banner.png'} style='max-width: 100%;max-height:100%;' /></View>
|
||||
</View>
|
||||
</View> */}
|
||||
{/* location.png */}
|
||||
<Map
|
||||
id="map"
|
||||
longitude={this.state.longitude}
|
||||
latitude={this.state.latitude}
|
||||
scale="14"
|
||||
controls="{{controls}}"
|
||||
bindcontroltap="controltap"
|
||||
markers="{{markers}}"
|
||||
bindmarkertap="markertap"
|
||||
polyline="{{polyline}}"
|
||||
bindregionchange="regionchange"
|
||||
show-location
|
||||
style="width: 100%; height: 300px;"
|
||||
id='map'
|
||||
longitude={this.state.longitude}
|
||||
latitude={this.state.latitude}
|
||||
scale='14'
|
||||
controls='{{controls}}'
|
||||
bindcontroltap='controltap'
|
||||
markers={[{
|
||||
iconPath: locationIcon,
|
||||
id: 0,
|
||||
latitude: this.state.latitude,
|
||||
longitude: this.state.longitude,
|
||||
width: 50,
|
||||
height: 50
|
||||
}]}
|
||||
bindmarkertap='markertap'
|
||||
polyline='{{polyline}}'
|
||||
bindregionchange='regionchange'
|
||||
show-location
|
||||
style='width: 100%; height: 300px;'
|
||||
></Map>
|
||||
{/* <Map
|
||||
id='map'
|
||||
longitude={this.state.longitude}
|
||||
latitude={this.state.latitude}
|
||||
scale='14'
|
||||
controls='{{controls}}'
|
||||
bindcontroltap='controltap'
|
||||
markers='{{markers}}'
|
||||
bindmarkertap='markertap'
|
||||
polyline='{{polyline}}'
|
||||
bindregionchange='regionchange'
|
||||
show-location
|
||||
style='width: 100%; height: 300px;'
|
||||
></Map> */}
|
||||
</View>
|
||||
|
||||
const shopAllCateElementArray = this.state.shopAllInnerCate.map((item, index) => {
|
||||
return <View key={index} className='item' onClick={this.handleShopInnerCate.bind(this, item.id)}> <Text>{item.n}</Text> </View>
|
||||
})
|
||||
|
||||
return (
|
||||
<View className='shop' >
|
||||
|
||||
<View onClick={this.state.closeBgWindow.bind(this)} className={this.state.isBlurWindow ? 'show-blur' : ''}></View>
|
||||
<View className='banner-box'>
|
||||
<Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} mode='scaleToFill' style='width: 100%;height:120px; ' />
|
||||
<View className='shop-name'>{this.state.shopName}</View>
|
||||
</View>
|
||||
<View className='nav-box'>
|
||||
|
||||
<View className='nav'>
|
||||
<View className='shop-cate' onClick={this.isShowShopAllCate.bind(this)}>
|
||||
<ShopTypeInteractionComp url={URL.GetShopCategoryList}
|
||||
selectedValue={this.state.shopTypeSelected}
|
||||
onPassDataToChild={this.getDataFromShopChild.bind(this)}
|
||||
></ShopTypeInteractionComp>
|
||||
<Text className='text'>
|
||||
店铺全部分类
|
||||
</Text>
|
||||
<AtIcon value='menu' size='10' color='white'></AtIcon>
|
||||
<View className='shop-cate'>
|
||||
<View>
|
||||
<ShopTypeInteractionComp url={URL.GetShopCategoryList} style='position:absolute;z-index:2;opacity:0;left:0'
|
||||
shopId={this.state.shop_id}
|
||||
onPassDataToChild={this.getDataFromShopChild.bind(this)}
|
||||
></ShopTypeInteractionComp>
|
||||
</View>
|
||||
<View className={this.state.isShowShopAllCate ? 'shopcate-selection show' : 'shopcate-selection'}>
|
||||
{shopAllCateElementArray}</View>
|
||||
<View className='interactive' onClick={this.showPopUp.bind(this)}>
|
||||
<Text className='text'>
|
||||
店铺全部分类
|
||||
</Text>
|
||||
<AtIcon value='menu' size='10' color='white'></AtIcon>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View className='homepage-link' onClick={this.showHomePage.bind()}>
|
||||
<Text className='text'>
|
||||
首页
|
||||
|
||||
@ -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{
|
||||
|
||||
@ -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}
|
||||
>
|
||||
<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>
|
||||
|
||||
{/* {this.state.objectMultiArray[0].length?<Text className='first-col'> {this.state.objectMultiArray[0][this.state.multiIndex[0]].name}</Text>:null}
|
||||
{this.state.objectMultiArray[1].length?<Text className='second-col'>{this.state.objectMultiArray[1][this.state.multiIndex[1]].name}</Text>:null}
|
||||
{this.state.objectMultiArray[2].length?<Text className='third-col'>{this.state.objectMultiArray[2][this.state.multiIndex[2]].name}</Text>:null} */}
|
||||
<Text className='title'>行业分类：</Text>
|
||||
|
||||
<Text className='first-col'> {this.props.selectedValue.name}</Text>
|
||||
{/* {this.state.objectMultiArray[0] ? <Text className='first-col'> {this.state.objectMultiArray[0][this.state.multiIndex[0]].name}</Text> : null}
|
||||
{this.state.objectMultiArray[1] ? <Text className='second-col'> {this.state.objectMultiArray[1][this.state.multiIndex[1]].name}</Text> : null} */}
|
||||
</View>
|
||||
</View>
|
||||
</Picker>
|
||||
@ -336,6 +251,5 @@ class GoodsTypeInteractionComp extends Component {
|
||||
}
|
||||
}
|
||||
|
||||
export default GoodsTypeInteractionComp
|
||||
|
||||
export default Interaction
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user