增加案例

package.json

@@ -8,6 +8,7 @@
     "antd": "^3.10.3",
     "antd-mobile": "^2.2.6",
     "antd-mobile-demo-data": "^0.2.0",
+    "antd-mobile-full-demo-data": "^0.2.1",
     "apollo-boost": "^0.1.19",
     "axios": "^0.18.0",
     "babel-core": "7.0.0-bridge.0",

src/app/developVersion/graphqlService/component/application/Application.js

@@ -1,5 +1,5 @@
 import React, {Component} from 'react';
-import ShopApp from '../../../../../case/ShopApp/src/App'
+import ShopApp from '../../../../../case/ShopApp/src/index'
 import BillApp from '../../../../../case/BillApp/src/App'
 import OrderApp from '../../../../../case/OrderApp/src/index'
 class Application extends Component {
@@ -7,7 +7,7 @@ class Application extends Component {
     render() {
         let schemaName = this.props.location.state ? this.props.location.state.schemaName : 'e-commerce';
         return (
-            <div>
+            <div style={{height: '100%'}}>
                 {
                     schemaName === "appointment template" ?
                         <OrderApp/> :

src/case/ShopApp/src/App.js

@@ -1,215 +1,228 @@
-import React, {Component} from 'react';
-import './components/App/App.css';
-
-import {PageContext, NumContext} from './context/context'
-
-// 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 NavBars from './components/App/NavBar'
-import TabBarBottom from './components/App/TabBarBottom'
-import ProductDetail from './components/ProductDetailPage/ProductDetail'
-import OrderPage from './components/OrderPage/OrederPage'
-import OrderCenterPage from './components/OrderCenterPage/OrderCenterPage'
-import AddressPage from './components/AddressPage/AddressPage'
-
-import {graphqls} from './api/graphql_request'
-import {getProductById, getProductByProps} from './api/graphql/product'
-
-//import axious from './api/axious_request'
-
-
-class ShopApp extends Component {
-    //showComponent
+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 {find_user_by_openid, create_user} from "./utils/gql"
+import {idGen, getIsWechatBrowser} from "./utils/func"
+import './app.css'
+
+class App extends Component {
     constructor(props) {
         super(props)
         this.state = {
-            page: 'index',
-            product_id: '',
-            num: 1,
-            editAddress: false,
-            fromShopCar: false,
-            fromOrderCenter: false,
-            order_id: '',
-            address_id: ''
+            selectedTab: 'home',
+            tabHidden: false
         }
-        this.changePage = this.changePage.bind(this)
-        this.triggerAddress = this.triggerAddress.bind(this)
-        this.setFromShopCar = this.setFromShopCar.bind(this)
-        this.setOrderId = this.setOrderId.bind(this)
-        this.setAddressId = this.setAddressId.bind(this)
     }
 
+    // componentWillMount 适用于刷新的 tabbar 的展示
     componentWillMount() {
-        sessionStorage.setItem("openid", "ovtkn4zONC3IzhpykQ7cSLZ85YFg")
-        this.getGoods()
-    }
-
-    //获取数据
-    getGoods(variables = {}) {
-        return graphqls(getProductByProps, variables).then((data) => {
-            // console.log("data", data)
-            let products = data.productbyprops || []
-            sessionStorage.setItem("products", JSON.stringify(products))
-        })
-    }
+        let {location} = this.props,
+            pathname = location.pathname
+
+        // 根据首次的 pathname 显示 icon 选中
+        // 如 /cart 刷新
+        if (location && pathname) {
+            this.setState({
+                selectedTab: pathname.split('/')[1] === '' ? 'home' : pathname.split('/')[1]
+            })
+        }
 
-    getProductByIds(id) {
-        return graphqls(getProductById, {id}).then(e => e)
+        // 如果不是首页的初始界面，就隐藏 tabbar
+        // 如在 /home/detail 或 /home/detail/ 刷新
+        let pathnameArray = location.pathname.split('/')
+        let length = pathnameArray.length
+        if (length > 2 && pathnameArray[length - 1] !== '') {
+            this.setState({
+                tabHidden: true
+            })
+        }
     }
 
-    //显示页面，控制子页面的显示
-    changePage(page, product_id) {
-        console.log("onAppPage", page)
-
-        if (product_id) {
-            this.setState({page, product_id})
+    // componentWillReceiveProps 适用于跳转的 tabbar 的展示
+    componentWillReceiveProps(next) {
+        let {location} = next,
+            pathname = location.pathname,
+            state = location.state
+
+        // 有 state 的话，根据tabHidden显示或隐藏 tabbar, （进入子界面）
+        // 无 state 的话，就显示 tabbar （返回到主界面）
+        if (location && state) {
+            let tabHidden = state.tabHidden !== undefined ? state.tabHidden : true
+            this.setState({
+                tabHidden
+            })
         } else {
-            this.setState({page})
-            console.log('state.page', this.state.page)
+            this.setState({
+                tabHidden: false
+            })
         }
-    }
-
-    //传递给子组件的更改state的函数
-    triggerAddress(editAddress) {
-        this.setState({editAddress})
-    }
-
-    setAddressId(id) {
-        this.setState({address_id: id})
-        console.log(id)
-    }
-
-    setNum(num) {
-        this.setState({num})
-    }
-
-    setFromShopCar(fromShopCar) {
-        this.setState({fromShopCar})
-    }
 
-    setOrderId(order_id = "", fromOrderCenter = false) {
-        console.log('----setOrderId----', order_id, fromOrderCenter)
-        this.setState({order_id, fromOrderCenter})
+        // 根据非首次的 pathname 显示 icon 选中
+        // 如 /home 跳转到 /home/kind, /cart 跳转到 /home 等
+        if (location && pathname) {
+            this.setState({
+                selectedTab: pathname.split('/')[1] === '' ? 'home' : pathname.split('/')[1]
+            })
+        }
     }
 
-    //根据条件渲染页面
-    renderPage(page = "") {
-        // console.log('renderPage', page)
-        const setNum = this.setNum.bind(this)
-
-        switch (page) {
-            case ('detail'):
-                return (
-                    <div className="pageWrap">
-                        <ProductDetail product_id={this.state.product_id} setNum={setNum} changePage={this.changePage}/>
-                    </div>
-                )
-
-            case('order'):
-                return (
-                    <div className="pageWrap">
-                        <OrderPage/>
-                    </div>
-                )
-
-            case('shopCar'):
-                // console.log('shopCar 渲染了')
-                return (
-                    <div>
-                        <div className="pageWrap">
-                            <ShopCarPage/>
-                        </div>
-                        <TabBarBottom changePage={this.changePage}/>
-                    </div>
-                )
-
-            case('user'):
-                // console.log('user 渲染了')
-                return (
-                    <div>
-                        <div className="pageWrap">
-                            <UserPage changePage={this.changePage}/>
-                        </div>
-                        <TabBarBottom changePage={this.changePage}/>
-                    </div>
-                )
-            case('index'):
-                // console.log('index 渲染了')
-                return (
-                    <div>
-                        <div className="pageWrap indexPage">
-                            <HomePage changePage={this.changePage}/>
-                        </div>
-                        <TabBarBottom changePage={this.changePage}/>
-                    </div>
-                )
-            case('orderCenter'):
-                // console.log('orderCenter 渲染了')
-                return (
-                    <div className="pageWrap">
-                        <OrderCenterPage/>
-                    </div>
-                )
-            case('addressPage'):
-                // console.log('addressPage 渲染了')
-                return (
-                    <div className="pageWrap">
-                        <AddressPage
-                            address={{triggerAddress: this.triggerAddress, editAddress: this.state.editAddress}}/>
-                    </div>
-                )
-            default:
-                console.log('页面显示错误')
-                return (<div>页面显示错误</div>)
-            //break
+    isActiveFunc = (navKind) => (match, location) => {
+        if (navKind === 'home' && location.pathname.split('/')[1] === '') {
+            return true
+        } else {
+            return navKind === location.pathname.split('/')[1]
         }
     }
 
-    console(page) {
-        this.console.log(page)
+    oauthLogin = () => {
+        let isWechatLogin = getIsWechatBrowser()
+        // console.log('isWechatLogin',isWechatLogin)
+        if (isWechatLogin) {
+            // setCookie("openid","o2fcFv6Rh2-4rCh3d5_1uCWCT5Yc")
+            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) {
+                request(graphqlFC, find_user_by_openid, {openid})
+                    .then(data => {
+                        console.log('find user data', data)
+                        if (data.userbyprops.length) {
+                            let id = data.userbyprops[0].id
+                            setCookie('user_id', id)
+                        } else {
+                            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`)
+                                })
+                        }
+                    })
+                    .catch(err => {
+                        console.log(err, `graphql-request find user error`)
+                    })
+            }
+        } else {
+            setCookie("user_id", "ioobot")
+            setCookie("openid", "ioobot")
+        }
     }
 
     render() {
-        const changePage = this.changePage//切换page
-        const triggerAddress = this.triggerAddress//新建Address?
-        const fromShopCar = this.state.fromShopCar//是否来自于shopCarPage
-        const setFromShopCar = this.setFromShopCar//
-        const getProductByIds = this.getProductByIds//
-        const order_id = this.state.order_id
-        const product_id = this.state.product_id
-        const setOrderId = this.setOrderId//
-        const fromOrderCenter = this.state.fromOrderCenter
-        const num = this.state.num
-        const address_id = this.state.address_id
-        const setAddressId = this.setAddressId
-        //console.log('APPrender')
+        let {selectedTab, tabHidden} = this.state
         return (
-            <PageContext.Provider value={{
-                address_id,
-                setAddressId,
-                changePage,
-                triggerAddress,
-                getProductByIds,
-                num,
-                fromShopCar,
-                setFromShopCar,
-                setOrderId,
-                order_id,
-                product_id,
-                fromOrderCenter
-            }}>
-                <div className="AppWrap">
-                    <div className="phone6s">
-                        <div className="App shopAppWrap">
-                            {this.renderPage(this.state.page)}{/*渲染页面*/}
-                        </div>
+            <div className="App">
+                <div style={{height: '100%'}}>
+                    <div className={classnames('tabbar', {'tabbar-hidden': tabHidden})}>
+                        <Row>
+                            <Col span={8} className='tabbar-content'>
+                                <NavLink exact isActive={this.isActiveFunc('home')} activeClassName="active" to="/home">
+                                    {
+                                        selectedTab === 'home' ?
+                                            <HomeSelectedIcon/>
+                                            :
+                                            <HomeUnselectedIcon/>
+                                    }
+                                    <div className='tabbar-title'>
+                                        主页
+                                    </div>
+                                </NavLink>
+                            </Col>
+                            <Col span={8} className='tabbar-content'>
+                                <NavLink isActive={this.isActiveFunc('cart')} activeClassName="active" to="/cart">
+                                    {
+                                        selectedTab === 'cart' ?
+                                            <CartSelectedIcon/>
+                                            :
+                                            <CartUnselectedIcon/>
+                                    }
+                                    <div className='tabbar-title'>
+                                        购物袋
+                                    </div>
+                                </NavLink>
+                            </Col>
+                            <Col span={8} className='tabbar-content'>
+                                <NavLink isActive={this.isActiveFunc('my')} activeClassName="active" to="/my">
+                                    {
+                                        selectedTab === 'my' ?
+                                            <MySelectedIcon/>
+                                            :
+                                            <MyUnselectedIcon/>
+                                    }
+                                    <div className='tabbar-title'>
+                                        我
+                                    </div>
+                                </NavLink>
+                            </Col>
+                        </Row>
+                    </div>
+                    <div className='tabbar-route-content'>
+                        <Switch>
+                            <Route exact path="/" render={() => {
+                                this.oauthLogin()
+                                return <Home/>
+                            }}/>
+                            <Route path="/home" component={Home}/>
+                            <Route path="/cart" component={Cart}/>
+                            <Route path="/my" component={My}/>
+                        </Switch>
                     </div>
                 </div>
-            </PageContext.Provider>
-        );
+            </div>
+        )
     }
 }
 
-export default ShopApp;
+export default withRouter(App)
+
+const HomeUnselectedIcon = () => (
+    <Icon type="home" style={{fontSize: 22}}/>
+)
+
+const HomeSelectedIcon = () => (
+    <Icon type="home" theme="twoTone" style={{fontSize: 22}}/>
+)
+
+const CartUnselectedIcon = () => (
+    <Icon type="shopping" style={{fontSize: 22}}/>
+)
+
+const CartSelectedIcon = () => (
+    <Icon type="shopping" theme="twoTone" style={{fontSize: 22}}/>
+)
+
+const MyUnselectedIcon = () => (
+    <Icon type="setting" style={{fontSize: 22}}/>
+)
+
+const MySelectedIcon = () => (
+    <Icon type="setting" theme="twoTone" style={{fontSize: 22}}/>
+)

src/case/ShopApp/src/api/axious_request.js

@@ -1,7 +0,0 @@
-const axios = require('axios');
-
-const axious=()=>{
-    // console.log("axios",axios)
-}
-
-export default axious

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

@@ -1,70 +0,0 @@
-export const getAddressByProps =`query userAddressbyprops($address: String, $updatedAt: String, $telephone: String, $default: Int, $city: String, $username: String, $postcode: String, $createdAt: String, $deletedAt: String, $user_id: ID, $area: String, $province: String) {
-    userAddressbyprops: userAddress_by_props(address: $address updatedAt: $updatedAt telephone: $telephone
-        default: $default city: $city username: $username postcode: $postcode createdAt: $createdAt deletedAt: $deletedAt user_id: $user_id area: $area province: $province) {
-        address
-        updatedAt
-        telephone
-        default
-        city
-        username
-        postcode
-        createdAt
-        deletedAt
-        id
-        area
-        province
-    }
-}`
-
-export const createAddress=`mutation createuserAddress($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) {
-    createuserAddress: create_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
-    }
-}`
-
-    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
-        }
-    }`
-
-    export const getAddressById=`query userAddressbyid($id: ID) {
-        userAddressbyid: userAddress_by_id(id: $id) {
-            address
-            updatedAt
-            telephone
-            default
-            city
-            username
-            postcode
-            createdAt
-            deletedAt
-            id
-            area
-            province
-        }
-    }`

src/case/ShopApp/src/api/graphql/ecommerce-js.txt

@@ -1,1475 +0,0 @@
-query userbyid($id: ID) {
-    userbyid: user_by_id(id: $id) {
-        email
-        updatedAt
-        password
-        telephone
-        username
-        createdAt
-        openid
-        id
-        userData_id {
-            id
-            nickname
-            avatar
-            isVip
-            vipCode
-            userPoint
-            createdAt
-            updatedAt
-        }
-    }
-}
-
-query adminbyid($id: ID) {
-    adminbyid: admin_by_id(id: $id) {
-        id
-        openid
-        username
-        password
-        telephone
-        email
-        createdAt
-        updatedAt
-    }
-}
-
-query orderPaybyprops($user_id: ID, $order_id: ID, $totalPay: Float, $transactionId: String, $payTime: String) {
-    orderPaybyprops: orderPay_by_props(user_id: $user_id order_id: $order_id totalPay: $totalPay transactionId: $transactionId payTime: $payTime) {
-        id
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        order_id {
-            deliveryTime
-            updatedAt
-
-            payTime
-            orderTotalPay
-            createdAt
-            orderStatus
-
-            id
-            orderShipFee
-            count
-
-            productTotalPay
-        }
-        totalPay
-        transactionId
-        payTime
-    }
-}
-
-query userCartbyid($id: ID) {
-    userCartbyid: userCart_by_id(id: $id) {
-        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
-    }
-}
-
-query userDatabyid($id: ID) {
-    userDatabyid: userData_by_id(id: $id) {
-        id
-        nickname
-        avatar
-        isVip
-        vipCode
-        userPoint
-        createdAt
-        updatedAt
-    }
-}
-
-query adminbyprops($openid: String, $username: String, $password: String, $telephone: String, $email: String, $createdAt: String, $updatedAt: String) {
-    adminbyprops: admin_by_props(openid: $openid username: $username password: $password telephone: $telephone email: $email createdAt: $createdAt updatedAt: $updatedAt) {
-        id
-        openid
-        username
-        password
-        telephone
-        email
-        createdAt
-        updatedAt
-    }
-}
-
-query userSearchbyprops($user_id: ID, $keyword: Int, $createdAt: String, $updatedAt: String) {
-    userSearchbyprops: userSearch_by_props(user_id: $user_id keyword: $keyword createdAt: $createdAt updatedAt: $updatedAt) {
-        id
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        keyword
-        createdAt
-        updatedAt
-    }
-}
-
-query userCollectbyprops($user_id: ID, $product_id: ID, $createdAt: String, $updatedAt: String) {
-    userCollectbyprops: userCollect_by_props(user_id: $user_id product_id: $product_id 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
-        }
-        createdAt
-        updatedAt
-    }
-}
-
-query productbyprops($category: String, $updatedAt: String, $name: String, $createdAt: String, $status: String, $intro: String, $price: Float, $img: String, $stock: Int) {
-    productbyprops: product_by_props(category: $category updatedAt: $updatedAt name: $name createdAt: $createdAt status: $status intro: $intro price: $price img: $img stock: $stock) {
-        category
-        updatedAt
-        unit
-        name
-        createdAt
-        status
-        id
-        intro
-        price
-        img
-        stock
-    }
-}
-
-query orderLogisticsbyid($id: ID) {
-    orderLogisticsbyid: orderLogistics_by_id(id: $id) {
-        updatedAt
-        logisticsFee
-        expressId
-        createdAt
-        order_id {
-            deliveryTime
-            updatedAt
-
-            payTime
-            orderTotalPay
-            createdAt
-            orderStatus
-
-            id
-            orderShipFee
-            count
-
-            productTotalPay
-        }
-        consigneeTel
-        id
-        consignAddress
-        LogisticsStatus
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        consigneeName
-    }
-}
-
-query orderProductbyid($id: ID) {
-    orderProductbyid: orderProduct_by_id(id: $id) {
-        remark
-        updatedAt
-        unit
-        product_id {
-            category
-            updatedAt
-            unit
-            name
-            createdAt
-            status
-            id
-            intro
-            price
-            img
-            stock
-        }
-        orderPay
-        createdAt
-        order_id {
-            deliveryTime
-            updatedAt
-
-            payTime
-            orderTotalPay
-            createdAt
-            orderStatus
-
-            id
-            orderShipFee
-            count
-
-            productTotalPay
-        }
-        id
-        count
-        productPay
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-    }
-}
-
-query userCollectbyid($id: ID) {
-    userCollectbyid: userCollect_by_id(id: $id) {
-        id
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        product_id {
-            category
-            updatedAt
-            unit
-            name
-            createdAt
-            status
-            id
-            intro
-            price
-            img
-            stock
-        }
-        createdAt
-        updatedAt
-    }
-}
-
-query userAddressbyprops($address: String, $updatedAt: String, $telephone: String, $default: Int, $city: String, $username: String, $postcode: String, $createdAt: String, $deletedAt: String, $user_id: ID, $area: String, $province: String) {
-    userAddressbyprops: userAddress_by_props(address: $address updatedAt: $updatedAt telephone: $telephone
-        default: $default city: $city username: $username postcode: $postcode createdAt: $createdAt deletedAt: $deletedAt user_id: $user_id area: $area province: $province) {
-        address
-        updatedAt
-        telephone
-        default
-        city
-        username
-        postcode
-        createdAt
-        deletedAt
-        id
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        area
-        province
-    }
-}
-
-query orderPaybyid($id: ID) {
-    orderPaybyid: orderPay_by_id(id: $id) {
-        id
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        order_id {
-            deliveryTime
-            updatedAt
-
-            payTime
-            orderTotalPay
-            createdAt
-            orderStatus
-
-            id
-            orderShipFee
-            count
-
-            productTotalPay
-        }
-        totalPay
-        transactionId
-        payTime
-    }
-}
-
-query userAddressbyid($id: ID) {
-    userAddressbyid: userAddress_by_id(id: $id) {
-        address
-        updatedAt
-        telephone
-        default
-        city
-        username
-        postcode
-        createdAt
-        deletedAt
-        id
-        area
-        province
-    }
-}
-
-query orderLogisticsbyprops($updatedAt: String, $logisticsFee: Float, $expressId: String, $createdAt: String, $order_id: ID, $consigneeTel: String, $consignAddress: String, $LogisticsStatus: String, $user_id: ID, $consigneeName: String) {
-    orderLogisticsbyprops: orderLogistics_by_props(updatedAt: $updatedAt logisticsFee: $logisticsFee expressId: $expressId createdAt: $createdAt order_id: $order_id consigneeTel: $consigneeTel consignAddress: $consignAddress LogisticsStatus: $LogisticsStatus user_id: $user_id consigneeName: $consigneeName) {
-        updatedAt
-        logisticsFee
-        expressId
-        createdAt
-        order_id {
-            deliveryTime
-            updatedAt
-
-            payTime
-            orderTotalPay
-            createdAt
-            orderStatus
-
-            id
-            orderShipFee
-            count
-
-            productTotalPay
-        }
-        consigneeTel
-        id
-        consignAddress
-        LogisticsStatus
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        consigneeName
-    }
-}
-
-query orderbyid($id: ID) {
-    orderbyid: order_by_id(id: $id) {
-        deliveryTime
-        updatedAt
-        orderLogistics_id {
-            updatedAt
-            logisticsFee
-            expressId
-            createdAt
-
-            consigneeTel
-            id
-            consignAddress
-            LogisticsStatus
-
-            consigneeName
-        }
-        payTime
-        orderTotalPay
-        createdAt
-        orderStatus
-        userAddress_id {
-            address
-            updatedAt
-            telephone
-            default
-            city
-            username
-            postcode
-            createdAt
-            deletedAt
-            id
-
-            area
-            province
-        }
-        id
-        orderShipFee
-        count
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        productTotalPay
-        orderPay_id {
-            id
-
-
-            totalPay
-            transactionId
-            payTime
-        }
-    }
-}
-
-query orderProductbyprops($remark: String, $updatedAt: String, $product_id: ID, $orderPay: Float, $createdAt: String, $order_id: ID, $count: Int, $productPay: Float, $user_id: ID) {
-    orderProductbyprops: orderProduct_by_props(remark: $remark updatedAt: $updatedAt product_id: $product_id orderPay: $orderPay createdAt: $createdAt order_id: $order_id count: $count productPay: $productPay user_id: $user_id) {
-        remark
-        updatedAt
-        unit
-        product_id {
-            category
-            updatedAt
-            unit
-            name
-            createdAt
-            status
-            id
-            intro
-            price
-            img
-            stock
-        }
-        orderPay
-        createdAt
-        order_id {
-            deliveryTime
-            updatedAt
-
-            payTime
-            orderTotalPay
-            createdAt
-            orderStatus
-
-            id
-            orderShipFee
-            count
-
-            productTotalPay
-        }
-        id
-        count
-        productPay
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-    }
-}
-
-query productbyid($id: ID) {
-    productbyid: product_by_id(id: $id) {
-        category
-        updatedAt
-        unit
-        name
-        createdAt
-        status
-        id
-        intro
-        price
-        img
-        stock
-    }
-}
-
-query userSearchbyid($id: ID) {
-    userSearchbyid: userSearch_by_id(id: $id) {
-        id
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        keyword
-        createdAt
-        updatedAt
-    }
-}
-
-query userDatabyprops($nickname: String, $avatar: String, $isVip: Boolean, $vipCode: String, $userPoint: Int, $createdAt: String, $updatedAt: String) {
-    userDatabyprops: userData_by_props(nickname: $nickname avatar: $avatar isVip: $isVip vipCode: $vipCode userPoint: $userPoint createdAt: $createdAt updatedAt: $updatedAt) {
-        id
-        nickname
-        avatar
-        isVip
-        vipCode
-        userPoint
-        createdAt
-        updatedAt
-    }
-}
-
-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
-    }
-}
-
-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
-        }
-    }
-}
-
-query orderbyprops($deliveryTime: String, $updatedAt: String, $orderLogistics_id: ID, $payTime: String, $orderTotalPay: Float, $createdAt: String, $orderStatus: String, $userAddress_id: ID, $orderShipFee: Float, $count: Int, $user_id: ID, $productTotalPay: Float, $orderPay_id: ID) {
-    orderbyprops: order_by_props(deliveryTime: $deliveryTime updatedAt: $updatedAt orderLogistics_id: $orderLogistics_id payTime: $payTime orderTotalPay: $orderTotalPay createdAt: $createdAt orderStatus: $orderStatus userAddress_id: $userAddress_id orderShipFee: $orderShipFee count: $count user_id: $user_id productTotalPay: $productTotalPay orderPay_id: $orderPay_id) {
-        deliveryTime
-        updatedAt
-        orderLogistics_id {
-            updatedAt
-            logisticsFee
-            expressId
-            createdAt
-            consigneeTel
-            id
-            consignAddress
-            LogisticsStatus
-            consigneeName
-        }
-        payTime
-        orderTotalPay
-        createdAt
-        orderStatus
-        userAddress_id {
-            address
-            updatedAt
-            telephone
-            default
-            city
-            username
-            postcode
-            createdAt
-            deletedAt
-            id
-
-            area
-            province
-        }
-        id
-        orderShipFee
-        count
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        productTotalPay
-        orderPay_id {
-            id
-
-
-            totalPay
-            transactionId
-            payTime
-        }
-    }
-}
-
-mutation createorderPay($id: ID!, $user_id: ID, $order_id: ID, $totalPay: Float, $transactionId: String, $payTime: String) {
-    createorderPay: create_orderPay(id: $id user_id: $user_id order_id: $order_id totalPay: $totalPay transactionId: $transactionId payTime: $payTime) {
-        id
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        order_id {
-            deliveryTime
-            updatedAt
-
-            payTime
-            orderTotalPay
-            createdAt
-            orderStatus
-
-            id
-            orderShipFee
-            count
-
-            productTotalPay
-        }
-        totalPay
-        transactionId
-        payTime
-    }
-}
-
-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) {
-        email
-        updatedAt
-        password
-        telephone
-        username
-        createdAt
-        openid
-        id
-        userData_id {
-            id
-            nickname
-            avatar
-            isVip
-            vipCode
-            userPoint
-            createdAt
-            updatedAt
-        }
-    }
-}
-
-mutation updateproduct($category: String, $updatedAt: String, $unit: Int, $name: String, $createdAt: String, $status: String, $id: ID, $intro: String, $price: Float, $img: String, $stock: Int) {
-    updateproduct: update_product(category: $category updatedAt: $updatedAt unit: $unit name: $name createdAt: $createdAt status: $status id: $id intro: $intro price: $price img: $img stock: $stock) {
-        category
-        updatedAt
-        unit
-        name
-        createdAt
-        status
-        id
-        intro
-        price
-        img
-        stock
-    }
-}
-
-mutation updateuser($email: String, $updatedAt: String, $password: String, $telephone: String, $username: String, $createdAt: String, $openid: String, $id: ID, $userData_id: ID) {
-    updateuser: update_user(email: $email updatedAt: $updatedAt password: $password telephone: $telephone username: $username createdAt: $createdAt openid: $openid id: $id userData_id: $userData_id) {
-        email
-        updatedAt
-        password
-        telephone
-        username
-        createdAt
-        openid
-        id
-        userData_id {
-            id
-            nickname
-            avatar
-            isVip
-            vipCode
-            userPoint
-            createdAt
-            updatedAt
-        }
-    }
-}
-
-mutation updateuserData($id: ID, $nickname: String, $avatar: String, $isVip: Boolean, $vipCode: String, $userPoint: Int, $createdAt: String, $updatedAt: String) {
-    updateuserData: update_userData(id: $id nickname: $nickname avatar: $avatar isVip: $isVip vipCode: $vipCode userPoint: $userPoint createdAt: $createdAt updatedAt: $updatedAt) {
-        id
-        nickname
-        avatar
-        isVip
-        vipCode
-        userPoint
-        createdAt
-        updatedAt
-    }
-}
-
-mutation createuserCollect($id: ID!, $user_id: ID, $product_id: ID, $createdAt: String, $updatedAt: String) {
-    createuserCollect: create_userCollect(id: $id user_id: $user_id product_id: $product_id 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
-        }
-        createdAt
-        updatedAt
-    }
-}
-
-mutation createuserAddress($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) {
-    createuserAddress: create_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
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        area
-        province
-    }
-}
-
-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)
-}
-
-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
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        area
-        province
-    }
-}
-
-mutation updateadmin($id: ID, $openid: String, $username: String, $password: String, $telephone: String, $email: String, $createdAt: String, $updatedAt: String) {
-    updateadmin: update_admin(id: $id openid: $openid username: $username password: $password telephone: $telephone email: $email createdAt: $createdAt updatedAt: $updatedAt) {
-        id
-        openid
-        username
-        password
-        telephone
-        email
-        createdAt
-        updatedAt
-    }
-}
-
-mutation createuserSearch($id: ID!, $user_id: ID, $keyword: Int, $createdAt: String, $updatedAt: String) {
-    createuserSearch: create_userSearch(id: $id user_id: $user_id keyword: $keyword createdAt: $createdAt updatedAt: $updatedAt) {
-        id
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        keyword
-        createdAt
-        updatedAt
-    }
-}
-
-mutation createproduct($category: String, $updatedAt: String, $unit: Int, $name: String, $createdAt: String, $status: String, $id: ID!, $intro: String, $price: Float, $img: String, $stock: Int) {
-    createproduct: create_product(category: $category updatedAt: $updatedAt unit: $unit name: $name createdAt: $createdAt status: $status id: $id intro: $intro price: $price img: $img stock: $stock) {
-        category
-        updatedAt
-        unit
-        name
-        createdAt
-        status
-        id
-        intro
-        price
-        img
-        stock
-    }
-}
-
-mutation deleteuserData($id: ID, $nickname: String, $avatar: String, $isVip: Boolean, $vipCode: String, $userPoint: Int, $createdAt: String, $updatedAt: String) {
-    deleteuserData: delete_userData(id: $id nickname: $nickname avatar: $avatar isVip: $isVip vipCode: $vipCode userPoint: $userPoint createdAt: $createdAt updatedAt: $updatedAt)
-}
-
-mutation deleteorderProduct($remark: String, $updatedAt: String, $product_id: ID, $orderPay: Float, $createdAt: String, $order_id: ID, $id: ID, $count: Int, $productPay: Float, $user_id: ID) {
-    deleteorderProduct: delete_orderProduct(remark: $remark updatedAt: $updatedAt product_id: $product_id orderPay: $orderPay createdAt: $createdAt order_id: $order_id id: $id count: $count productPay: $productPay user_id: $user_id)
-}
-
-mutation deleteuserCollect($id: ID, $user_id: ID, $product_id: ID, $createdAt: String, $updatedAt: String) {
-    deleteuserCollect: delete_userCollect(id: $id user_id: $user_id product_id: $product_id createdAt: $createdAt updatedAt: $updatedAt)
-}
-
-mutation updateuserCollect($id: ID, $user_id: ID, $product_id: ID, $createdAt: String, $updatedAt: String) {
-    updateuserCollect: update_userCollect(id: $id user_id: $user_id product_id: $product_id 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
-        }
-        createdAt
-        updatedAt
-    }
-}
-
-mutation deleteorder($deliveryTime: String, $updatedAt: String, $orderLogistics_id: ID, $payTime: String, $orderTotalPay: Float, $createdAt: String, $orderStatus: String, $userAddress_id: ID, $id: ID, $orderShipFee: Float, $count: Int, $user_id: ID, $productTotalPay: Float, $orderPay_id: ID) {
-    deleteorder: delete_order(deliveryTime: $deliveryTime updatedAt: $updatedAt orderLogistics_id: $orderLogistics_id payTime: $payTime orderTotalPay: $orderTotalPay createdAt: $createdAt orderStatus: $orderStatus userAddress_id: $userAddress_id id: $id orderShipFee: $orderShipFee count: $count user_id: $user_id productTotalPay: $productTotalPay orderPay_id: $orderPay_id)
-}
-
-mutation deleteadmin($id: ID, $openid: String, $username: String, $password: String, $telephone: String, $email: String, $createdAt: String, $updatedAt: String) {
-    deleteadmin: delete_admin(id: $id openid: $openid username: $username password: $password telephone: $telephone email: $email createdAt: $createdAt updatedAt: $updatedAt)
-}
-
-mutation deleteuserAddress($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) {
-    deleteuserAddress: delete_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)
-}
-
-mutation updateuserCart($id: ID, $user_id: ID, $product_id: ID, $count: Int, $createdAt: String, $updatedAt: String) {
-    updateuserCart: update_userCart(id: $id 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
-    }
-}
-
-mutation deleteuser($email: String, $updatedAt: String, $password: String, $telephone: String, $username: String, $createdAt: String, $openid: String, $id: ID, $userData_id: ID) {
-    deleteuser: delete_user(email: $email updatedAt: $updatedAt password: $password telephone: $telephone username: $username createdAt: $createdAt openid: $openid id: $id userData_id: $userData_id)
-}
-
-mutation createuserCart($id: ID!, $user_id: ID, $product_id: ID, $count: Int, $createdAt: String, $updatedAt: String) {
-    createuserCart: create_userCart(id: $id 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
-    }
-}
-
-mutation createuserData($id: ID!, $nickname: String, $avatar: String, $isVip: Boolean, $vipCode: String, $userPoint: Int, $createdAt: String, $updatedAt: String) {
-    createuserData: create_userData(id: $id nickname: $nickname avatar: $avatar isVip: $isVip vipCode: $vipCode userPoint: $userPoint createdAt: $createdAt updatedAt: $updatedAt) {
-        id
-        nickname
-        avatar
-        isVip
-        vipCode
-        userPoint
-        createdAt
-        updatedAt
-    }
-}
-
-mutation createorder($deliveryTime: String, $updatedAt: String, $orderLogistics_id: ID, $payTime: String, $orderTotalPay: Float, $createdAt: String, $orderStatus: String, $userAddress_id: ID, $id: ID!, $orderShipFee: Float, $count: Int, $user_id: ID, $productTotalPay: Float, $orderPay_id: ID) {
-    createorder: create_order(deliveryTime: $deliveryTime updatedAt: $updatedAt orderLogistics_id: $orderLogistics_id payTime: $payTime orderTotalPay: $orderTotalPay createdAt: $createdAt orderStatus: $orderStatus userAddress_id: $userAddress_id id: $id orderShipFee: $orderShipFee count: $count user_id: $user_id productTotalPay: $productTotalPay orderPay_id: $orderPay_id) {
-        deliveryTime
-        updatedAt
-        orderLogistics_id {
-            updatedAt
-            logisticsFee
-            expressId
-            createdAt
-
-            consigneeTel
-            id
-            consignAddress
-            LogisticsStatus
-
-            consigneeName
-        }
-        payTime
-        orderTotalPay
-        createdAt
-        orderStatus
-        userAddress_id {
-            address
-            updatedAt
-            telephone
-            default
-            city
-            username
-            postcode
-            createdAt
-            deletedAt
-            id
-
-            area
-            province
-        }
-        id
-        orderShipFee
-        count
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        productTotalPay
-        orderPay_id {
-            id
-
-
-            totalPay
-            transactionId
-            payTime
-        }
-    }
-}
-
-mutation deleteuserSearch($id: ID, $user_id: ID, $keyword: Int, $createdAt: String, $updatedAt: String) {
-    deleteuserSearch: delete_userSearch(id: $id user_id: $user_id keyword: $keyword createdAt: $createdAt updatedAt: $updatedAt)
-}
-
-mutation deleteorderPay($id: ID, $user_id: ID, $order_id: ID, $totalPay: Float, $transactionId: String, $payTime: String) {
-    deleteorderPay: delete_orderPay(id: $id user_id: $user_id order_id: $order_id totalPay: $totalPay transactionId: $transactionId payTime: $payTime)
-}
-
-mutation updateorderPay($id: ID, $user_id: ID, $order_id: ID, $totalPay: Float, $transactionId: String, $payTime: String) {
-    updateorderPay: update_orderPay(id: $id user_id: $user_id order_id: $order_id totalPay: $totalPay transactionId: $transactionId payTime: $payTime) {
-        id
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        order_id {
-            deliveryTime
-            updatedAt
-
-            payTime
-            orderTotalPay
-            createdAt
-            orderStatus
-
-            id
-            orderShipFee
-            count
-
-            productTotalPay
-        }
-        totalPay
-        transactionId
-        payTime
-    }
-}
-
-mutation deleteorderLogistics($updatedAt: String, $logisticsFee: Float, $expressId: String, $createdAt: String, $order_id: ID, $consigneeTel: String, $id: ID, $consignAddress: String, $LogisticsStatus: String, $user_id: ID, $consigneeName: String) {
-    deleteorderLogistics: delete_orderLogistics(updatedAt: $updatedAt logisticsFee: $logisticsFee expressId: $expressId createdAt: $createdAt order_id: $order_id consigneeTel: $consigneeTel id: $id consignAddress: $consignAddress LogisticsStatus: $LogisticsStatus user_id: $user_id consigneeName: $consigneeName)
-}
-
-mutation updateuserSearch($id: ID, $user_id: ID, $keyword: Int, $createdAt: String, $updatedAt: String) {
-    updateuserSearch: update_userSearch(id: $id user_id: $user_id keyword: $keyword createdAt: $createdAt updatedAt: $updatedAt) {
-        id
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        keyword
-        createdAt
-        updatedAt
-    }
-}
-
-mutation updateorder($deliveryTime: String, $updatedAt: String, $orderLogistics_id: ID, $payTime: String, $orderTotalPay: Float, $createdAt: String, $orderStatus: String, $userAddress_id: ID, $id: ID, $orderShipFee: Float, $count: Int, $user_id: ID, $productTotalPay: Float, $orderPay_id: ID) {
-    updateorder: update_order(deliveryTime: $deliveryTime updatedAt: $updatedAt orderLogistics_id: $orderLogistics_id payTime: $payTime orderTotalPay: $orderTotalPay createdAt: $createdAt orderStatus: $orderStatus userAddress_id: $userAddress_id id: $id orderShipFee: $orderShipFee count: $count user_id: $user_id productTotalPay: $productTotalPay orderPay_id: $orderPay_id) {
-        deliveryTime
-        updatedAt
-        orderLogistics_id {
-            updatedAt
-            logisticsFee
-            expressId
-            createdAt
-
-            consigneeTel
-            id
-            consignAddress
-            LogisticsStatus
-
-            consigneeName
-        }
-        payTime
-        orderTotalPay
-        createdAt
-        orderStatus
-        userAddress_id {
-            address
-            updatedAt
-            telephone
-            default
-            city
-            username
-            postcode
-            createdAt
-            deletedAt
-            id
-
-            area
-            province
-        }
-        id
-        orderShipFee
-        count
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        productTotalPay
-        orderPay_id {
-            id
-
-
-            totalPay
-            transactionId
-            payTime
-        }
-    }
-}
-
-mutation createorderLogistics($updatedAt: String, $logisticsFee: Float, $expressId: String, $createdAt: String, $order_id: ID, $consigneeTel: String, $id: ID!, $consignAddress: String, $LogisticsStatus: String, $user_id: ID, $consigneeName: String) {
-    createorderLogistics: create_orderLogistics(updatedAt: $updatedAt logisticsFee: $logisticsFee expressId: $expressId createdAt: $createdAt order_id: $order_id consigneeTel: $consigneeTel id: $id consignAddress: $consignAddress LogisticsStatus: $LogisticsStatus user_id: $user_id consigneeName: $consigneeName) {
-        updatedAt
-        logisticsFee
-        expressId
-        createdAt
-        order_id {
-            deliveryTime
-            updatedAt
-
-            payTime
-            orderTotalPay
-            createdAt
-            orderStatus
-
-            id
-            orderShipFee
-            count
-
-            productTotalPay
-        }
-        consigneeTel
-        id
-        consignAddress
-        LogisticsStatus
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        consigneeName
-    }
-}
-
-mutation updateorderLogistics($updatedAt: String, $logisticsFee: Float, $expressId: String, $createdAt: String, $order_id: ID, $consigneeTel: String, $id: ID, $consignAddress: String, $LogisticsStatus: String, $user_id: ID, $consigneeName: String) {
-    updateorderLogistics: update_orderLogistics(updatedAt: $updatedAt logisticsFee: $logisticsFee expressId: $expressId createdAt: $createdAt order_id: $order_id consigneeTel: $consigneeTel id: $id consignAddress: $consignAddress LogisticsStatus: $LogisticsStatus user_id: $user_id consigneeName: $consigneeName) {
-        updatedAt
-        logisticsFee
-        expressId
-        createdAt
-        order_id {
-            deliveryTime
-            updatedAt
-
-            payTime
-            orderTotalPay
-            createdAt
-            orderStatus
-
-            id
-            orderShipFee
-            count
-
-            productTotalPay
-        }
-        consigneeTel
-        id
-        consignAddress
-        LogisticsStatus
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        consigneeName
-    }
-}
-
-mutation createorderProduct($remark: String, $updatedAt: String, $unit: Int, $product_id: ID, $orderPay: Float, $createdAt: String, $order_id: ID, $id: ID!, $count: Int, $productPay: Float, $user_id: ID) {
-    createorderProduct: create_orderProduct(remark: $remark updatedAt: $updatedAt unit: $unit product_id: $product_id orderPay: $orderPay createdAt: $createdAt order_id: $order_id id: $id count: $count productPay: $productPay user_id: $user_id) {
-        remark
-        updatedAt
-        unit
-        product_id {
-            category
-            updatedAt
-            unit
-            name
-            createdAt
-            status
-            id
-            intro
-            price
-            img
-            stock
-        }
-        orderPay
-        createdAt
-        order_id {
-            deliveryTime
-            updatedAt
-
-            payTime
-            orderTotalPay
-            createdAt
-            orderStatus
-
-            id
-            orderShipFee
-            count
-
-            productTotalPay
-        }
-        id
-        count
-        productPay
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-    }
-}
-
-mutation deleteproduct($category: String, $updatedAt: String, $name: String, $createdAt: String, $status: String, $id: ID, $intro: String, $price: Float, $img: String, $stock: Int) {
-    deleteproduct: delete_product(category: $category updatedAt: $updatedAt name: $name createdAt: $createdAt status: $status id: $id intro: $intro price: $price img: $img stock: $stock)
-}
-
-mutation updateorderProduct($remark: String, $updatedAt: String, $unit: Int, $product_id: ID, $orderPay: Float, $createdAt: String, $order_id: ID, $id: ID, $count: Int, $productPay: Float, $user_id: ID) {
-    updateorderProduct: update_orderProduct(remark: $remark updatedAt: $updatedAt unit: $unit product_id: $product_id orderPay: $orderPay createdAt: $createdAt order_id: $order_id id: $id count: $count productPay: $productPay user_id: $user_id) {
-        remark
-        updatedAt
-        unit
-        product_id {
-            category
-            updatedAt
-            unit
-            name
-            createdAt
-            status
-            id
-            intro
-            price
-            img
-            stock
-        }
-        orderPay
-        createdAt
-        order_id {
-            deliveryTime
-            updatedAt
-
-            payTime
-            orderTotalPay
-            createdAt
-            orderStatus
-
-            id
-            orderShipFee
-            count
-
-            productTotalPay
-        }
-        id
-        count
-        productPay
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-    }
-}
-
-mutation createadmin($id: ID!, $openid: String, $username: String, $password: String, $telephone: String, $email: String, $createdAt: String, $updatedAt: String) {
-    createadmin: create_admin(id: $id openid: $openid username: $username password: $password telephone: $telephone email: $email createdAt: $createdAt updatedAt: $updatedAt) {
-        id
-        openid
-        username
-        password
-        telephone
-        email
-        createdAt
-        updatedAt
-    }
-}

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

