feat:web移动banner

89929c93 · wufan · 8349d5fb · 89929c93 · 89929c93 · 89929c93
Commit 89929c93 authored Dec 22, 2020 by wufan
Show whitespace changes
Inline Side-by-side

Showing with 82 additions and 49 deletions

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

src/domains/store-domain/storeService.ts
+6 -2

src/modules/store-manage/StoreWebDecorationTab.jsx
+72 -46

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 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);

--- 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 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) {

--- 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 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 "./StoreDecorationPage.less";
-import Upload from '@/core/upload';
+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",
+        //   id: "1111",
-          bannerPath: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
+        //   bannerPath: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
-          index: 0,
+        //   index: 0,
-          key: "0",
+        //   key: "0",
-          name: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
+        //   name: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
-        },
+        // },
-        {
+        // {
-          id: "222",
+        //   id: "222",
-          bannerPath: "https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg",
+        //   bannerPath: "https://image.xiaomaiketang.com/xm/CMyWNaDxbM.jpg",
-          index: 1,
+        //   index: 1,
-          key: "1",
+        //   key: "1",
-          name: "校长",
+        //   name: "校长",
-        },
+        // },
-        {
+        // {
-          id: "333",
+        //   id: "333",
-          bannerPath: "https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg",
+        //   bannerPath: "https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg",
-          index: 2,
+        //   index: 2,
-          key: "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(
-      this.setState({ storeDecorationlist: newData });
+        {
+          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)=>{
+            loadComplete: (img) => {
-              console.log("img---",img,img.src);
+              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) => {
+  getSignature = (blob) => {
-    const { choosedBannerId } = this.state;
+    Upload.uploadBlobToOSS(blob, "avatar" + new Date().valueOf()).then(
-    Upload.uploadBlobToOSS(blob, 'avatar' + (new Date()).valueOf()).then((addBannerPath) => {
+      (addBannerPath) => {
        this.setState({
-        addBannerPath
+          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",