Skip to content

X
xiaomai-cloud-class-web
Commit 63f4a0a8 by wufan
Options

feat:添加H5banner列表页

parent 3bcbb935
Showing with 383 additions and 33 deletions
package.json
...@@ -77,6 +77,7 @@ ...@@ -77,6 +77,7 @@
"react-dev-utils": "^10.2.1", "react-dev-utils": "^10.2.1",
"react-dom": "^16.13.1", "react-dom": "^16.13.1",
"react-router-dom": "^5.2.0", "react-router-dom": "^5.2.0",
"react-sortable-hoc": "^1.11.0",
"resolve": "1.15.0", "resolve": "1.15.0",
"resolve-url-loader": "3.1.1", "resolve-url-loader": "3.1.1",
"semver": "6.3.0", "semver": "6.3.0",
...@@ -128,6 +129,7 @@ ...@@ -128,6 +129,7 @@
"devDependencies": { "devDependencies": {
"@types/ali-oss": "^6.0.5", "@types/ali-oss": "^6.0.5",
"@types/jquery": "^3.5.4", "@types/jquery": "^3.5.4",
"ali-oss": "^6.12.0" "ali-oss": "^6.12.0",
"react-sortable-hoc": "^1.11.0"
} }
} }
src/bu-components/NonCompliantFileModal.jsx
...@@ -33,7 +33,7 @@ class NonCompliantFileModal extends React.Component { ...@@ -33,7 +33,7 @@ class NonCompliantFileModal extends React.Component {
className="prepare-lesson__non-compliant-file-modal" className="prepare-lesson__non-compliant-file-modal"
> >
<div className="file-list"> <div className="file-list">
<div className="file-list__title">以下文件已超出上传限制，无法上传。</div> <div className="file-list__title">以下文件超出上传限制，无法上传，点击继续上传不会上传以下文件。</div>
<div className="file-list__content"> <div className="file-list__content">
{ {
fileList.map((file, index) => { fileList.map((file, index) => {
......
src/bu-components/UploadProgressModal.less
...@@ -100,7 +100,7 @@ ...@@ -100,7 +100,7 @@
} }
&.fail { &.fail {
color: #EC4B35; color: rgba(255, 79, 79, 1);
} }
} }
} }
......
src/modules/resource-disk/index.less
...@@ -281,4 +281,11 @@ ...@@ -281,4 +281,11 @@
.create-folder-modal .ant-modal-body { .create-folder-modal .ant-modal-body {
min-height: 101px !important; min-height: 101px !important;
.create-tip {
width: 322px;
height: 20px;
font-size: 14px;
color: #999999;
line-height: 20px;
}
} }
src/modules/resource-disk/modal/CreateFolderModal.jsx
...@@ -109,6 +109,7 @@ class CreateFolderModal extends React.Component { ...@@ -109,6 +109,7 @@ class CreateFolderModal extends React.Component {
/> />
</Form.Item> </Form.Item>
</Form> </Form>
<div className="create-tip">创建后仅自己可查看，如需其他成员查看请设置权限</div>
</Modal> </Modal>
) )
} }
......
src/modules/store-manage/StoreDecorationPage.less 0 → 100644
.store-decoration-page {
thead {
display: none;
}
.ant-table-title {
display: none;
}
.banner-setting {
width: 100%;
height: 65px;
background: #f7f8f9;
border-radius: 4px;
padding: 12px 21px 9px 21px;
margin-bottom: 16px;
.title {
color: #333333;
line-height: 22px;
}
.tip {
color: #666;
line-height: 22px;
}
}
.banner-thumbnail {
width: 230px;
height: 79px;
}
.index-num {
width: 30px;
height: 33px;
font-size: 24px;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999;
line-height: 33px;
}
.drag-icon {
font-size: 24px;
line-height: 18px;
color: #999999;
}
.operation {
.edit {
color: #5289fa;
cursor: pointer;
}
.delete {
color: #5289fa;
cursor: pointer;
}
}
}
src/modules/store-manage/StoreDecorationPage.tsx 0 → 100644
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2020-12-14 14:16:15
* @Description: 员工管理页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useEffect, useState } from "react";
import { withRouter, Switch, Route } from "react-router-dom";
import _ from "underscore";
import { Tabs } from "antd";
import "./StoreDecorationPage.less";
import StoreH5DecorationTab from "./StoreH5DecorationTab";
import StoreWebDecorationTab from "./StoreWebDecorationTab";
const { TabPane } = Tabs;
declare var window: any;
interface StoreDecoprationProps {
match: {
url: string;
};
}
function StoreDecorationPage(props: StoreDecoprationProps) {
const [currentTab, setCurrentTab] = useState("h5");
const { match } = props;
return (
<div className="page store-decoration-page">
<div className="page-content">
<div className="content-header">店铺装修</div>
<div className="box">
<Tabs
onChange={(key) => {
setCurrentTab(key);
// window.RCHistory.push(`${match.url}/store-decoration/${key}`);
}}
activeKey={currentTab}
>
<TabPane key="h5" tab="H5店铺"></TabPane>
<TabPane key="web" tab="网页端店铺"></TabPane>
</Tabs>
{
currentTab === 'h5' && <StoreH5DecorationTab/>
}
{
currentTab === 'web' && <StoreWebDecorationTab/>
}
{/* <Switch>
<Route
path="/store-decoration/h5"
component={StoreH5DecorationTab}
></Route>
<Route
path="/store-decoration/web"
component={StoreWebDecorationTab}
></Route>
</Switch> */}
</div>
</div>
</div>
);
}
export default withRouter(StoreDecorationPage);
src/modules/store-manage/StoreH5DecorationTab.jsx 0 → 100644
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2020-12-14 15:19:21
* @Description: 员工管理页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
import PageControl from "@/components/PageControl";
import { Table, Modal, message, Button } from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";
import StoreService from "@/domains/store-domain/storeService";
import {
sortableContainer,
sortableElement,
sortableHandle,
} from "react-sortable-hoc";
import { MenuOutlined } from "@ant-design/icons";
import arrayMove from "array-move";
import "./StoreDecorationPage.less";
import moment from "moment";
const { confirm } = Modal;
function StoreH5Decoration(props) {
const [storeDecorationlist, setStoreDecorationlist] = useState([
{
di:1111,
banner:'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png'
},
{
di:1111,
banner:'https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg'
},
{
di:1111,
banner:'https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg'
},
{
di:1111,
banner:'https://image.xiaomaiketang.com/xm/p7hG4exMFf.png'
}
]);
const [query, setQuery] = useState({
current: 0,
size: 10,
name: "",
phone: "",
identity: "ALL",
instId: "1837447" || window.currentUserInstInfo.instId,
registerStartDate: null,
registerEndDate: null,
});
const [total, setTotal] = useState(0);
const [model, setModel] = useState(null);
const DragHandle = sortableHandle(() => (
<MenuOutlined style={{ cursor: "pointer", color: "#999" }} className="drag-icon"/>
));
const SortableItem = sortableElement((props) => <tr {...props} />);
const SortableContainer = sortableContainer((props) => <tbody {...props} />);
useEffect(() => {
// getStoreDecorationList();
}, [query]);
function getStoreDecorationList() {
let _query = _.clone(query);
_query.current = query.current + 1;
StoreService.getStoreDecorationList(_query).then((res) => {
console.log(res.result.records);
setStoreDecorationlist(res.result.records);
setTotal(res.result.total);
});
}
function handleReplaceDecoration(record) {}
function handleDeleteDecoration(record) {}
function handleDeleteDecorationConfirm(record) {
return confirm({
title: "你确定要删除这个banner吗？",
icon: <QuestionCircleOutlined />,
okText: "删除",
cancelText: "取消",
onOk: () => {
handleDeleteDecoration(record);
},
});
}
function onSortEnd({ oldIndex, newIndex }) {
if (oldIndex !== newIndex) {
const newData = arrayMove(
[].concat(storeDecorationlist),
oldIndex,
newIndex
).filter((el) => !!el);
console.log("Sorted items: ", newData);
setStoreDecorationlist(newData);
}
}
function DraggableBodyRow({ className, style, ...restProps }) {
const index = storeDecorationlist.findIndex(
(x) => x.index === restProps["data-row-key"]
);
return <SortableItem index={index} {...restProps} />;
}
function parseColumn() {
return [
{
title: "Sort",
dataIndex: "sort",
width: 30,
className: "drag-visible",
render: () => <DragHandle />,
},
{
title: "index",
dataIndex: "index",
key: "index",
width: 20,
render: (val, record, index) => {
return <div className="index-num">{index + 1}</div>;
},
},
{
title: "banner",
dataIndex: "banner",
key: "banner",
render: (val) => {
return <img src={val} alt="banner" className="banner-thumbnail" />;
},
},
{
title: "操作",
dataIndex: "operation",
width: '20%',
render: (val, record) => {
return (
<div className="operation">
<span
className="edit"
onClick={() => handleReplaceDecoration(record)}
>
替换
</span>
<span className="divider-line">{" | "}</span>
<span
className="delete"
onClick={() => handleDeleteDecorationConfirm(record)}
>
删除
</span>
</div>
);
},
},
];
}
function handleToAddStoreDecoration() {}
const DraggableContainer = (props) => (
<SortableContainer
useDragHandle
helperClass="row-dragging"
onSortEnd={onSortEnd}
{...props}
/>
);
return (
<div className="user-manage-page">
<div className="box-header">
<div className="banner-setting">
<div className="title">banner设置</div>
<div className="tip">
图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸750x252像素。
</div>
</div>
<Button
onClick={() => {
handleToAddStoreDecoration();
}}
type="primary"
className="add-show-btn"
>
添加Banner
</Button>
</div>
<div className="box-body">
<Table
size={"middle"}
pagination={false}
dataSource={storeDecorationlist}
columns={parseColumn()}
rowKey={(item) => item.id}
components={{
body: {
wrapper: DraggableContainer,
row: DraggableBodyRow,
},
}}
bordered
/>
</div>
</div>
);
}
export default withRouter(StoreH5Decoration);
src/modules/store-manege/StoreDecorationPage.tsx → src/modules/store-manage/StoreWebDecorationTab.tsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: wufan * @Author: wufan
* @Date: 2020-11-30 10:47:38 * @Date: 2020-11-30 10:47:38
* @LastEditors: wufan * @LastEditors: wufan
* @LastEditTime: 2020-11-30 17:35:24 * @LastEditTime: 2020-12-14 11:44:31
* @Description: 员工管理页面 * @Description: 员工管理页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -37,7 +37,7 @@ interface RecordTypes { ...@@ -37,7 +37,7 @@ interface RecordTypes {
role: string; role: string;
} }
function StoreDecorationPage() { function StoreWebDecoration() {
const [storeDecorationlist, setStoreDecorationlist] = useState([ const [storeDecorationlist, setStoreDecorationlist] = useState([
{ {
name: "赵云", name: "赵云",
...@@ -156,29 +156,16 @@ function StoreDecorationPage() { ...@@ -156,29 +156,16 @@ function StoreDecorationPage() {
]; ];
} }
function handleQuery(name: string, value: any) {
const _query = _.clone(query);
// _query[name] = value;
setQuery(_query);
}
function handleToAddStoreDecoration() {} function handleToAddStoreDecoration() {}
return ( return (
<div className="page user-manage-page"> <div className="user-manage-page">
<div className="page-content">
<div className="content-header">店铺装修</div>
<div className="box">
<div className="box-header"> <div className="box-header">
<div <div className="banner-setting">
style={{ <div className="title">banner设置</div>
display: "flex", <div className="tip">
alignItems: "center", 图片支持bmp、jpeg、jpg、png、gif格式，最大5M，最多可添加5张，拖动可排序。建议尺寸1232x212像素。
justifyContent: "space-between", </div>
padding: "15px 0 10px",
}}
>
<div style={{ flex: 1 }}>banner设置</div>
</div> </div>
<Button <Button
onClick={() => { onClick={() => {
...@@ -213,9 +200,7 @@ function StoreDecorationPage() { ...@@ -213,9 +200,7 @@ function StoreDecorationPage() {
/> />
</div> </div>
</div> </div>
</div>
</div>
); );
} }
export default withRouter(StoreDecorationPage); export default withRouter(StoreWebDecoration);
src/routes/config/mainRoutes.tsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-04-29 10:26:32 * @Date: 2020-04-29 10:26:32
* @LastEditors: zhangleyuan * @LastEditors: wufan
* @LastEditTime: 2020-12-11 19:10:35 * @LastEditTime: 2020-12-14 11:13:16
* @Description: 内容线路由配置 * @Description: 内容线路由配置
*/ */
import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage'; import EmployeesManagePage from '@/modules/store-manage/EmployeesManagePage';
import personalInfoPage from '@/modules/personalInfo'; import personalInfoPage from '@/modules/personalInfo';
import UserManagePage from '@/modules/store-manege/UserManagePage'; import UserManagePage from '@/modules/store-manage/UserManagePage';
import StoreDecorationPage from '@/modules/store-manege/StoreDecorationPage'; import StoreDecorationPage from '@/modules/store-manage/StoreDecorationPage';
import CourseCatalogPage from '@/modules/store-manege/CourseCatalogPage'; import CourseCatalogPage from '@/modules/store-manage/CourseCatalogPage';
import LiveCoursePage from '@/modules/course-manage/LiveCoursePage'; import LiveCoursePage from '@/modules/course-manage/LiveCoursePage';
import AddLivePage from '@/modules/course-manage/AddLive' import AddLivePage from '@/modules/course-manage/AddLive'
import DataList from '@/modules/course-manage/DataList/DataList'; import DataList from '@/modules/course-manage/DataList/DataList';
......
src/routes/config/menuList.tsx
...@@ -51,6 +51,16 @@ export const menuList: any = [ ...@@ -51,6 +51,16 @@ export const menuList: any = [
groupName: "店铺装修", groupName: "店铺装修",
groupCode: "ShopDecoration", groupCode: "ShopDecoration",
link: '/store-decoration' link: '/store-decoration'
},
{
groupName: "H5店铺",
groupCode: "ShopDecorationH5",
link: '/store-decoration/h5'
},
{
groupName: "网页端店铺",
groupCode: "ShopDecorationWeb",
link: '/store-decoration/web'
} }
] ]
}, },
......
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