userPage finish

src/case/ShopApp/src/App.js

@@ -3,7 +3,7 @@ import './App.css';
 // 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 UserPage from './components/UserPage/UserPage'
 import {PageContext,NumContext} from './context/context'
 import NavBars from './components/App/NavBar'
 import TabBarBottom from './components/App/TabBarBottom'

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/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

@@ -55,7 +55,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,11 @@
 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 +15,33 @@ 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'>
+                    <span></span><span>我的订单</span><span></span>
+                    </div>
+                    <div className='toAddressCenter'>
+                        <span></span><span>我的地址</span><span></span>
+                    </div>
+                </div>
+            </div>
         )
     }
 }