feat:修改店铺信息页面

src/pages/shop/shopInfo/index.less

@@ -14,6 +14,7 @@
 
   .form_item {
     width: 572px;
+    resize: none;
   }
 
   .form_item_wrap {
@@ -21,13 +22,17 @@
     align-items: center;
 
     .size_require {
-      margin-left: 24px;
       color: #97A0AF;
     }
   }
 
-  .upload_btn {
+  .img_list {
+    display: flex;
+
+  }
 
+  .upload_btn {
+    position: relative;
     width: 104px;
     height: 104px;
     display: flex;
@@ -39,6 +44,24 @@
     border-radius: 2px;
     border: 1px dashed rgba(223, 225, 230, 1);
     cursor: pointer;
+    margin-right: 24px;
+
+    &.upload {
+      border: 1px solid rgba(223, 225, 230, 1);
+      background: #ffffff;
+    }
+
+    .upload_img {
+      height: 100%;
+      width: auto;
+      display: block;
+      margin: 0 auto;
+    }
+
+    &>img {
+      width: 100%;
+      height: 100%;
+    }
 
     &.large {
       width: 175px;
@@ -48,5 +71,23 @@
     &>p {
       margin-top: 12px;
     }
+
+    .delete_btn {
+      position: absolute;
+      width: 24px;
+      height: 24px;
+      border-radius: 4px;
+      background: rgba(0, 0, 0, 0.45);
+      top: 8px;
+      right: 8px;
+      color: #ffffff;
+      text-align: center;
+      line-height: 24px;
+
+      &:hover {
+        cursor: pointer;
+        opacity: .8;
+      }
+    }
   }
 }
\ No newline at end of file

src/pages/shop/shopInfo/index.tsx

-import React, { useState } from 'react'
+import React, { useState, Fragment, useEffect } from 'react'
 import { PageHeaderWrapper } from '@ant-design/pro-layout'
 import { Form, Input, Select, Button, Upload } from 'antd'
-import { PlusOutlined } from '@ant-design/icons'
+import { Prompt } from 'umi';
+import { PlusOutlined, DeleteOutlined } from '@ant-design/icons'
 import CitySelect from '../components/citySelect'
 import RequireItem from '@/components/RequireItem'
+import default_logo from '@/assets/imgs/default_logo.png'
 import cx from 'classnames'
 import styles from './index.less'
 
 const ShopInfo: React.FC = () => {
+  const [formIsHalfFilledOut, setFormIsHalfFilledOut] = useState(false)
   const [selectCityData, setSelectCityData] = useState([{ index: 0, provinceId: 0, cityId: 0 }])
+  const [workShopImgList, setWorkShopImgList] = useState([default_logo])
 
   const uploadProps = {
     name: 'file',
@@ -44,8 +48,15 @@ const ShopInfo: React.FC = () => {
     setSelectCityData(data)
   }
 
+  const handleDeleteWorkShopImgItem = (itemInfo: any) => {
+    let result = [...workShopImgList]
+    result = result.filter(item => item !== itemInfo)
+    setWorkShopImgList(result)
+  }
+
   return (
     <PageHeaderWrapper>
+      <Prompt when={formIsHalfFilledOut} message="您还有未保存的内容，是否确定要离开？" />
       <div className={styles.shop_info}>
         <Form
           className={styles.add_template_form}
@@ -69,10 +80,14 @@ const ShopInfo: React.FC = () => {
             label={<RequireItem label="公司LOGO" isRequire={true} />}
           >
             <div className={styles.form_item_wrap}>
+
               <Upload {...uploadProps}>
-                <div className={styles.upload_btn}>
+                <div className={cx(styles.upload_btn, styles.upload)}>
+                  <Fragment>
                     <PlusOutlined />
                     <p>点击上传</p>
+                  </Fragment>
+                  {/* <img src={default_logo} /> */}
                 </div>
               </Upload>
               <div className={styles.size_require}>
@@ -86,7 +101,7 @@ const ShopInfo: React.FC = () => {
             label={<RequireItem label="公司简介" isRequire={true} />}
             rules={[{ required: true, message: "请输入公司简介" }]}
           >
-            <Input.TextArea allowClear rows={4} className={styles.form_item} placeholder="最长400个字条，200个汉字" maxLength={100} />
+            <Input.TextArea allowClear rows={5} className={styles.form_item} placeholder="最长400个字条，200个汉字" maxLength={100} />
           </Form.Item>
           <Form.Item
             labelAlign="left"
@@ -94,6 +109,18 @@ const ShopInfo: React.FC = () => {
             label={<RequireItem label="厂房照片" />}
           >
             <div className={styles.form_item_wrap}>
+
+              <div className={styles.img_list}>
+                {
+                  workShopImgList.map((item, index) => (
+                    <div key={index} className={cx(styles.upload_btn, styles.large, styles.upload)}>
+                      <div className={styles.delete_btn} onClick={() => handleDeleteWorkShopImgItem(item)}><DeleteOutlined /></div>
+                      <img className={styles.upload_img} src={item} />
+                    </div>
+                  ))
+                }
+
+              </div>
               <Upload {...uploadProps}>
                 <div className={cx(styles.upload_btn, styles.large)}>
                   <PlusOutlined />
@@ -128,7 +155,6 @@ const ShopInfo: React.FC = () => {
             label={<RequireItem label="" />}
           >
             <Button type="primary" style={{ marginRight: 16 }}>保存</Button>
-            <Button>取消</Button>
           </Form.Item>
         </Form>
       </div>