ydb-components-material 0.1.108 → 0.1.109

package/es/components/sign-file/index.scss

@@ -0,0 +1,420 @@
+.sign_file_main {
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  justify-content: space-between;
+  .sign_btn {
+    height: 40px;
+    border-radius: 50px;
+    opacity: 1;
+    width: 90%;
+    margin: 0 auto;
+    color: #fff;
+    font-size: 16px;
+    font-weight: 500;
+    text-align: center;
+    line-height: 40px;
+    background: linear-gradient(90deg, #73aeff 0%, #1678ff 100%);
+  }
+  .sign_file_item {
+    border-radius: 8px;
+    opacity: 1;
+    background: #F7F7F7;
+    padding: 12px;
+    width: 100%;
+
+    .file {
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+
+      .file_img {
+        width: 80px;
+        height: 80px;
+        border-radius: 4px;
+        position: relative;
+        border-radius: 8px;
+        position: relative;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        background: #fff;
+        font-size: 12px;
+        color: #666666;
+        flex-direction: column;
+
+        .filed {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+        }
+
+        .small_img {
+          width: 100%;
+
+        }
+
+        .add {
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          border: 1px dashed #BFDAFF;
+          border-radius: 4px;
+          width: 100%;
+          height: 100%;
+          .add_icon {
+            width: 14px;
+            margin-left: -5px;
+          }
+          color: #1678FF;
+        }
+
+        .del {
+          position: absolute;
+          width: 16px;
+          height: 16px;
+          top: -6px;
+          right: -6px;
+          z-index: 3;
+        }
+
+        .error_msg {
+          position: absolute;
+          top: 30px;
+          right: 22px;
+        }
+
+        .mask {
+          // display: none !important;
+          border-radius: 8px;
+          position: absolute;
+          top: 0;
+          left: 0;
+          width: 100%;
+          height: 100%;
+          // opacity: 0.5;
+          background: #2222227d;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          color: #fff;
+          z-index: 3;
+
+          .checked {
+            display: flex;
+            align-items: center;
+
+            img {
+              width: 14px;
+              height: 14px;
+              margin-right: 3px;
+            }
+          }
+        }
+      }
+
+      .blocks {
+        margin-right: auto;
+        margin-left: 20px;
+        height: 80px;
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        flex: 1;
+
+        .status {
+          display: flex;
+          gap: 12px;
+
+          .status_item {
+            width: 44px;
+            height: 20px;
+            border-radius: 4px;
+            background: #EFDEBD;
+            color: #C38A38;
+            font-size: 12px;
+            text-align: center;
+            line-height: 20px;
+          }
+        }
+
+        .btns {
+          display: flex;
+          gap: 24px;
+          font-size: 14px;
+          color: #1678FF;
+
+          .btn {
+            display: flex;
+            gap: 4px;
+          }
+        }
+      }
+
+
+      .operation {
+        display: flex;
+        flex-direction: column;
+        justify-content: space-between;
+        padding: 4px 0;
+        height: 80px;
+      }
+      .operation_pc {
+        display: flex;
+        flex-direction: row-reverse;
+        height: 80px;
+        align-items: end;
+      }
+      .btn {
+        display: flex;
+        flex-direction: row;
+        justify-content: end;
+
+        .img_btn {
+          margin-left: 8px;
+          width: 68px;
+          height: 26px;
+          border-radius: 4px;
+          opacity: 1;
+          box-sizing: border-box;
+          border: 1px solid #1678FF;
+          color: #1678FF;
+          font-size: 13px;
+          line-height: 26px;
+          text-align: center;
+          cursor: pointer;
+        }
+
+      }
+      .operation_btn {
+        cursor: pointer;
+        margin-left: 8px;
+        width: 68px;
+        height: 26px;
+        border-radius: 4px;
+        opacity: 1;
+        box-sizing: border-box;
+        background: linear-gradient(90deg, #73AEFF 0%, #1678FF 100%);
+        color: #fff;
+        font-size: 13px;
+        line-height: 26px;
+        text-align: center;
+      }
+    }
+
+    .file_item_bottom {
+      margin-top: 12px;
+      border-top: 1px solid #EAEAEA;
+      display: flex;
+      display: flex;
+      justify-content: space-evenly;
+      align-items: center;
+      padding-top: 12px;
+
+      .line {
+        width: 1px;
+        height: 20px;
+        background-color: #EAEAEA;
+      }
+
+      .icon_text {
+        display: flex;
+        align-items: center;
+        font-size: 14px;
+        color: #1678FF;
+
+        img {
+          width: 16px;
+          height: 11px;
+          margin-right: 5px;
+
+        }
+      }
+    }
+
+    .img_view {
+      position: absolute;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      background-color: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+
+      .close {
+        width: 17px;
+        height: 17px;
+        color: #fff;
+        position: absolute;
+        top: 40px;
+        right: 20px;
+      }
+
+      .view {
+        width: 100%;
+        height: auto;
+      }
+    }
+
+    .material_lib {
+      width: 100%;
+      height: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      z-index: 88;
+      background-color: rgba(0, 0, 0, 0.5);
+
+      .material_lib_content {
+        width: 100%;
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        background-color: #F5F5F5;
+        border-radius: 16px 16px 0px 0px;
+
+        .material_lib_title {
+          border-radius: 16px 16px 0px 0px;
+          background-color: #fff;
+          font-size: 16px;
+          color: #333333;
+          line-height: 54px;
+          text-align: center;
+        }
+
+        .tips {
+          padding: 12px;
+          background: #FFF6E8;
+          font-size: 14px;
+          line-height: 24px;
+          color: #F29655;
+          display: flex;
+          align-items: flex-start;
+
+          img {
+            width: 14px;
+            height: 14px;
+            margin-right: 8px;
+            margin-top: 5px;
+          }
+        }
+
+        .list {
+          padding: 12px 12px 0 12px;
+          width: 100%;
+          background-color: #F5F5F5;
+          // margin-bottom: 14px;
+          max-height: 300px;
+          overflow: auto;
+
+          .item {
+            padding: 16px 12px;
+            border-radius: 8px;
+            background: #FFF;
+            display: flex;
+            align-items: center;
+            color: #333333;
+            font-size: 14px;
+            width: 100%;
+            margin-bottom: 12px;
+
+            .preview_icon {
+              margin-left: auto;
+              display: flex;
+              align-items: center;
+              color: #1678FF;
+
+              img {
+                width: 16px;
+                margin-right: 4px;
+              }
+            }
+          }
+        }
+
+        .more {
+          color: #1678FF;
+          text-align: center;
+          height: 30px;
+          line-height: 30px;
+          margin-bottom: 70px;
+          background-color: #F5F5F5;
+        }
+
+        .bottom_btn {
+          background-color: #fff;
+          height: 64px;
+          display: flex;
+          align-items: center;
+          justify-content: space-around;
+          position: fixed;
+          bottom: 0;
+          left: 0;
+          right: 0;
+
+          .btn {
+            width: 169px;
+            height: 40px;
+            border-radius: 50px;
+            font-size: 16px;
+            line-height: 40px;
+            text-align: center;
+          }
+
+          .cancel {
+            background-color: #fff;
+            border: 1px solid #E7E7E7;
+            color: #333;
+          }
+
+          .ok {
+            background: linear-gradient(90deg, #73AEFF 0%, #1678FF 100%);
+            color: #fff;
+          }
+        }
+      }
+    }
+
+    .preview {
+      width: 100%;
+      height: 100%;
+      position: fixed;
+      top: 0;
+      left: 0;
+      background: rgba(0, 0, 0, 0.5);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      z-index: 99;
+      .close {
+        position: absolute;
+        top: 20px;
+        right: 20px;
+      }
+    }
+
+    .sealPage {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 99;
+      background: rgba(0, 0, 0, 0.5);
+    }
+    .sign_page {
+      position: fixed;
+      top: 0;
+      left: 0;
+      width: 100%;
+      height: 100%;
+      z-index: 99;
+      background: rgba(0, 0, 0, 0.5);
+    }
+
+  }
+}

package/es/components/sign-file/seal.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+declare function SealPage(props: any): JSX.Element;
+export default SealPage;

package/es/components/sign-file/seal.js

@@ -0,0 +1,220 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useEffect, useState, useRef } from 'react';
+import { initSealPageMethod } from "./sealUtil";
+import { signFileDownApi, getSignFileApi, fileUploadApi } from "../../api";
+// import { uploadFilePromise, dataURLtoBlob } from './file.js'
+
+function SealPage(props) {
+  var userInfo = props.userInfo,
+    file = props.file,
+    getSealRes = props.getSealRes,
+    handleClose = props.handleClose,
+    tokenTY = props.tokenTY,
+    baseUrl = props.baseUrl,
+    env = props.env,
+    isPC = props.isPC,
+    accessToken = props.accessToken;
+  var _useState = useState(''),
+    srcUrl = _useState[0],
+    setSrcUrl = _useState[1];
+  var _useState2 = useState(''),
+    orderId = _useState2[0],
+    setOrderId = _useState2[1];
+  var timerRef = useRef(null);
+  var elementRef = useRef(null);
+  var handleRes = /*#__PURE__*/function () {
+    var _ref = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      var fileObj, res, pageUrl, orderIdVal;
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            console.log('file', file, userInfo);
+            fileObj = file; // 有旧的 URL 说明是重新签章 旧的是原始的空白的 重新签需要签在原始的空白文件
+            if (file.oldUrl) {
+              fileObj.url = file.oldUrl;
+            }
+            // 传递配置参数给工具函数
+            _context.next = 1;
+            return initSealPageMethod(fileObj, userInfo, {
+              tokenTY: tokenTY,
+              baseUrl: baseUrl,
+              env: env,
+              isPC: isPC,
+              accessToken: accessToken
+            });
+          case 1:
+            res = _context.sent;
+            if (res) {
+              _context.next = 2;
+              break;
+            }
+            handleClose();
+            return _context.abrupt("return");
+          case 2:
+            pageUrl = res.pageUrl, orderIdVal = res.orderId;
+            console.log('pageUrl', pageUrl);
+            setSrcUrl(pageUrl);
+            setOrderId(orderIdVal);
+            // console.log(res)
+          case 3:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function handleRes() {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  // 将返回的文件重新上传
+  var uploadNewFile = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2(fileData) {
+      var params, uploadRes, finalFile;
+      return _regeneratorRuntime.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            console.log('fileData', fileData);
+            params = {
+              materiaBase: 'data:application/pdf;base64,' + fileData,
+              open: true
+            };
+            console.log('params', params);
+            _context2.next = 1;
+            return fileUploadApi(params, {
+              tokenTY: tokenTY,
+              baseUrl: baseUrl,
+              env: env,
+              isPC: isPC,
+              accessToken: accessToken
+            });
+          case 1:
+            uploadRes = _context2.sent;
+            console.log('重新上传的文件', uploadRes);
+            if (uploadRes.code === 200) {
+              handleClose();
+              finalFile = _extends({
+                name: file.name,
+                url: uploadRes.data.fileUrl,
+                oldUrl: file.url,
+                isSealed: true
+              }, uploadRes.data);
+              getSealRes(finalFile);
+            }
+          case 2:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function uploadNewFile(_x) {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+
+  // 下载文件
+  var signFileDown = function signFileDown(filePath) {
+    signFileDownApi({
+      fileUrl: filePath
+    }, {
+      tokenTY: tokenTY,
+      baseUrl: baseUrl,
+      env: env,
+      isPC: isPC,
+      accessToken: accessToken
+    }).then(function (res) {
+      if (res.code === 200) {
+        uploadNewFile(res.data);
+      }
+    });
+  };
+
+  // 电子签章 - 移动端签批 获取移动端签章结果 (文件地址)
+  var getSignFileFun = function getSignFileFun() {
+    // uni.showLoading({ title: '加载中' })
+
+    var params = {
+      orderId: orderId
+    };
+    getSignFileApi(params, {
+      tokenTY: tokenTY,
+      baseUrl: baseUrl,
+      env: env,
+      isPC: isPC,
+      accessToken: accessToken
+    }).then(function (res) {
+      if (!res) {
+        return;
+      }
+      console.log(res, '签章之后的数据');
+      var _res$data = res.data,
+        signStatus = _res$data.signStatus,
+        signFiles = _res$data.signFiles;
+      if (signStatus === 6) {
+        // 签署成功
+        handleClearInterval();
+        if (signFiles && signFiles.length) {
+          // 下载该文件
+          signFileDown(signFiles[0].filePath);
+        }
+      }
+      // uni.hideLoading()
+    })["catch"](function (err) {
+      console.log(err);
+    });
+  };
+  var handleClearInterval = function handleClearInterval() {
+    clearInterval(timerRef.current);
+    timerRef.current = null;
+  };
+  useEffect(function () {
+    if (orderId) {
+      handleClearInterval();
+      timerRef.current = setInterval(function () {
+        getSignFileFun();
+      }, 3000);
+    }
+    return function () {
+      handleClearInterval();
+    };
+  }, [orderId]);
+  var handleTouchMove = function handleTouchMove(e) {
+    e.preventDefault(); // 只有在 passive: false 时才能调用
+    console.log('Touch move');
+  };
+  var handleTouchStart = function handleTouchStart(e) {
+    console.log('Touch start - passive', e.touches[0].clientX);
+  };
+  useEffect(function () {
+    var element = elementRef.current;
+    if (!element) return;
+
+    // 添加被动事件监听器
+    element.addEventListener('touchstart', handleTouchStart, {
+      passive: true
+    });
+    element.addEventListener('touchmove', handleTouchMove, {
+      passive: false // 如果需要 preventDefault
+    });
+    return function () {
+      element.removeEventListener('touchstart', handleTouchStart);
+      element.removeEventListener('touchmove', handleTouchMove);
+    };
+  }, []);
+  useEffect(function () {
+    handleRes();
+  }, [userInfo, file]);
+  return /*#__PURE__*/React.createElement("div", {
+    className: "sealPage",
+    ref: elementRef
+  }, /*#__PURE__*/React.createElement("iframe", {
+    src: srcUrl,
+    id: "iframe",
+    frameborder: "0",
+    height: "100%",
+    width: "100%"
+  }));
+}
+export default SealPage;