home page intiially done

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",

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 <View className='goods-img-box' key={index}>
+                <Image className='goods-img' src={'http://192.168.1.230/'+item.goods_url} />
+            </View>
+        })
+        return (
+            <View className='shop-list-box'>
+                <View className='header'>
+                    <View className='title'>
+                        <Image src={ads==0 ? hornIcon :houseIcon} style='width:12px; height:12px; vertical-align: middle;'/>
+                        <Text style='margin-left:2px; vertical-align: middle;'>  {title}</Text>
+                    </View>
+                    <View className='consult-voucher-button' >
+                        <Button style='padding:0' className={voucherLeft ? 'voucher-button-text voucher' : 'voucher-button-text'} >优惠卷</Button>
+                        <Button style='padding:0' className='consult-button-text'>咨询</Button>
+                       
+                    </View>
+                </View>
+                <View className='body'>
+                    <View className='shop-img'>
+                        <Image src={imgUrl}/>
+                    </View>
+                    {goods.length !== 1 ? goodsElementsArray:<View className='details'>
+                        <View className='details-block'><Text className='details-text'>商品:</Text> <Text>{ProductName}</Text></View>
+                        <View className='details-block'><Text className='details-text'>价格: </Text><Text>{price}</Text></View>
+                    </View>}
+                    
+                </View>
+                <View className='footer'>
+                    <View className='address'>
+                        <AtIcon value='map-pin' size='15' color='#FF7142'></AtIcon>
+                    {address} </View>
+                    <View className='distance'><Text>{distance}</Text></View>
+                   
+                </View>
+            </View>
+        )
+    }
+}
+
+export default recommondShop

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%;
+            
+        }
+    }
+}

src/component/recommendShop/recommendShop.js

@@ -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 (
-            <View className='shop-list-box'>
-                <View className='header'>
-                    <View className='title'>
-                        {title}
-                    </View>
-                    <View className='ask-button'>
-                    <Button>咨询</Button>
-                    </View>
-                </View>
-                <View className='body'>
-                    <View className='shop-img'>
-                        <Image
-                            src={imgUrl}
-                        />
-                    </View>
-                    <View className='details'>
-                        <View><Text>商品:{ProductName}</Text> </View>
-                        <View><Text>价格:{price}</Text></View>
-                    </View>
-                </View>
-                <View className='footer'>
-
-                    <View className='address'><Text>{address}</Text> </View>
-                    <View className='distance'><Text>{distance}</Text></View>
-                   
-                </View>
-            </View>
-        )
-    }
-}
-
-export default recommondShop

src/component/recommendShop/recommondShop.scss

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

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 { AtButton } from 'taro-ui'
-import recommondShop from '../../component/recommendShop/recommendShop'
+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(){
+  constructor() {
-    this.state={
+    this.state = {
-      shops:'',
+      shopsDetails: '',
-      ads:'',
+      ads: '',
-      categories:'',
+      categories: '',
-      demanding:''
+      demanding: '',
     }
   }
 
-//http://ihome6.com/Shop-supplyShops
+  componentDidMount() {
-  componentDidMount(){
+    this.getShops()
-    this.getShopInfo()
+    this.getHomeCategoriesInfo()
-    this.getHomePageInfo()
   }
-  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 =>{
+      .then(res => {
-     //  console.log(res.data)
+        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,
+          parent_supply_class: parent_supply_class, //父级class id
-          supply_class: 1,
+          supply_class: supply_class,// 子级class id
-          supply_level: 1,
+          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 () {
+  render() {
-    
+    const demandingElemensArray = this.state.demanding.map((item, index) => {
-    
+      return < SwiperItem key={index} >
-    const demandingElemensArray = this.state.demanding.map((item,index)=>{
+        <View className='demanding-item'>
-      return <SwiperItem key={item.toString()} key={index}>
+          <View className='item-tag'>
-          <View className='customer-need-item'>
+            <Text className='item-tag-text'> {item.class_name}</Text>
-            <View className='item-title'>
-            {item.class_name}
-                  </View>
-            <View className='item-address'>
-              软件园D区
-                  </View>
-            <View className='item-name'>
-            业主：{item.user_name}
-                  </View>
-            <View className='item-button'>
-            <Button>{item.state_name}</Button>
-            </View>
           </View>
-        </SwiperItem>
+          <View className='item-title'>
-
+            {item.sd_title}
-    
+          </View>
+          <View className='item-address'>
+            {item.user_address}
+          </View>
+          <View className='item-name'>
+            业主：{item.user_name}
+          </View>
+          <View className='item-button-box'>
+            <Button className='item-button'  >{item.state_name}</Button>
+          </View>
+        </View>
+      </SwiperItem >
     })
 
-    const shopCollectionElementsArray=this.state.shops.map((item,index)=>{
+    const adsImgElementsArray = this.state.ads.map((item, index) => {
-      return <recommondShop test='1111111' shop={item} key={index}></recommondShop>
+      return <SwiperItem key={index}>
-    })
+        <Image className='banner-img' src={'http://192.168.1.230/' + item.ads_pic} />
-
-    const adsImgElementsArray=this.state.ads.map((item,index)=>{
-      return <SwiperItem  key={index}>
-        <Image src={'http://192.168.1.230/' + item.ads_pic}/>
       </SwiperItem>
     })
-    const categoriesElementsArray1=this.state.categories[0].map((item,index)=>{
+
-      return <View className='category-item' key={index}>
+    // 这里应该代码可以优化-----
+    const categoriesElementsArray1 = 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={'http://192.168.1.230/' + item.icon} /></View>
         <View>{item.class_name}</View>
       </View>
     })
-    const categoriesElementsArray2=this.state.categories[1].map((item,index)=>{
+    const categoriesElementsArray2 = this.state.categories[1].map((item, index) => {
-      return <View className='category-item' key={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={'http://192.168.1.230/' + item.icon} /></View>
         <View>{item.class_name}</View>
       </View>
     })
+    const shopCollectionElementsArray = this.state.shopsDetails.map((item, index) => {
+      return <filteredShopComponent shop={item} key={index}></filteredShopComponent>
+    })
 
-   
+    const subCateElementsArray = this.state.subCate.map((item, index) => {
-    
+      return <SwiperItem key={index} onClick={this.onClickChildCate.bind(this, item)}>
+        <View className='text'>{item.class_name}</View>
+      </SwiperItem>
+    })
     return (
       <View className='home'>
-        <View className='top-banner'>
+        {/* 第一行图片滚动条 */}
+        <View className='first-banner'>
           <Swiper
-            className='test-h'
+            className='swipper'
             indicatorColor='#999'
             indicatorActiveColor='#333'
             hotizontal
@@ -154,9 +152,10 @@ class Home extends Component {
 
           </Swiper>
         </View>
-        <View className='main-cate'>
+        {/* 第二行图片滚动条 */}
+        <View className='second-banner'>
           <Swiper
-            className='categories-box'
+            className='swipper'
             indicatorColor='#999'
             indicatorActiveColor='#333'
             hotizontal
@@ -173,40 +172,69 @@ class Home extends Component {
                 {categoriesElementsArray2}
               </View>
             </SwiperItem>
-           
           </Swiper>
         </View>
-        <View className='container'>
+        {/* 第三行图片滚动条 */}
-            <View className='title'>
+        <View className='third-banner'>
-              <View className='text'>
+          <Swiper
-                  业主需求
+            className='swipper'
-              </View>
+            indicatorColor='#999'
-              <View className='more-link'>
+            indicatorActiveColor='#333'
-                   更多>>
+            horizontal
-              </View>
+            circular
-            </View>
+            indicatorDots
-            <View className='customer-need'>
+            autoplay>
-              <Swiper 
+            <SwiperItem>
-                className='test-h'
+              <Image className='banner-img' src='http://192.168.1.230/Public/images/xgt.png' />
-                indicatorColor='#999'
+            </SwiperItem>
-                indicatorActiveColor='#333'
-                horizontal
-                circular
-                displayMultipleItems='4'
-                autoplay>
-                    {demandingElemensArray}
-                </Swiper>
 
-            </View>
+          </Swiper>
-            <View className='sub-cate'>
+        </View>
-            
+        <View className='second-banner-level2'>
-            </View>
+          <Swiper
-            <View className='title'>
+            className='swipper swiper-sub'
-              行业推荐
+            indicatorColor='#999'
-            </View>
+            indicatorActiveColor='#333'
-            <View className='demanding'>
+            horizontal
+            displayMultipleItems='4.5'
+          >
+            {subCateElementsArray}
+          </Swiper>
+        </View>
+        {/* 业主需求和行业推荐 */}
+        <View className='container'>
+          <View className='title'>
+
+            <Text className='title-block'></Text>
+            <Text className='title-text'>业主需求</Text>
+
+            <Text className='more-link'>
+              更多>>
+                </Text>
+          </View>
+          <View className='customer-demanding'>
+            <Swiper
+              className='swipper swiper-sub'
+              indicatorColor='#999'
+              indicatorActiveColor='#333'
+              horizontal
+              circular
+              displayMultipleItems='2.5'
+            >
+              {demandingElemensArray}
+            </Swiper>
+          </View>
+          <View className='sub-cate'>
+
+          </View>
+          <View className='title'>
+            <Text className='title-block'></Text>
+            <Text className='title-text'>行业推荐</Text>
+
+          </View>
+          <View className='shop-box'>
             {shopCollectionElementsArray}
-            </View>
+          </View>
         </View>
       </View>
     )

src/pages/home/home.scss

@@ -1,24 +1,93 @@
-.container{
+.home{
-    margin-top: 100px;
+    .banner-img{
-    .title{
+        width: 100%
-        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;
     }
 }
-.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;
 }