Skip to content

J
jinfa-platform
Commit eefcd27a authored by 前端-钟卫鹏's avatar 前端-钟卫鹏
Browse files
Options

Merge branch 'v2' of http://10.0.0.22:3000/lingxi/lingxi-business-paltform into v2

parents 207b268d e76a0bc9
Show whitespace changes
Inline Side-by-side
Showing with 286 additions and 242 deletions
src/components/UploadImage/index.tsx
View file @ eefcd27a
......@@ -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/editor/components/drawer/commodityDrawer/effect.ts
View file @ eefcd27a
......@@ -6,6 +6,8 @@ export const searchBrandOptionEffect = (
shopId: any,
context: any,
fieldName: string,
memberId,
memberRoleId,
) => {
context.getFieldState(fieldName, state => {
PublicApi.getSearchCommodityTemplateGetBrandList({
......@@ -13,6 +15,8 @@ export const searchBrandOptionEffect = (
pageSize: '100',
name: state.props['x-component-props'].searchValue,
shopId,
memberId,
memberRoleId,
}).then(res => {
context.setFieldState(fieldName, state => {
state.props['x-component-props'].dataoption = res.data?.data?.map(item => {
......@@ -29,10 +33,14 @@ export const searchCustomerCategoryOptionEffect = (
shopId: any,
context: any,
fieldName: string,
memberId,
memberRoleId,
) => {
context.getFieldState(fieldName, state => {
PublicApi.getSearchCommodityTemplateGetFirstCategoryListByMemberId({
shopId,
memberId,
memberRoleId,
}).then(res => {
// PublicApi.getProductPlatformGetCategoryTree().then(res => {
context.setFieldState(fieldName, state => {
......
src/pages/editor/components/drawer/commodityDrawer/index.tsx
View file @ eefcd27a
......@@ -14,7 +14,7 @@ import Submit from '@/components/NiceForm/components/Submit'
import StatusTag from '@/components/StatusTag'
import CustomInputSearch from '@/components/NiceForm/components/CustomInputSearch'
import CustomCategorySearch from '@/components/NiceForm/components/CustomCategorySearch'
import { getAuth } from '@/utils/auth'
import ActivityImage from '@/assets/couponIcons/ActivityImage.svg';
import styles from './index.less';
......@@ -46,6 +46,7 @@ const CommodityDrawer: React.FC<CommodityDrawerProps> = (props: CommodityDrawerP
const [selectedRows, setSelectedRows] = useState<any>([]);
const [expandedRowKeys, setExpandedRowKeys] = useState<any>([]);
const ref = useRef<any>({});
const { memberId, memberRoleId } = getAuth() || {}
useEffect(() => {
setSelectedRowKeys(selectId ? [selectId] : []);
......@@ -210,10 +211,10 @@ const CommodityDrawer: React.FC<CommodityDrawerProps> = (props: CommodityDrawerP
FORM_FILTER_PATH,
);
FormEffectHooks.onFieldChange$('brandId').subscribe(state => {
searchBrandOptionEffect(shopId, actions, 'brandId')
searchBrandOptionEffect(shopId, actions, 'brandId', memberId, memberRoleId)
})
FormEffectHooks.onFieldChange$('categoryId').subscribe(state => {
searchCustomerCategoryOptionEffect(shopId, actions, 'categoryId')
searchCustomerCategoryOptionEffect(shopId, actions, 'categoryId', memberId, memberRoleId)
})
},
components: { ModalSearch: Search, DateRangePickerUnix, Submit, CustomInputSearch, CustomCategorySearch },
......
src/pages/editor/mobileSettingPanel/propsSettings/components/recommendCommodity/index.tsx
View file @ eefcd27a
......@@ -63,10 +63,10 @@ const RecommendCommodity: React.FC<RecommendCommodityProps> = (props: RecommendC
const _onChooseConfirm = (record) => {
const newList = [...dataList, ...record]
if (newList.length > 4) {
message.error('最多选择四件商品')
return
}
// if (newList.length > 4) {
// message.error('最多选择四件商品')
// return
// }
changeProps({
props: Object.assign({ ...props }, {
idList: [...idList, ...record.map((item) => item.id)],
......
src/pages/ownMall/ownMallManager/ownMallConfigure/components/editMallModal.tsx deleted 100644 → 0
View file @ 207b268d
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
View file @ eefcd27a
......@@ -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 0 → 100644
View file @ eefcd27a
.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
src/pages/ownMall/ownMallManager/ownMallConfigure/index.tsx
View file @ eefcd27a
import React, { useEffect, useState, useRef } from 'react'
import { Image, Tag, Button } from 'antd';
import { ColumnType } from 'antd/lib/table';
import { useRef, useState, useEffect } from 'react'
import { Image, Button, Form, Spin, Row, Col, Switch, Space, Input, Empty } from 'antd';
import { FormOutlined } from '@ant-design/icons';
import { PublicApi } from '@/services/api';
import StatusSwitch from '@/components/StatusSwitch'
import { MALL_ENV, MALL_PROPERTY, IS_DEFAULT } from './constant'
import EditMallModal, { RefProps } from './components/editMallModal'
import { StandardTable } from 'god'
import { MALL_ENV, MALL_PROPERTY, ENV_COLOR, ENV_BG_COLOR } from './constant'
import { validatorByte } from '@/utils/regExp';
import { PageHeaderWrapper } from '@ant-design/pro-layout'
import UploadImage from '@/components/UploadImage'
import styles from './index.less'
const OwnMallConfigure = () => {
const modalRef = useRef<RefProps>()
// 已选商城列表columns
const columns: ColumnType<any>[] = [
{
title: '商城ID',
key: 'id',
dataIndex: 'id'
},
{
title: '商城名称',
key: 'name',
dataIndex: 'name'
},
{
title: '商城LOGO',
key: 'logoUrl',
dataIndex: 'logoUrl',
render: (tetx) => <Image src={tetx} width={40} />
},
{
title: '商城环境',
key: 'environment',
dataIndex: 'environment',
render: (text) => MALL_ENV[text]
},
{
title: '商城属性',
key: 'property',
dataIndex: 'property',
render: (text) => MALL_PROPERTY[text]
},
{
title: '商城地址',
key: 'url',
dataIndex: 'url'
},
{
title: '商城描述',
key: 'describe',
dataIndex: 'describe'
},
{
title: '状态',
dataIndex: 'state',
key: 'state',
render: (text: any, record: any) => (
<StatusSwitch
fieldNames="state"
handleConfirm={() => handleModify(record)}
record={record}
/>
)
},
{
title: '是否默认',
key: 'isDefault',
dataIndex: 'isDefault',
render: (text) => IS_DEFAULT[text]
},
{
title: '操作',
key: 'operate',
dataIndex: 'operate',
render: (_text, record) => {
return (
<>
<Button type='link' onClick={() => modalRef.current.show(true, record)}>修改</Button>
<Button type='link' onClick={() => {}}>{record.isDefault === 1 ? '取消默认' : '设为默认'}</Button>
</>
)
const idCache = useRef<number | null>()
const [form] = Form.useForm()
const [mallList, setMallList] = useState<any[]>([])
const [logoCache, setLogoCache] = useState<string>()
const [loading, setLoading] = useState<boolean>(false)
const [saveLoading, setSaveLoading] = useState<boolean>(false)
// 设置/取消默认
const handleDefault = async (record: any) => {
PublicApi.getManageActivityShopRuleUpdateIsDefault({
id: record.id,
isDefault: record.isDefault === 1 ? 0 : 1
}).then(res => {
if (res.code === 1000) {
getMallList()
}
})
}
]
// 改变状态
const handleModify = async (record: any) => {
// 修改LOGO
const handleLogo = ({ id }: any,url: string) => {
setLogoCache(url)
form.setFieldsValue({
logoUrl: url
})
}
// 修改商城信息回调
const onEdit = () => {
// 保存商城修改信息
const onEdit = (id: number) => {
form.validateFields().then(values => {
setSaveLoading(true)
PublicApi.postManageActivityShopRuleUpdate({ id, ...values }).then(res => {
if (res.code === 1000) {
getMallList()
}
}).finally(() => {
setSaveLoading(false)
})
})
}
// 进入/取消编辑
const showEdit = ({ id }: any, isEdit: boolean) => {
const newMallList = mallList.map(item => {
return item.id === id ? { ...item, isEdit } : { ...item, isEdit: false }
})
setMallList(newMallList)
if (isEdit) {
idCache.current = id
const editItem = mallList.find(item => item.id === id) || {}
setLogoCache(editItem.logoUrl)
form.setFieldsValue({
logoUrl: editItem.logoUrl,
name: editItem.name,
describe: editItem.describe
})
} else {
form.resetFields()
idCache.current = null
}
}
const fetchData = (params: any) => {
return new Promise((resolve) => {
PublicApi.getManageActivityShopRuleList({ ...params }).then(res => {
resolve(res.data)
// 获取商城列表
const getMallList = (isInit: boolean) => {
isInit && setLoading(true)
PublicApi.getManageActivityShopRuleList().then(res => {
if (res.code === 1000) {
const data = res.data.map(item => {
return item.id === idCache.current ? { ...item, isEdit: true } : item
})
setMallList(data)
}
}).finally(() => {
isInit && setLoading(false)
})
}
useEffect(() => {
getMallList(true)
}, [])
return (
<>
<StandardTable
tableProps={{ rowKey: 'id' }}
columns={columns}
fetchTableData={(params: any) => fetchData(params)}
formilyLayouts={{
justify: "space-between"
}}
formilyProps={{
layouts: {
order: 3
},
ctx: {
schema: {
type: 'object',
properties: {
name: {
type: 'string',
"x-component": 'search',
"x-component-props": {
placeholder: '输入商城名称'
<PageHeaderWrapper>
<Spin spinning={loading}>
<Form form={form}>
{
mallList.length ?
mallList.map(item => {
return (
<Row key={item.id} className={styles.mallItem} gutter={16}>
<Col span={6}>
<Space size={16} style={{ width: '100%' }}>
{
item.isEdit ?
<Form.Item
name='logoUrl'
rules={[{ required: true, message: "请上传商城LOGO" }]}
>
<UploadImage
imgUrl={logoCache}
fileMaxSize={50}
size="200x200"
onChange={(url) => handleLogo(item, url)}
btnSize={40}
btnText=''
showDesc={false}
/>
</Form.Item>
:
<Image src={item.logoUrl} width={40} style={{ borderRadius: 4 }} />
}
<div>
{
item.isEdit ?
<Form.Item
name='name'
rules={[
{ required: true, message: '请填写商城名称' },
{ validator: (r, v, c) => validatorByte(r, v, c, 40) }
]}
>
<Input/>
</Form.Item>
:
<div className={styles.name}>{item.name}</div>
}
<Space size={8}>
<div className={styles.property}>{MALL_PROPERTY[item.property]}</div>
<div className={styles.env} style={{ color: ENV_COLOR[item.environment], backgroundColor: ENV_BG_COLOR[item.environment] }}>
{MALL_ENV[item.environment]}
</div>
</Space>
</div>
</Space>
</Col>
<Col span={6}>
<div className={styles.title}>商城描述：</div>
{
item.isEdit ?
<Form.Item
name='describe'
rules={[
{ validator: (r, v, c) => validatorByte(r, v, c, 160) }
]}
>
<Input/>
</Form.Item>
:
<div>{item.describe}</div>
}
</Col>
<Col span={6}>
<div className={styles.title}>商城地址：</div>
<div><a href={item.url} target="_blank">{item.url}</a></div>
</Col>
<Col span={6}>
<div className={styles.title}>默认商城：</div>
<div><Switch checked={item.isDefault === 1} onChange={() => handleDefault(item)} /></div>
</Col>
<div className={styles.btns}>
{
item.isEdit ?
<div className={styles.btnEdit}>
<Space size={16}>
<Button onClick={() => showEdit(item, false)}>取消</Button>
<Button type='primary' onClick={() => onEdit(item.id)} loading={saveLoading}>保存</Button>
</Space>
</div>
:
<div className={styles.btnIcon} onClick={() => showEdit(item, true)}><FormOutlined style={{ fontSize: 16 }} /></div>
}
</div>
</Row>
)
})
:
<Empty image={Empty.PRESENTED_IMAGE_SIMPLE} />
}
}}
/>
<EditMallModal ref={modalRef} onOk={onEdit} />
</>
</Form>
</Spin>
</PageHeaderWrapper>
)
}
export default OwnMallConfigure;
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment