根据 openid 转变显示

package.json

@@ -34,6 +34,7 @@
     "fork-ts-checker-webpack-plugin-alt": "0.4.14",
     "fs-extra": "7.0.0",
     "graphql": "^14.0.2",
+    "graphql-request": "^1.8.2",
     "graphql-tag": "^2.10.0",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "identity-obj-proxy": "3.0.0",

src/App.js

@@ -1,86 +1,91 @@
 import React, {Component} from 'react';
-import {TabBar} from 'antd-mobile';
+import {TabBar, ActivityIndicator} from 'antd-mobile';
 import {Icon} from 'antd';
 import './App.css';
 import My from './page/home/My';
 import Display from './page/display/Display';
 import Manage from "./page/manage/Manage";
 import {getCookie} from "./cookie";
+import {userbyprops, createuser} from "./gql";
+import {Query} from "react-apollo";
+import gql from "graphql-tag";
+import {request} from 'graphql-request'
+import {graphqlFC} from './config';
+import {idGen} from "./func";
 
 class App extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            selectedTab: 'appointment',
-            fullScreen: true,
-            userID: 'handsome'
+            selectedTab: 'appointment'
         };
     }
 
-    componentWillMount(){
-        // setCookie("openid","o2fcFv8x3wy5WtcP116S5GzzkgDQ");
-        let openid =  getCookie("openid");
-        console.log('openid',openid);
+    componentWillMount() {
+        let openid = getCookie("openid");
+        console.log('get openid', openid);
+
         if (!openid) {
             window.location.href = "/subscribe";
         }
     }
 
     render() {
-        let {userID} = this.state;
+        let openid = getCookie("openid");
         return (
             <div className="App">
-                <div style={{position: 'fixed', height: '100%', width: '100%', top: 0}}>
-                    <TabBar
-                        unselectedTintColor="#949494"
-                        tintColor="#328cee"
-                        barTintColor="white"
-                    >
-                        <TabBar.Item
-                            title="预约"
-                            key="appointment"
-                            icon={<Icon type="fire"/>}
-                            selectedIcon={<Icon type="fire" style={{color: '#328cee'}}/>}
-                            selected={this.state.selectedTab === 'appointment'}
-                            onPress={() => {
-                                this.setState({
-                                    selectedTab: 'appointment',
-                                });
-                            }}
-                            data-seed="logId"
-                        >
-                            <Display userID={userID}/>
-                        </TabBar.Item>
-                        <TabBar.Item
-                            icon={<Icon type="home"/>}
-                            selectedIcon={<Icon type="home" style={{color: '#328cee'}}/>}
-                            title="我的"
-                            key="my"
-                            selected={this.state.selectedTab === 'my'}
-                            onPress={() => {
-                                this.setState({
-                                    selectedTab: 'my',
-                                });
-                            }}
-                        >
-                            <My userID={userID}/>
-                        </TabBar.Item>
-                        <TabBar.Item
-                            icon={<Icon type="setting"/>}
-                            selectedIcon={<Icon type="setting" style={{color: '#328cee'}}/>}
-                            title="管理"
-                            key="manage"
-                            selected={this.state.selectedTab === 'manage'}
-                            onPress={() => {
-                                this.setState({
-                                    selectedTab: 'manage',
+                <Query query={gql(userbyprops)} variables={{openid}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return (
+                                    <div className="loading">
+                                        <div className="align">
+                                            <ActivityIndicator text="Loading..." size="large"/>
+                                        </div>
+                                    </div>
+                                )
+                            }
+                            if (error) {
+                                return 'error!';
+                            }
+                            let user;
+                            let userQueryNum = data.userbyprops.length;
+                            if (userQueryNum > 1) {
+                                user = {id: '', admin: 'false'};
+                                console.log('openid 出现多于一个');
+                            } else if (userQueryNum === 0) {
+                                let userObj = {
+                                    id: idGen('user'),
+                                    admin: 'false',
+                                    email: '',
+                                    updatedAt: '',
+                                    password: '',
+                                    telephone: '',
+                                    nickname: '',
+                                    username: '',
+                                    createdAt: new Date().getTime(),
+                                    openid
+                                };
+                                request(graphqlFC, createuser, userObj).then(res => {
+                                    console.log('注册成功');
+                                    user = userObj
                                 });
-                            }}
-                        >
-                            <Manage userID={userID}/>
-                        </TabBar.Item>
-                    </TabBar>
-                </div>
+                                console.log('openid 为 0，尚未注册')
+                            } else {
+                                user = data.userbyprops[0];
+                            }
+                            let userID = user.id;
+                            let admin = user.admin;
+                            return (
+                                <RenderPage
+                                    admin={admin}
+                                    userID={userID}
+                                />
+                            )
+                        }
+                    }
+                </Query>
             </div>
         );
     }
@@ -88,3 +93,81 @@ class App extends Component {
 
 export default App;
 
+
+class RenderPage extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            selectedTab: 'appointment'
+        }
+    }
+
+    render() {
+        let {userID, admin} = this.props;
+        return (
+            <div style={{position: 'fixed', height: '100%', width: '100%', top: 0}}>
+                {
+                    admin === 'true' ?
+                        <TabBar
+                            unselectedTintColor="#949494"
+                            tintColor="#328cee"
+                            barTintColor="white"
+                        >
+                            <TabBar.Item
+                                icon={<Icon type="setting"/>}
+                                selectedIcon={<Icon type="setting" style={{color: '#328cee'}}/>}
+                                title="管理"
+                                key="manage"
+                                selected={true}
+                                onPress={() => {
+                                    this.setState({
+                                        selectedTab: 'manage',
+                                    });
+                                }}
+                            >
+                                <Manage userID={userID}/>
+                            </TabBar.Item>
+                        </TabBar>
+                        :
+                        <TabBar
+                            unselectedTintColor="#949494"
+                            tintColor="#328cee"
+                            barTintColor="white"
+                        >
+                            <TabBar.Item
+                                title="预约"
+                                key="appointment"
+                                icon={<Icon type="fire"/>}
+                                selectedIcon={<Icon type="fire"
+                                                    style={{color: '#328cee'}}/>}
+                                selected={this.state.selectedTab === 'appointment'}
+                                onPress={() => {
+                                    this.setState({
+                                        selectedTab: 'appointment',
+                                    });
+                                }}
+                                data-seed="logId"
+                            >
+                                <Display userID={userID}/>
+                            </TabBar.Item>
+                            <TabBar.Item
+                                icon={<Icon type="home"/>}
+                                selectedIcon={<Icon type="home"
+                                                    style={{color: '#328cee'}}/>}
+                                title="我的"
+                                key="my"
+                                selected={this.state.selectedTab === 'my'}
+                                onPress={() => {
+                                    this.setState({
+                                        selectedTab: 'my',
+                                    });
+                                }}
+                            >
+                                <My userID={userID}/>
+                            </TabBar.Item>
+                        </TabBar>
+                }
+            </div>
+        )
+    }
+};

