diff --git a/config/dev.js b/config/dev.js index f982e9a..d73844b 100644 --- a/config/dev.js +++ b/config/dev.js @@ -5,6 +5,19 @@ module.exports = { defineConstants: { }, weapp: {}, - - h5: {} -} + + h5: { + esnextModules: ['taro-ui'], + // devServer: { + // proxy: { + // '/api': 'http://192.168.1.230/Shop-ajaxStore', + // changeOrigin: true, + // headers: { + // // 后端要校验请求源，那改下 host 或者 origin 不就美滋滋了？ + // Host: '192.168.1.230', + // Origin: '192.168.1.230' + // } + // } + // } + } +} \ No newline at end of file diff --git a/config/index.js b/config/index.js index d103a22..b752557 100644 --- a/config/index.js +++ b/config/index.js @@ -8,7 +8,7 @@ const config = { '828': 1.81 / 2 }, sourceRoot: 'src', - outputRoot: 'dist', + outputRoot: 'dist', plugins: { babel: { sourceMap: true, diff --git a/config/prod.js b/config/prod.js index 3910355..9415fa0 100644 --- a/config/prod.js +++ b/config/prod.js @@ -5,5 +5,7 @@ module.exports = { defineConstants: { }, weapp: {}, - h5: {} + h5: { + esnextModules: ['taro-ui'] + } } diff --git a/src/component/AliShopTypeInteraction/AliShopTypeInteraction.js b/src/component/AliShopTypeInteraction/AliShopTypeInteraction.js index ed45d28..83be0a9 100644 --- a/src/component/AliShopTypeInteraction/AliShopTypeInteraction.js +++ b/src/component/AliShopTypeInteraction/AliShopTypeInteraction.js @@ -198,7 +198,7 @@ class ShopTypeInteractionComp extends Component { - + {this.state.AliIsShowPicker ? diff --git a/src/component/AliShopTypeInteraction/AliShopTypeInteraction.scss b/src/component/AliShopTypeInteraction/AliShopTypeInteraction.scss index d401d96..72d25e6 100644 --- a/src/component/AliShopTypeInteraction/AliShopTypeInteraction.scss +++ b/src/component/AliShopTypeInteraction/AliShopTypeInteraction.scss @@ -43,10 +43,7 @@ } } } -.picker-wrapper{ - padding-left: 20px; - padding-right: 20px; -} + .curtain{ height: 100%; background-color: black; @@ -56,12 +53,14 @@ opacity: 0.5; position: fixed; top: 0; + left: 0; } .ali-picker-container{ position: fixed; width: 100%; bottom: 0px; + left: 0; background-color: #fff; z-index: 100; opacity: 1; diff --git a/src/component/aliGoodsTypeInteraction/aliGoodsTypeInteraction.js b/src/component/aliGoodsTypeInteraction/aliGoodsTypeInteraction.js new file mode 100644 index 0000000..0e94ff5 --- /dev/null +++ b/src/component/aliGoodsTypeInteraction/aliGoodsTypeInteraction.js @@ -0,0 +1,303 @@ +import Taro, { Component } from '@tarojs/taro' +import { View, Text, Picker } from '@tarojs/components' +import { AtList, AtListItem, } from 'taro-ui' + +import './aliGoodsTypeInteraction.scss' +import loginExpired from '../../util/loginExpired' +import { getGlobalStorage } from '../../util/getSetStoage'; + +let maxDepth = 0 +let initialDataArray = [] +class AliGoodsTypeInteraction extends Component { + + config = { + navigationBarTitleText: 'aliGoodsTypeInteraction' + } + constructor() { + super(...arguments); + + this.state = { + ///---行业分类 开始 + initailMultiArray: [[{ class_name: '选择商品分类', class_id: '' }], [], []], // 初始化底部数据 + multiIndex: [0, 0, 0, 0],// 默认联动列数为4个并且每一列都是第一行 + interactionMultiArray: [],// 联动 + + + ///---行业分类 结束 + } + + } + //商品目录请求api GetShopCategoryList + getProductCateList(url) { + Taro.request({ + url: url, + method: 'POST', + dataType: 'json', + header: { + 'content-type': 'application/x-www-form-urlencoded', + 'Cookie': 'PFWSSS=' + getGlobalStorage('session_id'), + 'X-Requested-With': 'XMLHttpRequest' + } + }) + .then(res => { + if (res.data.err_code === 0) { + console.log('商品分类目录', res) + + const recursionInteractionData = this.recursionInteraction(res.data.data) + maxDepth = 0 + initialDataArray = [] + + this.recursionInitialized(res.data.data) // + const depthInArray = this.recursionDepth(res.data.data) + console.log('depthInArray', depthInArray) + console.log('initialDataArray', initialDataArray) + for (let i = initialDataArray.length; i < depthInArray.length; i++) { + initialDataArray.unshift([{ name: '--', id: '' }]) + } + + this.setState({ + interactionMultiArray: recursionInteractionData, + multiIndex: depthInArray, + initailMultiArray: initialDataArray.reverse() + }, () => { + console.log('interactionMultiArray',this.state.interactionMultiArray) + // 把全局变变量赋值给state之后，初始化商品分类为空， 不然第二次进去的时候会自动添加进去 + // console.log('联动数据', this.state.interactionMultiArray) + // console.log('初始化数据', this.state.initailMultiArray) + + + }) // 用递归来整理无限层次的数据 + // console.log('联动数据', this.recursionInteraction(res.data.data)) + // console.log('初始数据', this.recursionInitialized(res.data.data).reverse()) + } else if (res.data.err_code === 88888) { + loginExpired(res) + } else { + Taro.showToast({ + title: res.data.err_msg, + icon: 'none' + }) + } + } + ) + .catch(error => { + console.log('商品分类请求错误', error) + }) + } + + //联动确认 + bindMultiPickerChange(e) { + // 如果没有上商品 那就不执行 + if (getGlobalStorage('shopInfo').shop_id) { + this.setState({ + multiIndex: e.detail.value.map(item => { if (item === null) { item = 0 } return item }) + }, () => { + // console.log('picker发送选择改变，携带值为', this.state.multiIndex) + this.returnResultToParent() + + }) + } + } + returnResultToParent() { + let selected = this.state.interactionMultiArray + for (let index of this.state.multiIndex) { + if (selected[index].children[0].id) { + selected = selected[index].children + } else { + this.props.onPassDataToChild(selected[index]) + break + } + } + } + // 递归整理无限层初始数据,将整理好的数据赋值给initialDataArray + recursionInitialized(data) { + const arrayTem = [] + if (data.length) { + for (let item of data) { + arrayTem.push({ name: item.class_name, id: item.class_id }) + } + } + if (data[0].children.length) { + this.recursionInitialized(data[0].children) + } + initialDataArray.push(arrayTem) + return arrayTem + } + + + + // 递归整理无限层联动数据 + recursionInteraction(data) { + let arrayTem = [] + for (let items of data) { + arrayTem.push({ name: items.class_name, id: items.class_id }) + if (items.children) { + arrayTem[arrayTem.length - 1].children = this.recursionInteraction(items.children) + } 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.children ? childrenHolderArray.push(...item.children) : null + // } + // this.recursionInitialized(childrenHolderArray) + // } + + // arrayTem.length ? initialDataArray.push(arrayTem) : null // 数组为空则不添加 + // return initialDataArray + // } + + // 递归整理无限层初始数据 + 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.children ? childrenHolderArray.push(...item.children) : 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 = { + 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 + data.multiArray[2] = this.state.interactionMultiArray[indexNumber].children[data.multiIndex[1]].children + data.multiArray[3] = this.state.interactionMultiArray[indexNumber].children[data.multiIndex[1]].children[data.multiIndex[2]].children + } + } + } else if (e.detail.column == 1) { + for (let index in data.multiArray[1]) { + const indexNumber = Number(index) + if (indexNumber === data.multiIndex[1]) { + data.multiArray[2] = this.state.interactionMultiArray[data.multiIndex[0]].children[indexNumber].children + } + } + } + else if (e.detail.column == 2) { + for (let index in data.multiArray[2]) { + const indexNumber = Number(index) + if (indexNumber === data.multiIndex[2]) { + data.multiArray[3] = this.state.interactionMultiArray[data.multiIndex[0]].children[data.multiIndex[1]].children[indexNumber].children + } + } + } + + this.setState({ multiIndex: data.multiIndex }) + } + + aliBindMultiPickerCol(e) { + console.log('，值为', e.detail.value) + + this.setState({ multiIndex: e.detail.value }) + } + + aliCancelButton() { + this.setState({ + AliIsShowPicker: false + }) + } + aliConfirmButton() { + this.setState({ + AliIsShowPicker: false + }) + this.returnResultToParent() + } + invokeAliPicker() { + this.setState({ + AliIsShowPicker: true + }) + } + + componentDidMount() { + + if (getGlobalStorage('shopInfo').shop_id) { + this.getProductCateList(this.props.url) + } else { + + } + + } + // 当然父组件有新的props的 会从新渲染组件 + componentWillReceiveProps(nextProps) { + + } + componentWillUnmount() { } + + componentDidShow() { } + + componentDidHide() { } + + render() { + return ( + + + + + + + {this.state.AliIsShowPicker ? + + + + + 取消 + 确定 + + + + {this.state.interactionMultiArray.map((item, index) => { + return {item.name} + })} + + + {this.state.interactionMultiArray[this.state.multiIndex[0]].children.map((item, index) => { + return {item.name} + })} + + + {this.state.interactionMultiArray[this.state.multiIndex[0]].children[this.state.multiIndex[1]].children.map((item, index) => { + return {item.name} + })} + + + {this.state.interactionMultiArray[this.state.multiIndex[0]].children[this.state.multiIndex[1]].children[this.state.multiIndex[2]].children.map((item, index) => { + return {item.name} + })} + + + : null} + + + + ) + } +} + +export default AliGoodsTypeInteraction + + diff --git a/src/component/aliGoodsTypeInteraction/aliGoodsTypeInteraction.scss b/src/component/aliGoodsTypeInteraction/aliGoodsTypeInteraction.scss new file mode 100644 index 0000000..072ed56 --- /dev/null +++ b/src/component/aliGoodsTypeInteraction/aliGoodsTypeInteraction.scss @@ -0,0 +1,47 @@ + +.picker-wrapper{ + .item-content__info-title{ + font-weight: bold + } + .item-extra__info{ + color: black + } + .at-list__item{ + padding-left: 0px; + } + } +.curtain{ + height: 100%; + background-color: black; + width: 100%; + position: fixed; + z-index: 99; + opacity: 0.5; + position: fixed; + top: 0; + left:0 +} + +.ali-picker-container{ + position: fixed; + width: 100%; + bottom: 0px; + left:0; + background-color: #fff; + z-index: 100; + opacity: 1; + .button{ + display: flex; + flex-direction: row; + padding:20px 30px; + border-bottom: 1px solid #d6e4ef; +} + .cancel-button{ + flex:1; + text-align: left; + } + .confirm-button{ + flex:1; + text-align: right; + } + } diff --git a/src/component/aliIndustryTypeInteraction/aliIndustryTypeInteraction.js b/src/component/aliIndustryTypeInteraction/aliIndustryTypeInteraction.js index ad24226..a1f9d4c 100644 --- a/src/component/aliIndustryTypeInteraction/aliIndustryTypeInteraction.js +++ b/src/component/aliIndustryTypeInteraction/aliIndustryTypeInteraction.js @@ -198,8 +198,8 @@ class AliIndustryTypeInteraction extends Component { return ( - - + + {this.state.AliIsShowPicker ? diff --git a/src/component/aliIndustryTypeInteraction/aliIndustryTypeInteraction.scss b/src/component/aliIndustryTypeInteraction/aliIndustryTypeInteraction.scss index 061d03a..072ed56 100644 --- a/src/component/aliIndustryTypeInteraction/aliIndustryTypeInteraction.scss +++ b/src/component/aliIndustryTypeInteraction/aliIndustryTypeInteraction.scss @@ -6,6 +6,9 @@ .item-extra__info{ color: black } + .at-list__item{ + padding-left: 0px; + } } .curtain{ height: 100%; @@ -16,12 +19,14 @@ opacity: 0.5; position: fixed; top: 0; + left:0 } .ali-picker-container{ position: fixed; width: 100%; bottom: 0px; + left:0; background-color: #fff; z-index: 100; opacity: 1; diff --git a/src/component/interactionComponent/interactionComponent.js b/src/component/interactionComponent/interactionComponent.js index 2b46f5e..1020c6e 100644 --- a/src/component/interactionComponent/interactionComponent.js +++ b/src/component/interactionComponent/interactionComponent.js @@ -6,7 +6,7 @@ import './interactionComponent.scss' import loginExpired from '../../util/loginExpired'; import { getGlobalStorage } from '../../util/getSetStoage'; - +// 这个是行业分类的联动 let maxDepth = 0 let initialDataArray = [] class Interaction extends Component { diff --git a/src/pages/goodsPublish/goodsPublish.js b/src/pages/goodsPublish/goodsPublish.js index 6ce2ac3..3f297c0 100644 --- a/src/pages/goodsPublish/goodsPublish.js +++ b/src/pages/goodsPublish/goodsPublish.js @@ -7,6 +7,7 @@ import AliPictureUploadComponent from '../../component/aliPictureUploadComponent import ShopTypeInteractionComp from '../../component/shopTypeInteractionComp/shopTypeInteractionComp' import AliShopTypeInteraction from '../../component/AliShopTypeInteraction/AliShopTypeInteraction' import GoodsTypeInteractionComp from '../../component/goodsTypeInteractionComp/goodsTypeInteractionComp' +import AliGoodsTypeInteraction from '../../component/aliGoodsTypeInteraction/aliGoodsTypeInteraction' import LoginService from '../../util/LoginService' import URL from '../../serviceAPI.config' @@ -320,11 +321,16 @@ class GoodsPublish extends Component { {/* 商品分类开始 */} - + + : } + {/* 商品分类结束 */} @@ -380,18 +386,18 @@ class GoodsPublish extends Component { {/* 店铺分类 */} - {platformChecker() ? + {platformChecker() ? - : + : } {/* 店铺分类结束 */} @@ -401,12 +407,19 @@ class GoodsPublish extends Component { 商品简介: - + /> : +