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,21 +25,28 @@ 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 => {
-      let obj = { ...form.getFieldsValue() };
-      let arr = Object.keys({ ...form.getFieldsValue() });
-      arr.map(k => {
-        obj[k] = res[k];
+    })
+      .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);
       });
-      form.setFieldsValue(obj);
-    });
   }, [miniTitle]);
   // 单选值改变
   const radioChange = e => {};
@@ -47,131 +54,140 @@ 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 => {
-          if (res.success) {
-            notification.success({
-              message: '提示',
-              duration: 3,
-              description: '编辑成功',
-            });
-          } else {
-            notification.error({
-              message: '提示',
-              duration: 3,
-              description: res.message || '编辑失败',
-            });
-          }
-          console.log(res, 'res');
-        });
+        })
+          .then(res => {
+            setLoading(false);
+            if (res.success) {
+              submitCallback();
+              notification.success({
+                message: '提示',
+                duration: 3,
+                description: '编辑成功',
+              });
+            } else {
+              notification.error({
+                message: '提示',
+                duration: 3,
+                description: res.message || '编辑失败',
+              });
+            }
+            console.log(res, 'res');
+          })
+          .catch(err => {
+            setLoading(false);
+          });
       }
     });
   };
   return (
-    <Form form={form} {...layout}>
-      <Item
-        label="应用名称："
-        name="title"
-        rules={[
-          {
-            required: true,
-            message: '请输入应用名称',
-          },
-        ]}
-      >
-        <Input placeholder="请输入应用名称" allowClear />
-      </Item>
+    <Spin spinning={loading} tip="loading...">
+      <Form form={form} {...layout}>
+        <Item
+          label="应用名称："
+          name="title"
+          rules={[
+            {
+              required: true,
+              message: '请输入应用名称',
+            },
+          ]}
+        >
+          <Input placeholder="请输入应用名称" allowClear />
+        </Item>
 
-      <Item
-        label="系统图标："
-        name="shortcutIcon"
-        rules={[
-          {
-            required: true,
-            message: '请选择系统图标',
-          },
-        ]}
-      >
-        <Input placeholder="请输入系统图标名称" allowClear />
-      </Item>
+        <Item
+          label="系统图标："
+          name="shortcutIcon"
+          rules={[
+            {
+              required: true,
+              message: '请选择系统图标',
+            },
+          ]}
+        >
+          <Input placeholder="请输入系统图标名称" allowClear />
+        </Item>
 
-      <Item label="系统图标预览：">
-        <PicturesWall />
-      </Item>
-      <Item
-        label="登陆页面："
-        name="loginTemplate"
-        rules={[
-          {
-            required: true,
-            message: '请选择登陆页面',
-          },
-        ]}
-      >
-        <Select placeholder="请选择登陆页面">
-          {loginList &&
-            loginList.map((item, index) => (
-              <Option value={item.value} key={`item${index}`}>
-                {item.text}
-              </Option>
-            ))}
-        </Select>
-      </Item>
-      <Item
-        label="系统皮肤："
-        name="theme"
-        rules={[
-          {
-            required: true,
-            message: '请选择系统皮肤',
-          },
-        ]}
-      >
-        <Select placeholder="请选择系统皮肤">
-          {themeList &&
-            themeList.map((item, index) => (
-              <Option value={item.value} key={`item${index}`}>
-                {item.text}
-              </Option>
-            ))}
-        </Select>
-      </Item>
-      <Item
-        label="系统风格："
-        name="style"
-        rules={[
-          {
-            required: true,
-            message: '请选择系统风格',
-          },
-        ]}
-      >
-        <Select placeholder="请选择系统风格">
-          {styleList &&
-            styleList.map((item, index) => (
-              <Option value={item.value} key={`item${index}`}>
-                {item.text}
-              </Option>
-            ))}
-        </Select>
-      </Item>
-      <Item label="开启云登陆：" name="cloudLogin">
-        <Radio.Group onChange={radioChange}>
-          <Radio value>是</Radio>
-          <Radio value={false}>否</Radio>
-        </Radio.Group>
-      </Item>
-      <Item style={{ textAlign: 'center' }}>
-        <Button type="primary" onClick={submit}>
-          提交
-        </Button>
-      </Item>
-    </Form>
+        <Item label="系统图标预览：">
+          <PicturesWall />
+        </Item>
+        <Item
+          label="登陆页面："
+          name="loginTemplate"
+          rules={[
+            {
+              required: true,
+              message: '请选择登陆页面',
+            },
+          ]}
+        >
+          <Select placeholder="请选择登陆页面">
+            {loginList &&
+              loginList.map((item, index) => (
+                <Option value={item.value} key={`item${index}`}>
+                  {item.text}
+                </Option>
+              ))}
+          </Select>
+        </Item>
+        <Item
+          label="系统皮肤："
+          name="theme"
+          rules={[
+            {
+              required: true,
+              message: '请选择系统皮肤',
+            },
+          ]}
+        >
+          <Select placeholder="请选择系统皮肤">
+            {themeList &&
+              themeList.map((item, index) => (
+                <Option value={item.value} key={`item${index}`}>
+                  {item.text}
+                </Option>
+              ))}
+          </Select>
+        </Item>
+        <Item
+          label="系统风格："
+          name="style"
+          rules={[
+            {
+              required: true,
+              message: '请选择系统风格',
+            },
+          ]}
+        >
+          <Select placeholder="请选择系统风格">
+            {styleList &&
+              styleList.map((item, index) => (
+                <Option value={item.value} key={`item${index}`}>
+                  {item.text}
+                </Option>
+              ))}
+          </Select>
+        </Item>
+        <Item label="开启云登陆：" name="cloudLogin">
+          <Radio.Group onChange={radioChange}>
+            <Radio value>是</Radio>
+            <Radio value={false}>否</Radio>
+          </Radio.Group>
+        </Item>
+        <Item style={{ textAlign: 'center' }}>
+          <Button type="primary" onClick={submit}>
+            提交
+          </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>
             </>
           )}