From c8ce8d602f505cbabbc0c3fc17540c6452fd5ff7 Mon Sep 17 00:00:00 2001 From: Maoqiang Zheng Date: Fri, 30 Nov 2018 17:30:16 +0800 Subject: [PATCH] home page intiially done --- package.json | 5 +- .../filteredShopComponent.js | 80 ++++++ .../filteredShopComponent.scss | 97 +++++++ src/component/recommendShop/recommendShop.js | 65 ----- .../recommendShop/recommondShop.scss | 53 ---- src/icons/horn.png | Bin 0 -> 7239 bytes src/icons/house.png | Bin 0 -> 3630 bytes src/pages/home/home.js | 248 ++++++++++-------- src/pages/home/home.scss | 124 +++++++-- 9 files changed, 423 insertions(+), 249 deletions(-) create mode 100644 src/component/filteredShopComponent/filteredShopComponent.js create mode 100644 src/component/filteredShopComponent/filteredShopComponent.scss delete mode 100644 src/component/recommendShop/recommendShop.js delete mode 100644 src/component/recommendShop/recommondShop.scss create mode 100644 src/icons/horn.png create mode 100644 src/icons/house.png diff --git a/package.json b/package.json index d02e40a..4955c11 100644 --- a/package.json +++ b/package.json @@ -28,11 +28,12 @@ "@tarojs/taro-h5": "^1.2.0-beta.3", "@tarojs/taro-swan": "^1.2.0-beta.3", "@tarojs/taro-weapp": "^1.2.0-beta.3", - "nervjs": "^1.3.9", "nerv-devtools": "^1.3.9", + "nervjs": "^1.3.9", "redux": "^4.0.0", "redux-logger": "^3.0.6", - "redux-thunk": "^2.3.0" + "redux-thunk": "^2.3.0", + "taro-ui": "^1.5.0" }, "devDependencies": { "@types/react": "^16.4.8", diff --git a/src/component/filteredShopComponent/filteredShopComponent.js b/src/component/filteredShopComponent/filteredShopComponent.js new file mode 100644 index 0000000..691465e --- /dev/null +++ b/src/component/filteredShopComponent/filteredShopComponent.js @@ -0,0 +1,80 @@ +import Taro, { Component } from '@tarojs/taro' +import { View, Button, Text,Image } from '@tarojs/components' +import { AtIcon } from 'taro-ui' + +import './filteredShopComponent.scss' +const hornIcon = require('../../icons/horn.png') +const houseIcon = require('../../icons/house.png') + + + +class recommondShop extends Component { + + config = { + navigationBarTitleText: 'recommondShop' + } + + componentWillReceiveProps(nextProps) { + //console.log(this.props, nextProps) + } + + componentWillUnmount() { } + + componentDidShow() { } + + componentDidHide() { } + + render() { + + const title = this.props.shop.shop_name + const imgUrl = 'http://192.168.1.230/' + 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 consultText = this.props.shop.wx_open + const voucherLeft = this.props.shop.left_nums + const goodsElementsArray=goods.slice(1).map((item,index)=>{ + return + + + }) + return ( + + + + + {title} + + + + + + + + + + + + {goods.length !== 1 ? goodsElementsArray: + 商品: {ProductName} + 价格: {price} + } + + + + + + {address} + {distance} + + + + ) + } +} + +export default recommondShop diff --git a/src/component/filteredShopComponent/filteredShopComponent.scss b/src/component/filteredShopComponent/filteredShopComponent.scss new file mode 100644 index 0000000..726b63e --- /dev/null +++ b/src/component/filteredShopComponent/filteredShopComponent.scss @@ -0,0 +1,97 @@ +.shop-list-box{ + border: 1px solid #ddd; + border-radius: 3px; + box-shadow: 0 5px 5px #ddd; + margin-bottom: 10px; + + .header{ + border-bottom:1px solid #F2F2F2; + display: flex; + .title{ + width: 50%; + color: #333; + font-weight: bold; + font-size: 30px; + margin:20px; + + } + .consult-voucher-button{ + width: 50%; + //margin-top: 20px ; + margin-left: 200px; + display: flex; + //vertical-align: middle; + .consult-button-text{ + color:white; + font-size: 28px; + background:#337ab7; + width: 100px; + line-height:50px; + height:50px; + margin-top:15px; + } + .voucher-button-text{ + color:white; + font-size: 28px; + background:gray; + width: 100px; + line-height:50px; + height:50px; + margin-top:15px; + + } + .voucher{ + background:#337ab7; + } + } + } + .body{ + border-bottom:1px solid #F2F2F2; + display: flex; + font-size: 35px; + .shop-img{ + padding: 20px; + Image{ + 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; + margin-top: 20px; + .goods-img{ + border: 1px solid #ddd; + width: 80px; + height: 80px; + margin: 10px + } + } + } + .footer{ + display: flex; + font-size: 25px; + padding: 20px; + .distance{ + width: 30%; + text-align: right; + + } + .address{ + width:70%; + + } + } +} diff --git a/src/component/recommendShop/recommendShop.js b/src/component/recommendShop/recommendShop.js deleted file mode 100644 index 7b15255..0000000 --- a/src/component/recommendShop/recommendShop.js +++ /dev/null @@ -1,65 +0,0 @@ -import Taro, { Component } from '@tarojs/taro' -import { View, Button, Text,Image } from '@tarojs/components' - - -import './recommondShop.scss' - - - -class recommondShop extends Component { - - config = { - navigationBarTitleText: 'recommondShop' - } - - componentWillReceiveProps(nextProps) { - console.log(this.props, nextProps) - } - - componentWillUnmount() { } - - componentDidShow() { } - - componentDidHide() { } - - render() { - - const title = this.props.shop.shop_name - const imgUrl = 'http://192.168.1.230/' + this.props.shop.shop_logo - const price = this.props.shop.goods[0].goods_price - const ProductName = this.props.shop.goods_name - const address = this.props.shop.shop_address - const distance = this.props.shop.distance - return ( - - - - {title} - - - - - - - - - - - 商品:{ProductName} - 价格:{price} - - - - - {address} - {distance} - - - - ) - } -} - -export default recommondShop diff --git a/src/component/recommendShop/recommondShop.scss b/src/component/recommendShop/recommondShop.scss deleted file mode 100644 index e551a2a..0000000 --- a/src/component/recommendShop/recommondShop.scss +++ /dev/null @@ -1,53 +0,0 @@ -.shop-list-box{ - border: 1px solid #ddd; - border-radius: 3px; - box-shadow: 0 5px 5px #ddd; - margin-bottom: 10px; - .header{ - border-bottom:gray solid 1px; - display: flex; - .title{ - width: 50%; - color: #333; - font-weight: bold; - - } - .ask-button{ - width: 50%; - button{ - background-color: #337ab7; - height: 36px; - width:24px; - color:white - } - } - } - .body{ - border-bottom:gray solid 1px; - display: flex; - font-size: 35px; - .shop-img{ - padding: 20px; - Image{ - height: 200px; - width: 200px; - } - } - .details{ - View{ - margin-top: 20px; - } - } - } - .footer{ - display: flex; - .distance{ - width: 50%; - font-size: 30px - } - .address{ - width:50%; - font-size: 30px - } - } -} \ No newline at end of file diff --git a/src/icons/horn.png b/src/icons/horn.png new file mode 100644 index 0000000000000000000000000000000000000000..4daa67766af4f1044f410e58498e2f51ea0584c7 GIT binary patch literal 7239 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 GJoq00N2M76 literal 0 HcmV?d00001 diff --git a/src/icons/house.png b/src/icons/house.png new file mode 100644 index 0000000000000000000000000000000000000000..982ce50b9bfe15b30fc2ea938acf8ef52f3c1c90 GIT binary patch literal 3630 zcmeHK`8yO`8)h0~c@1MJuc?^CRJ15#Da$mNF=H!?ZO9fzwkcUcmW*l&SwqH_t?Y#% z%T$E;iqX_C2yZdAvNX2LMBnrue7}Cz_5Sdjb6wB5&;2~leLd$o=iIw!Z3dQrN(c!F zfpJ({b^Zk@%o>+?e1Ou|mJTe0^#(l1E$N8_n$w#zg5v@IO~~Aw3~%&r(`ULD03+ zOXV!>27>fm8}?Pl$8Tb`JzaMiW^ZwxSZs;doQ-Q%$;^?)ZD-I^(9vB_uimIGMoBEk z)GA&o8;d5GGR{4hkN#K_>eFtsZPlqJMKb`~;`v8v@cKkvuuQuZ+ImbhiFj|GzBKZ7 zIZb?Nul=ItHzrIZG;XxHQmyn-3-G!*sOEzK=$(>Bi%^MgX}hC<4?mZ z+orkk%W)e+B`AZV6?&H=uk-AD7MAc2uiFL6X>GeZnpbZkdUrE?-H!%*%lvRcB^+6z zB)4rA-Ow`uJvCu9<(Qt)+??HK77`J#G>AmQ^$ruU=~(y>1gh8-5B$geK1=uzF6Q@f<; z|-u&k|aJS~6c=?OOjW+VaqN-V3u@juGGj3Nq+arK=qtk_1vL zYgfBmORFWZnsgi23Oww3uS<;kavL6E9B3njqnMHNz@Z1=Ec5)20{@~Gs{qu=nn2xx7#0Kk?A6Z z`$egk_JX3ydG+EzOL+SOJb%is^YX3(GmHfa2l8BIffhio;vcq}-F?(gHwa%=qQ zUZ_0;D@1e>4}x|2Gpj=2PUo;^wIbh{bHf<0ePCJd>bYb7U6@6S(z~WU6R_-}=mEG3 zfv>I`1$^$8_PL#-anbcz|JFG!a^Q#{&zY%Xy0=TnR>2B@bA5*ej`%!QPV%GS7R>&E znL5Ej%q25n>NG67>hmbUWmL5)yBP>oJ#l)Kr^gN*#>&6inKpj5Zk)+qqG~;S_YowB z5lL>Gg6_nt84?o%kPBXW~at~za zQCLpD*f%Yvw)qDg>Q++Wma2m*bDLu>P*t262*J*pVHy)M)hG`mLgPV?=A;yVde~v5 zu(lR=V8h=voH>1sk%ofbhj&fA5etQ_!yjNPCD##b zRYvtZ(NJhDc~>l#tt_3xVIthSx$mcjU~e}Va)EIzA`!|LU>1<-U8nU}eJ|w7mW?Jj zq(+YB8#*2M4Cj;BLW~Dm`udWcQp|r%+ch8?k?LmBPy4|AIvo+Lq5a-$vXwI_zhu)# z+^a_>F=KS|I4NDxpRCEoe+rtc59YxfhRr%n0w5qNkB&>4C=v+4u~}VJ^uC)iyk#bR zA6v@aXE$;0d?T$a#4c~7xFS;C01vuHw&H}WII44TPi9whg~W3ErrIW$In0|f8Vhpo z9-kH?TM2*eKbxH+2;6tM2Wl=B~`1eZjmQaYGQ^>vnQq`I)y9;Hlq1yO35Zli_0 zQMR|?h@^tB*7lPu%t`Atbj_Ie96+X(Zs3XhiJkD&Z19SrbAr6UT12PP~BnSQvi4ajb0XFk_Q{UITkD^ z@`}-?U(vu@$5Az{iy^1`B3()tIp*|(>QOoXfHv0SB;XpPdPJi(Hs}&3Vkcvf0rMq{ zLt`8*m%X1=PB~nCbwp5>ntB9n#343Kj}n#vII~|M1S6bVb3nXI%Il!J1zgaYS(o)A zLzRHGqR-DDXKS_f1Mo94AS!qMFynnneE%W2)|V4cgDpzaZzKq?AdQhb=CB}$Mmp;6 zKndDJjmBTM5U83+ur0|t&bf(?&(0Ae9xIH-3Yok<=f$Zeq&#=`mpdrsh2^Li?1?rSArg)c!olHuJuMKck!i)Y^pwM0xd~qM{A3Ul?PSTcy(M@7Y zD+a1J*nc{i9N(WznVj^;E9rgN`hy&nl@P`L^AnbRhAr=L*U9z^a8k-^;k&MaIsN%d zjWf}%Xe4{|L~-i2q;NOchijR2bLV9H(qCKD{#ZO> zF!)69cHkxti4DOXhb3+R(eWVhs)NVj2mk`>chJ)iB~y$_@E1)IPZ9cagF0Qf2=q%U z9_#cnK75{>I4m0X<_}tZIHAgi7BB z1>PC6p@6O>p53xRh)L2)A>glKnV?&piQ*q%nxFCo_P`iHIc#YS`P(uV0tT22hyzTP wj+&D7x@Lg?!u}QH-wyd7&%%sv+V4HWC%&wbj#|eF{((X`w6$rSu}8vx0k|zpQvd(} literal 0 HcmV?d00001 diff --git a/src/pages/home/home.js b/src/pages/home/home.js index c70d3f2..f181b4b 100644 --- a/src/pages/home/home.js +++ b/src/pages/home/home.js @@ -1,71 +1,56 @@ import Taro, { Component } from '@tarojs/taro' import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components' -import { connect } from '@tarojs/redux' -import recommondShop from '../../component/recommendShop/recommendShop' +import { AtButton } from 'taro-ui' +import filteredShopComponent from '../../component/filteredShopComponent/filteredShopComponent' import { add, minus, asyncAdd } from '../../actions/counter' import './home.scss' - -@connect(({ counter }) => ({ - counter -}), (dispatch) => ({ - add () { - dispatch(add()) - }, - dec () { - dispatch(minus()) - }, - asyncAdd () { - dispatch(asyncAdd()) - } -})) class Home extends Component { - config = { + config = { navigationBarTitleText: '首页' } - constructor(){ - this.state={ - shops:'', - ads:'', - categories:'', - demanding:'' + constructor() { + this.state = { + shopsDetails: '', + ads: '', + categories: '', + demanding: '', } } -//http://ihome6.com/Shop-supplyShops - componentDidMount(){ - this.getShopInfo() - this.getHomePageInfo() + componentDidMount() { + this.getShops() + this.getHomeCategoriesInfo() } - componentWillReceiveProps (nextProps) { + componentWillReceiveProps(nextProps) { //console.log(this.props, nextProps) } - componentWillUnmount () { } + componentWillUnmount() { } - componentDidShow () { } + componentDidShow() { } - componentDidHide () { } + componentDidHide() { } - getHomePageInfo(){ + getHomeCategoriesInfo() { Taro.request({ url: 'http://192.168.1.230/Shop-wxStore', }) - .then(res =>{ - // console.log(res.data) + .then(res => { + console.log(res) this.setState({ ads: res.data.data.adsLb, categories: res.data.data.supplyClass, - categories: res.data.data.supplyClass, demanding: res.data.data.demand.supplys, }, () => { - console.log(this.state.demanding) - })}) + //console.log(this.state.demanding) + }) + }) } - getShopInfo(){ + getShops(parent_supply_class = 0, supply_class = '-1', supply_level = 1) { Taro.request({ url: 'http://192.168.1.230/Shop-supplyShops', method: 'POST', @@ -74,9 +59,9 @@ class Home extends Component { param: JSON.stringify({ curr_page: 1, page_count: 20, - parent_supply_class: 1, - supply_class: 1, - supply_level: 1, + parent_supply_class: parent_supply_class, //父级class id + supply_class: supply_class,// 子级class id + supply_level: supply_level,// 层级 action: "2" }) }, @@ -85,64 +70,77 @@ class Home extends Component { } }) .then(res => { - this.setState({ shops: res.data.shops }) + this.setState({ shopsDetails: res.data.shops }, () => { + // console.log('-----',res) + }) } ) } + onClickParentCate(item) { + this.setState({ subCate: item.children }) + this.getShops(item.parent_class_id, item.class_id) + } + onClickChildCate(item) { + this.getShops(item.parent_class_id, item.class_id, 2) + } - render () { - - - const demandingElemensArray = this.state.demanding.map((item,index)=>{ - return - - - {item.class_name} - - - 软件园D区 - - - 业主：{item.user_name} - - - - + render() { + const demandingElemensArray = this.state.demanding.map((item, index) => { + return < SwiperItem key={index} > + + + {item.class_name} - - - + + {item.sd_title} + + + {item.user_address} + + + 业主：{item.user_name} + + + + + + }) - const shopCollectionElementsArray=this.state.shops.map((item,index)=>{ - return - }) - - const adsImgElementsArray=this.state.ads.map((item,index)=>{ - return - + const adsImgElementsArray = this.state.ads.map((item, index) => { + return + }) - const categoriesElementsArray1=this.state.categories[0].map((item,index)=>{ - return + + // 这里应该代码可以优化----- + const categoriesElementsArray1 = this.state.categories[0].map((item, index) => { + return {item.class_name} }) - const categoriesElementsArray2=this.state.categories[1].map((item,index)=>{ - return + const categoriesElementsArray2 = this.state.categories[1].map((item, index) => { + return {item.class_name} }) + const shopCollectionElementsArray = this.state.shopsDetails.map((item, index) => { + return + }) - - + const subCateElementsArray = this.state.subCate.map((item, index) => { + return + {item.class_name} + + }) return ( - + {/* 第一行图片滚动条 */} + - + {/* 第二行图片滚动条 */} + - - - - - 业主需求 - - - 更多>> - - - - - {demandingElemensArray} - + {/* 第三行图片滚动条 */} + + + + + - - - - - - 行业推荐 - - + + + + + {subCateElementsArray} + + + {/* 业主需求和行业推荐 */} + + + + + 业主需求 + + + 更多>> + + + + + {demandingElemensArray} + + + + + + + + 行业推荐 + + + {shopCollectionElementsArray} - + ) diff --git a/src/pages/home/home.scss b/src/pages/home/home.scss index 40e679f..d8a3986 100644 --- a/src/pages/home/home.scss +++ b/src/pages/home/home.scss @@ -1,24 +1,93 @@ -.container{ - margin-top: 100px; - .title{ - display: flex; - flex-wrap: nowrap; - flex-direction: row; - .text{ - width: 50% ; - flex:1; - } - .more-link{ - width: 50% ; - flex:1; - text-align: right - } - } - .demand{ - font-size: 30px; +.home{ + .banner-img{ + width: 100% } } -.main-cate{ + + +.container{ + //margin-top: 30px; + .title{ + + padding:20px 20px; + + .title-block{ + background-color: #3C98FF; + width: 20px; + font-size: 50px; + display: inline-block; + height: 50px; + margin-right: 20px; + vertical-align: middle; + } + .title-text{ + + font-size: 50px; + vertical-align: middle; + } + .more-link{ + // float: right; + margin-left: 50%; + font-size: 30px; + color: #ccc; + vertical-align: middle; + } + } + .customer-demanding{ + padding:0 20px; + .demanding-item{ + border: #eee solid 1px; + text-align: center; + .item-tag{ + color:white; + font-size: 30px; + text-align: right; + .item-tag-text{ + padding:5px; + background-color: #FF7142; + } + } + .item-title{ + font-size: 50px; + min-height: 21px; + clear: both; + color: #FF7142; + overflow: hidden; + text-overflow: ellipsis; + white-space: nowrap; + } + .item-address{ + padding-top: 5px; + font-size: 35px; + // margin-top: 20px; + } + .item-name{ + color: #ccc; + padding-top: 5px; + font-size: 35px; + // margin-top: 10px; + } + .item-button-box{ + + .item-button{ + color:white; + font-size: 30px; + background:linear-gradient(to right, #FF9900, #FF7B00); + width: 150px; + margin:20px auto + + } + } + + } + + } + .shop-box{ + padding:0 20px; + } + +} +.second-banner{ .categories{ display: flex; flex-wrap: wrap; @@ -30,4 +99,21 @@ margin-top: 20px; } } +} +.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; } \ No newline at end of file