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 0000000..2cdf76e Binary files /dev/null and b/src/icons/cart.png differ diff --git a/src/icons/eye.png b/src/icons/eye.png new file mode 100644 index 0000000..2f88df7 Binary files /dev/null and b/src/icons/eye.png differ 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筛选的字段 }