|
|
@@ -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>
|
|
|
)
|
|
|
}}
|
kulley