店铺管理

src/pages/my/manage/shop/index.js

@@ -2,73 +2,81 @@ import React, {Component} from 'react'
 import './index.css'
 import {NavBar, Icon} from 'antd-mobile'
 import {withRouter} from 'react-router-dom'
-import {ActivityIndicator, List, ImagePicker, InputItem, Button} from 'antd-mobile';
+import {ActivityIndicator, List, ImagePicker, InputItem, Button} from 'antd-mobile'
 import axios from 'axios'
-import {Query, Mutation} from "react-apollo";
-import gql from "graphql-tag";
+import {Query, Mutation} from "react-apollo"
+import gql from "graphql-tag"
 import {shop_by_props, create_shop, update_shop} from "../../../../utils/gql"
 import {storeFile} from "../../../../configs/url"
 
-const Item = List.Item;
+const Item = List.Item
 
 class Shop extends Component {
     constructor(props) {
         super(props)
-        this.state = {
-
-        }
+        this.state = {}
     }
 
     render() {
         return (
-            <Query query={gql(shop_by_props)} variables={{limit: 1}}>
-                {
-                    ({loading, error, data}) => {
-                        if (loading) {
-                            return (
-                                <div className="loading">
-                                    <div className="align">
-                                        <ActivityIndicator text="Loading..." size="large"/>
+            <div className='shop-wrap'>
+                <NavBar
+                    className='shop-navbar'
+                    mode="light"
+                    icon={<Icon type="left"/>}
+                    onLeftClick={() => {
+                        this.props.history.go(-2)
+                    }}
+                >店铺管理</NavBar>
+                <Query query={gql(shop_by_props)} variables={{limit: 1}}>
+                    {
+                        ({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 shop, newShop;
-                        let shopLength = data.shopbyprops.length;
-                        if (shopLength === 0) {
-                            // console.log('尚未个性化 shop');
-                            shop = {};
-                            newShop = true;
-                        } else if (shopLength === 1) {
-                            // console.log('存在 shop, update');
-                            shop = data.shopbyprops[0];
-                            newShop = false;
-                        } else {
-                            console.log('store 数据库出现错误');
-                        }
+                            let shop, newShop
+                            let shopLength = data.shopbyprops.length
+                            if (shopLength === 0) {
+                                // console.log('尚未个性化 shop');
+                                shop = {}
+                                newShop = true
+                            } else if (shopLength === 1) {
+                                // console.log('存在 shop, update');
+                                shop = data.shopbyprops[0]
+                                newShop = false
+                            } else {
+                                console.log('store 数据库出现错误')
+                            }
 
-                        let {name, description, address, intro, notice, slideshow, id} = shop;
-                        let shopID = newShop ? 'default' : id;
-                        return (
-                            <ShopRender
-                                name={name}
-                                description={description}
-                                address={address}
-                                intro={intro}
-                                slideshow={slideshow}
-                                notice={notice}
-                                newShop={newShop}
-                                shopID={shopID}
-                            />
-                        )
+                            let {name, description, address, intro, notice, slideshow, id} = shop
+                            let shopID = newShop ? 'default' : id
+                            return (
+                                <ShopRender
+                                    name={name}
+                                    description={description}
+                                    address={address}
+                                    intro={intro}
+                                    slideshow={slideshow}
+                                    notice={notice}
+                                    newShop={newShop}
+                                    shopID={shopID}
+                                />
+                            )
+                        }
                     }
-                }
-            </Query>
+                </Query>
+            </div>
         )
     }
 }
@@ -89,15 +97,15 @@ class ShopRender extends Component {
     }
 
     onChange = (files, operationType) => {
-        console.log("files", files, "operationType", operationType);
+        console.log("files", files, "operationType", operationType)
 
-        let imgDatas = [];
-        let {storeID} = this.state;
+        let imgDatas = []
+        let {storeID} = this.state
 
         files.forEach((file, index) => {
-            let base64Cont = files[index].url.split(',')[1];
-            let imgType = files[index].file.type.split('/')[1];
-            let imgNewName = `slideshow_${index}_storeID_${storeID}.${imgType}`;
+            let base64Cont = files[index].url.split(',')[1]
+            let imgType = files[index].file.type.split('/')[1]
+            let imgNewName = `slideshow_${index}_storeID_${storeID}.${imgType}`
 
             const imgData = {
                 'file-name': `appointment/images/${imgNewName}`,
@@ -105,17 +113,17 @@ class ShopRender extends Component {
                 'cont': base64Cont,
                 'public': true,
                 'format': 'base64'
-            };
+            }
 
             imgDatas.push(imgData)
-        });
+        })
 
         this.setState({
             imgDatas,
             files
-        });
+        })
 
-        console.log(imgDatas, 'imgDatas');
+        console.log(imgDatas, 'imgDatas')
     }
 
     onReset = () => {
@@ -132,84 +140,73 @@ class ShopRender extends Component {
     }
 
     render() {
-        let {files, name, intro, description, address, notice, slideshow, imgDatas} = this.state;
+        let {files, name, intro, description, address, notice, slideshow, imgDatas} = this.state
         let {newShop, shopID} = this.props
         return (
-            <div className='shop-wrap'>
-                <NavBar
-                    className='shop-navbar'
-                    mode="light"
-                    icon={<Icon type="left"/>}
-                    onLeftClick={() => {
-                        this.props.history.go(-2)
-                    }}
-                >店铺管理</NavBar>
-                <div>
-                    <List renderHeader={() => '店铺个性化管理'} className="my-list">
-                        <InputItem onChange={(e) => {
-                            this.setState({name: e})
-                        }} value={name} placeholder="请输入店铺名称">名称</InputItem>
-                        <InputItem onChange={(e) => {
-                            this.setState({intro: e})
-                        }} value={intro} placeholder="请输入店铺名称简介">简介</InputItem>
-                        <InputItem onChange={(e) => {
-                            this.setState({description: e})
-                        }} value={description} placeholder="请输入店铺名称描述">描述</InputItem>
-                        <InputItem onChange={(e) => {
-                            this.setState({address: e})
-                        }} value={address} placeholder="请输入店铺名称地址">地址</InputItem>
-                        <InputItem onChange={(e) => {
-                            this.setState({notice: e})
-                        }} value={notice} placeholder="请输入店铺名称公告，不输入为不显示">通告</InputItem>
-                        <div className='my-list-subtitle'>首页轮播图</div>
-                        <ImagePicker
-                            files={files}
-                            onChange={this.onChange}
-                            onImageClick={(index, fs) => console.log(index, fs)}
-                            selectable={true}
-                            multiple={false}
-                        />
-                        <Item>
-                            {
-                                newShop ?
-                                    <CreateShopButton
-                                        shopID={shopID}
-                                        imgDatas={imgDatas}
-                                        name={name}
-                                        description={description}
-                                        address={address}
-                                        alert={alert}
-                                        slideshow={slideshow}
-                                    />
-                                    :
-                                    <UpdateShopButton
-                                        shopID={shopID}
-                                        imgDatas={imgDatas}
-                                        name={name}
-                                        description={description}
-                                        address={address}
-                                        alert={alert}
-                                        slideshow={slideshow}
-                                    />
-                            }
-                            <Button size="small" inline style={{marginLeft: '2.5px'}} onClick={this.onReset}>重置</Button>
-                        </Item>
-                    </List>
-                </div>
+            <div className='shop-wrapper'>
+                <List renderHeader={() => '店铺个性化管理'} className="my-list">
+                    <InputItem onChange={(e) => {
+                        this.setState({name: e})
+                    }} value={name} placeholder="请输入店铺名称">名称</InputItem>
+                    <InputItem onChange={(e) => {
+                        this.setState({intro: e})
+                    }} value={intro} placeholder="请输入店铺名称简介">简介</InputItem>
+                    <InputItem onChange={(e) => {
+                        this.setState({description: e})
+                    }} value={description} placeholder="请输入店铺名称描述">描述</InputItem>
+                    <InputItem onChange={(e) => {
+                        this.setState({address: e})
+                    }} value={address} placeholder="请输入店铺名称地址">地址</InputItem>
+                    <InputItem onChange={(e) => {
+                        this.setState({notice: e})
+                    }} value={notice} placeholder="请输入店铺名称公告，不输入为不显示">通告</InputItem>
+                    <div className='my-list-subtitle'>首页轮播图</div>
+                    <ImagePicker
+                        files={files}
+                        onChange={this.onChange}
+                        onImageClick={(index, fs) => console.log(index, fs)}
+                        selectable={true}
+                        multiple={false}
+                    />
+                    <Item>
+                        {
+                            newShop ?
+                                <CreateShopButton
+                                    shopID={shopID}
+                                    imgDatas={imgDatas}
+                                    name={name}
+                                    description={description}
+                                    address={address}
+                                    alert={alert}
+                                    slideshow={slideshow}
+                                />
+                                :
+                                <UpdateShopButton
+                                    shopID={shopID}
+                                    imgDatas={imgDatas}
+                                    name={name}
+                                    description={description}
+                                    address={address}
+                                    alert={alert}
+                                    slideshow={slideshow}
+                                />
+                        }
+                        <Button size="small" inline style={{marginLeft: '2.5px'}} onClick={this.onReset}>重置</Button>
+                    </Item>
+                </List>
             </div>
-
         )
     }
 }
 
 class UpdateShopButton extends Component {
     constructor(props) {
-        super(props);
+        super(props)
         this.state = {}
     }
 
     uploadImg = () => {
-        let {imgDatas} = this.props;
+        let {imgDatas} = this.props
 
         return imgDatas.map((imgData) => (
             axios({
@@ -217,11 +214,11 @@ class UpdateShopButton extends Component {
                 method: 'post',
                 data: imgData
             })
-        ));
-    };
+        ))
+    }
 
     render() {
-        let {name, description, address, intro, notice, imgDatas, shopID} = this.props;
+        let {name, description, address, intro, notice, imgDatas, shopID} = this.props
         return (
             <Mutation
                 mutation={gql(update_shop)}
@@ -235,9 +232,9 @@ class UpdateShopButton extends Component {
                                     <ActivityIndicator text="Loading..." size="large"/>
                                 </div>
                             </div>
-                        );
+                        )
                     if (error)
-                        return 'error';
+                        return 'error'
                     let varObj = {
                         id: shopID,
                         name,
@@ -246,17 +243,17 @@ class UpdateShopButton extends Component {
                         intro,
                         notice,
                         updatedAt: new Date().getTime(),
-                    };
+                    }
                     return (
                         <Button type="primary" size="small" inline onClick={() => {
                             if (imgDatas.length !== 0) {
                                 Promise.all(this.uploadImg()).then(res => {
-                                    let prefix = 'https://case-1254337200.cos.ap-beijing.myqcloud.com/';
+                                    let prefix = 'https://case-1254337200.cos.ap-beijing.myqcloud.com/'
                                     let slideshow = imgDatas.length === 1 ? prefix + imgDatas[0]['file-name'] : imgDatas.map((imgData, index) => (
                                         prefix + imgDatas[index]['file-name']
-                                    ));
+                                    ))
                                     updatestore({variables: {...varObj, slideshow}})
-                                });
+                                })
                             } else {
                                 updatestore({variables: varObj})
                             }
