Home Explore Help
Register Sign In
ioobot
/
ec-react
3
0
Fork 0
Files Issues 0 Pull Requests 0 Wiki
Browse Source

Merge branch 'master' of http://gogs.ioobot.com:6680/xy/ec-react

kulley 6 years ago
parent
fb6e938753 1d5fa7e45d
commit
44dfab47e2
12 changed files with 212 additions and 60 deletions
Split View Show Diff Stats
  1. 1 1
      public/index.html
  2. 45 1
      src/App.js
  3. 4 3
      src/pages/cart/all/index.js
  4. 7 2
      src/pages/cart/orders/index.css
  5. 26 7
      src/pages/cart/orders/index.js
  6. 2 1
      src/pages/home/detail/index.js
  7. 4 1
      src/pages/my/order/display/index.js
  8. 1 1
      src/pages/my/tools/address/index.css
  9. 63 41
      src/pages/my/tools/address/index.js
  10. 13 2
      src/pages/my/tools/address/singleaddress/index.js
  11. 27 0
      src/utils/cookie.js
  12. 19 0
      src/utils/gql.js

+ 1 - 1
public/index.html
View File 

@@ -22,7 +22,7 @@
 
       work correctly both with client-side routing and a non-root public URL.
 
       Learn how to configure a non-root public URL by running `npm run build`.
 
     -->
 
-    <title>React App</title>
 
+    <title>e-Commerce</title>
 
   </head>
 
   <body>
 
     <noscript>You need to enable JavaScript to run this app.</noscript>

+ 45 - 1
src/App.js
View File 

@@ -2,10 +2,16 @@ import React, {Component} from 'react'
 
 import {Row, Col, Icon} from 'antd'
 
 import {Switch, Route, NavLink, withRouter} from 'react-router-dom'
 
 import classnames from 'classnames'
 
+import {request} from 'graphql-request'
 
+import moment from 'moment'
 
 
 import Home from './pages/home'
 
 import Cart from './pages/cart'
 
 import My from './pages/my'
 
+import {graphqlFC} from "./configs/url"
 
+import {getCookie, setCookie} from "./utils/cookie"
 
+import {create_user} from "./utils/gql"
 
+import {idGen} from "./utils/func"
 
 import './app.css'
 
 
 class App extends Component {
 
@@ -77,6 +83,41 @@ class App extends Component {
 
         }
 
     }
 
 
+    oauthLogin = () => {
 
+        setCookie("openid","obR_j5GbxDfGlOolvSeTdZUwfpKA")
 
+        let openid =  getCookie("openid")
 
+        let user_id =  getCookie("user_id")
 
+        console.log('oauthLogin openid',openid)
 
+
 
+        if (!openid) {
 
+            window.location.href = "/subscribe"
 
+
 
+        }else if(!user_id){
 
+            let createdAt = moment().format('YYYY-MM-DD HH:mm:ss')
 
+            let id = idGen('user')
 
+            const userContent = {
 
+                email: "",
 
+                updatedAt: "",
 
+                password: "",
 
+                telephone: "",
 
+                username: "",
 
+                createdAt,
 
+                openid,
 
+                id,
 
+                userData_id: ""
 
+
 
+            }
 
+            request(graphqlFC, create_user ,userContent)
 
+                .then(data => {
 
+                    console.log('create user data',data)
 
+                    setCookie('user_id',id)
 
+                })
 
+                .catch(err => {
 
+                    console.log(err, `graphql-request create user error`)
 
+                })
 
+        }
 
+    }
 
