feat:更换裁剪dom

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 14:24:15
+ * @LastEditTime: 2020-12-21 18:11:07
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -29,6 +29,9 @@ export function deleteStoreDecorationList(params: object) {
 export function addStoreBanner(params: object) {
   return Service.Hades("public/hades/addStoreBanner", params);
 }
+export function editStoreBanner(params: object) {
+  return Service.Hades("public/hades/editStoreBanner", 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 14:24:23
+ * @LastEditTime: 2020-12-21 18:10:52
  * @Description: Description
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
-import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee, getCourseCatalogList, getAllSonCategory, addCourseCategory, delCourseCategory, editCourseCategory, deleteStoreDecorationList, addStoreBanner } from '@/data-source/store/request-apis';
+import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee, getCourseCatalogList, getAllSonCategory, addCourseCategory, delCourseCategory, editCourseCategory, deleteStoreDecorationList, addStoreBanner, editStoreBanner } from '@/data-source/store/request-apis';
 
 export default class StoreService {
   // 获取员工列表 
@@ -49,10 +49,14 @@ export default class StoreService {
     return deleteStoreDecorationList(params);
   }
 
-  // 删除店铺banner列表 
+  // 添加店铺banner列表 
   static addStoreBanner(params: any) {
     return addStoreBanner(params);
   }
+  // 替换店铺banner列表 
+  static editStoreBanner(params: any) {
+    return editStoreBanner(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 17:32:22
+ * @LastEditTime: 2020-12-21 19:42:53
  * @Description: web店铺banner页面
  * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
  */
@@ -123,7 +123,7 @@ class StoreWebDecoration extends React.Component {
             <div className="operation">
               <span
                 className="edit"
-                onClick={() => handleReplaceDecoration(record)}
+                onClick={() => this.handleReplaceDecoration(record)}
               >
                 替换
               </span>
@@ -147,7 +147,12 @@ class StoreWebDecoration extends React.Component {
     });
   };
 
-  handleReplaceDecoration = (record) => {};
+  handleReplaceDecoration = (record) => {
+    this.setState({
+      showSelectFileModal: true,
+      choosedBannerId: record.id
+    });
+  };
 
   handleDeleteDecoration = (record) => {
     StoreService.deleteStoreDecorationList({
@@ -224,7 +229,7 @@ class StoreWebDecoration extends React.Component {
       },
       () => {
         setTimeout(() => {
-          const okBtnDom = document.querySelector("#clipBtn");
+          const okBtnDom = document.querySelector("#headPicModal");
           const viewImgDom = document.querySelector('#preview-url-box');
 
           const options = {
@@ -258,10 +263,8 @@ class StoreWebDecoration extends React.Component {
           };
           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,
             });
@@ -276,18 +279,28 @@ class StoreWebDecoration extends React.Component {
 
   //获取resourceId
   getSignature = (blob, fileName) => {
-
+    const { choosedBannerId } = this.state;
     Upload.uploadBlobToOSS(blob, 'avatar' + (new Date()).valueOf()).then((addBannerPath) => {
       this.setState({
-        visible: false,
         addBannerPath
-      },()=>{
-        this.addStoreBanner();
-        this.getStoreDecorationList();
       })
     });
   };
 
+  editStoreBanner = () => {
+    const { previewUrl, addBannerPath, choosedBannerId} = this.state;
+    const params = {
+      bannerPath: addBannerPath,
+      storeBannerId: choosedBannerId,
+      termType: "WEB_ADMIN",
+    };
+    StoreService.editStoreBanner(params).then((res) => {
+      message.success("替换成功");
+      this.getStoreDecorationList();
+      // this.state.photoclip.destroy();
+    });
+  };
+
   addStoreBanner = () => {
     const { previewUrl, addBannerPath} = this.state;
     const params = {
@@ -297,6 +310,7 @@ class StoreWebDecoration extends React.Component {
     };
     StoreService.addStoreBanner(params).then((res) => {
       message.success("添加成功");
+      this.getStoreDecorationList();
     });
   };
 
@@ -399,6 +413,8 @@ class StoreWebDecoration extends React.Component {
                   cutFlag = true;
                   this.refs.hiddenBtn.click();
                 }
+                this.setState({ visible: false });
+                this.state.choosedBannerId ? this.editStoreBanner(): this.addStoreBanner();
               }}
             >
               确定
@@ -417,7 +433,7 @@ class StoreWebDecoration extends React.Component {
             <div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
             <div className="preview-img">
               <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>