kulley преди 6 години
родител
ревизия
63f42ac760
променени са 3 файла, в които са добавени 118 реда и са изтрити 6 реда
  1. 111 4
      src/pages/my/manage/goods/index.js
  2. 2 2
      src/pages/my/manage/shop/index.js
  3. 5 0
      src/utils/func.js

+ 111 - 4
src/pages/my/manage/goods/index.js

@@ -1,25 +1,132 @@
 import React, {Component} from 'react'
 import './index.css'
-import {NavBar, Icon} from 'antd-mobile'
+import {NavBar, Icon, Accordion, List, InputItem, ImagePicker, Button, ActivityIndicator} from 'antd-mobile'
 import {withRouter} from 'react-router-dom'
+import {create_shop, shop_by_props} from "../../../../utils/gql"
+import {Query, Mutation} from "react-apollo"
+import gql from "graphql-tag"
+import axios from 'axios'
+import {idGen} from "../../../../utils/func"
 
 class Goods extends Component {
     constructor(props) {
         super(props)
-        this.state = {}
+        this.state = {
+            files: [],
+            imgDatas: [],
+            name: '',
+            price: 0,
+            intro: '',
+            stock: 0
+        }
+    }
+
+    onAccordionChange = (key) => {
+        console.log(key)
+    }
+
+    onChange = (id) => (files, operationType) => {
+        let imgDatas = []
+
+        files.forEach((file, index) => {
+            let base64Cont = files[index].url.split(',')[1]
+            let imgType = files[index].file.type.split('/')[1]
+            let imgNewName = `good_id_${id}.${imgType}`
+
+            const imgData = {
+                'file-name': `e-commerce/images/${imgNewName}`,
+                'bucket': 'case',
+                'cont': base64Cont,
+                'public': true,
+                'format': 'base64'
+            }
+            imgDatas.push(imgData)
+        })
+
+        this.setState({
+            imgDatas,
+            files
+        })
     }
 
     render() {
+        let {files, imgDatas, name, intro, stock, price} = this.state
+        let id = idGen('goods')
         return (
-            <div className='goods-navbar-wrap'>
+            <div className='goods-wrap'>
                 <NavBar
-                    className='goods-navbar'
+                    className='navbar'
                     mode="light"
                     icon={<Icon type="left"/>}
                     onLeftClick={() => {
                         this.props.history.go(-2)
                     }}
                 >商品管理</NavBar>
+                <div className='content-wrap'>
+                    <Accordion defaultActiveKey="0" className="my-accordion" onChange={this.onAccordionChange}>
+                        <Accordion.Panel header="添加商品">
+                            <List renderHeader={() => '店铺个性化管理'} className="my-list">
+                                <InputItem onChange={(e) => {
+                                    this.setState({name: e})
+                                }} placeholder="请输入名称">名称</InputItem>
+                                <InputItem onChange={(e) => {
+                                    this.setState({intro: e})
+                                }} placeholder="请输入简介">简介</InputItem>
+                                <InputItem onChange={(e) => {
+                                    this.setState({price: e})
+                                }} placeholder="请输入价格">价格</InputItem>
+                                <InputItem onChange={(e) => {
+                                    this.setState({stock: e})
+                                }} placeholder="请输入库存">库存</InputItem>
+                                <div className='my-list-subtitle'>商品图片</div>
+                                <ImagePicker
+                                    files={files}
+                                    onChange={this.onChange(id)}
+                                    onImageClick={(index, fs) => console.log(index, fs)}
+                                    selectable={true}
+                                    multiple={false}
+                                />
+                                <Mutation mutation={gql(create_shop)}>
+                                    {(createstore, {loading, error}) => {
+                                        if (loading)
+                                            return (
+                                                <div className="loading">
+                                                    <div className="align">
+                                                        <ActivityIndicator text="Loading..." size="large"/>
+                                                    </div>
+                                                </div>
+                                            )
+                                        if (error)
+                                            return 'error'
+                                        let varObj = {
+                                            id,
+                                            name,
+                                            stock,
+                                            intro,
+                                            price,
+                                            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 slideshow = imgDatas.length === 1 ? prefix + imgDatas[0]['file-name'] : imgDatas.map((imgData, index) => (
+                                                        prefix + imgDatas[index]['file-name']
+                                                    ))
+                                                    createstore({variables: {...varObj, slideshow}})
+                                                })
+                                            }}>创建</Button>
+                                        )
+                                    }}
+                                </Mutation>
+                            </List>
+                        </Accordion.Panel>
+                        <Accordion.Panel header="全部商品" className="pad">
+
+                        </Accordion.Panel>
+                    </Accordion>
+                </div>
             </div>
 
         )

+ 2 - 2
src/pages/my/manage/shop/index.js

@@ -21,7 +21,7 @@ class Shop extends Component {
         return (
             <div className='shop-wrap'>
                 <NavBar
-                    className='shop-navbar'
+                    className='navbar'
                     mode="light"
                     icon={<Icon type="left"/>}
                     onLeftClick={() => {
@@ -143,7 +143,7 @@ class ShopRender extends Component {
         let {files, name, intro, description, address, notice, slideshow, imgDatas} = this.state
         let {newShop, shopID} = this.props
         return (
-            <div className='shop-wrapper'>
+            <div className='shop-wrapper content-wrap'>
                 <List renderHeader={() => '店铺个性化管理'} className="my-list">
                     <InputItem onChange={(e) => {
                         this.setState({name: e})

+ 5 - 0
src/utils/func.js

@@ -0,0 +1,5 @@
+const idGen = (kind) => {
+    return kind + '_' + Date.now() + '_' + Math.random().toString().slice(-8);
+};
+
+export {idGen}