@@ -1,151 +0,0 @@
-export const getOrderByProps=`query orderbyprops($deliveryTime: String, $updatedAt: String, $orderLogistics_id: ID, $payTime: String, $orderTotalPay: Float, $createdAt: String, $orderStatus: String, $userAddress_id: ID, $orderShipFee: Float, $count: Int, $user_id: ID, $productTotalPay: Float, $orderPay_id: ID) {
-    orderbyprops: order_by_props(deliveryTime: $deliveryTime updatedAt: $updatedAt orderLogistics_id: $orderLogistics_id payTime: $payTime orderTotalPay: $orderTotalPay createdAt: $createdAt orderStatus: $orderStatus userAddress_id: $userAddress_id orderShipFee: $orderShipFee count: $count user_id: $user_id productTotalPay: $productTotalPay orderPay_id: $orderPay_id) {
-        deliveryTime
-        updatedAt
-        payTime
-        orderTotalPay
-        createdAt
-        orderStatus
-        userAddress_id {
-            address
-            updatedAt
-            telephone
-            default
-            city
-            username
-            postcode
-            createdAt
-            deletedAt
-            id
-
-            area
-            province
-        }
-        id
-        orderShipFee
-        count
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        productTotalPay
-        orderPay_id {
-            id
-
-
-            totalPay
-            transactionId
-            payTime
-        }
-    }
-}`
-
-export const getProductByProps=`query orderProductbyprops($remark: String, $updatedAt: String, $product_id: ID, $orderPay: Float, $createdAt: String, $order_id: ID, $count: Int, $productPay: Float, $user_id: ID) {
-    orderProductbyprops: orderProduct_by_props(remark: $remark updatedAt: $updatedAt product_id: $product_id orderPay: $orderPay createdAt: $createdAt order_id: $order_id count: $count productPay: $productPay user_id: $user_id) {
-        remark
-        updatedAt
-        product_id {
-            category
-            updatedAt
-            unit
-            name
-            createdAt
-            status
-            id
-            intro
-            price
-            img
-            stock
-        }
-        orderPay
-        createdAt
-        id
-        count
-        productPay
-    }
-}`
-
-export const createOrders=`mutation createorder($deliveryTime: String, $updatedAt: String, $orderLogistics_id: ID, $payTime: String, $orderTotalPay: Float, $createdAt: String, $orderStatus: String, $userAddress_id: ID, $id: ID!, $orderShipFee: Float, $count: Int, $user_id: ID, $productTotalPay: Float, $orderPay_id: ID) {
-    createorder: create_order(deliveryTime: $deliveryTime updatedAt: $updatedAt orderLogistics_id: $orderLogistics_id payTime: $payTime orderTotalPay: $orderTotalPay createdAt: $createdAt orderStatus: $orderStatus userAddress_id: $userAddress_id id: $id orderShipFee: $orderShipFee count: $count user_id: $user_id productTotalPay: $productTotalPay orderPay_id: $orderPay_id) {
-        deliveryTime
-        updatedAt
-        orderLogistics_id {
-            updatedAt
-            logisticsFee
-            expressId
-            createdAt
-            consigneeTel
-            id
-            consignAddress
-            LogisticsStatus
-            consigneeName
-        }
-        payTime
-        orderTotalPay
-        createdAt
-        orderStatus
-        userAddress_id {
-            address
-            updatedAt
-            telephone
-            default
-            city
-            username
-            postcode
-            createdAt
-            deletedAt
-            id
-            area
-            province
-        }
-        id
-        orderShipFee
-        count
-        user_id {
-            email
-            updatedAt
-            password
-            telephone
-            username
-            createdAt
-            openid
-            id
-        }
-        productTotalPay
-        orderPay_id {
-            id
-            totalPay
-            transactionId
-            payTime
-        }
-    }
-}`
-
-
-export const createOrderProducts=`mutation createorderProduct($remark: String, $updatedAt: String, $unit: Int, $product_id: ID, $orderPay: Float, $createdAt: String, $order_id: ID, $id: ID!, $count: Int, $productPay: Float, $user_id: ID) {
-    createorderProduct: create_orderProduct(remark: $remark updatedAt: $updatedAt unit: $unit product_id: $product_id orderPay: $orderPay createdAt: $createdAt order_id: $order_id id: $id count: $count productPay: $productPay user_id: $user_id) {
-        remark
-        updatedAt
-        unit
-      
-        orderPay
-        createdAt
-        id
-        count
-        productPay
-    }
-}`
-
-export const DELETE_ORDER=`mutation deleteorder($deliveryTime: String, $updatedAt: String, $orderLogistics_id: ID, $payTime: String, $orderTotalPay: Float, $createdAt: String, $orderStatus: String, $userAddress_id: ID, $id: ID, $orderShipFee: Float, $count: Int, $user_id: ID, $productTotalPay: Float, $orderPay_id: ID) {
-    deleteorder: delete_order(deliveryTime: $deliveryTime updatedAt: $updatedAt orderLogistics_id: $orderLogistics_id payTime: $payTime orderTotalPay: $orderTotalPay createdAt: $createdAt orderStatus: $orderStatus userAddress_id: $userAddress_id id: $id orderShipFee: $orderShipFee count: $count user_id: $user_id productTotalPay: $productTotalPay orderPay_id: $orderPay_id)
-}`
-
-export const DELETE_ORDER_PRODUCT=`mutation deleteorderProduct($remark: String, $updatedAt: String, $product_id: ID, $orderPay: Float, $createdAt: String, $order_id: ID, $id: ID, $count: Int, $productPay: Float, $user_id: ID) {
-    deleteorderProduct: delete_orderProduct(remark: $remark updatedAt: $updatedAt product_id: $product_id orderPay: $orderPay createdAt: $createdAt order_id: $order_id id: $id count: $count productPay: $productPay user_id: $user_id)
-}`

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

@@ -1,30 +0,0 @@
-export const getProductByProps=`query productbyprops($category: String, $updatedAt: String, $name: String, $createdAt: String, $status: String, $intro: String, $price: Float, $img: String, $stock: Int) {
-    productbyprops: product_by_props(category: $category updatedAt: $updatedAt name: $name createdAt: $createdAt status: $status intro: $intro price: $price img: $img stock: $stock) {
-        category
-        updatedAt
-        unit
-        name
-        createdAt
-        status
-        id
-        intro
-        price
-        img
-        stock
-    }
-}`
-export const getProductById=`query productbyid($id: ID) {
-    productbyid: product_by_id(id: $id) {
-        category
-        updatedAt
-        unit
-        name
-        createdAt
-        status
-        id
-        intro
-        price
-        img
-        stock
-    }
-}`

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

@@ -1,44 +0,0 @@
-export const getShopCarByProps=`query userCartbyprops($user_id: ID) {
-    userCartbyprops: userCart_by_props(user_id: $user_id) {
-        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)
-}`
-
-export const createShopCar=`mutation createuserCart($id: ID!, $user_id: ID, $product_id: ID, $count: Int, $createdAt: String, $updatedAt: String) {
-    createuserCart: create_userCart(id: $id user_id: $user_id product_id: $product_id count: $count createdAt: $createdAt updatedAt: $updatedAt) {
-        id
-        count
-        createdAt
-        updatedAt
-    }
-}`

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

