amend manage product

src/pages/home/detail/index.css

@@ -153,11 +153,12 @@
 .close-popup {
     width: 42px;
     height: 45px;
-    position: absolute;
-    right: 0;
+    float: right;
+    /*position: absolute;*/
+    /*right: 0;*/
     top: 0;
     font-size: 20px;
-    font-weight: lighter;
+    /*font-weight: lighter;*/
     text-align: center;
     z-index: 5;
     padding-top: 8px;

src/pages/my/manage/goods/index.css

@@ -51,7 +51,7 @@
 }
 
 .modify-goods-modal{
-    height: 510px
+    height: 585px
 }
 
 .not-like {
@@ -103,3 +103,7 @@
     width: 100%;
     height: 45px;
 }
+
+.spec-explain {
+    padding: 10px 15px;
+}

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

@@ -381,12 +381,12 @@ class AllGoods extends Component {
                   animationType="slide-up"
                   className='modify-goods-modal'
                 >
-                  <div className='close-popup' onClick={(e)=>this.controlGoodsModal(false, e)}>
-                    <Icon type="close" />
-                  </div>
-                  <div style={{paddingTop: 45}}>
-                    <AddGoods good={product} addOrUpdate={addOrUpdate}/>
+                  <div className='close-item'>
+                    <div className='close-popup' onClick={(e)=>this.controlGoodsModal(false, e)}>
+                      <Icon type="close" />
+                    </div>
                   </div>
+                  <AddGoods good={product} addOrUpdate={addOrUpdate}/>
                 </Modal>
               </div>
             )
