Commit 96624ca9 authored by GuanHua's avatar GuanHua
parents 4c131090 763196a4
......@@ -6,22 +6,26 @@ import { selfManagementRoute } from './selfManagementRoute';
import { paltformSignRoute } from './paltformSignRoute';
import { selfbuiltexecutionRoute } from './selfbuiltexecutionRoute';
import { platformexecutionRoute } from './platformexecutionRoute';
import { selfManagementMonitorRoute } from './selfManagementMonitorRoute';
import merchantCouponRoute from './merchantCouponRoute';
const MarketingRoute = {
path: "/memberCenter/marketingAbility",
name: "marketingAbility",
name: "营销能力",
icon: "commodity",
routes: [
/** 自建营销活动管理 */
...selfManagementRoute,
/** 平台营销活动报名 */
...paltformSignRoute,
/** 营销活动执行(自建) */
...platformexecutionRoute,
// /** 营销活动执行(平台) */
/** 自建营销活动执行 */
...selfbuiltexecutionRoute,
/** 营销活动执行 */
...platformexecutionRoute,
/** 自建营销活动监控 */
...selfManagementMonitorRoute,
/** 商家优惠劵管理 */
...merchantCouponRoute,
],
......
......@@ -3,17 +3,17 @@ export const platformexecutionRoute = [
// 营销活动执行(平台)
{
path: '/memberCenter/marketingAbility/platformexeCution',
name: '营销活动执行(平台)',
name: '平台营销活动执行',
routes: [
// 营销活动执行查询
{
path: '/memberCenter/marketingAbility/platformexeCution/search',
name: '平台营销活动查询',
name: '自建营销活动执行',
component: '@/pages/transaction/marketingAbility/platformexeCution/search'
},
{
path: '/memberCenter/marketingAbility/platformexeCution/search/detail',
name: '平台营销活动详情',
name: '自建营销活动执行详情',
component: '@/pages/transaction/marketingAbility/platformexeCution/detail',
hideInMenu: true,
noMargin: true,
......
export const selfManagementMonitorRoute = [
/*自建营销活动监控*/
{
path: '/memberCenter/marketingAbility/selfManagementMonitor',
name: '自建营销活动监控',
component: '@/pages/transaction/marketingAbility/selfManagementMonitor',
},
]
......@@ -3,18 +3,18 @@ export const selfbuiltexecutionRoute = [
/*营销活动执行(平台)*/
{
path: '/memberCenter/marketingAbility/selfbuiltexeCution',
name: '营销活动执行(自建)',
name: '自建营销活动执行',
routes: [
/*营销活动执行查询*/
{
path: '/memberCenter/marketingAbility/selfbuiltexeCution/search',
name: '平台营销活动查询',
name: '自建营销活动执行',
component: '@/pages/transaction/marketingAbility/selfbuiltexeCution/search'
},
/*详情*/
{
path: '/memberCenter/marketingAbility/selfbuiltexeCution/search/detail',
name: '平台营销活动详情',
name: '自建营销活动执行详情',
component: '@/pages/transaction/marketingAbility/selfbuiltexeCution/detail',
hideInMenu: true,
noMargin: true,
......
......@@ -53,12 +53,8 @@ const Table: React.FC<Iprops> = (props: any) => {
/** 列表数据 */
const fetchData = (params?: any) => {
return new Promise((resolve, reject) => {
// fetch({ ...params }).then(res => {
// resolve(res.data)
// })
resolve({
code: 1000,
data: fetch,
fetch({ ...params }).then(res => {
resolve(res.data)
})
})
}
......
......@@ -15,7 +15,7 @@ export interface ListLayoutIProps {
columns: ColumnType<any>[],
/** 接口 */
fetch?: () => Promise<unknown>,
/** 是否请求 */
/** 是否不发送请求 */
done?: boolean,
/** 展示的数据 */
data?: [],
......@@ -58,7 +58,9 @@ const ListLayout: React.FC<ListLayoutIProps> = (props: any) => {
rowKey="id"
columns={columns}
dataSource={data}
pagination={false}
pagination={{
size: 'small'
}}
/>
)}
</Card>
......
......@@ -14,6 +14,7 @@ import ListLayout from '@/pages/transaction/components/detailLayout/components/l
import GeneralLayout from '@/pages/transaction/components/detailLayout/components/generalLayout';
import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
import ModalOperate from '@/pages/transaction/components/modalOperate';
import { ENTERPRISE_CENTER_URL } from '@/constants';
const TABLINK = [
{ id: 'progressLayout', title: '流转进度' },
......@@ -55,7 +56,7 @@ const ConfirmOfferDetail = () => {
{
col: [
{ label: '对应询价单号', extra: data.inquiryListNo },
{ label: '询价会员', extra: data.memberName },
{ label: '报价会员', extra: data.supplyMembersName },
{ label: '报价截止时间', extra: format(data.quotationAsTime) },
]
},
......@@ -98,7 +99,7 @@ const ConfirmOfferDetail = () => {
{
label: '附件',
extra: <>
{data.enclosureUrls.map((item: any, index: number) => (
{data.enclosureUrls && data.enclosureUrls.map((item: any, index: number) => (
<Typography.Link
style={{ display: 'block', paddingBottom: '8px' }}
key={`link_${index + 1}`}
......@@ -117,7 +118,7 @@ const ConfirmOfferDetail = () => {
}
const fetchDataSource = async () => {
await PublicApi.getTransactionNotarizeEnquiryProductQuotationDetails({ id }).then(res => {
await PublicApi.getTransactionNotarizeEnquiryProductQuotationDetails({ id }).then((res: any) => {
if (res.code !== 1000) {
history.goBack();
return;
......@@ -145,7 +146,7 @@ const ConfirmOfferDetail = () => {
dataIndex: 'productId',
render: (productId, data) => (
<Space direction='vertical'>
<Typography.Link target="_blank" href={`/shop/commodity/detail?id=${productId}&type=2&shopId=${btoa(JSON.stringify({ roleId: data.memberRoleId, memberId: data.memberId }))}`}>{productId}</Typography.Link>
<Typography.Link target="_blank" href={`${ENTERPRISE_CENTER_URL}/shop/${data.memberId}_${data.memberRoleId}/commodity/detail/${productId}`}>{productId}</Typography.Link>
<Typography.Text>{data.productName}</Typography.Text>
</Space>
)
......@@ -173,8 +174,8 @@ const ConfirmOfferDetail = () => {
},
{
title: '含税/税率',
key: 'purchaseCount',
dataIndex: 'purchaseCount',
key: 'isTax',
dataIndex: 'isTax',
},
{
title: '报价单价',
......
......@@ -39,8 +39,8 @@ const OfferSearch = () => {
},
{
title: '报价会员',
key: 'memberName',
dataIndex: 'memberName',
key: 'offerMemberName',
dataIndex: 'offerMemberName',
},
{
title: '报价截止时间',
......@@ -75,7 +75,7 @@ const OfferSearch = () => {
effects="quotationNo"
fetch={PublicApi.getTransactionNotarizeEnquiryProductQuotationList}
reload={reload}
externalStatusFetch={PublicApi.getTransactionProductInquiryExternalStateEnum({ type: '3' })}
externalStatusFetch={PublicApi.getTransactionNotarizeEnquiryExternalStateEnum()}
interiorStatusFetch={PublicApi.getTransactionProductInquiryInteriorStateEnum({ type: '3' })}
/>
)
......
......@@ -14,6 +14,7 @@ import ListLayout from '@/pages/transaction/components/detailLayout/components/l
import GeneralLayout from '@/pages/transaction/components/detailLayout/components/generalLayout';
import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
import EyePreview from '@/components/EyePreview';
import { ENTERPRISE_CENTER_URL } from '@/constants';
const TABLINK = [
{ id: 'progressLayout', title: '流转进度' },
......@@ -56,7 +57,7 @@ const ConfirmOfferPreview = () => {
},
{
col: [
{ label: '询价会员', extra: data.inquiryListMemberName },
{ label: '询价会员', extra: data.createMemberName },
{ label: '单据时间', extra: format(data.voucherTime) },
]
},
......@@ -96,7 +97,7 @@ const ConfirmOfferPreview = () => {
{
label: '附件',
extra: <>
{data.enclosureUrls.map((item: any, index: number) => (
{data.enclosureUrls && data.enclosureUrls.map((item: any, index: number) => (
<Typography.Link
style={{ display: 'block', paddingBottom: '8px' }}
key={`link_${index + 1}`}
......@@ -115,7 +116,7 @@ const ConfirmOfferPreview = () => {
}
const fetchDataSource = async () => {
await PublicApi.getTransactionNotarizeEnquiryQuotedPriceDetails({ id }).then(res => {
await PublicApi.getTransactionNotarizeEnquiryQuotedPriceDetails({ id }).then((res: any) => {
if (res.code !== 1000) {
history.goBack();
return;
......@@ -137,7 +138,7 @@ const ConfirmOfferPreview = () => {
}, [])
const handleJump = (data:any) => {
window.open(`/shop/commodity/detail?id=${data.productId}&type=2&shopId=${btoa(JSON.stringify({ roleId: data.memberRoleId, memberId: data.memberId }))}`)
window.open(`${ENTERPRISE_CENTER_URL}/shop/${data.memberId}_${data.memberRoleId}/commodity/detail/${data.productId}`)
}
const columns: ColumnType<any>[] = [
......@@ -145,6 +146,7 @@ const ConfirmOfferPreview = () => {
title: 'ID',
key: 'id',
dataIndex: 'id',
},
{
title: '商品名称',
......@@ -189,7 +191,8 @@ const ConfirmOfferPreview = () => {
anchor="inquiryProductLayout"
title="询价商品"
columns={columns}
fetch={PublicApi.getTransactionEnquiryProductList}
done
data={dataSource.inquiryListProductRequests}
/>
<GeneralLayout
anchor="conditionLayout"
......
......@@ -45,8 +45,8 @@ const WaitAuditInquiryOne = () => {
},
{
title: '报价会员',
key: 'memberName',
dataIndex: 'memberName',
key: 'offerMemberName',
dataIndex: 'offerMemberName',
},
{
title: '报价截止时间',
......
......@@ -45,8 +45,8 @@ const WaitAuditInquiryOne = () => {
},
{
title: '报价会员',
key: 'memberName',
dataIndex: 'memberName',
key: 'offerMemberName',
dataIndex: 'offerMemberName',
},
{
title: '报价截止时间',
......
......@@ -50,8 +50,8 @@ const WaitSubmitAuditOffer = () => {
},
{
title: '报价会员',
key: 'memberName',
dataIndex: 'memberName',
key: 'offerMemberName',
dataIndex: 'offerMemberName',
},
{
title: '报价截止时间',
......
......@@ -49,8 +49,8 @@ const WaitSubmitOffer = () => {
},
{
title: '报价会员',
key: 'memberName',
dataIndex: 'memberName',
key: 'offerMemberName',
dataIndex: 'offerMemberName',
},
{
title: '报价截止时间',
......
......@@ -5,6 +5,7 @@ import { ColumnType } from 'antd/lib/table/interface';
import PeripheralLayout from '@/pages/transaction/components/detailLayout';
import { Context } from '@/pages/transaction/components/detailLayout/components/context';
import moment from 'moment';
import { ENTERPRISE_CENTER_URL } from '@/constants'
import { PublicApi } from '@/services/api';
import { ENTERPRISE_CENTER_URL } from '@/constants'
import { CheckCircleOutlined, LinkOutlined } from '@ant-design/icons';
......@@ -118,7 +119,7 @@ const InquiryOfferDetail = () => {
}
const fetchDataSource = async () => {
await PublicApi.getTransactionProductQuotationDetails({ id }).then(res => {
await PublicApi.getTransactionProductQuotationDetails({ id }).then((res: any) => {
if (res.code !== 1000) {
history.goBack();
return;
......
......@@ -74,7 +74,7 @@ const InquirySearch = () => {
effects="inquiryListNo"
fetch={PublicApi.getTransactionProductInquiryList}
reload={reload}
externalStatusFetch={PublicApi.getTransactionProductInquiryExternalStateEnum({ type: '1' })}
externalStatusFetch={PublicApi.getTransactionQuotationtInquiryExternalStateEnum()}
/>
)
}
......
......@@ -75,7 +75,7 @@ const OfferSearch = () => {
effects="quotationNo"
fetch={PublicApi.getTransactionProductQuotationList}
reload={reload}
externalStatusFetch={PublicApi.getTransactionProductInquiryExternalStateEnum({ type: '2' })}
externalStatusFetch={PublicApi.getTransactionQuotationtInquiryExternalStateEnum()}
interiorStatusFetch={PublicApi.getTransactionProductInquiryInteriorStateEnum({ type: '2' })}
/>
)
......
......@@ -14,6 +14,7 @@ import ListLayout from '@/pages/transaction/components/detailLayout/components/l
import GeneralLayout from '@/pages/transaction/components/detailLayout/components/generalLayout';
import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
import EyePreview from '@/components/EyePreview';
import { ENTERPRISE_CENTER_URL } from '@/constants';
const TABLINK = [
{ id: 'progressLayout', title: '流转进度' },
......@@ -56,7 +57,7 @@ const InquiryOfferPreview = () => {
},
{
col: [
{ label: '询价会员', extra: data.inquiryListMemberName },
{ label: '询价会员', extra: data.createMemberName },
{ label: '单据时间', extra: format(data.voucherTime) },
]
},
......@@ -115,7 +116,7 @@ const InquiryOfferPreview = () => {
}
const fetchDataSource = async () => {
await PublicApi.getTransactionProductInquiryDetails({ id }).then(res => {
await PublicApi.getTransactionProductInquiryDetails({ id }).then((res: any) => {
if (res.code !== 1000) {
history.goBack();
return;
......@@ -135,7 +136,7 @@ const InquiryOfferPreview = () => {
}, [])
const handleJump = (data:any) => {
window.open(`/shop/commodity/detail?id=${data.productId}&type=2&shopId=${btoa(JSON.stringify({ roleId: data.memberRoleId, memberId: data.memberId }))}`)
window.open(`${ENTERPRISE_CENTER_URL}/shop/${data.memberId}_${data.memberRoleId}/commodity/detail/${data.productId}`)
}
const columns: ColumnType<any>[] = [
......@@ -187,7 +188,8 @@ const InquiryOfferPreview = () => {
anchor="inquiryProductLayout"
title="询价商品"
columns={columns}
fetch={PublicApi.getTransactionEnquiryProductList}
done
data={dataSource.inquiryListProductRequests}
/>
<GeneralLayout
anchor="conditionLayout"
......
......@@ -94,7 +94,7 @@ const BasicInfoLayout: React.FC<BasicInfoLayoutProps> = (props: any) => {
<Row gutter={[48, 24]}>
<Col span={12} className={style.searchColor}>
<Form.Item label="报价单摘要" name="details" rules={[{ required: true, message: '请输入报价单摘要' }]}>
<Input />
<Input maxLength={30} placeholder="最长60字符,30个汉字" />
</Form.Item>
<Form.Item label="对应询价单号" name='inquiryListNo' rules={[{ required: true, message: '请选择对应询价单号' }]}>
<Input.Search onClick={hanleGoOrderInfo} readOnly onSearch={() => toggle(true)} enterButton={<Button disabled={isEdit} style={{ height: '31.19px' }} icon={<LinkOutlined />}>选择</Button>} />
......
......@@ -15,28 +15,37 @@ const OtherExplainLayout: React.FC<OtherExplainLayoutProps> = (props: any) => {
>
<Row gutter={[48, 24]}>
<Col span={12}>
<Form.Item label='最小起订' name='minimumOrder' rules={[{ required: true, message: '请输入最小起订' }]}>
<InputNumber style={{ width: '100%' }} />
<Form.Item label='最小起订' name='minimumOrder' rules={[
{
required: true,
message: '请输入最小起订数'
},
{
pattern: /^\d+(\.\d{1,3})?$/,
message: '最小起订数小数点后仅限三位',
}
]}>
<InputNumber min={0} style={{ width: '100%' }} />
</Form.Item>
<Form.Item label='交付说明' name='deliveryInstructions'>
<Input.TextArea autoSize placeholder='最长100个字符,50个汉字' />
<Input.TextArea maxLength={50} autoSize placeholder='最长100个字符,50个汉字' />
</Form.Item>
<Form.Item label='付款说明' name='paymentType'>
<Input.TextArea autoSize placeholder='最长100个字符,50个汉字' />
<Input.TextArea maxLength={50} autoSize placeholder='最长100个字符,50个汉字' />
</Form.Item>
<Form.Item label='税费说明' name='taxes'>
<Input.TextArea autoSize placeholder='最长100个字符,50个汉字' />
<Input.TextArea maxLength={50} autoSize placeholder='最长100个字符,50个汉字' />
</Form.Item>
</Col>
<Col span={12}>
<Form.Item label='物流说明' name='logistics'>
<Input.TextArea autoSize placeholder='最长100个字符,50个汉字' />
<Input.TextArea maxLength={50} autoSize placeholder='最长100个字符,50个汉字' />
</Form.Item>
<Form.Item label='包装说明' name='packRequire'>
<Input.TextArea autoSize placeholder='最长100个字符,50个汉字' />
<Input.TextArea maxLength={50} autoSize placeholder='最长100个字符,50个汉字' />
</Form.Item>
<Form.Item label='其他说明' name='otherRequire'>
<Input.TextArea autoSize placeholder='最长100个字符,50个汉字' />
<Input.TextArea maxLength={50} autoSize placeholder='最长100个字符,50个汉字' />
</Form.Item>
</Col>
</Row>
......
......@@ -14,6 +14,8 @@ import ListLayout from '@/pages/transaction/components/detailLayout/components/l
import GeneralLayout from '@/pages/transaction/components/detailLayout/components/generalLayout';
import RecordLyout from '@/pages/transaction/components/detailLayout/components/recordLyout';
import ModalOperate from '@/pages/transaction/components/modalOperate';
import { ENTERPRISE_CENTER_URL } from '@/constants';
import EyePreview from '@/components/EyePreview';
const TABLINK = [
{ id: 'progressLayout', title: '流转进度' },
......@@ -117,7 +119,7 @@ const ProductInquiryDetail = () => {
}
const fetchDataSource = async () => {
await PublicApi.getTransactionInquiryListDetails({ id }).then(res => {
await PublicApi.getTransactionInquiryListDetails({ id }).then((res: any) => {
if (res.code !== 1000) {
history.goBack();
return;
......@@ -138,6 +140,10 @@ const ProductInquiryDetail = () => {
fetchDataSource();
}, [])
const handleJump = (data:any) => {
window.open(`${ENTERPRISE_CENTER_URL}/shop/${data.memberId}_${data.memberRoleId}/commodity/detail/${data.productId}`)
}
const columns: ColumnType<any>[] = [
{
title: 'ID',
......@@ -148,6 +154,7 @@ const ProductInquiryDetail = () => {
title: '商品名称',
key: 'productName',
dataIndex: 'productName',
render: (text: any, record: any) => <EyePreview type='button' handleClick={() => handleJump(record)}>{text}</EyePreview>
},
{
title: '品类',
......@@ -213,7 +220,9 @@ const ProductInquiryDetail = () => {
anchor="inquiryProductLayout"
title="询价商品"
columns={columns}
fetch={PublicApi.getTransactionEnquiryProductList}
done
data={dataSource.inquiryListProductRequests}
// fetch={PublicApi.getTransactionEnquiryProductList}
/>
<GeneralLayout
anchor="conditionLayout"
......
import React, { useCallback, useEffect, useState } from 'react';
import { Button, Form, Table, InputNumber, Image, message } from 'antd';
import { Button, Form, Table, InputNumber, Image, message, Typography } from 'antd';
import { ENTERPRISE_CENTER_URL } from '@/constants';
import Card from '@/pages/transaction/components/card';
import { PlusOutlined } from '@ant-design/icons';
import { ColumnType } from 'antd/lib/table/interface';
......@@ -48,6 +49,7 @@ const InquiryProductLayout: React.FC<InquiryProductLayoutProps> = (props: any) =
title: "商品ID",
key: "productId",
dataIndex: "productId",
render: (productId, data) => <Typography.Link target="_blank" href={`${ENTERPRISE_CENTER_URL}/shop/${data.memberId}_${data.memberRoleId}/commodity/detail/${productId}`}>{productId}</Typography.Link>
},
{
title: "商品图片",
......@@ -81,7 +83,7 @@ const InquiryProductLayout: React.FC<InquiryProductLayoutProps> = (props: any) =
dataIndex: "purchaseCount",
render: (text, _data, index) => (
<Form.Item initialValue={text} name={`purchaseCount${index}`} rules={[{ required: true, message: '请输入采购数量' }]} style={{ marginBottom: '0px' }}>
<InputNumber min={1} onChange={(val) => setInputNumber(val, index)} />
<InputNumber min={1} maxLength={8} onChange={(val) => setInputNumber(val, index)} />
</Form.Item>
)
......
......@@ -199,6 +199,7 @@ const LogisticsCompanyManageAdded = (props: any) => {
title="选择平台物流服务商"
mode="radio"
modalType="Drawer"
customKey="memberId"
columns={columns}
schema={logisticsSchema}
fetchData={handleFetchData}
......
......@@ -149,7 +149,7 @@ export const logisticsSchema: ISchema = {
placeholder: '选择会员角色',
fetchSearch: () => {
return new Promise(resolve => {
PublicApi.getMemberManageRoleAll().then(res => {
PublicApi.getMemberManageRoleAll({ roleTypeEnum: '1' }).then(res => {
res.data.forEach((item:any) => {
item.id = item.roleId;
item.name = item.roleName;
......
.col {
display: flex;
padding: 16px;
border-radius: 8px;
background-color: #FFF;
.col_20 {
flex: 4 4 auto ;
}
.col_icon {
width: 48px;
height: 48px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 4px;
color: #FFFF;
.col_icon_fontSize {
font-size: 16px;
}
}
}
import React from 'react';
import { Row, Col, Typography } from 'antd';
import style from './index.less';
import { BellOutlined, CheckCircleOutlined, ClockCircleOutlined, StockOutlined } from '@ant-design/icons';
const ActivityLayout = () => {
return (
<Row gutter={[16, 16]}>
<Col xl={{ span: 6 }} span={12}>
<div className={style.col}>
<div className={style.col_20}>
<Typography.Title level={4}>10</Typography.Title>
<Typography.Text type='secondary'>今日正在执行活动数量 (个)</Typography.Text>
</div>
<div className={style.col_4}>
<div className={style.col_icon} style={{ backgroundColor: '#00A98F' }}>
<BellOutlined className={style.col_icon_fontSize} />
</div>
</div>
</div>
</Col>
<Col xl={{ span: 6 }} span={12}>
<div className={style.col}>
<div className={style.col_20}>
<Typography.Title level={4}>100</Typography.Title>
<Typography.Text type='secondary'>今日参与活动总客户数 (人)</Typography.Text>
</div>
<div className={style.col_4}>
<div className={style.col_icon} style={{ backgroundColor: '#007BFC' }}>
<ClockCircleOutlined className={style.col_icon_fontSize} />
</div>
</div>
</div>
</Col>
<Col xl={{ span: 6 }} span={12}>
<div className={style.col}>
<div className={style.col_20}>
<Typography.Title level={4}>100</Typography.Title>
<Typography.Text type='secondary'>今日活动商品总订单数量 (单)</Typography.Text>
</div>
<div className={style.col_4}>
<div className={style.col_icon} style={{ backgroundColor: '#EB9B00' }}>
<CheckCircleOutlined className={style.col_icon_fontSize} />
</div>
</div>
</div>
</Col>
<Col xl={{ span: 6 }} span={12}>
<div className={style.col}>
<div className={style.col_20}>
<Typography.Title level={4}>10,000.00</Typography.Title>
<Typography.Text type='secondary'>今日活动商品总购买金额 (元)</Typography.Text>
</div>
<div className={style.col_4}>
<div className={style.col_icon} style={{ backgroundColor: '#EF3346' }}>
<StockOutlined className={style.col_icon_fontSize} />
</div>
</div>
</div>
</Col>
</Row>
)
}
export default ActivityLayout;
.card {
margin: 16px 0px;
border-radius: 8px;
background-color: #FFF;
.card_title {
padding: 17px 16px;
font-size: 14px;
color: #252D37;
}
.card_list {
padding: 0px 16px;
.card_list_item {
display: flex;
position: relative;
padding: 8px 0px;
.card_list_item_sort {
display: flex;
align-items: center;
justify-content: center;
margin-right: 8px;
font-size: 14px;
.card_list_item_sort_number {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
}
}
.card_list_item_img {
width: 48px;
height: 48px;
border-radius: 4px;
overflow: hidden;
border: 1px solid #F5F6F7;
box-sizing: border-box;
margin-right: 12px;
position: relative;
z-index: 1;
}
.card_list_item_info {
position: absolute;
padding-left: 95px;
width: 100%;
:global {
div.ant-typography, .ant-typography p {
margin-bottom: 6px;
}
}
.info_icon_style {
font-size: 12px;
margin: 0 2px;
}
}
.card_list_item_tag {
padding: 2px 4px;
color: #EF3346;
background-color: #FFF0F2;
border-radius: 2px;
position: absolute;
bottom: 12px;
right: 0;
}
}
.card_list_wran {
padding-bottom: 12px;
display: block;
text-align: center;
}
}
}
import React from 'react';
import { Typography, Image } from 'antd';
import style from './index.less';
import { CaretUpOutlined } from '@ant-design/icons';
interface ProductListLayoutProps {
/** 标题 */
title?: string,
/** 列表数据 */
dataSource?: any[],
}
const ProductListLayout: React.FC<ProductListLayoutProps> = (props: any) => {
const { title, dataSource } = props;
const data = [
{ sort: 1, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
{ sort: 2, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
{ sort: 3, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
{ sort: 4, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
{ sort: 5, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
{ sort: 6, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
{ sort: 7, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
{ sort: 8, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
{ sort: 9, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
{ sort: 10, name: '进口头层黄牛皮荔枝纹/红色/XL', tag: '满量促销', img: 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png', number: '300', percentum: '25' },
]
return (
<div className={style.card}>
<div className={style.card_title}>今日活动商品购买排名</div>
<div className={style.card_list}>
{data.map(item => (
<div className={style.card_list_item} key={item.sort}>
<div className={style.card_list_item_sort}>
<div className={style.card_list_item_sort_number}>{item.sort}</div>
</div>
<div className={style.card_list_item_img}>
<Image width={48} height={48} src={item.img} />
</div>
<div className={style.card_list_item_info}>
<Typography.Paragraph ellipsis={{ rows: 1, expandable: false }}>{item.name}</Typography.Paragraph>
<div>
<Typography.Text type="secondary">{item.number}件,相比昨日</Typography.Text>
<Typography.Text type="danger"><CaretUpOutlined className={style.info_icon_style} />{item.percentum}%</Typography.Text>
</div>
</div>
<div className={style.card_list_item_tag}>{item.tag}</div>
</div>
))}
<Typography.Text className={style.card_list_wran} type='secondary'>只展示前 10 名数据</Typography.Text>
</div>
</div>
)
}
export default ProductListLayout;
import React from 'react';
import { Row, Col, Card } from 'antd';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import ActivityLayout from './components/activityLayout';
import ProductListLayout from './components/productListLayout';
const SelfManagementMonitor = () => {
return (
<PageHeaderWrapper>
<ActivityLayout />
<Row gutter={[16, 16]}>
<Col xl={{ span: 18 }} span={14}>1</Col>
<Col xl={{ span: 6 }} span={10}>
<ProductListLayout />
<ProductListLayout />
</Col>
</Row>
</PageHeaderWrapper>
)
}
export default SelfManagementMonitor;
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