style: 相册样式修改

src/components/Upload/index.less

@@ -28,16 +28,21 @@
   flex-wrap: wrap;
   max-height: 520px;
   overflow: auto;
+
   .imgItem {
+    flex: 0 0 50px;
     position: relative;
-    margin-right: 16px;
-    margin-bottom: 16px;
-    width: 320px;
-    max-height: 220px;
+    // margin-right: 16px;
+    // margin-bottom: 16px;
+    margin: 10px;
+    width: 50px;
+    max-height: 50px;
     overflow: hidden;
     cursor: pointer;
+    background-color: rgba(238,238,238,1);
     img {
       width: 100%;
+      height: 100%;
     }
     &:hover,
     &.seleted {
@@ -49,8 +54,8 @@
     .iconBtn {
       position: absolute;
       visibility: hidden;
-      top: 6px;
-      right: 10px;
+      top: -10px;
+      right: 0px;
       font-size: 18px;
       color: rgb(8, 156, 8);
     }

src/pages/mobileConfig/SiteConfig.jsx

 import React, { useState, useEffect } from 'react';
-import { Form, Select, Input, Button, Radio, notification } from 'antd';
+import { Form, Select, Input, Button, Radio, notification, Spin } from 'antd';
 import { editWebsite, getWebsite } from '@/services/mobileConfig/api';
 import PicturesWall from '@/components/Upload/index';
 
 const { Item } = Form;
 const { Option } = Select;
 const SiteConfig = props => {
-  const { miniTitle } = props;
+  const { miniTitle, submitCallback } = props;
   const [config, setConfig] = useState(''); // 网站配置信息
   const [loginList, setLoginList] = useState([
     { text: '默认界面', value: 'default' },
@@ -17,7 +17,7 @@ const SiteConfig = props => {
   const [themeList, setThemeList] = useState([
     { text: '默认皮肤', value: 'default' },
   ]); // 系统皮肤
-
+  const [loading, setLoading] = useState(false);
   const [form] = Form.useForm();
   const layout = {
     layout: 'horizontal',
@@ -25,20 +25,27 @@ const SiteConfig = props => {
     wrapperCol: { span: 14 },
   };
   useEffect(() => {
+    console.log(miniTitle, 'miniTitle');
     if (!miniTitle) {
       return;
     }
+    setLoading(true);
     getWebsite({
       _version: 9999,
       _dc: Date.now(),
       title: miniTitle,
-    }).then(res => {
+    })
+      .then(res => {
+        setLoading(false);
         let obj = { ...form.getFieldsValue() };
         let arr = Object.keys({ ...form.getFieldsValue() });
         arr.map(k => {
           obj[k] = res[k];
         });
         form.setFieldsValue(obj);
+      })
+      .catch(err => {
+        setLoading(false);
       });
   }, [miniTitle]);
   // 单选值改变
@@ -47,14 +54,18 @@ const SiteConfig = props => {
   const submit = value => {
     form.validateFields().then(valid => {
       if (valid) {
+        setLoading(true);
         const obj = { ...form.getFieldsValue() };
         let params = { ...obj, mode: 'single', client: 'miniapp' };
         editWebsite(params, {
           headers: {
             'content-type': 'application/x-www-form-urlencggoded;charset=UTF-8',
           },
-        }).then(res => {
+        })
+          .then(res => {
+            setLoading(false);
             if (res.success) {
+              submitCallback();
               notification.success({
                 message: '提示',
                 duration: 3,
@@ -68,11 +79,15 @@ const SiteConfig = props => {
               });
             }
             console.log(res, 'res');
+          })
+          .catch(err => {
+            setLoading(false);
           });
       }
     });
   };
   return (
+    <Spin spinning={loading} tip="loading...">
       <Form form={form} {...layout}>
         <Item
           label="应用名称："
@@ -172,6 +187,7 @@ const SiteConfig = props => {
           </Button>
         </Item>
       </Form>
+    </Spin>
   );
 };
 export default SiteConfig;

src/pages/mobileConfig/index.js

@@ -11,6 +11,7 @@ const MobileConfigPage = props => {
   const [miniTitle, setMiniTitle] = useState('');
   const [flag, setFlag] = useState(1);
   useEffect(() => {
+    console.log(33, '33');
     miniAppSiteTree({
       userMode: 'admin',
       select: '',
@@ -29,11 +30,16 @@ const MobileConfigPage = props => {
   const handleChange = key => {
     setActiveKey(key);
   };
+  const submitCallback = () => {
+    setFlag(flag + 1);
+  };
   const tabArr = [
     {
       title: '网站配置',
       key: '0',
-      component: <SiteConfig miniTitle={miniTitle} />,
+      component: (
+        <SiteConfig miniTitle={miniTitle} submitCallback={submitCallback} />
+      ),
     },
     {
       title: '菜单管理',

src/pages/mobileConfig/menuconfig/LeftPart.jsx

@@ -495,7 +495,7 @@ const LeftPart = () => {
             <Input placeholder="请输入菜单图标" />
           </Form.Item>
           <Form.Item label="图标预览">
-            <PicturesWall maxLen={3} />
+            <PicturesWall maxLen={1} />
           </Form.Item>
           {nodeType === 1 && (
             <>
@@ -507,7 +507,7 @@ const LeftPart = () => {
                 <Input placeholder="请输入离线图标" />
               </Form.Item>
               <Form.Item label="图标预览">
-                <PicturesWall maxLen={3} />
+                <PicturesWall maxLen={1} />
               </Form.Item>
             </>
           )}