自营商城配置

src/components/UploadImage/index.tsx

@@ -24,6 +24,8 @@ interface UploadImagePorpsType {
   fileList?: any,
   /** 最大图片数量 */
   filelistLength?: number,
+  btnSize?: number,
+  btnText?: string,
 }
 
 const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
@@ -41,6 +43,8 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
     beforeUpload,
     fileList = [],
     filelistLength = 3,
+    btnSize,
+    btnText = '上传图片',
     ...restProps
   } = props
 
@@ -99,14 +103,14 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
   const uploadButton = (
     <Fragment>
       {loading ? <LoadingOutlined /> : <PlusOutlined />}
-      <p>上传图片</p>
+      <p>{btnText}</p>
     </Fragment>
   )
 
   const uploadListButton = (
     <div>
       {loading ? <LoadingOutlined /> : <PlusOutlined />}
-      <div className="ant-upload-text">上传图片</div>
+      <div className="ant-upload-text">{btnText}</div>
     </div>
   )
 
@@ -123,10 +127,10 @@ const UploadImage: React.FC<UploadImagePorpsType> = forwardRef((props, ref) => {
       case "picture-card":
         return !showUploadList ?
           // 单个待删除
-          <div className={styles.upload_image_wrap} style={large ? { height: '120px' } : {}}>
-            <div className={cx(styles.upload_wrap, large ? styles.large : '')}>
+          <div className={styles.upload_image_wrap} style={btnSize ? { width: btnSize, height: btnSize } : large ? { height: '120px' } : {}}>
+            <div className={cx(styles.upload_wrap, large ? styles.large : '')} style={btnSize ? { width: btnSize, height: btnSize } : {}}>
               <Upload {...uploadProps}>
-                {<div className={cx(styles.upload_btn, !imgUrl ? styles.isAdd : "", large ? styles.large : '')}>
+                {<div className={cx(styles.upload_btn, !imgUrl ? styles.isAdd : "", large ? styles.large : '')} style={btnSize ? { width: btnSize, height: btnSize } : {}}>
                   {
                     imgUrl ? <img src={imgUrl} /> : uploadButton
                   }

src/pages/ownMall/ownMallManager/ownMallConfigure/components/editMallModal.tsx

-import { useState, useImperativeHandle, forwardRef } from 'react'
-import { Modal } from 'antd'
-import NiceForm from '@/components/NiceForm';
-import { ISchema } from '@formily/antd';
-import { createFormActions } from '@formily/antd';
-
-export type RefProps = {
-  show: (flag: boolean, data?: any) => void
-}
-
-const formActions = createFormActions()
-
-const classSchema: ISchema = {
-  type: 'object',
-  properties: {
-    megaLayout: {
-      type: 'object',
-      "x-component": "mega-layout",
-      "x-component-props": {
-        grid: true,
-        columns: 16,
-        labelAlign: 'top'
-      },
-      properties: {
-        noField1: {
-          type: 'object',
-          "x-component": 'mega-layout',
-          "x-component-props": {
-            full: true,
-          },
-          "x-mega-props": {
-            span: 1
-          },
-          properties: {
-            name: {
-              type: 'string',
-              title: '商城名称',
-              required: true,
-              "x-component-props": {
-                placeholder: '请输入商城名称'
-              },
-              "x-rules": [
-                {
-                  limitByte: true,
-                  maxByte: 20
-                }
-              ]
-            },
-            describe: {
-              type: 'string',
-              title: '商城描述',
-              "x-component-props": {
-                placeholder: '请输入商城描述'
-              },
-              "x-rules": [
-                {
-                  limitByte: true,
-                  maxByte: 80
-                }
-              ]
-            },
-            logoUrl: {
-              title: '商城LOGO',
-              'x-component': 'CustomUpload'
-            },
-          }
-        },
-      }
-    }
-  }
-}
-
-const Page = ({ onOk }: any, ref: any) => {
-
-  const [visible, setVisible] = useState<boolean>(false)
-  const [initData, setInitData] = useState<any>({})
-
-  useImperativeHandle(ref, () => ({
-    show(flag: boolean, data?: any) {
-      if (data) {
-        setInitData(data)
-      }
-      setVisible(flag)
-    }
-  }))
-
-  const onFinish = (value) => {
-    onOk && onOk(value)
-    setVisible(false)
-  }
-
-  return (
-    <Modal
-      title='修改商城信息'
-      maskClosable={false}
-      destroyOnClose
-      visible={visible}
-      onOk={() => formActions.submit()}
-      onCancel={() => setVisible(false)}
-    >
-      <NiceForm
-        value={initData}
-        name='classForm'
-        onSubmit={onFinish}
-        actions={formActions}
-        schema={classSchema}
-      >
-      </NiceForm>
-    </Modal>
-  )
-}
-
-export default forwardRef(Page)

src/pages/ownMall/ownMallManager/ownMallConfigure/constant.ts

@@ -17,13 +17,33 @@ export const MALL_TYPE = {
  * 商城环境
  */
 export const MALL_ENV = {
-  1: 'web',
+  1: 'WEB',
   2: 'H5',
   3: '小程序',
   4: 'APP' 
 }
 
 /**
+ * 商城环境-字体颜色样式
+ */
+ export const ENV_COLOR = {
+  1: '#007BFC',
+  2: '#007BFC',
+  3: '#EB9B00',
+  4: '#00A98F' 
+}
+
+/**
+ * 商城环境-背景颜色样式
+ */
+ export const ENV_BG_COLOR = {
+  1: '#E9F3FF',
+  2: '#E9F3FF',
+  3: '#FFF8EB',
+  4: '#EBF9F6' 
+}
+
+/**
  * 商城属性
  */ 
 export const MALL_PROPERTY = {
@@ -42,9 +62,9 @@ export const MALL_PROPERTY = {
 }
 
 /**
- * 是否默认-COLOR
+ * 状态
  */ 
- export const IS_DEFAULT_COLOR = {
-  0: 'default',
-  1: 'processing ',
+ export const STATE_TYPE= {
+  0: '无效',
+  1: '有效 ',
 }
\ No newline at end of file

src/pages/ownMall/ownMallManager/ownMallConfigure/index.less

+.mallItem {
+  position: relative;
+  display: flex;
+  align-items: center;
+  width: 100%;
+  min-height: 72px;
+  padding: 16px;
+  margin: 0 0 16px 0 !important;
+  border-radius: 8px;
+  background-color: #FFF;
+  font-size: 12px;
+  color: #5C626A;
+
+  :global {
+    .ant-form-item {
+      margin-bottom: 8px;
+    }
+  }
+
+  .name {
+    margin-bottom: 8px;
+    font-size: 16px;
+    line-height: 1;
+    color: #303133;
+    font-weight: bold;
+  }
+
+  .property {
+    padding: 2px 4px;
+    color: #5C626A;
+    background-color: #F4F5F7;
+  }
+
+  .env {
+    padding: 2px 4px;
+  }
+
+  .title {
+    color: #909399;
+    margin-bottom: 8px;
+    line-height: 1;
+  }
+
+  .btns {
+    position: absolute;
+    right: 16px;
+    width: 136px;
+    height: 32px;
+    display: flex;
+    justify-content: flex-end;
+
+    .btnIcon {
+      width: 32px;
+      height: 32px;
+      line-height: 32px;
+      text-align: center;
+      cursor: pointer;
+    }
+  }
+}
\ No newline at end of file