diff --git a/src/components/QrItem.js b/src/components/QrItem.js index f336494..60889e2 100644 --- a/src/components/QrItem.js +++ b/src/components/QrItem.js @@ -11,13 +11,6 @@ class QrItem extends React.Component { constructor(props) { super(props); this.handleClick = this.handleClick.bind(this); - this.state = { - params: new Array(16) - }; - } - - componentDidMount() { - this.forceUpdate(); } handleClick(e) { diff --git a/src/components/QrRendererBase.js b/src/components/QrRendererBase.js index e50c152..e313684 100644 --- a/src/components/QrRendererBase.js +++ b/src/components/QrRendererBase.js @@ -7,11 +7,17 @@ function listPoint(props) { const qrcode = props.qrcode; const nCount = qrcode.getModuleCount(); const pointList = new Array(nCount); + const params = props.getParamValue(); + let id = 0; for (let row = 0; row < nCount; row++) { for (let col = 0; col < nCount; col++) { - if (qrcode.isDark(row, col)) - pointList.push() + if (qrcode.isDark(row, col)) { + if (params[1] == 0) + pointList.push() + else if (params[1] == 1) + pointList.push() + } } } return pointList; @@ -25,11 +31,29 @@ function calViewBox(props) { } class QrRendererBase extends React.Component { + constructor(props) { + super(props); + this.props.setParamInfo([ + { + key: '大小', + default: 1 + }, + { + key: '定位点样式', + default: 0, + choices: [ + "矩形", + "圆形" + ] + } + ] + ); + } + render() { return ( - {listPoint(this.props)} ); diff --git a/src/components/QrRendererRound.js b/src/components/QrRendererRound.js index 66cb392..e4cd364 100644 --- a/src/components/QrRendererRound.js +++ b/src/components/QrRendererRound.js @@ -48,6 +48,29 @@ function calViewBox(props) { } class QrRendererRound extends React.Component { + constructor(props) { + super(props); + this.props.setParamInfo([ + { + key: '没有choices的文本框1', + default: 1 + }, + { + key: '没有choices的文本框2', + default: 100 + }, + { + key: '有choices的选择框', + default: 0, + choices: [ + "option1", + "option2" + ] + } + ] + ); + } + render() { return ( { + this.handleCreate(); + }) } - handleSelected(index) { - this.setState({selectedIndex: index}); + setParamInfo(index) { + const _this = this; + return function (params) { + _this.paramInfoBuffer[index] = params; + _this.paramValueBuffer[index] = params.map(p => { + return p.default + }); + } } - handleChange(e) { - this.setState({text: e.target.value}) + setParamValue(valueIndex, value) { + const newValue = this.state.paramValue.slice(); + newValue[this.state.selectedIndex][valueIndex] = value; + this.setState({paramValue: newValue}); + } + + getParamValue(index) { + const _this = this; + return function () { + return _this.state.paramValue[index]; + } } handleCreate(e) { @@ -97,6 +105,52 @@ class Qrcode extends React.Component { saveImg(style.value, ReactDOMServer.renderToString(el), 1500, 1500) } + renderParamEditor(info, index) { + if (info.choices) { + return ( + + ); + } + else { + return ( +
@@ -106,7 +160,7 @@ class Qrcode extends React.Component { this.setState({text: e.target.value})} onBlur={this.handleCreate} onKeyPress={(e) => {if(e.key === 'Enter') this.handleCreate(e)}} /> @@ -127,10 +181,12 @@ class Qrcode extends React.Component { qrcode={this.state.qrcode} renderer={React.createElement(style.renderer, { qrcode: this.state.qrcode, + getParamValue: this.getParamValue(index), + setParamInfo: this.setParamInfo(index) })} text={this.state.text} selected={index == this.state.selectedIndex} - onSelected={this.handleSelected} + onSelected={() => this.setState({selectedIndex: index})} /> }) } @@ -146,18 +202,8 @@ class Qrcode extends React.Component {
- - - - - - - - + {this.renderAdjustment()} -
圆点大小
随机种
@@ -200,3 +246,14 @@ class Qrcode extends React.Component { } export default Qrcode; + +window.onload = function(){ + if(isWeiXin()){ + const outer = document.getElementById("wx-message"); + const inner = document.createElement("div"); + inner.className = "note-font"; + inner.id = "wx-message-inner"; + inner.innerHTML = "当前客户端不支持下载,请在浏览器中打开。"; + outer.appendChild(inner); + } +} diff --git a/src/utils/util.js b/src/utils/util.js index e46b191..3e78309 100644 --- a/src/utils/util.js +++ b/src/utils/util.js @@ -20,3 +20,12 @@ export function randRGB() { ) return rgb; } + +export function isWeiXin(){ + const ua = window.navigator.userAgent.toLowerCase(); + if(ua.match(/MicroMessenger/i) == 'micromessenger'){ + return true; + }else{ + return false; + } +}