Merge remote-tracking branch 'origin/master'

src/App.js

@@ -17,6 +17,7 @@ class App extends Component {
         }
     }
 
+    // componentWillMount 适用于刷新的 tabbar 的展示
     componentWillMount() {
         let {location} = this.props,
             pathname = location.pathname
@@ -30,7 +31,7 @@ class App extends Component {
         }
 
         // 如果不是首页的初始界面，就隐藏 tabbar
-        // 如在 /home/detail 刷新
+        // 如在 /home/detail 或 /home/detail/ 刷新
         let pathnameArray = location.pathname.split('/')
         let length = pathnameArray.length
         if (length > 2 && pathnameArray[length - 1] !== '') {
@@ -40,6 +41,7 @@ class App extends Component {
         }
     }
 
+    // componentWillReceiveProps 适用于跳转的 tabbar 的展示
     componentWillReceiveProps(next) {
         let {location} = next,
             pathname = location.pathname,
@@ -102,7 +104,7 @@ class App extends Component {
                                         <CartUnselectedIcon/>
                                 }
                                 <div className='tabbar-title'>
-                                    购物篮
+                                    购物袋
                                 </div>
                             </NavLink>
                         </Col>

src/pages/home/all/index.js

@@ -52,7 +52,7 @@ class All extends Component {
                 id: 'pants'
             },
             {
-                icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+                icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/more.png',
                 text: '更多',
                 id: 'more'
             }

src/pages/home/detail/index.css

@@ -8,11 +8,12 @@
 
 .detail-navbar-wrap {
     width: 100%;
+    height: 5%
 }
 
 .detail-navbar {
-    /*position: fixed;*/
-    /*top: 0;*/
+    position: fixed;
+    top: 0;
     width: 100%;
 }
 
@@ -66,22 +67,23 @@
     position: fixed;
     bottom: 0;
     width: 100%;
-    height: 8%;
+    height: 60px;
     background-color: white;
+    border-top: 1px solid #F3F3F3;
 }
 
 .detail-bottom-cart {
     display: inline-block;
     height: 100%;
     width: 15%;
-    border: 1px solid lightgrey;
+    text-align: center;
 }
 
 .detail-bottom-home {
     display: inline-block;
     height: 100%;
     width: 15%;
-    border: 1px solid lightgrey;
+    text-align: center;
 }
 
 .detail-bottom-add {
@@ -91,8 +93,8 @@
     color: white;
     background-color: orange;
     height: 100%;
-    font-size: 20px;
-    border: 1px solid lightgrey;
+    font-size: 18px;
+    line-height: 60px;
 }
 
 .detail-bottom-buy {
@@ -102,6 +104,28 @@
     color: white;
     background-color: orangered;
     height: 100%;
-    font-size: 20px;
-    border: 1px solid lightgrey;
-}
+    font-size: 18px;
+    line-height: 60px;
+}
+
+.detail-icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.detail-icon {
+    width: 25px;
+    height: 25px;
+}
+
+.detail-icon-cart {
+    background: url("https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/cart.png") no-repeat;
+    background-size: cover;
+}
+
+.detail-icon-shop {
+    background: url("https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/ship.png") no-repeat;
+    background-size: cover;
+}

src/pages/home/detail/index.js

@@ -54,7 +54,7 @@ class Detail extends Component {
                             }
 
                             return (
-                                <DetailRender data={data.productbyid}/>
+                                <DetailRender data={data.productbyid} history={this.props.history}/>
                             )
                         }
                     }
@@ -88,10 +88,10 @@ class DetailRender extends Component {
                 </div>
                 <div className='detail-complicate-show'>详情详情</div>
                 <div className='detail-bottom'>
-                    <div className='detail-bottom-cart'>购物车</div>
-                    <div className='detail-bottom-home'>店铺</div>
-                    <div className='detail-bottom-add'>加入购物车</div>
-                    <div className='detail-bottom-buy'>立即购买</div>
+                    <span className='detail-bottom-cart' onClick={()=>{this.props.history.push({pathname: '/cart'})}}><div className='detail-icon-wrap'><div className='detail-icon detail-icon-cart'/><div>购物车</div></div></span>
+                    <span className='detail-bottom-home' onClick={()=>{this.props.history.push({pathname: '/home'})}}><div className='detail-icon-wrap'><div className='detail-icon detail-icon-shop'/><div>店铺</div></div></span>
+                    <span className='detail-bottom-add' onClick={()=>{}}>加入购物车</span>
+                    <span className='detail-bottom-buy' onClick={()=>{}}>立即购买</span>
                 </div>
             </div>
         )

src/pages/home/kind/index.css

@@ -25,6 +25,7 @@
 
 .kind-navbar-wrap {
     width: 100%;
+    /*height: 5%*/
 }
 
 .kind-navbar {

src/pages/home/kind/index.js

@@ -87,29 +87,33 @@ class KindRender extends Component {
         let {data} = this.props
         return (
             <div className='kind-wrapper'>
-                <Grid data={data}
-                      columnNum={2}
-                      hasLine={false}
-                      onClick={(product) => {
-                          console.log(product)
-                          this.props.history.push({
-                              pathname: '/home/detail',
-                              state: {
-                                  id: product.id
-                              }
-                          })
-                      }}
-                      renderItem={dataItem => (
-                          <div key={dataItem.id} className='kind-item'>
-                              <div className='kind-item-img'
-                                   style={{backgroundImage: "url('" + dataItem.img + "')"}}/>
-                              <div className='kind-item-description'>
-                                  <div className='kind-item-name'>{dataItem.name}</div>
-                                  <div className='kind-item-price'>{dataItem.price}</div>
-                              </div>
-                          </div>
-                      )}
-                />
+                {
+                    data.length === 0?
+                        '这个分类还没有商品呢'
+                        :
+                        <Grid data={data}
+                              columnNum={2}
+                              hasLine={false}
+                              onClick={(product) => {
+                                  this.props.history.push({
+                                      pathname: '/home/detail',
+                                      state: {
+                                          id: product.id
+                                      }
+                                  })
+                              }}
+                              renderItem={dataItem => (
+                                  <div key={dataItem.id} className='kind-item'>
+                                      <div className='kind-item-img'
+                                           style={{backgroundImage: "url('" + dataItem.img + "')"}}/>
+                                      <div className='kind-item-description'>
+                                          <div className='kind-item-name'>{dataItem.name}</div>
+                                          <div className='kind-item-price'>{dataItem.price}</div>
+                                      </div>
+                                  </div>
+                              )}
+                        />
+                }
             </div>
         )
     }

src/pages/my/all/index.css

@@ -35,7 +35,7 @@
 .my-card {
     background-color: white;
     margin-top: 15px;
-    height: 150px
+
 }
 
 .card-title {

src/pages/my/all/index.js

@@ -5,22 +5,22 @@ import {withRouter} from 'react-router-dom'
 
 const orderIcon = [
     {
-        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/pay.png',
         text: '待付款',
         id: 'pay'
     },
     {
-        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/ship.png',
         text: '待发货',
         id: 'ship'
     },
     {
-        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/unbox.png',
         text: '待收货',
         id: 'unbox'
     },
     {
-        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/judge.png',
         text: '待评价',
         id: 'judge'
     }
@@ -28,17 +28,17 @@ const orderIcon = [
 
 const toolsIcon = [
     {
-        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/address.png',
         text: '收货地址',
         id: 'address'
     },
     {
-        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
-        text: '购物车',
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/cart.png',
+        text: '购物袋',
         id: 'cart'
     },
     {
-        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/message.png',
         text: '系统通知',
         id: 'message'
     }
@@ -46,17 +46,17 @@ const toolsIcon = [
 
 const memberIcon = [
     {
-        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/card.png',
         text: '会员卡',
         id: 'card'
     },
     {
-        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/coupon.png',
         text: '优惠券',
         id: 'coupon'
     },
     {
-        icon: 'https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png',
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/credit.png',
         text: '积分',
         id: 'credit'
     }

src/pages/my/tools/address/addaddress/index.js

@@ -4,7 +4,15 @@ import {NavBar, Icon, InputItem, PickerView, TextareaItem} from 'antd-mobile'
 import { Button } from 'antd';
 import './index.css'
 
-const province = [
+const provinceAll = [
+    {
+        label: '江苏省',
+        value: '江苏省',
+    },
+    {
+        label: '河南省',
+        value: '河南省',
+    },
     {
         label: '安徽省',
         value: '安徽省',
@@ -62,7 +70,15 @@ const province = [
                 value: '黄山',
             }
         ]
-    }
+    },
+    {
+        label: '湖北省',
+        value: '湖北省',
+    },
+    {
+        label: '江西省',
+        value: '江西省',
+    },
 ]
 
 class AddAddress extends Component {
@@ -71,15 +87,16 @@ class AddAddress extends Component {
         this.state = {
             username: '',
             telephone: '',
-            province: '',
-            city: '',
-            area: '',
+            province: '安徽省',
+            city: '合肥市',
+            area: '包河区',
             address: ''
         }
     }
 
     render() {
         let {changePage} = this.props
+        let {username, telephone, province, city, area, address} = this.state
         return (
             <div>
                 <div className='tools-addressadd-navbar-wrap'>
@@ -94,7 +111,7 @@ class AddAddress extends Component {
                 </div>
 
                 <div>
-                    <InputItem placeholder="输入姓名" onChange={(username) => {
+                    <InputItem placeholder="输入姓名" labelNumber={5} onChange={(username) => {
                         this.setState({username})
                     }}>
                         <div>联系人姓名</div>
@@ -109,8 +126,8 @@ class AddAddress extends Component {
                         editable={false}
                     />
                     <PickerView
-                        data={province}
-                        value={[this.state.province, this.state.city, this.state.area ? this.state.area : '']}
+                        data={provinceAll}
+                        value={[province, city, area ? area : '']}
                         onChange={(area) => {
                             this.setState({province: area[0], city: area[1], area: area[2]})
                         }}
@@ -118,19 +135,44 @@ class AddAddress extends Component {
                     <TextareaItem
                         title="详细地址"
                         autoHeight
-                        labelNumber={5}
+                        labelNumber={4}
                         onChange={(address) => {
                             this.setState({address})
                         }}
                     />
                 </div>
 
-                <div className='add-address-button'>
-                    <Button type='primary' block size='large'>保存并使用</Button>
-                </div>
+                <AddAddressButton
+                    data = {{
+                        username,
+                        telephone,
+                        province,
+                        city,
+                        area,
+                        address
+                    }}
+                />
             </div>
         )
     }
 }
 
-export default AddAddress
+export default AddAddress
+
+class AddAddressButton extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+
+        }
+    }
+
+    render() {
+        // let {data} = this.props
+        return (
+            <div className='add-address-button'>
+                <Button type='primary' block size='large'>保存并使用</Button>
+            </div>
+        )
+    }
+}