@@ -416,11 +416,12 @@ class AddGoods extends Component {
         stock: 20,
         category: '',
         category_id: '',
+        status: '1',
         recommend: 1,
         newGood: true
       }
     } else {
-      let {name, price, intro, stock, id, recommend} = props.good
+      let {name, price, intro, stock, id, status, recommend} = props.good
       this.state = {
         ...state,
         id,
@@ -428,6 +429,7 @@ class AddGoods extends Component {
         price,
         intro,
         stock,
+        status,
         recommend,
         category: props.good.category_id.name,
         category_id: [props.good.category_id.id],
@@ -488,7 +490,7 @@ class AddGoods extends Component {
   }
 
   addProduct = (createproduct) => {
-    let {imgDatas, name, intro, stock, price, category_id, id} = this.state
+    let {imgDatas, name, intro, stock, price, category_id, id, status, recommend} = this.state
 
     Promise.all(this.uploadImg()).then(res => {
       let prefix = 'https://case-1254337200.cos.ap-beijing.myqcloud.com/'
@@ -501,8 +503,8 @@ class AddGoods extends Component {
       let varObj = {
         id: productId,
         unit: '1件',
-        status: '1',
-        recommend: 1,
+        status,
+        recommend,
         category_id: category_id[0],
         name,
         stock,
@@ -524,12 +526,12 @@ class AddGoods extends Component {
   }
 
   updateProduct = (updateproduct) => {
-    let {imgDatas, name, intro, stock, price, category_id, id} = this.state
+    let {imgDatas, name, intro, stock, price, category_id, id, status, recommend} = this.state
     let varObj = {
       id,
       unit: '1件',
-      status: '1',
-      recommend: 1,
+      status,
+      recommend,
       category_id: category_id[0],
       name,
       stock,
@@ -547,12 +549,13 @@ class AddGoods extends Component {
       if (imgDatas.length !== 0) {
         variables.img = img
       }
+      console.log("updateProduct variables",variables)
       updateproduct({variables})
     })
   }
 
   render() {
-    let {files, name, intro, stock, price, newGood, modal, id, recommend} = this.state
+    let {files, name, intro, stock, price, newGood, modal, id, status, recommend} = this.state
 
     return (
       <div>
@@ -585,33 +588,52 @@ class AddGoods extends Component {
                             this.setState({category_id: v})
                           }}
                   >
-                    <List.Item arrow="horizontal">选择种类</List.Item>
+                    <List.Item arrow="horizontal">选择商品种类</List.Item>
                   </Picker>
                 )
               }
             }
           </Query>
-          <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({price: e})
-          }} value={price} placeholder="请输入价格">价格</InputItem>
+          <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({price: e})}}
+            value={price}
+            placeholder="请输入价格">价格（元）
+          </InputItem>
           <Item extra={
-            <Stepper onChange={(e) => {
-              this.setState({stock: e})
-            }} value={stock} style={{width: '100%', minWidth: '100px'}} showNumber size="small"/>}>库存</Item>
+            <Stepper onChange={(e) => {this.setState({stock: e})}}
+                     value={stock}
+                     style={{width: '100%', minWidth: '100px'}}
+                     showNumber size="small"/>
+          }>总库存</Item>
           <Item arrow="horizontal" onClick={(e)=>{this.showModal('modal',e)}}>{newGood ? '点击添加规格' : '点击修改规格'}</Item>
           <Item extra={
             <Switch
-              checked={recommend}
+              checked={status === '1'}
+              color={'#f44'}
+              onChange={() => {
+                this.setState((preState) => ({
+                  status: preState.status === '1'  ? '0' : '1'
+                }))
+              }}
+            />
+          }>上架</Item>
+          <Item extra={
+            <Switch
+              checked={!!recommend}
               color={'#f44'}
               onChange={() => {
                 this.setState((preState) => ({
-                  recommend: !preState.recommend
+                  recommend: preState.recommend ? 0 : 1
                 }))
               }}
             />
@@ -691,7 +713,7 @@ class AddGoods extends Component {
               if (loading) {
                 return (
                   <div className="loading-center">
-                    <ActivityIndicator text="加载中5..." size="large"/>
+                    <ActivityIndicator text="加载中..." size="large"/>
                   </div>
                 )
               }
@@ -710,11 +732,11 @@ class AddGoods extends Component {
                   className='modify-goods-modal'
                 >
                   <div className='close-item'>
-                    <span className='close-popup' onClick={(e)=>this.onClose('modal',e)}>X</span>
-                  </div>
-                  <div style={{paddingTop: 52}}>
-                    <AddSpecStock specs={specs} productID={id}/>
+                    <span className='close-popup' onClick={(e)=>this.onClose('modal',e)}>
+                      <Icon type="close" />
+                    </span>
                   </div>
+                  <AddSpecStock specs={specs} productID={id}/>
                 </Modal>
               );
             }
@@ -761,9 +783,46 @@ class AddSpecStock extends Component {
     }
   }
 
+  addSpecStock = (createspecificationStock) => {
+    let {productID} = this.props
+    let {size, color, stock, id} = this.state
+    let varObj = {
+      id,
+      product_id: productID,
+      color,
+      size,
+      stock,
+      slideImg: [],
+      detailImg: [],
+      status: '1',
+      createdAt: moment().format('YYYY-MM-DD HH:mm:ss'),
+      updatedAt: ''
+    }
+    createspecificationStock({variables: varObj})
+  }
+
+  updateSpecStock = (updatespecificationStock) => {
+    let {size, color, stock, id} = this.state
+    let varObj = {
+      id,
+      color,
+      size,
+      stock,
+      updatedAt: moment().format('YYYY-MM-DD HH:mm:ss')
+    }
+
+    updatespecificationStock({variables: varObj})
+  }
+
+  deleteSpecStock = (deletespecificationStock) => {
+    let {id} = this.state
+
+    deletespecificationStock({variables: {id}})
+  }
+
   render() {
     let {specs, productID} = this.props
-    let {list, size, color, stock, id, index} = this.state
+    let {list, size, color, stock, index} = this.state
     return (
       <div>
         {
@@ -778,25 +837,36 @@ class AddSpecStock extends Component {
               <Item arrow="horizontal" onClick={this.controlList(false, -1)}>新增规格</Item>
             </List>
             :
-            <List renderHeader={() => <div onClick={this.controlList(true, -1)}>
-              <Icon type="left"/>&nbsp;点击返回规格列表</div>}>
+            <List
+              renderHeader={() =>
+                <div onClick={this.controlList(true, -1)}>
+                  <Icon type="left"/>&nbsp;点击返回规格列表
+                </div>
+              }
+            >
+              <div className='spec-explain'>
+                <p>填写说明：</p>
+                <p>规格是指各规格单位，必填项，可以为服饰尺寸如：S、M、L，鞋子的尺码如：35、36、37，可以为重量单位如：500g、1kg,可以为数量单位如：1个、1件</p>
+                <p>颜色是指商品颜色，选填项，如果没有则无需填写</p>
+              </div>
               <InputItem onChange={(e) => {
                 this.setState({size: e})
-              }} value={size} placeholder="请输入尺寸">尺寸</InputItem>
+              }} value={size} placeholder="请输入规格">规格</InputItem>
               <InputItem onChange={(e) => {
                 this.setState({color: e})
               }} value={color} placeholder="请输入颜色">颜色</InputItem>
-              <Item extra={<Stepper onChange={(e) => {
-                this.setState({stock: e})
-              }} value={stock} style={{width: '100%', minWidth: '100px'}} showNumber
-                                    size="small"/>}>库存</Item>
+              <Item
+                extra={
+                  <Stepper onChange={(e) => {this.setState({stock: e})}} value={stock} style={{width: '100%', minWidth: '100px'}} showNumber size="small"/>}
+              >库存</Item>
               <div className='list-others'>
                 <div className='spec-button-group'>
                   {
-                    index === -1?
-                      <Mutation mutation={gql(create_specificationStock)} refetchQueries={[
-                        {query: gql(specificationStock_by_props), variables: {product_id: productID}}
-                      ]}>
+                    index === -1 ?
+                      <Mutation
+                        mutation={gql(create_specificationStock)}
+                        refetchQueries={[{query: gql(specificationStock_by_props), variables: {product_id: productID}}]}
+                      >
                         {(createspecificationStock, {loading, error}) => {
                           if (loading)
                             return (
@@ -806,33 +876,23 @@ class AddSpecStock extends Component {
                                 </div>
                               </div>
                             )
-                          if (error)
-                            return 'error'
-                          let varObj = {
-                            id,
-                            product_id: productID,
-                            color,
-                            size,
-                            stock,
-                            slideImg: [],
-                            detailImg: [],
-                            status: '1',
-                            createdAt: moment().format('YYYY-MM-DD HH:mm:ss'),
-                            updatedAt: ''
-                          }
+                          if (error) return 'error'
                           return (
                             <Button type="primary" size="small" inline
                                     onClick={() => {
-                                      createspecificationStock({variables: varObj})
-                                    }}>添加</Button>
+                                      this.addSpecStock(createspecificationStock)
+                                    }}>
+                              添加
+                            </Button>
                           )
                         }}
                       </Mutation>
                       :
                       <div>
-                        <Mutation mutation={gql(update_specificationStock)} refetchQueries={[
-                          {query: gql(specificationStock_by_props), variables: {product_id: productID}}
-                        ]}>
+                        <Mutation
+                          mutation={gql(update_specificationStock)}
+                          refetchQueries={[{query: gql(specificationStock_by_props), variables: {product_id: productID}}]}
+                        >
                           {(updatespecificationStock, {loading, error}) => {
                             if (loading)
                               return (
@@ -842,26 +902,21 @@ class AddSpecStock extends Component {
                                   </div>
                                 </div>
                               )
-                            if (error)
-                              return 'error'
-                            let varObj = {
-                              id,
-                              color,
-                              size,
-                              stock,
-                              updatedAt: moment().format('YYYY-MM-DD HH:mm:ss')
-                            }
+                            if (error) return 'error'
                             return (
                               <Button type="primary" size="small" inline
                                       onClick={() => {
-                                        updatespecificationStock({variables: varObj})
-                                      }}>更新</Button>
+                                        this.updateSpecStock(updatespecificationStock)
+                                      }}>
+                                更新
+                              </Button>
                             )
                           }}
                         </Mutation>
-                        <Mutation mutation={gql(delete_specificationStock)} refetchQueries={[
-                          {query: gql(specificationStock_by_props), variables: {product_id: productID}},
-                        ]}>
+                        <Mutation
+                          mutation={gql(delete_specificationStock)}
+                          refetchQueries={[{query: gql(specificationStock_by_props), variables: {product_id: productID}}]}
+                        >
                           {(deletespecificationStock, {loading, error}) => {
                             if (loading)
                               return (
@@ -871,13 +926,16 @@ class AddSpecStock extends Component {
                                   </div>
                                 </div>
                               )
-                            if (error)
-                              return 'error'
+                            if (error) return 'error'
                             return (
-                              <Button type="warning" size="small" inline
-                                      style={{marginLeft: 10}} onClick={() => {
-                                deletespecificationStock({variables: {id}})
-                              }}>删除</Button>
+                              <Button type="warning" size="small"
+                                      inline
+                                      style={{marginLeft: 10}}
+                                      onClick={() => {
+                                        this.deleteSpecStock(deletespecificationStock)
+                                      }}>
+                                删除
+                              </Button>
                             )
                           }}
                         </Mutation>