yylib-quick-mobile
Version:
yylib-quick-mobile
274 lines (230 loc) • 11.1 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", {
value: true
});
var _button = require('antd-mobile/lib/button');
var _button2 = _interopRequireDefault(_button);
var _whiteSpace = require('antd-mobile/lib/white-space');
var _whiteSpace2 = _interopRequireDefault(_whiteSpace);
var _toast = require('antd-mobile/lib/toast');
var _toast2 = _interopRequireDefault(_toast);
var _createClass = function () { function defineProperties(target, props) { for (var i = 0; i < props.length; i++) { var descriptor = props[i]; descriptor.enumerable = descriptor.enumerable || false; descriptor.configurable = true; if ("value" in descriptor) descriptor.writable = true; Object.defineProperty(target, descriptor.key, descriptor); } } return function (Constructor, protoProps, staticProps) { if (protoProps) defineProperties(Constructor.prototype, protoProps); if (staticProps) defineProperties(Constructor, staticProps); return Constructor; }; }();
require('antd-mobile/lib/button/style/css');
require('antd-mobile/lib/white-space/style/css');
require('antd-mobile/lib/toast/style/css');
var _react = require('react');
var _react2 = _interopRequireDefault(_react);
var _jquery = require('jquery');
var _jquery2 = _interopRequireDefault(_jquery);
var _FunctionUtil = require('../../utils/FunctionUtil');
var _ajax = require('../../utils/ajax');
var _ajax2 = _interopRequireDefault(_ajax);
var _RestUrl = require('../../common/RestUrl');
function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var uploadUrl = '/icop-file/file/muploadx';
var SSSignature = function (_Component) {
_inherits(SSSignature, _Component);
function SSSignature() {
var _ref;
var _temp, _this, _ret;
_classCallCheck(this, SSSignature);
for (var _len = arguments.length, args = Array(_len), _key = 0; _key < _len; _key++) {
args[_key] = arguments[_key];
}
return _ret = (_temp = (_this = _possibleConstructorReturn(this, (_ref = SSSignature.__proto__ || Object.getPrototypeOf(SSSignature)).call.apply(_ref, [this].concat(args))), _this), _this.state = {
imgs: '',
lineColor: '#000',
lineWidth: 2,
height: 280,
autoFit: false,
display: 'inline'
}, _this._renderCanvas = function () {
if (_this.drawing) {
_this.ctx.moveTo(_this.lastPos.x, _this.lastPos.y);
_this.ctx.lineTo(_this.currentPos.x, _this.currentPos.y);
_this.ctx.stroke();
_this.lastPos = _this.currentPos;
}
}, _this._resetCanvas = function () {
_this.ctx = _this.canvas.getContext("2d");
_this.ctx.strokeStyle = _this.state.lineColor;
_this.ctx.lineWidth = _this.state.lineWidth;
}, _this._resizeCanvas = function () {
var width = _this.$element.outerWidth();
_this.$canvas.attr('width', width);
_this.$canvas.css('width', width + 'px');
}, _this.signature = function () {
_this.$element = (0, _jquery2.default)('.signature');
_this.canvas = false;
_this.$canvas = false;
_this.ctx = false;
_this.drawing = false;
_this.currentPos = {
x: 0,
y: 0
};
_this.lastPos = _this.currentPos;
_this.init();
}, _this.init = function () {
var width = (0, _jquery2.default)('.signature').width();
_this.clear = true;
_this.$canvas = (0, _jquery2.default)(_this.refs.sign);
_this.$canvas.attr({
width: width,
height: _this.state.height
});
_this.$canvas.css({
boxSizing: 'border-box',
height: _this.state.height + 'px',
position: 'relative',
zIndex: 100
});
if (_this.state.autoFit === true) {
_this._resizeCanvas();
}
_this.canvas = _this.$canvas[0];
_this._resetCanvas();
_this.$canvas.on('mousedown touchstart', function (e) {
_this.setState({
display: 'none'
});
_this.drawing = true;
_this.lastPos = _this.currentPos = _this._getPosition(e);
});
_this.$canvas.on('mousemove touchmove', function (e) {
_this.currentPos = _this._getPosition(e);
_this.signed = true;
});
_this.$canvas.on('mouseup touchend', function (e) {
_this.drawing = false;
});
(0, _jquery2.default)(document).on('touchstart touchmove touchend', function (e) {
if (e.target === _this.canvas) {
e.preventDefault();
}
});
var that = _this;
(function drawLoop() {
window.requestAnimFrame(drawLoop);
that._renderCanvas();
})();
}, _this._getPosition = function (event) {
var xPos, yPos, rect;
rect = _this.canvas.getBoundingClientRect();
event = event.originalEvent;
if (event.type.indexOf('touch') !== -1) {
xPos = event.touches[0].clientX - rect.left;
yPos = event.touches[0].clientY - rect.top;
} else {
xPos = event.clientX - rect.left;
yPos = event.clientY - rect.top;
}
return {
x: xPos,
y: yPos
};
}, _this.clearCanvas = function () {
_this.canvas.width = _this.canvas.width;
_this._resetCanvas();
_this.signed = false;
_this.setState({
display: 'inline'
});
}, _this.getDataURL = function () {
return _this.canvas.toDataURL();
}, _this.upLodeFile = function (params) {
var that = _this;
_ajax2.default.postJSON(_RestUrl.ADDR + uploadUrl, params, function (data) {
if (data.success) {
var backData = data.backData;
_toast2.default.success(data.backMsg ? data.backMsg : '保存成功!', 1);
} else {
_toast2.default.info(data.backMsg ? data.backMsg : '保存失败!', 1);
}
if ((0, _FunctionUtil.isFunction)(that.props.saveData)) that.props.saveData(data);
});
}, _this.saveData = function () {
if (!_this.signed) {
_toast2.default.info('您还没有签字!', 1);
return;
}
var params = _this.props.source;
console.log(params, 'source');
var content = _this.getDataURL().replace('data:image/png;base64,', '').replace('data:image/jpeg;base64,', '');
params.files = [{
fileName: params.sourceType + '.jpg',
fileContent: content
}];
_this.upLodeFile(params);
}, _temp), _possibleConstructorReturn(_this, _ret);
}
_createClass(SSSignature, [{
key: 'componentWillMount',
value: function componentWillMount() {
window.requestAnimFrame = function (callback) {
return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimaitonFrame || function (callback) {
window.setTimeout(callback, 1000 / 60);
};
}();
}
}, {
key: 'componentDidMount',
value: function componentDidMount() {
if (this.props.disabled) return;
this.signature();
}
}, {
key: 'render',
value: function render() {
var _props = this.props,
disabled = _props.disabled,
imgUrl = _props.imgUrl;
var display = this.state.display;
var spanStyle = {
display: display,
position: 'absolute',
left: '0.6rem',
top: '0.9rem'
};
return disabled ? _react2.default.createElement(
'div',
null,
_react2.default.createElement(_whiteSpace2.default, { size: 'xl', style: { backgroundColor: '#EFEFF4' } }),
_react2.default.createElement('img', { style: { width: '100vw', backgroundColor: '#fff' }, src: imgUrl, alt: '' })
) : _react2.default.createElement(
'div',
null,
_react2.default.createElement(
'div',
{ className: 'signature', style: { backgroundColor: '#fff', position: 'relative' } },
_react2.default.createElement(_whiteSpace2.default, { style: { backgroundColor: '#EFEFF4', height: '0.6rem' } }),
_react2.default.createElement(
'span',
{ style: spanStyle },
'\u8BF7\u5728\u8FD9\u91CC\u7B7E\u5B57...'
),
_react2.default.createElement('canvas', { ref: 'sign' }),
_react2.default.createElement(_whiteSpace2.default, { size: 'xl', style: { backgroundColor: '#EFEFF4' } })
),
_react2.default.createElement(
_button2.default,
{ inline: true, onClick: this.clearCanvas },
'\u6E05\u9664'
),
_react2.default.createElement(
_button2.default,
{ inline: true, onClick: this.saveData },
'\u4FDD\u5B58'
)
);
}
}]);
return SSSignature;
}(_react.Component);
exports.default = SSSignature;
SSSignature.defaultProps = {
imgUrl: ''
};