mqzheng/cf-wx-app
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

shop page sidebar filter

Browse Source
This commit is contained in:
郑茂强 2018-12-04 17:32:30 +08:00
parent 215a2c5f61
commit 57d165ebbf
12 changed files with 384 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/component/bottomNav/bottomNav.js
View File

@ -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 (

23
src/component/filteredShopComponent/filteredShopComponent.js
View File

@ -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 <View className='goods-img-box' key={index}>
<Image className='goods-img' src={URL.Base+item.goods_url} />
</View>
})
}):null
return (
<View className='shop-list-box' >
<View className='header'>

53
src/component/shopItemComponent/shopItemComponent.js Normal file
View File

@ -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 (
<View className='shopitem-box'>
<View className='image-box'>
<Image className='img' src={imgURL}/>
</View>
<View className='price-box'>
<Text class='new-price'>￥{newPrice+' '}</Text>
<Text className='old-price'> ￥{oldPrice}</Text>
</View>
<View className='itemname-box'>
<View className='name'>{name}</View>
</View>
<View className='addon-box'>
<View className='basket'>
<Image src={cartIcon} style='width:12px; height:12px;'/>
<Text className='title'>0</Text>
</View>
<View className='browse-time'>
<Image src={eyeIcon} style='width:12px; height:12px;' />
<Text className='title' >{browseTimes}</Text>
</View>
</View>
</View>
)
}
}
export default ShopItem

52
src/component/shopItemComponent/shopItemComponent.scss Normal file
View File

@ -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
}
}
}
}

92
src/component/sideBarFilterComponent/sideBarFilterComponent.js Normal file
View File

@ -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 <AtTag style='margin-left:5px' key={index}
name={item.class_name}
type='primary'
active={this.state.isActive}
onClick={this.onClick.bind(this)}
>{item.class_name}</AtTag>
})
// 商品类型
const goodsTypeElementsArray=goodsType.map((item,index)=>{
return <AtTag style='margin-left:5px' key={index}
name={item.goods_type_ch_name}
type='primary'
active={this.state.isActive}
onClick={this.onClick.bind(this)}
>{item.goods_type_ch_name}</AtTag>
})
//---------
const goodsParamElementsArray = goodsParam.map((item,index)=>{
return <View key={index}><View className='title' >{item.param_name}</View>
<View className='button-box'>
<AtTag style='margin-left:5px'
name={item.param_value[0]}
type='primary'
active={this.state.isActive}
onClick={this.onClick.bind(this)}
>{item.param_value[0]}</AtTag>
</View>
</View>
})
// 宽度
return (
<View className='filter-box'>
<View className='title'>分类</View>
<View className='button-box'>{goodsClassElementsArray}</View>
<View className='title'>商品类型</View>
<View className='button-box'>{goodsTypeElementsArray}</View>
{goodsParamElementsArray}
<View className='title'>宽度</View>
<View className='button-box'>
<AtTag style='margin-left:5px'
name={widthness.value_desc}
type='primary'
active={this.state.isActive}
onClick={this.onClick.bind(this)}
>{widthness.value_desc}</AtTag>
</View>
<View className='confirm-button'>
<Button className='button' type='primary' size='mini' style='background-color:#FF9900' >确认</Button>
<Button className='button' type='primary' size='mini' style='background-color:#FF9900'>重置</Button>
</View>
</View>
)
}
}
export default sideBarFilterComponent

18
src/component/sideBarFilterComponent/sideBarFilterComponent.scss Normal file
View File

@ -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
}
}
}

BIN
src/icons/cart.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 6.0 KiB

BIN
src/icons/eye.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 7.4 KiB

2
src/pages/index/index.js
View File

@ -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({

118
src/pages/shop/shop.js
View File

@ -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 <View key={index} className='shop-item' >
<ShopItem item={item}></ShopItem>
</View>
}):null
const filterElementsArray=this.state.filterBar.map((item,index)=>{
return <View className={index === this.state.selectedFilterValue ? 'filter-title actived' :'filter-title'} key={index} onClick={this.onClickFilter.bind(this,index)}>
<Text className='text'>
{item}
</Text>
<Text className='icon'>
</Text>
</View>
})
return (
<View className='shop'>
<View className='searchBar-box'>
<AtSearchBar
showActionButton
value={this.state.value}
onChange={this.onChange.bind(this)}
onActionClick={this.onActionClick.bind(this)}
<AtSearchBar className='search-button'
showActionButton
value={this.state.value}
onChange={this.onChange.bind(this)}
onActionClick={this.onActionClick.bind(this)}
/>
</View>
<View className='banner-box'>
<Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} style='height:120px'/>
<Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} style='height:120px' />
<View className='shop-name'>{shopName}</View>
</View>
<View className='nav-box'>
@ -103,27 +162,28 @@ class Shop extends Component {
<Text className='text'>
首页
</Text>
</View>
<View className='home-link'>
<Text className='text'>
店铺说明
</Text>
</View>
</View>
</View>
<View className='filter-box'>
{filterElementsArray}
</View>
<View className={this.state.isShow ? 'side-filter show' :'side-filter'}>
<View className='left' onClick={this.isShowFilter.bind(this)}></View>
<View className='right'>
<SideBarFilter FilterText={this.state.FilterText}></SideBarFilter>
</View>
</View>
<View className='container'>
<View className='container'>
{ShopItemElementsArray}
</View>
</View>
</View>
)
}

62
src/pages/shop/shop.scss
View File

@ -1,4 +1,11 @@
.shop{
.search-button{
.at-search-bar__action{
background-color:#FF9900
}
}
}
.banner-box{
position: relative;
.shop-name{
@ -28,3 +35,58 @@
}
}
.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;
}
}

1
src/serviceAPI.config.js
View File

@ -5,6 +5,7 @@ const URL = {
ShopWxStore: LOCALURL + 'Shop-wxStore', //商城首页信息
ShopSupplyShops: LOCALURL + 'Shop-supplyShops',// 商城店铺信息
GoodsSearch: LOCALURL + 'GoodsSearch-search',// 店铺页面的信息
FilterText: LOCALURL + 'GoodsSearch-getSearchParam',// sidebar筛选的字段
}