diff --git a/src/pages/allDemanding/allDemanding.js b/src/pages/allDemanding/allDemanding.js index 8815c55..37693ce 100644 --- a/src/pages/allDemanding/allDemanding.js +++ b/src/pages/allDemanding/allDemanding.js @@ -1,7 +1,7 @@ import Taro, { Component } from '@tarojs/taro' import { View, Text, Image,Button } from '@tarojs/components' import { AtInput, AtButton, Picker, AtIcon, AtLoadMore, AtModal, AtToast,AtModalHeader ,AtModalContent ,AtModalAction } from 'taro-ui' -import copyrightComponent from '../../component/copyrightComponent/copyrightComponent' +import CopyrightComponent from '../../component/copyrightComponent/copyrightComponent' import URL from '../../serviceAPI.config' import './allDemanding.scss' @@ -277,7 +277,7 @@ class AllDemanding extends Component { loadingText='加载中' noMoreText='没有更多了' /> - + ) } diff --git a/src/pages/index/index.js b/src/pages/index/index.js index 46cd699..1091d3c 100644 --- a/src/pages/index/index.js +++ b/src/pages/index/index.js @@ -30,7 +30,7 @@ class Index extends Component { componentDidMount(){ Taro.navigateTo({ // url: '/pages/goodsPublish/goodsPublish' - url: '/pages/shop/shop' + url: '/pages/home/home' // url: '/pages/myDemandSupplyEdit/myDemandSupplyEdit' // url: '/pages/home/home' // url:'/pages/supplyDemandPublish/supplyDemandPublish' diff --git a/src/pages/mySupplyDemand/mySupplyDemand.scss b/src/pages/mySupplyDemand/mySupplyDemand.scss index 68690da..9786ffc 100644 --- a/src/pages/mySupplyDemand/mySupplyDemand.scss +++ b/src/pages/mySupplyDemand/mySupplyDemand.scss @@ -71,9 +71,12 @@ $themeColor:#FF7142; flex-direction: row; margin: 40px 0; padding: 0 120px; + .button{ flex:1; text-align: center; + + .at-button--primary{ background-color:$themeColor; border:1PX solid $themeColor; @@ -108,7 +111,8 @@ $themeColor:#FF7142; .button{ // flex:1; text-align: center; - margin: 0 0; + margin:1% 1% 0; + .at-button--primary{ background-color:#FF9500; border:1PX solid #FF9500; diff --git a/src/pages/shop/shop.js b/src/pages/shop/shop.js index ea52b81..8096f7e 100644 --- a/src/pages/shop/shop.js +++ b/src/pages/shop/shop.js @@ -1,6 +1,6 @@ import Taro, { Component } from '@tarojs/taro' import { View, Button, Text, Image } from '@tarojs/components' -import { AtTag, AtIcon, AtPagination } from 'taro-ui' +import { AtTag, AtIcon, AtPagination, AtToast } from 'taro-ui' import URL from '../../serviceAPI.config' @@ -27,7 +27,7 @@ class Shop extends Component { filterBar: ['all', 'amount', 'newProduct', 'price', 'popularity'], //筛选选项 filterBarKeys: { all: '综合排序', amount: '销量', newProduct: '新品', price: '价格', popularity: '人气' }, // 筛选选项对应值 selectedFilterValue: 0, //筛选项 - isShowFilter: false, //是否显示侧边筛选 + isShowFilter: true, //是否显示侧边筛选 showShopHomePage: true,// 是否显示首页页面 shopDescriptionData: '',// 店铺详情信息 shopName: '',//店铺名称 @@ -42,47 +42,47 @@ class Shop extends Component { price: false, popularity: false, }, - cate: { - 10101: false,// "橱柜" - 10102: false,// "衣柜" - 10106: false,// "装饰柜" - 20101: false,// "定制设计" - 20103: false,// "产品设计" - 30101: false,// "橱柜" - 30102: false,// "衣柜" - }, + filterCondition: '',// 筛选条件 total: 0,// 信息条数 currentPage: 1,// 当前页 isShowShopAllCate: false, - shopAllInnerCate: '', - isBlurWindow:false, + shopAllInnerCate: '',// 店铺内部分类 + isBlurWindow: false, + mainType: [],// 侧边筛选分类 + goodType: [],//侧边商品类型 + otherType: [],//侧边其他类型 + widthType: [],// 侧边宽度类型 + checkedFilterIdList: [],//已选的筛选id + isLoading: false, + // 下面是函数的默认参数 + curr_page: 1, + page_count: 10, + shop_name: false, + shop_id: 1305, + config_id: 4, + shop_class_id: '', + order: '', + currPage: 1, + goods_class_id: '', + goodsSpec: [], + goodsParam: [], + goodsParamExt: [], } } - //api 搜索栏的方法请求 - getSearchBarkeyWords() { - Taro.request({ - url: URL.SearchBarKeyWords, - method: 'POST', - dataType: 'json', - data: { - searchContent: '背板', - searchType: 1 - }, - header: { - 'content-type': 'application/x-www-form-urlencoded', - 'X-Requested-With': 'XMLHttpRequest' - } - }).then(res => { - console.log('搜索栏的搜索结果', res) - }) - - } - // api 得到筛选的标签请求 - getSearchParams({ shop_name = false, shop_id = 1305, shop_class_id = "", goods_class_id = 0, class_filter = 0 }) { + getSearchParams({ + shop_name = this.state.shop_name, + shop_id = this.state.shop_id, + shop_class_id = this.state.shop_class_id, + goods_class_id = this.state.goods_class_id, + class_filter = this.state.class_filter, + goods_type = this.state.goods_type, + goodsSpec = this.state.goodsSpec, + goodsParam = this.state.goodsParam, + goodsParamExt = this.state.goodsParamExt }) { Taro.request({ url: URL.GetSearchParam, method: 'POST', @@ -94,11 +94,12 @@ class Shop extends Component { shop_class_id: shop_class_id, goods_class_id: goods_class_id, class_filter: class_filter, + goods_type: goods_type, }), - goodsSpec: JSON.stringify([]), - goodsParam: JSON.stringify([]), - goodsParamExt: JSON.stringify([]), + goodsSpec: JSON.stringify(goodsSpec), + goodsParam: JSON.stringify(goodsParam), + goodsParamExt: JSON.stringify(goodsParamExt), }, header: { @@ -107,12 +108,97 @@ class Shop extends Component { } }) .then(res => { - this.setState({ FilterText: res.data }) + if (res.statusCode === 200) { + console.log('筛选项目成功', res) + + + this.formatFilterData(res.data).then(data => { + + this.setState({ + sideFilterdata: data, + mainType: data.mainType || [], + goodType: data.goodType || [], + otherType: data.otherType || [], + widthType: data.widthType || [], + isLoading: false + }) + console.log('formated data', data) + }) + } else { + console.log('筛选项目获取失败') + } + + + }) } + async formatFilterData(data) { + const formatedFilterOptions = {} + //侧边筛选分类 + if (data.goods_class) { + let typeArray = [] + data.goods_class.forEach(item => { + typeArray.push({ id: item.class_id, name: item.class_name, checked: false }) + }); + formatedFilterOptions.mainType = typeArray + } + //侧边筛选商品类型 + if (data.goods_type) { + let goodTypeArray = [] + Object.keys(data.goods_type).forEach(key => { + goodTypeArray.push({ id: data.goods_type[key].goods_type_id, name: data.goods_type[key].goods_type_ch_name, checked: false }) + }); + formatedFilterOptions.goodType = goodTypeArray + } + //侧边筛选其他类型 + if (data.goodsParam) { + let goodsParamArray = [] + + Object.keys(data.goodsParam).forEach(key => { + const value = data.goodsParam[key] + const subArray = value.param_value.map(item => { + return { id: value.param_id, name: item, checked: false } + }) + goodsParamArray.push({ [value.param_name]: subArray }) + }); + formatedFilterOptions.otherType = goodsParamArray + } + //侧边筛选宽度类型 + if (data.goodsParamExt) { + let goodsParamExtArray = [] + Object.keys(data.goodsParamExt).forEach(key => { + const value = data.goodsParamExt[key] + const keyId = value.param_id + Object.keys(value.param_value).forEach(item => { + const name = value.param_value[item].value_desc + const value1 = value.param_value[item] + + goodsParamExtArray.push({ name: name, value: value1, checked: false, id: keyId }) + }); + }); + formatedFilterOptions.widthType = goodsParamExtArray + + } + + return formatedFilterOptions + } + + // api 得到所有的产品请求 - goodsSearch({ curr_page = 1, page_count = 10, shop_name = false, shop_id = 1305, config_id = 4, shop_class_id = '', order = '', currPage = 1 }) { + goodsSearch({ + curr_page = this.state.curr_page, + page_count = this.state.page_count, + shop_name = this.state.shop_name, + shop_id = this.state.shop_id, + config_id = this.state.config_id, + shop_class_id = this.state.shop_class_id, + order = this.state.order, + currPage = this.state.currPage, + goods_class_id = this.state.goods_class_id, + goodsSpec = this.state.goodsSpec, + goodsParam = this.state.goodsParam, + goodsParamExt = this.state.goodsParamExt }) { Taro.request({ url: URL.GoodsSearch, method: 'POST', @@ -126,12 +212,13 @@ class Shop extends Component { config_id: config_id, shop_class_id: shop_class_id, order: order, - currPage: currPage + currPage: currPage, + goods_class_id: goods_class_id, }), goodsRegion: JSON.stringify({}), - goodsSpec: JSON.stringify([]), - goodsParam: JSON.stringify([]), - goodsParamExt: JSON.stringify([]), + goodsSpec: JSON.stringify(goodsSpec), + goodsParam: JSON.stringify(goodsParam), + goodsParamExt: JSON.stringify(goodsParamExt), }, header: { 'content-type': 'application/x-www-form-urlencoded', @@ -139,7 +226,9 @@ class Shop extends Component { } }) .then(res => { - this.setState({ shopItem: res.data.goods, total: res.data.goodsCount, filterCondition: order }) + this.setState({ shopItem: res.data.goods, total: res.data.goodsCount, filterCondition: order, isLoading: false }, () => { + + }) }) } @@ -195,7 +284,7 @@ class Shop extends Component { each['id'] = item sortedData.push(each) } - console.log('sorteddata', sortedData) + // console.log('sorteddata', sortedData) this.setState({ shopAllInnerCate: sortedData }) } else { @@ -206,8 +295,8 @@ class Shop extends Component { } ) } - - + + // 产品排序 @@ -299,24 +388,75 @@ class Shop extends Component { this.setState({ isShowFilter: !this.state.isShowFilter }) } // 选择侧边筛选的标签 - selectTag(value) { - for (let item in this.state.cate) { - if (value === item) { - this.setState(prevState => ({ - cate: { - ...prevState.cate, - [item]: !this.state.cate[item] - } - }), () => { - this.getSearchParams({ goods_class_id: value, class_filter: 1 }) - }) + selectTag(name) { + const id = name.name + console.log('clicked ID', id) + this.setState({ isLoading: true }) + // 处理分类筛选项 + const newMainType = this.state.mainType.map((item) => { + if (item.id === id) { + item.checked = !item.checked + setTimeout(() => { + this.setState({ goods_class_id: id, checkedFilterIdList: this.state.checkedFilterIdList.concat([item]) }, () => { + this.getSearchParams({ goods_class_id: this.state.goods_class_id }) + this.goodsSearch({ goods_class_id: this.state.goods_class_id }) + }) + }, 1000); } - } - } - handleOnPageChange(value) { + return item + }) + // 处理商品类型筛选项 + const newGoodType = this.state.goodType.map((item) => { + if (item.id === id) { + item.checked = !item.checked + setTimeout(() => { + this.setState({ goods_type: id, checkedFilterIdList: this.state.checkedFilterIdList.concat([item]) }, () => { + this.getSearchParams({ goods_type: this.state.goods_type }) + this.goodsSearch({ goods_type: this.state.goods_type }) + }) + + }, 1000); + } + return item + }) + // 处理其他筛选项 + const newOtherType = this.state.otherType.map(item => { + const value = Object.values(item)[0] + for (let each in value) { + if (value[each].name === id) { + value[each].checked = !value[each].checked + + setTimeout(() => { + this.setState({ checkedFilterIdList: this.state.checkedFilterIdList.concat(value[each]), goodsParam: [{ param_id: value[each].name.id, param_value: value[each].name }] }, () => { + this.getSearchParams({ goodsParam: this.state.goodsParam }) + this.goodsSearch({ goodsParam: this.state.goodsParam }) + }) + }, 1000); + } + } + return item + }) + // 处理宽度筛选项 + const newWidthType = this.state.widthType.map((item) => { + if (item.name === id) { + item.checked = !item.checked + setTimeout(() => { + this.setState({ checkedFilterIdList: this.state.checkedFilterIdList.concat(item), goodsParamExt: [{ param_id: item.id, param_ext: [item.value] }] }, () => { + this.getSearchParams({ goodsParamExt: this.state.goodsParamExt }) + this.goodsSearch({ goodsParamExt: this.state.goodsParamExt }) + }) + }, 1000); + } + return item + }) + this.setState({ mainType: newMainType, goodType: newGoodType, widthType: newWidthType, otherType: newOtherType }, () => { + // console.log(this.state.mainType) + }) + } + + handleOnPageChange(value) { this.setState({ currentPage: value.current }) - // console.log('currentPage', currentPage ,'condition',this.state.filterCondition) this.goodsSearch({ curr_page: value.current, order: this.state.filterCondition }) } showHomePage() { @@ -326,19 +466,48 @@ class Shop extends Component { this.setState({ showShopHomePage: false }) } isShowShopAllCate() { - this.setState({ isShowShopAllCate: !this.state.isShowShopAllCate,isBlurWindow:true }) + this.setState({ isShowShopAllCate: !this.state.isShowShopAllCate, isBlurWindow: true }) } - handleShopInnerCate(id){ + handleShopInnerCate(id) { this.setState({ - isShowShopAllCate: false,isBlurWindow:false + isShowShopAllCate: false, isBlurWindow: false }) - this.goodsSearch({shop_class_id:id,shop_id: this.$router.params.id}) - + this.goodsSearch({ shop_class_id: id, shop_id: this.$router.params.id }) + } - closeBgWindow(){ + // 确认筛选 + submitFilter() { + this.setState({ isShowFilter: false }) + } + + //重置按键筛选 + resetFilterList() { this.setState({ - isShowShopAllCate: false,isBlurWindow:false + checkedFilterIdList: [], curr_page: 1, + page_count: 10, + shop_name: false, + shop_id: 1305, + config_id: 4, + shop_class_id: '', + order: '', + currPage: 1, + goods_class_id: '', + goodsSpec: [], + goodsParam: [], + goodsParamExt: [], + }, () => { + this.getSearchParams({}) + this.goodsSearch({}) + }) + + + } + + // 关闭背景window + closeBgWindow() { + this.setState({ + isShowShopAllCate: false, isBlurWindow: false }) } @@ -351,7 +520,7 @@ class Shop extends Component { this.getSearchParams({})// 加载筛选项 this.getShopDescription({ shopID: this.$router.params.id }) // 加载店铺说明 // this.getSearchBarkeyWords() - this.getShopInnerCate({id:this.$router.params.id}) + this.getShopInnerCate({ id: this.$router.params.id }) } componentDidShow() { } @@ -359,6 +528,11 @@ class Shop extends Component { componentDidHide() { } render() { + const loadingElement = const ShopItemElementsArray = this.state.shopItem.length ? this.state.shopItem.map((item, index) => { return @@ -375,47 +549,66 @@ class Shop extends Component { {index !== 0 && index !== 5 && (isTure ? : )} }) - // const widthness = this.state.FilterText ? this.state.FilterText.goodsParamExt[5].param_value[0] : null // filter 宽度选项 + // 侧边已选项 + const checkedFilterElementsArray = this.state.checkedFilterIdList.map((item, index) => { + return {item.name} + }) + + + // 侧边筛选的分类项 - - const goodsClassElementsArray = this.state.FilterText.goods_class ? this.state.FilterText.goods_class.map((item, index) => { - - let isTrue = this.state.cate[item.class_id] + const goodsClassElementsArray = this.state.mainType.map((item, index) => { return {item.class_name} - }) : null + name={item.id} + type='primary' + active={item.checked} + onClick={this.selectTag.bind(this)} + >{item.name} + }) // 侧边筛选的商品类型项 - const goodsTypeKeyArray = this.state.FilterText.goods_type ? Object.keys(this.state.FilterText.goods_type) : null - const goodsTypeElementsArray = goodsTypeKeyArray ? goodsTypeKeyArray.map((key, index) => { - let object = this.state.FilterText.goods_type + const goodsTypeElementsArray = this.state.goodType.map((item, index) => { return {object[key].goods_type_ch_name} - }) : null + name={item.id} + type='primary' + active={item.checked} + onClick={this.selectTag.bind(this)} + >{item.name} + }) // 侧边筛选的其他项 - const goodsParamKeyArray = this.state.FilterText.goodsParam ? Object.keys(this.state.FilterText.goodsParam) : null - const goodsParamElementsArray = goodsParamKeyArray ? goodsParamKeyArray.map((key, index) => { - let object = this.state.FilterText.goodsParam - return {object[key].param_name} - - {object[key].param_value[0]} - + const goodsParamElementsArray = this.state.otherType.map((item, index) => { + let titleKey = Object.keys(item)[0] + let values = item[titleKey] + return {titleKey} + {values.map((subItem, subIndex) => { + let name = subItem.name + let isCheck = subItem.checked + return + {name} + + })} - }) : null + }) + // 侧边筛选宽度选项 + const widthnessElementsArray = this.state.widthType.map((item, index) => { + return {item.name} + }) // 店铺页面/店铺主页 const shopHomepageElement = @@ -432,23 +625,19 @@ class Shop extends Component { {/* 侧边筛选 */} - 分类 + {this.state.checkedFilterIdList.length ? 已选择 : null} + {checkedFilterElementsArray} + {this.state.mainType.length?分类:null} {goodsClassElementsArray} - 商品类型 + {this.state.goodType.length?商品类型:null} {goodsTypeElementsArray} {goodsParamElementsArray} - 宽度 - - {/* {widthness.value_desc} */} - + {this.state.widthType.length?宽度:null} + {widthnessElementsArray} + - - + + @@ -462,10 +651,10 @@ class Shop extends Component { @@ -473,7 +662,7 @@ class Shop extends Component { // 店铺详情 const shopDescriptionElement = - + {this.state.shopName} @@ -506,14 +695,14 @@ class Shop extends Component { const shopAllCateElementArray = this.state.shopAllInnerCate.map((item, index) => { - return {item.n} + return {item.n} }) return ( - - + {loadingElement} + - + {this.state.shopName}