linkmore-design 1.0.91 → 1.0.93

package/lib/CustomerService/index.js

@@ -0,0 +1,291 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard").default;
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+require("antd/es/input/style");
+
+var _input = _interopRequireDefault(require("antd/es/input"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _icons = require("@ant-design/icons");
+
+var _question = _interopRequireDefault(require("./components/question"));
+
+var _send = _interopRequireDefault(require("./assets/send.png"));
+
+var _service = _interopRequireDefault(require("./assets/service.png"));
+
+// const { TextArea } = Input;
+// 对话框内容部分 子
+var MainMessage = function MainMessage(_ref) {
+  var cRef = _ref.cRef;
+  var test = [{
+    servePerson: '领猫小葵',
+    time: '14:07:36',
+    sayWhat: '您好，我是领猫小葵客服欢迎您联系到我们杭州领猫科技！有什么我能帮助到您的？'
+  }];
+
+  var _useState = (0, _react.useState)(test),
+      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
+      slMessage = _useState2[0],
+      setSlMessage = _useState2[1]; // 暴露给父组件方法   新增消息
+
+
+  (0, _react.useImperativeHandle)(cRef, function () {
+    return {
+      // changeVal 就是暴露给父组件的方法
+      changeVal: function changeVal(newVal) {
+        var date = new Date();
+        var h = date.getHours();
+        var m = date.getMinutes();
+        var s = date.getSeconds();
+
+        if (s < 10) {
+          s = "0".concat(s);
+        }
+
+        if (m < 10) {
+          m = "0".concat(m);
+        }
+
+        var nowDate = "".concat(h, ":").concat(m, ":").concat(s);
+        var obj = {
+          localPerson: '我的',
+          time: nowDate,
+          sayWhat: "".concat(newVal)
+        };
+        var slMessageT = slMessage.slice(0);
+        slMessageT.push(obj);
+        setSlMessage(slMessageT);
+      }
+    };
+  }); // 渲染的对话内容
+
+  return slMessage.map(function (item) {
+    if (item.servePerson) {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "dialogBox",
+        key: item.index
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "title"
+      }, /*#__PURE__*/_react.default.createElement("span", null, item.servePerson), " ", /*#__PURE__*/_react.default.createElement("span", null, item.time)), /*#__PURE__*/_react.default.createElement("div", {
+        className: "sayWhat"
+      }, item.sayWhat));
+    } else {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: "myMessageWrap",
+        key: item.index
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "dialogBoxMy"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: "title"
+      }, /*#__PURE__*/_react.default.createElement("span", null, item.localPerson), " ", /*#__PURE__*/_react.default.createElement("span", null, item.time)), /*#__PURE__*/_react.default.createElement("div", {
+        className: "sayWhat"
+      }, item.sayWhat)));
+    }
+  });
+}; // 客服窗口
+
+
+var Message = function Message(props) {
+  var useprops = (0, _objectSpread2.default)({}, props);
+
+  var _useState3 = (0, _react.useState)(false),
+      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
+      stateSendBtn = _useState4[0],
+      setStateSendBtn = _useState4[1]; // 空内容发送按钮置灰
+
+
+  var childRef = (0, _react.useRef)();
+
+  var _useState5 = (0, _react.useState)(null),
+      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
+      textAreaVal = _useState6[0],
+      setTextAreaVal = _useState6[1];
+
+  var getTextAreaVal = function getTextAreaVal(e) {
+    setTextAreaVal(e.target.value);
+
+    if (e.target.value) {
+      setStateSendBtn(true);
+    } else {
+      setStateSendBtn(false);
+    }
+  };
+
+  var updateChildState = function updateChildState() {
+    if (textAreaVal) {
+      childRef.current.changeVal(textAreaVal);
+      setTimeout(function () {
+        // 设置滚动条到最底部
+        document.getElementById('mainWrapId').scrollTop = document.getElementById('mainWrapId').scrollHeight;
+      }, 0);
+      setTextAreaVal(null);
+      setStateSendBtn(false);
+    }
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_customerservice_messageWrap"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "header"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "left"
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _service.default,
+    alt: "customService",
+    width: 48
+  }), /*#__PURE__*/_react.default.createElement("span", {
+    style: {
+      marginLeft: '8px'
+    }
+  }, "\u9886\u732B\u5C0F\u8475")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "right",
+    onClick: function onClick() {
+      useprops.setIfOpenMessage(false);
+    }
+  }, /*#__PURE__*/_react.default.createElement(_icons.MinusOutlined, {
+    style: {
+      color: '#fff',
+      fontSize: 18,
+      transform: 'scaleY(0.8)'
+    }
+  }))), /*#__PURE__*/_react.default.createElement("div", {
+    className: "mainWrap",
+    id: "mainWrapId"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      textAlign: 'center',
+      fontSize: '12px',
+      color: 'rgb(187,188,190)',
+      cursor: 'pointer',
+      margin: '2px'
+    }
+  }, "\u67E5\u770B\u66F4\u591A\u5386\u53F2\u6D88\u606F"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialogBox"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "title"
+  }, /*#__PURE__*/_react.default.createElement("span", null, "\u9886\u732B\u5C0F\u8475"), " ", /*#__PURE__*/_react.default.createElement("span", null, "2021:03:12")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sayWhat"
+  }, "\u60A8\u597D, \u8FD9\u91CC\u662F\u9886\u732B\u5BA2\u670D\u5C0F\u8349, \u8BF7\u95EE\u60A8\u6709\u4EC0\u4E48\u95EE\u9898\u561B?")), /*#__PURE__*/_react.default.createElement("div", {
+    className: "dialogBox"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "alwayQs sayWhat"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    style: {
+      fontSize: 14
+    }
+  }, "\u5E38\u89C1\u95EE\u9898"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "lineBox",
+    style: {
+      border: 0,
+      marginTop: 16
+    }
+  }, "\u8FD9\u662F\u4E00\u4E2A\u597D\u95EE\u9898"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "lineBox"
+  }, "\u8FD9\u662F\u4E00\u4E2A\u597D\u95EE\u9898"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "lineBox"
+  }, "\u5C31\u662F\u4E00\u4E2A\u975E\u5E38\u597D\u7684\u95EE\u9898"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "lineBox"
+  }, "\u8FD9\u4E0D\u662F\u95EE\u9898"), /*#__PURE__*/_react.default.createElement("div", {
+    className: "lineBox"
+  }, "\u8FD9\u662F\u4E0D\u662F\u95EE\u9898"))), /*#__PURE__*/_react.default.createElement(MainMessage, {
+    cRef: childRef
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "sendBox"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "texeAreaWrap"
+  }, /*#__PURE__*/_react.default.createElement(_input.default, {
+    bordered: false,
+    maxLength: 200,
+    value: textAreaVal,
+    onKeyDownCapture: function onKeyDownCapture(e) {
+      e.code === 'Enter' ? updateChildState() : null;
+    },
+    placeholder: "\u5F88\u9AD8\u5174\u4E3A\u60A8\u670D\u52A1, \u8BF7\u63CF\u8FF0\u60A8\u7684\u95EE\u9898",
+    style: {
+      height: '40px',
+      overflowY: 'scroll',
+      width: '90%'
+    },
+    onChange: function onChange(e) {
+      getTextAreaVal(e);
+    }
+  })), stateSendBtn ? /*#__PURE__*/_react.default.createElement("div", {
+    className: "sendBtn",
+    onClick: updateChildState
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _send.default,
+    alt: "",
+    style: {
+      marginLeft: '2px'
+    }
+  })) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "sendBtn",
+    onClick: updateChildState
+  }, /*#__PURE__*/_react.default.createElement("img", {
+    src: _send.default,
+    alt: "",
+    style: {
+      marginLeft: '2px'
+    }
+  }))));
+};
+
+var CustomerService = function CustomerService() {
+  var _useState7 = (0, _react.useState)(false),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      ifOpenMessage = _useState8[0],
+      setIfOpenMessage = _useState8[1];
+
+  var childRef = (0, _react.useRef)();
+
+  var openQuestion = function openQuestion() {
+    childRef.current.showDrawerRef();
+  };
+
+  return /*#__PURE__*/_react.default.createElement("div", {
+    className: "lm_customerservice_warp"
+  }, /*#__PURE__*/_react.default.createElement(_question.default, {
+    cRef: childRef
+  }), ifOpenMessage ? /*#__PURE__*/_react.default.createElement(Message, {
+    setIfOpenMessage: setIfOpenMessage
+  }) : /*#__PURE__*/_react.default.createElement("div", {
+    className: "fixGroup"
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "customerWrap",
+    onClick: openQuestion
+  }, /*#__PURE__*/_react.default.createElement(_icons.QuestionCircleOutlined, {
+    style: {
+      fontSize: '20px',
+      color: '#fff'
+    }
+  })), /*#__PURE__*/_react.default.createElement("div", {
+    className: "customerWrap2",
+    onClick: function onClick() {
+      setIfOpenMessage(true);
+    }
+  }, /*#__PURE__*/_react.default.createElement("div", {
+    className: "lineTop"
+  }), /*#__PURE__*/_react.default.createElement(_icons.MessageOutlined, {
+    style: {
+      fontSize: '20px',
+      color: '#fff'
+    }
+  }))));
+};
+
+var _default = CustomerService;
+exports.default = _default;

package/lib/CustomerService/style/index.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./index.css");

package/lib/CustomerService/style/variables.js

@@ -0,0 +1,3 @@
+"use strict";
+
+require("./variables.css");