From 1b48b7b55af16f9d62ec618cc65f9748b9296358 Mon Sep 17 00:00:00 2001 From: Maoqiang Zheng Date: Thu, 6 Dec 2018 17:24:34 +0800 Subject: [PATCH] add goods page and goodpublish page --- src/app.js | 4 + src/component/bottomNav/bottomNav.js | 23 +- .../filteredShopComponent.js | 4 +- .../shopItemComponent/shopItemComponent.js | 8 +- src/pages/goods/goods.js | 203 +++++++++++++++++ src/pages/goods/goods.scss | 165 ++++++++++++++ src/pages/goodsPublish/goodsPublish.js | 212 ++++++++++++++++++ src/pages/goodsPublish/goodsPublish.scss | 78 +++++++ src/pages/home/home.js | 8 +- src/pages/home/home.scss | 6 +- src/pages/index/index.js | 4 +- src/pages/shop/shop.js | 108 +++++---- src/pages/shop/shop.scss | 30 ++- src/serviceAPI.config.js | 1 + 14 files changed, 800 insertions(+), 54 deletions(-) create mode 100644 src/pages/goods/goods.js create mode 100644 src/pages/goods/goods.scss create mode 100644 src/pages/goodsPublish/goodsPublish.js create mode 100644 src/pages/goodsPublish/goodsPublish.scss diff --git a/src/app.js b/src/app.js index 62dc2b9..7178312 100644 --- a/src/app.js +++ b/src/app.js @@ -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', diff --git a/src/component/bottomNav/bottomNav.js b/src/component/bottomNav/bottomNav.js index fc7daed..9b5f071 100644 --- a/src/component/bottomNav/bottomNav.js +++ b/src/component/bottomNav/bottomNav.js @@ -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 ( { + const slicedGoods = goods !==null?goods.slice(1):null + const goodsElementsArray = goods !== null ? slicedGoods.map((item,index)=>{ return diff --git a/src/component/shopItemComponent/shopItemComponent.js b/src/component/shopItemComponent/shopItemComponent.js index fa1d5dd..c66f92e 100644 --- a/src/component/shopItemComponent/shopItemComponent.js +++ b/src/component/shopItemComponent/shopItemComponent.js @@ -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 ( - + diff --git a/src/pages/goods/goods.js b/src/pages/goods/goods.js new file mode 100644 index 0000000..f7996a8 --- /dev/null +++ b/src/pages/goods/goods.js @@ -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 ( + + + + + + + + + + + 11 + + + 11 + + + + + 原价 + ￥11 + + + 促销价 + ￥11 + + + + + 商品类型 + 设计师商品 + + + + 服务区域 + 中国/福建省(全省) + + + + + 月销量 + 0 + + + 总销量 + 0 + + + 浏览量 + 13 + + + + + + 可选规格 + + + >点击 + + + + + + 标签页一的内容 + + + + { /*子标签Tab*/} + + { + this.state.current === 0 + ? 标签1的内容 + : null + } + { + this.state.current === 1 + ? 标签2的内容 + : null + } + { + this.state.current === 2 + ? 标签3的内容 + : null + } + { + this.state.current === 3 + ? 标签4的内容 + : null + } + { + this.state.current === 4 + ? 标签5的内容 + : null + } + { + this.state.current === 5 + ? 标签6的内容 + : null + } + + + + + 标签页三的内容 + + + + + + + + Copyright © 晨丰全屋定制商城 闽ICP备16007300号-2 + + + + + + + + + + 进店 + + + 收藏商品 + + + 加入购物车 + + + + + + + + ) + } +} + +export default Goods diff --git a/src/pages/goods/goods.scss b/src/pages/goods/goods.scss new file mode 100644 index 0000000..4e321a0 --- /dev/null +++ b/src/pages/goods/goods.scss @@ -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; + } +} + +} + + diff --git a/src/pages/goodsPublish/goodsPublish.js b/src/pages/goodsPublish/goodsPublish.js new file mode 100644 index 0000000..cbf75bb --- /dev/null +++ b/src/pages/goodsPublish/goodsPublish.js @@ -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 ( + + + + + + + + + + + + + + + 上传图片: + + + + + + + + + + + + 商品分类: + + + + 国家: + + + + {this.state.list.map((item, i) => { + return ( + + ) + })} + + + + 国家: + + + + {this.state.list.map((item, i) => { + return ( + + ) + })} + + + + 国家: + + + + {this.state.list.map((item, i) => { + return ( + + ) + })} + + + + + + + + + + 商品简介: + + + + + + + + + 发布 + + + 发布并新增 + + + 商品列表 + + + + + + + + + ) + } +} + +export default GoodsPublish diff --git a/src/pages/goodsPublish/goodsPublish.scss b/src/pages/goodsPublish/goodsPublish.scss new file mode 100644 index 0000000..aa5d7e3 --- /dev/null +++ b/src/pages/goodsPublish/goodsPublish.scss @@ -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; + + + } + } +} \ No newline at end of file diff --git a/src/pages/home/home.js b/src/pages/home/home.js index d5a154f..5dbf187 100644 --- a/src/pages/home/home.js +++ b/src/pages/home/home.js @@ -249,6 +249,7 @@ class Home extends Component { + {shopCollectionElementsArray} {this.state.shopsDetails.length !== 0 ? @@ -257,11 +258,16 @@ class Home extends Component { 没有找到... } + + + + + + - diff --git a/src/pages/home/home.scss b/src/pages/home/home.scss index 8559302..d0b62be 100644 --- a/src/pages/home/home.scss +++ b/src/pages/home/home.scss @@ -89,9 +89,13 @@ text-align: center; color: #999; font-size: 25px; - height: 180px + } } + .gap{ + + height:150px; + } .bottom-nav-box{ .bottom-nav{ height: 20px diff --git a/src/pages/index/index.js b/src/pages/index/index.js index 0427a41..a951bd3 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/shop/shop' + url: '/pages/home/home' }) // Taro.request({ @@ -51,7 +51,7 @@ class Index extends Component { render () { return ( - + ) } diff --git a/src/pages/shop/shop.js b/src/pages/shop/shop.js index fe7a36d..d3f4ee7 100644 --- a/src/pages/shop/shop.js +++ b/src/pages/shop/shop.js @@ -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 @@ -209,41 +227,38 @@ class Shop extends Component { >{item.class_name} }):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 {object[key].goods_type_ch_name} - // }):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 {object[key].goods_type_ch_name} + }):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 {object[key].param_name} - // - // {object[key].param_value[0]} - // - // - // }):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 {object[key].param_name} + + {object[key].param_value[0]} + + + }):null return ( - 店铺全部分类 + 店铺全部分类 + - + 首页 - + 店铺说明 @@ -313,6 +329,20 @@ class Shop extends Component { {ShopItemElementsArray} + + + Copyright © 晨丰全屋定制商城 闽ICP备16007300号-2 + + + + + + + + + + + ) } diff --git a/src/pages/shop/shop.scss b/src/pages/shop/shop.scss index 5b88075..238b7fc 100644 --- a/src/pages/shop/shop.scss +++ b/src/pages/shop/shop.scss @@ -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; + } diff --git a/src/serviceAPI.config.js b/src/serviceAPI.config.js index 9c5a00e..8d17e97 100644 --- a/src/serviceAPI.config.js +++ b/src/serviceAPI.config.js @@ -7,6 +7,7 @@ const URL = { GoodsSearch: LOCALURL + 'GoodsSearch-search',// 店铺页面的信息 GetSearchParam: LOCALURL + 'GoodsSearch-getSearchParam',// sidebar筛选的字段 SearchResult: LOCALURL + 'GoodsSearch-search',// 得到搜索结果 + SearchBarKeyWords: LOCALURL + 'Search-getKeywords',// 搜索栏接口 }