feat:banner裁剪

3c560827 · wufan · efd1c0f0 · 3c560827 · 3c560827 · 3c560827
Commit 3c560827 authored Dec 21, 2020 by wufan
8 changed files
--- a/src/core/global.less
+++ b/src/core/global.less
@@ -1611,7 +1611,7 @@ input:focus {
  font-size: 22px !important;
  line-height: 22px !important;
  float: left !important;
-  color: #FC9C6B !important;
+  color: #FFB714 !important;
  margin-right: 16px !important;
 }

--- 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-17 15:21:44
+ * @LastEditTime: 2020-12-21 14:24:15
 * @Description: Description
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -26,6 +26,9 @@ export function getStoreDecorationList(params: object) {
 export function deleteStoreDecorationList(params: object) {
  return Service.Hades("public/hades/delStoreBanner", params);
 }
+export function addStoreBanner(params: object) {
+  return Service.Hades("public/hades/addStoreBanner", 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-17 15:24:51
+ * @LastEditTime: 2020-12-21 14:24:23
 * @Description: Description
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
-import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee,getCourseCatalogList,getAllSonCategory,addCourseCategory,delCourseCategory,editCourseCategory, deleteStoreDecorationList } from '@/data-source/store/request-apis';
+import { getEmployeeList, getUserList, getStoreDecorationList, getStoreRole, addEmployee, editEmployee, deleteEmployee, getCourseCatalogList, getAllSonCategory, addCourseCategory, delCourseCategory, editCourseCategory, deleteStoreDecorationList, addStoreBanner } from '@/data-source/store/request-apis';
 export default class StoreService {
  // 获取员工列表 
@@ -44,11 +44,16 @@ export default class StoreService {
    return getStoreDecorationList(params);
  }
-  // 获取店铺banner列表 
+  // 删除店铺banner列表 
  static deleteStoreDecorationList(params: any) {
    return deleteStoreDecorationList(params);
  }
+  // 删除店铺banner列表 
+  static addStoreBanner(params: any) {
+    return addStoreBanner(params);
+  }
  // 获取课程分类列表 
  static getCourseCatalogList(params: any) {
    return getCourseCatalogList(params);
@@ -65,5 +70,5 @@ export default class StoreService {
  static delCourseCategory(params: any) {
    return delCourseCategory(params);
  }
 }
\ No newline at end of file
--- a/src/index.html
+++ b/src/index.html
@@ -2,7 +2,7 @@
 * @Author: 吴文洁
 * @Date: 2020-08-24 12:20:57
 * @LastEditors: wufan
- * @LastEditTime: 2020-12-21 10:51:02
+ * @LastEditTime: 2020-12-21 15:19:16
 * @Description: 
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 -->
@@ -37,7 +37,11 @@
      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>
  <body>

--- a/src/modules/store-manage/StoreDecorationPage.less
+++ b/src/modules/store-manage/StoreDecorationPage.less
@@ -3,7 +3,7 @@
    display: none;
  }
  .ant-table-title {
-      display: none;
+    display: none;
  }
  .banner-setting {
@@ -24,7 +24,7 @@
  }
  .banner-thumbnail {
    width: 230px;
-    height: 79px;    
+    height: 79px;
  }
  .index-num {
    width: 30px;
@@ -33,12 +33,12 @@
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #999999;
-    line-height: 33px;    
+    line-height: 33px;
  }
  .drag-icon {
    font-size: 24px;
    line-height: 18px;
-    color: #999999;    
+    color: #999999;
  }
  .operation {
@@ -55,14 +55,33 @@
    background: #fafafa;
    border: 1px solid #ccc;
  }
  .row-dragging td {
    padding: 16px;
    visibility: hidden;
  }
  .row-dragging .drag-visible {
    visibility: visible !important;
    opacity: 1 !important;
  }
 }
+.clip-box {
+  display: flex;
+  justify-content: space-between;
+  .preview-img {
+    width: 500px;
+    margin-left: 24px;
+    .title {
+      font-size: 14px;
+      color: #999;
+      line-height: 20px;
+      margin-bottom: 13px;
+    }
+    .preview-url {
+      width: 500px;
+      height: 73px;
+      background: #E6E6E6;        
+    }
+  }
+}
--- a/src/modules/store-manage/StoreDecorationPage.tsx
+++ b/src/modules/store-manage/StoreDecorationPage.tsx
 /*
 * @Author: wufan
 * @Date: 2020-11-30 10:47:38
- * @LastEditors: zhangleyuan
+ * @LastEditors: wufan
- * @LastEditTime: 2020-12-14 18:24:09
+ * @LastEditTime: 2020-12-21 14:12:44
 * @Description: 员工管理页面
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -26,7 +26,7 @@ interface StoreDecoprationProps {
 }
 function StoreDecorationPage(props: StoreDecoprationProps) {
-  const [currentTab, setCurrentTab] = useState("h5");
+  const [currentTab, setCurrentTab] = useState("web");
  const { match } = props;
  return (

--- a/src/modules/store-manage/StoreH5DecorationTab.jsx
+++ b/src/modules/store-manage/StoreH5DecorationTab.jsx
@@ -2,7 +2,7 @@
 * @Author: wufan
 * @Date: 2020-11-30 10:47:38
 * @LastEditors: wufan
- * @LastEditTime: 2020-12-21 10:43:50
+ * @LastEditTime: 2020-12-21 10:57:53
 * @Description: h5店铺banner页面
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -24,6 +24,7 @@ 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';
 const { confirm } = Modal;
@@ -56,6 +57,7 @@ function StoreH5Decoration(props) {
  });
  const [showSelectFileModal, setShowSelectFileModal] = useState(false);
  const [diskList, setDiskList] = useState([]);
+  const [visible, setVisible] = useState(false);
  const DragHandle = sortableHandle(() => (
    <MenuOutlined
@@ -187,6 +189,7 @@ function StoreH5Decoration(props) {
      size: folderSize,
    };
    console.log("liveCourseWarmMedia", liveCourseWarmMedia);
  }
  const DraggableContainer = (props) => (
@@ -245,6 +248,30 @@ function StoreH5Decoration(props) {
        }}
        onSelect={handleSelectVideo}
      />
+       <Modal
+          title="设置图片"
+          width={1080}
+          visible={visible}
+          onCancel={() => { setVisible(false)}}
+          footer={[
+            <Button key="reUpload" onClick={() => { setShowSelectFileModal(true);
+            }}>重新上传</Button>,
+            <Button key="submit" type="primary" onClick={() => {
+              if (!cutFlag) {
+                cutFlag = true;
+                this.refs.hiddenBtn.click();
+              }
+            }}>
+              确定
+            </Button>,
+          ]}>
+          <div id="headPicModal" style={{
+            width: '502px',
+            height: '283px',
+            'marginBottom': 0
+          }}></div>
+          <div id="clipBtn" style={{ display: 'none' }} ref="hiddenBtn"></div>
+        </Modal>
    </div>
  );
 }

--- 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 10:28:03
+ * @LastEditTime: 2020-12-21 15:30:05
 * @Description: web店铺banner页面
 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
 */
@@ -21,8 +21,9 @@ import {
 import { MenuOutlined } from "@ant-design/icons";
 import arrayMove from "array-move";
 import "./StoreDecorationPage.less";
-import User from '@/common/js/user';
+import User from "@/common/js/user";
-import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
+import SelectPrepareFileModal from "@/modules/prepare-lesson/modal/SelectPrepareFileModal";
+import './StoreDecorationPage.less';
 const { confirm } = Modal;
 const DragHandle = sortableHandle(() => (
@@ -40,30 +41,34 @@ class StoreWebDecoration extends React.Component {
    this.state = {
      storeDecorationlist: [
        {
-          id: '1111',
+          id: "1111",
          bannerPath: "https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png",
          index: 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",
          index: 1,
-          key: '1',
+          key: "1",
-          name: '校长'
+          name: "校长",
        },
        {
-          id: '333',
+          id: "333",
          bannerPath: "https://image.xiaomaiketang.com/xm/pBcJdYkmNN.jpg",
          index: 2,
-          key: '2'
+          key: "2",
-        }
+        },
      ],
      query: {
        storeId: User.getStoreId(),
-        termType: 'WEB_ADMIN'
+        termType: "WEB_ADMIN",
      },
+      showSelectFileModal: false,
+      diskList: [],
+      photoclip: null,
+      preview: ""
    };
  }
@@ -101,7 +106,7 @@ class StoreWebDecoration extends React.Component {
        title: "banner",
        dataIndex: "bannerPath",
        key: "bannerPath",
-        className: 'drag-visible',
+        className: "drag-visible",
        render: (val) => {
          return <img src={val} alt="banner" className="banner-thumbnail" />;
        },
@@ -110,7 +115,7 @@ class StoreWebDecoration extends React.Component {
        title: "操作",
        dataIndex: "operation",
        width: "20%",
-        className: 'drag-visible',
+        className: "drag-visible",
        render: (val, record) => {
          return (
            <div className="operation">
@@ -134,13 +139,18 @@ class StoreWebDecoration extends React.Component {
    ];
  };
+  handleToAddStoreDecoration = () => {
+    this.setState({
+      showSelectFileModal: true,
+    });
+  };
  handleReplaceDecoration = (record) => {};
  handleDeleteDecoration = (record) => {
    StoreService.deleteStoreDecorationList({
-        "storeBannerId": record.id,
+      storeBannerId: record.id,
-        "termType": "WEB_ADMIN"
+      termType: "WEB_ADMIN",
    }).then((res) => {
      message.success("已删除");
      this.getStoreDecorationList();
@@ -150,7 +160,9 @@ class StoreWebDecoration extends React.Component {
  handleDeleteDecorationConfirm = (record) => {
    return confirm({
      title: "你确定要删除这个banner吗？",
-      icon: <QuestionCircleOutlined />,
+      icon: (
+        <span className="icon iconfont default-confirm-icon">&#xe834;</span>
+      ),
      okText: "删除",
      cancelText: "取消",
      onOk: () => {
@@ -181,8 +193,126 @@ class StoreWebDecoration extends React.Component {
    return <SortableItem index={index} {...restProps} />;
  };
+  // 选择暖场资源
+  handleSelectVideo = (file) => {
+    this.setState({
+      showSelectFileModal: false,
+    });
+    const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
+    const liveCourseWarmMedia = {
+      contentType: "WARMUP",
+      mediaType: folderFormat === "MP4" ? "VIDEO" : "PICTURE",
+      mediaContent: resourceId,
+      mediaUrl: ossUrl,
+      mediaName: folderName,
+      size: folderSize,
+    };
+    console.log("file", file);
+    this.uploadImage(file);
+  };
+  //上传图片
+  uploadImage = (imageFile) => {
+    const { folderName } = imageFile;
+    const fileName =
+      window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
+    this.setState(
+      {
+        visible: true,
+      },
+      () => {
+        setTimeout(() => {
+          const okBtnDom = document.querySelector("#clipBtn");
+          const options = {
+            size: [500, 73],
+            rotateFree: false,
+            ok: okBtnDom,
+            maxZoom: 3,
+            style: {
+              jpgFillColor: "transparent",
+            },
+            done: (dataUrl) => {
+              console.log("dataUrl-----", dataUrl);
+              const cutImage = this.convertBase64UrlToBlob(dataUrl);
+              // this.getSignature(cutImage, fileName);
+              setTimeout(() => {
+                cutFlag = false;
+              }, 2000);
+            },
+          };
+          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,
+            });
+          } else {
+            this.state.photoclip.clear();
+            this.state.photoclip.load(imageFile.ossUrl);
+          }
+        },200);
+      }
+    );
+  };
+  //获取resourceId
+  getSignature = (cutImage, fileName) => {
+    const { swiperImages, choosedFlag } = this.state;
+    // const params = {
+    //   fileName,
+    //   instId: window.currentUserInstInfo.instId,
+    // };
+    // UploadOss.uploadBlobToMFSOSS("sales/public/businessMicroWebsite/getUploadSignature", params, cutImage, fileName ).then((res) => {
+    //   const imgAddress = {
+    //     resourceId: res.resourceId,
+    //     imageUrl: res.url,
+    //     instId: window.currentUserInstInfo.instId,
+    //   };
+    //   swiperImages.push(imgAddress);
+    //   this.setState({
+    //     visible: false,
+    //     swiperImages
+    //   }, () => {
+    //     this.changeImageList(swiperImages, choosedFlag);
+    //   });
+    // });
+  };
+  addStoreBanner = () => {
+    const { previewUrl } = this.state;
+    const params = {
+      bannerPath: previewUrl,
+      storeId: User.getStoreId(),
+      termType: "WEB_ADMIN",
+    };
+    StoreService.addStoreBanner(params).then((res) => {
+      message.success("添加成功");
+    });
+  };
+  // base64转换成blob
+  convertBase64UrlToBlob = (urlData) => {
+    const bytes = window.atob(urlData.split(",")[1]);
+    const ab = new ArrayBuffer(bytes.length);
+    const ia = new Uint8Array(ab);
+    for (let i = 0; i < bytes.length; i++) {
+      ia[i] = bytes.charCodeAt(i);
+    }
+    return new Blob([ab], { type: "image/png" });
+  };
  render() {
-    const { storeDecorationlist } = this.state;
+    const {
+      storeDecorationlist,
+      showSelectFileModal,
+      diskList,
+      previewUrl,
+      visible,
+    } = this.state;
    const DraggableContainer = (props) => (
      <SortableContainer
        useDragHandle
@@ -226,6 +356,64 @@ class StoreWebDecoration extends React.Component {
            bordered
          />
        </div>
+        <SelectPrepareFileModal
+          operateType="select"
+          accept="image/jpeg,image/png,image/jpg"
+          selectTypeList={["JPG", "JPEG", "PNG"]}
+          tooltip="支持文件类型：jpg、jpeg、png"
+          isOpen={showSelectFileModal}
+          diskList={diskList}
+          onClose={() => {
+            this.setState({ showSelectFileModal: false });
+          }}
+          onSelect={this.handleSelectVideo}
+        />
+        <Modal
+          title="设置图片"
+          width={1080}
+          visible={visible}
+          onCancel={() => {
+            this.setState({ visible: false });
+          }}
+          footer={[
+            <Button
+              key="back"
+              onClick={() => {
+                this.setState({ visible: false });
+              }}
+            >
+              重新上传
+            </Button>,
+            <Button
+              key="submit"
+              type="primary"
+              onClick={() => {
+                if (!cutFlag) {
+                  cutFlag = true;
+                  this.refs.hiddenBtn.click();
+                }
+              }}
+            >
+              确定
+            </Button>,
+          ]}
+        >
+          <div className="clip-box">
+            <div
+              id="headPicModal"
+              style={{
+                width: "500px",
+                height: "430px",
+                marginBottom: 0,
+              }}
+            ></div>
+            <div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
+            <div className="preview-img">
+              <div className="title">效果预览</div>
+              <img src={previewUrl} alt="图片预览" className="preview-url"/>
+            </div>
+          </div>
+        </Modal>
      </div>
    );
  }