feat:更换裁剪dom

f802bc34 · wufan · 3156f35f · f802bc34 · f802bc34 · f802bc34
Commit f802bc34 authored Dec 21, 2020 by wufan
Hide whitespace changes
Inline Side-by-side

Showing with 39 additions and 16 deletions

src/data-source/store/request-apis.ts
+4 -1

src/domains/store-domain/storeService.ts
+7 -3

src/modules/store-manage/StoreWebDecorationTab.jsx
+28 -12

No files found.
--- a/src/data-source/store/request-apis.ts
+++ b/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);

--- a/src/domains/store-domain/storeService.ts
+++ b/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) {

--- a/src/modules/store-manage/StoreWebDecorationTab.jsx
+++ b/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>