Skip to content

X
xiaomai-cloud-class-web
Commit 3156f35f by wufan
Options

feat:完成web店铺banner上传

parent 3c560827
Showing with 39 additions and 26 deletions
src/modules/store-manage/StoreDecorationPage.less
...@@ -83,5 +83,10 @@ ...@@ -83,5 +83,10 @@
height: 73px; height: 73px;
background: #E6E6E6; background: #E6E6E6;
} }
#preview-url-box {
width: 500px;
height: 73px;
}
} }
} }
src/modules/store-manage/StoreWebDecorationTab.jsx
...@@ -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-12-21 15:30:05 * @LastEditTime: 2020-12-21 17:32:22
* @Description: web店铺banner页面 * @Description: web店铺banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -24,6 +24,7 @@ import "./StoreDecorationPage.less"; ...@@ -24,6 +24,7 @@ import "./StoreDecorationPage.less";
import User from "@/common/js/user"; import User from "@/common/js/user";
import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal"; import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal";
import './StoreDecorationPage.less'; import './StoreDecorationPage.less';
import Upload from '@/core/upload';
const { confirm } = Modal; const { confirm } = Modal;
const DragHandle = sortableHandle(() => ( const DragHandle = sortableHandle(() => (
...@@ -34,6 +35,7 @@ const DragHandle = sortableHandle(() => ( ...@@ -34,6 +35,7 @@ const DragHandle = sortableHandle(() => (
)); ));
const SortableItem = sortableElement((props) => <tr {...props} />); const SortableItem = sortableElement((props) => <tr {...props} />);
const SortableContainer = sortableContainer((props) => <tbody {...props} />); const SortableContainer = sortableContainer((props) => <tbody {...props} />);
let cutFlag = false;
class StoreWebDecoration extends React.Component { class StoreWebDecoration extends React.Component {
constructor(props) { constructor(props) {
...@@ -68,7 +70,7 @@ class StoreWebDecoration extends React.Component { ...@@ -68,7 +70,7 @@ class StoreWebDecoration extends React.Component {
showSelectFileModal: false, showSelectFileModal: false,
diskList: [], diskList: [],
photoclip: null, photoclip: null,
preview: "" preview: "",
}; };
} }
...@@ -223,10 +225,13 @@ class StoreWebDecoration extends React.Component { ...@@ -223,10 +225,13 @@ class StoreWebDecoration extends React.Component {
() => { () => {
setTimeout(() => { setTimeout(() => {
const okBtnDom = document.querySelector("#clipBtn"); const okBtnDom = document.querySelector("#clipBtn");
const viewImgDom = document.querySelector('#preview-url-box');
const options = { const options = {
size: [500, 73], size: [500, 73],
rotateFree: false, rotateFree: false,
ok: okBtnDom, ok: okBtnDom,
view: viewImgDom,
maxZoom: 3, maxZoom: 3,
style: { style: {
jpgFillColor: "transparent", jpgFillColor: "transparent",
...@@ -234,11 +239,22 @@ class StoreWebDecoration extends React.Component { ...@@ -234,11 +239,22 @@ class StoreWebDecoration extends React.Component {
done: (dataUrl) => { done: (dataUrl) => {
console.log("dataUrl-----", dataUrl); console.log("dataUrl-----", dataUrl);
const cutImage = this.convertBase64UrlToBlob(dataUrl); const cutImage = this.convertBase64UrlToBlob(dataUrl);
// this.getSignature(cutImage, fileName); console.log("cutImage-----",cutImage);
this.getSignature(cutImage, fileName);
setTimeout(() => { setTimeout(() => {
cutFlag = false; cutFlag = false;
}, 2000); }, 2000);
}, },
fail: (failInfo) => {
console.log("failInfo-----", failInfo);
},
loadComplete:(img)=>{
console.log("img---",img,img.src);
this.setState({
previewUrl: img.src
})
}
}; };
if (!this.state.photoclip) { if (!this.state.photoclip) {
const photoclip = new PhotoClip("#headPicModal", options); const photoclip = new PhotoClip("#headPicModal", options);
...@@ -259,33 +275,23 @@ class StoreWebDecoration extends React.Component { ...@@ -259,33 +275,23 @@ class StoreWebDecoration extends React.Component {
}; };
//获取resourceId //获取resourceId
getSignature = (cutImage, fileName) => { getSignature = (blob, fileName) => {
const { swiperImages, choosedFlag } = this.state;
// const params = {
// fileName,
// instId: window.currentUserInstInfo.instId,
// };
// UploadOss.uploadBlobToMFSOSS("sales/public/businessMicroWebsite/getUploadSignature", params, cutImage, fileName ).then((res) => { Upload.uploadBlobToOSS(blob, 'avatar' + (new Date()).valueOf()).then((addBannerPath) => {
// const imgAddress = { this.setState({
// resourceId: res.resourceId, visible: false,
// imageUrl: res.url, addBannerPath
// instId: window.currentUserInstInfo.instId, },()=>{
// }; this.addStoreBanner();
// swiperImages.push(imgAddress); this.getStoreDecorationList();
// this.setState({ })
// visible: false, });
// swiperImages
// }, () => {
// this.changeImageList(swiperImages, choosedFlag);
// });
// });
}; };
addStoreBanner = () => { addStoreBanner = () => {
const { previewUrl } = this.state; const { previewUrl, addBannerPath} = this.state;
const params = { const params = {
bannerPath: previewUrl, bannerPath: addBannerPath,
storeId: User.getStoreId(), storeId: User.getStoreId(),
termType: "WEB_ADMIN", termType: "WEB_ADMIN",
}; };
...@@ -380,6 +386,7 @@ class StoreWebDecoration extends React.Component { ...@@ -380,6 +386,7 @@ class StoreWebDecoration extends React.Component {
key="back" key="back"
onClick={() => { onClick={() => {
this.setState({ visible: false }); this.setState({ visible: false });
this.handleToAddStoreDecoration();
}} }}
> >
重新上传 重新上传
...@@ -410,7 +417,8 @@ class StoreWebDecoration extends React.Component { ...@@ -410,7 +417,8 @@ class StoreWebDecoration extends React.Component {
<div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div> <div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
<div className="preview-img"> <div className="preview-img">
<div className="title">效果预览</div> <div className="title">效果预览</div>
<img src={previewUrl} alt="图片预览" className="preview-url"/> <img src={previewUrl} alt="图片预览" className="preview-url" />
<div id="preview-url-box"></div>
</div> </div>
</div> </div>
</Modal> </Modal>
......
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