first commit

src/actions/counter.js

@@ -0,0 +1,24 @@
+import {
+  ADD,
+  MINUS
+} from '../constants/counter'
+
+export const add = () => {
+  return {
+    type: ADD
+  }
+}
+export const minus = () => {
+  return {
+    type: MINUS
+  }
+}
+
+// 异步的action
+export function asyncAdd () {
+  return dispatch => {
+    setTimeout(() => {
+      dispatch(add())
+    }, 2000)
+  }
+}

src/app.js

@@ -0,0 +1,53 @@
+import '@tarojs/async-await'
+import Taro, { Component } from '@tarojs/taro'
+import { Provider } from '@tarojs/redux'
+import Index from './pages/index'
+import configStore from './store'
+
+import './app.scss'
+
+// 如果需要在 h5 环境中开启 React Devtools
+// 取消以下注释：
+// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5')  {
+//   require('nerv-devtools')
+// }
+
+const store = configStore()
+
+class App extends Component {
+
+  config = {
+    pages: [
+      'pages/index/index',
+      'pages/home/home',
+    ],
+    window: {
+      backgroundTextStyle: 'light',
+      navigationBarBackgroundColor: '#fff',
+      navigationBarTitleText: 'WeChat',
+      navigationBarTextStyle: 'black'
+    }
+  }
+
+  componentDidMount () {}
+
+  componentDidShow () {}
+
+  componentDidHide () {}
+
+  componentCatchError () {}
+
+  componentDidCatchError () {}
+
+  // 在 App 类中的 render() 函数没有实际作用
+  // 请勿修改此函数
+  render () {
+    return (
+      <Provider store={store}>
+        <Index />
+      </Provider>
+    )
+  }
+}
+
+Taro.render(<App />, document.getElementById('app'))

src/component/recommendShop/recommendShop.js

@@ -0,0 +1,65 @@
+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

@@ -0,0 +1,53 @@
+.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/constants/counter.js

@@ -0,0 +1,2 @@
+export const ADD = 'ADD'
+export const MINUS = 'MINUS'

src/index.html

@@ -0,0 +1,19 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
+  <meta content="width=device-width,initial-scale=1,user-scalable=no" name="viewport">
+  <meta name="apple-mobile-web-app-capable" content="yes">
+  <meta name="apple-touch-fullscreen" content="yes">
+  <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);
+  </script>
+</head>
+<body>
+  <div id="app"></div>
+</body>
+</html>

src/pages/home/home.js

@@ -0,0 +1,216 @@
+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 { 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 = {
+    navigationBarTitleText: '首页'
+  }
+  constructor(){
+    this.state={
+      shops:'',
+      ads:'',
+      categories:'',
+      demanding:''
+    }
+  }
+
+//http://ihome6.com/Shop-supplyShops
+  componentDidMount(){
+    this.getShopInfo()
+    this.getHomePageInfo()
+  }
+  componentWillReceiveProps (nextProps) {
+    //console.log(this.props, nextProps)
+  }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  getHomePageInfo(){
+    Taro.request({
+      url: 'http://192.168.1.230/Shop-wxStore',
+    })
+      .then(res =>{
+     //  console.log(res.data)
+        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)
+        })})
+  }
+  getShopInfo(){
+    Taro.request({
+      url: 'http://192.168.1.230/Shop-supplyShops',
+      method: 'POST',
+      dataType: 'json',
+      data: {
+        param: JSON.stringify({
+          curr_page: 1,
+          page_count: 20,
+          parent_supply_class: 1,
+          supply_class: 1,
+          supply_level: 1,
+          action: "2"
+        })
+      },
+      header: {
+        'content-type': 'application/x-www-form-urlencoded'
+      }
+    })
+      .then(res => {
+        this.setState({ shops: res.data.shops })
+      }
+      )
+  }
+
+  render () {
+    
+    
+    const demandingElemensArray = this.state.demanding.map((item,index)=>{
+      return <SwiperItem key={item.toString()} key={index}>
+          <View className='customer-need-item'>
+            <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>
+
+    
+    })
+
+    const shopCollectionElementsArray=this.state.shops.map((item,index)=>{
+      return <recommondShop test='1111111' shop={item} key={index}></recommondShop>
+    })
+
+    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}>
+        <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)=>{
+      return <View className='category-item' key={index}>
+        <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>
+    })
+
+   
+    
+    return (
+      <View className='home'>
+        <View className='top-banner'>
+          <Swiper
+            className='test-h'
+            indicatorColor='#999'
+            indicatorActiveColor='#333'
+            hotizontal
+            circular
+            indicatorDots
+            autoplay>
+
+            {adsImgElementsArray}
+
+          </Swiper>
+        </View>
+        <View className='main-cate'>
+          <Swiper
+            className='categories-box'
+            indicatorColor='#999'
+            indicatorActiveColor='#333'
+            hotizontal
+            circular
+            indicatorDots
+            autoplay>
+            <SwiperItem>
+              <View className='categories'>
+                {categoriesElementsArray1}
+              </View>
+            </SwiperItem>
+            <SwiperItem>
+              <View className='categories'>
+                {categoriesElementsArray2}
+              </View>
+            </SwiperItem>
+           
+          </Swiper>
+        </View>
+        <View className='container'>
+            <View className='title'>
+              <View className='text'>
+                  业主需求
+              </View>
+              <View className='more-link'>
+                   更多>>
+              </View>
+            </View>
+            <View className='customer-need'>
+              <Swiper 
+                className='test-h'
+                indicatorColor='#999'
+                indicatorActiveColor='#333'
+                horizontal
+                circular
+                displayMultipleItems='4'
+                autoplay>
+                    {demandingElemensArray}
+                </Swiper>
+
+            </View>
+            <View className='sub-cate'>
+            
+            </View>
+            <View className='title'>
+              行业推荐
+            </View>
+            <View className='demanding'>
+            {shopCollectionElementsArray}
+            </View>
+        </View>
+      </View>
+    )
+  }
+}
+
+export default Home