@@ -270,12 +267,12 @@ class UpdateShopButton extends Component {
 
 class CreateShopButton extends Component {
     constructor(props) {
-        super(props);
+        super(props)
         this.state = {}
     }
 
     uploadImg = () => {
-        let {imgDatas} = this.props;
+        let {imgDatas} = this.props
 
         return imgDatas.map((imgData) => (
             axios({
@@ -283,11 +280,11 @@ class CreateShopButton extends Component {
                 method: 'post',
                 data: imgData
             })
-        ));
-    };
+        ))
+    }
 
     render() {
-        let {name, description, address, intro, notice, imgDatas, shopID} = this.props;
+        let {name, description, address, intro, notice, imgDatas, shopID} = this.props
         return (
             <Mutation
                 mutation={gql(create_shop)}
@@ -301,9 +298,9 @@ class CreateShopButton extends Component {
                                     <ActivityIndicator text="Loading..." size="large"/>
                                 </div>
                             </div>
-                        );
+                        )
                     if (error)
-                        return 'error';
+                        return 'error'
                     let varObj = {
                         id: shopID,
                         name: name ? name : '',
@@ -313,16 +310,16 @@ class CreateShopButton extends Component {
                         notice: notice ? notice : '',
                         createdAt: new Date().getTime(),
                         updatedAt: ''
-                    };
+                    }
                     return (
                         <Button type="primary" size="small" inline onClick={() => {
                             Promise.all(this.uploadImg()).then(res => {
-                                let prefix = 'https://case-1254337200.cos.ap-beijing.myqcloud.com/';
+                                let prefix = 'https://case-1254337200.cos.ap-beijing.myqcloud.com/'
                                 let slideshow = imgDatas.length === 1 ? prefix + imgDatas[0]['file-name'] : imgDatas.map((imgData, index) => (
                                     prefix + imgDatas[index]['file-name']
-                                ));
+                                ))
                                 createstore({variables: {...varObj, slideshow}})
-                            });
+                            })
                         }}>创建</Button>
                     )
                 }}