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

add goods page and goodpublish page

Browse Source
This commit is contained in:
郑茂强 2018-12-06 17:24:34 +08:00
parent d1d31e00d5
commit 1b48b7b55a
14 changed files with 800 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
src/app.js
View File

@ -21,6 +21,10 @@ class App extends Component {
'pages/index/index',
'pages/home/home',
'pages/shop/shop',
'pages/goods/goods',
'pages/goodsPublish/goodsPublish',
// 'pages/supplyDemandPubish/supplyDemandPubish',
// 'pages/mySupplyDemand/mySupplyDemand',
],
window: {
backgroundTextStyle: 'light',

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

@ -19,10 +19,18 @@ class bottomNav extends Component {
}
handleClick(value){
this.setState({
current: value
})
let path=this.props.otherData.menu[value].url
const otherData = [
{ name: '首页', url: '/pages/home/home' },
{ name: '商品发布', url: '/pages/goodsPublish/goodsPublish' },
{ name: '供求发布', url: '/pages/supplyDemandPubish/supplyDemandPubish' },
{ name: '我的供求', url: '/pages/mySupplyDemand/mySupplyDemand' },
{ name: '更多', url: '' },
]
let path=otherData[value].url
Taro.navigateTo({
url: path,
})
@ -40,10 +48,17 @@ class bottomNav extends Component {
componentDidHide() { }
render() {
const otherDataElementsArray = this.props.otherData? this.props.otherData.menu.map((item, index) => {
const otherData=[
{ name: '首页', url:'pages/home/home'},
{ name: '商品发布', url:'pages/shop/shop'},
{name:'供求发布',url:''},
{name:'我的供求',url:''},
{name:'更多',url:''},
]
// const otherDataElementsArray = this.props.otherData? this.props.otherData.menu.map((item, index) => {
const otherDataElementsArray = otherData.map((item, index) => {
return { title: item.name, iconType: 'clock' }
}):null
})
return (
<View >
<AtTabBar className='bottom-nav'

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

@ -41,8 +41,8 @@ class recommondShop extends Component {
const ads = this.props.shop ? this.props.shop.ads:null
// const consultText = this.props.shop.wx_open
const voucherLeft = this.props.shop?this.props.shop.left_nums:null
const goodsElementsArray=goods!==null?goods.slice(1).map((item,index)=>{
const slicedGoods = goods !==null?goods.slice(1):null
const goodsElementsArray = goods !== null ? slicedGoods.map((item,index)=>{
return <View className='goods-img-box' key={index}>
<Image className='goods-img' src={URL.Base+item.goods_url} />
</View>

8
src/component/shopItemComponent/shopItemComponent.js
View File

@ -11,6 +11,12 @@ class ShopItem extends Component {
shopOnClickHanlder(){
Taro.navigateTo({
url: '/pages/goods/goods?id=123&name=michael'
})
}
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
@ -19,7 +25,7 @@ class ShopItem extends Component {
const browseTimes = this.props.item ? this.props.item.browse_times : null
return (
<View className='shopitem-box'>
<View className='shopitem-box' onClick={this.shopOnClickHanlder.bind(this)}>
<View className='image-box'>
<Image className='img' src={imgURL}/>
</View>

203
src/pages/goods/goods.js Normal file
View File

@ -0,0 +1,203 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Image } from '@tarojs/components'
import { AtSearchBar, AtTabs, AtTabsPane,AtSegmentedControl } from 'taro-ui'
import './goods.scss'
class Goods extends Component {
config = {
navigationBarTitleText: '商品'
}
constructor() {
super(...arguments)
this.state = {
value:'',
current: 0,
subCurrent:0,
}}
handleClick(value) {
this.setState({
current: value
})
}
subHandleClick(value) {
this.setState({
subCurrent: value
})
}
componentDidMount() {
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
}
componentWillUnmount() { }
componentDidShow() { }
componentDidHide() { }
render() {
const mainTabList = [{ title: '宝贝详情' }, { title: '全部评价' }, { title: '猜你喜欢' }]
const subTabList = [{ title: '全部' }, { title: '好评' }, { title: '差评' }, { title: '公开' }, { title: '匿名' }]
return (
<View className='gooods=container'>
<View className='searchBar-box'>
<AtSearchBar className='search-button'
actionName='搜索'
value={this.state.value}
onChange={this.onChange.bind(this)}
onActionClick={this.onActionClick.bind(this)}
/>
</View>
<View className='img-box'>
<Image className='img' src='http://192.168.1.230/Uploads/zone/user_1041/201808/thumb/e10a0bfea09a3078a800af8054bc80ce_400X400.jpg'></Image>
</View>
<View className='title-box'>
<View className='main-title'>
11
</View>
<View className='subtitle-box'>
11
</View>
</View>
<View className='price-box'>
<View className='org-box'>
<Text className='title'>原价</Text>
<Text className='price'>￥11</Text>
</View>
<View className='spe-price'>
<Text className='title'>促销价</Text>
<Text className='price'>￥11</Text>
</View>
</View>
<View className='info-box'>
<View className='type'>
<Text className='title'>商品类型</Text>
<Text className='desc'>设计师商品</Text>
</View>
<View className='district'>
<Text className='title'>服务区域</Text>
<Text className='desc'>中国/福建省(全省)</Text>
</View>
</View>
<View className='counter-box'>
<View className='month-sold'>
<Text className='title'>月销量</Text>
<Text className='amount'>0</Text>
</View>
<View className='total-sold'>
<Text className='title'>总销量</Text>
<Text className='amount'>0</Text>
</View>
<View className='browsing-amount'>
<Text className='title'>浏览量</Text>
<Text className='amount'>13</Text>
</View>
</View>
<View className='standard-box'>
<View className='title'>
可选规格
</View>
<View className='more'>
>点击
</View>
</View>
<View className='details-box'>
<AtTabs color='green' current={this.state.current} tabList={mainTabList} onClick={this.handleClick.bind(this)}>
<AtTabsPane current={this.state.current} index={0} >
<View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;' >标签页一的内容</View>
</AtTabsPane>
<AtTabsPane current={this.state.current} index={1}>
<View style='padding: 1px 0px 100px;background-color: #FAFBFC;text-align: center;'>
{ /*子标签Tab*/}
<AtSegmentedControl
values={['全部', '好评', '中评', '差评', '公开','匿名']}
onClick={this.subHandleClick.bind(this)}
current={this.state.subCurrent}
/>
{
this.state.current === 0
? <View className='tab-content'>标签1的内容</View>
: null
}
{
this.state.current === 1
? <View className='tab-content'>标签2的内容</View>
: null
}
{
this.state.current === 2
? <View className='tab-content'>标签3的内容</View>
: null
}
{
this.state.current === 3
? <View className='tab-content'>标签4的内容</View>
: null
}
{
this.state.current === 4
? <View className='tab-content'>标签5的内容</View>
: null
}
{
this.state.current === 5
? <View className='tab-content'>标签6的内容</View>
: null
}
</View>
</AtTabsPane>
<AtTabsPane current={this.state.current} index={2}>
<View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>标签页三的内容</View>
</AtTabsPane>
</AtTabs>
</View>
<View className='copyright-box'>
<View className='title'>
Copyright &copy; 晨丰全屋定制商城 闽ICP备16007300号-2
</View>
</View>
<View className='gap'>
</View>
<View className='shop-bottom-box' >
<View className='shop-bottom-nav'>
<View className='to-shop'>
进店
</View>
<View className='collection'>
收藏商品
</View>
<View className='add-cart'>
加入购物车
</View>
</View>
</View>
</View>
)
}
}
export default Goods

165
src/pages/goods/goods.scss Normal file
View File

@ -0,0 +1,165 @@
// border: 1px solid #ddd;
// padding: 5px 0;
.img-box{
border: 1px solid #ddd;
padding: 5px 0;
text-align: center;
.img{
height: 700px;
width: 60%
}
}
.title-box{
border: 1px solid #ddd;
padding: 5px 0;
.main-title{
margin-left: 20px;
font-size: 30px;
font-weight: bold;
}
.subtitle-box{
margin-left: 20px;
font-size: 25px;
}
}
.price-box{
border: 1px solid #ddd;
padding: 5px 0;
color:#999;
font-size: 25px;
.org-box{
margin-left: 20px;
.title{
font-weight: bold
}
.price{
text-decoration-line: line-through
}
}
.spe-price{
font-weight: bold;
margin-left: 20px;
.title{
}
.price{
font-size: 40px;
color:red
}
}
}
.info-box{
border: 1px solid #ddd;
padding: 5px 0;
color:#999;
font-size: 25px;
.type, .district{
margin-left: 20px;
padding: 5px 0;
.title{
font-weight: bold
}
.desc{
color: black;
display: inline-block;
margin-left: 20px
}
}
}
.counter-box{
display: flex;
flex-direction: row;
flex-wrap: nowrap;
.month-sold,.total-sold,.browsing-amount{
flex:1;
font-size: 25px;
text-align: center;
margin:20px 0;
border-right: 1px solid #ddd;
.amount{
display: inline-block;
margin-left: 20px;
color:red;
font-weight: bold
}
}
.browsing-amount{
border-right: 0px solid #ddd;
}
}
.standard-box{
border: 1px solid #ddd;
padding: 10px 0;
color:#999;
font-size: 25px;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
.title{
flex:1;
font-weight: bold;
margin-left: 20px;
}
.more{
flex:1;
text-align: right;
margin-right: 20px;
}
}
.copyright-box{
padding:0 20px;
.title{
text-align: center;
line-height: 100px;
font-size: 25px;
}}
.gap{
height:150px;
}
.shop-bottom-box{
position: fixed;
bottom: 0;
width: 100%;
.shop-bottom-nav{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
text-align: center;
height: 60px;
line-height: 60px;
font-size: 30px;
.to-shop{
flex:1;
color: #333;
background-color: white;
}
.collection{
flex:1;
background-color: #FF9500;
color: white;
}
.add-cart{
flex:1;
background-color:#F03726;
color: white;
}
}
}

212
src/pages/goodsPublish/goodsPublish.js Normal file
View File

@ -0,0 +1,212 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Input, Radio, RadioGroup, Label } from '@tarojs/components'
import { AtInput, AtForm, AtImagePicker, AtTextarea, AtRadio, AtButton } from 'taro-ui'
import './goodsPublish.scss'
class GoodsPublish extends Component {
config = {
navigationBarTitleText: '商品发布'
}
constructor() {
super(...arguments)
this.state = {
files: [{
url: 'https://jimczj.gitee.io/lazyrepay/aragaki1.jpeg',
},
{
url: 'https://jimczj.gitee.io/lazyrepay/aragaki2.jpeg',
},
{
url: 'https://jimczj.gitee.io/lazyrepay/aragaki3.png',
}],
list: [
{
value: '美国',
text: '美国',
checked: false
},
{
value: '中国',
text: '中国',
checked: true
},
{
value: '巴西',
text: '巴西',
checked: false
},
{
value: '日本',
text: '日本',
checked: false
}
]
}
}
onChange(files) {
this.setState({
files
})
}
onFail(mes) {
console.log(mes)
}
onImageClick(index, file) {
console.log(index, file)
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
}
componentWillUnmount() { }
componentDidShow() { }
componentDidHide() { }
render() {
return (
<View className='goods-publish'>
<View className='goods-category'>
<View className='border-box'>
<AtInput
name='value'
title='商品类型：'
type='text'
value={this.state.value}
onChange={this.handleChange.bind(this)}
/>
</View>
<AtInput
name='value'
title='商品价格：'
type='text'
placeholder='￥'
value={this.state.value}
onChange={this.handleChange.bind(this)}
/>
<AtInput
name='value'
title='商品单位：'
type='text'
value={this.state.value}
onChange={this.handleChange.bind(this)}
/>
<View className='img-box'>
<View className='title-box'>
<Text className='title'>上传图片:</Text>
</View>
<View className='img-container'>
<AtImagePicker
multiple
files={this.state.files}
onChange={this.onChange.bind(this)}
onFail={this.onFail.bind(this)}
onImageClick={this.onImageClick.bind(this)}
/>
</View>
</View>
<View className='shoptype-box'>
<View className='title-box'>
<Text className='title'>商品分类:</Text>
</View>
<View className='shoptype-container'>
<View className='title-box'>
<Text className='title'>国家:</Text>
</View>
<View className='radio-box'>
<RadioGroup>
{this.state.list.map((item, i) => {
return (
<Label className='radio-list__label' for={i} key={i}>
<Radio color='#FF9500' className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
</Label>
)
})}
</RadioGroup>
</View>
<View className='title-box'>
<Text className='title'>国家:</Text>
</View>
<View className='radio-box'>
<RadioGroup>
{this.state.list.map((item, i) => {
return (
<Label className='radio-list__label' for={i} key={i}>
<Radio color='#FF9500' className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
</Label>
)
})}
</RadioGroup>
</View>
<View className='title-box'>
<Text className='title'>国家:</Text>
</View>
<View className='radio-box'>
<RadioGroup>
{this.state.list.map((item, i) => {
return (
<Label className='radio-list__label' for={i} key={i}>
<Radio color='#FF9500' className='radio-list__radio' value={item.value} checked={item.checked}>{item.text}</Radio>
</Label>
)
})}
</RadioGroup>
</View>
</View>
</View>
<View className='description-box'>
<View className='title-box'>
<Text className='title'>商品简介:</Text>
</View>
<AtTextarea
value={this.state.value}
onChange={this.handleChange.bind(this)}
maxlength='200'
placeholder='你的问题是...'
/>
</View>
</View>
<View className='button-box'>
<View className='button'>
<AtButton type='primary' size='small'>发布</AtButton>
</View>
<View className='button'>
<AtButton type='primary' size='small'>发布并新增</AtButton>
</View>
<View className='button'>
<AtButton type='primary' size='small'>商品列表</AtButton>
</View>
</View>
</View>
)
}
}
export default GoodsPublish

78
src/pages/goodsPublish/goodsPublish.scss Normal file
View File

@ -0,0 +1,78 @@
.goods-category{
padding: 10px 20px;
.border-box{
border-bottom: 1Px solid #d6e4ef;
}
.img-box{
margin-top:10Px;
.img-container{
border: 1Px solid #d6e4ef;
border-radius:8rpx;
}
}
.shoptype-box{
margin-top:10Px;
}
.description-box{
margin-top:10Px;
}
}
.shoptype-box{
.shoptype-container{
border: 1Px solid #d6e4ef;
border-radius:8rpx;
.title-box{
margin-left: 10px;
.title{
font-weight: bold
}
}
.radio-box{
margin: 20px 0 20px 20px
}
.radio-list__radio{
font-size:32rpx;
}
}
}
.title-box{
.title{
color: #333;
margin-right:16rpx;
width:172rpx;
font-size:32rpx;
line-height:1.5;
vertical-align:middle;
text-align:left;
}
}
.button-box{
display: flex;
flex-wrap: nowrap;
flex-direction: row;
margin: 40px 0;
padding: 0 120px;
.button{
flex:1;
text-align: center;
.at-button--primary{
background-color:#FF9500;
border:1PX solid #FF9500;
}
}
}

8
src/pages/home/home.js
View File

@ -249,6 +249,7 @@ class Home extends Component {
</View>
<View className='shop-box'>
{shopCollectionElementsArray}
{this.state.shopsDetails.length !== 0 ? <View className='title'>
@ -257,11 +258,16 @@ class Home extends Component {
没有找到...
</View > }
</View>
<View className='gap'>
</View>
</View>
<View className='bottom-nav-box'>
<bottomNav otherData={this.state.otherData}/>
</View>

6
src/pages/home/home.scss
View File

@ -89,9 +89,13 @@
text-align: center;
color: #999;
font-size: 25px;
height: 180px
}
}
.gap{
height:150px;
}
.bottom-nav-box{
.bottom-nav{
height: 20px

4
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/shop/shop'
url: '/pages/home/home'
})
// Taro.request({
@ -51,7 +51,7 @@ class Index extends Component {
render () {
return (
<View className='index'>
</View>
)
}

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

@ -5,6 +5,7 @@ import URL from '../../serviceAPI.config'
import './shop.scss'
import ShopItem from '../../component/shopItemComponent/shopItemComponent'
import bottomNav from '../../component/bottomNav/bottomNav'
class Shop extends Component {
// 项目配置
@ -21,7 +22,7 @@ class Shop extends Component {
FilterText:'',
filterBar:['综合排序','销量','新品','价格','人气'],
selectedFilterValue:0,
isShowFilter:true,
isShowFilter:false,
综合排序:true,
销量:false,
新品:false,
@ -40,14 +41,32 @@ class Shop extends Component {
}
}
onChange(value) {
this.setState({
value: value
},()=>{
console.log(this.state.value)
})
}
onActionClick() {
console.log('开始搜索')
}
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)
})
}
getSearchParams({shop_name = false, shop_id = 1305, shop_class_id = "", goods_class_id=0,class_filter=0}){
Taro.request({
url: URL.GetSearchParam,
@ -154,8 +173,8 @@ class Shop extends Component {
}
}),()=>{
this.getSearchParams({ goods_class_id: value , class_filter :1})
// this.goodsSearch({ shop_id: 808 })
this.getSearchParams({ goods_class_id: value , class_filter :1})
})
}
}
@ -167,6 +186,7 @@ class Shop extends Component {
componentDidMount(){
this.goodsSearch({})
this.getSearchParams({})
this.getSearchBarkeyWords()
}
componentDidShow() { }
@ -174,8 +194,6 @@ class Shop extends Component {
componentDidHide() { }
render() {
console.log(this.state.FilterText)
const shopName= this.state.shopName
const ShopItemElementsArray =this.state.shopItem? this.state.shopItem.goods.map((item,index)=>{
return <View key={index} className='shop-item' >
@ -209,41 +227,38 @@ class Shop extends Component {
>{item.class_name}</AtTag>
}):null
// 商品类型
// const goodsTypeElementsArray = this.state.FilterText.goods_type ? Object.keys(this.state.FilterText.goods_type).map((key, index) => {
// let object = this.state.FilterText.goods_type
// return <AtTag style='margin-left:5px' key={index}
// name={JSON.stringify(object[key])}
// type='primary'
// active={this.state.isActive}
// onClick={this.selectTag.bind(this)}
// >{object[key].goods_type_ch_name}</AtTag>
// }):null
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
return <AtTag style='margin-left:5px' key={index}
name={JSON.stringify(object[key])}
type='primary'
active={this.state.isActive}
onClick={this.selectTag.bind(this)}
>{object[key].goods_type_ch_name}</AtTag>
}):null
//---------
// const goodsParamElementsArray = this.state.FilterText.goodsParam ? Object.keys(this.state.FilterText.goodsParam).map((key, index) => {
// console.log(Object.keys(this.state.FilterText.goodsParam))
// let object = this.state.FilterText.goodsParam
// return <View key={index}><View className='title' >{object[key].param_name}</View>
// <View className='button-box'>
// <AtTag style='margin-left:5px'
// name={JSON.stringify(object[key])}
// type='primary'
// active={this.state.isActive}
// onClick={this.selectTag.bind(this)}
// >{object[key].param_value[0]}</AtTag>
// </View>
// </View>
// }):null
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 <View key={index}><View className='title' >{object[key].param_name}</View>
<View className='button-box'>
<AtTag style='margin-left:5px'
name={JSON.stringify(object[key])}
type='primary'
active={this.state.isActive}
onClick={this.selectTag.bind(this)}
>{object[key].param_value[0]}</AtTag>
</View>
</View>
}):null
return (
<View className='shop'>
<View className='searchBar-box'>
<AtSearchBar className='search-button'
showActionButton
actionName='搜索'
value={this.state.value}
onChange={this.onChange.bind(this)}
onActionClick={this.onActionClick.bind(this)}
@ -257,16 +272,17 @@ class Shop extends Component {
<View className='nav'>
<View className='shop-cate'>
<Text className='text'>
店铺全部分类
店铺全部分类
</Text>
<AtIcon value='menu' size='10' color='white'></AtIcon>
</View>
<View className='home-link'>
<View className='homepage-link'>
<Text className='text'>
首页
</Text>
</View>
<View className='home-link'>
<View className='shoppage-link'>
<Text className='text'>
店铺说明
</Text>
@ -313,6 +329,20 @@ class Shop extends Component {
{ShopItemElementsArray}
</View>
<View className='copyright-box'>
<View className='title'>
Copyright &copy; 晨丰全屋定制商城 闽ICP备16007300号-2
</View>
</View>
<View className='gap'>
</View>
<View className='bottom-nav-box'>
<bottomNav otherData={{menu:[{ name: '首页' }, { name: '分类' }, { name: '购物车' }, { name: '教程软件' }, { name:'更多'}]}} />
</View>
</View>
)
}

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

@ -24,13 +24,20 @@
line-height: 55px;
.text{
color:white;
font-size: 28px
font-size: 28px;
vertical-align: middle
}
.shop-cate{
flex:1
flex:1;
margin-left: 30px;
}
.home-link{
flex:1
.homepage-link{
flex:1;
margin-left: 10%;
}
.shoppage-link{
flex:1;
}
}
@ -110,3 +117,18 @@
}
}
.copyright-box{
padding:0 20px;
.title{
text-align: center;
line-height: 100px;
font-size: 25px;
}
}
.gap{
height:150px;
}

1
src/serviceAPI.config.js
View File

@ -7,6 +7,7 @@ const URL = {
GoodsSearch: LOCALURL + 'GoodsSearch-search',// 店铺页面的信息
GetSearchParam: LOCALURL + 'GoodsSearch-getSearchParam',// sidebar筛选的字段
SearchResult: LOCALURL + 'GoodsSearch-search',// 得到搜索结果
SearchBarKeyWords: LOCALURL + 'Search-getKeywords',// 搜索栏接口
}