ok

package.json

@@ -20,6 +20,7 @@
     "bfj": "6.1.1",
     "case-sensitive-paths-webpack-plugin": "2.1.2",
     "chalk": "2.4.1",
+    "copy-to-clipboard": "^3.0.8",
     "css-loader": "1.0.0",
     "dotenv": "6.0.0",
     "dotenv-expand": "4.2.0",

src/App.js

@@ -23,8 +23,10 @@ class App extends Component {
         // 本地开发
         // 管理员
         setCookie('openid', 'o2fcFvxE5nCQSb4BBHaB4kXcikSE');
-        // 用户
+        // 我
         // setCookie('openid', 'o2fcFv6Rh2-4rCh3d5_1uCWCT5Yc');
+        // 用户
+        // setCookie('openid', 'o2fcFv-h_CFKkNdEYgNkNp0Jt5TA');
 
         // 微信版
         // let openid = getCookie("openid");

src/gql.js

@@ -129,22 +129,22 @@ const deleteuser = `mutation deleteuser($id: ID) {
 }`;
 
 const updateuser = `
-    mutation updateuser($id: ID, $nickname: String, $telephone: String, $updatedAt: String) {
-      updateuser: update_user(id: $id nickname: $nickname  telephone: $telephone updatedAt: $updatedAt) {
-        id
-        openid
+    mutation updateuser($email: String, $updatedAt: String, $admin: String, $password: String, $telephone: String, $nickname: String, $username: String, $createdAt: String, $openid: String, $id: ID) {
+      updateuser: update_user(email: $email updatedAt: $updatedAt admin: $admin password: $password telephone: $telephone nickname: $nickname username: $username createdAt: $createdAt openid: $openid id: $id) {
+        email
+        updatedAt
         admin
-        username
-        nickname
         password
         telephone
-        email
+        nickname
+        username
         createdAt
-        updatedAt
+        openid
+        id
       }
     }
-
 `;
+
 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) {

src/page/customer/display/Display.js

@@ -5,6 +5,7 @@ import gql from "graphql-tag";
 import {Query} from "react-apollo";
 import Server from './Server';
 import Service from './Service';
+import TopBar from './TopBar';
 import './index.css'
 
 class Display extends Component {
@@ -46,39 +47,42 @@ class Display extends Component {
             <div>
                 {
                     this.state.display === 'server' ?
-                        <Query query={gql(serverbyprops)} variables={{}}>
-                            {
-                                ({loading, error, data}) => {
-                                    if (loading) {
-                                        return (
-                                            <div className="loading">
-                                                <div className="align">
-                                                    <ActivityIndicator text="Loading..." size="large"/>
+                        <div>
+                            <TopBar/>
+                            <Query query={gql(serverbyprops)} variables={{}}>
+                                {
+                                    ({loading, error, data}) => {
+                                        if (loading) {
+                                            return (
+                                                <div className="loading">
+                                                    <div className="align">
+                                                        <ActivityIndicator text="Loading..." size="large"/>
+                                                    </div>
                                                 </div>
-                                            </div>
-                                        )
-                                    }
-                                    if (error) {
-                                        return 'error!';
-                                    }
+                                            )
+                                        }
+                                        if (error) {
+                                            return 'error!';
+                                        }
 
-                                    let servers = data.serverbyprops;
-                                    let tip = '';
-                                    if (servers.length === 0) {
-                                        servers = [];
-                                        tip = '还没有服务'
-                                    }
+                                        let servers = data.serverbyprops;
+                                        let tip = '';
+                                        if (servers.length === 0) {
+                                            servers = [];
+                                            tip = '还没有服务'
+                                        }
 
-                                    return (
-                                        <Server
-                                            servers={servers}
-                                            tip={tip}
-                                            pageSwitchToService={this.pageSwitchToService}
-                                        />
-                                    )
+                                        return (
+                                            <Server
+                                                servers={servers}
+                                                tip={tip}
+                                                pageSwitchToService={this.pageSwitchToService}
+                                            />
+                                        )
+                                    }
                                 }
-                            }
-                        </Query>
+                            </Query>
+                        </div>
                         :
                         <Query query={gql(servicebyprops)} variables={{server_id: serverID}}>
                             {

src/page/customer/display/Server.js

@@ -1,12 +1,10 @@
 import React, {Component} from 'react';
-import {Card, WhiteSpace, Button, Carousel, WingBlank, Flex} from 'antd-mobile';
+import {Card, WhiteSpace, Button, WingBlank, Flex} from 'antd-mobile';
 
 class Server extends Component {
     constructor(props) {
         super(props);
         this.state = {
-            data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
-            imgHeight: 176,
         }
     }
 
@@ -14,32 +12,6 @@ class Server extends Component {
         let {tip, servers} = this.props;
         return (
             <div>
-                <WingBlank>
-                    <Carousel
-                        autoplay={true}
-                        infinite
-                    >
-                        {this.state.data.map(val => (
-                            <a
-                                key={val}
-                                href="http://www.alipay.com"
-                                style={{display: 'inline-block', width: '100%', height: this.state.imgHeight}}
-                            >
-                                <img
-                                    src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
-                                    alt=""
-                                    style={{width: '100%', verticalAlign: 'top'}}
-                                    onLoad={() => {
-                                        window.dispatchEvent(new Event('resize'));
-                                        this.setState({imgHeight: 'auto'});
-                                    }}
-                                />
-                            </a>
-                        ))}
-                    </Carousel>
-                </WingBlank>
-
-
                 {
                     tip ?
                         <div className={'center'}>{tip}</div>

src/page/customer/display/TopBar.js

@@ -0,0 +1,90 @@
+import React, {Component} from 'react';
+import {WhiteSpace, Carousel, WingBlank, NoticeBar, ActivityIndicator} from 'antd-mobile';
+import {storebyprops} from "../../../gql";
+import {Query} from "react-apollo";
+import gql from "graphql-tag";
+
+class TopBar extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            data: ['AiyWuByWklrrUDlFignR', 'TekJlZRVCjLFexlOCuWn', 'IJOtIlfsYdTyaDTRVrLI'],
+            imgHeight: 176,
+        }
+    }
+
+    render() {
+        return (
+            <div>
+                <WhiteSpace/>
+                <Query query={gql(storebyprops)} variables={{}}>
+                    {
+                        ({loading, error, data}) => {
+                            if (loading) {
+                                return (
+                                    <div className="loading">
+                                        <div className="align">
+                                            <ActivityIndicator text="Loading..." size="large"/>
+                                        </div>
+                                    </div>
+                                );
+                            }
+
+                            if (error) {
+                                return 'error!';
+                            }
+
+                            let store;
+                            let storeLength = data.storebyprops.length;
+                            if (storeLength === 0) {
+                                console.log('首页 尚未个性化 store');
+                            } else if (storeLength === 1) {
+                                store = data.storebyprops[0];
+                                if(store.alert !== '') {
+                                    return (
+                                        <div>
+                                            <NoticeBar marqueeProps={{ loop: true, style: { padding: '0 7.5px' } }}>
+                                                {store.alert}
+                                            </NoticeBar>
+                                            <WhiteSpace/>
+                                        </div>
+                                    )
+                                }
+                            } else {
+                                console.log('首页 store 数据库出现错误');
+                            }
+                            return ''
+                        }
+                    }
+                </Query>
+
+                <WingBlank>
+                    <Carousel
+                        autoplay={true}
+                        infinite
+                    >
+                        {this.state.data.map(val => (
+                            <a
+                                key={val}
+                                href="http://www.alipay.com"
+                                style={{display: 'inline-block', width: '100%', height: this.state.imgHeight}}
+                            >
+                                <img
+                                    src={`https://zos.alipayobjects.com/rmsportal/${val}.png`}
+                                    alt=""
+                                    style={{width: '100%', verticalAlign: 'top'}}
+                                    onLoad={() => {
+                                        window.dispatchEvent(new Event('resize'));
+                                        this.setState({imgHeight: 'auto'});
+                                    }}
+                                />
+                            </a>
+                        ))}
+                    </Carousel>
+                </WingBlank>
+            </div>
+        );
+    }
+}
+
+export default TopBar;

src/page/customer/home/User.js

@@ -2,7 +2,12 @@ import React, {Component} from 'react';
 import {userbyid, updateuser} from "../../../gql";
 import gql from "graphql-tag";
 import {Query, Mutation} from "react-apollo";
-import {InputItem, Toast, List, Button, ActivityIndicator} from 'antd-mobile';
+import {InputItem, Toast, List, Button, ActivityIndicator, WhiteSpace} from 'antd-mobile';
+import copy from 'copy-to-clipboard';
+import moment from 'moment';
+
+const Item = List.Item;
+moment.locale('zh-cn');
 
 class User extends Component {
     render() {
@@ -36,9 +41,8 @@ class User extends Component {
                                         :
                                         ''
                                 }
-                                <Message
-                                    user={user}
-                                />
+                                <Message user={user} header="填写你的信息"/>
+                                <MoreMessage user={user}/>
                             </div>
                         )
                     }
@@ -48,8 +52,6 @@ class User extends Component {
     }
 }
 
-export default User;
-
 class Message extends Component {
     constructor(props) {
         super(props);
@@ -89,33 +91,79 @@ class Message extends Component {
     };
 
     render() {
+        let {name, hasError, phone, userID} = this.state;
+        let {header} = this.props;
         return (
             <div>
-                <List renderHeader={() => '填写你的信息'}>
-                    <InputItem
-                        placeholder="请输入联系人姓名"
-                        value={this.state.name}
-                        onChange={this.nameChange}
-                    >姓名</InputItem>
-                    <InputItem
-                        type="phone"
-                        placeholder="请输入手机号码"
-                        error={this.state.hasError}
-                        onErrorClick={this.onErrorClick}
-                        onChange={this.onChange}
-                        value={this.state.phone}
-                    >手机号码</InputItem>
-                </List>
+                {
+                    header ?
+                        <List renderHeader={() => header}>
+                            <InputItem
+                                placeholder="请输入联系人姓名"
+                                value={name}
+                                onChange={this.nameChange}
+                            >姓名</InputItem>
+                            <InputItem
+                                type="phone"
+                                placeholder="请输入手机号码"
+                                error={hasError}
+                                onErrorClick={this.onErrorClick}
+                                onChange={this.onChange}
+                                value={phone}
+                            >手机号码</InputItem>
+                        </List>
+                        :
+                        <List>
+                            <InputItem
+                                placeholder="请输入联系人姓名"
+                                value={name}
+                                onChange={this.nameChange}
+                            >姓名</InputItem>
+                            <InputItem
+                                type="phone"
+                                placeholder="请输入手机号码"
+                                error={hasError}
+                                onErrorClick={this.onErrorClick}
+                                onChange={this.onChange}
+                                value={phone}
+                            >手机号码</InputItem>
+                        </List>
+                }
                 <SaveButton
-                    userID={this.state.userID}
-                    telephone={this.state.phone}
-                    name={this.state.name}
+                    userID={userID}
+                    telephone={phone}
+                    name={name}
                 />
             </div>
         );
     }
 }
 
+const MoreMessage = (props) => {
+    let {id, createdAt} = props.user;
+    let userUIDShow = id.replace('user_', '').replace('_', '&&');
+    return (
+        <div>
+            <WhiteSpace/>
+            <List renderHeader={() => '更多资料'}>
+                <div className="my-list-subtitle">个人识别码（凭该码和商家沟通）</div>
+                <Item
+                    onClick={() => {
+                        copy(userUIDShow);
+                        Toast.success('复制成功', 1);
+                    }}
+                >
+                    {userUIDShow}
+                </Item>
+                <div className="my-list-subtitle">创建时间</div>
+                <Item>
+                    {moment(Number(createdAt)).format("YYYY-MM-DD HH:mm:ss")}
+                </Item>
+            </List>
+        </div>
+    )
+};
+
 class SaveButton extends Component {
     constructor(props) {
         super(props);
@@ -125,8 +173,7 @@ class SaveButton extends Component {
     render() {
         let {userID, telephone, name} = this.props;
         return (
-            <Mutation mutation={gql(updateuser)}
-            >
+            <Mutation mutation={gql(updateuser)}>
                 {(updateuser, {loading, error}) => {
                     if (loading)
                         return (
@@ -153,4 +200,7 @@ class SaveButton extends Component {
             </Mutation>
         )
     }
-}
+}
+
+export {Message}
+export default User;

src/page/manage/Store.js

@@ -1,12 +1,14 @@
 import React, {Component} from 'react';
 import './index.css';
 import {WhiteSpace, List, ActivityIndicator, Modal, ImagePicker, InputItem, Button} from 'antd-mobile';
-import {deleteuser, userbyprops, storebyprops, createstore, updatestore} from "../../gql";
+import {updateuser, userbyprops, storebyprops, createstore, updatestore} from "../../gql";
 import {Query, Mutation} from "react-apollo";
 import gql from "graphql-tag";
+import {Message} from '../customer/home/User';
 
 const alert = Modal.alert;
 const Item = List.Item;
+const prompt = Modal.prompt;
 
 class Store extends Component {
     constructor(props) {
@@ -20,6 +22,7 @@ class Store extends Component {
             <div>
                 <WhiteSpace/>
                 <StoreDetailFetch/>
+                <WhiteSpace/>
                 <ManagePeople userID={userID}/>
             </div>
         );
@@ -28,107 +31,6 @@ class Store extends Component {
 
 export default Store;
 
-class ManagePeople extends Component {
-    constructor(props) {
-        super(props);
-        this.state = {}
-    }
-
-    render() {
-        let {userID} = this.props;
-        return (
-            <Query query={gql(userbyprops)} variables={{}}>
-                {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return (
-                                <div className="loading">
-                                    <div className="align">
-                                        <ActivityIndicator text="Loading..." size="large"/>
-                                    </div>
-                                </div>
-                            );
-                        }
-
-                        if (error) {
-                            return 'error!';
-                        }
-
-                        let admins = data.userbyprops.filter(user => user.admin === 'true');
-
-                        return (
-                            <List renderHeader={() => '管理员人员'} className="my-list">
-                                {
-                                    admins.map((user, index) =>
-                                        <Mutation
-                                            mutation={gql(deleteuser)}
-                                            refetchQueries={[
-                                                {query: gql(userbyprops), variables: {}},
-                                            ]}
-                                            key={user.id}
-                                        >
-                                            {(deleteuser, {loading, error}) => {
-                                                if (loading)
-                                                    return (
-                                                        <div className="loading">
-                                                            <div className="align">
-                                                                <ActivityIndicator text="Loading..." size="large"/>
-                                                            </div>
-                                                        </div>
-                                                    );
-                                                if (error)
-                                                    return 'error';
-                                                return (
-                                                    <Item
-                                                        key={user.id}
-                                                        arrow="horizontal"
-                                                        multipleLine
-                                                        onClick={() => {
-                                                            if (user.id === userID) {
-                                                                alert('该账号为此登录账号', '无法执行删除操作', [
-                                                                    {
-                                                                        text: '好的',
-                                                                        onPress: () => console.log('cancel'),
-                                                                        style: 'default'
-                                                                    }
-                                                                ]);
-                                                            } else {
-                                                                alert('删除该管理员', '确认删除吗', [
-                                                                    {
-                                                                        text: '取消',
-                                                                        onPress: () => console.log('cancel'),
-                                                                        style: 'default'
-                                                                    },
-                                                                    {
-                                                                        text: '确定', onPress: () => {
-                                                                            deleteuser({variables: {id: user.id}})
-                                                                        }
-                                                                    },
-                                                                ]);
-                                                            }
-                                                        }}
-                                                    >
-                                                        {
-                                                            (user.nickname || user.telephone) ?
-                                                                `${index + 1}. ${user.nickname}：${user.telephone}`
-                                                                :
-                                                                `${index + 1}. 请该管理员设置用户名及其联系方式`
-                                                        }
-                                                    </Item>
-                                                )
-                                            }}
-                                        </Mutation>
-                                    )
-                                }
-                            </List>
-                        )
-                    }
-                }
-            </Query>
-        )
-    }
-}
-
 class StoreDetailFetch extends Component {
     constructor(props) {
         super(props);
@@ -196,15 +98,14 @@ class StoreDetailRender extends Component {
             address: props.address,
             alert: props.alert,
             slideshow: props.slideshow,
-            newStore: props.newStore
         }
     }
 
-    // componentWillReceiveProps(next) {
-    //     this.setState({
-    //         newStore: next.newStore
-    //     })
-    // }
+    componentWillReceiveProps(next) {
+        this.setState({
+            newStore: next.newStore
+        })
+    }
 
     onReset = () => {
         this.setState({
@@ -224,7 +125,8 @@ class StoreDetailRender extends Component {
     };
 
     render() {
-        let {files, name, description, address, alert, slideshow, newStore} = this.state;
+        let {files, name, description, address, alert, slideshow} = this.state;
+        let {newStore} = this.props;
         return (
             <List renderHeader={() => '店铺个性化管理'} className="my-list">
                 <InputItem onChange={(e) => {
@@ -364,3 +266,176 @@ class CreateStoreButton extends Component {
     }
 }
 
+class ManagePeople extends Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            modal: false
+        }
+    }
+
+    render() {
+        let {userID} = this.props;
+        return (
+            <Query query={gql(userbyprops)} variables={{}}>
+                {
+                    ({loading, error, data}) => {
+                        if (loading) {
+                            return (
+                                <div className="loading">
+                                    <div className="align">
+                                        <ActivityIndicator text="Loading..." size="large"/>
+                                    </div>
+                                </div>
+                            );
+                        }
+
+                        if (error) {
+                            return 'error!';
+                        }
+
+                        let admins = data.userbyprops.filter(user => user.admin === 'true');
+                        let me = admins.find(user => user.id === userID);
+                        let meIndex = admins.findIndex(user => user.id === userID);
+                        admins.splice(meIndex, 1);
+
+                        return (
+                            <List renderHeader={() => '管理员成员'} className="my-list">
+                                <div className={'my-list-subtitle'}>我</div>
+                                <Item
+                                    arrow="horizontal"
+                                    multipleLine
+                                    onClick={() => {
+                                        this.setState({
+                                            modal: true
+                                        })
+                                    }}
+                                >
+                                    点击设置我的信息
+                                </Item>
+                                <Modal
+                                    visible={this.state.modal}
+                                    transparent
+                                    maskClosable={true}
+                                    closable={true}
+                                    title="设置你的联系方式"
+                                    onClose={()=>{
+                                        this.setState({
+                                            modal: false
+                                        })
+                                    }}
+                                >
+                                    <Message user={me}/>
+                                </Modal>
+                                <div className={'my-list-subtitle'}>其他管理员</div>
+                                {
+                                    admins.map((user, index) =>
+                                        <Mutation
+                                            mutation={gql(updateuser)}
+                                            refetchQueries={[
+                                                {query: gql(userbyprops), variables: {}},
+                                            ]}
+                                            key={user.id}
+                                        >
+                                            {(updateuser, {loading, error}) => {
+                                                if (loading)
+                                                    return (
+                                                        <div className="loading">
+                                                            <div className="align">
+                                                                <ActivityIndicator text="Loading..." size="large"/>
+                                                            </div>
+                                                        </div>
+                                                    );
+                                                if (error)
+                                                    return 'error';
+                                                return (
+                                                    <div>
+                                                        <Item
+                                                            key={user.id}
+                                                            arrow="horizontal"
+                                                            multipleLine
+                                                            onClick={() => {
+                                                                alert('取消该管理员', '取消后作为普通用户存在', [
+                                                                    {
+                                                                        text: '取消',
+                                                                        onPress: () => console.log('cancel'),
+                                                                        style: 'default'
+                                                                    },
+                                                                    {
+                                                                        text: '确定', onPress: () => {
+                                                                            updateuser({
+                                                                                variables: {
+                                                                                    id: user.id,
+                                                                                    admin: 'false'
+                                                                                }
+                                                                            })
+                                                                        }
+                                                                    },
+                                                                ]);
+                                                            }}
+                                                        >
+                                                            {
+                                                                (user.nickname || user.telephone) ?
+                                                                    `${index + 1}. ${user.nickname}：${user.telephone}`
+                                                                    :
+                                                                    `${index + 1}. 请通知该管理员设置姓名和号码`
+                                                            }
+                                                        </Item>
+                                                    </div>
+                                                )
+                                            }}
+                                        </Mutation>
+                                    )
+                                }
+
+                                <Mutation
+                                    mutation={gql(updateuser)}
+                                    refetchQueries={[
+                                        {query: gql(userbyprops), variables: {}},
+                                    ]}
+                                >
+                                    {(updateuser, {loading, error}) => {
+                                        if (loading)
+                                            return (
+                                                <div className="loading">
+                                                    <div className="align">
+                                                        <ActivityIndicator text="Loading..." size="large"/>
+                                                    </div>
+                                                </div>
+                                            );
+                                        if (error)
+                                            return 'error';
+                                        return (
+                                            <Item
+                                                arrow="horizontal"
+                                                multipleLine
+                                                onClick={() => prompt(
+                                                    '输入用户识别码',
+                                                    '可在 "我的-个人信息-更多资料" 里点击复制',
+                                                    [
+                                                        {text: '取消'},
+                                                        {
+                                                            text: '确认',
+                                                            onPress: userUIDShow => {
+                                                                let userID = 'user_' + userUIDShow.replace('&&', '_');
+                                                                updateuser({variables: {id: userID, admin: 'true'}})
+                                                            }
+                                                        },
+                                                    ],
+                                                    'default',
+                                                )}
+                                            >
+                                                添加管理员
+                                            </Item>
+                                        )
+                                    }}
+                                </Mutation>
+                            </List>
+                        )
+                    }
+                }
+            </Query>
+        )
+    }
+}
+