部署ecommerce fc

src/case/ShopApp/src/App.js

@@ -16,8 +16,8 @@ import AddressPage from './components/AddressPage/AddressPage'
 
 import {graphqls} from './api/graphql_request'
 import {getProductById,getProductByProps} from './api/graphql/product'
-import axious from './api/axious_request'
-axious()
+//import axious from './api/axious_request'
+
 
 class ShopApp extends Component {
   //showComponent
@@ -28,11 +28,14 @@ class ShopApp extends Component {
       product_id:'',
       num:1,
       editAddress:false,
-      fromShopCar:false
+      fromShopCar:false,
+      fromOrderCenter:false,
+      order_id:''
     }
     this.changePage=this.changePage.bind(this)
     this.triggerAddress=this.triggerAddress.bind(this)
     this.setFromShopCar=this.setFromShopCar.bind(this)
+    this.setOrderId=this.setOrderId.bind(this)
   }
 
   componentWillMount(){
@@ -48,8 +51,8 @@ class ShopApp extends Component {
     })
   }
 
-  getProductByIds(){
-    return graphqls(getProductById,{id:this.state.product_id}).then(e=>e)
+  getProductByIds(id){
+    return graphqls(getProductById,{id}).then(e=>e)
   }
   //显示页面，控制子页面的显示
 
@@ -77,6 +80,11 @@ class ShopApp extends Component {
     this.setState({fromShopCar})
   }
 
+  setOrderId(order_id="",fromOrderCenter=false){
+    console.log('----setOrderId----',order_id,fromOrderCenter)
+    this.setState({order_id,fromOrderCenter})
+  }
+
   //根据条件渲染页面
   renderPage(page=""){
     console.log('renderPage',page)
@@ -154,22 +162,24 @@ class ShopApp extends Component {
   }
 
   render() {
-    const changePage=this.changePage
-    const triggerAddress=this.triggerAddress
-    const fromShopCar=this.state.fromShopCar
-    const setFromShopCar=this.setFromShopCar
-    const getProductByIds=this.getProductByIds()
+    const changePage=this.changePage//切换page
+    const triggerAddress=this.triggerAddress//新建Address?
+    const fromShopCar=this.state.fromShopCar//是否来自于shopCarPage
+    const setFromShopCar=this.setFromShopCar//
+    const getProductByIds=this.getProductByIds//
+    const order_id=this.state.order_id
+    const product_id =this.state.product_id
+    const setOrderId=this.setOrderId//
+    const fromOrderCenter=this.state.fromOrderCenter
     const num=this.state.num
     //console.log('APPrender')
     return (
-      <PageContext.Provider value={{changePage,triggerAddress,getProductByIds,num,fromShopCar,setFromShopCar}}>
+      <PageContext.Provider value={{changePage,triggerAddress,getProductByIds,num,fromShopCar,setFromShopCar,setOrderId,order_id,product_id,fromOrderCenter}}>
           <div className="AppWrap">
             <div className="phone6s">
               <div className="App">
                 <NavBars />
-                {
-                  this.renderPage(this.state.page)
-                }
+                { this.renderPage(this.state.page) }{/*渲染页面*/}
               </div>
             </div>
           </div>

src/case/ShopApp/src/api/graphql/user.js

@@ -8,15 +8,5 @@ export const getUserByProps=`query userbyprops($openid: String, $username: Strin
         createdAt
         openid
         id
-        userData_id {
-            id
-            nickname
-            avatar
-            isVip
-            vipCode
-            userPoint
-            createdAt
-            updatedAt
-        }
     }
 }`

src/case/ShopApp/src/api/url_config.js

@@ -1,9 +1,7 @@
 var config={
     APPID:"wxc4831335ae194243",
-    HTTP_DATA_URL:'http://localhost:3001/graphql',
+    HTTP_DATA_URL:'http://ec.ioobot.cn/graphql',  //  电商fc  http://ec.ioobot.cn/graphql
     HTTP_PAY_URL:'https://xcx.ioobot.com/payinfo'
 }
-export default config
-
-
 
+export default config

src/case/ShopApp/src/components/AddressPage/EditAddress.jsx

@@ -5,7 +5,10 @@ import {graphqls} from '../../api/graphql_request'
 import {getAddressByProps,createAddress} from '../../api/graphql/address'
 
 export default class EditAddress extends Component {
-
+  constructor(props){
+    super(props)
+    this.createUserAddress=this.createUserAddress.bind(this)
+  }
   componentDidMount(){
     console.log('EditAddress mount')
   }
@@ -16,26 +19,14 @@ export default class EditAddress extends Component {
 
   //创建用户地址
 
-  createUserAddress(){
-    let data={
-      "address": "",
-      "area": "",
-      "city": "",
-      "default":0,
-      "id": "",
-      "postcode": "",
-      "province": "",
-      "telephone": "",
-      "updatedAt": "",
-      "user_id": "",
-      "username": ""
-    }
-    graphqls(createAddress,data)
+  createUserAddress(data){
+    //graphqls(createAddress,data)
+    console.log('---------',data)
   }
   render() {
     return (
       <div>
-        <FormAddress />
+        <FormAddress createUserAddress={this.createUserAddress}/>
       </div>
     )
   }

src/case/ShopApp/src/components/AddressPage/FormAddress.css

@@ -1,9 +1,26 @@
 .pickerWrap{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    z-index: 10;
     width: 100%;;
     height: auto;
-    border: 1px solid #ccc;
-}
+    /*border: 1px solid #ccc;*/
+}
+
+
+div.am-picker-popup-mask {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+}
+
+
+div.am-picker-popup-wrap ,div.am-picker-popup-wrap{
+    position: absolute !important;
+    /* bottom: 0; */
+    left: 910px;
+    top: 490px;
+    width: 299px;
+    height: 293px;
+}
+
+

src/case/ShopApp/src/components/AddressPage/FormAddress.jsx

@@ -1,12 +1,14 @@
 import React, { Component } from 'react'
 
-import { List, InputItem, WhiteSpace ,Picker,PickerView} from 'antd-mobile';
+import { List, InputItem, WhiteSpace ,Picker,PickerView, Button, WingBlank} from 'antd-mobile';
 import { createForm } from 'rc-form';
 import './FormAddress.css'
 
+import { district} from 'antd-mobile-demo-data';
 
-import {province} from './areaData'
+import config from '../../api/url_config'
 
+const APPID =config.APPID
 
 
 export default class FormAddress extends Component {
@@ -14,10 +16,100 @@ export default class FormAddress extends Component {
       super(props)
 
       this.state={
-          areaShow:false
+          areaShow:false,
+          name:'',
+          phone:'',
+          detail:'',
+          code:'',
+          "area": "",
+          "city": "",
+          "province": ""
       }
 
       this.trigger=this.trigger.bind(this)
+      this.nameChange=this.nameChange.bind(this)
+      this.phoneChange=this.phoneChange.bind(this)
+      this.detailChange=this.detailChange.bind(this)
+      this.codeChange=this.codeChange.bind(this)
+      this.submit=this.submit.bind(this)
+  }
+  nameChange(e){
+    console.log(e)
+    this.setState({
+      name:e
+    })
+  }
+
+  phoneChange(e){
+    console.log(e)
+    this.setState({
+      phone:e
+    })
+  }
+
+  detailChange(e){
+    console.log(e)
+    this.setState({
+      detail:e
+    })
+  }
+  codeChange(e){
+    console.log(e)
+    this.setState({
+      code:e
+    })
+  }
+
+  areaChange(e){
+    console.log('e',e)
+    console.log(district)
+
+    let provinceCode=e[0],cityCode=e[0],areCode=e[0]
+    let province='',city='',area=''
+
+    district.map((item)=>{
+      if(item.value===provinceCode){
+        console.log('province',item)
+        province=item.label
+        item.children.map((item)=>{
+          if(item.value===cityCode){
+            console.log('city',item)
+            city=item.label
+            item.children((item)=>{
+              if(item.value===areCode){
+                console.log('area',item)
+                area=item.label
+              }
+              return 0
+            })
+          }
+          return 0
+        })
+      }
+      return 0
+    })
+
+    console.log(province+city+area)
+
+
+  }
+
+  submit(){
+    let data={
+      "address": this.state.detail,
+      "area": "",
+      "city": "",
+      "default":0,
+      "id": new Date().getTime()+parseInt(Math.random(),10),
+      "postcode": this.state.code,
+      "province": "",
+      "telephone": this.state.phone,
+      "updatedAt": "",
+      "user_id": APPID,
+      "username": this.state.name
+    }
+    //console.log(this.props)
+    this.props.createUserAddress(data)
   }
 
   trigger(){
@@ -28,40 +120,53 @@ export default class FormAddress extends Component {
   render() {
     //const { getFieldProps } = this.props.form;
     return (
-      <form>
-      <List renderHeader={''}>
-      <InputItem
-        placeholder="姓名" 
-        type="bankCard"
-      >收货人</InputItem>
-      <InputItem
-        type="phone"
-        placeholder="手机号码"
-      >手机号码</InputItem>
-      <InputItem
-        editable={false}
-        type="password"
-        placeholder="点击选择地区"
-        extra={'>'}
-        onClick={this.trigger}
-      >选择地区</InputItem>
-      <InputItem
-        type="number"
-        placeholder="详细地址"
-      >详细地址</InputItem>
-      <InputItem
-        type="digit"
-        placeholder="邮编"
-      >邮编</InputItem>
-    </List>
-        <div className='pickerWrap' style={this.state.areaShow ? {}:{display:"none"}}>
-            <PickerView
-                data={province}
-                value={['02', '02-1', '02-1-1']}
-                onChange={(e)=>{console.log(e)}}
-            />
-        </div>
-      </form>
+      <div>
+        <form>
+          <List renderHeader={''} >
+            <InputItem
+              placeholder="姓名" 
+              value={this.state.name}
+              onChange={(e)=>{this.nameChange(e)}}
+            >收货人</InputItem>
+            <InputItem
+              type="phone"
+              placeholder="手机号码"
+              value={this.state.phone}
+              onChange={(e)=>{this.phoneChange(e)}}
+            >手机号码</InputItem>
+
+            <div className='pickerWrap' style={this.state.areaShow ? {}:{display:""}}>
+              <List style={{ backgroundColor: 'white' }} className="picker-list">
+                <Picker extra="请选择(可选)"
+                  data={district}
+                  title="Areas"
+                  onOk={e => console.log('ok', e)}
+                  onDismiss={e => this.areaChange(e)}
+                  onPickerChange={e=> this.areaChange(e)}
+                  indicatorStyle={{position:"absolute",bottom:"0",left:"0"}}
+                >
+                  <List.Item arrow="horizontal">点击选择地区:{this.state.area}</List.Item>
+                </Picker>
+              </List>
+            </div>
+            <InputItem
+              placeholder="详细地址"
+              value={this.state.detail}
+              onChange={(e)=>{this.detailChange(e)}}
+            >详细地址</InputItem>
+            <InputItem
+              type="number"
+              placeholder="邮编"
+              value={this.state.code}
+              maxLength={6}
+              onChange={(e)=>{this.codeChange(e)}}
+            >邮编</InputItem>
+          </List>
+          <Button type="primary" onClick={this.submit}>提交</Button><WhiteSpace />
+        </form>
+
+        
+      </div>
     )
   }
 }

src/case/ShopApp/src/components/OrderCenterPage/OrderCenterPage.jsx

@@ -5,11 +5,12 @@ import TabBarTop from './OrderTabTop'
 
 import './OrderCenterPage.css'
 
+import {PageContext} from '../../context/context'
 
 import {graphqls} from '../../api/graphql_request'
 import {getOrderByProps,getProductByProps,DELETE_ORDER,DELETE_ORDER_PRODUCT} from '../../api/graphql/order'
 
-export default class OrderCenterPage extends Component {
+class OrderCenterPage extends Component {
   constructor(props){
     super(props)
     this.state={
@@ -79,6 +80,8 @@ export default class OrderCenterPage extends Component {
 
   toPay(id){
     console.log('order_id',id)
+    this.props.changePage('order')
+    this.props.setOrderId(id,true)
   }
 
   tabChange(e){
@@ -118,3 +121,12 @@ export default class OrderCenterPage extends Component {
     )
   }
 }
+
+
+export default props=>{
+    return(
+        <PageContext.Consumer>
+            {(obj)=><OrderCenterPage {...props} {...obj}/>}
+        </PageContext.Consumer>
+    )
+}

src/case/ShopApp/src/components/OrderPage/OrederPage.jsx

@@ -54,8 +54,18 @@ class OrderPage extends React.Component{
         this.getAddress()
         if(this.props.fromShopCar){
             this.getCarByProps()
+        }else if(this.props.fromOrderCenter){
+            this.setState({
+                loading:false
+            })
+            let orderList=JSON.parse(sessionStorage.getItem('orderList'))
+            //过滤出选定id未支付订单
+            orderList=orderList.filter((item)=>{ return (item.id===this.props.order_id)})
+            console.log('orderList',orderList)
+
         }else{
-            this.props.getProductByIds.then((e)=>{
+            
+            this.props.getProductByIds(this.props.product_id).then((e)=>{
                 console.log('getProductByIds',e.productbyid)
                 this.setState({
                     products:[e.productbyid],
@@ -63,11 +73,30 @@ class OrderPage extends React.Component{
                     loading:false
                 })
             })
+            
         }
     }
 
+    /*
+        count: 5
+        createdAt: "2018-11-22 5:10:02"
+        deliveryTime: ""
+        id: "1542877802949"
+        orderLogistics_id: null
+        orderPay_id: null
+        orderProducts: [{…}]
+        orderShipFee: 0
+        orderStatus: "0"
+        orderTotalPay: 49.95
+        payTime: "2018-11-22 5:10:02"
+        productTotalPay: 49.95
+        updatedAt: ""
+        userAddress_id: {address: "彩虹家园1栋1601", updatedAt: "2018-11-15 4:41:06", telephone: "1322637947", default: 1, city: "合肥市", …}
+    */
+
     componentWillUnmount(){
         this.props.setFromShopCar(false)
+        this.props.setOrderId(false)
     }
 
     getCarByProps(){

src/case/ShopApp/src/components/ShopCarPage/ShopCarPage.jsx

@@ -35,16 +35,16 @@ class ShopCarPage extends Component{
                 shopCarCount+=item.count
                 return 1
             })
-            // console.log('sumPrice',sumPrice,'shopCarCount',shopCarCount)
-            // console.log('getShopCarByProps',response.userCartbyprops)
+
+            console.log('sumPrice',sumPrice,'shopCarCount',shopCarCount)
+            console.log('getShopCarByProps',response.userCartbyprops)
+            
             this.setState({
-                shopCarList:response.userCartbyprops,
+                /*shopCarList:response.userCartbyprops,*/
                 sumPrice,
                 shopCarCount,
                 loading:false
             })
-
-
         })
     }
 
@@ -60,7 +60,9 @@ class ShopCarPage extends Component{
     
     renderShopCarList(){
         return this.state.shopCarList||[].map((item,index)=>{
-            return <ShopCarCard car={item} key={index} deleteCarById={this.deleteCarById}/>
+
+            return <ShopCarCard car={item} key={item.id} deleteCarById={this.deleteCarById}/>
+            
         })
     }
     
@@ -69,7 +71,9 @@ class ShopCarPage extends Component{
             <div className="shopCarPage">
                 <ActivityIndicator toast text="loading" animating={this.state.loading}/>
                 <div className="ShopCarList">
-                   {this.renderShopCarList()} 
+                   
+                    {this.renderShopCarList()} 
+
                 </div>
                 <div className="footer">
                     <div className="message">合计: ￥{this.state.sumPrice}</div>