Merge branch 'master' of http://gogs.ioobot.com:6680/xy/online

src/case/ShopApp/src/App.js

@@ -1,14 +1,18 @@
 import React, { Component } from 'react';
 import './App.css';
+
+import {PageContext,NumContext} from './context/context'
+
 // import 'antd-mobile/dist/antd-mobile.css';
 import HomePage from './components/HomePage/HomePage'
 import ShopCarPage from './components/ShopCarPage/ShopCarPage'
-import UserPage from './components/UserPage/userPage'
-import {PageContext,NumContext} from './context/context'
+import UserPage from './components/UserPage/UserPage'
 import NavBars from './components/App/NavBar'
 import TabBarBottom from './components/App/TabBarBottom'
 import ProductDetail from './components/ProductDetailPage/ProductDetail'
 import OrderPage from './components/OrderPage/OrederPage'
+import OrderCenterPage from './components/OrderCenterPage/OrderCenterPage'
+import AddressPage from './components/AddressPage/AddressPage'
 
 import {graphqls} from './api/graphql_request'
 import {getProductById,getProductByProps} from './api/graphql/product'
@@ -65,55 +69,76 @@ class ShopApp extends Component {
   renderPage(page=""){
     console.log('renderPage',page)
     const setNum=this.setNum.bind(this)
-    if(page==='detail'){
-      return(
-        <div className="pageWrap">
-          <ProductDetail product_id={this.state.product_id} setNum={setNum} />
-        </div>
-        )
-    }else if(page==='order'){
-      return(
-        <div className="pageWrap">
-        <OrderPage product={this.getProductByIds()} num={this.state.num}/>
-        </div>)
-    }else if(page==='index'){
-      console.log('index 渲染了')
-      return(
-        <div>
-          <div className="pageWrap indexPage">
-            <HomePage changePage={this.changePage}/>
-          </div>
-          <TabBarBottom changePage={this.changePage}/>
-        </div>
-        )
-    }
-    else if(page==='shopCar'){
-      console.log('shopCar 渲染了')
-      return(
-        <div>
+
+    switch(page){
+      case ('detail'):
+        return(
           <div className="pageWrap">
-            <ShopCarPage />
+            <ProductDetail product_id={this.state.product_id} setNum={setNum} />
           </div>
-          <TabBarBottom changePage={this.changePage}/>
-        </div>
-        )
-    }else if(page==='user'){
-      console.log('user 渲染了')
-      return(
-        <div>
+          )
+  
+      case('order'):
+        return(
           <div className="pageWrap">
-          <UserPage />
+            <OrderPage product={this.getProductByIds()} num={this.state.num}/>
           </div>
-          <TabBarBottom changePage={this.changePage}/>
-        </div>
-        )
-    }else if(page==='addressList'){
-
-    }else if(page==='editAddress'){
-
+          )
+  
+      case('shopCar'):
+        console.log('shopCar 渲染了')
+        return(
+          <div>
+            <div className="pageWrap">
+              <ShopCarPage />
+            </div>
+            <TabBarBottom changePage={this.changePage}/>
+          </div>
+          )
+  
+      case('user'):
+        console.log('user 渲染了')
+        return(
+          <div>
+            <div className="pageWrap">
+            <UserPage changePage={this.changePage}/>
+            </div>
+            <TabBarBottom changePage={this.changePage}/>
+          </div>
+          )
+      case('index'):
+        console.log('index 渲染了')
+        return(
+          <div>
+            <div className="pageWrap indexPage">
+              <HomePage />
+            </div>
+            <TabBarBottom changePage={this.changePage}/>
+          </div>
+          )
+      case('orderCenter'):
+        console.log('orderCenter 渲染了')
+          return(
+            <div className="pageWrap">
+              <OrderCenterPage />
+            </div>
+          )
+      case('addressPage'):
+        console.log('addressPage 渲染了')
+          return(
+            <div className="pageWrap">
+              <AddressPage />
+            </div>
+          )
+      default:
+        console.log('页面显示错误')
+        return (<div>页面显示错误</div>)
+        //break
     }
   }
 
+
+
   console(page){
     this.console.log(page)
   }

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

@@ -0,0 +1,85 @@
+export const getOrderByProps=`query orderbyprops($deliveryTime: String, $updatedAt: String, $orderLogistics_id: ID, $payTime: String, $orderTotalPay: Float, $createdAt: String, $orderStatus: String, $userAddress_id: ID, $orderShipFee: Float, $count: Int, $user_id: ID, $productTotalPay: Float, $orderPay_id: ID) {
+    orderbyprops: order_by_props(deliveryTime: $deliveryTime updatedAt: $updatedAt orderLogistics_id: $orderLogistics_id payTime: $payTime orderTotalPay: $orderTotalPay createdAt: $createdAt orderStatus: $orderStatus userAddress_id: $userAddress_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 getProductByProps=`query orderProductbyprops($remark: String, $updatedAt: String, $product_id: ID, $orderPay: Float, $createdAt: String, $order_id: ID, $count: Int, $productPay: Float, $user_id: ID) {
+    orderProductbyprops: orderProduct_by_props(remark: $remark updatedAt: $updatedAt product_id: $product_id orderPay: $orderPay createdAt: $createdAt order_id: $order_id count: $count productPay: $productPay user_id: $user_id) {
+        remark
+        updatedAt
+        product_id {
+            category
+            updatedAt
+            unit
+            name
+            createdAt
+            status
+            id
+            intro
+            price
+            img
+            stock
+        }
+        orderPay
+        createdAt
+        id
+        count
+        productPay
+    }
+}`

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

@@ -0,0 +1,22 @@
+export const getUserByProps=`query userbyprops($openid: String, $username: String, $password: String, $telephone: String, $email: String, $userData_id: ID, $createdAt: String, $updatedAt: String) {
+    userbyprops: user_by_props(openid: $openid username: $username password: $password telephone: $telephone email: $email userData_id: $userData_id createdAt: $createdAt updatedAt: $updatedAt) {
+        email
+        updatedAt
+        password
+        telephone
+        username
+        createdAt
+        openid
+        id
+        userData_id {
+            id
+            nickname
+            avatar
+            isVip
+            vipCode
+            userPoint
+            createdAt
+            updatedAt
+        }
+    }
+}`

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

@@ -0,0 +1,11 @@
+import React, { Component } from 'react'
+
+export default class AddressPage extends Component {
+  render() {
+    return (
+      <div>
+        addresspage
+      </div>
+    )
+  }
+}

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

@@ -14,7 +14,7 @@ export default class NavBars extends Component{
                             <NavBar
                             mode="dark"
                             icon={<Icon type="left" />}
-                            onLeftClick={() => changePage('index','')}
+                            onLeftClick={() =>  changePage('index')}
                             rightContent={[
                                 <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
                                 <Icon key="1" type="ellipsis" />,

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

@@ -0,0 +1,38 @@
+import React, { Component } from 'react'
+import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
+
+import ProductCard from './ProductCard'
+
+export default class OrderCard extends Component {
+  toPay(){
+
+  }
+  render() {
+    const order=this.props.order||[]
+    console.log('这里是orderCard')
+    return (
+      <div>
+        <WingBlank size="lg">
+            <WhiteSpace size="lg" />
+                <Card>
+                    <Card.Header
+                    title={<span className="titleWrap"><span>{'订单号:'+order.id}</span><span>{order.createdAt}</span></span>}
+                    extra={<span>支付状态:{order.orderStatus==='0'?'未支付':'已支付'}</span>}
+                    />
+                    <Card.Body>
+                    <div className="OrderProductList">
+                        {
+                            (order.orderProducts||[]).map((item)=>{
+                                return (<ProductCard key={item.id} />)
+                            })
+                        }
+                    </div>
+                    </Card.Body>
+                    <Card.Footer content="" extra={<div>{order.orderStatus==='0'?<button onClick={this.toPay.bind(this)}>去支付</button>:''}</div>} />
+                </Card>
+            <WhiteSpace size="lg" />
+        </WingBlank>
+      </div>
+    )
+  }
+}

src/case/ShopApp/src/components/OrderCenterPage/OrderCenterPage.css

@@ -0,0 +1,15 @@
+
+.headTitle{
+    text-align: center;
+    padding: 5px 0;
+    font-size: 15px;
+    font-weight: bold;
+}
+.orderList *{
+    font-size: 12px;
+}
+
+.titleWrap{
+    display: flex;
+    flex-direction: column;
+}

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

@@ -0,0 +1,59 @@
+import React, { Component } from 'react'
+import OrderCard from './OrderCard'
+import './OrderCenterPage.css'
+
+
+import {graphqls} from '../../api/graphql_request'
+import {getOrderByProps,getProductByProps} from '../../api/graphql/order'
+
+export default class OrderCenterPage extends Component {
+  constructor(props){
+    super(props)
+    this.state={
+        orderList:[]
+    }
+  }
+
+  componentDidMount(){
+      this.getOrder()
+  }
+  //获取订单，并根据订单id获取订单产品信息，之后重构数据结构
+  getOrder(){
+    let user_id=sessionStorage.getItem('openid')
+    graphqls(getOrderByProps,{user_id}).then((res)=>{
+        //console.log(res.orderbyprops)
+        let orderArr=res.orderbyprops
+        for(let i=0;i<orderArr.length;i++){
+            //根据order_id获取订单产品信息,可以优化,可以只发出一次请求获取所有订单产品信息之后再经行处理
+            graphqls(getProductByProps,{order_id:orderArr[i].id}).then((res)=>{
+                //console.log('order_id',orderArr[i].id)
+                //console.log('getProductByProps',res)
+                orderArr[i].orderProducts=res.orderProductbyprops
+
+                if(i===orderArr.length-1){
+                    console.log('----order-----',orderArr)
+                    this.setState({
+                        orderList:orderArr
+                    })
+                }
+            })
+        }
+    })
+  }
+
+  render() {
+    const orderList=this.state.orderList||[]
+    return (
+      <div>
+      <div className="headTitle">订单列表</div>
+       <div className="orderList">
+        {
+            orderList.map((item)=>{
+                return(<OrderCard order={item} key={item.id}/>)
+            })
+        }
+       </div>
+      </div>
+    )
+  }
+}

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

@@ -0,0 +1,30 @@
+import React, { Component } from 'react'
+import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
+
+
+
+export default class ProductCard extends Component {
+  render() {
+    //console.log('productCard------------',this.props)
+    console.log('这里是productCard')
+    return (
+      <div>
+        <WingBlank size="lg">
+            <WhiteSpace size="lg" />
+                <Card>
+                    <Card.Header
+                    title="This is title"
+                    thumb="https://gw.alipayobjects.com/zos/rmsportal/MRhHctKOineMbKAZslML.jpg"
+                    extra={<span>this is extra</span>}
+                    />
+                    <Card.Body>
+                    <div>This is content of `Card`</div>
+                    </Card.Body>
+                    <Card.Footer content="footer content" extra={<div>extra footer content</div>} />
+                </Card>
+            <WhiteSpace size="lg" />
+        </WingBlank>
+      </div>
+    )
+  }
+}

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

@@ -11,8 +11,7 @@ export default class Card extends Component{
             product:props.product
         }
     }
-
-
+    
     componentWillReceiveProps(props){
         console.log('cardProps',props)
         this.setState({

src/case/ShopApp/src/components/ShopCarPage/ShopCarPage.css

@@ -28,7 +28,7 @@
 
 .footer .message{
     flex-basis: 200px;
-    padding: 10px 0;
+    padding: 15px 0;
     text-align: center;
     background: #f18e47;
     color: #ffffff;
@@ -37,6 +37,7 @@
 .footer .toPay{
     flex-grow: 1;
     color: #ffffff;
-    padding: 10px 0;
+    padding: 15px 0;
     text-align: center;
+    border: none;
 }

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

@@ -24,8 +24,9 @@ class ShopCarPage extends Component{
         const user_id=sessionStorage.getItem('openid')
         graphqls(getShopCarByProps,{user_id}).then((response)=>{
             let sumPrice=0,shopCarCount=0;
-
-            response.userCartbyprops.map((item)=>{
+            //請求失敗,默认空数组
+            
+            (response.userCartbyprops||[]).map((item)=>{
                 sumPrice+=item.count*item.product_id.price
                 shopCarCount+=item.count
                 return 1
@@ -55,7 +56,7 @@ class ShopCarPage extends Component{
                 </div>
                 <div className="footer">
                     <div className="message">合计: ￥{this.state.sumPrice}</div>
-                    <div className="toPay">去支付</div>
+                    <button className="toPay">去支付</button>
                 </div>
             </div>
         )

src/case/ShopApp/src/components/UserPage/Head.css

@@ -0,0 +1,15 @@
+.head{
+    height: 100px;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.head .avatar{
+    border-radius: 50%;
+}
+
+.nickName{
+    font-weight: bold;
+}

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

@@ -0,0 +1,16 @@
+import React, { Component } from 'react'
+import './Head.css'
+
+export default class Head extends Component {
+  render() {
+    console.log(this.props)
+    const user=this.props.user?this.props.user[0]:{username:'旺仔小馒头'}
+    return (
+      <div className="head">
+        <img className="avatar" src={user.img||'https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user_s.svg'} alt="head" width="50px" height="50px"/>
+        <div className="nickName">{user.username}</div>
+      </div>
+    )
+  }
+}
+

src/case/ShopApp/src/components/UserPage/UserPage.css

@@ -0,0 +1,52 @@
+.UserPageWrap{
+    position: relative;
+    z-index: 3;
+    height: 100%;
+    padding: 0 5px;
+}
+
+.UserPageWrap *{
+    font-size: 12px;
+}
+
+.headerWrap{
+    margin-top: 50px;
+}
+
+
+.toWrap{
+    margin-top: 95px;
+}
+.toOrderCenter, .toAddressCenter{
+    box-sizing: border-box;
+    border-top: 1px solid #cccccc;
+    border-bottom: 1px solid #cccccc;
+    display: flex;
+    margin: 10px 5px;
+}
+
+
+.toOrderCenter span,.toAddressCenter span{
+    padding: 5px 0;
+}
+.toOrderCenter span:nth-child(1) ,.toOrderCenter span:nth-child(3) ,.toAddressCenter span:nth-child(1),.toAddressCenter span:nth-child(3){
+    flex-basis: 16px;
+}
+
+.toOrderCenter span:nth-child(1){
+    background: url('https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/order.svg') no-repeat center center;
+}
+.toAddressCenter span:nth-child(1){
+    background: url('https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/address.svg') no-repeat center center;
+}
+
+
+.toOrderCenter span:nth-child(3) ,.toAddressCenter span:nth-child(3){
+    background: url('https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/right.svg') no-repeat center center;
+    /* background-size: cover; */
+}
+
+.toOrderCenter span:nth-child(2) ,.toAddressCenter span:nth-child(2){
+    flex-grow: 1;
+    text-align: center;
+}

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

@@ -1,4 +1,12 @@
 import React, { Component } from 'react';
+import Head from './Head'
+
+import {graphqls} from '../../api/graphql_request'
+import {getUserByProps} from '../../api/graphql/user'
+
+
+import './UserPage.css'
+
 
 class UserPage extends Component{
     constructor(props){
@@ -8,9 +16,35 @@ class UserPage extends Component{
         }
     }
 
+    componentDidMount(){
+        this.getUser()
+    }
+    getUser(){
+        let openid=sessionStorage.getItem('openid')
+        graphqls(getUserByProps,{openid}).then((res)=>{
+            //console.log(res.userbyprops)
+            this.setState({
+                user:res.userbyprops
+            })
+        })
+    }
+
+    
+
     render(){
         return(
-            <div>UserPage</div>
+            <div className="UserPageWrap">
+                <div className="headerWrap">
+                    <Head user={this.state.user}/></div>
+                <div className="toWrap">
+                    <div className='toOrderCenter' onClick={()=>this.props.changePage('orderCenter')}>
+                        <span></span><span>我的订单</span><span></span>
+                    </div>
+                    <div className='toAddressCenter' onClick={()=>this.props.changePage('addressPage')}>
+                        <span></span><span>我的地址</span><span></span>
+                    </div>
+                </div>
+            </div>
         )
     }
 }