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

double check all pages and marked down changes on notebook

Browse Source
This commit is contained in:
郑茂强 2018-12-10 17:38:17 +08:00
parent 03f91e217e
commit da14bd8f2d
19 changed files with 328 additions and 156 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -44,7 +44,7 @@ class recommondShop extends Component {
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} />
<Image className='goods-img' onClick={this.goToShop.bind(this, this.props.shop)} mode='aspectFit' style='max-height: 100%; max-width: 100%;'src={URL.Base+item.goods_url} />
</View>
}):null
return (
@ -62,7 +62,7 @@ class recommondShop extends Component {
</View>
<View className='body'>
<View className='shop-img' onClick={this.goToShop.bind(this, this.props.shop)}>
<Image src={imgUrl}/>
<Image mode='aspectFit' style=' max-height: 100%; max-width: 100%;' src={imgUrl}/>
</View>
{goods.length !== 1 ? goodsElementsArray:<View className='details'>
<View className='details-block'><Text className='details-text'>商品:</Text> <Text>{ProductName}</Text></View>

19
src/component/filteredShopComponent/filteredShopComponent.scss
View File

@ -48,34 +48,33 @@
.body{
border-bottom:1px solid #F2F2F2;
display: flex;
flex-wrap: nowrap;
font-size: 35px;
.shop-img{
padding: 20px;
Image{
height: 200px;
margin:20px;
text-align: center;
height: 200px;
width: 200px;
}
}
.details{
font-size: 30px;
margin-left: 30px;
.details-block{
margin-top: 30px;
.details-text{
font-weight: bold;
}
}
}
.goods-img-box{
display: flex;
flex-wrap: nowrap;
flex:1;
margin-top: 20px;
.goods-img{
border: 1px solid #ddd;
width: 80px;
height: 80px;
width: 90px;
height: 90px;
margin: 10px
}
}

6
src/component/searchBarComponent/searchBarComponent.js
View File

@ -8,12 +8,14 @@ import './searchBarComponent.scss'
class searchBarComponent extends Component {
class SearchBarComponent extends Component {
config = {
navigationBarTitleText: 'searchBarComponent'
}
constructor() {
super(...arguments)
this.state = {
value: ''
@ -41,4 +43,4 @@ class searchBarComponent extends Component {
}
}
export default searchBarComponent
export default SearchBarComponent

10
src/component/searchBarComponent/searchBarComponent.scss
View File

@ -1,10 +1,8 @@
.searchBarComponent{
.search-button{
.at-search-bar__action{
background-color: #FF9900
}
.search-button{
.at-search-bar__action {
background-color:#FF9900;
}
}
}

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

@ -16,18 +16,20 @@ class ShopItem extends Component {
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
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
const goodType = this.props.item ? this.props.item.goods_type_name:null
return (
<View className='shopitem-box' onClick={this.shopOnClickHanlder.bind(this)}>
<View className='goods-type'>
{goodType}
</View>
<View className='image-box'>
<Image className='img' src={imgURL}/>
<Image mode='aspectFit' style=' max-height: 100%; max-width: 100%;' className='img' src={imgURL}/>
</View>
<View className='price-box'>
<Text class='new-price'>￥{newPrice+' '}</Text>
@ -40,15 +42,14 @@ class ShopItem extends Component {
<View className='addon-box'>
<View className='basket'>
<Image src={cartIcon} style='width:12px; height:12px;'/>
<Text className='title'>0</Text>
<Image src={cartIcon} style='width:12px; height:12px;vertical-align:middle;'/>
<Text className='amount'>0</Text>
</View>
|
<View className='browse-time'>
<Image src={eyeIcon} style='width:12px; height:12px;' />
<Text className='title' >{browseTimes}</Text>
<Image src={eyeIcon} style='width:12px; height:12px;vertical-align:middle;' />
<Text className='amount' >{browseTimes}</Text>
</View>
</View>
</View>

42
src/component/shopItemComponent/shopItemComponent.scss
View File

@ -2,18 +2,29 @@
.shopitem-box{
padding:5%;
border:1px solid #eee;
position: relative;
box-shadow: 0 10px 10px #ddd;
border-radius: 6px;
.goods-type{
position: absolute;
top:0;
right: 0;
font-size: 25px;
padding: 0 10px;
background: #999;
color: #fff;
}
.image-box{
text-align: center;
.img{
width: 80%;
height:400px;
height: 400px;
width: 100%;
}
}
.price-box{
font-weight: bold;
.new-price{
color:red;
font-size: 28px
color:#c00;
font-size: 30px
}
.old-price{
color:#999;
@ -22,26 +33,35 @@
}
}
.itemname-box{
border-bottom: 1px solid #DADADA;
margin-top: 10px;
.name{
font-size: 30px
font-size: 30px;
}
}
.addon-box{
display: flex;
font-size: 30px;
margin-top: 10px;
color: #999;
.basket{
margin:0 5px;
.title{
margin-left: 5px
.amount{
color:#c49173;
margin-left: 5px;
vertical-align:middle;
}
}
.browse-time{
margin:0 5px;
.title{
margin-left: 5px
.amount{
margin-left: 5px;
vertical-align:middle;
}
}

100
src/pages/goods/goods.js
View File

@ -1,8 +1,10 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text, Image } from '@tarojs/components'
import { AtSearchBar, AtTabs, AtTabsPane,AtSegmentedControl } from 'taro-ui'
import { AtSearchBar, AtTabs, AtTabsPane, AtSegmentedControl, AtIcon, AtToast ,Picker } from 'taro-ui'
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
import SearchBarComponent from '../../component/searchBarComponent/searchBarComponent'
import URL from '../../serviceAPI.config'
import './goods.scss'
@ -20,6 +22,9 @@ class Goods extends Component {
value:'',
current: 0,
subCurrent:0,
isOpened:false,
selector: ['0', '1', '2', '3'],
selectorChecked: '0',
}}
@ -29,12 +34,24 @@ class Goods extends Component {
current: value
})
}
subHandleClick(value) {
onClick(value) {
this.setState({
subCurrent: value
})
}
goShopPage(){
Taro.navigateTo({
url: '/pages/shop/shop'
})
}
saveItem(){
this.setState({isOpened:true})
}
onChange = e => {
this.setState({
selectorChecked: this.state.selector[e.detail.value]
})
}
componentDidMount() {
}
@ -54,16 +71,9 @@ class Goods extends Component {
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>
<SearchBarComponent></SearchBarComponent>
<View className='img-box'>
<Image className='img' src='http://192.168.1.230/Uploads/zone/user_1041/201808/thumb/e10a0bfea09a3078a800af8054bc80ce_400X400.jpg'></Image>
<Image className='img' src={URL.Base + 'Uploads/zone/user_1041/201808/thumb/e10a0bfea09a3078a800af8054bc80ce_400X400.jpg'}></Image>
</View>
<View className='title-box'>
@ -111,54 +121,67 @@ class Goods extends Component {
</View>
</View>
<View className='standard-box'>
<View className='title'>
{/* <View className='title'>
可选规格
</View>
<View className='more'>
>点击
</View> */}
<Picker mode='selector' range={this.state.selector} onChange={this.onChange}>
<View className='picker'>
<View className='title'>
可选规格:
</View>
<View className='more'>
{this.state.selectorChecked}
</View>
</View>
</Picker>
</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>
<AtTabs color='#FF9500' className='alltabs' animated={false} 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
<AtSegmentedControl selectedColor='#FF9500'
values={['全部', '好评', '中评', '差评', '公开','匿名']}
onClick={this.subHandleClick.bind(this)}
onClick={this.onClick.bind(this)}
current={this.state.subCurrent}
/>
{
this.state.current === 0
? <View className='tab-content'>标签1的内容</View>
this.state.subCurrent === 0
? <View className='tab-content'>
<Text className='title'>全部</Text>
</View>
: null
}
{
this.state.current === 1
? <View className='tab-content'>标签2的内容</View>
this.state.subCurrent === 1
? <View className='tab-content'>好评</View>
: null
}
{
this.state.current === 2
? <View className='tab-content'>标签3的内容</View>
this.state.subCurrent === 2
? <View className='tab-content'>中评</View>
: null
}
{
this.state.current === 3
? <View className='tab-content'>标签4的内容</View>
this.state.subCurrent === 3
? <View className='tab-content'>差评</View>
: null
}
{
this.state.current === 4
? <View className='tab-content'>标签5的内容</View>
this.state.subCurrent === 4
? <View className='tab-content'>公开</View>
: null
}
{
this.state.current === 5
? <View className='tab-content'>标签6的内容</View>
this.state.subCurrent === 5
? <View className='tab-content'>匿名</View>
: null
}
@ -175,11 +198,18 @@ class Goods extends Component {
<View className='shop-bottom-box' >
<View className='shop-bottom-nav'>
<View className='to-shop'>
进店
<View className='to-shop' onClick={this.goShopPage.bind(this)}>
<AtIcon className='icon' value='home' size='12' color='black'></AtIcon>
<Text className='title'>进店</Text>
</View>
<View className='collection'>
收藏商品
<View className='collection' onClick={this.saveItem.bind(this)}>
<AtIcon className='icon' value='heart' size='12' color='white'></AtIcon>
<AtToast
isOpened={this.state.isOpened}
duration={1000}
text='收藏成功'
></AtToast>
<Text className='title'>收藏商品</Text>
</View>
<View className='add-cart'>
加入购物车
@ -187,8 +217,6 @@ class Goods extends Component {
</View>
</View>
</View>
)
}

32
src/pages/goods/goods.scss
View File

@ -3,7 +3,7 @@
.img-box{
border: 1px solid #ddd;
padding: 5px 0;
padding: 20px 0;
text-align: center;
.img{
height: 700px;
@ -48,7 +48,8 @@
}
.price{
font-size: 40px;
color:red
color: #c00;
}
}
}
@ -72,6 +73,7 @@
}
.counter-box{
width: 100%;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
@ -84,7 +86,7 @@
.amount{
display: inline-block;
margin-left: 20px;
color:red;
color: #c00;
font-weight: bold
}
}
@ -93,14 +95,16 @@
}
}
.standard-box{
border: 1px solid #ddd;
.picker{
border: 1px solid #ddd;
padding: 10px 0;
color:#999;
font-size: 25px;
display: flex;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
.title{
.title{
flex:1;
font-weight: bold;
margin-left: 20px;
@ -113,6 +117,9 @@
margin-right: 20px;
}
}
}
.copyright-box{
@ -137,8 +144,8 @@
flex-wrap: nowrap;
flex-direction: row;
text-align: center;
height: 60px;
line-height: 60px;
height: 90px;
line-height: 90px;
font-size: 30px;
.to-shop{
@ -151,6 +158,13 @@
flex:1;
background-color: #FF9500;
color: white;
.icon{
vertical-align: middle
}
.title{
display: inline-block;
margin-left: 10px;
}
}
.add-cart{
@ -159,7 +173,5 @@
color: white;
}
}
}

50
src/pages/goodsPublish/goodsPublish.js
View File

@ -1,7 +1,8 @@
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 { AtInput, AtForm, AtImagePicker, AtTextarea, AtRadio, AtButton, Picker } from 'taro-ui'
import SearchBarComponent from '../../component/searchBarComponent/searchBarComponent'
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
@ -15,6 +16,8 @@ class GoodsPublish extends Component {
constructor() {
super(...arguments)
this.state = {
selector: ['需求', '供应', '人才'],
selectorChecked: '需求',
files: [{
url: 'https://jimczj.gitee.io/lazyrepay/aragaki1.jpeg',
},
@ -49,7 +52,11 @@ class GoodsPublish extends Component {
]
}
}
onChange1 = e => {
this.setState({
selectorChecked: this.state.selector[e.detail.value]
})
}
onChange(files) {
this.setState({
files
@ -75,21 +82,37 @@ class GoodsPublish extends Component {
render() {
return (
<View className='goods-publish'>
<SearchBarComponent></SearchBarComponent>
<View className='goods-category'>
<View className='page-section'>
<View className='border-box'>
<View>
<Picker mode='selector' range={this.state.selector} onChange1={this.onChange}>
<View className='picker'>
<View className='title-box'>
<Text className='title'><Text className='require'>*</Text>商品分类:</Text> <Text className='selected'>{this.state.selectorChecked}</Text>
</View>
</View>
</Picker>
</View>
</View>
<View className='input-box'>
<Text className='require'>*</Text>
<AtInput
name='value'
title='商品类型：'
title='商品名称：'
type='text'
value={this.state.value}
onChange={this.handleChange.bind(this)}
/>
</View>
<View className='input-box'>
<Text className='require'>*</Text>
<AtInput
name='value'
title='商品价格：'
@ -98,6 +121,9 @@ class GoodsPublish extends Component {
value={this.state.value}
onChange={this.handleChange.bind(this)}
/>
</View>
<View className='input-box'>
<Text className='require'>*</Text>
<AtInput
name='value'
title='商品单位：'
@ -105,8 +131,12 @@ class GoodsPublish extends Component {
value={this.state.value}
onChange={this.handleChange.bind(this)}
/>
</View>
<View className='img-box'>
<View className='title-box'>
<Text className='require'>*</Text>
<Text className='title'>上传图片:</Text>
</View>
@ -123,9 +153,11 @@ class GoodsPublish extends Component {
</View>
</View>
<View className='shoptype-box'>
<View className='title-box'>
<Text className='title'>商品分类:</Text>
<Text className='require'>*</Text>
<Text className='title'>店铺分类:</Text>
</View>
<View className='shoptype-container'>
<View className='title-box'>
@ -194,10 +226,10 @@ class GoodsPublish extends Component {
<AtButton type='primary' size='small'>发布</AtButton>
</View>
<View className='button'>
<AtButton type='primary' size='small'>发布并新增</AtButton>
<AtButton type='primary' className='button-a' size='small'>发布并新增</AtButton>
</View>
<View className='button'>
<AtButton type='primary' size='small'>商品列表</AtButton>
<AtButton type='primary' className='button-a' size='small'>商品列表</AtButton>
</View>

22
src/pages/goodsPublish/goodsPublish.scss
View File

@ -80,5 +80,27 @@
}
.button-a{
background-color:#5cb85c;
border:1PX solid #5cb85c;
}
}
}
.page-section{
border-bottom: 1Px solid #d6e4ef;
}
.selected{
display: inline-block;
margin-left: 20%;
font-size: 32rpx
}
.input-box{
border-bottom: 1Px solid #d6e4ef;
display: flex;
}
.require{
color:red;
line-height:100rpx;
}

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

@ -18,6 +18,7 @@ class Home extends Component {
shopsDetails: '',
ads: '',
categories: '',
subCate:[],
demanding: '',
otherData:''
}
@ -110,7 +111,7 @@ class Home extends Component {
{item.sd_title}
</View>
<View className='item-address'>
{item.user_address}
{item.user_address||'无地址'}
</View>
<View className='item-name'>
业主：{item.user_name}
@ -124,20 +125,20 @@ class Home extends Component {
const adsImgElementsArray = this.state.ads?this.state.ads.map((item, index) => {
return <SwiperItem key={index}>
<Image className='banner-img' src={URL.Base + item.ads_pic} />
<Image className='banner-img' src={URL.Base + item.ads_pic} />
</SwiperItem>
}):null
// 这里应该代码可以优化-----
const categoriesElementsArray1 = this.state.categories?this.state.categories[0].map((item, index) => {
return <View className='category-item' key={index} onClick={this.onClickParentCate.bind(this, item)}>
<View> <Image style='height: 42px;width: 42px;' className='cate-img' src={URL.Base + item.icon} /></View>
<Image className='cate-img' src={URL.Base + item.icon} />
<View>{item.class_name}</View>
</View>
}):null
const categoriesElementsArray2 = this.state.categories?this.state.categories[1].map((item, index) => {
return <View className='category-item' key={index} onClick={this.onClickParentCate.bind(this, item)}>
<View> <Image style='height: 42px;width: 42px;' className='cate-img' src={URL.Base + item.icon} /></View>
<View> <Image className='cate-img' src={URL.Base + item.icon} /></View>
<View>{item.class_name}</View>
</View>
}):null
@ -145,22 +146,22 @@ class Home extends Component {
return <filteredShopComponent shop={item} key={index}></filteredShopComponent>
}):null
const subCateElementsArray = this.state.subCate?this.state.subCate.map((item, index) => {
const subCateElementsArray = this.state.subCate.length?this.state.subCate.map((item, index) => {
return <SwiperItem key={index} onClick={this.onClickChildCate.bind(this, item)}>
<View className='text'>{item.class_name}</View>
</SwiperItem>
}):null
console.log(this.state.subCate)
return (
<View className='home'>
{/* 第一行图片滚动条 */}
<View className='first-banner'>
<Swiper
className='swipper'
style='height:120px;'
indicatorColor='#999'
indicatorActiveColor='#333'
hotizontal
@ -180,7 +181,8 @@ class Home extends Component {
hotizontal
circular
indicatorDots
autoplay>
// autoplay
>
<SwiperItem>
<View className='categories'>
{categoriesElementsArray1}
@ -196,6 +198,7 @@ class Home extends Component {
{/* 第三行图片滚动条 */}
<View className='third-banner'>
<Swiper
style='height:100px;'
className='swipper'
indicatorColor='#999'
indicatorActiveColor='#333'
@ -204,7 +207,10 @@ class Home extends Component {
indicatorDots
autoplay>
<SwiperItem>
<Image className='banner-img' src='http://192.168.1.230/Public/images/xgt.png' />
<Image className='banner-img' src={URL.Base +'Public/images/xgt.png'} />
</SwiperItem>
<SwiperItem>
<Image className='banner-img' src={URL.Base +'Public/images/xgt.png'} />
</SwiperItem>
</Swiper>
@ -233,19 +239,18 @@ class Home extends Component {
{demandingElemensArray}
</Swiper>
</View>
<View className='sub-cate'>
</View>
<View className='second-banner-level2'>
<Swiper
<View className='second-banner-level2'>
{this.state.subCate.length ? <Swiper
style='height:35px;'
className='swipper swiper-sub'
indicatorColor='#999'
indicatorActiveColor='#333'
horizontal
displayMultipleItems='4.5'
displayMultipleItems={this.state.subCate.length > 4.5 ? 4.5 : this.state.subCate.length}
>
{subCateElementsArray}
</Swiper>
</Swiper>:null}
</View>
<View className='title'>
<Text className='title-block'></Text>

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

@ -1,8 +1,13 @@
.home{
overflow: hidden;
.banner-img{
width: 100%
.first-banner ,.third-banner{
.banner-img{
height: 100%;
width: 100%;
}
}
}
@ -110,27 +115,32 @@
flex-wrap: wrap;
flex-direction: row;
text-align: center;
font-size:30px;
font-size:28px;
margin-top: 10px;
.category-item{
width: 20%;
margin-top: 20px;
height: 50%;
margin-top: 10px;
Image{
height: 75px;
width: 75px;
}
}
}
}
.second-banner-level2{
.swipper{
height: 80px;
text-align: center;
font-size: 30px;
border-bottom:1px solid #F2F2F2;
.text{
margin-top: 20px
}
}
}
.swipper{
margin-bottom: 20px;
}
.swiper-sub{
margin-bottom: 0px;
}

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

@ -21,7 +21,6 @@ import './index.scss'
}
}))
class Index extends Component {
config = {
navigationBarTitleText: '首页'
}
@ -29,7 +28,9 @@ class Index extends Component {
//http://ihome6.com/Shop-supplyShops
componentDidMount(){
Taro.navigateTo({
url: '/pages/home/home'
// url: '/pages/home/home'
// url: '/pages/goodsPublish/goodsPublish'
url: '/pages/goods/goods'
})
}
componentWillReceiveProps (nextProps) {

4
src/pages/mySupplyDemand/mySupplyDemand.js
View File

@ -125,7 +125,7 @@ class MySupplyDemand extends Component {
搜索</AtButton>
</View>
<View className='button'>
<AtButton type='primary' size='small'>
<AtButton type='primary' className='button-a' size='small'>
<AtIcon value='add' size='12' color='white'></AtIcon>
新增</AtButton>
</View>
@ -166,7 +166,7 @@ class MySupplyDemand extends Component {
<AtButton type='primary' size='small'>编辑</AtButton>
</View>
<View className='button'>
<AtButton type='primary' size='small'>删除</AtButton>
<AtButton type='primary' className='button-a' size='small'>删除</AtButton>
</View>
</View>

13
src/pages/mySupplyDemand/mySupplyDemand.scss
View File

@ -73,8 +73,11 @@
.at-button--primary{
background-color:#FF9500;
border:1PX solid #FF9500;
}
.button-a{
background-color:#5cb85c;
border:1PX solid #5cb85c;
}
}
}
@ -88,6 +91,9 @@
View{
margin:10px
}
.demand-title{
.info{color:#337ab7; }
}
.info-button-box{
display: flex;
flex-wrap: nowrap;
@ -103,6 +109,11 @@
background-color:#FF9500;
border:1PX solid #FF9500;
}
.button-a{
background-color:#d9534f;
border:1PX solid #d9534f;
}
}
}

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

@ -23,7 +23,7 @@ class Shop extends Component {
FilterText:'',
filterBar:['综合排序','销量','新品','价格','人气'],
selectedFilterValue:0,
isShowFilter:true,
isShowFilter:false,
综合排序:true,
销量:false,
新品:false,
@ -266,8 +266,8 @@ class Shop extends Component {
/>
</View>
<View className='banner-box'>
<Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} style='height:120px' />
<View className='shop-name'>{shopName}</View>
<Image src={URL.Base + 'Public/visual_editing/img/ksh_bg.jpg'} mode='aspectFill' style='height:120px' />
{/* <View className='shop-name'>{shopName}</View> */}
</View>
<View className='nav-box'>
<View className='nav'>

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

@ -15,7 +15,6 @@
font-size: 50px
}
}
.nav-box{
background-color: black;
@ -115,7 +114,7 @@
.shop-item{
box-sizing:border-box;
width: 50%;
padding:5px;
padding:10px;
}

70
src/pages/supplyDemandPubish/supplyDemandPubish.js
View File

@ -2,6 +2,8 @@
import Taro, { Component } from '@tarojs/taro'
import { View, Button, Text } from '@tarojs/components'
import { AtInput, AtForm, AtImagePicker, AtTextarea, AtRadio, AtButton, Picker} from 'taro-ui'
import SearchBarComponent from '../../component/searchBarComponent/searchBarComponent'
import copyrightComponent from '../../component/copyrightComponent/copyrightComponent'
@ -21,20 +23,52 @@ class SupplyDemand extends Component {
selectorChecked: '需求',
selector1: ['上架', '下架'],
selectorChecked1: '上架',
addImg:true,
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',
}]
}
}
onChange = e => {
this.setState({
selectorChecked: this.state.selector[e.detail.value]
})
}
// onChange = e => {
// this.setState({
// selectorChecked: this.state.selector[e.detail.value]
// })
// }
onChange1 = e => {
this.setState({
selectorChecked1: this.state.selector1[e.detail.value]
})
}
onChange(files, operationType,index) {
console.log(files, operationType,index)
if (operationType==='add'){
this.setState({
files
}, () => {
if (this.state.files.length === 4) {
this.setState({ addImg: false })
}
})
}
if (operationType === 'remove'){
this.state.files.splice(index, 1);
this.setState({ files: this.state.files });
}
}
onFail(mes) {
console.log(mes)
}
onImageClick(index, file) {
console.log(index, file)
}
componentWillReceiveProps(nextProps) {
console.log(this.props, nextProps)
}
@ -48,6 +82,7 @@ class SupplyDemand extends Component {
render() {
return (
<View className='supply-demand'>
<SearchBarComponent></SearchBarComponent>
<View className='page-section'>
<View>
@ -92,16 +127,13 @@ class SupplyDemand extends Component {
onChange={this.handleChange.bind(this)}
/>
</View>
<View className='address-box'>
<View className='title-box'>
<Text className='title'>联系地址:</Text>
</View>
<View className='demanding-box'>
<AtTextarea
value={this.state.value}
onChange={this.handleChange.bind(this)}
maxlength='200'
placeholder='你的产品简介'
placeholder='联系地址'
/>
</View>
@ -114,7 +146,7 @@ class SupplyDemand extends Component {
value={this.state.value}
onChange={this.handleChange.bind(this)}
maxlength='200'
placeholder='你的产品简介'
placeholder=''
/>
</View>
@ -125,13 +157,12 @@ class SupplyDemand extends Component {
</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)}
showAddBtn={this.state.addImg}
files={this.state.files}
onChange={this.onChange.bind(this)}
onFail={this.onFail.bind(this)}
onImageClick={this.onImageClick.bind(this)}
/>
</View>
@ -156,10 +187,11 @@ class SupplyDemand extends Component {
<AtButton type='primary' size='small'>发布</AtButton>
</View>
<View className='button'>
<AtButton type='primary' size='small'>发布并新增</AtButton>
<AtButton type='primary' className='button-a' size='small'>发布并新增</AtButton>
</View>
<View className='button'>
<AtButton type='primary' size='small'>商品列表</AtButton>
<AtButton type='primary' className='button-a' size='small'>商品列表</AtButton>
</View>

10
src/pages/supplyDemandPubish/supplyDemandPubish.scss
View File

@ -30,8 +30,10 @@
.at-button--primary{
background-color:#FF9500;
border:1PX solid #FF9500;
}
.button-a{
background-color:#5cb85c;
border:1PX solid #5cb85c;
}
}
}
@ -57,9 +59,7 @@
}
.page-section{
border-bottom: 1Px solid #d6e4ef;
.picker{
padding: 24rpx 0
}
}
.selected{
display: inline-block;