Skip to content

X
xiaomai-cloud-class-web
Commit 89929c93 by wufan
Options

feat:web移动banner

parent 8349d5fb
Showing with 84 additions and 51 deletions
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-21 18:11:07
* @LastEditTime: 2020-12-22 10:12:13
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -32,6 +32,9 @@ export function addStoreBanner(params: object) {
export function editStoreBanner(params: object) {
return Service.Hades("public/hades/editStoreBanner", params);
}
export function moveBannerSequence(params: object) {
return Service.Hades("public/hades/moveBannerSequence", 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-21 18:10:52
* @LastEditTime: 2020-12-22 10:11:57
* @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee, getCourseCatalogList, getAllSonCategory, addCourseCategory, delCourseCategory, editCourseCategory, deleteStoreDecorationList, addStoreBanner, editStoreBanner } from '@/data-source/store/request-apis';
import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee, getCourseCatalogList, getAllSonCategory, addCourseCategory, delCourseCategory, editCourseCategory, deleteStoreDecorationList, addStoreBanner, editStoreBanner, moveBannerSequence } from '@/data-source/store/request-apis';
export default class StoreService {
// 获取员工列表
......@@ -57,6 +57,10 @@ export default class StoreService {
static editStoreBanner(params: any) {
return editStoreBanner(params);
}
// 移动店铺banner列表
static moveBannerSequence(params: any) {
return moveBannerSequence(params);
}
// 获取课程分类列表
static getCourseCatalogList(params: any) {
......
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 19:42:53
* @LastEditTime: 2020-12-22 10:17:11
* @Description: web店铺banner页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
......@@ -23,8 +23,8 @@ 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';
import Upload from '@/core/upload';
import "./StoreDecorationPage.less";
import Upload from "@/core/upload";
const { confirm } = Modal;
const DragHandle = sortableHandle(() => (
......@@ -42,26 +42,26 @@ class StoreWebDecoration extends React.Component {
super(props);
this.state = {
storeDecorationlist: [
{
id: "1111",
bannerPath: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
index: 0,
key: "0",
name: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
},
{
id: "222",
bannerPath: "https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg",
index: 1,
key: "1",
name: "校长",
},
{
id: "333",
bannerPath: "https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg",
index: 2,
key: "2",
},
// {
// id: "1111",
// bannerPath: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
// index: 0,
// key: "0",
// name: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
// },
// {
// id: "222",
// bannerPath: "https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg",
// index: 1,
// key: "1",
// name: "校长",
// },
// {
// id: "333",
// bannerPath: "https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg",
// index: 2,
// key: "2",
// },
],
query: {
storeId: User.getStoreId(),
......@@ -80,8 +80,13 @@ class StoreWebDecoration extends React.Component {
getStoreDecorationList = () => {
StoreService.getStoreDecorationList(this.state.query).then((res) => {
const data = _.map(res.result, (item,index) => {
item.index = index;
item.key = index;
return item;
});
this.setState({
storeDecorationlist: res.result,
storeDecorationlist: data,
});
});
};
......@@ -150,7 +155,7 @@ class StoreWebDecoration extends React.Component {
handleReplaceDecoration = (record) => {
this.setState({
showSelectFileModal: true,
choosedBannerId: record.id
choosedBannerId: record.id,
});
};
......@@ -186,8 +191,16 @@ class StoreWebDecoration extends React.Component {
oldIndex,
newIndex
).filter((el) => !!el);
console.log("Sorted items: ", newData);
this.setState({ storeDecorationlist: newData });
this.setState(
{
storeDecorationlist: newData,
newSequence: storeDecorationlist[newIndex].sequence,
storeBannerId: storeDecorationlist[oldIndex].id,
},
() => {
this.moveBannerSequence();
}
);
}
};
......@@ -230,7 +243,7 @@ class StoreWebDecoration extends React.Component {
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const viewImgDom = document.querySelector('#preview-url-box');
const viewImgDom = document.querySelector("#preview-url-box");
const options = {
size: [500, 73],
......@@ -242,9 +255,7 @@ class StoreWebDecoration extends React.Component {
jpgFillColor: "transparent",
},
done: (dataUrl) => {
console.log("dataUrl-----", dataUrl);
const cutImage = this.convertBase64UrlToBlob(dataUrl);
console.log("cutImage-----",cutImage);
this.getSignature(cutImage, fileName);
setTimeout(() => {
cutFlag = false;
......@@ -252,19 +263,18 @@ class StoreWebDecoration extends React.Component {
},
fail: (failInfo) => {
console.log("failInfo-----", failInfo);
},
loadComplete:(img)=>{
console.log("img---",img,img.src);
loadComplete: (img) => {
this.refs.headPicModal.click();
this.setState({
previewUrl: img.src
})
}
previewUrl: img.src,
});
},
};
if (!this.state.photoclip) {
const photoclip = new PhotoClip("#headPicModal", options);
photoclip.load(imageFile.ossUrl);
console.log("photoclip-222",photoclip);
console.log("photoclip-222", photoclip);
this.setState({
photoclip,
});
......@@ -272,23 +282,24 @@ class StoreWebDecoration extends React.Component {
this.state.photoclip.clear();
this.state.photoclip.load(imageFile.ossUrl);
}
},200);
}, 200);
}
);
};
//获取resourceId
getSignature = (blob, fileName) => {
const { choosedBannerId } = this.state;
Upload.uploadBlobToOSS(blob, 'avatar' + (new Date()).valueOf()).then((addBannerPath) => {
this.setState({
addBannerPath
})
});
getSignature = (blob) => {
Upload.uploadBlobToOSS(blob, "avatar" + new Date().valueOf()).then(
(addBannerPath) => {
this.setState({
addBannerPath,
});
}
);
};
editStoreBanner = () => {
const { previewUrl, addBannerPath, choosedBannerId} = this.state;
const { previewUrl, addBannerPath, choosedBannerId } = this.state;
const params = {
bannerPath: addBannerPath,
storeBannerId: choosedBannerId,
......@@ -301,8 +312,20 @@ class StoreWebDecoration extends React.Component {
});
};
moveBannerSequence = () => {
const { newSequence, storeBannerId } = this.state;
const params = {
sequence: newSequence,
storeBannerId: storeBannerId,
// storeId: User.getStoreId(),
termType: "WEB_ADMIN",
};
StoreService.moveBannerSequence(params).then((res) => {
this.getStoreDecorationList();
});
};
addStoreBanner = () => {
const { previewUrl, addBannerPath} = this.state;
const { previewUrl, addBannerPath } = this.state;
const params = {
bannerPath: addBannerPath,
storeId: User.getStoreId(),
......@@ -414,7 +437,9 @@ class StoreWebDecoration extends React.Component {
this.refs.hiddenBtn.click();
}
this.setState({ visible: false });
this.state.choosedBannerId ? this.editStoreBanner(): this.addStoreBanner();
this.state.choosedBannerId
? this.editStoreBanner()
: this.addStoreBanner();
}}
>
确定
......@@ -424,6 +449,7 @@ class StoreWebDecoration extends React.Component {
<div className="clip-box">
<div
id="headPicModal"
ref="headPicModal"
style={{
width: "500px",
height: "430px",
......
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