Skip to content

X
xiaomai-cloud-class-web
Commit 95fb2f4f by zhujian
Options

'fixed'

parent 93970161
Showing with 67 additions and 49 deletions
package.json
...@@ -64,6 +64,7 @@ ...@@ -64,6 +64,7 @@
"mini-css-extract-plugin": "0.9.0", "mini-css-extract-plugin": "0.9.0",
"moment": "^2.27.0", "moment": "^2.27.0",
"optimize-css-assets-webpack-plugin": "5.0.3", "optimize-css-assets-webpack-plugin": "5.0.3",
"photoclip": "^3.4.8",
"pnp-webpack-plugin": "1.6.4", "pnp-webpack-plugin": "1.6.4",
"postcss-flexbugs-fixes": "4.1.0", "postcss-flexbugs-fixes": "4.1.0",
"postcss-loader": "3.0.0", "postcss-loader": "3.0.0",
......
src/index.html
...@@ -37,10 +37,6 @@ ...@@ -37,10 +37,6 @@
Learn how to configure a non-root public URL by running `npm run build`. Learn how to configure a non-root public URL by running `npm run build`.
--> -->
<title>小麦云课堂</title> <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> <script type="text/javascript" charset="utf-8" src="//g.alicdn.com/sd/ncpc/nc.js?t=2015052012"></script>
</head> </head>
......
src/modules/store-manage/StoreH5DecorationTab.jsx
...@@ -10,6 +10,7 @@ ...@@ -10,6 +10,7 @@
import React from "react"; import React from "react";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import _ from "underscore"; import _ from "underscore";
import PhotoClip from 'photoclip'
import { Table, Modal, message, Button } from "antd"; import { Table, Modal, message, Button } from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons"; import { QuestionCircleOutlined } from "@ant-design/icons";
import StoreService from "@/domains/store-domain/storeService"; import StoreService from "@/domains/store-domain/storeService";
...@@ -53,6 +54,8 @@ class StoreWebDecoration extends React.Component { ...@@ -53,6 +54,8 @@ class StoreWebDecoration extends React.Component {
}; };
} }
timer = null
componentDidMount() { componentDidMount() {
this.getStoreDecorationList(); this.getStoreDecorationList();
} }
...@@ -126,14 +129,14 @@ class StoreWebDecoration extends React.Component { ...@@ -126,14 +129,14 @@ class StoreWebDecoration extends React.Component {
}; };
handleToAddStoreDecoration = () => { handleToAddStoreDecoration = () => {
if(this.state.storeDecorationlist.length >=5){ if (this.state.storeDecorationlist.length >= 5) {
message.info("最多可添加5条"); message.info("最多可添加5条");
return; return;
} }
this.setState({ this.setState({
showSelectFileModal: true, showSelectFileModal: true,
choosedBannerId:"" choosedBannerId: ""
}); });
}; };
...@@ -211,6 +214,7 @@ class StoreWebDecoration extends React.Component { ...@@ -211,6 +214,7 @@ class StoreWebDecoration extends React.Component {
const { folderName } = imageFile; const { folderName } = imageFile;
const fileName = const fileName =
window.random_string(16) + folderName.slice(folderName.lastIndexOf(".")); window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this;
this.setState( this.setState(
{ {
visible: true, visible: true,
...@@ -219,20 +223,36 @@ class StoreWebDecoration extends React.Component { ...@@ -219,20 +223,36 @@ class StoreWebDecoration extends React.Component {
setTimeout(() => { setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal"); const okBtnDom = document.querySelector("#headPicModal");
const viewImgDom = document.querySelector("#H5-preview-url-box"); const viewImgDom = document.querySelector("#H5-preview-url-box");
const options = { const options = {
size: [500, 172], size: [500, 172],
rotateFree: false, // rotateFree: false,
ok: okBtnDom, ok: okBtnDom,
view: viewImgDom, // view: viewImgDom,this.setState()
maxZoom: 3, maxZoom: 3,
style: { style: {
jpgFillColor: "transparent", jpgFillColor: "transparent",
}, },
done: (dataUrl) => { done: function (dataUrl) {
const cutImageBlob = this.convertBase64UrlToBlob(dataUrl); clearTimeout(self.timer);
this.setState({ self.timer = setTimeout(() => {
cutImageBlob if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
console.log(this.scale(), 'scale')
const _dataUrl = this.clip()
const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
self.setState({
cutImageBlob,
dataUrl: _dataUrl,
rotate: this.rotate(),
scale: this.scale()
})
}
}, 500)
const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
self.setState({
cutImageBlob,
dataUrl
}) })
setTimeout(() => { setTimeout(() => {
cutFlag = false; cutFlag = false;
...@@ -241,29 +261,29 @@ class StoreWebDecoration extends React.Component { ...@@ -241,29 +261,29 @@ class StoreWebDecoration extends React.Component {
fail: (failInfo) => { fail: (failInfo) => {
console.log("failInfo-----", failInfo); console.log("failInfo-----", failInfo);
}, },
loadComplete: (img) => { loadComplete: function (img) {
// 手动触发截取图片，第一次图片有偏差，需要两次 console.log('hhhh')
this.refs.headPicModal.click(); setTimeout(() => {
setTimeout(()=>{ const _dataUrl = this.clip()
this.refs.headPicModal.click(); self.setState({
},100) dataUrl: _dataUrl,
})
}, 100)
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);
photoclip.load(imageFile.ossUrl); _photoclip.load(imageFile.ossUrl);
console.log("photoclip-222", photoclip); console.log("photoclip-222", _photoclip);
this.setState({ this.setState({
photoclip, photoclip: _photoclip,
}); });
} else { } else {
this.state.photoclip.clear(); this.state.photoclip.clear();
this.state.photoclip.load(imageFile.ossUrl); this.state.photoclip.load(imageFile.ossUrl);
} }
}, 200); }, 200);
} }
); );
...@@ -276,10 +296,10 @@ class StoreWebDecoration extends React.Component { ...@@ -276,10 +296,10 @@ class StoreWebDecoration extends React.Component {
this.setState({ this.setState({
addBannerPath, addBannerPath,
visible: false visible: false
},()=>{ }, () => {
this.state.choosedBannerId this.state.choosedBannerId
? this.editStoreBanner() ? this.editStoreBanner()
: this.addStoreBanner(); : this.addStoreBanner();
}); });
} }
); );
...@@ -443,7 +463,9 @@ class StoreWebDecoration extends React.Component { ...@@ -443,7 +463,9 @@ 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>
<div id="H5-preview-url-box"></div> <div id="H5-preview-url-box">
<img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
</div>
</div> </div>
</div> </div>
</Modal> </Modal>
......
src/modules/store-manage/StoreWebDecorationTab.jsx
...@@ -11,6 +11,7 @@ import React from "react"; ...@@ -11,6 +11,7 @@ import React from "react";
import { withRouter } from "react-router-dom"; import { withRouter } from "react-router-dom";
import _ from "underscore"; import _ from "underscore";
import { Table, Modal, message, Button } from "antd"; import { Table, Modal, message, Button } from "antd";
import PhotoClip from 'photoclip'
import { QuestionCircleOutlined } from "@ant-design/icons"; import { QuestionCircleOutlined } from "@ant-design/icons";
import StoreService from "@/domains/store-domain/storeService"; import StoreService from "@/domains/store-domain/storeService";
import { import {
...@@ -59,7 +60,7 @@ class StoreWebDecoration extends React.Component { ...@@ -59,7 +60,7 @@ class StoreWebDecoration extends React.Component {
getStoreDecorationList = () => { getStoreDecorationList = () => {
StoreService.getStoreDecorationList(this.state.query).then((res) => { StoreService.getStoreDecorationList(this.state.query).then((res) => {
const data = _.map(res.result, (item,index) => { const data = _.map(res.result, (item, index) => {
item.index = index; item.index = index;
item.key = index; item.key = index;
return item; return item;
...@@ -126,13 +127,13 @@ class StoreWebDecoration extends React.Component { ...@@ -126,13 +127,13 @@ class StoreWebDecoration extends React.Component {
}; };
handleToAddStoreDecoration = () => { handleToAddStoreDecoration = () => {
if(this.state.storeDecorationlist.length >=5){ if (this.state.storeDecorationlist.length >= 5) {
message.info("最多可添加5条"); message.info("最多可添加5条");
return; return;
} }
this.setState({ this.setState({
showSelectFileModal: true, showSelectFileModal: true,
choosedBannerId:"" choosedBannerId: ""
}); });
}; };
...@@ -222,20 +223,19 @@ class StoreWebDecoration extends React.Component { ...@@ -222,20 +223,19 @@ class StoreWebDecoration extends React.Component {
const options = { const options = {
size: [500, 73], size: [500, 73],
rotateFree: false, rotateFree: false,
ok: [okBtnDom,viewImgDom], ok: [okBtnDom, viewImgDom],
view: viewImgDom, // view: viewImgDom,
maxZoom: 3, maxZoom: 3,
style: { style: {
jpgFillColor: "transparent", jpgFillColor: "transparent",
}, },
done: (dataUrl) => { done: (dataUrl) => {
console.log(dataUrl)
const cutImageBlob = this.convertBase64UrlToBlob(dataUrl); const cutImageBlob = this.convertBase64UrlToBlob(dataUrl);
this.setState({ this.setState({
cutImageBlob cutImageBlob,
dataUrl
}) })
setTimeout(() => {
cutFlag = false;
}, 2000);
}, },
fail: (failInfo) => { fail: (failInfo) => {
console.log("failInfo-----", failInfo); console.log("failInfo-----", failInfo);
...@@ -243,10 +243,7 @@ class StoreWebDecoration extends React.Component { ...@@ -243,10 +243,7 @@ class StoreWebDecoration extends React.Component {
}, },
loadComplete: (img) => { loadComplete: (img) => {
// 手动触发截取图片，第一次图片有偏差，需要两次 // 手动触发截取图片，第一次图片有偏差，需要两次
this.refs.headPicModal.click();
setTimeout(()=>{
this.refs.headPicModal.click();
},100)
}, },
}; };
if (!this.state.photoclip) { if (!this.state.photoclip) {
...@@ -272,10 +269,10 @@ class StoreWebDecoration extends React.Component { ...@@ -272,10 +269,10 @@ class StoreWebDecoration extends React.Component {
this.setState({ this.setState({
addBannerPath, addBannerPath,
visible: false visible: false
},()=>{ }, () => {
this.state.choosedBannerId this.state.choosedBannerId
? this.editStoreBanner() ? this.editStoreBanner()
: this.addStoreBanner(); : this.addStoreBanner();
}); });
} }
); );
...@@ -306,7 +303,7 @@ class StoreWebDecoration extends React.Component { ...@@ -306,7 +303,7 @@ class StoreWebDecoration extends React.Component {
this.getStoreDecorationList(); this.getStoreDecorationList();
}); });
}; };
addStoreBanner = () => { addStoreBanner = () => {
const { addBannerPath } = this.state; const { addBannerPath } = this.state;
const params = { const params = {
...@@ -441,7 +438,9 @@ class StoreWebDecoration extends React.Component { ...@@ -441,7 +438,9 @@ 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>
<div id="preview-url-box"></div> <div id="preview-url-box">
<img src={this.state.dataUrl} alt="" />
</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