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

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
 }
 
 
@@ -47,5 +44,13 @@ p.p1,p.p2,p.p3{
     z-index: 4;
 }
 
+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/App.js

@@ -81,7 +81,7 @@ class ShopApp extends Component {
   renderPage(page=""){
     console.log('renderPage',page)
     const setNum=this.setNum.bind(this)
-
+    
     switch(page){
       case ('detail'):
         return(

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

@@ -41,4 +41,22 @@ export const createAddress=`mutation createuserAddress($address: String, $update
         }
         area
         province
+    }`
+
+    export const updateAddress=`mutation updateuserAddress($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) {
+        updateuserAddress: update_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
+            area
+            province
+        }
     }`

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

@@ -1,19 +1,25 @@
 import React, { Component } from 'react'
 import RadioAddress from './RadioAddress'
 import EditAddress from './EditAddress'
+import { List } from 'antd-mobile';
 import './AddressPage.css'
 
 import {graphqls} from '../../api/graphql_request'
 import {getAddressByProps} from '../../api/graphql/address'
 
+
+const Item = List.Item;
+const Brief = Item.Brief;
+
 export default class AddressPage extends Component {
   constructor(props){
       super(props)
       this.state={
         addressList:[]
       }
-
     console.log(props.address)
+
+    this.getAddress=this.getAddress.bind(this)
   }
 
   componentDidMount(){
@@ -36,13 +42,17 @@ export default class AddressPage extends Component {
     }else{
       return(
         <div className="addressPageWrap">
-          <div className="addressWrap" onClick={()=>this.props.address.triggerAddress(true)}>
-            <span></span>
-            <span>新建地址</span>
-            <span></span>
+          <div  onClick={()=>this.props.address.triggerAddress(true)}>
+          <List>
+            <Item
+              thumb="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/positioning.svg"
+              arrow="horizontal"
+              onClick={() => {}}
+            >+新建地址</Item>
+          </List>
           </div>
           <div className="addressList">
-              <RadioAddress addressList={this.state.addressList} />
+              <RadioAddress addressList={this.state.addressList} getAddress={this.getAddress}/>
           </div>
         </div>
       )

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

@@ -1,32 +1,70 @@
 import React, { Component } from 'react';
-import { List, Radio, Flex, WhiteSpace } from 'antd-mobile';
+import { List } from 'antd-mobile';
+
 import './RadioAddress.css'
 
-const RadioItem = Radio.RadioItem;
+
+
+
+
+
+
+
+import {graphqls} from '../../api/graphql_request'
+import {updateAddress,getAddressByProps} from '../../api/graphql/address'
+
+
+
+const Item = List.Item;
+const Brief = Item.Brief;
 
 
 
 
 export default class RadioAddress extends Component{
+
+  onChange = (id) => {
+    console.log('id:',id)
+    this.updateAddress(id)
+  };
+
+  updateAddress=(id)=>{
+    let that=this
+    console.log('更新启动')
+    let user_id=sessionStorage.getItem('openid')
+    let data={id,default:1}
     
-      onChange = (value) => {
-        console.log('checkbox');
-        this.setState({
-         
-        });
-      };
-    
-      render() {
-        let addressList=[...this.props.addressList]   
-        return (<div>
-          <List renderHeader={() => ''}>
-            {addressList.map(item => (
-              <RadioItem key={item.id} checked={item.default === 1} onChange={() => this.onChange()}>
-                {item.address}
-              </RadioItem>
-            ))}
-          </List>
-
-        </div>);
-      }
+    graphqls(updateAddress,data).then((e)=>{
+      //更新address成功之後，重新獲取地址列表,
+      graphqls(getAddressByProps,{user_id}).then((res)=>{
+        console.log(res.userAddressbyprops)
+        res.userAddressbyprops.map((item)=>{
+          if(item.id!==id){
+            let data={id:item.id,default:0}
+            graphqls(updateAddress,data).then(e=>that.props.getAddress())
+          }
+          return 0
+        })
+     })
+    })
+  }
+
+  render() {
+    let addressList=[...this.props.addressList]   
+    return (
+      <div>
+        <List renderHeader={() => ''}>
+          {addressList.map(item => (
+            <List  key={item.id} onClick={()=>this.onChange(item.id)}>
+              <Item
+                thumb={item.default===1 ? "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png" : ''}
+                arrow="horizontal"
+                onClick={() => {}}
+              >{item.username+item.telephone+item.province+item.city+item.area+item.address}</Item>
+            </List>
+          ))}
+        </List>
+      </div>
+    );
+  }
 }

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import { Modal, Button, WhiteSpace, WingBlank, Toast } from 'antd-mobile';
+
+const alert = Modal.alert;
+
+export const dialog =(type,message)=>{
+    return new Promise((resolve,reject)=>{
+        alert(type, message, [
+            { text: '取消', onPress: () => {reject.call(null,0)}},
+            { text: '确认', onPress: () => {resolve.call(null,1)} },
+          ])
+    })
+}
+
+

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/Toast/Toast.jsx → 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'
 
@@ -12,10 +12,15 @@ import {getAddressByProps} from '../../api/graphql/address'
 import {createOrders,createOrderProducts} from '../../api/graphql/order'
 import {getShopCarByProps,deleteCarByProps} from '../../api/graphql/shopCar'
 
-import {successToast,failToast} from '../Toast/Toast'
+import {successToast,failToast} from '../Common/Toast'
+import {dialog} from '../Common/Alert'
 import './OrederPage.css'
 import { concatSeries } from 'async';
 
+import { List } from 'antd-mobile';
+const Item = List.Item;
+const Brief = Item.Brief;
+
 class OrderPage extends React.Component{
     constructor(props){
         super(props)
@@ -25,10 +30,12 @@ class OrderPage extends React.Component{
             address:{},
             products:[],
             shopCarList:[],
-            sumPrice:''
+            sumPrice:'',
+            loading:true
         }
         //this.toPay=this.toPay.bind(this)
         this.createOrder=this.createOrder.bind(this)
+        this.toPay=this.toPay.bind(this)
         
     }
     //获取数据
@@ -52,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
                 })
             })
         }
@@ -67,7 +75,6 @@ class OrderPage extends React.Component{
         graphqls(getShopCarByProps,{user_id}).then((response)=>{
             let sumPrice=0,num=0;
             //如果請求失敗,默认空数组
-            
             (response.userCartbyprops||[]).map((item)=>{
                 sumPrice+=item.count*item.product_id.price
                 num+=item.count
@@ -78,61 +85,104 @@ class OrderPage extends React.Component{
             this.setState({
                 shopCarList:response.userCartbyprops,
                 sumPrice,
-                num
+                num,
+                loading:false
             })
         })
     }
 
-    
+    deleteCarById(id){
+        //console.log(id)
+        graphqls(deleteCarByProps,{id}).then((e)=>{
+            console.log('删除了shopcar',e)
+        })
+    }
 
-    createOrder(){
+    deleteAllShopCar(){
+        const shopcarList=this.state.shopCarList||[],that=this;
+        shopcarList.map((item)=>{
+            that.deleteCarById(item.id)
+            return 0
+        })
+    }
+
+    
+    toCreateOrder(status){
+        const payTime=new Date().toLocaleString('chinese', { hour12: false })
+        this.createOrder(status,payTime) 
+       
+        //console.log('status',status)
+    }
+    createOrder(orderStatus,payTime){
         console.log('創造order')
-        let that =this,
-        orderStatus=1,
-        sumPrice=this.state.num*this.state.product.price,
-        payTime="2019/12/31 12:30:56"
+        console.log('this.state',this.state)
+        let that =this
         //{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),
+            "createdAt": new Date().toLocaleString('chinese', { hour12: false }),
             "deliveryTime": "",
             "id": id,
             "orderLogistics_id": "",
             "orderPay_id": "",
             "orderShipFee": 0,
             "orderStatus": orderStatus,
-            "orderTotalPay": sumPrice,
+            "orderTotalPay": this.state.sumPrice,//-优惠
             "payTime": payTime,
-            "productTotalPay": sumPrice,
+            "productTotalPay": this.state.sumPrice,
             "updatedAt": "",
             "userAddress_id": that.state.address.id,
             "user_id": openid
           }
 
-
+        const fromShopCar= this.props.fromShopCar
          graphqls(createOrders,orderData).then((e) => {
             console.log('order创建订单成功', e)
-            that.createProductOrder(id)
-            
+            that.deleteAllShopCar()
+            let products=that.state.products||[]
+            let shopCarList=that.state.shopCarList||[]
+            //从购物车页面跳转而来(多个产品)
+            if(fromShopCar){
+                console.log('来自shopcar')
+                //console.log('shopList----',shopCarList)
+                let i=1
+                shopCarList.map((item)=>{
+                    console.log(item)
+                    that.createProductOrder(id,item.count,item.product_id)
+                    i++;
+                    if(i===shopCarList.length){
+                        //订单创建成功，删除购物车里面的所有产品
+                       that.deleteAllShopCar() 
+                    }
+                    return 0
+                })
+            }else{//从产品详情页面跳转而来(一个产品)
+                console.log('来自detail')
+                products.map((item)=>{
+                    that.createProductOrder(id,that.state.num,item)
+                    return 0
+                })
+                
+            }
          })
 
     }
 
-    createProductOrder(order_id){
-
+    createProductOrder(order_id,count,product){
+        console.log('product-----------',product)
         let that=this,openid=sessionStorage.getItem('openid')
         let data={
-            "count": that.state.num,
-            "createdAt": new Date().toLocaleDateString()+' '+new Date().toLocaleTimeString().slice(2),
+            "count": count,
+            "createdAt": new Date().toLocaleString('chinese', { hour12: false }),
             "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,
+            "productPay": product.price * count,
+            "product_id": product.id,
+            "remark": "that.state.remark",
             "unit": "100",
             "updatedAt": "",
             "user_id": openid
@@ -144,9 +194,18 @@ class OrderPage extends React.Component{
         })
     }
 
-    // toPay(){
-    //     this.createOrder()
-    // }
+    toPay(){
+        dialog('￥'+this.state.sumPrice,'确认支付吗?').then(
+            (e)=>{
+                //console.log('ok ',e)
+                this.toCreateOrder(1)
+            },(e)=>{
+                //console.log('fail ',e)
+                this.toCreateOrder(0)
+            })
+    }
+
+
     renderCardList(){
         if(this.props.fromShopCar){
             return(
@@ -165,22 +224,28 @@ class OrderPage extends React.Component{
 
     render(){
         const address=this.state.address
-        const product=this.state.product
         const num =this.state.num
         return(
             <div className="orderWrap">
-                <div className="addressWrap" onClick={()=>{
-                    this.props.changePage('addressPage')
-                    this.props.triggerAddress(true)
-                }}>
-                    <span></span>
-                    <span>{address.username+address.telephone+address.province+address.city+address.area+address.address}</span>
-                    <span></span>
+                <ActivityIndicator toast text="loading" animating={this.state.loading}/>
+                <div className="addressWrap">
+                    <List>
+                        <Item
+                        thumb="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/positioning.svg"
+                        arrow="horizontal"
+                        wrap
+                        multipleLine
+                        onClick={() => {
+                            this.props.changePage('addressPage')
+                            this.props.triggerAddress(true)
+                        }}
+                        >{address.username+address.telephone+address.province+address.city+address.area+address.address}</Item>
+                    </List>
                 </div>
                 <div className="cardList">{this.renderCardList()}</div>
                 <div className="payResult">
                     <div>共计{num}件商品;合计 ￥ {this.state.sumPrice}</div>
-                    <div onClick={this.createOrder}>立即支付</div>
+                    <div onClick={this.toPay}>立即支付</div>
                 </div>
             </div>
             )

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,10 +12,12 @@ 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)
+        //this.deleteAllShopCar=this.deleteAllShopCar.bind(this)
     }
 
     componentDidMount(){
@@ -38,8 +40,11 @@ class ShopCarPage extends Component{
             this.setState({
                 shopCarList:response.userCartbyprops,
                 sumPrice,
-                shopCarCount
+                shopCarCount,
+                loading:false
             })
+
+
         })
     }
 
@@ -50,10 +55,11 @@ class ShopCarPage extends Component{
         //console.log(e)
             this.getCarByProps()
         })
-  }
+    }
 
+    
     renderShopCarList(){
-        return this.state.shopCarList.map((item,index)=>{
+        return this.state.shopCarList||[].map((item,index)=>{
             return <ShopCarCard car={item} key={index} deleteCarById={this.deleteCarById}/>
         })
     }
@@ -61,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>
@@ -69,8 +76,11 @@ class ShopCarPage extends Component{
                     <button 
                     className="toPay" 
                     onClick={()=>{
-                        this.props.changePage('order')
-                        this.props.setFromShopCar(true)
+                        if(this.state.shopCarList.length>0){
+                            this.props.changePage('order')
+                            this.props.setFromShopCar(true)
+                            //this.deleteAllShopCar()
+                        }
                     }}
                     >去支付</button>
                 </div>