diff --git a/src/common/components/schema/MyFormItems.tsx b/src/common/components/schema/MyFormItems.tsx index 1a932d4..caee938 100644 --- a/src/common/components/schema/MyFormItems.tsx +++ b/src/common/components/schema/MyFormItems.tsx @@ -53,13 +53,19 @@ export const MyFormItems = { uploadType = 'image', ...rest }: { - max?: number; + max?: number | undefined; help?: string; uploadType?: 'image' | 'file' | 'video' | 'audio' | undefined; } & PropsType): ReturnType { return { renderFormItem() { - return ; + return ( + + ); }, formItemProps: { help, diff --git a/src/common/utils/wxCustomerConfig.ts b/src/common/utils/wxCustomerConfig.ts new file mode 100644 index 0000000..183a5d4 --- /dev/null +++ b/src/common/utils/wxCustomerConfig.ts @@ -0,0 +1,38 @@ +export const defaultMenu = [ + { + pagePath: 'pages/index/index', + text: '首页', + iconPath: [ + { + name: '首页默认图标', + url: 'https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFMAHSTNJRDJQAY3ZMY5PZXV.png', + uid: 123123, + }, + ], + selectedIconPath: [ + { + name: '首页高亮图标', + url: 'https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFMAG5PNHCWCMQMYEXFC8XV2.png', + uid: 321321, + }, + ], + }, + { + text: '我的', + pagePath: 'pages/me/index', + iconPath: [ + { + name: '我的默认图标', + url: 'https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFMAJ8EYMS0TTNG482YGVWQ1.png', + uid: 234234, + }, + ], + selectedIconPath: [ + { + name: '我的高亮图标', + url: 'https://pay-test-1369486729.cos.ap-guangzhou.myqcloud.com/uploads/cs-test/01KFMAJZYRFEYY8T5VJVYH6XJ1.png', + uid: 432432, + }, + ], + }, +]; diff --git a/src/pages/company/list/pages/set_page_info.tsx b/src/pages/company/list/pages/set_page_info.tsx index ac56a46..d0c2ee1 100644 --- a/src/pages/company/list/pages/set_page_info.tsx +++ b/src/pages/company/list/pages/set_page_info.tsx @@ -4,11 +4,12 @@ import { MyModalFormProps, MyPageContainer, } from '@/common'; +import { defaultMenu } from '@/common/utils/wxCustomerConfig'; import { Apis } from '@/gen/Apis'; import { CaretDownOutlined } from '@ant-design/icons'; -import { BetaSchemaForm } from '@ant-design/pro-components'; +import { BetaSchemaForm, ProCard } from '@ant-design/pro-components'; import { useSearchParams } from '@umijs/max'; -import { Card, Col, Flex, Form, message, Row, Tag } from 'antd'; +import { Card, Col, Flex, Form, message, Row, Space, Tag } from 'antd'; import { useEffect, useState } from 'react'; import './style.scss'; @@ -18,16 +19,19 @@ interface FormData { pageColor: string; pageColorValue?: string[]; admin_logo?: { url: string }[]; + menu?: typeof defaultMenu; } export default function Index({ title = '小程序页面配置' }) { const [form] = Form.useForm(); + const [menuIndex, setMenuIndex] = useState(0); const [getShowData, setShowData] = useState({}); const [searchParams] = useSearchParams(); const [formValues, setFormValues] = useState({ logo: [], admin_logo: [], color: '#1890ff', + menu: defaultMenu, // pageColor: `linear-gradient(180deg,rgba(255, 255, 255, 0.44) 0%,rgba(255, 255, 255, 0) 100%),linear-gradient(146deg,#d3d7ff 0%,rgba(255, 255, 255, 0) 37%),linear-gradient(194deg,#dffff3 0%,#f8f8f8 30%)`, pageColor: `linear-gradient(180deg, rgba(208, 229, 255, 0.44) 0%, #f7f7f7 100%, rgba(255, 255, 255, 0) 100%), linear-gradient(145deg, #D3D7FF 3%, rgba(255, 255, 255, 0) 49%), linear-gradient(222deg, #84FFD8 0%, #F7F7F7 67%)`, }); @@ -53,6 +57,7 @@ export default function Index({ title = '小程序页面配置' }) { logo: row?.logo || formValues?.logo, pageColorValue: formValues?.pageColorValue, admin_logo: row?.admin_logo, + menu: row?.menu?.length ? row?.menu : defaultMenu, }, }; @@ -87,6 +92,7 @@ export default function Index({ title = '小程序页面配置' }) { setFormValues({ ...res?.data?.config_value, pageColor: newCss, + menu: defaultMenu, }); console.log('newCss', newCss); form.setFieldsValue({ @@ -249,6 +255,127 @@ export default function Index({ title = '小程序页面配置' }) { }, }, }, + { + valueType: 'divider', + fieldProps: { + orientation: 'left', + children: '首屏底部菜单图标', + }, + }, + { + valueType: 'formList', + dataIndex: 'menu', + fieldProps: { + copyIconProps: false, + deleteIconProps: false, + creatorButtonProps: false, + }, + formItemProps: { + onChange: () => { + let formValues = form.getFieldsValue(); + setFormValues({ + ...formValues, + menu: formValues?.menu, + }); + }, + style: { + borderRadius: '6px', + marginBottom: 0, + }, + itemRender: ( + { listDom, action }: any, + { index }: { index: number }, + ) => { + return ( + +
+ 请上传正方形图标,建议81*81起的菜单图标 +
+ {/* {index ? ( +
{ + // 确认删除操作 + // 获取当前表单值 + const formValues = form.getFieldsValue(); + // 检查menu数组是否存在 + if ( + formValues?.menu && + Array.isArray(formValues.menu) + ) { + // 创建新的menu数组,删除指定下标项 + const newMenu = formValues.menu.filter( + (_, i) => i !== index, + ); + // 更新表单值 + setFormValues({ + ...formValues, + menu: newMenu, + }); + form.setFieldsValue({ + ...formValues, + menu: newMenu, + }); + } + }} + style={{ + cursor: 'pointer', + padding: '4px', + borderRadius: '4px', + }} + > + +
+ ) : ( + '' + )} */} + + } + > + {listDom} +
+ ); + }, + }, + columns: [ + { + valueType: 'group', + colProps: { span: 24 }, + columns: [ + { + title: '菜单名称', + key: 'text', + colProps: { span: 4 }, + }, + { + title: '跳转链接', + key: 'pagePath', + colProps: { span: 8 }, + }, + MyFormItems.UploadImages({ + key: 'iconPath', + title: '默认图标', + max: 1, + colProps: { span: 4 }, + }), + MyFormItems.UploadImages({ + key: 'selectedIconPath', + title: '选中图标', + max: 1, + colProps: { span: 4 }, + }), + ], + }, + ], + }, ]} /> @@ -346,6 +473,29 @@ export default function Index({ title = '小程序页面配置' }) { +
+ {formValues?.menu?.map((item: any, index: number) => ( +
{ + setMenuIndex(index); + }} + > + +
{item?.text}
+
+ ))} +
diff --git a/src/pages/company/list/pages/style.scss b/src/pages/company/list/pages/style.scss index 561a2ae..dac07ea 100644 --- a/src/pages/company/list/pages/style.scss +++ b/src/pages/company/list/pages/style.scss @@ -53,18 +53,18 @@ } // 手机底部home键 - &::after { - content: ''; - position: absolute; - bottom: 10px; - left: 50%; - transform: translateX(-50%); - width: 50px; - height: 50px; - border: 2px solid #333; - border-radius: 50%; - z-index: 1; - } + // &::after { + // content: ''; + // position: absolute; + // bottom: 10px; + // left: 50%; + // transform: translateX(-50%); + // width: 50px; + // height: 50px; + // border: 2px solid #333; + // border-radius: 50%; + // z-index: 1; + // } } .phone-screen { @@ -154,6 +154,7 @@ .tab-content { padding: 15px 0 0 0; + position: relative; } .phone-button { padding: 4px 12px; @@ -196,3 +197,20 @@ } } } + +.menu-content { + display: flex; + align-items: center; + position: absolute; + bottom: 0; + right: 0; + left: 0; + background-color: #fff; + font-size: 12px; + .item { + text-align: center; + padding: 10px 0; + width: 50%; + cursor: pointer; + } +} diff --git a/src/pages/company/list/table/CustomerEnd.tsx b/src/pages/company/list/table/CustomerEnd.tsx index 2a94a73..4c9c65b 100644 --- a/src/pages/company/list/table/CustomerEnd.tsx +++ b/src/pages/company/list/table/CustomerEnd.tsx @@ -8,7 +8,7 @@ export default function CustomerEnd(props: MyBetaModalFormProps) {
- 替换系统默认的颜色统一调整为机构主色,保持视觉格一致 + 替换系统默认的颜色统一调整为机构主色,保持视觉格一致,以及首屏底部菜单图标。
- - } - > -
- 配置客户端小程序首屏底部菜单图标,请上传png格式图标 -
-
);