+
 
     render() {
 
         let {selectedTab, tabHidden} = this.state
 
         return (
 
@@ -126,7 +167,10 @@ class App extends Component {
 
                 </div>
 
                 <div className='tabbar-route-content'>
 
                     <Switch>
 
-                        <Route exact path="/" component={Home}/>
 
+                        <Route exact path="/" render={() => {
 
+                            this.oauthLogin()
 
+                            return <Home />
 
+                        }}/>
 
                         <Route path="/home" component={Home}/>
 
                         <Route path="/cart" component={Cart}/>
 
                         <Route path="/my" component={My}/>

+ 4 - 3
src/pages/cart/all/index.js
View File 

@@ -6,9 +6,9 @@ import gql from "graphql-tag"
 
 import CartDetail from "./detail"
 
 import CartEdit from "./edit"
 
 import Empty from "../empty"
 
-import './index.css'
 
-
 
 import {cart_by_userid} from "../../../utils/gql"
 
+import {getCookie} from "../../../utils/cookie"
 
+import './index.css'
 
 
 class All extends Component {
 
     constructor(props) {
 
@@ -70,10 +70,11 @@ class All extends Component {
 
 
     render() {
 
         let {page} = this.state
 
+        let user_id = getCookie('user_id')
 
         // console.log('render',page,this.props)
 
 
         return (
 
-            <Query query={gql(cart_by_userid)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA"}}>
 
+            <Query query={gql(cart_by_userid)} variables={{user_id}}>
 
                 {
 
                     ({loading, error, data, refetch}) => {
 
                         if (loading) {

+ 7 - 2
src/pages/cart/orders/index.css
View File 

@@ -3,6 +3,13 @@
 
     background: white;
 
 }
 
 
+.orders-address-add {
 
+    height: 50px;
 
+    font-size: 16px;
 
+    text-align: center;
 
+    line-height: 50px;
 
+}
 
+
 
 .orders-address-label {
 
     width: 16%;
 
     float: left;
 
@@ -119,5 +126,3 @@
 
 .packup-title {
 
     padding-top: 5px;
 
 }
 
-
 
-

+ 26 - 7
src/pages/cart/orders/index.js
View File 

@@ -8,6 +8,7 @@ import moment from 'moment'
 
 
 import {user_default_address, create_order, create_order_product} from "../../../utils/gql"
 
 import {idGen} from "../../../utils/func"
 
+import {getCookie} from "../../../utils/cookie"
 
 import './index.css'
 
 
 const Item = List.Item
 
@@ -73,8 +74,7 @@ class CartOrders extends Component {
 
         })
 
     }
 
 
-    onSubmitOrderAndProduct = (create_order,create_order_product) => {
 
-        let user_id = "obR_j5GbxDfGlOolvSeTdZUwfpKA"
 
+    onSubmitOrderAndProduct = (user_id,create_order,create_order_product) => {
 
         let {totalCount, totalPrice, remark, delivery} = this.state
 
         let createdAt = moment().format('YYYY-MM-DD HH:mm:ss')
 
         let ordersAddress = JSON.parse(sessionStorage.getItem('ordersAddress'))
 
@@ -180,6 +180,7 @@ class CartOrders extends Component {
 
 
     render() {
 
         let {cartList, unfoldList, height, unfoldStatus, foldStatus, totalPrice, selectAddress} = this.state
 
+        let user_id = getCookie('user_id')
 
 
         return (
 
             <div className='orders-wrap'>
 
@@ -205,7 +206,7 @@ class CartOrders extends Component {
 
                         {
 
                             selectAddress ?
 
                                 <OrdersAddress props={this.props} selectAddress={selectAddress} />:
 
-                                <Query query={gql(user_default_address)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA", default:1}}>
 
+                                <Query query={gql(user_default_address)} variables={{user_id, default:1}}>
 
                                     {
 
                                         ({loading, error, data}) => {
 
                                             if (loading) {
 
@@ -221,9 +222,25 @@ class CartOrders extends Component {
 
                                             }
 
                                             let defaultAddress = data.defaultAddress[0]
 
 
-                                            return (
 
-                                                <OrdersAddress props={this.props} selectAddress={defaultAddress} />
 
-                                            )
 
+                                            if(defaultAddress){
 
+                                                return (
 
+                                                    <OrdersAddress props={this.props} selectAddress={defaultAddress} />
 
+                                                )
 
+                                            }else {
 
+                                                return (
 
+                                                    <div className='orders-address-add'
 
+                                                         onClick={() => {
 
+                                                             this.props.history.push({
 
+                                                                 pathname:'/my/tools',
 
+                                                                 state: {
 
+                                                                     page: 'address',
 
+                                                                     prePage: 'orders',
 
+                                                                     single: true
 
+                                                                 }})
 
+                                                         }}
 
+                                                    >+ 添加收货地址</div>
 
+                                                )
 
+                                            }
 
                                         }
 
                                     }
 
                                 </Query>
 
@@ -350,7 +367,7 @@ class CartOrders extends Component {
 
                                     {(create_order_product,{ loading, error }) => (
 
                                         <button className="jiesuan-button"
 
                                                 onClick={()=>{
 
-                                                    this.onSubmitOrderAndProduct(create_order,create_order_product)
 
+                                                    this.onSubmitOrderAndProduct(user_id,create_order,create_order_product)
 
                                                 }}>
 
                                             <span>提交订单</span>
 
                                         </button>
 
@@ -368,6 +385,8 @@ class CartOrders extends Component {
 
 export default withRouter(CartOrders)
 
 
 const OrdersAddress =({props,selectAddress}) => {
 
+    console.log('props',props)
 
+    console.log('selectAddress',selectAddress)
 
     let {default:isDefault, username, telephone, province, area, city, address} = selectAddress
 
     sessionStorage.setItem('ordersAddress',JSON.stringify(selectAddress))

+ 2 - 1
src/pages/home/detail/index.js
View File 

@@ -9,6 +9,7 @@ import moment from 'moment'
 
 
 import {productAndSpec_by_id, create_userCart} from "../../../utils/gql"
 
 import {idGen} from '../../../utils/func'
 
+import {getCookie} from "../../../utils/cookie"
 
 import './index.css'
 
 
 class Detail extends Component {
 
@@ -258,7 +259,7 @@ class SelectModal extends Component {
 
     // 添加至购物袋
 
     onCreateUserCart = (create_userCart) => {
 
         let id = idGen('cart')
 
-        let user_id = "obR_j5GbxDfGlOolvSeTdZUwfpKA"
 
+        let user_id = getCookie('user_id')
 
         let {productData} = this.props
 
         let product_id = productData.productbyid.id
 
         let {count, selectColor, specList} = this.state

+ 4 - 1
src/pages/my/order/display/index.js
View File 

@@ -7,6 +7,7 @@ import gql from "graphql-tag"
 
 import classNames from 'classnames'
 
 
 import {orderbyprops, orderProduct_by_props} from "../../../../utils/gql"
 
+import {getCookie} from "../../../../utils/cookie"
 
 import './index.css'
 
 
 class Display extends Component {
 
@@ -56,6 +57,8 @@ class Display extends Component {
 
 
     render() {
 
         let {navTitle, orderStatus} = this.state
 
+        let user_id = getCookie('user_id')
 
+
 
         return (
 
             <div className='order-wrap'>
 
                 <div className='navbar'>
 
@@ -67,7 +70,7 @@ class Display extends Component {
 
                         }}
 
                     >{navTitle}</NavBar>
 
                 </div>
 
-                <Query query={gql(orderbyprops)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA", orderStatus}}>
 
+                <Query query={gql(orderbyprops)} variables={{user_id, orderStatus}}>
 
                     {
 
                         ({loading, error, data}) => {
 
                             if (loading) {

+ 1 - 1
src/pages/my/tools/address/index.css
View File 

@@ -14,7 +14,7 @@
 
     bottom: 0;
 
     width: 100%;
 
     text-align: center;
 
-    font-size: 20px;
 
+    font-size: 18px;
 
     border-top: 1px solid #F3F3F3;
 
     height: 50px;
 
     line-height: 50px;

+ 63 - 41
src/pages/my/tools/address/index.js
View File 

@@ -5,8 +5,10 @@ import {ActivityIndicator, NavBar} from 'antd-mobile'
 
 import {Icon, Row, Col} from 'antd'
 
 import {Query} from "react-apollo"
 
 import gql from "graphql-tag"
 
-import './index.css'
 
+
 
 import SingleAddress from "./singleaddress"
 
+import {getCookie} from "../../../../utils/cookie"
 
+import './index.css'
 
 
 class Address extends Component {
 
     constructor(props) {
 
@@ -18,6 +20,15 @@ class Address extends Component {
 
         }
 
     }
 
 
+    componentWillMount() {
 
+        let state = this.props.history.location.state || ''
 
+        if (state && state.single) {
 
+            this.setState({
 
+                single: true
 
+            })
 
+        }
 
+    }
 
+
 
     changePage = (bool) => {
 
         this.setState({
 
             single: bool
 
@@ -44,6 +55,8 @@ class Address extends Component {
 
 
     render() {
 
         let {addressChoosed, addressID} = this.state
 
+        let user_id = getCookie('user_id')
 
+
 
         return (
 
             <div>
 
                 <div className='navbar'>
 
@@ -56,7 +69,7 @@ class Address extends Component {
 
                     >地址管理</NavBar>
 
                 </div>
 
                 <div className='content-wrap'>
 
-                    <Query query={gql(userAddressbyprops)} variables={{user_id: "obR_j5GbxDfGlOolvSeTdZUwfpKA"}}>
 
+                    <Query query={gql(userAddressbyprops)} variables={{user_id}}>
 
                         {
 
                             ({loading, error, data}) => {
 
                                 if (loading) {
 
@@ -76,7 +89,12 @@ class Address extends Component {
 
                                     <div>
 
                                         {
 
                                             this.state.single ?
 
-                                                <SingleAddress addressID={addressID} addressChoosed={addressChoosed} changePage={this.changePage}/>
 
+                                                <SingleAddress
 
+                                                    addressID={addressID}
 
+                                                    addressChoosed={addressChoosed}
 
+                                                    changePage={this.changePage}
 
+                                                    history={this.props.history}
 
+                                                />
 
                                                 :
 
                                                 <AddressRender
 
                                                     defaultAddress={this.getDefaultAddress(data)}
 
@@ -118,7 +136,7 @@ class AddressRender extends Component {
 
 
     render() {
 
         let {changePage, changeAddress, defaultAddress, otherAddress} = this.props
 
-        let {username, telephone, province, city, area, address} = defaultAddress
 
+        let {username, telephone, province, city, area, address} = defaultAddress || {}
 
 
         return (
 
             <div>
 
@@ -129,43 +147,18 @@ class AddressRender extends Component {
 
                     <Icon type="plus" style={{fontSize: 22, fontWeight: 800}}/>&nbsp;
 
                     添加新地址
 
                 </div>
 
-
 
-                <div className='default-address'>
 
-                    <div className='address-card'>
 
-                        <div className='address-info' onClick={() => this.changeOrdersAddress(defaultAddress)}>
 
-                            <Row className='address-username-telephone'>
 
-                                <Col span={6} className='address-username ellipsis'>{username}</Col>
 
-                                <Col span={14} className='address-phone ellipsis'>{telephone}&nbsp;&nbsp;
 
-                                    <span className='address-label'>默认</span></Col>
 
-                            </Row>
 
-                            <Row>
 
-                                <Col span={24} className='address-address'>{province + city + area + address}</Col>
 
-                            </Row>
 
-                        </div>
 
-                        <div className='address-edit'>
 
-                            <Icon
 
-                                type="edit"
 
-                                style={{fontSize: 14}}
 
-                                onClick={()=>{
 
-                                    changePage(true)
 
-                                    changeAddress(address)
 
-                                }}
 
-                            />
 
-                        </div>
 
-                    </div>
 
-                </div>
 
-
 
-                <div className='other-address'>
 
-                    {otherAddress.map(address => {
 
-                        return (
 
-                            <div key={address.id} className='address-card'>
 
-                                <div className='address-info' onClick={() => this.changeOrdersAddress(address)}>
 
+                {
 
+                    defaultAddress ?
 
+                        <div className='default-address'>
 
+                            <div className='address-card'>
 
+                                <div className='address-info' onClick={() => this.changeOrdersAddress(defaultAddress)}>
 
                                     <Row className='address-username-telephone'>
 
-                                        <Col span={6} className='address-username ellipsis'>{address.username}</Col>
 
-                                        <Col span={14} className='address-phone ellipsis'>{address.telephone}</Col>
 
+                                        <Col span={6} className='address-username ellipsis'>{username}</Col>
 
+                                        <Col span={14} className='address-phone ellipsis'>{telephone}&nbsp;&nbsp;
 
+                                            <span className='address-label'>默认</span></Col>
 
                                     </Row>
 
                                     <Row>
 
-                                        <Col span={24} className='address-address'>{address.province + address.city + address.area + address.address}</Col>
 
+                                        <Col span={24} className='address-address'>{province + city + area + address}</Col>
 
                                     </Row>
 
                                 </div>
 
                                 <div className='address-edit'>
 
@@ -179,9 +172,38 @@ class AddressRender extends Component {
 
                                     />
 
                                 </div>
 
                             </div>
 
-                        )
 
-                    })}
 
-                </div>
 
+                        </div>:''
 
+                }
 
+                {
 
+                    otherAddress.length ?
 
+                        <div className='other-address'>
 
+                            {otherAddress.map(address => {
 
+                                return (
 
+                                    <div key={address.id} className='address-card'>
 
+                                        <div className='address-info' onClick={() => this.changeOrdersAddress(address)}>
 
+                                            <Row className='address-username-telephone'>
 
+                                                <Col span={6} className='address-username ellipsis'>{address.username}</Col>
 
+                                                <Col span={14} className='address-phone ellipsis'>{address.telephone}</Col>
 
+                                            </Row>
 
+                                            <Row>
 
+                                                <Col span={24} className='address-address'>{address.province + address.city + address.area + address.address}</Col>
 
+                                            </Row>
 
+                                        </div>
 
+                                        <div className='address-edit'>
 
+                                            <Icon
 
+                                                type="edit"
 
+                                                style={{fontSize: 14}}
 
+                                                onClick={()=>{
 
+                                                    changePage(true)
 
+                                                    changeAddress(address)
 
+                                                }}
 
+                                            />
 
+                                        </div>
 
+                                    </div>
 
+                                )
 
+                            })}
 
+                        </div>:''
 
+                }
 
             </div>
 
         )
 
     }

+ 13 - 2
src/pages/my/tools/address/singleaddress/index.js
View File 

@@ -102,8 +102,9 @@ class SingleAddress extends Component {
 
     }
 
 
     render() {
 
-        let {changePage} = this.props
 
+        let {changePage, history} = this.props
 
         let {username, telephone, province, city, area, address, id} = this.state
 
+
 
         return (
 
             <div>
 
                 <div className='tools-addressadd-navbar-wrap'>
 
@@ -173,6 +174,7 @@ class SingleAddress extends Component {
 
                             address,
 
                             id
 
                         }}
 
+                        history={history}
 
                     />
 
                 </div>
 
 
@@ -207,10 +209,19 @@ class SaveAddressButton extends Component {
 
     }
 
 
     render() {
 
+        let prePage = this.props.history.location.state.prePage
 
         // let {data} = this.props
 
         return (
 
             <div className='address-button'>
 
-                <Button type='primary' block size='large' style={{outline: 'none'}}>保存并使用</Button>
 
+                <Button type='primary' block size='large' style={{outline: 'none'}}
 
+                        onClick={()=>{
 
+                            if(prePage){
 
+                                // sessionStorage.setItem('ordersAddress',JSON.stringify(address))
 
+                                this.props.history.go(-2)
 
+                            }
 
+                        }}
 
+                >
 
+                    保存并使用</Button>
 
             </div>
 
         )
 
     }

+ 27 - 0
src/utils/cookie.js
View File 

@@ -0,0 +1,27 @@
 
+export function setCookie(name,value,exdays) {
 
+    // expires表示过期时间。如果不设置，默认会话结束即关闭浏览器的时候就消失。
 
+    // 第一步，设置过期时间
 
+    let date = new Date();
 
+    date.setDate(date.getDate()+(exdays*24*60*60*1000));
 
+    document.cookie = name + "=" + value + ";expires=" + date;
 
+    // alert(document.cookie);
 
+}
 
+
 
+export function getCookie(key) {
 
+    // 第一步：将字符串转化为数组形式,分割字符串时；后需加空格
 
+    let arrStr = document.cookie.split('; ');
 
+    // 第二步：将数组arrStr中的元素再次切割，转换成数组
 
+    let arrStrLength = arrStr.length;
 
+
 
+    for (let i=0;i<arrStrLength;i++){
 
+        let arr = arrStr[i].split('=');
 
+        if(arr[0] === key){
 
+            return arr[1];
 
+        }
 
+    }
 
+    return '';
 
+}
 
+
 
+export function removeCookie(key) {
 
+    setCookie(key,"任意值",-1);
 
+}

+ 19 - 0
src/utils/gql.js
View File 

@@ -1,3 +1,21 @@
 
+const create_user = `
 
+    mutation createuser($email: String, $updatedAt: String, $password: String, $telephone: String, $username: String, $createdAt: String, $openid: String, $id: ID!, $userData_id: ID) {
 
+        createuser: create_user(email: $email updatedAt: $updatedAt password: $password telephone: $telephone username: $username createdAt: $createdAt openid: $openid id: $id userData_id: $userData_id) {
 
+            result
 
+            user {
 
+                email
 
+                updatedAt
 
+                password
 
+                telephone
 
+                username
 
+                createdAt
 
+                openid
 
+                id
 
+            }
 
+        }
 
+    }
 
+`
 
+
 
 const category_by_props = `
 
     query categorybyprops($sort_by: category_sort_by, $limit: Int, $status: String) {
 
         categorybyprops: category_by_props(sort_by: $sort_by limit: $limit status: $status) {
 
@@ -644,6 +662,7 @@ const update_product = `
 
 `
 
 
 export {
 
+    create_user,
 
     category_by_props,
 
     update_category,
 
     delete_category,