添加店铺页面

src/app.js

@@ -20,6 +20,7 @@ class App extends Component {
     pages: [
       'pages/index/index',
       'pages/home/home',
+      'pages/shop/shop',
     ],
     window: {
       backgroundTextStyle: 'light',

src/component/bottomNav/bottomNav.js

@@ -0,0 +1,67 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View} from '@tarojs/components'
+
+import { AtTabBar } from 'taro-ui'
+
+import './bottomNav.scss'
+
+class bottomNav extends Component {
+
+    config = {
+        navigationBarTitleText: 'bottomNav'
+    }
+    constructor(){
+        super(...arguments);
+
+        this.state={
+            current:0
+        }
+
+    }
+    handleClick(value){
+        this.setState({
+            current: value
+        })
+        let path=this.props.otherData.menu[value].url
+        Taro.navigateTo({
+            url: path,
+        })
+
+    }
+
+    componentWillReceiveProps(nextProps) {
+        //console.log(this.props, nextProps)
+    }
+
+    componentWillUnmount() { }
+
+    componentDidShow() { }
+
+    componentDidHide() { }
+
+    render() {
+
+        const otherDataElementsArray = this.props.otherData.menu? this.props.otherData.menu.map((item, index) => {
+            return { title: item.name, iconType: 'clock' }
+        }):null
+        return (
+            <View >
+                <AtTabBar className='bottom-nav'
+                  fixed
+                  fontSize='10'
+                  iconSize='18'
+                  selectedColor='#FF7142'
+                  tabList={
+                        otherDataElementsArray
+                    }
+                  onClick={this.handleClick.bind(this)}
+                  current={this.state.current}
+                />
+            </View>
+           
+        )
+}
+}
+
+export default bottomNav
+

src/component/filteredShopComponent/filteredShopComponent.js

@@ -3,16 +3,21 @@ import { View, Button, Text,Image } from '@tarojs/components'
 import { AtIcon } from 'taro-ui'
 
 import './filteredShopComponent.scss'
+
+import URL from '../../serviceAPI.config'
 const hornIcon = require('../../icons/horn.png')
 const houseIcon = require('../../icons/house.png')
-
-
-
 class recommondShop extends Component {
 
     config = {
         navigationBarTitleText: 'recommondShop'
     }
+    goToShop(value) {
+       
+        Taro.navigateTo({
+            url: '/pages/shop/shop?id='+value.shop_id+'&name='+value.shop_name
+        })
+    }
     
     componentWillReceiveProps(nextProps) {
         //console.log(this.props, nextProps)
@@ -27,23 +32,22 @@ class recommondShop extends Component {
     render() {
         
         const title = this.props.shop.shop_name
-        const imgUrl = 'http://192.168.1.230/' + this.props.shop.goods[0].goods_url
+        const imgUrl = URL.Base + 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} />
+                <Image className='goods-img' src={URL.Base+item.goods_url} />
             </View>
         })
         return (
-            <View className='shop-list-box'>
+            <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;'/>
@@ -56,7 +60,7 @@ class recommondShop extends Component {
                     </View>
                 </View>
                 <View className='body'>
-                    <View className='shop-img'>
+                    <View className='shop-img' onClick={this.goToShop.bind(this, this.props.shop)}>
                         <Image src={imgUrl}/>
                     </View>
                     {goods.length !== 1 ? goodsElementsArray:<View className='details'>

src/component/filteredShopComponent/filteredShopComponent.scss

@@ -8,7 +8,7 @@
         border-bottom:1px solid #F2F2F2;
         display: flex;
         .title{
-            width: 50%;
+            width: 55%;
             color: #333;
             font-weight: bold;
             font-size: 30px;
@@ -16,7 +16,7 @@
             
         }
         .consult-voucher-button{
-            width: 50%;
+            width: 45%;
             //margin-top: 20px ;
             margin-left: 200px;
             display: flex;

src/index.html

@@ -8,6 +8,8 @@
   <meta name="format-detection" content="telephone=no,address=no">
   <meta name="apple-mobile-web-app-status-bar-style" content="white">
   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" >
+
+
   <title>Taro</title>
   <script>
     !function(x){function w(){var v,u,t,tes,s=x.document,r=s.documentElement,a=r.getBoundingClientRect().width;if(!v&&!u){var n=!!x.navigator.appVersion.match(/AppleWebKit.*Mobile.*/);v=x.devicePixelRatio;tes=x.devicePixelRatio;v=n?v:1,u=1/v}if(a>=640){r.style.fontSize="40px"}else{if(a<=320){r.style.fontSize="20px"}else{r.style.fontSize=a/320*20+"px"}}}x.addEventListener("resize",function(){w()});w()}(window);
@@ -16,4 +18,7 @@
 <body>
   <div id="app"></div>
 </body>
+<script>
+ 
+</script>
 </html>

src/pages/home/home.js

@@ -1,10 +1,9 @@
 import Taro, { Component } from '@tarojs/taro'
 import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
-import { AtButton } from 'taro-ui'
+import { AtActivityIndicator } from 'taro-ui'
 import filteredShopComponent from '../../component/filteredShopComponent/filteredShopComponent'
-
+import bottomNav from '../../component/bottomNav/bottomNav'
-import { add, minus, asyncAdd } from '../../actions/counter'
+import URL from '../../serviceAPI.config'
-
 import './home.scss'
 
 class Home extends Component {
@@ -13,15 +12,22 @@ class Home extends Component {
     navigationBarTitleText: '首页'
   }
   constructor() {
+    super(...arguments);
+
     this.state = {
       shopsDetails: '',
       ads: '',
       categories: '',
       demanding: '',
+      otherData:''
     }
   }
+  componentWillMount(){
  
+
+ }
   componentDidMount() {
+    
     this.getShops()
     this.getHomeCategoriesInfo()
   }
@@ -35,9 +41,10 @@ class Home extends Component {
 
   componentDidHide() { }
 
+// 得到首页的信息
   getHomeCategoriesInfo() {
     Taro.request({
-      url: 'http://192.168.1.230/Shop-wxStore',
+      url: URL.ShopWxStore,
     })
       .then(res => {
         console.log(res)
@@ -45,14 +52,16 @@ class Home extends Component {
           ads: res.data.data.adsLb,
           categories: res.data.data.supplyClass,
           demanding: res.data.data.demand.supplys,
+          otherData:res.data.otherData
         }, () => {
           //console.log(this.state.demanding)
         })
       })
   }
+  // 得到所有商店的信息 
   getShops(parent_supply_class = 0, supply_class = '-1', supply_level = 1) {
     Taro.request({
-      url: 'http://192.168.1.230/Shop-supplyShops',
+      url: URL.ShopSupplyShops,
       method: 'POST',
       dataType: 'json',
       data: {
@@ -66,7 +75,8 @@ class Home extends Component {
         })
       },
       header: {
-        'content-type': 'application/x-www-form-urlencoded'
+        'content-type': 'application/x-www-form-urlencoded',
+       
       }
     })
       .then(res => {
@@ -84,8 +94,9 @@ class Home extends Component {
     this.getShops(item.parent_class_id, item.class_id, 2)
   }
 
+
   render() {
-    const demandingElemensArray = this.state.demanding.map((item, index) => {
+    const demandingElemensArray = this.state.demanding?this.state.demanding.map((item, index) => {
       return < SwiperItem key={index} >
         <View className='demanding-item'>
           <View className='item-tag'>
@@ -105,39 +116,44 @@ class Home extends Component {
           </View>
         </View>
       </SwiperItem >
-    })
+    }) :null
 
-    const adsImgElementsArray = this.state.ads.map((item, index) => {
+    const adsImgElementsArray = this.state.ads?this.state.ads.map((item, index) => {
       return <SwiperItem key={index}>
-        <Image className='banner-img' src={'http://192.168.1.230/' + item.ads_pic} />
+        <Image className='banner-img' src={URL.Base + item.ads_pic} />
       </SwiperItem>
-    })
+    }):null
 
     // 这里应该代码可以优化-----
-    const categoriesElementsArray1 = this.state.categories[0].map((item, index) => {
+    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={'http://192.168.1.230/' + item.icon} /></View>
+        <View> <Image style='height: 42px;width: 42px;' className='cate-img' src={URL.Base + item.icon} /></View>
         <View>{item.class_name}</View>
       </View>
-    })
+    }):null
-    const categoriesElementsArray2 = this.state.categories[1].map((item, index) => {
+    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={'http://192.168.1.230/' + item.icon} /></View>
+        <View> <Image style='height: 42px;width: 42px;' className='cate-img' src={URL.Base + item.icon} /></View>
         <View>{item.class_name}</View>
       </View>
-    })
+    }):null
-    const shopCollectionElementsArray = this.state.shopsDetails.map((item, index) => {
+    const shopCollectionElementsArray = this.state.shopsDetails?this.state.shopsDetails.map((item, index) => {
       return <filteredShopComponent shop={item} key={index}></filteredShopComponent>
-    })
+    }):null
     
-    const subCateElementsArray = this.state.subCate.map((item, index) => {
+    const subCateElementsArray = this.state.subCate?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
+   
+
+     
     return (
+      
       <View className='home'>
         {/* 第一行图片滚动条 */}
+
         <View className='first-banner'>
           <Swiper
             className='swipper'
@@ -147,7 +163,6 @@ class Home extends Component {
             circular
             indicatorDots
             autoplay>
-
             {adsImgElementsArray}
 
           </Swiper>
@@ -190,17 +205,7 @@ class Home extends Component {
 
           </Swiper>
         </View>
-        <View className='second-banner-level2'>
+       
-          <Swiper
-            className='swipper swiper-sub'
-            indicatorColor='#999'
-            indicatorActiveColor='#333'
-            horizontal
-            displayMultipleItems='4.5'
-          >
-            {subCateElementsArray}
-          </Swiper>
-        </View>
         {/* 业主需求和行业推荐 */}
         <View className='container'>
           <View className='title'>
@@ -226,16 +231,40 @@ class Home extends Component {
           </View>
           <View className='sub-cate'>
 
+          </View>
+          <View className='second-banner-level2'>
+            <Swiper
+              className='swipper swiper-sub'
+              indicatorColor='#999'
+              indicatorActiveColor='#333'
+              horizontal
+              displayMultipleItems='4.5'
+            >
+              {subCateElementsArray}
+            </Swiper>
           </View>
           <View className='title'>
             <Text className='title-block'></Text>
             <Text className='title-text'>行业推荐</Text>
 
           </View>
+          
           <View className='shop-box'>
             {shopCollectionElementsArray}
+            {this.state.shopsDetails.length !== 0 ? <View className='title'>
+              沒有更多了...
+            </View>: < View className='title' >
+              没有找到...
+            </View > }
           </View>
+         
         </View>
+        <View className='bottom-nav-box'>
+          <bottomNav otherData={this.state.otherData}/>
+
+        </View>
+       
+
       </View>
     )
   }

src/pages/home/home.scss

@@ -1,4 +1,5 @@
 .home{
+    overflow: hidden;
     .banner-img{
         width: 100%
     }
@@ -84,7 +85,19 @@
     }
     .shop-box{
         padding:0 20px;
+        .title{
+            text-align: center;
+            color: #999;
+            font-size: 25px;
+            height: 180px
+        }
     }
+    .bottom-nav-box{
+        .bottom-nav{
+            height: 20px
+        }
+    }
+
     
 }
 .second-banner{

src/pages/shop/shop.js

@@ -0,0 +1,132 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View, Button, Text, Swiper, SwiperItem, Image } from '@tarojs/components'
+import { AtSearchBar, Picker  } from 'taro-ui'
+import URL from '../../serviceAPI.config'
+
+import './shop.scss'
+
+class Shop extends Component {
+    // 项目配置
+    config = {
+        navigationBarTitleText: '店铺'
+    }
+    constructor() {
+        super(...arguments)
+        this.state = {
+            value: '',
+            shopId:'',
+            shopName:''
+        }
+    }
+    onChange(value) {
+        this.setState({
+            value: value
+        })
+    }
+    onActionClick() {
+        console.log('开始搜索')
+    }
+
+    getShopInfo() {
+        Taro.request({
+            url: URL.GoodsSearch,
+            method:'POST',
+            dataType: 'json',
+            data:{
+                goods: JSON.stringify({ 
+                    curr_page: 1,
+                     page_count: 50,
+                     shop_name: false,
+                     shop_id: 1254,
+                     config_id: 4,
+                     shop_class_id: '',
+                     order: 'g.browse_times desc',
+                     currPage: 1,
+                     goods_class_id: 10401
+            }),
+                goodsRegion: JSON.stringify({}),
+                goodsSpec: JSON.stringify([]),
+                goodsParam: JSON.stringify([]),
+                goodsParamExt: JSON.stringify([]),
+
+            },
+            header: {
+                'content-type': 'application/x-www-form-urlencoded',
+                'X-Requested-With':'XMLHttpRequest'
+            }
+        })
+            .then(res => {
+                console.log('res--',res)
+              
+            })
+    }
+    componentWillMount() {
+        this.setState({ shopId: this.$router.params.id, shopName: this.$router.params.name}) // 输出 { id: 2, type: 'test' }
+    }
+    componentDidMount(){
+           
+        this.getShopInfo()
+    }
+
+
+
+    componentDidShow() { }
+
+    componentDidHide() { }
+
+    render() {
+        const shopName= this.state.shopName
+        console.log(shopName)
+        return (
+           <View className='shop'>
+             <View className='searchBar-box'>
+                <AtSearchBar
+                    showActionButton
+                    value={this.state.value}
+                    onChange={this.onChange.bind(this)}
+                    onActionClick={this.onActionClick.bind(this)}
+                />
+             </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>
+             </View>
+            <View className='nav-box'>
+                <View className='nav'>
+                        <View className='shop-cate'>
+                            <Text className='text'>
+                                店铺全部分类
+                            </Text>
+
+                        </View>
+                        <View className='home-link'>
+                            <Text className='text'>
+                                首页
+                            </Text>
+
+                        </View>
+                        <View className='home-link'>
+                            <Text className='text'>
+                                店铺说明
+                            </Text>
+
+                        </View>
+                    
+
+                </View>
+
+                       
+             </View>
+            <View className='filter-box'>
+            
+
+            </View>
+                    <View className='container'>
+
+                    </View>
+           </View> 
+        )
+    }
+}
+
+export default Shop

src/pages/shop/shop.scss

@@ -0,0 +1,30 @@
+
+.banner-box{
+    position: relative;
+    .shop-name{
+        position: absolute;
+        top:100px;
+        left:60px;
+        font-size: 50px
+    }
+}
+
+.nav-box{
+    
+    background-color: black;
+    .nav{
+        display: flex;
+        line-height: 55px;
+        .text{
+        color:white;
+        font-size: 28px
+          }
+        .shop-cate{
+            flex:1
+        }
+        .home-link{
+            flex:1
+        }
+    }
+    
+}

src/serviceAPI.config.js

@@ -0,0 +1,11 @@
+
+const LOCALURL = "http://192.168.1.230/"
+const URL = {
+    Base:LOCALURL,
+    ShopWxStore: LOCALURL + 'Shop-wxStore',    //商城首页信息
+    ShopSupplyShops: LOCALURL + 'Shop-supplyShops',// 商城店铺信息
+    GoodsSearch: LOCALURL + 'GoodsSearch-search',// 店铺页面的信息
+   
+}
+
+module.exports = URL