ydb-components-material 0.1.102 → 0.1.104

package/es/components/guide/index.js

@@ -0,0 +1,440 @@
+import _Button from "@alifd/next/es/button";
+import _Dialog from "@alifd/next/es/dialog";
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import _Message from "@alifd/next/es/message";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import * as React from 'react';
+import { setStorageItem } from "./_utils";
+import GuideTabs from "./compoents/guideTabs";
+import EventInfo from "./compoents/eventInfo";
+import Materials from "./compoents/materials/materials";
+import BasicInfo from "./compoents/basicInfo";
+import ProcessImg from "./compoents/processImg";
+import Accept from "./compoents/accept";
+import Places from "./compoents/places";
+import Result from "./compoents/result";
+import topBg from "./imgs/commonBg.png";
+import commentIcon from "./imgs/comment.png";
+import shareIcon from "./imgs/share.png";
+import downloadIcon from "./imgs/download.png";
+import "./index.scss";
+
+// TODO: html2canvas and jsPDF are available as dependencies
+// import html2canvas from 'html2canvas';
+// import { jsPDF } from 'jspdf';
+
+// TODO: API imports not available
+// import { getCityNameApi } from '@/api/business.js'
+// import { getTyEventDetailApi, getFormValueApi } from '@/api/tyBusiness.js'
+
+var Guide = function Guide(_ref) {
+  var onNextStep = _ref.onNextStep,
+    _ref$cantNext = _ref.cantNext,
+    cantNext = _ref$cantNext === void 0 ? false : _ref$cantNext,
+    standardItemId = _ref.standardItemId,
+    taskHandleItem = _ref.taskHandleItem,
+    accessToken = _ref.accessToken,
+    eventInfoProp = _ref.eventInfo,
+    acctType = _ref.acctType,
+    agentInfo = _ref.agentInfo,
+    applicationId = _ref.applicationId,
+    formData = _ref.formData,
+    formFieldNames = _ref.formFieldNames,
+    itemSituationRowUid = _ref.itemSituationRowUid,
+    workNo = _ref.workNo,
+    finalMaterials = _ref.finalMaterials,
+    filterMaterials = _ref.filterMaterials,
+    stepList = _ref.stepList,
+    declarationAppToken = _ref.declarationAppToken,
+    declarePage = _ref.declarePage,
+    baseUrl = _ref.baseUrl,
+    download = _ref.download,
+    situationResRechange = _ref.situationResRechange;
+  var _React$useState = React.useState(false),
+    pageLoading = _React$useState[0];
+  var _React$useState2 = React.useState(true),
+    canHandle = _React$useState2[0];
+  var _React$useState3 = React.useState(0),
+    tabIndex = _React$useState3[0],
+    setTabIndex = _React$useState3[1];
+  var _React$useState4 = React.useState(false),
+    popShow = _React$useState4[0],
+    setPopShow = _React$useState4[1];
+  var _React$useState5 = React.useState(false),
+    modalShow = _React$useState5[0],
+    setModalShow = _React$useState5[1];
+  var _React$useState6 = React.useState(false),
+    isAgree = _React$useState6[0],
+    setIsAgree = _React$useState6[1];
+  var _React$useState7 = React.useState(''),
+    agreementPrompt = _React$useState7[0],
+    setAgreementPrompt = _React$useState7[1];
+  var _React$useState8 = React.useState([]),
+    userAgreementList = _React$useState8[0],
+    setUserAgreementList = _React$useState8[1];
+  var _React$useState9 = React.useState(''),
+    userAgreement = _React$useState9[0],
+    setUserAgreement = _React$useState9[1];
+  var tabList = [{
+    label: '材料清单'
+  }, {
+    label: '事项信息'
+  }, {
+    label: '办事流程'
+  }, {
+    label: '受理条件'
+  }, {
+    label: '办事大厅'
+  }, {
+    label: '成效分析'
+  }];
+  React.useEffect(function () {
+    initUserNotice();
+
+    // TODO: getFormValueApi call – API not available
+    // this.getFormValueFun()
+
+    // Set page title
+    document.title = '办事指南';
+
+    // Auto fetch event info if params provided
+    if (standardItemId && taskHandleItem && accessToken) {
+      setStorageItem('declarationAppTokenTY', accessToken);
+      // TODO: getTyEventDetailApi(standardItemId, taskHandleItem)
+    }
+
+    // TODO: if (opt.isAfterFace) this.$initNextStep('立即办理')
+  }, []);
+
+  // ============ 用户协议 ============
+  var initUserNotice = function initUserNotice() {
+    var _eventInfo$applicatio, _eventInfo$applicatio2;
+    var eventInfo = eventInfoProp;
+    if (!eventInfo) return;
+    if ((_eventInfo$applicatio = eventInfo.applicationUserAgreementBO) !== null && _eventInfo$applicatio !== void 0 && _eventInfo$applicatio.agreementContent) {
+      setAgreementPrompt(eventInfo.applicationUserAgreementBO.agreementPrompt);
+      setUserAgreementList(eventInfo.applicationUserAgreementBO.agreementContent);
+      setIsAgree(false);
+    } else {
+      setIsAgree(true);
+    }
+    if ((_eventInfo$applicatio2 = eventInfo.applicationUserNoticeBO) !== null && _eventInfo$applicatio2 !== void 0 && _eventInfo$applicatio2.userNotice) {
+      var userNotice = {
+        agreementName: '用户协议',
+        agreementDetail: eventInfo.applicationUserNoticeBO.userNotice
+      };
+      setUserAgreementList(function (prev) {
+        return [userNotice].concat(prev);
+      });
+    }
+  };
+  var showAgree = function showAgree(item) {
+    setModalShow(false);
+    setUserAgreement(item.agreementDetail);
+    setPopShow(true);
+  };
+  var yesAgree = function yesAgree() {
+    setIsAgree(true);
+    setModalShow(false);
+    handleEvent();
+  };
+
+  // ============ 按钮操作 ============
+  var prepStep = function prepStep() {
+    // TODO: this.$initNextStep('上一步')
+    onNextStep === null || onNextStep === void 0 ? void 0 : onNextStep('上一步');
+  };
+  var goComment = function goComment() {
+    // TODO: uni.navigateTo({ url: '/pagesDeclare/guide/comment' })
+    _Message.show({
+      type: 'help',
+      content: '评价页面跳转未实现'
+    });
+  };
+  var goShare = function goShare() {
+    var href = window.location.href;
+    navigator.clipboard.writeText(href).then(function () {
+      _Message.success('已复制网址链接');
+    })["catch"](function () {
+      // Fallback
+      var textarea = document.createElement('textarea');
+      textarea.value = href;
+      document.body.appendChild(textarea);
+      textarea.select();
+      document.execCommand('copy');
+      document.body.removeChild(textarea);
+      _Message.success('已复制网址链接');
+    });
+  };
+  var goDownload = /*#__PURE__*/function () {
+    var _ref2 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+      return _regeneratorRuntime.wrap(function (_context) {
+        while (1) switch (_context.prev = _context.next) {
+          case 0:
+            // TODO: html2canvas download – not fully implemented
+            // const guideAll = document.getElementById('guideAll');
+            // const canvas = await html2canvas(guideAll, { scale: 2, useCORS: true, logging: false });
+            // const link = document.createElement('a');
+            // link.href = canvas.toDataURL('image/png');
+            // link.download = 'screenshot.png';
+            // link.click();
+            _Message.show({
+              type: 'help',
+              content: '下载功能待完善'
+            });
+          case 1:
+          case "end":
+            return _context.stop();
+        }
+      }, _callee);
+    }));
+    return function goDownload() {
+      return _ref2.apply(this, arguments);
+    };
+  }();
+  var changeTab = function changeTab(index) {
+    setTabIndex(index);
+  };
+
+  // ============ 立即办理 ============
+  var handleEvent = /*#__PURE__*/function () {
+    var _ref3 = _asyncToGenerator(/*#__PURE__*/_regeneratorRuntime.mark(function _callee2() {
+      var eventInfo, _ref4, serviceObjectType, finalAcctType;
+      return _regeneratorRuntime.wrap(function (_context2) {
+        while (1) switch (_context2.prev = _context2.next) {
+          case 0:
+            if (isAgree) {
+              _context2.next = 1;
+              break;
+            }
+            setModalShow(true);
+            return _context2.abrupt("return");
+          case 1:
+            eventInfo = eventInfoProp;
+            if (eventInfo) {
+              _context2.next = 2;
+              break;
+            }
+            return _context2.abrupt("return");
+          case 2:
+            _ref4 = eventInfo.taskGeneralExtend || {}, serviceObjectType = _ref4.serviceObjectType;
+            if (serviceObjectType) {
+              _context2.next = 3;
+              break;
+            }
+            _Dialog.confirm({
+              title: '提示',
+              content: '当前暂无匹配服务对象，无法继续办理，如需帮助请致电：0351-2366413',
+              locale: {
+                ok: '知道了'
+              },
+              footerActions: ['ok']
+            });
+            return _context2.abrupt("return");
+          case 3:
+            finalAcctType = '';
+            if (agentInfo) {
+              if (agentInfo.acctType === '10') finalAcctType = '1';else if (agentInfo.acctType === '20') finalAcctType = '2';
+            } else {
+              if (acctType === '10') finalAcctType = '1';else if (acctType === '20') finalAcctType = '2';
+            }
+            if (serviceObjectType.split(',').includes(finalAcctType)) {
+              _context2.next = 4;
+              break;
+            }
+            if (finalAcctType === '1') {
+              _Message.warning('该事项不允许个人用户办理');
+            } else {
+              _Message.warning('该事项不允许法人用户办理');
+            }
+            return _context2.abrupt("return");
+          case 4:
+            // TODO: face verification flow
+            // const isFace = getStorageItem('isFace');
+            // if (isFace) { ... navigate to face auth ... }
+            // TODO: jWeixin / my environment check
+
+            onNextStep === null || onNextStep === void 0 ? void 0 : onNextStep('立即办理');
+          case 5:
+          case "end":
+            return _context2.stop();
+        }
+      }, _callee2);
+    }));
+    return function handleEvent() {
+      return _ref3.apply(this, arguments);
+    };
+  }();
+
+  // ============ API ============
+  // TODO: getFormValueFun – API calls not available
+  // TODO: getTyEventDetailFun – API calls not available
+
+  return /*#__PURE__*/React.createElement("div", {
+    id: "guideAll",
+    className: "guide-wrapper"
+  }, pageLoading && /*#__PURE__*/React.createElement("div", {
+    className: "guide-loading"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "loading-text"
+  }, "\u52A0\u8F7D\u4E2D...")), !canHandle && !pageLoading && /*#__PURE__*/React.createElement("div", {
+    className: "guide-empty"
+  }, "\u6682\u672A\u67E5\u8BE2\u5230\u76F8\u5173\u4E8B\u9879"), !pageLoading && canHandle && /*#__PURE__*/React.createElement("div", {
+    className: "topBg",
+    style: {
+      backgroundImage: "url(" + topBg + ")"
+    }
+  }), !pageLoading && canHandle && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("div", {
+    className: "container"
+  }, /*#__PURE__*/React.createElement(EventInfo, {
+    eventInfo: eventInfoProp,
+    filterMaterials: filterMaterials
+  }), /*#__PURE__*/React.createElement(GuideTabs, {
+    tabsList: tabList,
+    isSticky: false,
+    curTab: tabIndex,
+    onTabsChange: changeTab
+  }), tabIndex === 0 && /*#__PURE__*/React.createElement(Materials, {
+    eventInfo: eventInfoProp,
+    stepList: stepList,
+    applicationId: applicationId,
+    accessToken: accessToken,
+    acctType: acctType,
+    formData: formData,
+    finalMaterials: finalMaterials,
+    formFieldNames: formFieldNames,
+    itemSituationRowUid: itemSituationRowUid,
+    workNo: workNo,
+    declarationAppToken: declarationAppToken,
+    declarePage: declarePage,
+    baseUrl: baseUrl,
+    download: download,
+    situationResRechange: situationResRechange,
+    taskHandleItem: taskHandleItem
+  }), tabIndex === 1 && /*#__PURE__*/React.createElement(BasicInfo, {
+    eventInfo: eventInfoProp
+  }), tabIndex === 2 && /*#__PURE__*/React.createElement(ProcessImg, {
+    eventInfo: eventInfoProp,
+    declarationAppToken: declarationAppToken,
+    baseUrl: baseUrl
+  }), tabIndex === 3 && /*#__PURE__*/React.createElement(Accept, {
+    eventInfo: eventInfoProp
+  }), tabIndex === 4 && /*#__PURE__*/React.createElement(Places, {
+    eventInfo: eventInfoProp
+  }), tabIndex === 5 && /*#__PURE__*/React.createElement(Result, {
+    eventInfo: eventInfoProp
+  })), /*#__PURE__*/React.createElement("div", {
+    className: "bottom-btn"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "top"
+  }, userAgreementList.length > 0 && /*#__PURE__*/React.createElement("div", {
+    className: "agreement-row"
+  }, /*#__PURE__*/React.createElement("label", {
+    className: "agreement-checkbox"
+  }, /*#__PURE__*/React.createElement("input", {
+    type: "checkbox",
+    checked: isAgree,
+    onChange: function onChange(e) {
+      return setIsAgree(e.target.checked);
+    }
+  }), /*#__PURE__*/React.createElement("span", {
+    className: "agreement-label-text"
+  }, agreementPrompt)), /*#__PURE__*/React.createElement("div", {
+    className: "agreement-tip-slot"
+  }, userAgreementList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      className: "agreement-item",
+      onClick: function onClick() {
+        return showAgree(item);
+      }
+    }, "\u300A", item.agreementName, "\u300B");
+  })))), /*#__PURE__*/React.createElement("div", {
+    className: "bottom"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "left"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "leftBtn",
+    onClick: goComment
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "btn-icon",
+    src: commentIcon,
+    alt: "\u8BC4\u4EF7"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "name"
+  }, "\u8BC4\u4EF7\u6307\u5357")), /*#__PURE__*/React.createElement("div", {
+    className: "leftBtn",
+    onClick: goShare
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "btn-icon",
+    src: shareIcon,
+    alt: "\u5206\u4EAB"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "name"
+  }, "\u5206\u4EAB")), /*#__PURE__*/React.createElement("div", {
+    className: "leftBtn",
+    onClick: goDownload
+  }, /*#__PURE__*/React.createElement("img", {
+    className: "btn-icon",
+    src: downloadIcon,
+    alt: "\u4E0B\u8F7D"
+  }), /*#__PURE__*/React.createElement("div", {
+    className: "name"
+  }, "\u4E0B\u8F7D"))), /*#__PURE__*/React.createElement("div", {
+    className: "right"
+  }, /*#__PURE__*/React.createElement(_Button, {
+    className: "right-btn",
+    onClick: prepStep,
+    disabled: cantNext
+  }, "\u4E0A\u4E00\u6B65"), /*#__PURE__*/React.createElement(_Button, {
+    type: "primary",
+    className: "right-btn",
+    disabled: !canHandle,
+    onClick: handleEvent,
+    style: {
+      color: 'white',
+      borderWidth: '0px',
+      backgroundImage: 'linear-gradient(90deg, rgb(118, 173, 250), rgb(22, 120, 255))'
+    }
+  }, "\u7ACB\u5373\u529E\u7406"))))), /*#__PURE__*/React.createElement(_Dialog, {
+    visible: popShow,
+    onClose: function onClose() {
+      return setPopShow(false);
+    },
+    footer: false
+    // closeable={false}
+    ,
+    width: "90%"
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "agree-detail",
+    dangerouslySetInnerHTML: {
+      __html: userAgreement
+    }
+  })), /*#__PURE__*/React.createElement(_Dialog, {
+    visible: modalShow,
+    title: "\u8BF7\u9605\u8BFB\u5E76\u540C\u610F\u4EE5\u4E0B\u534F\u8BAE",
+    locale: {
+      ok: '同意并继续',
+      cancel: '不同意'
+    },
+    onOk: yesAgree,
+    onCancel: function onCancel() {
+      return setModalShow(false);
+    },
+    onClose: function onClose() {
+      return setModalShow(false);
+    }
+  }, /*#__PURE__*/React.createElement("div", {
+    className: "agree"
+  }, agreementPrompt, userAgreementList.map(function (item, index) {
+    return /*#__PURE__*/React.createElement("span", {
+      key: index,
+      className: "agreement-sub-item",
+      onClick: function onClick() {
+        return showAgree(item);
+      }
+    }, "\u300A", item.agreementName, "\u300B");
+  }))));
+};
+Guide.displayName = 'Guide';
+export default Guide;