@@ -1,12 +0,0 @@
-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
-    }
-}`

src/case/ShopApp/src/api/graphql_request.js

@@ -1,13 +0,0 @@
-import { request } from 'graphql-request'
-import URL from './url_config'
-
-
-export const graphqls=(schema,variables)=>{
-   
-    //console.log(URL.HTTP_DATA_URL)
-    const http_request=URL.HTTP_DATA_URL
-      
-    return request(http_request, schema,variables).then(data =>data).catch(data=>data)
-    
-}
-

src/case/ShopApp/src/api/url_config.js

@@ -1,7 +0,0 @@
-var config={
-    USER_ID:"ovtkn4zONC3IzhpykQ7cSLZ85YFg",
-    HTTP_DATA_URL:'http://ecommerce.ioobot.cn/graphql',  //  电商fc  http://ec.ioobot.cn/graphql
-    HTTP_PAY_URL:'https://xcx.ioobot.com/payinfo'
-}
-
-export default config

src/case/ShopApp/src/app.css

@@ -0,0 +1,121 @@
+body {
+    color: rgba(0, 0, 0, 0.86);
+}
+
+.tabbar {
+    width: 100%;
+    height: 50px;
+    position: fixed;
+    bottom: 0;
+    background-color: white;
+    z-index: 1;
+    border-top: 1px solid #F3F3F3;
+    text-align: center;
+    transition: all ease 0.3s;
+}
+
+.tabbar-content {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    height: 50px;
+}
+
+.tabbar-hidden {
+    height: 0;
+    transition: all ease 0.3s;
+}
+
+.tabbar-title {
+    font-size: 10px;
+    margin: 3px 0 0 0;
+    line-height: 1;
+    text-align: center;
+}
+
+a.active {
+    color: #258fff;
+    text-decoration: none;
+}
+
+a {
+    color: #b9b9b9;
+    text-decoration: none;
+}
+
+.navbar {
+    border-bottom: 1px solid #f5f5f9;
+    position: fixed;
+    top: 0;
+    width: 100%;
+    z-index: 2;
+}
+
+.tabbar-route-content {
+    margin-bottom: 50px;
+}
+
+.content-wrap {
+    padding-top: 45px;
+}
+
+.selected {
+    width: 50%;
+    min-width: 100px;
+    position: absolute;
+    bottom: 0;
+}
+
+.selected_button-red {
+    width: 30px;
+    height: 30px;
+    color: white;
+    background-color: #f44;
+    border: none;
+}
+
+.selected_button-white {
+    width: 30px;
+    height: 30px;
+    background-color: #fff;
+    border: 1px solid #ebedf0;
+}
+
+.selected_button:active {
+    background-color: #e8e8e8;
+}
+
+.selected_button-disabled {
+    background-color: #f8f8f8;
+    color: black;
+}
+
+.selected_input {
+    width: 33px;
+    height: 30px;
+    border: 1px solid #ebedf0;
+    border-radius: 0;
+    color: black;
+    font-size: 14px;
+    text-align: center;
+}
+
+.ant-message-notice-content {
+    background: rgba(0,0,0,.7);
+    color: white;
+}
+
+.am-flexbox {
+    overflow: visible;
+}
+
+.hide-extra-text {
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.gray {
+    color: gray;
+}

src/case/ShopApp/src/components/AddressPage/AddressPage.css

@@ -1,9 +0,0 @@
-.addressList *{
-    font-size: 12px;
-}
-
-.addressPageWrap{
-    position: relative;
-    z-index: 3;
-    padding: 0 5px;
-}

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

@@ -1,97 +0,0 @@
-import React, { Component } from 'react'
-import RadioAddress from './RadioAddress'
-import EditAddress from './EditAddress'
-import { List } from 'antd-mobile';
-import NavBars from '../Common/NavBar'
-import './AddressPage.css'
-
-import {graphqls} from '../../api/graphql_request'
-import {getAddressByProps} from '../../api/graphql/address'
-
-import {PageContext} from '../../context/context'
-
-
-const Item = List.Item;
-const Brief = Item.Brief;
-
-class AddressPage extends Component {
-  constructor(props){
-      super(props)
-      this.state={
-        addressList:[]
-      }
-    //console.log(props.address)
-    this.getAddress=this.getAddress.bind(this)
-  }
-
-
-  componentDidMount(){
-    let user_id=sessionStorage.getItem('openid')  
-    this.getAddress({user_id})
-  }
-
-  getAddress(data){
-    graphqls(getAddressByProps,data).then((res)=>{
-        //console.log(res.userAddressbyprops)
-        this.setState({
-          addressList:res.userAddressbyprops
-        })
-    })
-  }
-
-  renderPage(page){
-    let triggerAddress=this.props.address.triggerAddress
-    //console.log('000',triggerAddress)
-    if(page===true){
-      return(
-        <div>
-        <NavBars navBarText="编辑地址" changePage={this.props.changePage} page="addressPage" triggerAddress={triggerAddress}/>
-        <div style={{marginTop:"45px"}}></div>
-        <EditAddress address={this.props.address} address_id={this.props.address_id} getAddress={this.getAddress} setAddressId={this.props.setAddressId} />
-        </div>
-        )
-    }else{
-      return(
-        <div>
-          <NavBars navBarText="我的地址" changePage={this.props.changePage} page="user"/>
-          <div style={{marginTop:"45px"}}></div>
-          <div className="addressPageWrap">
-            <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} triggerAddress={this.props.triggerAddress} changePage={this.props.changePage} getAddress={this.getAddress} setAddressId={this.props.setAddressId} address_id={this.props.address_id}/>
-            </div>
-          </div>
-        </div>
-        
-      )
-    }
-  }
-
-
-  render() {
-    return (
-      <div>{this.renderPage(this.props.address.editAddress)}</div>
-    )
-  }
-
-
-}
-
-export default props=>{
-  return(
-      <PageContext.Consumer>
-          {(obj)=><AddressPage {...props} {...obj}/>}
-      </PageContext.Consumer>
-  )
-}
-
-
-

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

@@ -1,34 +0,0 @@
-import React, { Component } from 'react'
-import FormAddress from './FormAddress'
-
-import {graphqls} from '../../api/graphql_request'
-import {getAddressByProps,createAddress} from '../../api/graphql/address'
-import {successToast} from '../Common/Toast'
-
-export default class EditAddress extends Component {
-  constructor(props){
-    super(props)
-    this.createUserAddress=this.createUserAddress.bind(this)
-  }
-  componentDidMount(){
-    //console.log('EditAddress mount')
-  }
-
-  componentWillUnmount(){
-    this.props.address.triggerAddress(false)
-  }
-
-  //创建用户地址
-
-  createUserAddress(data){
-    graphqls(createAddress,data).then(e=>{successToast('创建地址成功',2)})
-    //console.log('---------',data)
-  }
-  render() {
-    return (
-      <div>
-        <FormAddress setAddressId={this.props.setAddressId}  createUserAddress={this.createUserAddress} address={this.props.address} address_id={this.props.address_id} getAddress={this.getAddress}/>
-      </div>
-    )
-  }
-}

src/case/ShopApp/src/components/AddressPage/FormAddress.css

@@ -1,37 +0,0 @@
-.pickerWrap{
-    width: 100%;;
-    height: auto;
-    /*border: 1px solid #ccc;*/
-}
-
-
-div.am-picker-popup-mask {
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-}
-div.am-list-body{
-    background-color: transparent;
-}
-
-
-div.am-picker-popup-wrap ,div.am-picker-popup-wrap{
-    position: absolute !important;
-    /* bottom: 0; */
-    left: 910px;
-    top: 490px;
-    width: 299px;
-    height: 293px;
-}
-
-div.am-list-item div.am-input-label.am-input-label-5 ,div.am-list-item .am-input-control input,div.am-list-item .am-list-line .am-list-extra{
-    font-size: 12px;
-}
-
-
-.am-button-primary {
-    margin-top: 20px;
-    font-size: 14px;
-}

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

@@ -1,217 +0,0 @@
-import React, { Component } from 'react'
-
-import { List, InputItem, WhiteSpace ,Picker,PickerView, Button, WingBlank} from 'antd-mobile';
-import { createForm } from 'rc-form';
-import './FormAddress.css'
-
-import {graphqls} from '../../api/graphql_request'
-import {getAddressById,updateAddress} from '../../api/graphql/address'
-
-import { district} from 'antd-mobile-demo-data';
-
-import config from '../../api/url_config'
-import {successToast} from '../Common/Toast'
-
-const APPID =config.APPID
-
-
-export default class FormAddress extends Component {
-  constructor(props){
-      super(props)
-
-      this.state={
-          areaShow:false,
-          name:'',
-          phone:'',
-          detail:'',
-          code:'',
-          "area": "",
-          "city": "",
-          "province": ""
-      }
-
-      this.trigger=this.trigger.bind(this)
-      this.nameChange=this.nameChange.bind(this)
-      this.phoneChange=this.phoneChange.bind(this)
-      this.detailChange=this.detailChange.bind(this)
-      this.codeChange=this.codeChange.bind(this)
-      this.submit=this.submit.bind(this)
-  }
-
-  componentWillMount(){
-    //console.log('from render------',this.props.address_id)
-    if(this.props.address_id){
-      graphqls(getAddressById,{id:this.props.address_id}).then((e)=>{
-        //console.log('--------getAddressBYID------------',e.userAddressbyid)
-        let address=e.userAddressbyid
-        this.setState({
-          name:address.username,
-          phone:address.telephone,
-          detail:address.address,
-          code:address.postcode,
-          "area": address.area,
-          "city": address.city,
-          "province": address.province
-        })
-      })
-    }
-
-  }
-
-  componentWillUnmount(){
-    this.props.setAddressId('')
-  }
-  nameChange(e){
-    //console.log(e)
-    this.setState({
-      name:e
-    })
-  }
-
-  phoneChange(e){
-    //console.log(e)
-    this.setState({
-      phone:e
-    })
-  }
-
-  detailChange(e){
-    //console.log(e)
-    this.setState({
-      detail:e
-    })
-  }
-  codeChange(e){
-    //console.log(e)
-    this.setState({
-      code:e
-    })
-  }
-
-  areaChange(e=[0]){
-    //console.log('e',e)
-    //console.log(district)
-
-    let provinceCode=e[0],cityCode=e[1],areaCode=e[2]
-    
-  
-    let province='',city='',area=''
-
-    district.map((item)=>{
-      if(item.value===provinceCode){
-        //console.log('province',item)
-        province=item.label
-        item.children.map((item)=>{
-          if(item.value===cityCode){
-            //console.log('city',item)
-            city=item.label
-            item.children.map((item)=>{
-              if(item.value===areaCode){
-               // console.log('area',item)
-                area=item.label
-              }
-              return 0
-            })
-          }
-          return 0
-        })
-      }
-      return 0
-    })
-
-    this.setState({
-      province,
-      city,
-      area
-    })
-  }
-
-  updateUserAddress(data){
-    graphqls(updateAddress,data).then(e=>{
-      successToast('更新地址成功',2)
-    })
-  }
-  submit(){
-    let data={
-      "address": this.state.detail,
-      "area": this.state.area,
-      "city": this.state.city,
-      "default":0,
-      "id": new Date().getTime()+parseInt(Math.random(),10),
-      "postcode": this.state.code,
-      "province": this.state.province,
-      "telephone": this.state.phone,
-      "updatedAt": "",
-      "user_id": APPID,
-      "username": this.state.name
-    }
-    //console.log(this.props)
-    if(this.props.address_id){
-      this.updateUserAddress(data)
-    }else{
-      this.props.createUserAddress(data)
-    }
-    
-  }
-
-  trigger(){
-    this.setState({
-        areaShow:!this.state.areaShow
-    })
-  }
-  render() {
-    //const { getFieldProps } = this.props.form;
-    return (
-      <div>
-        <div style={{marginTop:"50px"}}>
-        <List renderHeader={''} >
-        <InputItem
-          placeholder="姓名" 
-          value={this.state.name}
-          onChange={(e)=>{this.nameChange(e)}}
-        >收货人</InputItem>
-        <div style={{marginTop:"15px"}}></div>
-        <InputItem
-          type="phone"
-          placeholder="手机号码"
-          value={this.state.phone}
-          onChange={(e)=>{this.phoneChange(e)}}
-        >手机号码</InputItem>
-        <div style={{marginTop:"15px"}}></div>
-
-        <div className='pickerWrap' style={this.state.areaShow ? {}:{display:""}}>
-          <List style={{ backgroundColor: 'white' }} className="picker-list">
-            <Picker extra={this.state.province+this.state.city+this.state.area}
-              data={district}
-              title="Areas"
-              onOk={e => console.log('ok', e)}
-              onDismiss={e => this.areaChange(e)}
-              onPickerChange={e=> this.areaChange(e)}
-              indicatorStyle={{position:"absolute",bottom:"0",left:"0"}}
-            >
-              <List.Item arrow="horizontal">点击选择地区</List.Item>
-            </Picker>
-          </List>
-        </div>
-        <div style={{marginTop:"15px"}}></div>
-        <InputItem
-          placeholder="详细地址"
-          value={this.state.detail}
-          onChange={(e)=>{this.detailChange(e)}}
-        >详细地址</InputItem>
-        <div style={{marginTop:"15px"}}></div>
-        <InputItem
-          type="number"
-          placeholder="邮编"
-          value={this.state.code}
-          maxLength={6}
-          onChange={(e)=>{this.codeChange(e)}}
-        >邮编</InputItem>
-      </List>
-      
-      <div style={{width:'100%',display:'flex',justifyContent:'center'}}><div style={{width:'256px'}}><Button type="primary" onClick={this.submit}>提交</Button></div></div>
-        </div>
-      </div>
-    )
-  }
-}

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

@@ -1,50 +0,0 @@
-.my-radio .am-radio {
-    padding: 2.5px;
-    border: 1px solid #ccc;
-    border-radius: 50%;
-    margin-right: 5px;
-    
-  }
-
-  .am-list-item .am-list-line .am-list-content{
-    font-size: 12px;
-  }
-
-  .addressListWrap{
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    padding: 5px 0;
-    overflow: hidden;
-    margin-top: 10px;
-    border-bottom: 1px solid #d8d2d2;
-    background-color: #ffffff;
-    margin-bottom: 15px;
-  }
-
-  .left-icon{
-    height: 15px;
-    flex-basis: 15px;
-    border-radius: 50%;
-    margin-right: 5px;
-    border: 1px solid #ccc;
-  }
-
-  .left-icon:hover{
-    box-shadow: 0 0 1px 1px #ccc;
-  }
-  .right-icon{
-    height: 20px;
-    width: 20px;
-    flex-basis: 21px;
-    background: url('../../images/modify.svg') no-repeat center center;
-  }
-
-  .middle-text{
-    height: 20px;
-    flex-basis: 248px;
-    line-height: 20px;
-    padding: 0 5px;
-  }
-
- 

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

@@ -1,77 +0,0 @@
-import React, { Component } from 'react';
-import { List } from 'antd-mobile';
-
-import './RadioAddress.css'
-
-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)
-  };
-
-  toModifyAddress(id){
-    this.props.setAddressId(id)
-    this.props.triggerAddress(true)
-  }
-
-  updateAddress=(id)=>{
-    let that=this
-    //console.log('更新启动')
-    let user_id=sessionStorage.getItem('openid')
-    let data={id,default:1}
-    
-    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   >
-              <Item
-                thumb={item.default===1 ? "https://zos.alipayobjects.com/rmsportal/dNuvNrtqUztHCwM.png" : ''}
-                arrow="horizontal"
-                onClick={() => {}}
-              ></Item>
-            </List>
-          ))}
-          </List>*/}
-
-          {
-            addressList.map((item)=>{
-              return(
-                <div className="addressListWrap" key={item.id}>
-                  <span className="left-icon" onClick={()=>this.onChange(item.id)} style={item.default===1?{background: "#1890ff"}:{}}></span>
-                  <span className="middle-text">{item.username+item.telephone+item.province+item.city+item.area+item.address}</span>
-                  <span className="right-icon" onClick={()=>this.toModifyAddress(item.id)}></span>
-                </div>
-              )
-            })
-          }
-      </div>
-    );
-  }
-}

src/case/ShopApp/src/components/AddressPage/areaData.js

@@ -1,82 +0,0 @@
-export const province = [
-    {
-      label: '北京',
-      value: '01',
-      children: [
-        {
-          label: '东城区',
-          value: '01-1',
-        },
-        {
-          label: '西城区',
-          value: '01-2',
-        },
-        {
-          label: '崇文区',
-          value: '01-3',
-        },
-        {
-          label: '宣武区',
-          value: '01-4',
-        },
-      ],
-    },
-    {
-      label: '浙江',
-      value: '02',
-      children: [
-        {
-          label: '杭州',
-          value: '02-1',
-          children: [
-            {
-              label: '西湖区',
-              value: '02-1-1',
-            },
-            {
-              label: '上城区',
-              value: '02-1-2',
-            },
-            {
-              label: '江干区',
-              value: '02-1-3',
-            },
-            {
-              label: '下城区',
-              value: '02-1-4',
-            },
-          ],
-        },
-        {
-          label: '宁波',
-          value: '02-2',
-          children: [
-            {
-              label: 'xx区',
-              value: '02-2-1',
-            },
-            {
-              label: 'yy区',
-              value: '02-2-2',
-            },
-          ],
-        },
-        {
-          label: '温州',
-          value: '02-3',
-        },
-        {
-          label: '嘉兴',
-          value: '02-4',
-        },
-        {
-          label: '湖州',
-          value: '02-5',
-        },
-        {
-          label: '绍兴',
-          value: '02-6',
-        },
-      ],
-    },
-  ];

src/case/ShopApp/src/components/App/App.css

@@ -1,66 +0,0 @@
-.AppWrap{
-    height: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-}
-
-.App{
-    box-sizing: border-box;
-    position: relative;
-    width: 300px;
-    height: 534px;
-    overflow: hidden;
-    overflow-x: hidden;
-    overflow-y: hidden;
-    background-color: #f5f5f5;;
-}
-
-.App *::-webkit-scrollbar {display:none !important}
-
-.phone6s{
-    padding: 84px 21px;
-    background: url('https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/6s.png') no-repeat;
-    background-size: cover;
-}
-
-p.p1,p.p2,p.p3{
-    font-size: 10px;
-}
-
-
-.AppWrap .title{
-    font-size: 13px;
-}
-
-
-
-
-.indexPage{
-    position: relative;
-    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;
-}
-
-.shopAppWrap .orderCnerWrap .am-tabs-default-bar-tab{
-    font-size: 12px !important;
-}
-
-.shopAppWrap .orderList button{
-    border-radius: 3px;
-    border: none;
-    background: green;
-    padding: 5px 10px;
-    color: #fff;
-}
-
-
-
-

src/case/ShopApp/src/components/App/NavBar.css

@@ -1,11 +0,0 @@
-.navBars{
-    position: absolute;
-    width: 100%;
-    top: 0;
-    left: 0;
-    z-index:100;
-}
-
-div.am-navbar{
-    background-color: black;
-}

src/case/ShopApp/src/components/App/NavBar.jsx

@@ -1,33 +0,0 @@
-import React, { Component } from 'react';
-import { NavBar, Icon } from 'antd-mobile';
-
-import './NavBar.css'
-import {PageContext} from '../../context/context'
-
-export default class NavBars extends Component{
-    render(){
-        return(
-            <PageContext.Consumer>
-                {({changePage})=>{
-                    return (
-                        <div className="navBars">
-                            <NavBar
-                            mode="dark"
-                            icon={<Icon type="left" />}
-                            onLeftClick={() =>  changePage('index')}
-                            rightContent={[
-                                <Icon key="0" type="search" style={{ marginRight: '16px' }} />,
-                                <Icon key="1" type="ellipsis" />,
-                            ]}
-                            ><span style={{fontSize:'14px'}}>电商小程序</span>
-                            </NavBar>
-                        </div>
-                    )
-                }}
-            </PageContext.Consumer>
-        )
-    }
-}
-
-
-

src/case/ShopApp/src/components/App/TabBarBottom.jsx

@@ -1,127 +0,0 @@
-import React, { Component } from 'react';
-import { TabBar } from 'antd-mobile';
-import './TabBarBottom.css'
-
-
-class TabBarBottom extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      selectedTab: 'index',
-      hidden: false,
-      fullScreen: true,
-    };
-    this.handleChnage=this.handleChnage.bind(this)
-  }
-  renderContent(page) { 
-    // if(page==='index'){this.props.changePage('index')}
-    // if(page==='shopCar'){this.props.changePage('shopCar')}
-    // if(page==='user'){this.props.changePage('user')}
-  }
-  handleChnage(page){
-    this.props.changePage(page)
-  }
-  render() {
-    //这里渲染一次
-    return (
-      <div style={this.state.fullScreen ? { position: 'absolute', height: '100%', width: '100%', bottom: 0 } : { height: 400 }} className="TabBarBottom">
-        <TabBar
-          unselectedTintColor="#949494"
-          tintColor="#33A3F4"
-          barTintColor="white"
-          hidden={this.state.hidden}
-        >
-          <TabBar.Item
-            title="商品"
-            key="index"
-            icon={<div style={{
-              width: '22px',
-              height: '22px',
-              background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/home.svg) center center /  21px 21px no-repeat' }}
-            />
-            }
-            selectedIcon={<div style={{
-              width: '22px',
-              height: '22px',
-              background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/home_s.svg) center center /  21px 21px no-repeat' }}
-            />
-            }
-            selected={this.state.selectedTab === 'index'}
-         
-            onPress={() => {
-              this.setState({
-                selectedTab: 'index',
-              });
-              this.handleChnage('index')
-            }}
-            data-seed="logId"
-          >
-            {this.renderContent('index')}
-          </TabBar.Item>
-
-          <TabBar.Item
-            icon={
-              <div style={{
-                width: '22px',
-                height: '22px',
-                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/shopcar.svg) center center /  21px 21px no-repeat' }}
-              />
-            }
-            selectedIcon={
-              <div style={{
-                width: '22px',
-                height: '22px',
-                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/shopcar_s.svg) center center /  21px 21px no-repeat' }}
-              />
-            }
-            title="购物车"
-            key="shopCar"
-          
-            selected={this.state.selectedTab === 'shopCar'}
-            onPress={() => {
-              this.setState({
-                selectedTab: 'shopCar',
-              });
-              this.handleChnage('shopCar')
-            }}
-            data-seed="logId1"
-          >
-            {this.renderContent('shopCar')}
-          </TabBar.Item>
-
-          <TabBar.Item
-            icon={
-              <div style={{
-                width: '22px',
-                height: '22px',
-                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user.svg) center center /  21px 21px no-repeat' }}
-              />
-            }
-            selectedIcon={
-              <div style={{
-                width: '22px',
-                height: '22px',
-                background: 'url(https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/user_s.svg) center center /  21px 21px no-repeat' }}
-              />
-            }
-            title="用户中心"
-            key="user"
-  
-            selected={this.state.selectedTab === 'user'}
-            onPress={() => {
-              this.setState({
-                selectedTab: 'user',
-              });
-              this.handleChnage('user')
-            }}
-          >
-            {this.renderContent('user')}
-          </TabBar.Item>
-        </TabBar>
-      </div>
-    );
-  }
-}
-
-
-export default TabBarBottom

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

@@ -1,15 +0,0 @@
-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/List.jsx

@@ -1,33 +0,0 @@
-import React, { Component } from 'react'
-import { List } from 'antd-mobile';
-const Item = List.Item;
-
-export default class Lists extends Component {
-  render() {
-    return (
-        <List >
-            {
-                this.props.icon ?
-                <Item
-                extra={this.props.extra}
-                thumb={this.props.icon}
-                arrow="horizontal"
-                onClick={() => {this.props.callback()}}
-                >{this.props.text}</Item>
-                :
-                <Item
-                extra={this.props.extra}
-                arrow="horizontal"
-                onClick={() => {this.props.callback()}}
-                >{this.props.text}</Item>
-            }
-        </List>
-    )
-  }
-}
-
-
-
-
-
-

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

@@ -1,38 +0,0 @@
-import React, { Component } from 'react';
-import { NavBar, Icon } from 'antd-mobile';
-
-
-export default class NavBars extends Component{
-    render(){
-        let page=this.props.page||'home'
-        let triggerAddress=this.props.triggerAddress||console.log
-        //console.log(this.props)
-        return(
-            <div className="navBars" style={{zIndex:"2000"}}>
-                <NavBar
-                mode="dark" 
-                icon={ <Icon type="left"/> }
-                onLeftClick={() => {
-                    triggerAddress(false)
-                    this.props.changePage(page)
-                    }
-                }
-                rightContent={[
-                    <Icon key="0" type="search" style={{ marginRight: '16px' }}/>,
-                    <Icon key="1" type="ellipsis" />,
-                ]}
-                ><span style={{fontSize:'14px'}}>{this.props.navBarText}</span>
-                </NavBar>
-            </div>
-        )
-    }
-}
-
-
-
-
-
-
-
-
-

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

@@ -1,6 +0,0 @@
-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,11 +0,0 @@
-//封装Toast
-import React, { Component } from 'react'
-import { Toast, WhiteSpace, WingBlank, Button } from 'antd-mobile';
-
-
-export const successToast=(message,time)=> {
-  Toast.success(message, time);
-}
-export const failToast=(message,time)=> {
-  Toast.fail(message, time);
-}

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

@@ -1,59 +0,0 @@
-div.Card{
-    font-size:15px;
-}
-
-div.imgWrap{
-    flex-basis:100px;
-}
-.hot{
-    color:red;
-    font-size: 12px;
-}
-.title{
-    font-size: 15px;
-}
-p{
-    padding: 0;
-    margin: 0;
-}
-
-
-.rightsidebar{
-    padding-left: 8px;
-    text-align: right;
-}
-
-.indexPage .rightsidebar .p1,.rightsidebar .p2{
-    font-size: 14px;
-    text-align: right !important;
-}
-
-
-.p3{
-    text-align: right;
-    margin-top: 60px;
-}
-.sidebar{
-    padding-left:10px;
-    font-size: 14px;
-    flex-grow: 1;
-    width: 100px;
-    
-}
-.bodyWrap{
-    display: flex;
-    overflow: hidden;
-}
-
-.rightsidebar{
-    flex-basis:100px;
-}
-
-div.am-tab-bar-item{
-    height: auto;
-    background-color: #ccc;
-}
-
-div.am-card{
-   border-radius: 0;
-}

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

@@ -1,78 +0,0 @@
-import React, { Component } from 'react';
-import { Link } from 'react-router-dom'
-import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
-//import { Item } from 'antd-mobile/lib/tab-bar';
-import './Cards.css'
-import {PageContext} from '../../context/context'
-
-
-
-
-
-
-class Cards extends Component{
-    constructor(props){
-        //console.log('111',props)
-        super(props)
-        this.state={
-            product_id:''
-        }
-    }
-    
-    render(){
-        //console.log('cardProps',this.props.products)
-        const Cardss=this.props.products.map((item,index)=>{
-            //console.log(item)
-            return (
-                <PageContext.Consumer key={index} >
-                    {({changePage})=>{
-                        return(
-                            <WingBlank size="lg" className="Card">
-                                {/*<Link to={"/detail?product_id="+item.id}>*/}
-                                    <Card onClick={(e)=>{changePage('detail',item.id)}}>
-                                        <Card.Header
-                                            title={<span className="title">{item.name}</span>}
-                                            extra={<span className="hot">热门</span>} 
-                                        />
-                                        <Card.Body>
-                                            <div className="bodyWrap">
-                                                <div className="imgWrap">
-                                                    <img src={item.img} alt="xxx" height="100px" width="100px"/>
-                                                </div>
-                                                <div className="sidebar">
-                                                    <p className="p1">{item.intro}</p>
-                                                </div>
-                                                <div className="rightsidebar">
-                                                    <p className="p2">{item.price}/斤</p>
-                                                    <p className="p3">库存:{item.stock}</p>
-                                                </div>
-                                            </div>
-                                        </Card.Body>
-                                        <Card.Footer content="" extra={<div></div>}/>
-                                    </Card>
-                                {/*</Link>*/}
-                                     <WhiteSpace size="lg" />
-                            </WingBlank>
-                        )
-                    }}
-                </PageContext.Consumer>
-               
-            )
-        })
-
-        return (
-            <div>
-               {Cardss}
-            </div>
-        )
-    }
-}
-export default Cards
-
-
-
-
-
-
-
-

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

@@ -1,19 +0,0 @@
-.homeWrap *{
-    font-size: 12px;
-}
-
-.productList{
-    position: relative;
-    z-index: 3;
-    -webkit-overflow-scrolling: touch;
-    overflow-x: scroll;
-    white-space: nowrap;
-    height: 333px;
-    background-color: #f5f5f5;
-}
-
-.homeWrap .am-card-header{
-    padding:1px 15px;
-}
-
-

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

@@ -1,111 +0,0 @@
-import React, { Component } from 'react';
-import { ActivityIndicator } from 'antd-mobile';
-import Search from './Search'
-import TabBarTop from './TabBarTop'
-import Cards from './Cards'
-import NavBars from '../Common/NavBar'
-
-import {graphqls} from '../../api/graphql_request'
-import {getProductByProps} from '../../api/graphql/product'
-
-import './HomePage.css'
-
-
-
-class HomePage extends Component{
-    constructor(props){
-        super(props)
-        this.state={
-            tabs:[],
-            products:[],
-            select:'所有果品',
-            loading:true
-        }
-    }
-
-    componentDidMount () {
-        //console.log('tets')
-        this.getGoods()
-    }
-    //获取所有商品
-    getGoods(variables={}){
-        return graphqls(getProductByProps,variables).then((data)=>{
-            // console.log(data)
-            let products=data.productbyprops||[]
-            let arr=products.map((item)=>{
-              return item.category
-            })
-            arr = Array.from(new Set(arr))
-            let tabs=arr.map((item)=>{
-              return {title:item}
-            })
-            this.setState({
-              tabs:[{title: '所有果品'},...tabs],
-              products:products,
-              select:'所有果品',
-              detail:'false',
-              loading:false
-            })
-           // sessionStorage.setItem("products",JSON.stringify(products))
-            })
-    }
-
-    tabChange(e){
-        let category=e.title,
-            products = JSON.parse(sessionStorage.getItem("products"));
-        if(category==='所有果品'){
-          this.setState({
-            products:products
-          })
-        }else{
-          let arr =products.filter((item)=>{
-            return item.category===category
-          })
-          this.setState({
-            products:arr
-          })
-        } 
-    }
-    
-    toDetail(e){
-        this.setState({
-            detail:"true"
-        })
-    }
-    changeComponent(e){
-        if(e==='1'){
-            return(
-                <div>detail</div>
-            )
-        }else if(e==='2'){
-            return(
-                <div>order</div>
-            )
-        }else{
-            //console.log('222changePage',this.props.changePage)
-            return(
-                <div style={{paddingTop:"1px"}}>
-                    <ActivityIndicator toast text="loading" animating={this.state.loading}/>
-
-                    <NavBars navBarText="商品" changePage={this.props.changePage} page="index"/>
-
-                    <div style={{marginTop:"45px"}}><Search getProductByName={this.getGoods.bind(this)} /></div>
-                    <TabBarTop tabs={this.state.tabs} tabChange={this.tabChange.bind(this)}/>
-                    <div className="productList">
-                        <Cards products={this.state.products||[]} changePage={this.props.changePage}/>
-                    </div>
-                </div>
-            )
-        }
-    }
-
-    render(){
-        return (
-            <div className="homeWrap">
-                {this.changeComponent("3")}
-            </div>
-        )
-    }
-}
-
-export default HomePage

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

@@ -1,43 +0,0 @@
-import React, { Component } from 'react';
-import { SearchBar } from 'antd-mobile';
-
-class Search extends Component {
-  constructor(props){
-    super(props)
-    this.state={
-      value:''
-    }
-  }
-  componentDidMount() {
-    //this.autoFocusInst.focus();
-    //console.log(this.props.getProductByName)
-  }
-  onChange= (value) => {
-    this.setState({ value });
-    //console.log(value)
-  };
-  clear = () => {
-    this.setState({ value: '' });
-    //console.log('cancel')
-  };
-  handleClick = () => {
-    this.manualFocusInst.focus();
-  }
-  render() {
-    return (<div>
-      <SearchBar
-        value={this.state.value}
-        placeholder="请输入要搜索的商品名"
-        onSubmit={value => this.props.getProductByName({name:value})}
-        onClear={value => console.log(value, 'onClear')}
-        onFocus={() => console.log('onFocus')}
-        onBlur={() => console.log('onBlur')}
-        onCancel={() => {this.props.getProductByName({}) ;this.clear();console.log('onconcel')}}
-        showCancelButton
-        onChange={this.onChange}
-      />
-    </div>);
-  }
-}
-
-export default Search

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

@@ -1,22 +0,0 @@
-import React, { Component } from 'react';
-
-import { Tabs, WhiteSpace } from 'antd-mobile';
-
-
-
-
-
-class TabBarTop extends Component {
-    render() {
-      //console.log('this.state.products',this.state.products)
-      return (
-        <div>
-            <Tabs onChange={e=>this.props.tabChange(e)} tabs={this.props.tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}>
-            </Tabs>
-        </div>
-      );
-    }
-  }
-
-  export default TabBarTop
-

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

@@ -1,40 +0,0 @@
-import React, { Component } from 'react'
-import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
-
-import ProductCard from './ProductCard'
-
-export default class OrderCard extends Component {
-  toPay(){
-
-  }
-  render() {
-    const order=this.props.order||[]
-    //console.log('这里是orderCard',this.props.order)
-    return (
-      <div>
-        <WingBlank size="lg">
-            <WhiteSpace size="lg" />
-            <Card>
-                <Card.Header
-                title={<span className="titleWrap"><span>{'订单号:'+order.id}</span><span>{order.createdAt}</span></span>}
-                extra={<span>支付状态:{order.orderStatus==='0'?'未支付':'已支付'}</span>}
-                />
-                <Card.Body>
-                {/*循环渲染然一个订单内的所有产品列表*/}
-                <div className="OrderProductList">
-                    {
-                        (order.orderProducts||[]).map((item,index)=>{
-                            //console.log(index,item)
-                            return (<ProductCard key={item.id} orderProduct={item}/>)
-                        })
-                    }
-
-                </div>
-                </Card.Body>
-                <Card.Footer content={<button  onClick={()=>this.props.toDeleteOrder(order.id)}>删除</button>} extra={<div>{order.orderStatus==='0'?<button onClick={()=>this.props.toPay(order.id)}>去支付</button>:''}</div>} />
-            </Card>
-        </WingBlank>
-      </div>
-    )
-  }
-}

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

@@ -1,34 +0,0 @@
-
-.headTitle{
-    text-align: center;
-    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: 425px;
-}
-.orderList *{
-    font-size: 12px;
-}
-
-.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,154 +0,0 @@
-import React, { Component } from 'react'
-import OrderCard from './OrderCard'
-import { ActivityIndicator } from 'antd-mobile';
-import TabBarTop from './OrderTabTop'
-import NavBars from '../Common/NavBar'
-
-import './OrderCenterPage.css'
-
-import {PageContext} from '../../context/context'
-
-import {graphqls} from '../../api/graphql_request'
-import {getOrderByProps,getProductByProps,DELETE_ORDER,DELETE_ORDER_PRODUCT} from '../../api/graphql/order'
-
-import config from "../../api/url_config";
-
-class OrderCenterPage extends Component {
-  constructor(props){
-    super(props)
-    this.state={
-        orderList:[],
-        loading:true,
-        tabs:[{title:"全部订单"},{title:"未支付"},{title:"已支付"},{title:"待评论"}],
-        select:"未支付"
-    }
-
-    this.toPay=this.toPay.bind(this)
-    this.toDeleteOrder=this.toDeleteOrder.bind(this)
-    this.tabChange=this.tabChange.bind(this)
-  }
-
-  componentDidMount(){
-    let user_id='ovtkn4zONC3IzhpykQ7cSLZ85YFg'
-    this.getOrder({user_id})
-
-  }
-  //获取订单，并根据订单id获取订单产品信息，之后重构数据结构
-  getOrder(data){
-      let that=this
-    graphqls(getOrderByProps,data).then((res)=>{
-        //console.log('order',res)
-        let orderArr=res.orderbyprops||[]
-        let length=orderArr.length
-        if(!length){
-            let id=setTimeout(()=>{
-                that.setState({loading:false})
-            },10000)
-        }
-        for(let i=0;i<orderArr.length;i++){
-            //根据order_id获取订单产品信息,可以优化,可以只发出一次请求获取所有订单产品信息之后再经行处理
-            graphqls(getProductByProps,{order_id:orderArr[i].id}).then((res)=>{
-                //console.log('getProductByProps',res)
-                orderArr[i].orderProducts=res.orderProductbyprops
-                
-                if(i===orderArr.length-1){
-                    //console.log('----orderList-----',orderArr)
-                    orderArr.sort((a,b)=>{
-                        return new Date(b.createdAt).getTime()-new Date(a.createdAt).getTime()
-                    })
-                    sessionStorage.setItem('orderList',JSON.stringify(orderArr))
-                    this.setState({
-                        orderList:orderArr,
-                        loading:false
-                    })
-                }
-            })
-        }
-    }).catch((e)=>{
-        //console.log('catct',e)
-    })
-  }
-
-  deleteOrder(data){
-      console.log('deleteOrderData',data)
-    graphqls(DELETE_ORDER,data).then(e=>{
-        console.log('deleteOrer',e)
-        let user_id=sessionStorage.getItem('openid')
-        this.getOrder({user_id})
-    })
-  }
-
-  deleteOrderProduct(data){
-    graphqls(DELETE_ORDER_PRODUCT,data).then(e=>{
-        let user_id=sessionStorage.getItem('openid')
-        this.getOrder({user_id})
-    })
-  }
-  
-  //删除订单
-  toDeleteOrder(id){
-    //console.log('order_id',id)
-    this.deleteOrder({id})
-    this.deleteOrderProduct({order_id:id})
-  }
-
-  toPay(id){
-    //console.log('order_id',id)
-    this.props.changePage('order')
-    this.props.setOrderId(id,true)
-  }
-
-  tabChange(e){
-    //有待优化，请求？(响应太慢，放弃)or使用缓存(徐分别处理，增加了代码量，这里采用)
-    //console.log(e)
-    let orderList=JSON.parse(sessionStorage.getItem('orderList'))||[]
-    if(e.title==='未支付'){
-        orderList=orderList.filter((item)=>{
-            return item.orderStatus==="0"
-        })
-        this.setState({orderList})
-    }else if(e.title==='已支付'){
-        orderList=orderList.filter((item)=>{
-            return item.orderStatus==="1"
-        })
-        this.setState({orderList})
-    }else{
-        this.setState({orderList})
-    }
-  }
-
-  render() {
-    const orderList=this.state.orderList||[]
-    return (
-      <div className="orderCnerWrap">
-        <ActivityIndicator toast text="loading" animating={this.state.loading}/>
-        <NavBars navBarText="我的订单" changePage={this.props.changePage} page="user"/>
-        <div style={{marginTop:"45px"}}><TabBarTop tabChange={this.tabChange} tabs={this.state.tabs}/></div>
-        <div className="orderList">
-            {orderList.length===0 ?
-                <div style={{marginTop:'200px',padding:'1px',position:'relative',zIndex:'10',display:'flex',justifyContent:'center'}}>
-                    <div>订单为空<span onClick={()=>this.props.changePage('index')} style={{color:'#108ee9'}}>去购物</span></div>
-                </div>
-                :
-                orderList.map((item,index)=>{
-                    //console.log(index,item)
-                    return(<OrderCard order={item} key={item.id} toPay={this.toPay} toDeleteOrder={this.toDeleteOrder}/>)
-                })
-            }
-        </div>
-      </div>
-    )
-  }
-}
-
-
-export default props=>{
-    return(
-        <PageContext.Consumer>
-            {(obj)=><OrderCenterPage {...props} {...obj}/>}
-        </PageContext.Consumer>
-    )
-}
-
-
-

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

@@ -1,16 +0,0 @@
-import React, { Component } from 'react';
-import { Tabs } from 'antd-mobile';
-
-class TabBarTop extends Component {
-    render() {
-      //console.log('this.state.products',this.state.products)
-      return (
-        <div>
-            <Tabs  onChange={e=>this.props.tabChange(e)} tabs={this.props.tabs} renderTabBar={props => <Tabs.DefaultTabBar {...props} page={4} />}>
-            </Tabs>
-        </div>
-      );
-    }
-  }
-
-  export default TabBarTop

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

@@ -1,35 +0,0 @@
-import React, { Component } from 'react'
-import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
-
-
-
-export default class ProductCard extends Component {
-  render() {
-    //console.log('productCard------------',this.props)
-    //console.log('这里是productCard')
-    const orderProduct=this.props.orderProduct
-    return (
-      <div>
-        <WingBlank size="lg">
-            <WhiteSpace size="lg" />
-                <Card>
-                    <Card.Body>
-                        <div className="cardWrap">
-                            <img src={orderProduct.product_id.img} alt="img" width="100px" height="100px"/>
-                            <div className="middle">
-                                <div>{orderProduct.product_id.name}</div>
-                                <div>{orderProduct.product_id.intro}</div>
-                            </div>
-                            <div className="right">
-                                <div>￥{orderProduct.product_id.price}</div>
-                                <div>x {orderProduct.count}</div>
-                            </div>
-                        </div>
-                    </Card.Body>
-                </Card>
-            <WhiteSpace size="lg" />
-        </WingBlank>
-      </div>
-    )
-  }
-}

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

@@ -1,54 +0,0 @@
-import React, { Component } from 'react'
-import { Card, WingBlank, WhiteSpace } from 'antd-mobile';
-
-export default class OrderCard extends Component {
-  render() {
-    //console.log(this.props)
-    const product = this.props.product 
-    //console.log('product',product)
-    if(product.product_id){
-        return (
-            <WingBlank size="lg">
-                    <Card>
-                        <Card.Body>
-                            <div className="cardWrap">
-                                <img src={product.product_id.img} alt="img" width="100px" height="100px"/>
-                                <div className="middle">
-                                    <div style={{fontSize:"12px"}}>{product.product_id.name}</div>
-                                    <div style={{fontSize:"12px"}}>{product.product_id.intro}</div>
-                                </div>
-                                <div className="right">
-                                    <div>￥{product.product_id.price}</div>
-                                    <div>x {product.count}
-                                </div>
-                                </div>
-                            </div>
-                        </Card.Body>
-                    </Card>
-                <WhiteSpace size="lg" />
-          </WingBlank>
-        )
-    }else{
-        return (
-            <WingBlank size="lg">
-                    <Card>
-                        <Card.Body>
-                            <div className="cardWrap">
-                                <img src={product.img} alt="img" width="100px" height="100px"/>
-                                <div className="middle">
-                                    <div style={{fontSize:"12px"}}>{product.name}</div>
-                                    <div style={{fontSize:"12px"}}>{product.intro}</div>
-                                </div>
-                                <div className="right">
-                                    <div style={{fontSize:"12px"}}>￥{product.price}</div>
-                                </div>
-                            </div>
-                        </Card.Body>
-                    </Card>
-                <WhiteSpace size="lg" />
-          </WingBlank>
-        )
-    }
-    
-  }
-}

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

@@ -1,49 +0,0 @@
-.addressWrap  *{
-    font-size: 12px;
-}
-
-div.addressWrap{
-    font-size: 10px;
-    display: flex;
-    padding: 5px 2px;
-}
-
-.addressWrap span{
-    padding: 8px;
-}
-.addressWrap span:nth-child(1){
-    flex-basis: 16px;
-    background: url("https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/positioning.svg") no-repeat center center;
-}
-
-.addressWrap span:nth-child(2){
-    flex-grow: 1;
-    text-align: center;
-}
-.addressWrap span:nth-child(3){
-    flex-basis: 16px;
-    background: url("https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/right.svg") no-repeat center center;
-}
-.payResult{
-    position: absolute;
-    bottom: 0;
-    width: 100%;
-    display: flex;
-    box-sizing: border-box;
-    overflow: hidden;
-    
-}
-
-.payResult div:nth-child(1){
-    flex-basis: 200px;
-    padding: 15px 0px;
-    text-align: center;
-    background: #f7eb91;
-}
-.payResult div:nth-child(2){
-    flex-grow: 1;
-    background: red;
-    color:#fff;
-    padding: 15px 0px;
-    text-align: center;
-}

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

@@ -1,280 +0,0 @@
-import React from 'react'
-import {ActivityIndicator} from 'antd-mobile';
-import {PageContext} from '../../context/context'
-import OrderCard from './OrderCard'
-import NavBars from '../Common/NavBar'
-
-
-
-
-import {graphqls} from '../../api/graphql_request'
-//import {getProductById} from '../../api/graphql/product'
-import {getAddressByProps} from '../../api/graphql/address'
-import {createOrders,createOrderProducts} from '../../api/graphql/order'
-import {getShopCarByProps,deleteCarByProps} from '../../api/graphql/shopCar'
-
-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)
-        //console.log('props1111',this.props)
-        this.state={
-            num:props.num,
-            address:{},
-            products:[],
-            shopCarList:[],
-            sumPrice:'',
-            loading:true
-        }
-        //this.toPay=this.toPay.bind(this)
-        this.createOrder=this.createOrder.bind(this)
-        this.toPay=this.toPay.bind(this)
-        
-    }
-    //获取数据
-    ///获取默认地址
-    getAddress(){
-        let user_id=sessionStorage.getItem('openid')
-        
-        graphqls(getAddressByProps,{user_id}).then((e)=>{
-            //console.log('getAddressByProps----------',e.userAddressbyprops)
-            let address=e.userAddressbyprops.filter((item)=>{return item.default===1})[0]
-            this.setState({address})
-        })
-    }
-
-    componentDidMount(){
-        this.getAddress()
-        if(this.props.fromShopCar){
-            this.getCarByProps()
-        }else if(this.props.fromOrderCenter){
-            this.setState({
-                loading:false
-            })
-            let orderList=JSON.parse(sessionStorage.getItem('orderList'))
-            //过滤出选定id未支付订单
-            orderList=orderList.filter((item)=>{ return (item.id===this.props.order_id)})
-            console.log('orderList',orderList)
-
-        }else{
-            
-            this.props.getProductByIds(this.props.product_id).then((e)=>{
-                console.log('getProductByIds',e.productbyid)
-                this.setState({
-                    products:[e.productbyid],
-                    sumPrice:this.props.num*e.productbyid.price,
-                    loading:false
-                })
-            })
-            
-        }
-    }
-
-    componentWillUnmount(){
-        this.props.setFromShopCar(false)
-        this.props.setOrderId(false)
-    }
-
-    getCarByProps(){
-        const user_id=sessionStorage.getItem('openid')
-        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
-                return 1
-            })
-            // console.log('sumPrice',sumPrice,'shopCarCount',shopCarCount)
-            // console.log('getShopCarByProps',response.userCartbyprops)
-            this.setState({
-                shopCarList:response.userCartbyprops,
-                sumPrice,
-                num,
-                loading:false
-            })
-        })
-    }
-
-    deleteCarById(id){
-        //console.log(id)
-        graphqls(deleteCarByProps,{id}).then((e)=>{
-            console.log('删除了shopcar',e)
-        })
-    }
-
-    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')
-        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().toLocaleString('chinese', { hour12: false }),
-            "deliveryTime": "",
-            "id": id,
-            "orderLogistics_id": "",
-            "orderPay_id": "",
-            "orderShipFee": 0,
-            "orderStatus": orderStatus,
-            "orderTotalPay": this.state.sumPrice,//-优惠
-            "payTime": payTime,
-            "productTotalPay": this.state.sumPrice,
-            "updatedAt": "",
-            "userAddress_id": that.state.address.id,
-            "user_id": openid
-          }
-
-          //console.log('orderData----------------',orderData)
-
-        const fromShopCar= this.props.fromShopCar
-         graphqls(createOrders,orderData).then((e) => {
-            //console.log('order创建订单成功', e)
-            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,count,product){
-        //console.log('product-----------',product)
-        let that=this,openid=sessionStorage.getItem('openid')
-        let data={
-            "count": count,
-            "createdAt": new Date().toLocaleString('chinese', { hour12: false }),
-            "id": new Date().getTime()+parseInt(Math.random(),10),
-            "orderPay": 0,
-            "order_id": order_id,
-            "productPay": product.price * count,
-            "product_id": product.id,
-            "remark": "that.state.remark",
-            "unit": "100",
-            "updatedAt": "",
-            "user_id": openid
-        }
-        graphqls(createOrderProducts,data).then((e)=>{
-            console.log('orderProduct创建成功',e)
-            successToast('创建订单成功',1)
-            that.props.changePage('orderCenter')
-        })
-    }
-
-    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(
-                this.state.shopCarList.map((item)=>{
-                    return(<OrderCard product={item} key={item.id}/>)
-                })
-            )
-        }else{
-            return(
-                this.state.products.map((item)=>{
-                    return(<OrderCard product={item} key={item.id}/>)
-                })
-            )
-        }
-    }
-
-    render(){
-        const address=this.state.address
-        const num =this.state.num
-        //console.log('+++',address)
-        return(
-            <div className="orderWrap">
-                <ActivityIndicator toast text="loading" animating={this.state.loading}/>
-
-                <NavBars navBarText="创建订单" changePage={this.props.changePage} page="detail"/>
-
-                <div className="addressWrap" style={{marginTop:"45px"}}>
-                    <List>
-                        <Item
-                        thumb="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/positioning.svg"
-                        arrow="horizontal"
-                        wrap
-                        multipleLine
-                        onClick={() => {
-                            this.props.changePage('addressPage')
-                        }}
-                        >{address ?
-                            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.toPay}>立即支付</div>
-                </div>
-            </div>
-            )
-    }
-}
-
-export default props => (
-    <PageContext.Consumer>
-      {(obj)=> <OrderPage {...props} {...obj}/>}
-    </PageContext.Consumer>
-);
-

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

@@ -1,55 +0,0 @@
-.detailWrap .mask{
-    position: absolute;
-    top: 0;
-    left: 0;
-    height: 100%;
-    width: 100%;
-    background: rgba(0, 0, 0, 0.3)
-}
-
-.row{
-    padding: 10px 5px;
-}
-
-.sheetWrap{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    height: 163px;
-    width: 100%;
-    background: #fff;
-    z-index: 1;
-}
-
-.numWrap span{
-    padding: 1px 14px;
-    background: rgba(200, 200, 200, 0.3);
-    border-radius:3px;
-    border: 1px solid rgba(200, 200, 200, 0.5)
-}
-
-.buttonWraps button{
-    position: absolute;
-    bottom: 0;
-    width: 50%;
-    border: none;
-    padding: 17px 0;
-    color: #fff;
-    font-size: 12px;
-}
-
-.buttonWraps button:nth-child(1){
-    background: #f18e47;
-    left: 0;
-}
-
-.buttonWraps button:nth-child(2){
-    background: red;
-    right: 0;
-}
-
-
-div.am-toast{
-    margin-left: 100px;
-    margin-top: 10px;
-}

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

@@ -1,95 +0,0 @@
-import React from 'react'
-import './ActionSheet.css'
-import { ActionSheet, WingBlank, WhiteSpace, Button, Toast } from 'antd-mobile';
-import { List, Stepper } from 'antd-mobile';
-
-import {graphqls} from '../../api/graphql_request'
-import {createShopCar} from '../../api/graphql/shopCar'
-import {PageContext} from '../../context/context'
-
-import {successToast,failToast} from '../Common/Toast'
-
-
-
-
-class ActionSheets extends React.Component {
-  constructor() {
-    super();
-    this.state = {
-      num:1
-    };
-    this.addCar=this.addCar.bind(this)
-  }
-  
- 
-  add(){
-      let num=this.state.num+1
-      if(num===100000){
-
-      }else{
-        this.setState({ num })
-      }   
-      this.props.setNum(num)
-  }
-  minius(){
-    let num=this.state.num-1
-    if(num===0){
-
-    }else{
-      this.setState({num})
-    }
-    this.props.setNum(num)
-  }
-
-  addCar(){
-      let that=this
-      let createdAt=new Date().toLocaleDateString()+' '+new Date().toLocaleTimeString().slice(2)
-      let id=new Date().getTime()+parseInt(Math.random()*100000,10)
-      let user_id=sessionStorage.getItem('openid')
-      //console.log(user_id)
-      //console.log('-----',this.props)
-      const variable={
-        count:that.state.num,
-        id,
-        createdAt,
-        updatedAt:createdAt,
-        user_id,
-        product_id:this.props.product.id
-      }
-      console.log('shopcar',variable)
-
-    graphqls(createShopCar,variable).then((e)=>{
-        //console.log(e)
-        successToast('加入购物车成功',1)
-    },()=>failToast('失败！请重试'))
-  }
-
-  render() {
-    return (
-        <div className="actionSheet">
-            <div className="mask" onClick={this.props.triggerActionSheet}></div>
-            <div className="sheetWrap">
-                <div className="row">价格:{this.props.product.price}</div>
-                <div className="row">库存:{this.props.product.stock}</div>
-                <div className="numWrap row">
-                    购买数量:<span onClick={this.add.bind(this)}>+</span><span>{this.state.num}</span><span onClick={this.minius.bind(this)}>-</span>
-                </div>
-                <PageContext.Consumer>
-                    {({changePage})=>{
-                        return(
-                            <div className="buttonWraps">
-                                <button onClick={this.addCar}>加入购物车</button>
-                                <button onClick={()=>changePage('order')}>立即购买</button>
-                            </div>
-                        )
-                    }}
-                </PageContext.Consumer>
-                
-            </div>
-        </div>
-    )
-  }
-}
-
-
-export default ActionSheets

src/case/ShopApp/src/components/ProductDetailPage/Card.css

@@ -1,30 +0,0 @@
-.card {
-    box-shadow: 0 0px 2px 0 rgba(0,0,0,0.2);
-    transition: 0.3s;
-    width: 100%;
-    border-radius: 5px;
-}
-
-
-
-.container {
-    position: relative;
-    padding: 2px 16px;
-    padding-top: 10px;
-    font-size: 10px;
-}
-
-.price{
-    position: absolute;
-    top: 10px;
-    right: 10px;
-    color: red;
-    
-}
-
-
-.container  .Cfooter{
-    position: absolute;
-    bottom: 2px;
-    padding: 5px 0;
-}

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

@@ -1,36 +0,0 @@
-import React, { Component } from 'react';
-
-import './Card.css'
-
-
-export default class Card extends Component{
-    constructor(props){
-        super(props)
-        //console.log('1',props)
-        this.state={
-            product:props.product
-        }
-    }
-    
-    componentWillReceiveProps(props){
-        //console.log('cardProps',props)
-        this.setState({
-            product:props.product
-        })
-    }
-
-    render(){
-        const product =this.state.product
-        return (
-            <div className="card">
-                <img src={product.img||''} alt="Avatar" style={{width:"100%",height:'200px'}}/>
-                <div className="container">
-                    <h4>{product.name}</h4> 
-                    <p style={{fontSize:"12px"}}>{product.intro}</p>
-                    <p style={{fontSize:"12px"}}>剩余:{product.stock}</p>
-                    <span className="price">￥{product.price}</span>
-                </div>
-            </div>
-        )
-    }
-}

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

@@ -1,3 +0,0 @@
-.ProductDetail *{
-    font-size: 12px;
-}

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

@@ -1,47 +0,0 @@
-import React, { Component } from 'react';
-import Card from './Card'
-import NavBars from '../Common/NavBar'
-import './ProductDetail.css'
-
-import {ActivityIndicator} from 'antd-mobile';
-
-import UserAction from './UserAction'
-
-import {graphqls} from '../../api/graphql_request'
-import {getProductById} from '../../api/graphql/product'
-
-export default class ProductDetail extends Component{
-
-    constructor(props){
-        super(props)
-        this.state={
-            product:{},
-            loading:true
-        }
-    }
-
-    getProduct(){
-        graphqls(getProductById,{id:this.props.product_id}).then((e)=>{
-            //console.log('productId',e.productbyid)
-            this.setState({
-                product:e.productbyid,
-                loading:false
-            })
-        })
-    }
-
-    componentWillMount(){
-        this.getProduct()
-    }
-
-    render(){
-        return(
-            <div className="detailWrap">
-                <ActivityIndicator toast text="loading" animating={this.state.loading}/>
-                <NavBars navBarText="创建订单" changePage={this.props.changePage} page="index"/>
-                <div style={{marginTop:"45px"}}><Card product={this.state.product}/></div>
-                <UserAction product={this.state.product} setNum={this.props.setNum} />
-            </div>
-        )
-    }
-}

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

@@ -1,32 +0,0 @@
-.actionWrap{
-    position: absolute;
-    bottom: 0;
-    left: 0;
-    width: 100%;
-    box-sizing: border-box;
-    display: flex;
-}
-
-.actionWrap button{
-    padding: 16px 0px;
-    flex-grow: 1;
-    border: none;
-    font-size: 12px;
-}
-
-.actionWrap .service,.actionWrap  .toCar{
-    flex-basis: 40px;
-    background: #ffffff;
-    font-size: 6px;
-    border-left: 1px solid rgba(200, 200, 200, 0.5);
-}
-
-.addCar{
-    background: #f18e47;
-    color: #fff;
-}
-
-.toPay{
-    background: red;
-    color: #fff;
-}

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

@@ -1,52 +0,0 @@
-import React,{Component} from 'react'
-import {PageContext} from '../../context/context'
-
-import './UserAction.css' 
-
-import ActionSheets from './ActionSheet'
-
-
-class UserAction extends Component{
-    constructor(){
-        super()
-        this.state={
-            actionSheet:false
-        }
-        this.triggerActionSheet=this.triggerActionSheet.bind(this)
-    }
-
-    triggerActionSheet(){
-        this.setState({
-            actionSheet:!this.state.actionSheet
-        })
-    }
-
-    renderPage(){
-        
-        let actionSheet=this.state.actionSheet
-        if(actionSheet){
-            return(<div><ActionSheets triggerActionSheet={this.triggerActionSheet} product={this.props.product} setNum={this.props.setNum}/></div>)
-        }else{
-            return(
-                <div className="actionWrap">
-                    <button className="service">客服</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>
-            )
-        }
-    }
-
-    render(){
-        return(<div>{this.renderPage()}</div>)
-    }
-}
-
-
-export default  props=> (
-    <PageContext.Consumer>
-      {({changePage}) => <UserAction {...props} changePage={changePage} />}
-    </PageContext.Consumer>
-  );
-

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

@@ -1,25 +0,0 @@
-.cardWrap{
-    display: flex;
-}
-
-.middle{
-    padding-left: 5px;
-    flex-grow: 1;
-    
-}
-
-.right{
-    flex-basis: 30px; 
-}
-
-.right button{
-    margin-top: 43px;
-}
-
-.deleteButton{
-    border-radius: 3px;
-    border: none;
-    background: green;
-    padding: 5px 10px;
-    color: #fff;
-}

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

@@ -1,45 +0,0 @@
-import React, { Component } from 'react'
-import { Card, WhiteSpace } from 'antd-mobile';
-import './ShopCarCard.css'
-
-export default class ShopCarCard extends Component {
-  render() {
-    const shopCarList=this.props.shopCarList
-    const deleteCarById=this.props.deleteCarById
-    return (
-      <div>
-        {shopCarList.map((item)=>{
-          return (
-            <div key={item.id}>
-            <Card full>
-              <Card.Body>
-                <div className="cardWrap">
-                  <img src={item.product_id.img} alt="img" width="100px" height="100px"/>
-                  <div className="middle">
-                    <div>{item.product_id.name}</div>
-                    <div>{item.product_id.intro}</div>
-                  </div>
-                  <div className="right">
-                    <div>￥{item.product_id.price}</div>
-                    <div>x {item.count}</div>
-                   <button onClick={()=>{deleteCarById(item.id)}} className="deleteButton">删除</button>
-                  </div>
-                </div>
-              </Card.Body>
-          </Card>
-            </div>
-          )
-        })}
-      </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

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

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

@@ -1,113 +0,0 @@
-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, createShopCar} from '../../api/graphql/shopCar'
-import NavBars from '../Common/NavBar'
-
-class ShopCarPage extends Component {
-    constructor(props) {
-        super(props)
-        this.state = {
-            shopCarList: [],
-            sumPrice: 0,
-            shopCarCount: 0,
-            loading: true
-        }
-        //this.renderShopCarList=this.renderShopCarList.bind(this)
-        this.deleteCarById = this.deleteCarById.bind(this)
-        //this.deleteAllShopCar=this.deleteAllShopCar.bind(this)
-    }
-
-    componentDidMount() {
-        this.getCarByProps()
-    }
-
-    //获取购物车列表，并统计总价总数量
-    getCarByProps() {
-        const user_id = sessionStorage.getItem('openid')
-        console.log(user_id, '>>>>>>');
-        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)
-
-            console.log(response, ">>>");
-            this.setState({
-                shopCarList: response.userCartbyprops,
-                sumPrice,
-                shopCarCount,
-                loading: false
-            })
-        })
-    }
-
-    //删除购物车
-    deleteCarById(id) {
-        //console.log(id)
-        graphqls(deleteCarByProps, {id}).then((e) => {
-            console.log('deleteShopCar', e)
-            this.getCarByProps()
-        })
-    }
-
-
-    render() {
-        return (
-            <div className="shopCarPage">
-                <ActivityIndicator toast text="loading" animating={this.state.loading}/>
-                <NavBars navBarText="购物车" changePage={this.props.changePage} page="detail"/>
-                {
-                    this.state.shopCarList.length === 0 ?
-                        <div style={{
-                            marginTop: '200px',
-                            padding: '1px',
-                            position: 'relative',
-                            zIndex: '10',
-                            display: 'flex',
-                            justifyContent: 'center'
-                        }}>
-                            <div>购物车空空如也<span onClick={() => this.props.changePage('index')}
-                                              style={{color: '#108ee9'}}>去购物</span></div>
-                        </div>
-                        :
-                        ''
-                }
-                <div className="ShopCarList">
-                    {/*this.renderShopCarList()*/}
-                    <ShopCarCard shopCarList={this.state.shopCarList} deleteCarById={this.deleteCarById}/>
-                </div>
-                <div className="footer">
-                    <div className="message">合计: ￥{this.state.sumPrice}</div>
-                    <button
-                        className="toPay"
-                        onClick={() => {
-                            if (this.state.shopCarList.length > 0) {
-                                this.props.changePage('order')
-                                this.props.setFromShopCar(true)
-                                //this.deleteAllShopCar()
-                            }
-                        }}
-                    >去支付
-                    </button>
-                </div>
-            </div>
-        )
-    }
-}
-
-export default props => (
-    <PageContext.Consumer>
-        {(obj) => <ShopCarPage {...props} {...obj}/>}
-    </PageContext.Consumer>
-);

src/case/ShopApp/src/components/UserPage/Head.css

@@ -1,15 +0,0 @@
-.head{
-    height: 158px;
-    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

@@ -1,16 +0,0 @@
-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

@@ -1,46 +0,0 @@
-.UserPageWrap{
-    position: relative;
-    z-index: 3;
-    height: 100%;
-    background-color: #f5f5f5;
-}
-
-.UserPageWrap *{
-    font-size: 12px;
-}
-
-.headerWrap{
-    margin-top: 50px;
-}
-
-
-.toWrap{
-    margin-top: 20px;
-}
-.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(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,56 +0,0 @@
-import React, { Component } from 'react';
-import Head from './Head'
-import Lists from '../Common/List'
-import NavBars from '../Common/NavBar'
-
-import {graphqls} from '../../api/graphql_request'
-import {getUserByProps} from '../../api/graphql/user'
-
-
-import './UserPage.css'
-
-
-class UserPage extends Component{
-    constructor(props){
-        super(props)
-        this.state={
-
-        }
-    }
-
-    componentDidMount(){
-        this.getUser()
-    }
-
-    
-    getUser(){
-        let openid=sessionStorage.getItem('openid')
-        graphqls(getUserByProps,{openid}).then((res)=>{
-            console.log('user',res.userbyprops)
-            this.setState({
-                user:res.userbyprops
-            })
-        })
-    }
-
-
-    render(){
-        return(
-            <div>
-                <NavBars navBarText="用户中心" changePage={this.props.changePage} page="user"/>
-                <div className="UserPageWrap">
-                
-                    <div className="headerWrap">
-                        <Head user={this.state.user}/></div>
-                    <div className="toWrap">
-                        <Lists text="我的订单" icon="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/order.svg" callback={()=>{this.props.changePage('orderCenter')}}/>
-                        <Lists text="我的地址" icon="https://wly-1254337200.cos.ap-guangzhou.myqcloud.com/address.svg" callback={()=>this.props.changePage('addressPage')}/>
-                    </div>
-                </div>
-            </div>
-            
-        )
-    }
-}
-
-export default UserPage

src/case/ShopApp/src/components/logo/index.css

@@ -0,0 +1,8 @@
+.footer-logo {
+    height: 50px;
+    background-color: white;
+    text-align: center;
+    line-height: 50px;
+    font-size: 16px;
+    color: #b9b9b9;
+}

src/case/ShopApp/src/components/logo/index.js

@@ -0,0 +1,17 @@
+import React, {Component} from "react"
+import './index.css'
+
+class Logo extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        return (
+            <div className='footer-logo'>IooBot 提供技术支持</div>
+        )
+    }
+}
+
+export default Logo

src/case/ShopApp/src/configs/url.js

@@ -0,0 +1,6 @@
+// const graphqlFC = 'https://ec.ioobot.cn/graphql';            // old schema fc mongodb
+// const graphqlFC = 'http://ecenhance.ioobot.cn/graphql';      // new schema fc mongodb
+const graphqlFC = 'http://ecommerce.ioobot.cn/graphql';      // new schema server mongodb
+const storeFile = 'http://deploy.ioobot.cn/api/store-file';
+
+export {graphqlFC, storeFile}

src/case/ShopApp/src/context/context.js

@@ -1,5 +0,0 @@
-import React from 'react'
-
-export const PageContext=React.createContext()
-export const NumContext=React.createContext()
-

src/case/ShopApp/src/images/modify.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1544585522847" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2105" xmlns:xlink="http://www.w3.org/1999/xlink" width="16" height="16"><defs><style type="text/css"></style></defs><path d="M295.384615 708.923077h433.23077a19.692308 19.692308 0 1 1 0 39.384615h-433.23077a19.692308 19.692308 0 1 1 0-39.384615zM590.769231 303.576615L618.653538 275.692308l72.979693 73.019077-27.844923 27.844923L590.769231 303.576615z m-236.307693 196.923077L382.345846 472.615385l89.284923 89.324307-27.844923 27.844923L354.461538 500.499692z" p-id="2106" fill="#707070"></path><path d="M401.329231 616.841846l308.342154-308.342154-55.689847-55.689846-308.381538 308.342154-8.152615 63.881846 63.881846-8.192z m-93.065846-74.043077l317.833846-317.833846a39.384615 39.384615 0 0 1 55.729231 0l55.689846 55.689846a39.384615 39.384615 0 0 1 0 55.689846l-317.833846 317.833847-127.763693 16.344615 16.344616-127.724308z" p-id="2107" fill="#707070"></path></svg>

src/case/ShopApp/src/images/user.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543305670471" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4005" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.47776 959.86688c-247.40864 0-448.6656-201.25184-448.6656-448.6656 0-247.36256 201.25696-448.6656 448.6656-448.6656 247.41376 0 448.61952 201.30304 448.61952 448.6656 0 247.41376-201.20576 448.6656-448.6144 448.6656z m0-851.072c-221.92128 0-402.40128 180.5312-402.40128 402.4064s180.48 402.4064 402.40128 402.4064c221.8752 0 402.36032-180.5312 402.36032-402.4064s-180.48512-402.4064-402.36032-402.4064z m0 484.64384c-99.64544 0-180.73088-81.08032-180.73088-180.73088s81.08544-180.736 180.736-180.736c99.64544 0 180.72576 81.08544 180.72576 180.736 0 99.65056-81.08032 180.73088-180.73088 180.73088z m0-315.19744c-74.15808 0-134.46656 60.30848-134.46656 134.46656s60.3136 134.47168 134.46656 134.47168c74.1632 0 134.47168-60.3136 134.47168-134.47168s-60.3136-134.46656-134.47168-134.46656z m225.29024 487.64928a23.168 23.168 0 0 1-22.03136-16.15872c-28.29824-88.76032-109.9776-148.41856-203.25888-148.41856-87.7056 0-167.7312 54.99392-199.18848 136.832a23.02976 23.02976 0 0 1-29.85472 13.29152 23.0912 23.0912 0 0 1-13.30176-29.8496c38.23616-99.59936 135.6288-166.53312 242.35008-166.53312 113.44384 0 212.89472 72.6528 247.31648 180.6336a23.12704 23.12704 0 0 1-15.0016 29.10208 24.8064 24.8064 0 0 1-7.02976 1.09568z" p-id="4006" fill="#707070"></path></svg>

src/case/ShopApp/src/images/user_select.svg

@@ -1 +0,0 @@
-<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1543305670471" class="icon" style="" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4005" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><defs><style type="text/css"></style></defs><path d="M511.47776 959.86688c-247.40864 0-448.6656-201.25184-448.6656-448.6656 0-247.36256 201.25696-448.6656 448.6656-448.6656 247.41376 0 448.61952 201.30304 448.61952 448.6656 0 247.41376-201.20576 448.6656-448.6144 448.6656z m0-851.072c-221.92128 0-402.40128 180.5312-402.40128 402.4064s180.48 402.4064 402.40128 402.4064c221.8752 0 402.36032-180.5312 402.36032-402.4064s-180.48512-402.4064-402.36032-402.4064z m0 484.64384c-99.64544 0-180.73088-81.08032-180.73088-180.73088s81.08544-180.736 180.736-180.736c99.64544 0 180.72576 81.08544 180.72576 180.736 0 99.65056-81.08032 180.73088-180.73088 180.73088z m0-315.19744c-74.15808 0-134.46656 60.30848-134.46656 134.46656s60.3136 134.47168 134.46656 134.47168c74.1632 0 134.47168-60.3136 134.47168-134.47168s-60.3136-134.46656-134.47168-134.46656z m225.29024 487.64928a23.168 23.168 0 0 1-22.03136-16.15872c-28.29824-88.76032-109.9776-148.41856-203.25888-148.41856-87.7056 0-167.7312 54.99392-199.18848 136.832a23.02976 23.02976 0 0 1-29.85472 13.29152 23.0912 23.0912 0 0 1-13.30176-29.8496c38.23616-99.59936 135.6288-166.53312 242.35008-166.53312 113.44384 0 212.89472 72.6528 247.31648 180.6336a23.12704 23.12704 0 0 1-15.0016 29.10208 24.8064 24.8064 0 0 1-7.02976 1.09568z" p-id="4006" fill="#1296db"></path></svg>

src/case/ShopApp/src/index.js

@@ -0,0 +1,23 @@
+import React from 'react'
+import ReactDOM from 'react-dom'
+import App from './App'
+
+import ApolloClient from "apollo-boost"
+import {ApolloProvider} from "react-apollo"
+
+import {graphqlFC} from "./configs/url"
+import {BrowserRouter as Router} from 'react-router-dom'
+
+const client = new ApolloClient({
+    uri: graphqlFC
+})
+
+export default () => (
+    <ApolloProvider client={client}>
+        <Router>
+            <App/>
+        </Router>
+    </ApolloProvider>
+)
+
+

src/case/ShopApp/src/pages/cart/all/detail/index.js

@@ -0,0 +1,388 @@
+import React, {Component} from 'react'
+import {withRouter} from 'react-router-dom'
+import {message} from 'antd'
+import {Checkbox, WhiteSpace} from 'antd-mobile'
+import {Mutation} from "react-apollo"
+import gql from "graphql-tag"
+import classNames from 'classnames'
+import moment from 'moment'
+import debounce from 'lodash.debounce'
+
+import {update_userCart} from "../../../../utils/gql"
+import '../index.css'
+
+class CartDetail extends Component {
+    constructor(props){
+        super(props) 
+        this.state={
+            cartList:[],
+            totalPrice:0,
+            isSelectAll:false,
+            selectedCount:0
+        }
+        this.updateCartProductCount = debounce(this.updateCartProductCount, 5000)
+    }
+
+    //获取数据
+    componentWillMount(){
+        let cartList =  JSON.parse(localStorage.getItem("cartList"))
+        // console.log('CartDetail componentWillMount cartList',cartList)
+        // console.log('CartDetail componentWillMount cartList props',this.props.cartList)
+        let cartListLength = cartList ? cartList.length : 0
+
+        this.setState({
+            cartList: this.props.cartList || cartList
+        },()=>{
+            if(cartListLength){
+                this.sumPrice(false)
+            }
+        })
+    }
+
+    componentWillReceiveProps(nextProps) {
+        // console.log("CartDetail componentWillReceiveProps",nextProps)
+        if(nextProps.updateData){
+            this.props.refetch().then(()=>{
+                let cartListLength = nextProps.cartList ? nextProps.cartList.length : 0
+                this.setState({
+                    cartList: nextProps.cartList
+                },()=>{
+                    if(cartListLength){
+                        this.sumPrice(false)
+                    }
+                })
+            })
+        }
+    }
+
+    // 判断数量update类型
+    handleChangedCount = (e,type,i,updateCount) => {
+        e.persist()
+        let result
+        switch (type) {
+            case 'augment':
+                result = this.augment(e,i)
+                break
+            case  'input':
+                result = this.getInputValue(e,i)
+                break
+            case 'reduce':
+                result = this.reduce(e,i)
+                break
+            default:
+                console.log('handleChangedCount type error')
+                break
+        }
+
+        if(result.id) {
+            let {id, count} = result
+            this.updateCartProductCount(id, count, updateCount)
+        }
+    }
+
+    // 使用函数防抖5s后请求更新数量
+    updateCartProductCount = (id,count,updateCount) => {
+        // console.log('updateCartProductCount id count',id,count)
+        let updatedAt = moment().format('YYYY-MM-DD HH:mm:ss')
+        const update = {
+            id,
+            count,
+            updatedAt
+        }
+        updateCount({variables:update})
+    }
+
+    //获取输入框的值
+    getInputValue = (e,i) =>{
+        let id = '', count = 0
+        this.setState({
+            cartList:this.state.cartList.map((item,index)=>{
+                if(index===i){
+                    item.count = e.target.value
+                    id = item.id
+                    count = item.count
+                    return item
+                }else {
+                    return item
+                }
+            })
+        }) 
+        this.sumPrice(true)
+        return {
+            id, count
+        }
+    } 
+
+    // 增加
+    augment = (e,i) =>{
+        let id = '', count = 0
+        this.setState({
+            cartList:this.state.cartList.map((item,index)=>{
+                if(index===i){
+                    item.count = item.count*1 + 1
+                    id = item.id
+                    count = item.count
+                    return item
+                }else {
+                    return item
+                }
+            })
+        })
+        this.sumPrice(true)
+        return {
+            id, count
+        }
+    } 
+
+    // 减少
+    reduce = (e,i) => {
+        let id = '', count = 0
+        this.setState({
+            cartList:this.state.cartList.map((item,index)=>{
+                if(index===i){
+                    item.count = item.count*1 - 1
+                    id = item.id
+                    count = item.count
+                    return item
+                }else {
+                    return item
+                }
+            })
+        })
+        this.sumPrice(true)
+        return {
+            id, count
+        }
+    } 
+
+    //删除
+    del = (e,i) => {
+        this.setState({
+            cartList:this.state.cartList.filter((item,index)=>{
+                if(index!==i){
+                    return true
+                }else {
+                    return false
+                }
+            })
+        }) 
+        setTimeout(()=>{
+            this.sumPrice(true)
+        },1)
+    } 
+
+    // 改变选择
+    changeCheckedStatus = (e,i) => {
+        this.setState({
+            cartList:this.state.cartList.map((item,index)=>{
+                if(index===i){
+                    item.checked=!item.checked
+                }
+                return item
+            })
+        }) 
+
+        let flag = this.state.cartList.every((item,index)=>{
+            if(item.checked===false) {
+                return false 
+            }else {
+                return true 
+            }
+        }) 
+
+        if(flag===true){
+            this.setState({isSelectAll:true})
+        }else {
+            this.setState({isSelectAll:false}) 
+        }
+        this.sumPrice(true)
+    } 
+
+    //全选或全不选,判断全选状态
+    checkedAll = (e,check) => {
+        if(e) e.stopPropagation()
+        let checked = e.target ? e.target.checked : check 
+
+        if(checked===true){
+            this.setState({
+                cartList:this.state.cartList.map((item,index)=>{
+                    item.checked=true
+                    return item
+                }),
+                isSelectAll:true
+            }) 
+        }else  if(checked===false){
+            this.setState({
+                cartList:this.state.cartList.map((item,index)=>{
+                    item.checked=false
+                    return item
+                }),
+                isSelectAll:false
+            }) 
+        }
+        this.sumPrice(true)
+    } 
+
+    //计算总合计
+    sumPrice = (update) => {
+        if(update) localStorage.setItem("cartList",JSON.stringify(this.state.cartList))
+
+        let {cartList} = this.state
+        let totalPrice=0, selectedCount=0, checkedCount=0, cartCount=0
+        let cartListLength = cartList.length
+        let isSelectAll = false
+        cartList.forEach((item,index)=>{
+            cartCount+=item.count
+            if(item.checked===true){
+                totalPrice+=item.count*(item.product_id.price*item.product_id.discountRate/100).toFixed(2)
+                selectedCount+=item.count
+                checkedCount++
+            }
+            if(index === cartListLength - 1){
+                localStorage.setItem("cartCount",JSON.stringify(cartCount))
+                isSelectAll = cartListLength === checkedCount
+                this.setState({
+                    totalPrice,
+                    selectedCount,
+                    isSelectAll
+                })
+            }
+        })
+    } 
+
+    //结算传值
+    settleAccounts = () => {
+        let shopping=[] 
+        this.state.cartList.forEach((item,index)=>{
+            if(item.checked===true){
+                shopping.push(item)
+            }
+        }) 
+        // console.log('cartList',this.state.cartList)
+        // console.log('shopping',shopping)
+        sessionStorage.setItem("cartSelected",JSON.stringify(shopping))
+        sessionStorage.setItem("totalPrice",JSON.stringify(this.state.totalPrice))
+        sessionStorage.setItem("totalCount",JSON.stringify(this.state.selectedCount))
+        this.props.history.push({
+            pathname: '/cart/orders',
+            state:{
+                dataType: 'cartSelected'
+            }
+        })
+    }
+
+    skipToProductDetail = (e,productId) => {
+        e.preventDefault()
+        this.props.history.push({
+            pathname: '/home/detail',
+            state: {
+                id:productId
+            }
+        })
+    }
+
+    render() {
+        let {cartList,isSelectAll,selectedCount,totalPrice} = this.state
+        return (
+            <div className="cart-content-wrap">
+                <div className='cart-content'>
+                    {
+                        cartList.map((item,index)=>{
+                            return(
+                                <div key={item.id+'detail'}>
+                                    <div className="cart-list">
+                                        <div className="cart-list-checkbox">
+                                            <Checkbox
+                                                style={{marginLeft:15}}
+                                                checked={item.checked}
+                                                onChange={(e)=>{this.changeCheckedStatus(e,index)}}
+                                            />
+                                        </div>
+                                        <div className="cart-list-image" onClick={(e)=>this.skipToProductDetail(e,item.product_id.id)}>
+                                            <img src={item.product_id.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt="商品图片"/>
+                                        </div>
+                                        <div className="cart-list-intro" onClick={(e)=>this.skipToProductDetail(e,item.product_id.id)}>
+                                            <div>{item.product_id.name}</div>
+                                            <div>{item.specificationStock_id.color}  {item.specificationStock_id.size}</div>
+                                            <div className='product-item-price'>
+                                                <span>￥{(item.product_id.price*item.product_id.discountRate/100).toFixed(2)}</span>&nbsp;
+                                                <span>￥{(item.product_id.price).toFixed(2)}</span>
+                                            </div>
+                                        </div>
+                                        <div className="cart-list-count">
+                                            <Mutation mutation={gql(update_userCart)}
+                                                      onError={error=>console.log('error',error)}
+                                            >
+                                                {(update_userCart,{ loading, error }) => (
+                                                    <div className="selected">
+                                                        <button
+                                                            className={classNames({
+                                                                'selected_button-white': true,
+                                                                'selected_button-disabled': item.count <= 1
+                                                            })}
+                                                            // disabled={item.count <= 1}
+                                                            onClick={(e)=>{
+                                                                if(item.count > 1){
+                                                                    this.handleChangedCount(e,'reduce',index,update_userCart)
+                                                                }else {
+                                                                    message.warning('数量不能小于1个')
+                                                                }
+                                                            }}
+                                                        >-</button>
+                                                        <input className="selected_input" type="text"
+                                                               min={1} step={1} max={item.specificationStock_id.stock}
+                                                               value={item.count}
+                                                               onChange={(e)=>{this.handleChangedCount(e,'input',index,update_userCart)}}
+                                                        />
+                                                        <button className="selected_button-white" onClick={(e)=>{this.handleChangedCount(e,'augment',index,update_userCart)}}>+</button>
+                                                    </div>
+                                                )}
+                                            </Mutation>
+                                        </div>
+                                    </div>
+                                    <WhiteSpace size="md" />
+                                </div>
+                            )
+                        })
+                    }
+                </div>
+                <div className="footer">
+                    <div className="jiesuan">
+                        <div className="jiesuan-checkbox">
+                            <Checkbox
+                                checked={isSelectAll}
+                                onChange={(e)=>{this.checkedAll(e,'')}}
+                                style={{marginLeft:15}}
+                            />
+                            <span className="jiesuan-checkbox_label">全选</span>
+                        </div>
+                        <div className={classNames({
+                            'jiesuan-total': true,
+                            'jiesuan-disabled': !selectedCount
+                        })}>
+                            <span>合计：</span>
+                            <span className="jiesuan-total_price">¥ {totalPrice}</span>
+                        </div>
+                        <button
+                            className={classNames({
+                                'jiesuan-button': true,
+                                'jiesuan-disabled': !selectedCount
+                            })}
+                            onClick={()=>{
+                                if(selectedCount){
+                                    this.settleAccounts()
+                                }else {
+                                    message.warning('请选择商品！')
+                                }
+                            }}
+                        >
+                            <span>下单({selectedCount})</span>
+                        </button>
+                    </div>
+                </div>
+            </div>
+        ) 
+    }
+}
+
+export default withRouter(CartDetail)

src/case/ShopApp/src/pages/cart/all/edit/index.js

@@ -0,0 +1,383 @@
+import React, {Component} from 'react'
+import {withRouter} from 'react-router-dom'
+import {message} from 'antd'
+import {Checkbox, WhiteSpace, Modal} from 'antd-mobile'
+import classNames from 'classnames'
+import {Mutation} from "react-apollo"
+import gql from "graphql-tag"
+import moment from 'moment'
+import debounce from 'lodash.debounce'
+
+import '../index.css'
+import {delete_userCart_by_id, update_userCart} from "../../../../utils/gql"
+const alert = Modal.alert
+
+message.config({
+    top: '45%',
+    duration: 2,
+    maxCount: 2,
+})
+
+class CartEdit extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            isSelectAll:false,
+            selectedCount:0
+        }
+        this.updateCartProductCount = debounce(this.updateCartProductCount, 5000)
+    }
+
+    //获取数据
+    componentWillMount(){
+        this.setState({
+            cartList:this.props.cartList
+        },()=>{
+            this.checkedAll('',false)
+        })
+
+    }
+
+    // 判断数量update类型
+    handleChangedCount = (e,type,i,updateCount) => {
+        e.persist()
+        let result
+        switch (type) {
+            case 'augment':
+                result = this.augment(e,i)
+                break
+            case  'input':
+                result = this.getInputValue(e,i)
+                break
+            case 'reduce':
+                result = this.reduce(e,i)
+                break
+            default:
+                console.log('handleChangedCount type error')
+                break
+        }
+
+        if(result.id) {
+            let {id, count} = result
+            this.updateCartProductCount(id, count, updateCount)
+        }
+    }
+
+    // 使用函数防抖5s后请求更新数量
+    updateCartProductCount = (id,count,updateCount) => {
+        // console.log('updateCartProductCount id count',id,count)
+        let updatedAt = moment().format('YYYY-MM-DD HH:mm:ss')
+        const update = {
+            id,
+            count,
+            updatedAt
+        }
+        updateCount({variables:update})
+    }
+
+    //获取输入框的值
+    getInputValue = (e,i) =>{
+        let id = '', count = 0
+        this.setState({
+            cartList:this.state.cartList.map((item,index)=>{
+                if(index===i){
+                    item.count = e.target.value
+                    id = item.id
+                    count = item.count
+                    return item
+                }else {
+                    return item
+                }
+            })
+        })
+        this.sumCount()
+        return {
+            id, count
+        }
+    }
+
+    // 增加
+    augment = (e,i) =>{
+        let id = '', count = 0
+        this.setState({
+            cartList:this.state.cartList.map((item,index)=>{
+                if(index===i){
+                    item.count = item.count*1 + 1
+                    id = item.id
+                    count = item.count
+                    return item
+                }else {
+                    return item
+                }
+            })
+        })
+        this.sumCount()
+        return {
+            id, count
+        }
+    }
+
+    // 减少
+    reduce = (e,i) => {
+        let id = '', count = 0
+        this.setState({
+            cartList:this.state.cartList.map((item,index)=>{
+                if(index===i){
+                    item.count = item.count*1 - 1
+                    id = item.id
+                    count = item.count
+                    return item
+                }else {
+                    return item
+                }
+            })
+        })
+        this.sumCount()
+        return {
+            id, count
+        }
+    }
+
+    // 删除
+    delete=(delete_userCart_by_id)=>{
+        let {cartList, selectedCount} = this.state
+
+        alert('', `确定要删除这${selectedCount}种商品吗？`, [
+            { text: '取消', onPress: () => console.log('cancel') },
+            {
+                text: '确定',
+                onPress: () => {
+                    let deleteList = cartList.filter((item)=> item.checked === true)
+                    let cartList1 = cartList.filter((item)=> item.checked === false)
+
+                    let deleteIdList = deleteList.map(item => item.id)
+                    // console.log('delete list',deleteIdList)
+
+                    delete_userCart_by_id({variables:{id:deleteIdList}}).then((data)=>{
+                        // console.log('delete data',data)
+                        let num = data.data.delete_userCart.replace(/[^0-9]/ig,"")
+                        if(num){
+                            message.success('删除成功')
+                            let cartCount = JSON.parse(localStorage.getItem("cartCount")) - num
+                            localStorage.setItem("cartCount",JSON.stringify(cartCount))
+
+                            this.setState({
+                                cartList:cartList1,
+                                selectedCount:0
+                            })
+                        }
+                    })
+                }
+            }
+        ])
+    }
+
+    //删除单个备用
+    del=(e,i)=> {
+        this.setState({
+            cartList:this.state.cartList.filter((item,index)=>{
+                if(index!==i){
+                    return true
+                }else {
+                    return false
+                }
+            })
+        })
+        setTimeout(()=>{
+            this.sumCount()
+        },1)
+    }
+
+    // 改变选择
+    changeCheckedStatus=(e,i)=>{
+        this.setState({
+            cartList:this.state.cartList.map((item,index)=>{
+                if(index===i){
+                     item.checked=! item.checked
+                }
+                return  item
+            })
+        })
+
+        let flag = this.state.cartList.every((item,index)=>{
+            if( item.checked===false) {
+                return false
+            }else {
+                return true
+            }
+        })
+
+        if(flag===true){
+            this.setState({isSelectAll:true})
+        }else {
+            this.setState({isSelectAll:false})
+        }
+        this.sumCount()
+    }
+
+    //全选或全不选,判断全选状态
+    checkedAll=(e,check)=>{
+        let checked = e.target ? e.target.checked : check
+
+        if(checked===true){
+            this.setState({
+                cartList:this.state.cartList.map(( item,index)=>{
+                     item.checked=true
+                    return  item
+                }),
+                isSelectAll:true
+            })
+        }else  if(checked===false){
+            this.setState({
+                cartList:this.state.cartList.map((item,index)=>{
+                     item.checked=false
+                    return item
+                }),
+                isSelectAll:false
+            })
+        }
+        this.sumCount()
+    }
+
+    //计算总合计
+    sumCount=()=>{
+        let {cartList} = this.state
+        let selectedCount=0, cartCount=0
+        let cartListLength = cartList.length
+
+        cartList.forEach((item,index)=>{
+            cartCount+=item.count
+            if(item.checked===true){
+                selectedCount+=item.count
+            }
+            if(index === cartListLength - 1){
+                localStorage.setItem("cartCount",JSON.stringify(cartCount))
+                this.setState({
+                    selectedCount
+                })
+            }
+        })
+    }
+
+    skipToProductDetail = (e,productId) => {
+        e.preventDefault()
+        this.props.history.push({
+            pathname: '/home/detail',
+            state: {
+                id:productId
+            }
+        })
+    }
+
+    render() {
+        let {cartList, isSelectAll, selectedCount} = this.state
+        let listLength = cartList.length
+
+        return (
+            <Mutation mutation={gql(delete_userCart_by_id)}
+                      onCompleted={()=>{this.props.refetch()}}
+                      onError={error=>console.log('error',error)}
+            >
+                {(delete_userCart_by_id,{ loading, error }) => (
+                    <div className="cart-content-wrap">
+                        <div className='cart-content'>
+                            {
+                                cartList.map((item,index)=>{
+                                    return(
+                                        <div key={item.id+'edit'}>
+                                            <div className="cart-list">
+                                                <div className="cart-list-checkbox">
+                                                    <Checkbox
+                                                        style={{marginLeft:15}}
+                                                        checked={item.checked}
+                                                        onChange={(e)=>{this.changeCheckedStatus(e,index)}}
+                                                    />
+                                                </div>
+                                                <div className="cart-list-image" onClick={(e)=>this.skipToProductDetail(e,item.product_id.id)}>
+                                                    <img src={item.product_id.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt=""/>
+                                                </div>
+                                                <div className="cart-list-intro" onClick={(e)=>this.skipToProductDetail(e,item.product_id.id)}>
+                                                    <div>{item.product_id.name}</div>
+                                                    <div>{item.specificationStock_id.color}  {item.specificationStock_id.size}</div>
+                                                    <div className='product-item-price'>
+                                                        <span>￥{(item.product_id.price*item.product_id.discountRate/100).toFixed(2)}</span>&nbsp;
+                                                        <span>￥{(item.product_id.price).toFixed(2)}</span>
+                                                    </div>
+                                                </div>
+                                                <div className="cart-list-count">
+                                                    <Mutation mutation={gql(update_userCart)}
+                                                              onError={error=>console.log('error',error)}
+                                                    >
+                                                        {(update_userCart,{ loading, error }) => (
+                                                            <div className="selected">
+                                                                <button
+                                                                    className={classNames({
+                                                                        'selected_button-white': true,
+                                                                        'selected_button-disabled': item.count <= 1
+                                                                    })}
+                                                                    // disabled={item.count <= 1}
+                                                                    onClick={(e)=>{
+                                                                        if(item.count > 1){
+                                                                            this.handleChangedCount(e,'reduce',index,update_userCart)
+                                                                        }else {
+                                                                            message.warning('数量不能小于1个')
+                                                                        }
+                                                                    }}
+                                                                >-</button>
+                                                                <input className="selected_input" type="text"
+                                                                       min={1} step={1} max={item.specificationStock_id.stock}
+                                                                       value={item.count}
+                                                                       onChange={(e)=>{this.handleChangedCount(e,'input',index,update_userCart)}}
+                                                                />
+                                                                <button className="selected_button-white" onClick={(e)=>{this.handleChangedCount(e,'augment',index,update_userCart)}}>+</button>
+                                                            </div>
+                                                        )}
+                                                    </Mutation>
+                                                </div>
+                                            </div>
+                                            <WhiteSpace size="md" />
+                                        </div>
+                                    )
+                                })
+                            }
+                        </div>
+                        {
+                            listLength ?
+                                <div className="footer">
+                                    <div className="jiesuan">
+                                        <div className="jiesuan-checkbox">
+                                            <Checkbox
+                                                checked={isSelectAll}
+                                                onChange={(e)=>{this.checkedAll(e,'')}}
+                                                style={{marginLeft:15}}
+                                            />
+                                            <span className="jiesuan-checkbox_label">全选</span>
+                                        </div>
+                                        <div className="jiesuan-total">
+                                        </div>
+                                        <button
+                                            className={classNames({
+                                                'jiesuan-button': true,
+                                                'jiesuan-disabled': !selectedCount
+                                            })}
+                                            onClick={()=>{
+                                                if(selectedCount){
+                                                    this.delete(delete_userCart_by_id)
+                                                }else {
+                                                    message.warning('请选择商品！')
+                                                }
+                                            }}
+                                        >
+                                            <span>删除({selectedCount})</span>
+                                        </button>
+                                    </div>
+                                </div>:''
+                        }
+                    </div>
+                )}
+            </Mutation>
+        )
+    }
+}
+
+export default withRouter(CartEdit)

src/case/ShopApp/src/pages/cart/all/index.css

@@ -0,0 +1,118 @@
+.am-checkbox.am-checkbox-checked .am-checkbox-inner {
+    border-color: #f44;
+    background: #f44;
+}
+
+.navbar-button {
+    color: #ff6d6d;
+}
+
+.cart-content-wrap {
+    padding: 45px 0;
+}
+
+.cart-list {
+    width: 100%;
+    line-height: 22px;
+    background-color: #fff;
+    padding: 10px 0;
+    display: flex;
+    justify-content: space-around;
+    border-bottom: 1px solid #f5f5f9;
+}
+
+.cart-list-checkbox {
+    width: 10%;
+    display: flex;
+    align-items: center;
+    z-index: 0;
+}
+
+.cart-list-image {
+    width: 25%;
+}
+
+.cart-list-image img {
+    width: 80%;
+    margin-left: 10%;
+}
+
+.cart-list-intro {
+    width: 35%;
+    position: relative;
+    text-align: left;
+}
+
+.cart-list-intro :first-child {
+    color: black;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+ }
+
+.cart-list-intro :nth-child(2) {
+    font-size: 12px;
+    color: gray;
+}
+
+.cart-list-intro :last-child {
+    color: #f44;
+    position: absolute;
+    bottom:0;
+}
+
+.cart-list-count {
+    width: 30%;
+    position: relative;
+}
+
+.footer{
+    position: fixed;
+    bottom: 50px;
+    height: 45px;
+    width: 100%;
+}
+
+.jiesuan {
+    height: 100%;
+    display: flex;
+    font-size: 14px;
+    align-items: center;
+    background-color: #fdfbfb;
+    border-top: 1px solid #f5f5f9;
+    z-index: 3;
+}
+
+.jiesuan-disabled {
+    opacity: 0.5;
+}
+
+.jiesuan-checkbox_label {
+    color: #323233;
+    margin-left: 10px;
+    vertical-align: middle;
+    line-height: 20px;
+}
+
+.jiesuan-total {
+    flex: 1;
+    font-weight: 500;
+    text-align: right;
+    color: #323233;
+    padding-right: 12px;
+}
+
+.jiesuan-total_price {
+    color: #f44;
+    font-size: 18px;
+}
+
+.jiesuan-button {
+    width: 110px;
+    height: 100%;
+    color: #fff;
+    background-color: #f44;
+    border: 1px solid #f44;
+    font-size: 16px;
+    text-align: center;
+}

src/case/ShopApp/src/pages/cart/all/index.js

@@ -0,0 +1,119 @@
+import React, {Component} from 'react'
+import {NavBar, ActivityIndicator} from 'antd-mobile'
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
+
+import CartDetail from "./detail"
+import CartEdit from "./edit"
+import Empty from "../empty"
+import {cart_by_userid} from "../../../utils/gql"
+import {getCookie} from "../../../utils/cookie"
+import './index.css'
+
+class All extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            page: 'detail',
+            updateData:false
+        }
+    }
+
+    componentWillMount() {
+        // console.log('cartAll componentWillMount',this.props,this.state)
+        this.getHash()
+    }
+
+    componentDidMount() {
+        // console.log('cartAll componentDidMount',this.props,this.state)
+        let state = this.props.history.location.state
+        let updateData = state ? state.updateData : false
+
+        if(updateData){
+            this.setState({
+                updateData
+            })
+        }
+    }
+
+    getHash = () => {
+        // console.log('location', window.location.hash)
+        let hash = window.location.hash || '#tab=cart&page=detail'
+        let page = 'detail'
+        if (window.location.hash && hash.indexOf("&") > 0) {
+            let pageHash = hash.split("&")[1]
+            page = pageHash.substr(pageHash.indexOf("=") + 1)
+        }
+        this.setState({
+            page
+        })
+    }
+
+    changeCartPage = () => {
+        this.setState((preState) => ({
+            page: preState.page === 'detail' ? 'edit' : 'detail'
+        }))
+    }
+
+    renderPage = (data, refetch) => {
+        let {page,updateData} = this.state
+
+        switch (page) {
+            case 'detail':
+                return <CartDetail cartList={data.cartList} refetch={refetch} updateData={updateData}/>
+            case 'edit':
+                return <CartEdit cartList={data.cartList} refetch={refetch}/>
+            default:
+                return <div>test</div>
+        }
+    }
+
+    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}}>
+                {
+                    ({loading, error, data, refetch}) => {
+                        if (loading) {
+                            return (
+                                <div className="loading-center">
+                                    <ActivityIndicator size="large"/>
+                                    <span>加载中...</span>
+                                </div>
+                            )
+                        }
+                        if (error) {
+                            return 'error!'
+                        }
+                        // console.log('cart all data',data)
+
+                        return (
+                            <div className='cart-wrap'>
+                                <div className='cart-navbar-wrap navbar'>
+                                    <NavBar
+                                        mode="light"
+                                        rightContent={[
+                                            data.cartList.length ?
+                                                <span className='navbar-button' key={"cart-navbar"} onClick={this.changeCartPage}>
+                                                {page === 'detail' ? "编辑" : "完成"}
+                                            </span> : ''
+                                        ]}
+                                    >购物袋
+                                    </NavBar>
+                                </div>
+                                {data.cartList.length ?
+                                    this.renderPage(data, refetch) : <Empty/>
+                                }
+                            </div>
+                        )
+                    }
+                }
+            </Query>
+        )
+    }
+}
+
+export default All

src/case/ShopApp/src/pages/cart/empty/index.css

@@ -0,0 +1,23 @@
+.cart-empty {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    background-color: white;
+    padding-top: 45px;
+}
+
+.cart-empty div{
+    margin: 10px;
+}
+
+.empty-button {
+    width: 110px;
+    height: 100%;
+    color: #fff;
+    background-color: #f44;
+    border: 1px solid #f44;
+    font-size: 14px;
+    text-align: center;
+    padding: 5px;
+}

src/case/ShopApp/src/pages/cart/empty/index.js

@@ -0,0 +1,37 @@
+import React, {Component} from 'react'
+import {withRouter} from "react-router-dom"
+
+import cart_empty from '../../../images/cart_empty.jpg'
+import './index.css'
+
+class Empty extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        let contentHeight = window.innerHeight - 50
+
+        return (
+            <div className="cart-empty" style={{height: contentHeight}}>
+                <div>
+                    <img src={cart_empty} alt="img" width={100}/>
+                </div>
+                <div>购物袋空空如也</div>
+                <div>
+                    <button className="empty-button"
+                            onClick={() => {
+                                this.props.history.push({
+                                    pathname: `/`
+                                })
+                            }}>
+                        去逛逛
+                    </button>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default withRouter(Empty)

src/case/ShopApp/src/pages/cart/index.js

@@ -0,0 +1,20 @@
+import React from 'react'
+import {Switch, Route} from 'react-router-dom'
+
+import All from './all'
+import CartOrders from './orders'
+import Pay from './pay'
+import './index.css'
+
+const Cart = () => (
+    <div style={{height: '100%'}}>
+        <Switch>
+            <Route exact path="/cart" component={All}/>
+            <Route exact path="/cart/all" component={All}/>
+            <Route path="/cart/orders" component={CartOrders}/>
+            <Route path="/cart/pay" component={Pay}/>
+        </Switch>
+    </div>
+)
+
+export default Cart

src/case/ShopApp/src/pages/cart/orders/index.css

@@ -0,0 +1,128 @@
+.orders-content-wrap > div {
+    margin-bottom: 10px;
+    background: white;
+}
+
+.orders-address-add {
+    height: 50px;
+    font-size: 16px;
+    text-align: center;
+    line-height: 50px;
+}
+
+.orders-address-label {
+    width: 16%;
+    float: left;
+}
+
+.orders-address:after {
+    left: 0;
+    right: 0;
+    content: "";
+    height: 2px;
+    position: absolute;
+    background: repeating-linear-gradient(-45deg,#ff6d6d,#ff6d6d 20%,transparent 0,transparent 25%,#3283fa 0,#3283fa 45%,transparent 0,transparent 50%);
+    background-size: 80px;
+}
+
+.orders-footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+}
+
+.orders-delivery > div:nth-child(1) {
+    border-bottom: 1px solid #ebedf0;
+}
+
+.orders-price > div {
+    padding: 10px 15px;
+}
+
+.cart-orders-intro {
+    width: 55%;
+    position: relative;
+    text-align: left;
+}
+
+.cart-orders-intro :first-child {
+    color: black;
+}
+
+.cart-orders-intro :nth-child(2) {
+    font-size: 12px;
+    color: gray;
+}
+
+.cart-orders-intro :last-child {
+    color: #f44;
+    position: absolute;
+    bottom:0;
+    font-weight: 500;
+}
+
+.cart-orders-count {
+    text-align: right;
+    padding-right: 10px;
+    color: #323233;
+}
+
+.am-list-content, .am-list-extra{
+    font-size: 14px!important;
+    color: #323233!important;
+}
+
+.orders-message input {
+    font-size: 14px!important;
+}
+
+.orders-message-title {
+    width: 20%;
+    max-width: 90px;
+    font-size: 14px;
+}
+
+.orders-message-textarea {
+    width: 80%;
+    color: #969799;
+    text-align: right;
+    position: relative;
+    vertical-align: middle;
+    display: flex;
+    align-items: center;
+}
+
+.message-textarea {
+    border: 0;
+    margin: 0;
+    padding: 0;
+    width: 100%;
+    resize: none;
+    display: block;
+    color: #323233;
+    box-sizing: border-box;
+    background-color: transparent;
+}
+
+.orders-price {
+    font-weight: 600;
+    color: #323233;
+}
+
+.orders-price span {
+    float: right;
+}
+
+.packup {
+    display: none;
+}
+
+.packup-unfold {
+    background: #f5f5f9;
+    text-align: center;
+}
+
+.packup-title {
+    padding-top: 5px;
+}

src/case/ShopApp/src/pages/cart/orders/index.js

@@ -0,0 +1,431 @@
+import React, {Component} from 'react'
+import {withRouter} from 'react-router-dom'
+import {message} from 'antd'
+import {NavBar, Icon, List, Picker, ActivityIndicator, InputItem} from 'antd-mobile'
+import classNames from 'classnames'
+import {Query, Mutation} from "react-apollo"
+import gql from "graphql-tag"
+import moment from 'moment'
+
+import {user_default_address, create_order, create_order_product, orderbyprops} from "../../../utils/gql"
+import {idGen} from "../../../utils/func"
+import {getCookie} from "../../../utils/cookie"
+import './index.css'
+
+const Item = List.Item
+const Brief = Item.Brief
+
+const delivery = [
+    {
+        label: "快递配送",
+        value: "快递配送",
+    },
+    {
+        label: "门店自提",
+        value: "门店自提",
+    }
+]
+
+class CartOrders extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            cartList: [],
+            unfoldList: [],
+            totalPrice: JSON.parse(sessionStorage.getItem('totalPrice')),
+            totalCount: JSON.parse(sessionStorage.getItem('totalCount')),
+            delivery: ["快递配送"],
+            height: '100%',
+            unfoldStatus: true,
+            foldStatus: false,
+            selectAddress: JSON.parse(sessionStorage.getItem('ordersAddress')),
+            remark:''
+        }
+    }
+
+    componentWillMount() {
+        // console.log('CartOrders componentWillMount',this.props)
+        let type = this.props.history.location.state.dataType
+        let cartList = JSON.parse(sessionStorage.getItem(type))
+        if (cartList.length > 3) {
+            let cartList1 = cartList.slice(0, 3)
+            let unfoldList = cartList.slice(3)
+            this.setState({
+                cartList: cartList1,
+                unfoldList
+            })
+        } else {
+            this.setState({
+                cartList
+            })
+        }
+    }
+
+    onChangeDelivery = (val) => {
+        this.setState({
+            delivery: val,
+        })
+    }
+
+    onChangeHeight = (height, unfoldStatus, foldStatus) => {
+        this.setState({
+            height,
+            unfoldStatus,
+            foldStatus
+        })
+    }
+
+    onSubmitOrderAndProduct = (user_id,create_order,create_order_product) => {
+        let ordersAddress = JSON.parse(sessionStorage.getItem('ordersAddress'))
+
+        if(ordersAddress){
+            let {totalCount, totalPrice, remark, delivery} = this.state
+            let createdAt = moment().format('YYYY-MM-DD HH:mm:ss')
+            let {id:userAddress_id, telephone, username, province, city, area, address} = ordersAddress
+            let addressData = String(province + city + area + address)
+            let tag = telephone ? telephone.replace(/[^0-9]/ig, "").slice(-4) : Math.random().toString(10).substr(2,4)
+            const orderId = createdAt.replace(/[^0-9]/ig, "").substr(2) + tag
+            let orderLogisticsId = idGen('deliver')
+
+            const orderContent = {
+                remark,
+                updatedAt: "",
+                orderLogistics_id: orderLogisticsId,
+                orderTotalPay: totalPrice,
+                createdAt,
+                orderStatus: "0",
+                userAddress_id,
+                id:orderId,
+                count: totalCount,
+                user_id,
+                productTotalPay: totalPrice,
+                orderPay_id: "",
+                deleteId:[]
+            }
+
+            const orderLogistics = {
+                updatedAt: "",
+                deliveryTime: "",
+                serviceStore: "",
+                expressName:delivery[0],
+                logisticsFee: 0.0,
+                expressId: "",
+                createdAt,
+                order_id: orderId,
+                consigneeTel: telephone,
+                orderLogisticsId,
+                consignAddress: addressData,
+                LogisticsStatus: "0",
+                user_id,
+                consigneeName: username
+            }
+
+            let type = this.props.history.location.state.dataType
+            let shopping = JSON.parse(sessionStorage.getItem(type))
+            if(type === 'cartSelected') orderContent.deleteId = shopping.map(item => item.id)
+
+            // console.log('createOrder orderContent',orderContent)
+
+            let createOrder = create_order({variables:{...orderContent, ...orderLogistics}})
+
+            let createOrderProduct = shopping.map((item,index) => {
+                let createdAt = moment().format('YYYY-MM-DD HH:mm:ss')
+                let orderProductId =  createdAt.replace(/[^0-9]/ig, "").substr(2) + tag +index
+                let {count, product_id:productData, specificationStock_id:specData} = item
+                let {id:product_id, img, name, price, unit} = productData
+                let {id:specId, color, size} = specData
+                // console.log('product',index,item,product_id)
+
+                const orderProduct = {
+                    updatedAt: "",
+                    productColor: color,
+                    unit,
+                    product_id,
+                    specificationStock_id:specId,
+                    productSize:size,
+                    orderPay: price,
+                    createdAt,
+                    productImg:img,
+                    productName: name,
+                    order_id: orderId,
+                    productPrice:price,
+                    id:orderProductId,
+                    user_id,
+                    count,
+                    productPay: price,
+                    orderPay_id: "",
+                }
+                // console.log(`orderProduct${index}`,orderProduct)
+
+                return create_order_product({variables:orderProduct}).then((data)=>{
+                    // console.log('ok data',index,data)
+                    return data.data
+                })
+            })
+
+            Promise.all([createOrder, createOrderProduct]).then((data)=> {
+                // console.log('onSubmitOrderAndProduct data',data)
+                sessionStorage.setItem('payOrder',JSON.stringify(orderContent))
+                if(type === 'cartSelected'){
+                    let cartCount = JSON.parse(localStorage.getItem("cartCount")) - totalCount
+                    localStorage.setItem("cartCount",JSON.stringify(cartCount))
+                    localStorage.removeItem("cartList")
+                }
+
+                this.props.history.push({
+                    pathname:'/cart/pay',
+                    state:{}
+                })
+            }).catch((err)=>{
+                console.log('submit error',err)
+            })
+        }else {
+            message.warning('请添加收货地址')
+        }
+
+    }
+
+    render() {
+        let {cartList, unfoldList, height, unfoldStatus, foldStatus, totalPrice, selectAddress} = this.state
+        let user_id = getCookie('user_id')
+
+        return (
+            <div className='orders-wrap'>
+                <div className='orders-navbar-wrap navbar'>
+                    <NavBar
+                        className='orders-navbar'
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => {
+                            // this.props.history.goBack()
+                            this.props.history.push({
+                                pathname:'/cart',
+                                state:{
+                                    updateData:true,
+                                    tabHidden:false
+                                }
+                            })
+                        }}
+                    >订单确认</NavBar>
+                </div>
+                <div className='orders-content-wrap content-wrap'>
+                    <div className='orders-address'>
+                        {
+                            selectAddress ?
+                                <OrdersAddress props={this.props} selectAddress={selectAddress} />:
+                                <Query query={gql(user_default_address)} variables={{user_id, default:1}}>
+                                    {
+                                        ({loading, error, data}) => {
+                                            if (loading) {
+                                                return (
+                                                    <div className="loading-center">
+                                                        <ActivityIndicator size="large"/>
+                                                        <span>加载中...</span>
+                                                    </div>
+                                                )
+                                            }
+                                            if (error) {
+                                                return 'error!'
+                                            }
+                                            let defaultAddress = data.defaultAddress[0]
+
+                                            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>
+                        }
+                    </div>
+                    <div className='orders-detail'>
+                        <div className='cart-content'>
+                            {
+                                cartList.map((item, index) => {
+                                    return (
+                                        <div key={'cart-orders-'+item.id}>
+                                            <div className="cart-list">
+                                                <div className="cart-list-image">
+                                                    <img src={item.product_id.img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt=""/>
+                                                </div>
+                                                <div className="cart-orders-intro">
+                                                    <div className='hide-extra-text'>{item.product_id.name}</div>
+                                                    <div>{item.specificationStock_id.color}  {item.specificationStock_id.size}</div>
+                                                    <div>¥ {item.product_id.price}</div>
+                                                </div>
+                                                <div className="cart-orders-count">
+                                                    x {item.count}
+                                                </div>
+                                            </div>
+                                        </div>
+                                    )
+                                })
+                            }
+                            <div className={classNames({'packup': !unfoldList.length, 'packup-unfold': true})}
+                                 style={{height: height}}>
+                                {
+                                    unfoldStatus ?
+                                        <div onClick={() => {
+                                            this.onChangeHeight(96 * unfoldList.length + 42, false, true)
+                                        }}>
+                                            <div className='packup-title'>展开全部商品</div>
+                                            <div>∨</div>
+                                        </div>
+                                        : ''
+                                }
+                                {
+                                    foldStatus ?
+                                        <div onClick={() => {
+                                            this.onChangeHeight('100%', true, false)
+                                        }}>
+                                            {
+                                                unfoldList.map((item, index) => {
+                                                    return (
+                                                        <div key={index}>
+                                                            <div className="cart-list">
+                                                                <div className="cart-list-image">
+                                                                    <img src={item.product_id.img} alt=""/>
+                                                                </div>
+                                                                <div className="cart-orders-intro">
+                                                                    <div className='hide-extra-text'>{item.product_id.name}</div>
+                                                                    <div>{item.specificationStock_id.color}  {item.specificationStock_id.size}</div>
+                                                                    <div>¥ {item.product_id.price}</div>
+                                                                </div>
+                                                                <div className="cart-orders-count">
+                                                                    x {item.count}
+                                                                </div>
+                                                            </div>
+                                                        </div>
+                                                    )
+                                                })
+                                            }
+                                            <div className='packup-title'>收起</div>
+                                            <div>∧</div>
+                                        </div> : ''
+                                }
+
+                            </div>
+                        </div>
+                    </div>
+                    <div className='orders-delivery'>
+                        <div>
+                            <Picker
+                                data={delivery}
+                                value={this.state.delivery}
+                                cols={1}
+                                onChange={this.onChangeDelivery}
+                            >
+                                <List.Item arrow="horizontal">配送方式</List.Item>
+                            </Picker>
+                        </div>
+                        <div className="orders-message">
+                            <InputItem
+                                labelNumber={4}
+                                placeholder="输入留言内容(50字以内)"
+                                maxLength={50}
+                                onBlur={(val) => {
+                                    // console.log('orders-remark val',val)
+                                    this.setState({
+                                        remark:val
+                                    })
+                                }}
+                            >
+                                <div className='orders-message-title'>买家留言</div>
+                            </InputItem>
+                        </div>
+                    </div>
+                    <div className='orders-price'>
+                        <div>商品金额
+                            <span>¥ {totalPrice}</span>
+                        </div>
+                        <div>运费
+                            <span>¥ 0.00</span>
+                        </div>
+                    </div>
+                </div>
+                <Mutation mutation={gql(create_order)}
+                          onError={error=>console.log('create_order error',error)}
+                >
+                    {(create_order,{ loading, error }) => (
+                        <div className="orders-footer">
+                            <div className="jiesuan">
+                                <div className='jiesuan-total'>
+                                    <span>合计：</span>
+                                    <span className="jiesuan-total_price">¥ {totalPrice}</span>
+                                </div>
+                                <Mutation
+                                    mutation={gql(create_order_product)}
+                                    onError={error=>console.log('create_order_product error',error)}
+                                    refetchQueries={[{query: gql(orderbyprops), variables: {user_id, orderStatus:'0'}}]}
+                                >
+                                    {(create_order_product,{ loading, error }) => (
+                                        <button className="jiesuan-button"
+                                                onClick={()=>{
+                                                    this.onSubmitOrderAndProduct(user_id,create_order,create_order_product)
+                                                }}>
+                                            <span>提交订单</span>
+                                        </button>
+                                    )}
+                                </Mutation>
+                            </div>
+                        </div>
+                    )}
+                </Mutation>
+            </div>
+        )
+    }
+}
+
+export default withRouter(CartOrders)
+
+const OrdersAddress =({props,selectAddress}) => {
+    let {default:isDefault, username, telephone, province, area, city, address} = selectAddress
+    sessionStorage.setItem('ordersAddress',JSON.stringify(selectAddress))
+
+    return (
+        <List>
+            <Item
+                arrow="horizontal"
+                multipleLine
+                onClick={() => {
+                    props.history.push({
+                        pathname:'/my/tools',
+                        state: {
+                            page: 'address',
+                            prePage: 'orders'
+                        }})
+                }}>
+                <div>
+                    <span>{username}</span>&nbsp;&nbsp;
+                    <span>{telephone}</span>
+                </div>
+                <div>
+                    <div>
+                        {
+                            isDefault ?
+                                <div className="orders-address-label">
+                                    <span className='address-label'>默认</span>
+                                </div>:''
+                        }
+                        <Brief style={{fontSize: 13}}>{province}{area}{city}{address}</Brief>
+                    </div>
+                </div>
+            </Item>
+        </List>
+    )
+}

src/case/ShopApp/src/pages/cart/pay/index.css

@@ -0,0 +1,57 @@
+.pay-content-wrap {
+    color: #323233;
+}
+
+.pay-content-wrap > div{
+    margin-bottom: 10px;
+    background: white;
+    padding: 10px;
+}
+
+.pay-content-price {
+    text-align: center;
+}
+
+.pay-content-price p:first-child {
+    padding-top: 20px;
+}
+
+.pay-content-price p:nth-child(2) {
+    font-size: 24px;
+    font-weight: 500;
+}
+
+.pay-content-type p:first-child {
+    color: #929292;
+    font-size: 12px;
+}
+
+.pay-content-type span {
+    padding-left: 10px;
+}
+
+.pay-content-type span:last-child {
+    float: right;
+}
+
+.confirm-footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+}
+
+.confirm-button {
+    width: 100%;
+    height: 100%;
+    color: #fff;
+    background-color: #f44;
+    border: 1px solid #f44;
+    font-size: 16px;
+    text-align: center;
+    letter-spacing: 2px;
+}
+
+.pay-disabled {
+    opacity: 0.5;
+}

src/case/ShopApp/src/pages/cart/pay/index.js

@@ -0,0 +1,187 @@
+import React, {Component} from 'react'
+import {withRouter} from 'react-router-dom'
+import {message} from 'antd'
+import {NavBar, Icon, Checkbox, Toast} from 'antd-mobile'
+import classNames from 'classnames'
+import axios from 'axios'
+import {Mutation} from "react-apollo"
+import gql from "graphql-tag"
+import moment from 'moment'
+
+import {orderbyprops, update_order} from "../../../utils/gql"
+import {getCookie} from "../../../utils/cookie"
+import './index.css'
+import {getIsWechatBrowser} from "../../../utils/func"
+
+let clicktag = 1;  //微信发起支付点击标志
+class Pay extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            checked: true,
+            payOrder: JSON.parse(sessionStorage.getItem('payOrder'))
+        }
+    }
+
+    changeCheckedStatus = (e) => {
+        this.setState({
+            checked: e.target.checked
+        })
+    }
+
+    pay = () => {
+        Toast.info('支付成功', 2);
+        this.props.history.push({
+            pathname: '/my'
+        })
+    }
+
+    // prepay_id微信生成的预支付会话标识，用于后续接口调用中使用，该值有效期为2小时
+    jsApiPay = (args, id, update_order) => {
+        // console.log('jsApiPay params', args);
+        let $this = this
+
+        function onBridgeReady() {
+            window.WeixinJSBridge.invoke(
+                'getBrandWCPayRequest', args,
+                function (res) {
+                    // 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回 ok，但并不保证它绝对可靠。
+                    if (res.err_msg === "get_brand_wcpay_request:ok") {
+                        // 成功完成支付
+                        message.success('支付成功，等待发货')
+                        let updatedAt = moment().format('YYYY-MM-DD HH:mm:ss')
+                        const updateContent = {
+                            id,
+                            orderStatus: '1',
+                            updatedAt
+                        }
+                        update_order({variables: updateContent})
+                        $this.props.history.push({
+                            pathname: '/my'
+                        })
+                    }
+                    else {
+                        if (res.err_msg === "get_brand_wcpay_request:cancel") {
+                            message.warning('您的支付已经取消')
+                        } else if (res.err_msg === "get_brand_wcpay_request:fail") {
+                            message.error('支付失败，请稍后重试')
+                        } else {
+                            message.error('支付失败，请稍后重试')
+                        }
+                    }
+                }
+            );
+        }
+
+        if (typeof window.WeixinJSBridge === "undefined") {
+            if (document.addEventListener) {
+                document.addEventListener('WeixinJSBridgeReady', onBridgeReady, false)
+            } else if (document.attachEvent) {
+                document.attachEvent('WeixinJSBridgeReady', onBridgeReady)
+                document.attachEvent('onWeixinJSBridgeReady', onBridgeReady)
+            }
+        } else {
+            onBridgeReady()
+        }
+    }
+
+    getBridgeReady = (update_order, id, needPay) => {
+        // console.log('getBridgeReady params',id,needPay)
+        let isWechat = getIsWechatBrowser()
+        if (clicktag === 1 && isWechat) {
+            clicktag = 0   //进行标志，防止多次点击
+            let openid = getCookie('openid')
+
+            let $this = this
+            axios.get('/payinfo', {
+                params: {
+                    needPay: parseInt(needPay * 100, 10),
+                    openid,
+                    tradeNo: id
+                }
+            })
+                .then((res) => {
+                    // console.log('onBridgeReady res',res)
+                    $this.jsApiPay(res.data, id, update_order)
+                    setTimeout(() => {
+                        clicktag = 1
+                    }, 5000)
+                })
+                .catch((error) => {
+                    message.warning('网络或系统故障，请稍后重试')
+                    console.log('onBridgeReady error', error)
+                })
+        } else {
+            message.info('当前只支持在微信中打开')
+        }
+    }
+
+    render() {
+        let {checked, payOrder} = this.state
+        let {id, orderTotalPay} = payOrder
+        let user_id = getCookie('user_id')
+        return (
+            <div className='pay-wrap'>
+                <div className='pay-navbar-wrap navbar'>
+                    <NavBar
+                        className='pay-navbar'
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => {
+                            this.props.history.goBack()
+                        }}
+                    >订单支付</NavBar>
+                </div>
+                <div className='pay-content-wrap content-wrap'>
+                    <div className='pay-content-price'>
+                        <p>订单金额:</p>
+                        <p>￥: {orderTotalPay}</p>
+                    </div>
+                    <div className='pay-content-type'>
+                        <p>请选择支付方式</p>
+                        <div>
+                            <img src="https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/wechat.png" alt=''/>
+                            <span>微信支付</span>
+                            <span>
+                                <Checkbox checked={checked} onChange={(e) => this.changeCheckedStatus(e)}/>
+                            </span>
+                        </div>
+                    </div>
+                </div>
+                <div className="confirm-footer">
+                    <Mutation mutation={gql(update_order)}
+                              onError={error => console.log('error', error)}
+                              refetchQueries={[
+                                  {query: gql(orderbyprops), variables: {user_id, orderStatus: '1'}},
+                                  {query: gql(orderbyprops), variables: {user_id, orderStatus: '0'}},
+                              ]}
+                    >
+                        {(update_order, {loading, error}) => (
+                            <button
+                                className={classNames({
+                                    'confirm-button': true,
+                                    'pay-disabled': !checked
+                                })}
+                                onClick={() => {
+                                    if (checked) {
+                                        // this.pay()
+                                        // const updateContent = {
+                                        //     id,
+                                        //     orderStatus: '1',
+                                        //     updatedAt: '123'
+                                        // }
+                                        // update_order({variables: updateContent})
+                                        this.getBridgeReady(update_order, id, orderTotalPay)
+                                    }
+                                }}>
+                                <span>确认支付</span>
+                            </button>
+                        )}
+                    </Mutation>
+                </div>
+            </div>
+        )
+    }
+}
+
+export default withRouter(Pay)

src/case/ShopApp/src/pages/home/all/index.css

@@ -0,0 +1,16 @@
+.guess-wrap {
+    background-color: white;
+    min-height: 300px;
+    position: relative;
+    padding-bottom: 20px;
+}
+
+.guess-title {
+    display: block;
+    color: #fb9494;
+    font-size: 16px;
+    margin: 0 auto;
+    padding: 20px 0;
+    width: 120px;
+    text-align: center;
+}

src/case/ShopApp/src/pages/home/all/index.js

@@ -0,0 +1,229 @@
+import React, {Component} from "react"
+import {withRouter} from 'react-router-dom'
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
+import {Grid, Carousel, WhiteSpace, ActivityIndicator} from 'antd-mobile'
+import Logo from '../../../components/logo'
+import {category_by_props, productbyprops} from "../../../utils/gql"
+import './index.css'
+
+class All extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            data: [
+                'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/ecslider1.jpg',
+                'https://zos.alipayobjects.com/rmsportal/AiyWuByWklrrUDlFignR.png',
+                'https://zos.alipayobjects.com/rmsportal/TekJlZRVCjLFexlOCuWn.png',
+                // 'https://green-1258802564.cos.ap-beijing.myqcloud.com/shop.jpg',
+                'https://zos.alipayobjects.com/rmsportal/IJOtIlfsYdTyaDTRVrLI.png'
+            ]
+        }
+    }
+
+    render() {
+        const categoryFilter = {
+            "status": "1",
+            "limit": 7,
+            "sort_by": {"order": "asc"}
+        }
+
+        const demo = [
+            {
+                icon: 'https://green-1258802564.cos.ap-beijing.myqcloud.com/plant.png',
+                text: '松柏',
+                id: 'more'
+            },
+            {
+                icon: 'https://green-1258802564.cos.ap-beijing.myqcloud.com/plant.png',
+                text: '花果',
+                id: 'more'
+            },
+            {
+                icon: 'https://green-1258802564.cos.ap-beijing.myqcloud.com/plant.png',
+                text: '杂木',
+                id: 'more'
+            },
+            {
+                icon: 'https://green-1258802564.cos.ap-beijing.myqcloud.com/plant.png',
+                text: '藤本',
+                id: 'more'
+            }
+        ]
+
+        const more = {
+            icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/more.png',
+            text: '更多',
+            id: 'more'
+        }
+
+        return (
+            <div>
+                <Carousel
+                    autoplay={true}
+                    infinite
+                    style={{minHeight: 200}}
+                >
+                    {this.state.data.map(val => (
+                        <a
+                            key={val}
+                            href="http://www.alipay.com"
+                            style={{
+                                display: 'inline-block',
+                                width: '100%',
+                                height: 'auto',
+                                maxHeight: '200px',
+                                overflow: 'hidden'
+                            }}
+                        >
+                            <img
+                                src={val}
+                                alt=""
+                                style={{width: '100%', verticalAlign: 'top'}}
+                            />
+                        </a>
+                    ))}
+                </Carousel>
+                <Query query={gql(category_by_props)} variables={categoryFilter}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return (
+                                    <div className="loading-center">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                )
+                            }
+                            if (error) {
+                                return 'error!'
+                            }
+
+                            let categoryList = data.categorybyprops
+                            let dataList = categoryList.concat(more)
+
+                            let demoDataList = demo.concat(more)
+
+                            return (
+                                <Grid
+                                    data={dataList}
+                                    dataOther={demoDataList}
+                                    // data={demoDataList}
+                                    // dataOther={dataList}
+                                    hasLine={false}
+                                    onClick={(kind) => {
+                                        this.props.history.push({
+                                            pathname: '/home/kind',
+                                            state: {
+                                                id: kind.id,
+                                                category: kind.text
+                                            }
+                                        })
+                                    }}/>
+                            )
+                        }
+                    }
+                </Query>
+                <WhiteSpace/>
+                <div className='guess-wrap'>
+                    <Query query={gql(productbyprops)} variables={{status: '1', recommend: 1}}>
+                        {
+                            ({loading, error, data}) => {
+                                if (loading) {
+                                    return (
+                                        <div className="loading-center">
+                                            <ActivityIndicator text="Loading..." size="large"/>
+                                        </div>
+                                    )
+                                }
+                                if (error) {
+                                    return 'error!'
+                                }
+                                // console.log(data.productbyprops)
+                                return (
+                                    <Recommend data={data.productbyprops} history={this.props.history}/>
+                                )
+                            }
+                        }
+                    </Query>
+                </div>
+                <Logo/>
+            </div>
+        )
+    }
+}
+
+class Recommend extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        let {data} = this.props
+        let demoData = [
+            {
+                id: '1',
+                name: '北欧仿真植物装饰龟背竹绿植盆栽旅人蕉假树天堂鸟室内网红大型',
+                price: 100,
+                discountRate: 80,
+                img: 'https://green-1258802564.cos.ap-beijing.myqcloud.com/pfzd1.jpeg'
+            },
+            {
+                id: '2',
+                name: '北欧仿真植物装饰龟背竹绿植盆栽旅人蕉假树天堂鸟室内网红大型',
+                price: 200,
+                discountRate: 80,
+                img: 'https://green-1258802564.cos.ap-beijing.myqcloud.com/pfzd2.jpg'
+            },
+            {
+                id: '3',
+                name: '北欧仿真植物装饰龟背竹绿植盆栽旅人蕉假树天堂鸟室内网红大型',
+                price: 300,
+                discountRate: 80,
+                img: 'https://green-1258802564.cos.ap-beijing.myqcloud.com/pfzd1.jpeg'
+            },
+            {
+                id: '4',
+                name: '北欧仿真植物装饰龟背竹绿植盆栽旅人蕉假树天堂鸟室内网红大型',
+                price: 200,
+                discountRate: 80,
+                img: 'https://green-1258802564.cos.ap-beijing.myqcloud.com/pfzd2.jpg'
+            }
+        ]
+        return (
+            <div className='guess-wrapper'>
+                <div className='guess-title'>- 店长推荐 -</div>
+                <Grid
+                    data={data}
+                    demoData={demoData}
+                    // data={demoData}
+                    // demoData={data}
+                    columnNum={2}
+                    hasLine={false}
+                    onClick={(recommend) => {
+                        this.props.history.push({
+                            pathname: '/home/detail',
+                            state: {
+                                id: recommend.id
+                            }
+                        })
+                    }}
+                    renderItem={dataItem => (
+                        <div key={dataItem.id} className='product-item'>
+                            <div className='product-item-img' style={{backgroundImage: "url('" + dataItem.img + "')"}}/>
+                            <div className='product-item-description'>
+                                <div className='product-item-name'>{dataItem.name}</div>
+                                <div className='product-item-price'>
+                                    <span>￥{(dataItem.price * dataItem.discountRate / 100).toFixed(2)}</span>&nbsp;
+                                    <span>￥{dataItem.price}</span>
+                                </div>
+                            </div>
+                        </div>
+                    )}
+                />
+            </div>
+        )
+    }
+}
+
+export default withRouter(All)

src/case/ShopApp/src/pages/home/detail/index.css

@@ -0,0 +1,306 @@
+.detail-wrap {
+
+}
+
+.detail-padding {
+    padding: 5px 10px;
+}
+
+.detail-wrapper {
+    height: 100%;
+}
+
+.detail-simple-show {
+    height: 70%;
+    background-color: white;
+}
+
+.detail-img {
+    width: 100%;
+    background-size: cover;
+    background-repeat: no-repeat;
+    margin: 0 auto;
+}
+
+.detail-name {
+    font-size: 16px;
+}
+
+.detail-intro {
+    font-size: 12px;
+    color: #666666;
+}
+
+.detail-price span:first-child {
+    color: #f44;
+    font-size: 22px;
+    font-weight: 500;
+}
+
+.detail-price span:nth-child(2){
+    text-decoration: line-through;
+    color: gray;
+    font-size: 14px;
+}
+
+.detail-stock {
+    float: right;
+    color: #5f6f86;
+}
+
+.detail-complicate-show {
+    margin-top: 15px;
+    background-color: white;
+}
+
+.detail-complicate-title {
+    background-color: white;
+}
+
+.detail-complicate-show-img {
+
+}
+
+.detail-footer {
+    position: fixed;
+    bottom: 0;
+    width: 100%;
+    height: 50px;
+}
+
+.detail-bottom {
+    height: 100%;
+    display: flex;
+    font-size: 16px;
+    align-items: center;
+    background-color: #fdfbfb;
+    /*border-top: 1px solid #f5f5f9;*/
+    z-index: 3;
+}
+
+.detail-bottom-icon {
+    height: 100%;
+    width: 15%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+.am-badge-text {
+    height: 14px;
+    line-height: 14px;
+    font-size: 10px;
+}
+
+.border-right {
+    border-right: 1px solid #f5f5f9;
+}
+
+.detail-bottom-button {
+    display: inline-block;
+    width: 35%;
+    text-align: center;
+    height: 100%;
+    line-height: 50px;
+}
+
+.add {
+    color: #0a0a0a;
+    background-color: #ffd6c7;
+}
+
+.buy {
+    color: white;
+    background-color: #f44;
+}
+
+.detail-icon-wrap {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    flex-direction: column;
+}
+
+.detail-icon {
+    width: 25px;
+    height: 25px;
+}
+
+.detail-icon-cart {
+    background: url("https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/cart.png") no-repeat;
+    background-size: cover;
+}
+
+.detail-icon-shop {
+    background: url("https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/ship.png") no-repeat;
+    background-size: cover;
+}
+
+.am-modal-popup {
+    height: 425px;
+    overflow: auto;
+}
+
+.am-modal-content {
+    text-align: left;
+}
+
+.main-goods-box {
+    padding: 12px;
+    color: #333;
+}
+
+.close-popup {
+    width: 42px;
+    height: 52px;
+    position: absolute;
+    right: 0;
+    top: 0;
+    font-size: 30px;
+    font-weight: lighter;
+    text-align: center;
+    z-index: 5;
+}
+
+.goods-box {
+    width: 100%;
+    height: 100%;
+    background-color: #fff;
+    position: relative;
+    padding-top: 95px;
+}
+
+.goods-info {
+    position: absolute;
+    top: 0;
+    left: 0;
+    display: flex;
+}
+
+.goods-info img {
+    width: 100%;
+    height: 100%;
+}
+
+.goods-info .left {
+    width: 80px;
+    height: 80px;
+    overflow: hidden;
+}
+
+.goods-info .mid {
+    flex: 1;
+    display: flex;
+    flex-wrap: wrap;
+    align-content: flex-end;
+    height:  80px;
+    margin-left: 10px;
+}
+
+.goods-info .right {
+    display: flex;
+    align-items: flex-end;
+    width: 40px;
+    text-align: right;
+    font-size: 10px;
+    line-height: 15px;
+    color: #999;
+    margin-left:  10px;
+    white-space: nowrap;
+}
+
+.goods_price {
+    height: 20px;
+    line-height: 20px;
+    font-size: 17px;
+    font-weight: 500;
+}
+
+.selected-type {
+    width: 100%;
+    max-height: 32px;
+    line-height: 16px;
+    font-size: 11px;
+    margin-top: 2px;
+    overflow: hidden;
+}
+
+.goods_type {
+    padding: 8px 0;
+    position: relative;
+}
+
+li, ol, ul {
+    list-style: none;
+}
+
+.goods_type ul {
+    padding-inline-start: 0;
+}
+
+.goods_type ul li dl {
+    width: 100%;
+    display: block;
+    overflow: auto;
+}
+
+.goods_type ul li dl .spec-red {
+    border: 1px solid red;
+    color: red;
+}
+
+.goods_type ul li dl .spec-gray {
+    border: 1px solid #989898;
+    color: #989898;
+}
+
+.goods_type ul li dl dd {
+    display: block;
+    float: left;
+    margin-top: 8px;
+    margin-right:  8px;
+    padding: 4px 10px;
+    border: 1px solid #333;
+    font-size: 12px;
+    line-height: 12px;
+    transition: all .2s;
+    box-sizing: content-box;
+}
+
+.goods_type:after {
+    position: absolute;
+    display: block;
+    background: #eee;
+    content: "";
+    left: 0;
+    bottom: 0;
+    width: 100%;
+    height: 1px;
+    transform: scaleY(.5);
+}
+
+.type-title {
+    width: 100%;
+    font-size: 12px;
+    line-height: 16px;
+    height: 16px;
+}
+
+.edit-product {
+    display: block;
+    padding-top: 15px;
+    overflow: hidden;
+    position: relative;
+    line-height: 28px;
+}
+
+.edit-product-text {
+    float: left;
+    font-size: 14px;
+    color: #2c2f34;
+}
+
+.edit-product-count {
+    overflow: hidden;
+    float: right;
+}

src/case/ShopApp/src/pages/home/detail/index.js

@@ -0,0 +1,508 @@
+import React, {Component} from 'react'
+import {withRouter} from 'react-router-dom'
+import {Query, Mutation} from "react-apollo"
+import gql from "graphql-tag"
+import {message} from 'antd'
+import {NavBar, Icon, ActivityIndicator, Badge, Modal} from 'antd-mobile'
+import classNames from 'classnames'
+import moment from 'moment'
+
+import {productAndSpec_by_id, create_userCart, cart_by_userid} from "../../../utils/gql"
+import {idGen} from '../../../utils/func'
+import {getCookie} from "../../../utils/cookie"
+import './index.css'
+
+class Detail extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            id: ''
+        }
+    }
+
+    componentWillMount() {
+        let {location} = this.props
+        if(location && location.state) {
+            this.setState({
+                id: location.state.id
+            })
+        }
+    }
+
+    render() {
+        let {id} = this.state
+
+        return (
+            <div className='detail-wrap' >
+                <div className='detail-navbar-wrap navbar'>
+                    <NavBar
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => {this.props.history.go(-1)}}
+                    >商品详情
+                    </NavBar>
+                </div>
+
+                <Query query={gql(productAndSpec_by_id)} variables={{id}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return (
+                                    <div className="loading-center">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                )
+                            }
+                            if (error) {
+                                return 'error!'
+                            }
+                            // console.log('productAndSpec_by_id data',data)
+                            return (
+                                <DetailRender data={data} history={this.props.history}/>
+                            )
+                        }
+                    }
+                </Query>
+            </div>
+        )
+    }
+}
+
+export default withRouter(Detail)
+
+class DetailRender extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            cartCount: JSON.parse(localStorage.getItem('cartCount')),
+            openSelect: false,
+            buttonType: 'add'
+        }
+    }
+
+    showModal = (e,key) => {
+        e.preventDefault(); // 修复 Android 上点击穿透
+        this.setState({
+            [key]: true,
+        })
+    }
+
+    changeDetailState = (state,val) => {
+        this.setState({
+            [state]:val
+        })
+    }
+
+    changeBottomButtonType = (e,val) => {
+        this.setState({
+            buttonType:val
+        })
+        this.showModal(e,'openSelect')
+    }
+
+    render() {
+        let {data} = this.props
+        let {name, intro, img, price, stock, discountRate} = data.productbyid
+        let {cartCount, openSelect, buttonType} = this.state
+        // console.log('DetailRender openSelect',openSelect)
+
+        return (
+            <div className='detail-wrapper content-wrap'>
+                <div className='detail-simple-show'>
+                    {/*<div className='detail-img' style={{backgroundImage: "url('"+ img + "')"}}/>*/}
+                    <img className='detail-img' src={img} alt="商品图片"/>
+                    <div className='detail-intro-content'>
+                        <div className='detail-name detail-padding'>{name}</div>
+                        <div className='detail-intro detail-padding'>{intro}</div>
+                        <div className='detail-price detail-padding'>
+                            <span>￥{(price*discountRate/100).toFixed(2)}</span>&nbsp;&nbsp;
+                            <span>￥{price.toFixed(2)}</span>
+                            <span className='detail-stock'>库存 {stock}</span>
+                        </div>
+                    </div>
+                </div>
+                <div className='detail-complicate-show'>
+                    <div className='detail-padding detail-complicate-title'>商品信息</div>
+                    <div className='detail-complicate-show-img'>
+                        {/*通过商品详情图片展示*/}
+                        <img className='detail-img' src={img} alt="商品图片"/>
+                    </div>
+                </div>
+                <div className='detail-footer'>
+                    <div className='detail-bottom'>
+                        <span className='detail-bottom-icon border-right' onClick={()=>{this.props.history.push({pathname: '/home'})}}>
+                            <div className='detail-icon detail-icon-shop'/>
+                        </span>
+                        <span className='detail-bottom-icon'
+                              onClick={()=>{
+                                  this.props.history.push({
+                                      pathname: '/cart',
+                                      state:{
+                                          updateData:true,
+                                          tabHidden:false
+                                      }
+                                  })
+                              }}
+                        >
+                            <div className='detail-icon detail-icon-cart'/>
+                            <Badge text={cartCount} overflowCount={90} hot>
+                                 <span style={{display: 'inline-block' }} />
+                            </Badge>
+                        </span>
+                        <span className='detail-bottom-button add' onClick={(e)=>{this.changeBottomButtonType(e,'add')}}>加入购物袋</span>
+                        <span className='detail-bottom-button buy' onClick={(e)=>{this.changeBottomButtonType(e,'buy')}}>立即购买</span>
+                        <SelectModal
+                            changeDetailState={this.changeDetailState}
+                            openSelect={openSelect}
+                            buttonType={buttonType}
+                            productData={data}
+                            price={price}
+                            img={img}
+                            history={this.props.history}
+                        />
+                    </div>
+                </div>
+            </div>
+        )
+    }
+}
+
+class SelectModal extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            count: 1,
+            selectColor: '',
+            selectSpec:{},
+            specList: [],
+            colorList: []
+        }
+    }
+
+    componentWillMount() {
+        let {productData} = this.props
+        this.handleData(productData.spec)
+    }
+
+    // 规格表处理
+    handleData = (specs) => {
+        let flag = true, selectFlag = true
+        let specObject = {}, i = 0, specList = []
+        let colorObject = {}, j = 0, colorList = [], selectColor = ''
+        specs.forEach((item) => {
+            let {id,color,size,stock,status} = item
+            if(flag && status > 0) {
+                selectColor = color
+                flag = false
+            }
+            specObject[color] ? specList[specObject[color] - 1].spec.push({id, size, stock, status}) : specObject[color] = ++i && specList.push({
+                color,
+                spec: [{id, size, stock, status}],
+            })
+            if(!colorObject[color]) {
+                colorObject[color] = ++j
+                colorList.push({
+                    id,
+                    color
+                })
+            }
+        })
+
+        specList.forEach((items)=>{
+            let {spec} = items
+            spec.forEach((item)=>{
+                item.select = false
+                if(selectFlag && item.status > 0) {
+                    item.select = true
+                    selectFlag = false
+                }
+            })
+            selectFlag = true
+        })
+
+        this.setState({
+            selectColor,
+            specList,
+            colorList
+        })
+        // console.log('specList',specList)
+        // console.log('colorList',colorList)
+    }
+
+    changeState = (state,val) => {
+        this.setState({
+            [state]:val
+        })
+    }
+
+    //获取输入框的值
+    getInputValue=(e)=>{
+        this.setState({
+            count:e.target.value
+        })
+    }
+
+    // 增加
+    augment=()=>{
+        this.setState({
+            count:this.state.count*1+1
+        })
+    }
+
+    // 减少
+    reduce=()=> {
+        this.setState({
+            count:this.state.count*1-1
+        })
+    }
+
+    // 添加至购物袋
+    onCreateUserCart = (create_userCart, user_id) => {
+        let id = idGen('cart')
+        let {productData} = this.props
+        let product_id = productData.productbyid.id
+        let {count, selectColor, specList} = this.state
+        let specFilter = specList.filter(item=>item.color === selectColor)[0].spec.filter(item=> item.select && item.status > 0)[0]
+        let specificationStock_id =  specFilter.id
+        let createdAt = moment().format('YYYY-MM-DD HH:mm:ss')
+
+        const cartContent = {
+            id,
+            user_id,
+            product_id,
+            specificationStock_id,
+            count,
+            createdAt,
+            updatedAt: ""
+        }
+        // console.log('cartContent',cartContent)
+
+        this.props.changeDetailState('openSelect',false)
+        create_userCart({variables:cartContent}).then((data)=>{
+            // console.log('create_userCart data',data)
+            let cartCount = JSON.parse(localStorage.getItem("cartCount")) + count
+            this.props.changeDetailState('cartCount',cartCount)
+            message.success('成功添加至购物车')
+            localStorage.setItem("cartCount",JSON.stringify(cartCount))
+        })
+    }
+
+    // 立即购买
+    buyNow = () => {
+        let {count, selectColor, specList} = this.state
+        let createdAt = moment().format('YYYY-MM-DD HH:mm:ss')
+        let id = idGen('cart')
+        let {productData} = this.props
+        let {id:product_id, img, intro, name, price, status, stock, unit} = productData.productbyid
+        let specFilter = specList.filter(item=>item.color === selectColor)[0].spec.filter(item=> item.select && item.status > 0)[0]
+        let {id:specificationStock_id, size, stock:specStock, status:specStatus} =  specFilter
+        let totalPrice = price * count
+
+        let buyNowContent = [{
+            count,
+            createdAt,
+            id,
+            product_id:{
+                id:product_id,
+                img,
+                intro,
+                name,
+                price,
+                status,
+                stock,
+                unit
+            },
+            specificationStock_id:{
+                id:specificationStock_id,
+                color:selectColor,
+                size,
+                stock:specStock,
+                status:specStatus
+            }
+        }]
+        // console.log('buyNowContent',buyNowContent)
+        sessionStorage.setItem("buyNowContent",JSON.stringify(buyNowContent))
+        sessionStorage.setItem("totalPrice",JSON.stringify(totalPrice))
+        sessionStorage.setItem("totalCount",JSON.stringify(this.state.count))
+        this.props.changeDetailState('openSelect')
+        this.props.history.push({
+            pathname: '/cart/orders',
+            state:{
+                dataType: 'buyNowContent'
+            }
+        })
+    }
+
+    render() {
+        let user_id = getCookie('user_id')
+        let {price, img, buttonType} = this.props
+        let {count, selectColor, specList, colorList} = this.state
+        let specFilter = specList.filter(item=>item.color === selectColor)[0].spec.filter(item=> item.select && item.status > 0)[0]
+        let specStock =  specFilter.stock || 0
+        let selectSize =  specFilter.size
+
+        return(
+            <Modal
+                popup
+                visible={this.props.openSelect}
+                onClose={()=>this.props.changeDetailState('openSelect',false)}
+                animationType="slide-up"
+                // afterClose={() => { console.log('close model')}}
+            >
+                <div className="popup-box" >
+                    <div className="main-goods-box">
+                        <div className="close-popup" onClick={()=>this.props.changeDetailState('openSelect',false)}>
+                            ×
+                        </div>
+                        <div className="goods-box">
+                            <div className="goods-info">
+                                <div className="left">
+                                    <img src={img || "https://gw.alipayobjects.com/zos/rmsportal/nywPmnTAvTmLusPxHPSu.png"} alt="商品图片"/>
+                                </div>
+                                <div className="mid">
+                                    <div className="goods_price"> ￥ {price}</div>
+                                    <div className="selected-type">已选择： {selectColor} / {selectSize}</div>
+                                </div>
+                                <div className="right">库存
+                                    {specStock}
+                                </div>
+                            </div>
+                            <div className="scroll-body">
+                                <div className="goods_type">
+                                    <ul>
+                                        <li>
+                                            <div className="type-title">颜色</div>
+                                            <dl>
+                                                {
+                                                    colorList.map((spec)=>(
+                                                        <dd
+                                                            className={classNames({
+                                                                'spec-red': spec.color === selectColor
+                                                            })}
+                                                            key={'color'+spec.id}
+                                                            onClick={()=>{
+                                                                this.changeState('selectColor',spec.color)
+                                                            }}
+                                                        >
+                                                            {spec.color}
+                                                        </dd>
+                                                    ))
+                                                }
+                                            </dl>
+                                        </li>
+                                        <Specification specList={specList.filter(item=>item.color === selectColor)[0]} changeState={this.changeState}/>
+                                    </ul>
+                                </div>
+                                <div className="edit-product">
+                                    <div className="edit-product-text">购买数量</div>
+                                    <div className="edit-product-count">
+                                        <button
+                                            className={classNames({
+                                                'selected_button-red': true,
+                                                'selected_button-disabled': count <= 1
+                                            })}
+                                            // disabled={count <= 1}
+                                            onClick={()=>{
+                                                if(count > 1){
+                                                    this.reduce()
+                                                }else {
+                                                    message.warning('数量不能小于1个')
+                                                }
+                                            }}
+                                        >-</button>
+                                        <input className="selected_input" type="text" value={count} onChange={(e)=>{this.getInputValue(e)}}/>
+                                        <button className="selected_button-red" onClick={this.augment}>+</button>
+                                    </div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <Mutation mutation={gql(create_userCart)}
+                              refetchQueries={[
+                                  {query: gql(cart_by_userid), variables:{user_id}}
+                              ]}
+                              onError={error=>console.log('error',error)}
+                    >
+                        {(create_userCart,{ loading, error }) => (
+                            <div className='confirm-footer'>
+                                <button
+                                    className='confirm-button'
+                                    onClick={()=>{
+                                        if(buttonType === 'add'){
+                                            this.onCreateUserCart(create_userCart, user_id)
+                                        }else if(buttonType === 'buy'){
+                                            this.buyNow()
+                                        }
+                                    }}
+                                >
+                                    <span>确认</span>
+                                </button>
+                            </div>
+                        )}
+                    </Mutation>
+                </div>
+            </Modal>
+        )
+    }
+}
+
+
+class Specification extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            spec:this.props.specList.spec
+        }
+    }
+
+    componentWillReceiveProps(nextProps, nextContext) {
+        this.setState({
+            spec:nextProps.specList.spec,
+        })
+    }
+
+    // 改变选择
+    changeSelectedStatus=(i)=>{
+        this.setState((prevState, props) => ({
+            spec: prevState.spec.map((item,index)=>{
+                if(index===i){
+                    item.select=true
+                    // console.log('select item',item)
+                    this.props.changeState('selectSpec',item)
+                }else {
+                    item.select=false
+                }
+                return item
+            })
+        }))
+    }
+
+    render() {
+        let {spec} = this.state
+        // console.log('spec',spec)
+
+        return (
+            <li>
+                <div className="type-title">规格</div>
+                <dl>
+                    {
+                        spec.map((item,index)=>(
+                            <dd
+                                className={classNames({
+                                    'spec-gray': item.status < 1,
+                                    'spec-red': item.status > 0 && item.select
+                                })}
+                                key={'spec'+item.id}
+                                onClick={()=>{
+                                    if(item.status > 0)  this.changeSelectedStatus(index)
+                                }}
+                            >
+                                {item.size}
+                            </dd>
+                        ))
+                    }
+                </dl>
+            </li>
+        )
+    }
+}

src/case/ShopApp/src/pages/home/index.css

@@ -0,0 +1,46 @@
+.loading-center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.product-item {
+    width: 100%;
+    height: 100%;
+}
+
+.product-item-img {
+    background-size: cover;
+    background-repeat: no-repeat;
+    width: 60%;
+    height: 80%;
+    display: block;
+    margin: 0 auto;
+}
+
+.product-item-description {
+    font-weight: 500;
+    display: flex;
+    flex-direction: column;
+    color: #010101;
+}
+
+.product-item-name {
+    padding: 5px 15%;
+    text-align: center;
+    white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.product-item-price span:first-child {
+    color: #f5617b;
+}
+
+.product-item-price span:nth-child(2){
+    text-decoration: line-through;
+    color: gray;
+    font-weight: lighter;
+    font-size: 12px;
+}

src/case/ShopApp/src/pages/home/index.js

@@ -0,0 +1,22 @@
+import React from 'react'
+import {Switch, Route} from 'react-router-dom'
+
+import All from './all'
+import Kind from './kind'
+import Detail from './detail'
+import './index.css'
+
+const Home = () => (
+    <div style={{height: '100%'}}>
+        <Switch>
+            <Route exact path="/" component={All}/>
+            <Route exact path="/home" component={All}/>
+            <Route path="/home/all" component={All}/>
+            <Route path="/home/kind" component={Kind}/>
+            <Route path="/home/detail" component={Detail}/>
+        </Switch>
+    </div>
+)
+
+export default Home
+

src/case/ShopApp/src/pages/home/kind/index.css

@@ -0,0 +1,54 @@
+.kind-search-wrap {
+    height: 50px;
+    position: relative;
+    z-index: 0;
+}
+
+.kind-search {
+    width: 90%;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.kind-wrapper {
+    height: 100%;
+    background-color: white;
+    position: relative;
+    z-index: 0;
+}
+
+.kind-empty {
+    position: absolute;
+    left: 50%;
+    top: 45%;
+    transform: translate(-50%, -50%);
+    text-align: center;
+}
+
+.kind-empty > div {
+    padding: 5px;
+}
+
+.kind-navbar-wrap {
+    width: 100%;
+    height: 45px;
+    z-index: 1
+}
+
+.kind-navbar {
+    position: fixed;
+    top: 0;
+    width: 100%;
+}
+
+.kind-title {
+    display: block;
+    color: #f44;
+    font-size: 16px;
+    margin: 0 auto;
+    padding: 20px 0;
+    width: 120px;
+    text-align: center;
+}

src/case/ShopApp/src/pages/home/kind/index.js

@@ -0,0 +1,139 @@
+import React, {Component} from 'react'
+import {withRouter} from 'react-router-dom'
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
+// import {Input} from 'antd'
+import {NavBar, Icon, ActivityIndicator, Grid} from 'antd-mobile'
+
+import {productbyprops} from "../../../utils/gql"
+import './index.css'
+
+// const Search = Input.Search
+
+class Kind extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {
+            id: '',
+            category:'商品列表'
+        }
+    }
+
+    componentWillMount() {
+        let {location} = this.props
+        if(location && location.state) {
+            let {id, category} = location.state
+            this.setState({
+                id,
+                category
+            })
+        }
+    }
+
+    render() {
+        let {id, category} = this.state
+        let contentHeight = window.innerHeight - 45
+        return (
+            <div className='kind-wrap'  style={{height: contentHeight}}>
+                <div className='kind-navbar-wrap'>
+                    <NavBar
+                        className='kind-navbar'
+                        mode="light"
+                        icon={<Icon type="left"/>}
+                        onLeftClick={() => {this.props.history.go(-1)}}
+                    >{category}</NavBar>
+                </div>
+                {/*<div className='kind-search-wrap'>*/}
+                    {/*<Search*/}
+                        {/*className='kind-search'*/}
+                        {/*placeholder="请输入搜索内容"*/}
+                        {/*onSearch={value => console.log(value)}*/}
+                    {/*/>*/}
+                {/*</div>*/}
+                <Query query={gql(productbyprops)} variables={{category_id: id}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return (
+                                    <div className="loading-center">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                )
+                            }
+                            if (error) {
+                                return 'error!'
+                            }
+                            return (
+                                <KindRender
+                                    data={data.productbyprops}
+                                    history={this.props.history}
+                                />
+                            )
+                        }
+                    }
+                </Query>
+            </div>
+        )
+    }
+}
+
+export default withRouter(Kind)
+
+class KindRender extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        let {data} = this.props
+
+        return (
+            <div className='kind-wrapper'>
+                {
+                    data.length === 0?
+                        <div className="kind-empty">
+                            <div>即将上新</div>
+                            <div>
+                                <button className="empty-button"
+                                        style={{width:130, padding:'5px 10px'}}
+                                        onClick={() => {
+                                            this.props.history.push({
+                                                pathname: `/`
+                                            })
+                                        }}>
+                                    先逛逛其他商品
+                                </button>
+                            </div>
+                        </div>
+                        :
+                        <Grid data={data}
+                              columnNum={2}
+                              hasLine={false}
+                              onClick={(product) => {
+                                  this.props.history.push({
+                                      pathname: '/home/detail',
+                                      state: {
+                                          id: product.id
+                                      }
+                                  })
+                              }}
+                              renderItem={dataItem => (
+                                  <div key={dataItem.id} className='product-item'>
+                                      <div className='product-item-img'
+                                           style={{backgroundImage: "url('" + dataItem.img + "')"}}/>
+                                      <div className='product-item-description'>
+                                          <div className='product-item-name'>{dataItem.name}</div>
+                                          <div className='product-item-price'>
+                                              <span>￥{dataItem.price}</span>&nbsp;
+                                              <span>￥{dataItem.price}</span>
+                                          </div>
+                                      </div>
+                                  </div>
+                              )}
+                        />
+                }
+            </div>
+        )
+    }
+}

src/case/ShopApp/src/pages/my/all/index.css

@@ -0,0 +1,46 @@
+.my-wrap {
+}
+
+.avatar-area {
+    height: 150px;
+    /*background-image: linear-gradient(45deg, #ff9a9e 0%, #fad0c4 99%, #fad0c4 100%);*/
+    background-image: linear-gradient(to top, #ffdcd2 0%, #ffdbd1 1%, #fd898c 100%);
+    position: relative;
+    border-bottom-left-radius: 80% 15%;
+    border-bottom-right-radius: 80% 15%;
+}
+
+.avatar {
+    border-radius: 50%;
+    width: 65px;
+    height: 65px;
+    background-color: #e8e8e8;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+}
+
+.nickname {
+    color: white;
+    font-weight: 600;
+    font-size: 18px;
+    position: absolute;
+    left: 50%;
+    top: 90%;
+    transform: translate(-50%, -50%);
+}
+
+.my-card {
+    background-color: white;
+    margin-top: 15px;
+
+}
+
+.card-title {
+    height: 60px;
+    line-height: 60px;
+    padding-left: 20px;
+    font-size: 18px;
+    border-bottom: 1px solid #F3F3F3;
+}

src/case/ShopApp/src/pages/my/all/index.js

@@ -0,0 +1,219 @@
+import React, {Component} from 'react'
+import './index.css'
+import {Grid, ActivityIndicator} from 'antd-mobile'
+import {withRouter} from 'react-router-dom'
+import Logo from '../../../components/logo'
+import {getCookie} from "../../../utils/cookie"
+import {user_by_id} from "../../../utils/gql"
+import {Query} from "react-apollo"
+import gql from "graphql-tag"
+
+const orderIcon = [
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/pay.png',
+        text: '待付款',
+        id: 'pay'
+    },
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/ship.png',
+        text: '待发货',
+        id: 'ship'
+    },
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/unbox.png',
+        text: '待收货',
+        id: 'unbox'
+    },
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/judge.png',
+        text: '待评价',
+        id: 'judge'
+    }
+]
+
+const toolsIcon = [
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/address.png',
+        text: '收货地址',
+        id: 'address'
+    },
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/cart.png',
+        text: '购物袋',
+        id: 'cart'
+    },
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/message.png',
+        text: '系统通知',
+        id: 'message'
+    }
+]
+
+const memberIcon = [
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/card.png',
+        text: '会员卡',
+        id: 'card'
+    },
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/coupon.png',
+        text: '优惠券',
+        id: 'coupon'
+    },
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/credit.png',
+        text: '积分',
+        id: 'credit'
+    }
+]
+
+const shopIcon = [
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/shop.png',
+        text: '店铺展示',
+        id: 'shop'
+    },
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/goods.png',
+        text: '商品管理',
+        id: 'goods'
+    },
+    {
+        icon: 'https://ece-img-1254337200.cos.ap-chengdu.myqcloud.com/icon/order.png',
+        text: '订单管理',
+        id: 'orders'
+    }
+]
+
+class All extends Component {
+    constructor(props) {
+        super(props)
+        this.state = {}
+    }
+
+    render() {
+        let user_id = getCookie('user_id')
+        // console.log(user_id)
+        return (
+            <div className='my-wrap all'>
+                <Query query={gql(user_by_id)} variables={{id: user_id}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return (
+                                    <div className="loading-center">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                )
+                            }
+                            if (error) {
+                                return 'error!'
+                            }
+                            data = data.userbyid
+                            return (
+                                <div className='avatar-area' onClick={()=>{
+                                    this.props.history.push({
+                                        pathname: `/my/profile`,
+                                        state: {}
+                                    })
+                                }}>
+                                    <div className='avatar'/>
+                                    <div className='nickname'>{data.username}</div>
+                                </div>
+                            )
+                        }
+                    }
+                </Query>
+
+                <div className='my-card order-card'>
+                    <div className='card-title'>
+                        电商订单
+                    </div>
+                    <div className='card-icons'>
+                        <Grid data={orderIcon}
+                              columnNum={4}
+                              hasLine={false}
+                              onClick={(order) => {
+                                  this.props.history.push({
+                                      pathname: '/my/order',
+                                      state: {
+                                          kind: order.id
+                                      }
+                                  })
+                              }}
+                        />
+                    </div>
+                </div>
+
+                <div className='my-card tools-card'>
+                    <div className='card-title'>
+                        我的工具
+                    </div>
+                    <div className='card-icons'>
+                        <Grid data={toolsIcon}
+                              columnNum={4}
+                              hasLine={false}
+                              onClick={(tools) => {
+                                  if (tools.id === 'cart') {
+                                      this.props.history.push({
+                                          pathname: '/cart'
+                                      })
+                                  } else {
+                                      this.props.history.push({
+                                          pathname: '/my/tools',
+                                          state: {
+                                              page: tools.id
+                                          }
+                                      })
+                                  }
+                              }}
+                        />
+                    </div>
+                </div>
+
+                <div className='my-card member-card' style={{display: 'none'}}>
+                    <div className='card-title'>
+                        会员中心
+                    </div>
+                    <div className='card-icons'>
+                        <Grid data={memberIcon}
+                              columnNum={4}
+                              hasLine={false}
+                              onClick={(member) => {
+                                  this.props.history.push({
+                                      pathname: '/my/member',
+                                      state: {
+                                          page: member.id
+                                      }
+                                  })
+                              }}
+                        />
+                    </div>
+                </div>
+
+                <div className='my-card member-card'>
+                    <div className='card-title'>
+                        商家入口
+                    </div>
+                    <div className='card-icons'>
+                        <Grid data={shopIcon}
+                              columnNum={4}
+                              hasLine={false}
+                              onClick={(shop) => {
+                                  this.props.history.push({
+                                      pathname: '/my/manage',
+                                      state: {
+                                          page: shop.id
+                                      }
+                                  })
+                              }}
+                        />
+                    </div>
+                </div>
+                <Logo/>
+            </div>
+        )
+    }
+}
+
+export default withRouter(All)

src/case/ShopApp/src/pages/my/index.js

@@ -0,0 +1,25 @@
+import React from 'react'
+import './index.css'
+import All from './all'
+import Order from './order'
+import Tools from './tools'
+import Member from './member'
+import Manage from './manage'
+import Profile from './profile'
+import {Switch, Route} from 'react-router-dom'
+
+const My = () => (
+    <div style={{height: '100%'}}>
+        <Switch>
+            <Route exact path="/my" component={All}/>
+            <Route exact path="/my/all" component={All}/>
+            <Route path="/my/order" component={Order}/>
+            <Route path="/my/tools" component={Tools}/>
+            <Route path="/my/member" component={Member}/>
+            <Route path="/my/manage" component={Manage}/>
+            <Route path="/my/profile" component={Profile}/>
+        </Switch>
+    </div>
+)
+
+export default My

src/case/ShopApp/src/pages/my/manage/goods/index.css

@@ -0,0 +1,64 @@
+.my-accordion {
+    background-color: #f5f5f9!important;
+}
+
+.list-others {
+    margin-left: 15px;
+    padding-top: 10px;
+}
+
+.list-others-subtitle {
+    font-size: 17px;
+}
+
+.am-list-content {
+    font-size: 17px!important;
+}
+
+.list-extra {
+    display: flex;
+    align-items: center;
+    justify-content: space-around;
+}
+
+.am-list-item .am-input-extra {
+    max-height: 40px;
+}
+
+.hidden {
+    display: none;
+    transition: 0.3s all ease;
+}
+
+.good-block {
+    height: 100px;
+    display: flex;
+    align-items: center;
+    margin-top: 5px;
+}
+
+.good-image {
+    height: 100px;
+    background-repeat: no-repeat;
+    background-size: cover;
+}
+
+.all-goods {
+    background-color: #f5f5f9;
+}
+
+.good-block {
+    background-color: white;
+}
+
+.modify-goods-modal{
+    height: 510px
+}
+
+.not-like {
+    color: grey;
+}
+
+.like {
+    color: #3283fa;
+}