Skip to content

X
xiaomai-cloud-class-web
Commit 40ddb88c by wufan
Options

feat:完成h5店铺和web店铺banner列表页面布局

parent 63f4a0a8
Showing with 253 additions and 214 deletions
src/modules/store-manage/StoreDecorationPage.less
...@@ -51,4 +51,18 @@ ...@@ -51,4 +51,18 @@
cursor: pointer; cursor: pointer;
} }
} }
.row-dragging {
background: #fafafa;
border: 1px solid #ccc;
}
.row-dragging td {
padding: 16px;
visibility: hidden;
}
.row-dragging .drag-visible {
visibility: visible !important;
opacity: 1 !important;
}
} }
src/modules/store-manage/StoreH5DecorationTab.jsx
...@@ -2,8 +2,8 @@ ...@@ -2,8 +2,8 @@
* @Author: wufan * @Author: wufan
* @Date: 2020-11-30 10:47:38 * @Date: 2020-11-30 10:47:38
* @LastEditors: wufan * @LastEditors: wufan
* @LastEditTime: 2020-12-14 15:19:21 * @LastEditTime: 2020-12-14 16:48:13
* @Description: 员工管理页面 * @Description: h5店铺banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -29,20 +29,24 @@ const { confirm } = Modal; ...@@ -29,20 +29,24 @@ const { confirm } = Modal;
function StoreH5Decoration(props) { function StoreH5Decoration(props) {
const [storeDecorationlist, setStoreDecorationlist] = useState([ const [storeDecorationlist, setStoreDecorationlist] = useState([
{ {
di:1111, id:1111,
banner:'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png' banner:'https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png',
index:0
}, },
{ {
di:1111, di:1111,
banner:'https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg' banner:'https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg',
index: 1
}, },
{ {
di:1111, di:1111,
banner:'https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg' banner:'https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg',
index: 2
}, },
{ {
di:1111, di:1111,
banner:'https://image.xiaomaiketang.com/xm/p7hG4exMFf.png' banner:'https://image.xiaomaiketang.com/xm/p7hG4exMFf.png',
index: 3
} }
]); ]);
const [query, setQuery] = useState({ const [query, setQuery] = useState({
...@@ -202,7 +206,7 @@ function StoreH5Decoration(props) { ...@@ -202,7 +206,7 @@ function StoreH5Decoration(props) {
pagination={false} pagination={false}
dataSource={storeDecorationlist} dataSource={storeDecorationlist}
columns={parseColumn()} columns={parseColumn()}
rowKey={(item) => item.id} rowKey={(item) => item.index}
components={{ components={{
body: { body: {
wrapper: DraggableContainer, wrapper: DraggableContainer,
......
src/modules/store-manage/StoreWebDecorationTab.jsx 0 → 100644
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2020-12-14 16:56:23
* @Description: web店铺banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
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";
const { confirm } = Modal;
const DragHandle = sortableHandle(() => (
<MenuOutlined
style={{ cursor: "pointer", color: "#999" }}
className="drag-icon"
/>
));
const SortableItem = sortableElement((props) => <tr {...props} />);
const SortableContainer = sortableContainer((props) => <tbody {...props} />);
class StoreWebDecoration extends React.Component {
constructor(props) {
super(props);
this.state = {
storeDecorationlist: [
{
id: '1111',
banner: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
index: 0,
key: "0",
name: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png"
},
{
id: '222',
banner: "https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg",
index: 1,
key: '1',
name: '校长'
},
{
id: '333',
banner: "https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg",
index: 2,
key: '2'
}
],
query: {
current: 0,
size: 10,
},
};
}
componentDidMount() {
// this.getStoreDecorationList();
}
getStoreDecorationList = () => {
let _query = _.clone(query);
_query.current = query.current + 1;
StoreService.getStoreDecorationList(_query).then((res) => {
console.log(res.result.records);
this.setState({
storeDecorationlist: res.result.records,
});
});
};
parseColumn = () => {
return [
{
title: "Sort",
dataIndex: "sort",
width: 30,
className: "drag-visible",
render: () => <DragHandle />,
},
{
title: "index",
dataIndex: "index",
key: "index",
width: 20,
className: 'drag-visible',
render: (val, record, index) => {
return <div className="index-num">{index + 1}</div>;
},
},
{
title: "banner",
dataIndex: "banner",
key: "banner",
className: 'drag-visible',
render: (val) => {
return <img src={val} alt="banner" className="banner-thumbnail" />;
},
},
{
title: "操作",
dataIndex: "operation",
width: "20%",
className: 'drag-visible',
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>
);
},
},
];
};
handleReplaceDecoration = (record) => {};
handleDeleteDecoration = (record) => {};
handleDeleteDecorationConfirm = (record) => {
return confirm({
title: "你确定要删除这个banner吗？",
icon: <QuestionCircleOutlined />,
okText: "删除",
cancelText: "取消",
onOk: () => {
this.handleDeleteDecoration(record);
},
});
};
onSortEnd = ({ oldIndex, newIndex }) => {
const { storeDecorationlist } = this.state;
if (oldIndex !== newIndex) {
const newData = arrayMove(
[].concat(storeDecorationlist),
oldIndex,
newIndex
).filter((el) => !!el);
console.log("Sorted items: ", newData);
this.setState({ storeDecorationlist: newData });
}
};
DraggableBodyRow = ({ className, style, ...restProps }) => {
const { storeDecorationlist } = this.state;
// function findIndex base on Table rowKey props and should always be a right array index
const index = storeDecorationlist.findIndex(
(x) => x.index === restProps["data-row-key"]
);
return <SortableItem index={index} {...restProps} />;
};
render() {
const { storeDecorationlist } = this.state;
const DraggableContainer = (props) => (
<SortableContainer
useDragHandle
helperClass="row-dragging"
onSortEnd={this.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={() => {
this.handleToAddStoreDecoration();
}}
type="primary"
className="add-show-btn"
>
添加Banner
</Button>
</div>
<div className="box-body">
<Table
size={"middle"}
pagination={false}
dataSource={storeDecorationlist}
columns={this.parseColumn()}
rowKey={(item) => item.index}
components={{
body: {
wrapper: DraggableContainer,
row: this.DraggableBodyRow,
},
}}
bordered
/>
</div>
</div>
);
}
}
export default withRouter(StoreWebDecoration);
src/modules/store-manage/StoreWebDecorationTab.tsx deleted 100644 → 0
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2020-12-14 11:44:31
* @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,
Row,
Col,
Input,
DatePicker,
Button,
} from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";
import StoreService from "@/domains/store-domain/storeService";
import "./StoreDecorationPage.less";
import moment from "moment";
const { confirm } = Modal;
const { Search } = Input;
const { RangePicker } = DatePicker;
declare var window: any;
interface RecordTypes {
storeUserId: string;
role: string;
}
function StoreWebDecoration() {
const [storeDecorationlist, setStoreDecorationlist] = useState([
{
name: "赵云",
phone: "18767118672",
role: "0",
storeUserId: "",
},
{
name: "吕布",
phone: "18767118672",
role: "0",
storeUserId: "",
},
]);
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 [isModalOpen, setIsModalOpen] = useState(false);
const [isManager, setIsManager] = useState(true);
const [isNormal, setIsNormal] = useState(true);
const [choosedItem, setChooseItem] = useState({});
useEffect(() => {
// getStoreDecorationList();
}, [query]);
function getStoreDecorationList() {
let _query = _.clone(query);
_query.current = query.current + 1;
StoreService.getStoreDecorationList(_query).then((res: any) => {
console.log(res.result.records);
setStoreDecorationlist(res.result.records);
setTotal(res.result.total);
});
}
function handleReplaceDecoration(record: RecordTypes) {}
function handleDeleteDecoration(record: RecordTypes) {}
function handleDeleteDecorationConfirm(record: RecordTypes) {
return confirm({
title: "你确定要删除这个banner吗？",
icon: <QuestionCircleOutlined />,
okText: "删除",
cancelText: "取消",
onOk: () => {
handleDeleteDecoration(record);
},
});
}
function parseColumn() {
return [
{
title: "用户姓名",
dataIndex: "name",
render: (val: string) => {
return (
<div className="coupon-info">
<span className="title">{val}</span>
</div>
);
},
},
{
title: "手机号",
dataIndex: "phone",
key: "phone",
render: (val: string) => {
return <div>{val}</div>;
},
},
{
title: "注册时间",
dataIndex: "registerDate",
key: "registerDate",
render: (val: string) => {
return <div>{moment(val).format("YYYY-MM-DD HH:mm:ss")}</div>;
},
},
{
title: "操作",
dataIndex: "operation",
render: (val: string, record: RecordTypes) => {
return record.role === "" || record.role === "1" ? (
<div className="no-operate">-</div>
) : (
<div className="operation">
<span
className="edit"
onClick={() => handleReplaceDecoration(record)}
>
替换
</span>
<span className="divider-line">{" | "}</span>
<span
className="delete"
onClick={() => handleDeleteDecoration(record)}
>
删除
</span>
</div>
);
},
},
];
}
function handleToAddStoreDecoration() {}
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张，拖动可排序。建议尺寸1232x212像素。
</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: any) => item.id}
bordered
/>
</div>
<div className="box-footer">
<PageControl
current={query.current}
pageSize={query.size}
total={total}
toPage={(page) => {
const queryStates = _.clone(query);
queryStates.current = page;
setQuery(queryStates);
}}
/>
</div>
</div>
);
}
export default withRouter(StoreWebDecoration);
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