package/es/components/guide/index.scss

@@ -0,0 +1,178 @@
+.guide-wrapper {
+  background-color: #f7f7f7;
+  min-height: 100vh;
+
+  .guide-loading {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    font-size: 14px;
+    color: #999;
+  }
+
+  .guide-empty {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 50vh;
+    font-size: 16px;
+    color: #999;
+  }
+
+  .topBg {
+    width: 100%;
+    height: 270px;
+    background-size: 100% 100%;
+    background-repeat: no-repeat;
+    background-position-y: -80px;
+  }
+
+  .container {
+    margin-top: -270px;
+    width: 100%;
+    padding: 16px 14px;
+    box-sizing: border-box;
+    padding-bottom: 380px;
+    position: relative;
+    z-index: 1;
+  }
+
+  .bottom-btn {
+    z-index: 3;
+    box-sizing: border-box;
+    position: fixed;
+    bottom: 0;
+    left: 0;
+    width: 100%;
+    background-color: #fff;
+    padding: 10px 0;
+    box-shadow: 0px 2px 16px 0px rgba(0, 0, 0, 0.1);
+    padding: 10px;
+
+    .top {
+      .agreement-row {
+        display: flex;
+        flex-direction: column;
+        align-items: flex-start;
+        margin-bottom: 12px;
+
+        .agreement-checkbox {
+          display: flex;
+          align-items: center;
+          gap: 6px;
+          font-size: 13px;
+          color: #333;
+          cursor: pointer;
+        }
+
+        .agreement-label-text {
+          user-select: none;
+        }
+      }
+
+      .agreement-tip-slot {
+        margin-top: 4px;
+        color: #1678FF;
+        font-size: 12px;
+        padding-left: 10px;
+        display: flex;
+        justify-content: flex-start;
+        align-items: center;
+        flex-wrap: wrap;
+
+        .agreement-item {
+          margin: 2px 0;
+          cursor: pointer;
+          &:hover {
+            text-decoration: underline;
+          }
+        }
+      }
+    }
+
+    .bottom {
+      display: flex;
+      justify-content: space-around;
+      align-items: center;
+      gap: 10px;
+
+      .left {
+        display: flex;
+        justify-content: space-around;
+        align-items: center;
+        gap: 10px;
+
+        .leftBtn {
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          flex-direction: column;
+          font-size: 14px;
+          color: #999999;
+          cursor: pointer;
+
+          .btn-icon {
+            width: 20px;
+            height: 20px;
+            margin-bottom: 2px;
+          }
+
+          .name {
+            overflow: hidden;
+            white-space: nowrap;
+            text-overflow: ellipsis;
+          }
+        }
+      }
+
+      .right {
+        flex: 1;
+        display: flex;
+        justify-content: flex-end;
+        align-items: center;
+        gap: 12px;
+      }
+    }
+  }
+
+  .agree-detail {
+    background: #ffffff;
+    padding: 15px;
+    max-height: 70vh;
+    overflow-y: scroll;
+    border-radius: 10px;
+    font-size: 14px;
+    line-height: 22px;
+    color: #333333;
+    text-indent: 2em;
+  }
+
+  .agree {
+    .agreement-sub-item {
+      margin: 2px 0;
+      margin-top: 4px;
+      color: #1678FF;
+      font-size: 12px;
+      display: inline-flex;
+      cursor: pointer;
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .right-btn {
+    color: #323233;
+    background-color: #fff;
+    border-color: #ebedf0;
+    border-width: 1px;
+    border-style: solid;
+    padding: 0 12px;
+    font-size: 14px;
+    flex: 1;
+    border-radius: 100px;
+    height: 40px;
+  }
+
+}

package/es/index.d.ts

@@ -47,5 +47,9 @@ export type { FileListPreviewProps } from './components/file-list-preview';
 export { default as FileListPreview } from './components/file-list-preview';
 export type { DragDropListProps } from './components/drag-drop';
 export { default as DragDropList } from './components/drag-drop';
+export type { GuideProps } from './components/guide';
+export { default as Guide } from './components/guide';
+export type { CommentProps } from './components/guide/comment';
+export { default as Comment } from './components/guide/comment';
 declare const bizCssPrefix = "bizpack";
 export { bizCssPrefix };

package/es/index.js

@@ -29,5 +29,7 @@ export { default as FileList } from "./components/file-list";
 export { default as SubmitType } from "./components/submit-type";
 export { default as FileListPreview } from "./components/file-list-preview";
 export { default as DragDropList } from "./components/drag-drop";
+export { default as Guide } from "./components/guide";
+export { default as Comment } from "./components/guide/comment";
 var bizCssPrefix = 'bizpack';
 export { bizCssPrefix };

package/es/style.js

@@ -4,4 +4,7 @@ import '@alifd/next/es/radio/style';
 import '@alifd/next/es/checkbox/style';
 import '@alifd/next/es/balloon/style';
 import 'antd/es/cascader/style';
+import '@alifd/next/es/button/style';
+import '@alifd/next/es/dialog/style';
+import '@alifd/next/es/loading/style';
 import './index.scss';

package/lib/components/check-loading/index.scss

@@ -1,6 +1,9 @@
 .check_loading {
   width: 100%;
   height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
   display: flex;
   justify-content: center;
   align-items: center;

package/lib/components/guide/_utils.d.ts

@@ -0,0 +1,4 @@
+export declare function getStorageItem<T = any>(key: string): T | null;
+export declare function setStorageItem(key: string, value: any): void;
+export declare function numberToChinese(num: number): string;
+export declare function parseURLParams(url: string): Record<string, string>;