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