src/config.js

@@ -1,3 +1,4 @@
-const graphqlFC = window.location.origin+'/graphql';
+// const graphqlFC = window.location.origin+'/graphql';
+const graphqlFC = 'http://demo.ioobot.cn/graphql';
 
 export {graphqlFC}

src/gql.js

@@ -112,6 +112,23 @@ const userbyid = `
     }
 `;
 
+const userbyprops = `
+    query userbyprops($email: String, $updatedAt: String, $admin: String, $password: String, $telephone: String, $nickname: String, $username: String, $createdAt: String, $openid: String) {
+      userbyprops: user_by_props(email: $email updatedAt: $updatedAt admin: $admin password: $password telephone: $telephone nickname: $nickname username: $username createdAt: $createdAt openid: $openid) {
+        email
+        updatedAt
+        admin
+        password
+        telephone
+        nickname
+        username
+        createdAt
+        openid
+        id
+      }
+    }
+`;
+
 const updateuser = `
     mutation updateuser($id: ID, $nickname: String, $telephone: String, $updatedAt: String) {
       updateuser: update_user(id: $id nickname: $nickname  telephone: $telephone updatedAt: $updatedAt) {
@@ -129,6 +146,22 @@ const updateuser = `
     }
 
 `;
+const createuser = `
+    mutation createuser($email: String, $updatedAt: String, $admin: String, $password: String, $telephone: String, $nickname: String, $username: String, $createdAt: String, $openid: String, $id: ID!) {
+      createuser: create_user(email: $email updatedAt: $updatedAt admin: $admin password: $password telephone: $telephone nickname: $nickname username: $username createdAt: $createdAt openid: $openid id: $id) {
+        email
+        updatedAt
+        admin
+        password
+        telephone
+        nickname
+        username
+        createdAt
+        openid
+        id
+      }
+    }
+`;
 
 const updateorderAndupdaterepertory = `
     mutation updateorderAndupdaterepertory ($order_id: ID, $repertory_id: ID, $updatedAt: String, $orderStatus: String, $count: Int) {
@@ -401,7 +434,9 @@ export {
     orderbyprops,
     adminorderbyprops,
     userbyid,
+    userbyprops,
     updateuser,
+    createuser,
     repertorybyid,
     updateorderAndupdaterepertory,
     createorderAndupdaterepertory,

src/page/home/Cancelled.js

@@ -7,6 +7,7 @@ import {Card, WhiteSpace, Button, ActivityIndicator, WingBlank} from 'antd-mobil
 import moment from 'moment';
 import 'moment/locale/zh-cn'
 import {Row, Col} from 'antd';
+
 moment.locale('zh-cn');
 
 class Cancelled extends Component {
@@ -18,10 +19,8 @@ class Cancelled extends Component {
                     ({loading, error, data}) => {
                         if (loading) {
                             return (
-                                <div className="loading">
-                                    <div className="align">
-                                        <ActivityIndicator text="Loading..." size="large"/>
-                                    </div>
+                                <div className="tab-center">
+                                    <ActivityIndicator text="Loading..." size="large"/>z
                                 </div>
                             )
                         }
@@ -81,10 +80,12 @@ class CancelledRender extends Component {
                                             <div>
                                                 <Row>
                                                     <Col span={14}>
-                                                        <div className={'order-name'}>{order.service_id.server_id.name}</div>
+                                                        <div
+                                                            className={'order-name'}>{order.service_id.server_id.name}</div>
                                                     </Col>
                                                     <Col span={6}>
-                                                        <div className={'order-remark'}>留言: {order.remark?order.remark:'无'}</div>
+                                                        <div
+                                                            className={'order-remark'}>留言: {order.remark ? order.remark : '无'}</div>
                                                     </Col>
                                                     <Col span={4}>
                                                         {/*<DeleteButton1*/}
@@ -98,8 +99,10 @@ class CancelledRender extends Component {
                                                     </Col>
                                                 </Row>
                                                 <Row>
-                                                    <div className={'order-time'}>预约于: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
-                                                    <div className={'order-time'}>取消于: {moment(Number(order.updatedAt)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                    <div
+                                                        className={'order-time'}>预约于: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                    <div
+                                                        className={'order-time'}>取消于: {moment(Number(order.updatedAt)).format("YYYY-MM-DD HH:mm:ss")}</div>
                                                 </Row>
                                             </div>
 
@@ -169,10 +172,8 @@ class DeleteButton2 extends Component {
                 {(updateorder, {loading, error}) => {
                     if (loading)
                         return (
-                            <div className="loading">
-                                <div className="align">
-                                    <ActivityIndicator text="Loading..." size="large"/>
-                                </div>
+                            <div className="tab-center">
+                                <ActivityIndicator text="Loading..." size="large"/>
                             </div>
                         );
                     if (error)

src/page/home/Ordered.js

@@ -18,10 +18,8 @@ class Ordered extends Component {
                     ({loading, error, data}) => {
                         if (loading) {
                             return (
-                                <div className="loading">
-                                    <div className="align">
-                                        <ActivityIndicator text="Loading..." size="large"/>
-                                    </div>
+                                <div className="tab-center">
+                                    <ActivityIndicator text="Loading..." size="large"/>
                                 </div>
                             )
                         }
@@ -80,13 +78,16 @@ class OrderedRender extends Component {
                                             <div>
                                                 <Row>
                                                     <Col span={14}>
-                                                        <div className={'order-name'}>{order.service_id.server_id.name}</div>
+                                                        <div
+                                                            className={'order-name'}>{order.service_id.server_id.name}</div>
                                                         <div className={'order-price'}>{order.service_id.price}</div>
-                                                        <div className={'order-time'}>{moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                        <div
+                                                            className={'order-time'}>{moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
                                                     </Col>
                                                     <Col span={6}>
                                                         <div className={'order-people'}>{order.customerNumber}人</div>
-                                                        <div className={'order-remark'}>留言: {order.remark?order.remark:'无'}</div>
+                                                        <div
+                                                            className={'order-remark'}>留言: {order.remark ? order.remark : '无'}</div>
                                                     </Col>
                                                     <Col span={4}>
                                                         <CancelButton
@@ -123,10 +124,8 @@ class CancelButton extends Component {
                     ({loading, error, data}) => {
                         if (loading) {
                             return (
-                                <div className="loading">
-                                    <div className="align">
-                                        <ActivityIndicator text="Loading..." size="large"/>
-                                    </div>
+                                <div className="tab-center">
+                                    <ActivityIndicator text="Loading..." size="large"/>
                                 </div>
                             )
                         }

src/page/home/User.js

@@ -13,10 +13,8 @@ class User extends Component {
                     ({loading, error, data}) => {
                         if (loading) {
                             return (
-                                <div className="loading">
-                                    <div className="align">
-                                        <ActivityIndicator text="Loading..." size="large"/>
-                                    </div>
+                                <div className="tab-center">
+                                    <ActivityIndicator text="Loading..." size="large"/>
                                 </div>
                             )
                         }
@@ -120,9 +118,7 @@ class Message extends Component {
 class SaveButton extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-
-        }
+        this.state = {}
     }
 
     render() {
@@ -133,21 +129,19 @@ class SaveButton extends Component {
                 {(updateuser, {loading, error}) => {
                     if (loading)
                         return (
-                            <div className="loading">
-                                <div className="align">
-                                    <ActivityIndicator text="Loading..." size="large"/>
-                                </div>
+                            <div className="tab-center">
+                                <ActivityIndicator text="Loading..." size="large"/>
                             </div>
                         );
                     if (error)
                         return 'error';
                     return (
-                        <Button type={'primary'} style={{margin: '5px 10px'}} onClick={()=>{
+                        <Button type={'primary'} style={{margin: '5px 10px'}} onClick={() => {
                             updateuser({
                                 variables: {
                                     id: userID,
                                     telephone,
-                                    nickname:name,
+                                    nickname: name,
                                     updatedAt: new Date().getTime()
                                 }
                             })

src/page/manage/AllOrder.js

@@ -1,7 +1,7 @@
 import React, {Component} from 'react';
 import './index.css';
 import {createForm} from 'rc-form';
-import {NoticeBar, Picker} from 'antd-mobile';
+import {Picker} from 'antd-mobile';
 import gql from "graphql-tag";
 import {Query} from "react-apollo";
 import {adminorderbyprops} from "../../gql";
@@ -61,13 +61,14 @@ class AllOrder extends Component {
         const {getFieldProps} = this.props.form;
         return (
             <div>
-                <NoticeBar mode="closable" marqueeProps={{loop: true, style: {padding: '0 7.5px'}}}>
-                    只有管理员的微信才能看到此界面，此处作为样例全部展示
-                </NoticeBar>
-                <Picker data={data} cols={1} {...getFieldProps('district3')} className="forss"
-                        value={this.state.sValue}
-                        onChange={v => this.setState({sValue: v})}
-                        onOk={v => this.setState({sValue: v})}
+                <Picker
+                    data={data}
+                    cols={1}
+                    {...getFieldProps('district3')}
+                    className="forss"
+                    value={this.state.sValue}
+                    onChange={v => this.setState({sValue: v})}
+                    onOk={v => this.setState({sValue: v})}
                 >
                     <CustomChildren>选择订单类型</CustomChildren>
                 </Picker>
@@ -89,10 +90,8 @@ class AdminShowOrders extends Component {
                     ({loading, error, data}) => {
                         if (loading) {
                             return (
-                                <div className="loading">
-                                    <div className="align">
-                                        <ActivityIndicator text="Loading..." size="large"/>
-                                    </div>
+                                <div className="tab-center">
+                                    <ActivityIndicator text="Loading..." size="large"/>
                                 </div>
                             )
                         }
@@ -132,7 +131,7 @@ class OrderedRender extends Component {
             <div>
                 {
                     tip ?
-                        <div className={'center'}>{tip}</div>
+                        <div className={'center-fix'}>{tip}</div>
                         :
                         ''
                 }
@@ -148,19 +147,23 @@ class OrderedRender extends Component {
                                             <div>
                                                 <Row>
                                                     <Col span={20}>
-                                                        <div className={'order-name'}>{order.service_id.server_id.name}</div>
+                                                        <div
+                                                            className={'order-name'}>{order.service_id.server_id.name}</div>
                                                     </Col>
                                                     <Col span={4}>
                                                         <div className={'order-price'}>{order.service_id.price}</div>
                                                     </Col>
                                                 </Row>
-                                                    <div>人数: {order.customerNumber}</div>
-                                                    <div className={'order-remark'}>留言: {order.remark ? order.remark : '无'}</div>
-                                                    <div>预约人: {order.contactName}</div>
-                                                    <div>联系方式: {order.contactTelephone}</div>
-                                                    <div>预约账号: {order.user_id.username}</div>
-                                                    <div className={'order-time'}>预约时间: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
-                                                    <div className={'order-time'}>下单时间: {moment(Number(order.createdAt)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                <div>人数: {order.customerNumber}</div>
+                                                <div
+                                                    className={'order-remark'}>留言: {order.remark ? order.remark : '无'}</div>
+                                                <div>预约人: {order.contactName}</div>
+                                                <div>联系方式: {order.contactTelephone}</div>
+                                                <div>预约账号: {order.user_id.username}</div>
+                                                <div
+                                                    className={'order-time'}>预约时间: {moment(Number(order.service_id.startTime)).format("YYYY-MM-DD HH:mm:ss")}</div>
+                                                <div
+                                                    className={'order-time'}>下单时间: {moment(Number(order.createdAt)).format("YYYY-MM-DD HH:mm:ss")}</div>
                                             </div>
                                         </Card.Body>
                                     </Card>

src/page/manage/Manage.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, {Component} from 'react';
 import './index.css';
 import {Tabs, WhiteSpace} from 'antd-mobile';
 import {StickyContainer, Sticky} from 'react-sticky';
@@ -19,28 +19,25 @@ const tabs = [
 class Manage extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-
-        }
+        this.state = {}
     }
 
     render() {
         let {userID} = this.props;
         return (
             <div>
-                <div>
-                    <WhiteSpace/>
-                    <StickyContainer>
-                        <Tabs tabs={tabs}
-                              initalPage={'t2'}
-                              renderTabBar={renderTabBar}
-                        >
-                            <AllOrder userID={userID}/>
-                            <Release userID={userID}/>
-                        </Tabs>
-                    </StickyContainer>
-                    <WhiteSpace/>
-                </div>
+                <WhiteSpace/>
+                <StickyContainer>
+                    <Tabs
+                        tabs={tabs}
+                        initalPage={'t2'}
+                        renderTabBar={renderTabBar}
+                    >
+                        <AllOrder userID={userID}/>
+                        <Release userID={userID}/>
+                    </Tabs>
+                </StickyContainer>
+                <WhiteSpace/>
             </div>
         );
     }

src/page/manage/Release.js

@@ -1,6 +1,6 @@
 import React, {Component} from 'react';
 import './index.css';
-import {NoticeBar, List, InputItem, ImagePicker, Button, Stepper, DatePicker, ActivityIndicator} from 'antd-mobile';
+import {List, InputItem, ImagePicker, Button, Stepper, DatePicker, ActivityIndicator} from 'antd-mobile';
 import {Query, Mutation} from "react-apollo";
 import gql from "graphql-tag";
 import {
@@ -29,21 +29,18 @@ class Release extends Component {
     render() {
         return (
             <div>
-                <NoticeBar mode="closable" marqueeProps={{loop: true, style: {padding: '0 7.5px'}}}>
-                    只有管理员的微信才能看到此界面，此处作为样例全部展示
-                </NoticeBar>
                 <Query query={gql(serverbyprops)} variables={{}}>
                     {
                         ({loading, error, data}) => {
                             if (loading) {
                                 return (
-                                    <div className="loading">
-                                        <div className="align">
-                                            <ActivityIndicator text="Loading..." size="large"/>
-                                        </div>
+                                    <div className="tab-center">
+                                        <ActivityIndicator text="Loading..." size="large"/>
                                     </div>
                                 );
                             }
+
+
                             if (error) {
                                 return 'error!';
                             }
@@ -582,9 +579,7 @@ class SubmitServiceCreateButton extends Component {
 class SubmitServiceDeleteButton extends Component {
     constructor(props) {
         super(props);
-        this.state = {
-
-        }
+        this.state = {}
     }
 
     render() {
@@ -612,7 +607,7 @@ class SubmitServiceDeleteButton extends Component {
                         repertory_id: repertoryID
                     };
                     return (
-                        <Button size="small" type="warning" inline style={{marginLeft: '10px'}} onClick={()=>{
+                        <Button size="small" type="warning" inline style={{marginLeft: '10px'}} onClick={() => {
                             deleteBothTwo({variables: varObj});
                             donotShowDetail();
                         }}>删除</Button>

src/page/manage/index.css

@@ -38,4 +38,11 @@
 }
 .calendar-list .right {
   float: right;
+}
+
+.tab-center {
+  height: 100px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }