Merge branches 'develop' and 'develop' of https://code.linyikj.com.cn/pay/pay-admin into develop
All checks were successful
Build and Push Docker Image / build (push) Successful in 3m39s
All checks were successful
Build and Push Docker Image / build (push) Successful in 3m39s
This commit is contained in:
uiuJun
commit
254ffb244a
@ -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 <MyUploadImages max={max} uploadType={uploadType} />;
|
||||
return (
|
||||
<MyUploadImages
|
||||
max={max}
|
||||
uploadType={uploadType}
|
||||
{...rest?.fieldProps}
|
||||
/>
|
||||
);
|
||||
},
|
||||
formItemProps: {
|
||||
help,
|
||||
|
||||
38
src/common/utils/wxCustomerConfig.ts
Normal file
38
src/common/utils/wxCustomerConfig.ts
Normal file
@ -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,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
@ -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<FormData>();
|
||||
const [menuIndex, setMenuIndex] = useState<number>(0);
|
||||
const [getShowData, setShowData] = useState<any>({});
|
||||
const [searchParams] = useSearchParams();
|
||||
const [formValues, setFormValues] = useState<FormData>({
|
||||
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 (
|
||||
<ProCard
|
||||
bordered
|
||||
style={{ marginBlockEnd: 10 }}
|
||||
title={`菜单设置`}
|
||||
size="small"
|
||||
headerBordered
|
||||
extra={
|
||||
<Space>
|
||||
<div
|
||||
style={{ fontSize: '12px', color: '#666' }}
|
||||
>
|
||||
请上传正方形图标，建议81*81起的菜单图标
|
||||
</div>
|
||||
{/* {index ? (
|
||||
<div
|
||||
onClick={() => {
|
||||
// 确认删除操作
|
||||
// 获取当前表单值
|
||||
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',
|
||||
}}
|
||||
>
|
||||
<DeleteFilled />
|
||||
</div>
|
||||
) : (
|
||||
''
|
||||
)} */}
|
||||
</Space>
|
||||
}
|
||||
>
|
||||
{listDom}
|
||||
</ProCard>
|
||||
);
|
||||
},
|
||||
},
|
||||
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 },
|
||||
}),
|
||||
],
|
||||
},
|
||||
],
|
||||
},
|
||||
]}
|
||||
/>
|
||||
</Card>
|
||||
@ -346,6 +473,29 @@ export default function Index({ title = '小程序页面配置' }) {
|
||||
</Flex>
|
||||
</div>
|
||||
</div>
|
||||
<div className="menu-content">
|
||||
{formValues?.menu?.map((item: any, index: number) => (
|
||||
<div
|
||||
key={`item_${index}`}
|
||||
className="item"
|
||||
onClick={() => {
|
||||
setMenuIndex(index);
|
||||
}}
|
||||
>
|
||||
<img
|
||||
src={
|
||||
index === menuIndex
|
||||
? item?.selectedIconPath?.[0]?.url
|
||||
: item?.iconPath?.[0]?.url
|
||||
}
|
||||
width="28"
|
||||
height="28"
|
||||
alt=""
|
||||
/>
|
||||
<div>{item?.text}</div>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</Card>
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -8,7 +8,7 @@ export default function CustomerEnd(props: MyBetaModalFormProps) {
|
||||
<div>
|
||||
<ProCard title="客户端小程序配置" bordered headerBordered gutter={16}>
|
||||
<ProCard
|
||||
title="品牌主色、全局渐变色配置"
|
||||
title="底部菜单图标、品牌主色、全局渐变色配置"
|
||||
type="inner"
|
||||
bordered
|
||||
extra={
|
||||
@ -25,7 +25,7 @@ export default function CustomerEnd(props: MyBetaModalFormProps) {
|
||||
}
|
||||
>
|
||||
<div style={{ height: '80px' }}>
|
||||
替换系统默认的颜色统一调整为机构主色，保持视觉格一致
|
||||
替换系统默认的颜色统一调整为机构主色，保持视觉格一致，以及首屏底部菜单图标。
|
||||
</div>
|
||||
</ProCard>
|
||||
<ProCard
|
||||
@ -40,18 +40,6 @@ export default function CustomerEnd(props: MyBetaModalFormProps) {
|
||||
品牌主色是机构在小程序中最核心的视觉代表色。通过配置品牌主色，你可以让整个小程序的交互组件自动统一为机构专属风格，提升品牌识别度。
|
||||
</div>
|
||||
</ProCard>
|
||||
<ProCard
|
||||
title="小程序首屏底部菜单图标"
|
||||
type="inner"
|
||||
bordered
|
||||
extra={
|
||||
<MyButtons.Default title="去配置" type="primary" size="small" />
|
||||
}
|
||||
>
|
||||
<div style={{ height: '80px' }}>
|
||||
配置客户端小程序首屏底部菜单图标，请上传png格式图标
|
||||
</div>
|
||||
</ProCard>
|
||||
</ProCard>
|
||||
</div>
|
||||
);
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user