完善訂單頁面增加创建订单函数

package-lock.json

@@ -1370,6 +1370,11 @@
         }
       }
     },
+    "antd-mobile-demo-data": {
+      "version": "0.2.0",
+      "resolved": "http://registry.npm.taobao.org/antd-mobile-demo-data/download/antd-mobile-demo-data-0.2.0.tgz",
+      "integrity": "sha1-BJcx3DxIxCYDGF5DOHJIeSJMhEI="
+    },
     "anymatch": {
       "version": "2.0.0",
       "resolved": "http://registry.npm.taobao.org/anymatch/download/anymatch-2.0.0.tgz",

package.json

@@ -7,6 +7,7 @@
     "@svgr/webpack": "2.4.1",
     "antd": "^3.10.3",
     "antd-mobile": "^2.2.6",
+    "antd-mobile-demo-data": "^0.2.0",
     "apollo-boost": "^0.1.19",
     "axios": "^0.18.0",
     "babel-core": "7.0.0-bridge.0",

src/case/ShopApp/src/App.js

@@ -26,16 +26,18 @@ class ShopApp extends Component {
     this.state={
       page:'index',
       product_id:'',
-      num:1
+      num:1,
+      editAddress:false
     }
     this.changePage=this.changePage.bind(this)
+    this.triggerAddress=this.triggerAddress.bind(this)
   }
 
   componentWillMount(){
     sessionStorage.setItem("openid","ovtkn4zONC3IzhpykQ7cSLZ85YFg")
     this.getGoods()
   }
-
+  //获取数据
   getGoods(variables={}){
     return graphqls(getProductByProps,variables).then((data)=>{
     console.log("data",data)
@@ -44,15 +46,10 @@ class ShopApp extends Component {
     })
   }
 
-  setNum(num){
-    console.log('num',num)
-    this.setState({num})
-  }
-
   getProductByIds(){
     return graphqls(getProductById,{id:this.state.product_id}).then(e=>e)
   }
-
+  //显示页面，控制子页面的显示
 
   changePage(page,product_id){
     console.log("onAppPage",page)
@@ -65,7 +62,19 @@ class ShopApp extends Component {
     }
   }
 
+  //传递给子组件的更改state的函数
+  triggerAddress(show){
+    this.setState({
+      editAddress:show
+    })
+  }
+
+  setNum(num){
+    console.log('num',num)
+    this.setState({num})
+  }
 
+  //根据条件渲染页面
   renderPage(page=""){
     console.log('renderPage',page)
     const setNum=this.setNum.bind(this)
@@ -127,7 +136,7 @@ class ShopApp extends Component {
         console.log('addressPage 渲染了')
           return(
             <div className="pageWrap">
-              <AddressPage />
+              <AddressPage address={{triggerAddress:this.triggerAddress,editAddress:this.state.editAddress}} />
             </div>
           )
       default:
@@ -143,9 +152,10 @@ class ShopApp extends Component {
 
   render() {
     const changePage=this.changePage
+    const triggerAddress=this.triggerAddress
     console.log('APPrender')
     return (
-      <PageContext.Provider value={changePage}>
+      <PageContext.Provider value={{changePage,triggerAddress}}>
           <div className="AppWrap">
             <div className="phone6s">
               <div className="App">

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

@@ -14,4 +14,31 @@ export const getAddressByProps =`query userAddressbyprops($address: String, $upd
         area
         province
     }
-}`
+}`
+
+export const createAddress=`mutation createuserAddress($address: String, $updatedAt: String, $telephone: String, $default: Int, $city: String, $username: String, $postcode: String, $createdAt: String, $deletedAt: String, $id: ID!, $user_id: ID, $area: String, $province: String) {
+    createuserAddress: create_userAddress(address: $address updatedAt: $updatedAt telephone: $telephone
+        default: $default city: $city username: $username postcode: $postcode createdAt: $createdAt deletedAt: $deletedAt id: $id user_id: $user_id area: $area province: $province) {
+        address
+        updatedAt
+        telephone
+        default
+        city
+        username
+        postcode
+        createdAt
+        deletedAt
+        id
+        user_id {
+            email
+            updatedAt
+            password
+            telephone
+            username
+            createdAt
+            openid
+            id
+        }
+        area
+        province
+    }`

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

@@ -76,6 +76,77 @@ export const getProductByProps=`query orderProductbyprops($remark: String, $upda
             img
             stock
         }
+        orderPay
+        createdAt
+        id
+        count
+        productPay
+    }
+}`
+
+export const createOrders=`mutation createorder($deliveryTime: String, $updatedAt: String, $orderLogistics_id: ID, $payTime: String, $orderTotalPay: Float, $createdAt: String, $orderStatus: String, $userAddress_id: ID, $id: ID!, $orderShipFee: Float, $count: Int, $user_id: ID, $productTotalPay: Float, $orderPay_id: ID) {
+    createorder: create_order(deliveryTime: $deliveryTime updatedAt: $updatedAt orderLogistics_id: $orderLogistics_id payTime: $payTime orderTotalPay: $orderTotalPay createdAt: $createdAt orderStatus: $orderStatus userAddress_id: $userAddress_id id: $id orderShipFee: $orderShipFee count: $count user_id: $user_id productTotalPay: $productTotalPay orderPay_id: $orderPay_id) {
+        deliveryTime
+        updatedAt
+        orderLogistics_id {
+            updatedAt
+            logisticsFee
+            expressId
+            createdAt
+            consigneeTel
+            id
+            consignAddress
+            LogisticsStatus
+            consigneeName
+        }
+        payTime
+        orderTotalPay
+        createdAt
+        orderStatus
+        userAddress_id {
+            address
+            updatedAt
+            telephone
+            default
+            city
+            username
+            postcode
+            createdAt
+            deletedAt
+            id
+            area
+            province
+        }
+        id
+        orderShipFee
+        count
+        user_id {
+            email
+            updatedAt
+            password
+            telephone
+            username
+            createdAt
+            openid
+            id
+        }
+        productTotalPay
+        orderPay_id {
+            id
+            totalPay
+            transactionId
+            payTime
+        }
+    }
+}`
+
+
+export const createOrderProducts=`mutation createorderProduct($remark: String, $updatedAt: String, $unit: Int, $product_id: ID, $orderPay: Float, $createdAt: String, $order_id: ID, $id: ID!, $count: Int, $productPay: Float, $user_id: ID) {
+    createorderProduct: create_orderProduct(remark: $remark updatedAt: $updatedAt unit: $unit product_id: $product_id orderPay: $orderPay createdAt: $createdAt order_id: $order_id id: $id count: $count productPay: $productPay user_id: $user_id) {
+        remark
+        updatedAt
+        unit
+      
         orderPay
         createdAt
         id

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

@@ -1,3 +1,9 @@
 .addressList *{
     font-size: 12px;
+}
+
+.addressPageWrap{
+    position: relative;
+    z-index: 3;
+    padding: 0 5px;
 }

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

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import RadioAddress from './RadioAddress'
+import EditAddress from './EditAddress'
 import './AddressPage.css'
 
 import {graphqls} from '../../api/graphql_request'
@@ -9,8 +10,10 @@ export default class AddressPage extends Component {
   constructor(props){
       super(props)
       this.state={
-        address:[]
+        addressList:[]
       }
+
+    console.log(props.address)
   }
 
   componentDidMount(){
@@ -22,24 +25,36 @@ export default class AddressPage extends Component {
     graphqls(getAddressByProps,{user_id}).then((res)=>{
         console.log(res.userAddressbyprops)
         this.setState({
-            address:res.userAddressbyprops
+          addressList:res.userAddressbyprops
         })
     })
   }
 
-
-  render() {
-    return (
-      <div>
-        <div className="addressWrap">
+  renderPage(page){
+    if(page===true){
+      return(<EditAddress address={this.props.address}/>)
+    }else{
+      return(
+        <div className="addressPageWrap">
+          <div className="addressWrap" onClick={()=>this.props.address.triggerAddress(true)}>
             <span></span>
             <span>新建地址</span>
             <span></span>
+          </div>
+          <div className="addressList">
+              <RadioAddress addressList={this.state.addressList} />
+          </div>
         </div>
-        <div className="addressList">
-            <RadioAddress address={this.state.address} />
-        </div>
-      </div>
+      )
+    }
+  }
+
+
+  render() {
+    return (
+      <div>{this.renderPage(this.props.address.editAddress)}</div>
     )
   }
+
+
 }

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

@@ -0,0 +1,42 @@
+import React, { Component } from 'react'
+import FormAddress from './FormAddress'
+
+import {graphqls} from '../../api/graphql_request'
+import {getAddressByProps,createAddress} from '../../api/graphql/address'
+
+export default class EditAddress extends Component {
+
+  componentDidMount(){
+    console.log('EditAddress mount')
+  }
+
+  componentWillUnmount(){
+    this.props.address.triggerAddress(false)
+  }
+
+  //创建用户地址
+
+  createUserAddress(){
+    let data={
+      "address": "",
+      "area": "",
+      "city": "",
+      "default":0,
+      "id": "",
+      "postcode": "",
+      "province": "",
+      "telephone": "",
+      "updatedAt": "",
+      "user_id": "",
+      "username": ""
+    }
+    graphqls(createAddress,data)
+  }
+  render() {
+    return (
+      <div>
+        <FormAddress />
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,9 @@
+.pickerWrap{
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    z-index: 10;
+    width: 100%;;
+    height: auto;
+    border: 1px solid #ccc;
+}

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

@@ -0,0 +1,67 @@
+import React, { Component } from 'react'
+
+import { List, InputItem, WhiteSpace ,Picker,PickerView} from 'antd-mobile';
+import { createForm } from 'rc-form';
+import './FormAddress.css'
+
+
+import {province} from './areaData'
+
+
+
+export default class FormAddress extends Component {
+  constructor(props){
+      super(props)
+
+      this.state={
+          areaShow:false
+      }
+
+      this.trigger=this.trigger.bind(this)
+  }
+
+  trigger(){
+    this.setState({
+        areaShow:!this.state.areaShow
+    })
+  }
+  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>
+    )
+  }
+}

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

@@ -17,10 +17,10 @@ export default class RadioAddress extends Component{
       };
     
       render() {
-        let address=this.props.address    
+        let addressList=[...this.props.addressList]   
         return (<div>
           <List renderHeader={() => ''}>
-            {address.map(item => (
+            {addressList.map(item => (
               <RadioItem key={item.id} checked={item.default === 1} onChange={() => this.onChange()}>
                 {item.address}
               </RadioItem>

src/case/ShopApp/src/components/AddressPage/areaData.js

@@ -0,0 +1,82 @@
+export const province = [
+    {
+      label: '北京',
+      value: '01',
+      children: [
+        {
+          label: '东城区',
+          value: '01-1',
+        },
+        {
+          label: '西城区',
+          value: '01-2',
+        },
+        {
+          label: '崇文区',
+          value: '01-3',
+        },
+        {
+          label: '宣武区',
+          value: '01-4',
+        },
+      ],
+    },
+    {
+      label: '浙江',
+      value: '02',
+      children: [
+        {
+          label: '杭州',
+          value: '02-1',
+          children: [
+            {
+              label: '西湖区',
+              value: '02-1-1',
+            },
+            {
+              label: '上城区',
+              value: '02-1-2',
+            },
+            {
+              label: '江干区',
+              value: '02-1-3',
+            },
+            {
+              label: '下城区',
+              value: '02-1-4',
+            },
+          ],
+        },
+        {
+          label: '宁波',
+          value: '02-2',
+          children: [
+            {
+              label: 'xx区',
+              value: '02-2-1',
+            },
+            {
+              label: 'yy区',
+              value: '02-2-2',
+            },
+          ],
+        },
+        {
+          label: '温州',
+          value: '02-3',
+        },
+        {
+          label: '嘉兴',
+          value: '02-4',
+        },
+        {
+          label: '湖州',
+          value: '02-5',
+        },
+        {
+          label: '绍兴',
+          value: '02-6',
+        },
+      ],
+    },
+  ];

src/case/ShopApp/src/components/App/NavBar.jsx

@@ -8,7 +8,7 @@ export default class NavBars extends Component{
     render(){
         return(
             <PageContext.Consumer>
-                {(changePage)=>{
+                {({changePage})=>{
                     return (
                         <div className="navBars">
                             <NavBar

src/case/ShopApp/src/components/HomePage/Cards.jsx

@@ -25,7 +25,7 @@ class Cards extends Component{
             //console.log(item)
             return (
                 <PageContext.Consumer key={index} >
-                    {(changePage)=>{
+                    {({changePage})=>{
                         return(
                             <WingBlank size="lg" className="Card">
                             <WhiteSpace size="lg" />

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

@@ -3,9 +3,13 @@ import { Icon, Grid } from 'antd-mobile';
 import {PageContext} from '../../context/context'
 import OrderCard from './OrderCard'
 
+
+
+
 import {graphqls} from '../../api/graphql_request'
 import {getProductById} from '../../api/graphql/product'
 import {getAddressByProps} from '../../api/graphql/address'
+import {createOrders,createOrderProducts} from '../../api/graphql/order'
 
 import './OrederPage.css'
 
@@ -18,6 +22,9 @@ class OrderPage extends React.Component{
             address:{},
             product:{}
         }
+        //this.toPay=this.toPay.bind(this)
+        this.createOrder=this.createOrder.bind(this)
+        
     }
     //获取默认地址
     getAddress(){
@@ -39,22 +46,93 @@ class OrderPage extends React.Component{
             })
         })
     }
+
     
+
+    createOrder(){
+        console.log('創造order')
+        let that =this,
+        orderStatus=1,
+        sumPrice=this.state.num*this.state.product.price,
+        payTime="2019/12/31 12:30:56"
+        //{orderStatus,payTime}=data
+
+        let id=new Date().getTime()+parseInt(Math.random(),10),
+           openid=sessionStorage.getItem('openid')
+        let orderData = {
+            "count": that.state.num,
+            "createdAt": new Date().toLocaleDateString()+' '+new Date().toLocaleTimeString().slice(2),
+            "deliveryTime": "",
+            "id": id,
+            "orderLogistics_id": "",
+            "orderPay_id": "",
+            "orderShipFee": 0,
+            "orderStatus": orderStatus,
+            "orderTotalPay": sumPrice,
+            "payTime": payTime,
+            "productTotalPay": sumPrice,
+            "updatedAt": "",
+            "userAddress_id": that.state.address.id,
+            "user_id": openid
+          }
+
+
+         graphqls(createOrders,orderData).then((e) => {
+            console.log('order创建订单成功', e)
+            that.createProductOrder(id)
+         })
+
+    }
+
+    createProductOrder(order_id){
+        
+        let that=this,openid=sessionStorage.getItem('openid')
+        let data={
+            "count": that.state.num,
+            "createdAt": new Date().toLocaleDateString()+' '+new Date().toLocaleTimeString().slice(2),
+            "id": new Date().getTime()+parseInt(Math.random(),10),
+            "orderPay": 0,
+            "order_id": order_id,
+            "productPay": that.state.product.price * that.state.num,
+            "product_id": that.state.product.id,
+            "remark": that.state.remark,
+            "unit": "100",
+            "updatedAt": "",
+            "user_id": openid
+        }
+        graphqls(createOrderProducts,data).then((e)=>{
+            console.log('orderProduct创建成功',e)
+        })
+    }
+
+    toPay(){
+        this.createOrder()
+    }
     render(){
         const address=this.state.address
         const product=this.state.product
         const num =this.state.num
         return(
             <div className="orderWrap">
-                <div className="addressWrap">
-                    <span></span>
-                    <span>{address.username+address.telephone+address.province+address.city+address.area+address.address}</span>
-                    <span></span>
-                </div>
+                <PageContext.Consumer>
+                    {({changePage,triggerAddress})=>{
+                        return(
+                            <div className="addressWrap" onClick={()=>{
+                                changePage('addressPage')
+                                triggerAddress(true)
+                            }}>
+                                <span></span>
+                                <span>{address.username+address.telephone+address.province+address.city+address.area+address.address}</span>
+                                <span></span>
+                            </div>
+                        )
+                    }}
+                </PageContext.Consumer>
+                
                 <OrderCard state={{...this.state}}/>
                 <div className="payResult">
                     <div>共计{num}件商品;合计 ￥ {num*product.price}</div>
-                    <div>立即支付</div>
+                    <div onClick={this.createOrder}>立即支付</div>
                 </div>
             </div>
             )

src/case/ShopApp/src/components/ProductDetailPage/ActionSheet.css

@@ -46,3 +46,9 @@
     background: red;
     right: 0;
 }
+
+
+div.am-toast{
+    margin-left: 100px;
+    margin-top: 10px;
+}

src/case/ShopApp/src/components/ProductDetailPage/ActionSheet.jsx

@@ -7,6 +7,8 @@ import {graphqls} from '../../api/graphql_request'
 import {createShopCar} from '../../api/graphql/shopCar'
 import {PageContext} from '../../context/context'
 
+import {successToast,failToast} from '../Toast/Toast'
+
 
 
 
@@ -54,9 +56,12 @@ class ActionSheets extends React.Component {
         user_id,
         product_id:this.props.product.id
       }
-      console.log(variable)
+      //console.log(variable)
 
-    graphqls(createShopCar,variable).then(e=>console.log(e))
+    graphqls(createShopCar,variable).then((e)=>{
+        //console.log(e)
+        successToast('加入购物车成功',1)
+    },()=>failToast('失败！请重试'))
   }
 
   render() {
@@ -70,7 +75,7 @@ class ActionSheets extends React.Component {
                     购买数量:<span onClick={this.add.bind(this)}>+</span><span>{this.state.num}</span><span onClick={this.minius.bind(this)}>-</span>
                 </div>
                 <PageContext.Consumer>
-                    {(changePage)=>{
+                    {({changePage})=>{
                         return(
                             <div className="buttonWraps">
                                 <button onClick={this.addCar}>加入购物车</button>
@@ -79,7 +84,7 @@ class ActionSheets extends React.Component {
                         )
                     }}
                 </PageContext.Consumer>
-
+                
             </div>
         </div>
     )

src/case/ShopApp/src/components/ProductDetailPage/UserAction.jsx

@@ -46,7 +46,7 @@ class UserAction extends Component{
 
 export default  props=> (
     <PageContext.Consumer>
-      {changePage => <UserAction {...props} changePage={changePage} />}
+      {({changePage}) => <UserAction {...props} changePage={changePage} />}
     </PageContext.Consumer>
   );
 

src/case/ShopApp/src/components/Toast/Success.jsx

@@ -1,21 +0,0 @@
-import React, { Component } from 'react'
-import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
-
-export default class Success extends Component {
-  
-
-  render() {
-    return (
-      <div>
-        <WingBlank>
-            <Button onClick={successToast}>success</Button>
-            <WhiteSpace />
-        </WingBlank>
-      </div>
-    )
-  }
-}
-
-
-
-

src/case/ShopApp/src/components/Toast/Toast.jsx

@@ -0,0 +1,15 @@
+import React, { Component } from 'react'
+import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
+
+
+export const successToast=(message,time)=> {
+  Toast.success(message, time);
+}
+export const failToast=(message,time)=> {
+  Toast.fail(message, time);
+}
+
+
+
+
+

src/case/ShopApp/src/components/UserPage/UserPage.jsx

@@ -19,6 +19,8 @@ class UserPage extends Component{
     componentDidMount(){
         this.getUser()
     }
+
+    
     getUser(){
         let openid=sessionStorage.getItem('openid')
         graphqls(getUserByProps,{openid}).then((res)=>{