更改订单列表卡片样式

src/case/ShopApp/src/App.css

@@ -36,9 +36,6 @@ p.p1,p.p2,p.p3{
 .pageWrap{
     margin-top: 45px;
     background: #ffffff;
-    /*border: 2px solid red;*/
-    height: 430px;
-    overflow: auto
 }
 
 
@@ -51,5 +48,9 @@ div.am-modal-wrap {
     margin-left: 200px;
 }
 
+div.am-activity-indicator-content,.am-activity-indicator.am-activity-indicator-toast{
+    position: absolute !important;
+}
+
 
 

src/case/ShopApp/src/components/Common/Status.jsx

@@ -0,0 +1,6 @@
+import React from 'react'
+import { ActivityIndicator } from 'antd-mobile';
+
+export const Loading=(text,show)=>{
+    return(<ActivityIndicator toast text={text} animating={show}/>)
+}

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

@@ -1,3 +1,4 @@
+//封装Toast
 import React, { Component } from 'react'
 import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
 
@@ -8,8 +9,3 @@ export const successToast=(message,time)=> {
 export const failToast=(message,time)=> {
   Toast.fail(message, time);
 }
-
-
-
-
-

src/case/ShopApp/src/components/HomePage/HomePage.css

@@ -8,6 +8,6 @@
     -webkit-overflow-scrolling: touch;
     overflow-x: scroll;
     white-space: nowrap;
-    height: 450px;
+    height: 300px;
 }
 

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

@@ -1,5 +1,5 @@
 import React, { Component } from 'react';
-
+import { ActivityIndicator } from 'antd-mobile';
 import Search from './Search'
 import TabBarTop from './TabBarTop'
 import Cards from './Cards'
@@ -17,7 +17,8 @@ class HomePage extends Component{
         this.state={
             tabs:[],
             products:[],
-            select:'所有果品'
+            select:'所有果品',
+            loading:true
         }
     }
 
@@ -40,7 +41,8 @@ class HomePage extends Component{
           tabs:[{title: '所有果品'},...tabs],
           products:products,
           select:'所有果品',
-          detail:'false'
+          detail:'false',
+          loading:false
         })
         sessionStorage.setItem("products",JSON.stringify(products))
         })
