Skip to content

X
xiaomai-cloud-class-web
Commit 3c560827 by wufan
Options

feat:banner裁剪

parent efd1c0f0
Showing with 275 additions and 29 deletions
src/core/global.less
......@@ -1611,7 +1611,7 @@ input:focus {
font-size: 22px !important;
line-height: 22px !important;
float: left !important;
color: #FC9C6B !important;
color: #FFB714 !important;
margin-right: 16px !important;
}
......
src/data-source/store/request-apis.ts
......@@ -2,7 +2,7 @@
* @Author: wufan
* @Date: 2020-11-25 18:25:02
* @LastEditors: wufan
* @LastEditTime: 2020-12-17 15:21:44
* @LastEditTime: 2020-12-21 14:24:15
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -26,6 +26,9 @@ export function getStoreDecorationList(params: object) {
export function deleteStoreDecorationList(params: object) {
return Service.Hades("public/hades/delStoreBanner", params);
}
export function addStoreBanner(params: object) {
return Service.Hades("public/hades/addStoreBanner", params);
}
export function addEmployee(params: object) {
return Service.Hades("public/hades/addStoreUser", params);
......
src/domains/store-domain/storeService.ts
......@@ -2,11 +2,11 @@
* @Author: wufan
* @Date: 2020-11-25 18:25:02
* @LastEditors: wufan
* @LastEditTime: 2020-12-17 15:24:51
* @LastEditTime: 2020-12-21 14:24:23
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee,getCourseCatalogList,getAllSonCategory,addCourseCategory,delCourseCategory,editCourseCategory, deleteStoreDecorationList } from '@/data-source/store/request-apis';
import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee, getCourseCatalogList, getAllSonCategory, addCourseCategory, delCourseCategory, editCourseCategory, deleteStoreDecorationList, addStoreBanner } from '@/data-source/store/request-apis';
export default class StoreService {
// 获取员工列表
......@@ -44,11 +44,16 @@ export default class StoreService {
return getStoreDecorationList(params);
}
// 获取店铺banner列表
// 删除店铺banner列表
static deleteStoreDecorationList(params: any) {
return deleteStoreDecorationList(params);
}
// 删除店铺banner列表
static addStoreBanner(params: any) {
return addStoreBanner(params);
}
// 获取课程分类列表
static getCourseCatalogList(params: any) {
return getCourseCatalogList(params);
......
src/index.html
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-08-24 12:20:57
* @LastEditors: wufan
* @LastEditTime: 2020-12-21 10:51:02
* @LastEditTime: 2020-12-21 15:19:16
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
-->
......@@ -37,7 +37,11 @@
Learn how to configure a non-root public URL by running `npm run build`.
-->
<title>小麦云课堂</title>
<script type="text/javascript" src="https://image.xiaomaiketang.com/xm/iscroll-zoom-min.js"></script>
<script type="text/javascript" src="https://image.xiaomaiketang.com/xm/hammer.min.js"></script>
<script type="text/javascript" src="https://image.xiaomaiketang.com/xm/lrz.all.bundle.js"></script>
<script type="text/javascript" src="https://image.xiaomaiketang.com/xm/PhotoClip.js"></script>
<script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
</head>
<body>
......
src/modules/store-manage/StoreDecorationPage.less
......@@ -66,3 +66,22 @@
opacity: 1 !important;
}
}
.clip-box {
display: flex;
justify-content: space-between;
.preview-img {
width: 500px;
margin-left: 24px;
.title {
font-size: 14px;
color: #999;
line-height: 20px;
margin-bottom: 13px;
}
.preview-url {
width: 500px;
height: 73px;
background: #E6E6E6;
}
}
}
src/modules/store-manage/StoreDecorationPage.tsx
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-14 18:24:09
* @LastEditors: wufan
* @LastEditTime: 2020-12-21 14:12:44
* @Description: 员工管理页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -26,7 +26,7 @@ interface StoreDecoprationProps {
}
function StoreDecorationPage(props: StoreDecoprationProps) {
const [currentTab, setCurrentTab] = useState("h5");
const [currentTab, setCurrentTab] = useState("web");
const { match } = props;
return (
......
src/modules/store-manage/StoreH5DecorationTab.jsx
......@@ -2,7 +2,7 @@
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2020-12-21 10:43:50
* @LastEditTime: 2020-12-21 10:57:53
* @Description: h5店铺banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -24,6 +24,7 @@ import arrayMove from "array-move";
import "./StoreDecorationPage.less";
import User from "@/common/js/user";
import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal";
import './StoreDecorationPage.less';
const { confirm } = Modal;
......@@ -56,6 +57,7 @@ function StoreH5Decoration(props) {
});
const [showSelectFileModal, setShowSelectFileModal] = useState(false);
const [diskList, setDiskList] = useState([]);
const [visible, setVisible] = useState(false);
const DragHandle = sortableHandle(() => (
<MenuOutlined
......@@ -187,6 +189,7 @@ function StoreH5Decoration(props) {
size: folderSize,
};
console.log("liveCourseWarmMedia", liveCourseWarmMedia);
}
const DraggableContainer = (props) => (
......@@ -245,6 +248,30 @@ function StoreH5Decoration(props) {
}}
onSelect={handleSelectVideo}
/>
<Modal
title="设置图片"
width={1080}
visible={visible}
onCancel={() => { setVisible(false)}}
footer={[
<Button key="reUpload" onClick={() => { setShowSelectFileModal(true);
}}>重新上传</Button>,
<Button key="submit" type="primary" onClick={() => {
if (!cutFlag) {
cutFlag = true;
this.refs.hiddenBtn.click();
}
}}>
确定
</Button>,
]}>
<div id="headPicModal" style={{
width: '502px',
height: '283px',
'marginBottom': 0
}}></div>
<div id="clipBtn" style={{ display: 'none' }} ref="hiddenBtn"></div>
</Modal>
</div>
);
}
......
src/modules/store-manage/StoreWebDecorationTab.jsx
......@@ -2,7 +2,7 @@
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2020-12-21 10:28:03
* @LastEditTime: 2020-12-21 15:30:05
* @Description: web店铺banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -21,8 +21,9 @@ import {
import { MenuOutlined } from "@ant-design/icons";
import arrayMove from "array-move";
import "./StoreDecorationPage.less";
import User from '@/common/js/user';
import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
import User from "@/common/js/user";
import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal";
import './StoreDecorationPage.less';
const { confirm } = Modal;
const DragHandle = sortableHandle(() => (
......@@ -40,30 +41,34 @@ class StoreWebDecoration extends React.Component {
this.state = {
storeDecorationlist: [
{
id: '1111',
id: "1111",
bannerPath: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
index: 0,
key: "0",
name: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png"
name: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
},
{
id: '222',
id: "222",
bannerPath: "https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg",
index: 1,
key: '1',
name: '校长'
key: "1",
name: "校长",
},
{
id: '333',
id: "333",
bannerPath: "https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg",
index: 2,
key: '2'
}
key: "2",
},
],
query: {
storeId: User.getStoreId(),
termType: 'WEB_ADMIN'
termType: "WEB_ADMIN",
},
showSelectFileModal: false,
diskList: [],
photoclip: null,
preview: ""
};
}
......@@ -101,7 +106,7 @@ class StoreWebDecoration extends React.Component {
title: "banner",
dataIndex: "bannerPath",
key: "bannerPath",
className: 'drag-visible',
className: "drag-visible",
render: (val) => {
return <img src={val} alt="banner" className="banner-thumbnail" />;
},
......@@ -110,7 +115,7 @@ class StoreWebDecoration extends React.Component {
title: "操作",
dataIndex: "operation",
width: "20%",
className: 'drag-visible',
className: "drag-visible",
render: (val, record) => {
return (
<div className="operation">
......@@ -134,13 +139,18 @@ class StoreWebDecoration extends React.Component {
];
};
handleToAddStoreDecoration = () => {
this.setState({
showSelectFileModal: true,
});
};
handleReplaceDecoration = (record) => {};
handleDeleteDecoration = (record) => {
StoreService.deleteStoreDecorationList({
"storeBannerId": record.id,
"termType": "WEB_ADMIN"
storeBannerId: record.id,
termType: "WEB_ADMIN",
}).then((res) => {
message.success("已删除");
this.getStoreDecorationList();
......@@ -150,7 +160,9 @@ class StoreWebDecoration extends React.Component {
handleDeleteDecorationConfirm = (record) => {
return confirm({
title: "你确定要删除这个banner吗？",
icon: <QuestionCircleOutlined />,
icon: (
<span className="icon iconfont default-confirm-icon">&#xe834;</span>
),
okText: "删除",
cancelText: "取消",
onOk: () => {
......@@ -181,8 +193,126 @@ class StoreWebDecoration extends React.Component {
return <SortableItem index={index} {...restProps} />;
};
// 选择暖场资源
handleSelectVideo = (file) => {
this.setState({
showSelectFileModal: false,
});
const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
const liveCourseWarmMedia = {
contentType: "WARMUP",
mediaType: folderFormat === "MP4" ? "VIDEO" : "PICTURE",
mediaContent: resourceId,
mediaUrl: ossUrl,
mediaName: folderName,
size: folderSize,
};
console.log("file", file);
this.uploadImage(file);
};
//上传图片
uploadImage = (imageFile) => {
const { folderName } = imageFile;
const fileName =
window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#clipBtn");
const options = {
size: [500, 73],
rotateFree: false,
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: (dataUrl) => {
console.log("dataUrl-----", dataUrl);
const cutImage = this.convertBase64UrlToBlob(dataUrl);
// this.getSignature(cutImage, fileName);
setTimeout(() => {
cutFlag = false;
}, 2000);
},
};
if (!this.state.photoclip) {
const photoclip = new PhotoClip("#headPicModal", options);
console.log("photoclip-111",photoclip);
photoclip.load(imageFile.ossUrl);
console.log("photoclip-222",photoclip);
console.log("imageFile.ossUrl",imageFile.ossUrl);
this.setState({
photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imageFile.ossUrl);
}
},200);
}
);
};
//获取resourceId
getSignature = (cutImage, fileName) => {
const { swiperImages, choosedFlag } = this.state;
// const params = {
// fileName,
// instId: window.currentUserInstInfo.instId,
// };
// UploadOss.uploadBlobToMFSOSS("sales/public/businessMicroWebsite/getUploadSignature", params, cutImage, fileName ).then((res) => {
// const imgAddress = {
// resourceId: res.resourceId,
// imageUrl: res.url,
// instId: window.currentUserInstInfo.instId,
// };
// swiperImages.push(imgAddress);
// this.setState({
// visible: false,
// swiperImages
// }, () => {
// this.changeImageList(swiperImages, choosedFlag);
// });
// });
};
addStoreBanner = () => {
const { previewUrl } = this.state;
const params = {
bannerPath: previewUrl,
storeId: User.getStoreId(),
termType: "WEB_ADMIN",
};
StoreService.addStoreBanner(params).then((res) => {
message.success("添加成功");
});
};
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/png" });
};
render() {
const { storeDecorationlist } = this.state;
const {
storeDecorationlist,
showSelectFileModal,
diskList,
previewUrl,
visible,
} = this.state;
const DraggableContainer = (props) => (
<SortableContainer
useDragHandle
......@@ -226,6 +356,64 @@ class StoreWebDecoration extends React.Component {
bordered
/>
</div>
<SelectPrepareFileModal
operateType="select"
accept="image/jpeg,image/png,image/jpg"
selectTypeList={["JPG", "JPEG", "PNG"]}
tooltip="支持文件类型：jpg、jpeg、png"
isOpen={showSelectFileModal}
diskList={diskList}
onClose={() => {
this.setState({ showSelectFileModal: false });
}}
onSelect={this.handleSelectVideo}
/>
<Modal
title="设置图片"
width={1080}
visible={visible}
onCancel={() => {
this.setState({ visible: false });
}}
footer={[
<Button
key="back"
onClick={() => {
this.setState({ visible: false });
}}
>
重新上传
</Button>,
<Button
key="submit"
type="primary"
onClick={() => {
if (!cutFlag) {
cutFlag = true;
this.refs.hiddenBtn.click();
}
}}
>
确定
</Button>,
]}
>
<div className="clip-box">
<div
id="headPicModal"
style={{
width: "500px",
height: "430px",
marginBottom: 0,
}}
></div>
<div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
<div className="preview-img">
<div className="title">效果预览</div>
<img src={previewUrl} alt="图片预览" className="preview-url"/>
</div>
</div>
</Modal>
</div>
);
}
......
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