Skip to content

X
xiaomai-cloud-class-web
Commit 91ef81b8 by zhujian Committed by zhangleyuan
Options

'fixed'

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