@@ -80,6 +82,7 @@ class HomePage extends Component{
         }else{
             return(
                 <div>
+                    <ActivityIndicator toast text="loading" animating={this.state.loading}/>
                     <Search getProductByName={this.getGoods.bind(this)}/>
                     <TabBarTop tabs={this.state.tabs} tabChange={this.tabChange.bind(this)}/>
                     <div className="productList">

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

@@ -4,6 +4,14 @@
     padding: 5px 0;
     font-size: 15px;
     font-weight: bold;
+    border-bottom: 2px solid rgba(0, 0, 0, 0.65);
+}
+
+.orderList{
+    -webkit-overflow-scrolling: touch;
+    overflow-x: scroll;
+    white-space: nowrap;
+    height: 455px;
 }
 .orderList *{
     font-size: 12px;
@@ -12,4 +20,15 @@
 .titleWrap{
     display: flex;
     flex-direction: column;
+}
+
+
+
+.orderList  .am-card:not(.am-card-full){
+    border: none !important;
+}
+
+
+.am-card-header{
+    border-bottom: 1px solid rgba(0, 0, 0, 0.2);
 }

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

@@ -1,5 +1,6 @@
 import React, { Component } from 'react'
 import OrderCard from './OrderCard'
+import { ActivityIndicator } from 'antd-mobile';
 import './OrderCenterPage.css'
 
 
@@ -10,7 +11,8 @@ export default class OrderCenterPage extends Component {
   constructor(props){
     super(props)
     this.state={
-        orderList:[]
+        orderList:[],
+        loading:true
     }
   }
 
@@ -33,7 +35,8 @@ export default class OrderCenterPage extends Component {
                 if(i===orderArr.length-1){
                     //console.log('----orderList-----',orderArr)
                     this.setState({
-                        orderList:orderArr
+                        orderList:orderArr,
+                        loading:false
                     })
                 }
             })
@@ -45,6 +48,7 @@ export default class OrderCenterPage extends Component {
     const orderList=this.state.orderList||[]
     return (
       <div>
+      <ActivityIndicator toast text="loading" animating={this.state.loading}/>
       <div className="headTitle">订单列表</div>
        <div className="orderList">
         {

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

@@ -1,5 +1,5 @@
 import React from 'react'
-import { Icon, Grid } from 'antd-mobile';
+import {ActivityIndicator} from 'antd-mobile';
 import {PageContext} from '../../context/context'
 import OrderCard from './OrderCard'
 
@@ -30,7 +30,8 @@ class OrderPage extends React.Component{
             address:{},
             products:[],
             shopCarList:[],
-            sumPrice:''
+            sumPrice:'',
+            loading:true
         }
         //this.toPay=this.toPay.bind(this)
         this.createOrder=this.createOrder.bind(this)
@@ -58,7 +59,8 @@ class OrderPage extends React.Component{
                 console.log('getProductByIds',e.productbyid)
                 this.setState({
                     products:[e.productbyid],
-                    sumPrice:this.props.num*e.productbyid.price
+                    sumPrice:this.props.num*e.productbyid.price,
+                    loading:false
                 })
             })
         }
@@ -83,7 +85,8 @@ class OrderPage extends React.Component{
             this.setState({
                 shopCarList:response.userCartbyprops,
                 sumPrice,
-                num
+                num,
+                loading:false
             })
         })
     }
@@ -108,7 +111,7 @@ class OrderPage extends React.Component{
         const payTime=new Date().toLocaleString('chinese', { hour12: false })
         this.createOrder(status,payTime) 
        
-        console.log('status',status)
+        //console.log('status',status)
     }
     createOrder(orderStatus,payTime){
         console.log('創造order')
@@ -224,6 +227,7 @@ class OrderPage extends React.Component{
         const num =this.state.num
         return(
             <div className="orderWrap">
+                <ActivityIndicator toast text="loading" animating={this.state.loading}/>
                 <div className="addressWrap">
                     <List>
                         <Item

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

@@ -7,7 +7,7 @@ import {graphqls} from '../../api/graphql_request'
 import {createShopCar} from '../../api/graphql/shopCar'
 import {PageContext} from '../../context/context'
 
-import {successToast,failToast} from '../Toast/Toast'
+import {successToast,failToast} from '../Common/Toast'
 
 
 

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

@@ -2,6 +2,8 @@ import React, { Component } from 'react';
 import Card from './Card'
 import './ProductDetail.css'
 
+import {ActivityIndicator} from 'antd-mobile';
+
 import UserAction from './UserAction'
 
 import {graphqls} from '../../api/graphql_request'
@@ -12,7 +14,8 @@ export default class ProductDetail extends Component{
     constructor(props){
         super(props)
         this.state={
-            product:{}
+            product:{},
+            loading:true
         }
     }
 
@@ -32,6 +35,7 @@ export default class ProductDetail extends Component{
     render(){
         return(
             <div className="detailWrap">
+                <ActivityIndicator toast text="loading" animating={this.state.loading}/>
                <Card product={this.state.product}/>
                <UserAction product={this.state.product} setNum={this.props.setNum} />
             </div>

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

@@ -1,7 +1,7 @@
 import React, { Component } from 'react';
 import ShopCarCard from './ShopCarCard'
 import {PageContext} from '../../context/context'
-
+import {ActivityIndicator} from 'antd-mobile';
 import './ShopCarPage.css'
 import {graphqls} from '../../api/graphql_request'
 import {getShopCarByProps,deleteCarByProps,} from '../../api/graphql/shopCar'
@@ -12,7 +12,8 @@ class ShopCarPage extends Component{
         this.state={
             shopCarList:[],
             sumPrice:0,
-            shopCarCount:0
+            shopCarCount:0,
+            loading:true
         }
         this.renderShopCarList=this.renderShopCarList.bind(this)
         this.deleteCarById=this.deleteCarById.bind(this)
@@ -39,8 +40,11 @@ class ShopCarPage extends Component{
             this.setState({
                 shopCarList:response.userCartbyprops,
                 sumPrice,
-                shopCarCount
+                shopCarCount,
+                loading:false
             })
+
+
         })
     }
 
@@ -54,9 +58,8 @@ class ShopCarPage extends Component{
     }
 
     
-
     renderShopCarList(){
-        return this.state.shopCarList.map((item,index)=>{
+        return this.state.shopCarList||[].map((item,index)=>{
             return <ShopCarCard car={item} key={index} deleteCarById={this.deleteCarById}/>
         })
     }
@@ -64,6 +67,7 @@ class ShopCarPage extends Component{
     render(){
         return(
             <div className="shopCarPage">
+                <ActivityIndicator toast text="loading" animating={this.state.loading}/>
                 <div className="ShopCarList">
                    {this.renderShopCarList()} 
                 </div>
@@ -72,9 +76,11 @@ class ShopCarPage extends Component{
                     <button 
                     className="toPay" 
                     onClick={()=>{
-                        this.props.changePage('order')
-                        this.props.setFromShopCar(true)
-                        //this.deleteAllShopCar()
+                        if(this.state.shopCarList.length>0){
+                            this.props.changePage('order')
+                            this.props.setFromShopCar(true)
+                            //this.deleteAllShopCar()
+                        }
                     }}
                     >去支付</button>
                 </div>