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}