From 57d165ebbf3eda37fb745e94a35f7d2092accf69 Mon Sep 17 00:00:00 2001 From: Maoqiang Zheng Date: Tue, 4 Dec 2018 17:32:30 +0800 Subject: [PATCH] shop page sidebar filter --- src/component/bottomNav/bottomNav.js | 2 +- .../filteredShopComponent.js | 23 ++-- .../shopItemComponent/shopItemComponent.js | 53 ++++++++ .../shopItemComponent/shopItemComponent.scss | 52 ++++++++ .../sideBarFilterComponent.js | 92 +++++++++++++ .../sideBarFilterComponent.scss | 18 +++ src/icons/cart.png | Bin 0 -> 6108 bytes src/icons/eye.png | Bin 0 -> 7609 bytes src/pages/index/index.js | 2 +- src/pages/shop/shop.js | 122 +++++++++++++----- src/pages/shop/shop.scss | 64 ++++++++- src/serviceAPI.config.js | 1 + 12 files changed, 384 insertions(+), 45 deletions(-) create mode 100644 src/component/shopItemComponent/shopItemComponent.js create mode 100644 src/component/shopItemComponent/shopItemComponent.scss create mode 100644 src/component/sideBarFilterComponent/sideBarFilterComponent.js create mode 100644 src/component/sideBarFilterComponent/sideBarFilterComponent.scss create mode 100644 src/icons/cart.png create mode 100644 src/icons/eye.png diff --git a/src/component/bottomNav/bottomNav.js b/src/component/bottomNav/bottomNav.js index c998cd9..fc7daed 100644 --- a/src/component/bottomNav/bottomNav.js +++ b/src/component/bottomNav/bottomNav.js @@ -41,7 +41,7 @@ class bottomNav extends Component { render() { - const otherDataElementsArray = this.props.otherData.menu? this.props.otherData.menu.map((item, index) => { + const otherDataElementsArray = this.props.otherData? this.props.otherData.menu.map((item, index) => { return { title: item.name, iconType: 'clock' } }):null return ( diff --git a/src/component/filteredShopComponent/filteredShopComponent.js b/src/component/filteredShopComponent/filteredShopComponent.js index d993929..5835a10 100644 --- a/src/component/filteredShopComponent/filteredShopComponent.js +++ b/src/component/filteredShopComponent/filteredShopComponent.js @@ -31,21 +31,22 @@ class recommondShop extends Component { render() { - const title = this.props.shop.shop_name - const imgUrl = URL.Base + this.props.shop.goods[0].goods_url - const price = this.props.shop.goods[0].goods_price - const goods = this.props.shop.goods - const ProductName = this.props.shop.goods[0].goods_name - const address = this.props.shop.shop_address - const distance = this.props.shop.distance - const ads = this.props.shop.ads + const title = this.props.shop?this.props.shop.shop_name:null + const imgUrl = this.props.shop ? URL.Base + this.props.shop.goods[0].goods_url : null + const price = this.props.shop ? this.props.shop.goods[0].goods_price : null + const goods = this.props.shop ? this.props.shop.goods : null + const ProductName = this.props.shop ? this.props.shop.goods[0].goods_name : null + const address = this.props.shop ? this.props.shop.shop_address : null + const distance = this.props.shop ? this.props.shop.distance : null + const ads = this.props.shop ? this.props.shop.ads:null // const consultText = this.props.shop.wx_open - const voucherLeft = this.props.shop.left_nums - const goodsElementsArray=goods.slice(1).map((item,index)=>{ + const voucherLeft = this.props.shop?this.props.shop.left_nums:null + + const goodsElementsArray=goods!==null?goods.slice(1).map((item,index)=>{ return - }) + }):null return ( diff --git a/src/component/shopItemComponent/shopItemComponent.js b/src/component/shopItemComponent/shopItemComponent.js new file mode 100644 index 0000000..fa1d5dd --- /dev/null +++ b/src/component/shopItemComponent/shopItemComponent.js @@ -0,0 +1,53 @@ +import Taro, { Component } from '@tarojs/taro' +import { View, Image, Text } from '@tarojs/components' + +import eyeIcon from '../../icons/eye.png' +import cartIcon from '../../icons/cart.png' + +import './shopItemComponent.scss' +import URL from '../../serviceAPI.config' + +class ShopItem extends Component { + + + + render() { + const imgURL =this.props.item? URL.Base +this.props.item.goods_url:null + const newPrice = this.props.item ? this.props.item.goods_price : null + const oldPrice = this.props.item ? this.props.item.goods_org_price : null + const name = this.props.item ? this.props.item.goods_name : null + const browseTimes = this.props.item ? this.props.item.browse_times : null + + return ( + + + + + + ￥{newPrice+' '} + ￥{oldPrice} + + + + {name} + + + + + + 0 + + + + {browseTimes} + + + + + + + ) + } +} + +export default ShopItem diff --git a/src/component/shopItemComponent/shopItemComponent.scss b/src/component/shopItemComponent/shopItemComponent.scss new file mode 100644 index 0000000..52e14d8 --- /dev/null +++ b/src/component/shopItemComponent/shopItemComponent.scss @@ -0,0 +1,52 @@ + +.shopitem-box{ + padding:5%; + border:1px solid #eee; + .image-box{ + text-align: center; + .img{ + width: 80%; + height:400px; + + } + } + .price-box{ + .new-price{ + color:red; + font-size: 28px + } + .old-price{ + color:#999; + text-decoration: line-through; + font-size: 28px + } + } + .itemname-box{ + .name{ + font-size: 30px + } + } + .addon-box{ + display: flex; + font-size: 30px; + margin-top: 10px; + + .basket{ + margin:0 5px; + .title{ + margin-left: 5px + } + + } + .browse-time{ + margin:0 5px; + .title{ + margin-left: 5px + } + } + + } + +} + + diff --git a/src/component/sideBarFilterComponent/sideBarFilterComponent.js b/src/component/sideBarFilterComponent/sideBarFilterComponent.js new file mode 100644 index 0000000..e7dae8f --- /dev/null +++ b/src/component/sideBarFilterComponent/sideBarFilterComponent.js @@ -0,0 +1,92 @@ +import Taro, { Component } from '@tarojs/taro' +import { View,Button } from '@tarojs/components' +import { AtTag, AtButton} from 'taro-ui' + + + +import './sideBarFilterComponent.scss' + +class sideBarFilterComponent extends Component { + // 项目配置 + config = { + navigationBarTitleText: '筛选' + } + constructor() { + super(...arguments) + this.state = { + isActive:false + } + } + onClick(value){ + console.log(value) + } + render() { + + const goodsClass = this.props.FilterText?this.props.FilterText.goods_class:null + const goodsType = this.props.FilterText?this.props.FilterText.goods_type:null + const widthness = this.props.FilterText?this.props.FilterText.goodsParamExt['5'].param_value[0]:null + + const goodsParam = this.props.FilterText? this.props.FilterText.goodsParam:null +// 分类 + const goodsClassElementsArray=goodsClass.map((item,index)=>{ + return {item.class_name} + }) +// 商品类型 + const goodsTypeElementsArray=goodsType.map((item,index)=>{ + return {item.goods_type_ch_name} + }) +//--------- + const goodsParamElementsArray = goodsParam.map((item,index)=>{ + return {item.param_name} + + {item.param_value[0]} + + + + }) +// 宽度 + + + + return ( + + 分类 + {goodsClassElementsArray} + 商品类型 + {goodsTypeElementsArray} + {goodsParamElementsArray} + 宽度 + + {widthness.value_desc} + + + + + + + + ) + } +} + +export default sideBarFilterComponent \ No newline at end of file diff --git a/src/component/sideBarFilterComponent/sideBarFilterComponent.scss b/src/component/sideBarFilterComponent/sideBarFilterComponent.scss new file mode 100644 index 0000000..0916f90 --- /dev/null +++ b/src/component/sideBarFilterComponent/sideBarFilterComponent.scss @@ -0,0 +1,18 @@ +.filter-box{ + height: 100%; + margin-top: 30px; + overflow: scroll; + .title{ + margin-left: 20px; + font-size: 30px; + } + .button-box{ + margin:20px + } + .confirm-button{ + margin: 80px; + .button{ + margin:0 20px + } + } +} \ No newline at end of file diff --git a/src/icons/cart.png b/src/icons/cart.png new file mode 100644 index 0000000000000000000000000000000000000000..2cdf76e79848a02b79f8d52d1beeb1b7c1a83030 GIT binary patch literal 6108 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 CT5UD} literal 0 HcmV?d00001 diff --git a/src/icons/eye.png b/src/icons/eye.png new file mode 100644 index 0000000000000000000000000000000000000000..2f88df754e0eff1e1ecd66137a7e88927858fb69 GIT binary patch literal 7609 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 literal 0 HcmV?d00001 diff --git a/src/pages/index/index.js b/src/pages/index/index.js index af89135..0427a41 100644 --- a/src/pages/index/index.js +++ b/src/pages/index/index.js @@ -29,7 +29,7 @@ class Index extends Component { //http://ihome6.com/Shop-supplyShops componentDidMount(){ Taro.navigateTo({ - url: '/pages/home/home' + url: '/pages/shop/shop' }) // Taro.request({ diff --git a/src/pages/shop/shop.js b/src/pages/shop/shop.js index 7d11263..fd74fb7 100644 --- a/src/pages/shop/shop.js +++ b/src/pages/shop/shop.js @@ -1,10 +1,11 @@ import Taro, { Component } from '@tarojs/taro' import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components' -import { AtSearchBar, Picker } from 'taro-ui' +import { AtSearchBar, AtSegmentedControl, AtTabBar, AtDrawer } from 'taro-ui' import URL from '../../serviceAPI.config' import './shop.scss' - +import ShopItem from '../../component/shopItemComponent/shopItemComponent' +import SideBarFilter from '../../component/sideBarFilterComponent/sideBarFilterComponent' class Shop extends Component { // 项目配置 config = { @@ -13,9 +14,14 @@ class Shop extends Component { constructor() { super(...arguments) this.state = { + shopItem:'', value: '', shopId:'', - shopName:'' + shopName:'', + filterBar: ['综合排序','销量','新品','价格','人气','筛选'], + FilterText:'', + selectedFilterValue:0, + isShow:true } } onChange(value) { @@ -23,9 +29,36 @@ class Shop extends Component { value: value }) } + onActionClick() { console.log('开始搜索') } + getSearchParams(){ + Taro.request({ + url: URL.FilterText, + method: 'POST', + dataType: 'json', + data: { + goods: JSON.stringify({ + shop_name: false, + shop_id: 808, + shop_class_id: "" }), + + goodsSpec: JSON.stringify([]), + goodsParam: JSON.stringify([]), + goodsParamExt: JSON.stringify([]), + + }, + header: { + 'content-type': 'application/x-www-form-urlencoded', + 'X-Requested-With': 'XMLHttpRequest' + } + }) + .then(res => { + this.setState({ FilterText: res.data }) + }) + } + getShopInfo() { Taro.request({ @@ -37,12 +70,10 @@ class Shop extends Component { curr_page: 1, page_count: 50, shop_name: false, - shop_id: 1254, + shop_id: 1305, config_id: 4, - shop_class_id: '', - order: 'g.browse_times desc', - currPage: 1, - goods_class_id: 10401 + shop_class_id: '' + }), goodsRegion: JSON.stringify({}), goodsSpec: JSON.stringify([]), @@ -56,39 +87,67 @@ class Shop extends Component { } }) .then(res => { - console.log('res--',res) - + // console.log(res) + this.setState({ shopItem:res.data}) }) } + onClickFilter(value){ + this.setState({selectedFilterValue:value}) + const sideFilter=5 + if (value === sideFilter){ + this.setState({ isShow:true}) + } + } + isShowFilter(){ + this.setState({ isShow: false }) + } + componentWillMount() { this.setState({ shopId: this.$router.params.id, shopName: this.$router.params.name}) // 输出 { id: 2, type: 'test' } } componentDidMount(){ - this.getShopInfo() + this.getSearchParams() } - - componentDidShow() { } componentDidHide() { } render() { + const shopName= this.state.shopName - console.log(shopName) + const ShopItemElementsArray =this.state.shopItem? this.state.shopItem.goods.map((item,index)=>{ + return + + + }):null + + const filterElementsArray=this.state.filterBar.map((item,index)=>{ + return + + {item} + + + + + + + }) + + return ( - - + {shopName} @@ -103,27 +162,28 @@ class Shop extends Component { 首页 - 店铺说明 - - - - - - - + {filterElementsArray} + + + + + + + + + + {ShopItemElementsArray} + - - - ) } diff --git a/src/pages/shop/shop.scss b/src/pages/shop/shop.scss index e9cbad8..79be805 100644 --- a/src/pages/shop/shop.scss +++ b/src/pages/shop/shop.scss @@ -1,4 +1,11 @@ +.shop{ + .search-button{ + .at-search-bar__action{ + background-color:#FF9900 + } + } +} .banner-box{ position: relative; .shop-name{ @@ -27,4 +34,59 @@ } } -} \ No newline at end of file +} +.filter-box{ + display: flex; + flex-wrap: nowrap; + flex-direction: row; + + .filter-title{ + box-sizing:border-box; + flex:1; + text-align: center; + font-size: 28px; + margin: 5px; + color:#999; + border: 1px solid #999 + } + .actived{ + color:#b10000 + } + +} +.side-filter{ + z-index: 10; + position: fixed; + top:0; + right:0; + width:0%; + height:100%; + transition:width 1s; + display: flex; + .left{ + width:30%; + + } + .right{ + width: 70%; + background: white + } + +} +.show{ + width: 100% +} + + +.container{ + display: flex; + flex-wrap: wrap; + flex-direction: row; + .shop-item{ + box-sizing:border-box; + width: 50%; + padding:5px; + + } + +} diff --git a/src/serviceAPI.config.js b/src/serviceAPI.config.js index 622334a..b97f7f0 100644 --- a/src/serviceAPI.config.js +++ b/src/serviceAPI.config.js @@ -5,6 +5,7 @@ const URL = { ShopWxStore: LOCALURL + 'Shop-wxStore', //商城首页信息 ShopSupplyShops: LOCALURL + 'Shop-supplyShops',// 商城店铺信息 GoodsSearch: LOCALURL + 'GoodsSearch-search',// 店铺页面的信息 + FilterText: LOCALURL + 'GoodsSearch-getSearchParam',// sidebar筛选的字段 }