src/pages/home/home.scss

@@ -0,0 +1,33 @@
+.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;
+    }
+}
+.main-cate{
+    .categories{
+        display: flex;
+        flex-wrap: wrap;
+        flex-direction: row;
+        text-align: center;
+        font-size:30px;
+        .category-item{
+            width: 20%;
+            margin-top: 20px;
+        }
+    }
+}

src/pages/index/index.js

@@ -0,0 +1,60 @@
+import Taro, { Component } from '@tarojs/taro'
+import { View, Button, Text } from '@tarojs/components'
+import { connect } from '@tarojs/redux'
+
+import { add, minus, asyncAdd } from '../../actions/counter'
+
+import './index.scss'
+
+
+@connect(({ counter }) => ({
+  counter
+}), (dispatch) => ({
+  add () {
+    dispatch(add())
+  },
+  dec () {
+    dispatch(minus())
+  },
+  asyncAdd () {
+    dispatch(asyncAdd())
+  }
+}))
+class Index extends Component {
+
+    config = {
+    navigationBarTitleText: '首页'
+  }
+
+//http://ihome6.com/Shop-supplyShops
+  componentDidMount(){
+    Taro.navigateTo({
+      url: '/pages/home/home'
+    })
+
+    // Taro.request({
+    //   url:'http://192.168.1.230/Shop-wxStore',
+  
+    // })
+    //   .then(res => console.log(res.data))
+  }
+  componentWillReceiveProps (nextProps) {
+    console.log(this.props, nextProps)
+  }
+
+  componentWillUnmount () { }
+
+  componentDidShow () { }
+
+  componentDidHide () { }
+
+  render () {
+    return (
+      <View className='index'>
+       
+      </View>
+    )
+  }
+}
+
+export default Index

src/reducers/counter.js

@@ -0,0 +1,22 @@
+import { ADD, MINUS } from '../constants/counter'
+
+const INITIAL_STATE = {
+  num: 0
+}
+
+export default function counter (state = INITIAL_STATE, action) {
+  switch (action.type) {
+    case ADD:
+      return {
+        ...state,
+        num: state.num + 1
+      }
+     case MINUS:
+       return {
+         ...state,
+         num: state.num - 1
+       }
+     default:
+       return state
+  }
+}

src/reducers/index.js

@@ -0,0 +1,6 @@
+import { combineReducers } from 'redux'
+import counter from './counter'
+
+export default combineReducers({
+  counter
+})

src/store/index.js

@@ -0,0 +1,28 @@
+import { createStore, applyMiddleware, compose } from 'redux'
+import thunkMiddleware from 'redux-thunk'
+import rootReducer from '../reducers'
+
+const composeEnhancers =
+  typeof window === 'object' &&
+  window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ ?   
+    window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__({
+      // Specify extension’s options like name, actionsBlacklist, actionsCreators, serialize...
+    }) : compose
+
+const middlewares = [
+  thunkMiddleware
+]
+
+if (process.env.NODE_ENV === 'development') {
+  middlewares.push(require('redux-logger').createLogger())
+}
+
+const enhancer = composeEnhancers(
+  applyMiddleware(...middlewares),
+  // other store enhancers if any
+)
+
+export default function configStore () {
+  const store = createStore(rootReducer, enhancer)
+  return store
+}