完善shopCarPage

src/case/ShopApp/src/App.js

@@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import './App.css';
 // import 'antd-mobile/dist/antd-mobile.css';
 import HomePage from './components/HomePage/HomePage'
-import ShopCar from './components/ShopCarPage/shopCar'
+import ShopCarPage from './components/ShopCarPage/ShopCarPage'
 import UserPage from './components/UserPage/userPage'
 import {PageContext,NumContext} from './context/context'
 import NavBars from './components/App/NavBar'
@@ -52,7 +52,7 @@ class ShopApp extends Component {
 
   changePage(page,product_id){
     console.log("onAppPage",page)
-    
+
     if(product_id){
       this.setState({page,product_id})
     }else{
@@ -63,6 +63,7 @@ class ShopApp extends Component {
 
 
   renderPage(page=""){
+    console.log('renderPage',page)
     const setNum=this.setNum.bind(this)
     if(page==='detail'){
       return(
@@ -91,7 +92,7 @@ class ShopApp extends Component {
       return(
         <div>
           <div className="pageWrap">
-            <ShopCar />
+            <ShopCarPage />
           </div>
           <TabBarBottom changePage={this.changePage}/>
         </div>
@@ -106,20 +107,29 @@ class ShopApp extends Component {
           <TabBarBottom changePage={this.changePage}/>
         </div>
         )
-    }else{
+    }else if(page==='addressList'){
+
+    }else if(page==='editAddress'){
 
     }
   }
 
+  console(page){
+    this.console.log(page)
+  }
+
   render() {
     const changePage=this.changePage
+    console.log('APPrender')
     return (
       <PageContext.Provider value={changePage}>
           <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/shopCar.js

@@ -0,0 +1,35 @@
+export const getShopCarByProps=`query userCartbyprops($user_id: ID, $product_id: ID, $count: Int, $createdAt: String, $updatedAt: String) {
+    userCartbyprops: userCart_by_props(user_id: $user_id product_id: $product_id count: $count createdAt: $createdAt updatedAt: $updatedAt) {
+        id
+        user_id {
+            email
+            updatedAt
+            password
+            telephone
+            username
+            createdAt
+            openid
+            id
+        }
+        product_id {
+            category
+            updatedAt
+            unit
+            name
+            createdAt
+            status
+            id
+            intro
+            price
+            img
+            stock
+        }
+        count
+        createdAt
+        updatedAt
+    }
+}`
+
+export const deleteCarByProps=`mutation deleteuserCart($id: ID, $user_id: ID, $product_id: ID, $count: Int, $createdAt: String, $updatedAt: String) {
+    deleteuserCart: delete_userCart(id: $id user_id: $user_id product_id: $product_id count: $count createdAt: $createdAt updatedAt: $updatedAt)
+}`

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

@@ -28,7 +28,6 @@ export default class ProductDetail extends Component{
         this.getProduct()
     }
 
-    
     render(){
         return(
             <div>

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

@@ -29,7 +29,7 @@ class UserAction extends Component{
             return(
                 <div className="actionWrap">
                     <button className="service">客服</button>
-                    <button className="toCar" onClick={()=>this.props.changePage('shopCap')}>购物车</button>
+                    <button className="toCar" onClick={()=>this.props.changePage('shopCar')}>购物车</button>
                     <button className="addCar" onClick={this.triggerActionSheet}>加入购物车</button>
                     <button className="toPay" onClick={this.triggerActionSheet}>立即购买</button>
                 </div>

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

@@ -0,0 +1,17 @@
+.cardWrap{
+    display: flex;
+}
+
+.middle{
+    padding-left: 5px;
+    flex-grow: 1;
+    
+}
+
+.right{
+    flex-basis: 30px; 
+}
+
+.right button{
+    margin-top: 43px;
+}

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

@@ -0,0 +1,50 @@
+import React, { Component } from 'react'
+import { Card, WhiteSpace } from 'antd-mobile';
+import './ShopCarCard.css'
+import {graphqls} from '../../api/graphql_request'
+import {deleteCarByProps} from '../../api/graphql/shopCar'
+
+export default class ShopCarCard extends Component {
+  constructor(){
+    super()
+    this.deleteCarById=this.deleteCarById.bind(this)
+  }
+  //删除购物车
+  deleteCarById(id){
+    console.log(id)
+    graphqls(deleteCarByProps,{id}).then((e)=>console.log(e))
+  }
+  render() {
+    const car=this.props.car
+    return (
+      <div>
+        <WhiteSpace size="lg" />
+          <Card full>
+            <Card.Body>
+              <div className="cardWrap">
+                <img src={car.product_id.img} alt="img" width="100px" height="100px"/>
+                <div className="middle">
+                  <div>{car.product_id.name}</div>
+                  <div>{car.product_id.intro}</div>
+                </div>
+                <div className="right">
+                  <div>￥{car.product_id.price}</div>
+                  <div>x {car.count}</div>
+                 <button onClick={()=>{this.deleteCarById(car.id)}}>刪除</button>
+                </div>
+              </div>
+            </Card.Body>
+        </Card>
+      </div>
+    )
+  }
+}
+
+/*
+count: 3
+createdAt: "2018-12-31"
+id: "1542346970055"
+product_id: {category: "鲜果", updatedAt: "2018-12-31 11:11:11", unit: Array(3), name: "香蕉", createdAt: "2018-12-31 11:11:11", …}
+updatedAt: "2018-11-16 1:42:50"
+user_id: null
+*/

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

@@ -0,0 +1,42 @@
+*{
+    box-sizing: border-box;
+}
+
+.shopCarPage{
+    width: 100%;
+}
+    
+
+.ShopCarList{
+    position: relative;
+    z-index: 3;
+    -webkit-overflow-scrolling: touch;
+    overflow-x: scroll;
+    overflow-y: scroll;
+    white-space: nowrap;
+    height: 400px;
+}
+
+.footer{
+    position: absolute;
+    bottom: 45px;
+    width: 100%;
+    left: 0;
+    display: flex;
+    z-index: 4;
+}
+
+.footer .message{
+    flex-basis: 200px;
+    padding: 10px 0;
+    text-align: center;
+    background: #f18e47;
+    color: #ffffff;
+}
+
+.footer .toPay{
+    flex-grow: 1;
+    color: #ffffff;
+    padding: 10px 0;
+    text-align: center;
+}

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

@@ -0,0 +1,69 @@
+import React, { Component } from 'react';
+import ShopCarCard from './ShopCarCard'
+
+import './ShopCarPage.css'
+import {graphqls} from '../../api/graphql_request'
+import {getShopCarByProps} from '../../api/graphql/shopCar'
+
+class ShopCarPage extends Component{
+    constructor(props){
+        super(props)
+        this.state={
+            shopCarList:[],
+            sumPrice:0,
+            shopCarCount:0
+        }
+        this.renderShopCarList=this.renderShopCarList.bind(this)
+    }
+
+    componentDidMount(){
+        this.getCarByProps()
+    }
+    //获取购物车列表，并统计总价总数量
+    getCarByProps(){
+        const user_id=sessionStorage.getItem('openid')
+        graphqls(getShopCarByProps,{user_id}).then((response)=>{
+            let sumPrice=0,shopCarCount=0;
+
+            response.userCartbyprops.map((item)=>{
+                sumPrice+=item.count*item.product_id.price
+                shopCarCount+=item.count
+                return 1
+            })
+            // console.log('sumPrice',sumPrice,'shopCarCount',shopCarCount)
+
+            // console.log('getShopCarByProps',response.userCartbyprops)
+            this.setState({
+                shopCarList:response.userCartbyprops,
+                sumPrice,
+                shopCarCount
+            })
+        })
+    }
+
+    renderShopCarList(){
+        return this.state.shopCarList.map((item,index)=>{
+            return <ShopCarCard car={item} key={index}/>
+        })
+    }
+    
+    render(){
+        return(
+            <div className="shopCarPage">
+                <div className="ShopCarList">
+                   {this.renderShopCarList()} 
+                </div>
+                <div className="footer">
+                    <div className="message">合计: ￥{this.state.sumPrice}</div>
+                    <div className="toPay">去支付</div>
+                </div>
+            </div>
+        )
+    }
+}
+
+
+
+
+
+export default ShopCarPage

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

@@ -1,21 +0,0 @@
-import React, { Component } from 'react';
-
-class ShopCar extends Component{
-    constructor(props){
-        super(props)
-        this.state={
-            
-        }
-    }
-
-    render(){
-        return(
-            <div>ShopCar</div>
-        )
-    }
-}
-
-
-
-
-export default ShopCar