diff --git a/components/word-cloud/index.js b/components/word-cloud/index.js index b13d9ae..91636bc 100644 --- a/components/word-cloud/index.js +++ b/components/word-cloud/index.js @@ -37,7 +37,7 @@ Component({ lifetimes: { attached: function () { // 在组件实例进入页面节点树时执行 - const query = this.createSelectorQuery() + const query = wx.createSelectorQuery() query.select('#' + this.data.canvasId) .fields({ node: true, diff --git a/components/word-cloud/xx.js b/components/word-cloud/xx.js new file mode 100644 index 0000000..b73b352 --- /dev/null +++ b/components/word-cloud/xx.js @@ -0,0 +1,240 @@ +function word_cloud(self, id, config) { + const _self = this; + _self.ownerDocument = wx.createSelectorQuery().select('#' + id).boundingClientRect(); + _self.ownerWindow = self; + _self.config = config; + + _self.ownerDocument.exec(res => { + _self.canvas = res[0] + }) + + _self.canvas.width = _self.config.width; + _self.canvas.height = _self.config.height; + + _self.ctx = _self.canvas.getContext('2d'); + _self.canvas.style.zIndex = 1; + + + _self.word = []; + + _self.canvas.style.backgroundColor = _self.config.bgcolor; +} + +word_cloud.prototype.clear = function () { + var _self = this; + _self.ctx.clearRect(0, 0, _self.config.width, _self.config.height); + _self.ctx_temp.clearRect(0, 0, _self.config.width, _self.config.height); + _self.word = []; + clearTimeout(_self._timeout); +} + +word_cloud.prototype.show = function (data) { + var _self = this; + _self.clear(); + + data = data.sort(function (a, b) { //排序 + return parseInt(b[0]) - parseInt(a[0]); + }); + for (var i = 0; i < data.length; i++) { + if (data[i]) { + var ret = data[i]; + var size = parseInt(ret[0]) * _self.config.size_zoom; + var txt = ret[1]; + var color = ret[2]; + + if (size < _self.config.min_size) size = _self.config.min_size; + _self.word.push({ + size: size, + text: txt, + color: color + }); + } + } + + var pixel = []; + + var midx = Math.floor(_self.config.width / 2); + var midy = Math.floor(_self.config.height / 2); + var step = 1; + var isgoon = true; + + while (isgoon) { + var leftX = midx - step * _self.config.minstep; + var rightX = midx + step * _self.config.minstep; + + var topY = midy - step * _self.config.minstep; + var bottomY = midy + step * _self.config.minstep; + isgoon = false; + var buff = []; + + if (topY >= 0) //上下 + { + for (var i = leftX; i < rightX; i += _self.config.minstep) { + buff.push([i, topY]); + buff.push([i, bottomY]); + } + isgoon = true; + } + + if (leftX >= 0) //左右 + { + for (var i = topY; i < bottomY; i += _self.config.minstep) { + buff.push([rightX, i]); + buff.push([leftX, i]); + } + isgoon = true; + } + + buff = buff.sort(function () { + return Math.floor(Math.random() * 1000) > 500; + }); + + pixel = pixel.concat(buff); + + step++; + } + + _self.pixel = pixel; //遍历路径 + + + var curIndex = 0; + var _append = function () { + if (curIndex < _self.word.length) { + _self.appendWord(_self.word[curIndex]); + curIndex++; + _self._timeout = setTimeout(_append, _self.config.speed); + } + }; + _self._timeout = setTimeout(_append, _self.config.speed); +}; + +word_cloud.prototype.appendWord = function (objWord) { + var _self = this; + + var r = 0; + if (Math.random() * 100 < _self.config.rotate_chance) { + r = Math.round(Math.random() * 40); + if (Math.random() * 10 > 5) + r = 0 - r; + } + + var imgdata = _self.ctx.getImageData(0, 0, _self.config.width, _self.config.height); + var wordData = _self.wordPixel(objWord.text, objWord.size, objWord.color, r); + var width = wordData.width; + var height = wordData.height; + + var step = Math.round(width / 2); + + for (var i = 0; i < _self.pixel.length; i += step) { + var x = Math.round(_self.pixel[i][0] - width / 2); + var y = Math.round(_self.pixel[i][1] - height / 2); + var curLine = 0; + var curIndex = 0; + + var isfaild = false; + + if (x < 0 || y < 0 || x + width > _self.config.width || y + height > _self.config.height) { + continue; + } + + while (curLine < height + _self.config.spacing) { + var cSite = ((y + curLine) * _self.config.width + x + curIndex) * 4; + var tSite = (curLine * (width) + curIndex) * 4; + + if (imgdata.data[cSite] > 0 || imgdata.data[cSite + 1] > 0 || imgdata.data[cSite + 2] > 0 || imgdata.data[cSite + 3] > 0) { + if (wordData.data[tSite] > 0 || wordData.data[tSite + 1] > 0 || wordData.data[tSite + 2] > 0 || wordData.data[tSite + 3] > 0) { + isfaild = true; + break; + } + } + + curIndex++; + if (curIndex >= width) { + curLine++; + curIndex = 0; + } + } + + if (!isfaild) { + var curData = _self.ctx.createImageData(width, height); + + curLine = 0; + curIndex = 0; + + while (curLine < height + _self.config.spacing) { + var cSite = ((y + curLine) * _self.config.width + x + curIndex) * 4; + var tSite = (curLine * (width) + curIndex) * 4; + + if (imgdata.data[cSite] > 0 || imgdata.data[cSite + 1] > 0 || imgdata.data[cSite + 2] > 0 || imgdata.data[cSite + 3] > 0) { + curData.data[tSite] = imgdata.data[cSite]; + curData.data[tSite + 1] = imgdata.data[cSite + 1]; + curData.data[tSite + 2] = imgdata.data[cSite + 2]; + curData.data[tSite + 3] = imgdata.data[cSite + 3]; + } else { + curData.data[tSite] = wordData.data[tSite]; + curData.data[tSite + 1] = wordData.data[tSite + 1]; + curData.data[tSite + 2] = wordData.data[tSite + 2]; + curData.data[tSite + 3] = wordData.data[tSite + 3]; + } + + curIndex++; + if (curIndex >= width) { + curLine++; + curIndex = 0; + } + } + + _self.ctx.putImageData(curData, x, y, 0, 0, width, height); + break; + } + } + + _self.ctx_temp.clearRect(0, 0, _self.config.width, _self.config.height); +}; + +word_cloud.prototype.wordPixel = function (text, size, color, rotate) { + var _self = this; + + if (!color) { + if (_self.config.default_color && _self.config.default_color.length > 0) { + var ind = Math.round(Math.random() * _self.config.default_color.length); + color = _self.config.default_color[ind]; + } else { + color = "#" + Math.floor((Math.random() * 255)).toString(16) + Math.floor((Math.random() * 255)).toString(16) + Math.floor((Math.random() * 255)).toString(16); + } + } + + _self.ctx_temp.textBaseline = "top"; + + _self.ctx_temp.font = _self.config.default_bold + " " + size + "px " + _self.config.default_family; + _self.ctx_temp.fillStyle = color; + _self.ctx_temp.strokeStyle = color; + + var height = size + _self.config.spacing; + var width = _self.ctx_temp.measureText(text).width + _self.config.spacing; + + + if (isNaN(rotate) || rotate == 0) { + _self.ctx_temp.fillText(text, 0, 0); + } else { + var a = Math.round(Math.abs(Math.sin((Math.PI / 180) * rotate) * height)); + var b = Math.round(Math.abs(Math.sin((Math.PI / 180) * rotate) * width)); + var centerX = Math.round((width + a) / 2); + var centerY = Math.round((height + b) / 2); + + _self.ctx_temp.translate(centerX, centerY); + _self.ctx_temp.rotate((Math.PI / 180) * rotate); + _self.ctx_temp.translate(-centerX, -centerY); + + _self.ctx_temp.fillText(text, a / 2, b / 2); + + _self.ctx_temp.translate(centerX, centerY); + _self.ctx_temp.rotate((Math.PI / 180) * (-rotate)); + _self.ctx_temp.translate(-centerX, -centerY); + + width += a; + height += b; + } + + return _self.ctx_temp.getImageData(0, 0, width, height); +} \ No newline at end of file diff --git a/pages/mine/pages/register/register.js b/pages/mine/pages/register/register.js index 1a69bfc..00a8a69 100644 --- a/pages/mine/pages/register/register.js +++ b/pages/mine/pages/register/register.js @@ -3,275 +3,257 @@ const app = getApp() import timer from '../../../../utils/timer' Page({ - /** - * 页面的初始数据 - */ - data: { - sUserName: '', - sPwd: '', - sPhone: '', - sEmail: '', - companyName: '', - brandName: '', - sVerifycode: '', - captchaLabel: '获取验证码', - seconds: timer.length, - captchaDisabled: false - }, - //用户输入 - usernameInput(e) { - this.setData({ - sUserName: e.detail.value - }) - }, - //密码输入 - passwordInput(e) { - this.setData({ - sPwd: e.detail.value - }) - }, - //手机号输入 - sPhoneInput(e) { - this.setData({ - sPhone: e.detail.value - }) - }, - //邮箱输入 - sEmailInput(e) { - this.setData({ - sEmail: e.detail.value - }) - }, - //名称输入 - companyInput(e) { - this.setData({ - companyName: e.detail.value - }) - }, - //品牌输入 - brandInput(e) { - this.setData({ - brandName: e.detail.value - }) - }, - //验证码输入 - codeInput(e) { - this.setData({ - sVerifycode: e.detail.value - }) - }, - //获取验证码 - captcha() { - let b = this.validPhone(); - if (!b) return; - // 禁用按钮点击 - this.setData({ - captchaDisabled: true - }); - // 立刻显示重发提示，不必等待倒计时启动 - this.setData({ - captchaLabel: timer.length + '秒后重新发送' - }); - // 启动以1s为步长的倒计时 - var interval = setInterval(() => { - timer.countdown(this); - }, 1000); - // 停止倒计时 - setTimeout(function () { - clearInterval(interval); - }, timer.length * 1000); - - let obj = { - action: 'getVERCode', - sPhone: this.data.sPhone, - } - app.globalData.request(obj).then((res) => { - if (res.Code == 1) { - wx.showModal({ - title: '提示', - content: data.Msg, + /** + * 页面的初始数据 + */ + data: { + sUserName: '', + sPwd: '', + sPhone: '', + sEmail: '', + companyName: '', + brandName: '', + sVerifycode: '', + captchaLabel: '获取验证码', + captchaDisabled: false + }, + //用户输入 + usernameInput(e) { + this.setData({ + sUserName: e.detail.value }) - } - }).catch(err => { - wx.showModal({ - title: '提示', - content: err.Msg, - }) - }) - }, - - /** - * 生命周期函数--监听页面加载 - */ - //提交审核 - Submit() { - let a = this.validfrom(); - if (!a) return; - let obj = { - action: 'regUser', - sUserName: this.data.sUserName, - sPwd: this.data.sPwd, - sPhone: this.data.sPhone, - sEmail: this.data.sEmail, - companyName: this.data.companyName, - brandName: this.data.brandName, - sVerifycode: this.data.sVerifycode, - } - app.globalData.request(obj).then((res) => { - wx.showModal({ - title: '提示', - content: data.Msg, - }) - - }).catch(err => { - wx.showModal({ - title: '提示', - content: err.Msg, - }) - }) - }, - validPhone() { - let b = true; - let sPhone = this.data.sPhone; - //验证手机号 - if (!this.data.sPhone) { - wx.showModal({ - title: '提示', - content: "手机号不能为空", - }) - b = false; - return b; - } - //验证手机格式 - if (!(/^1[34578]\d{9}$/.test(sPhone))) { - wx.showModal({ - title: '提示', - content: "手机格式错误", - }) - b = false - return b; - } - return b; - }, - validfrom() { - let a = true; - //验证用户名 - if (!this.data.sUserName) { - wx.showModal({ - title: '提示', - content: "用户名不能为空", - }) - a = false; - return a; - } - //验证密码 - if (!this.data.sPwd) { - wx.showModal({ - title: '提示', - content: "密码不能为空", - }) - a = false; - return a; - } - //验证手机号 - if (!this.data.sPhone) { - wx.showModal({ - title: '提示', - content: "手机号不能为空", - }) - a = false; - return a; - } - //验证邮箱 - if (!this.data.sEmail) { - wx.showModal({ - title: '提示', - content: "邮箱不能为空", - }) - a = false; - return a; - } - //验证公司名称 - if (!this.data.companyName) { - wx.showModal({ - title: '提示', - content: "公司名称不能为空", - }) - a = false; - return a; - } - //验证品牌 - if (!this.data.brandName) { - wx.showModal({ - title: '提示', - content: "公司品牌不能为空", - }) - a = false; - return a; - } - //验证验证码 - if (!this.data.sVerifycode) { - wx.showModal({ - title: '提示', - content: "公司品牌不能为空", - }) - a = false; - return a; - } + }, + //密码输入 + passwordInput(e) { + this.setData({ + sPwd: e.detail.value + }) + }, + //手机号输入 + sPhoneInput(e) { + this.setData({ + sPhone: e.detail.value + }) + }, + //邮箱输入 + sEmailInput(e) { + this.setData({ + sEmail: e.detail.value + }) + }, + //名称输入 + companyInput(e) { + this.setData({ + companyName: e.detail.value + }) + }, + //品牌输入 + brandInput(e) { + this.setData({ + brandName: e.detail.value + }) + }, + //验证码输入 + codeInput(e) { + this.setData({ + sVerifycode: e.detail.value + }) + }, + //获取验证码 + captcha() { + let b = this.validPhone(); + if (!b) return; + let obj = { + action: 'getVERCode', + sPhone: this.data.sPhone, + } + // 定时60s + timer(this) + app.globalData.request(obj).then((res) => { + if (res.Code == 1) { + wx.showModal({ + title: '提示', + content: data.Msg, + }) + } + }).catch(err => { + wx.showModal({ + title: '提示', + content: err.Msg, + }) + }) + }, + /** + * 生命周期函数--监听页面加载 + */ + //提交审核 + Submit() { + let a = this.validfrom(); + if (!a) return; + let obj = { + action: 'regUser', + sUserName: this.data.sUserName, + sPwd: this.data.sPwd, + sPhone: this.data.sPhone, + sEmail: this.data.sEmail, + companyName: this.data.companyName, + brandName: this.data.brandName, + sVerifycode: this.data.sVerifycode, + } + app.globalData.request(obj).then((res) => { + wx.showModal({ + title: '提示', + content: data.Msg, + }) + }).catch(err => { + wx.showModal({ + title: '提示', + content: err.Msg, + }) + }) + }, + validPhone() { + let b = true; + let sPhone = this.data.sPhone; + //验证手机号 + if (!this.data.sPhone) { + wx.showModal({ + title: '提示', + content: "手机号不能为空", + }) + b = false; + return b; + } + //验证手机格式 + if (!(/^1[34578]\d{9}$/.test(sPhone))) { + wx.showModal({ + title: '提示', + content: "手机格式错误", + }) + b = false + return b; + } + return b; + }, + validfrom() { + let a = true; + //验证用户名 + if (!this.data.sUserName) { + wx.showModal({ + title: '提示', + content: "用户名不能为空", + }) + a = false; + return a; + } + //验证密码 + if (!this.data.sPwd) { + wx.showModal({ + title: '提示', + content: "密码不能为空", + }) + a = false; + return a; + } + //验证手机号 + if (!this.data.sPhone) { + wx.showModal({ + title: '提示', + content: "手机号不能为空", + }) + a = false; + return a; + } + //验证邮箱 + if (!this.data.sEmail) { + wx.showModal({ + title: '提示', + content: "邮箱不能为空", + }) + a = false; + return a; + } + //验证公司名称 + if (!this.data.companyName) { + wx.showModal({ + title: '提示', + content: "公司名称不能为空", + }) + a = false; + return a; + } + //验证品牌 + if (!this.data.brandName) { + wx.showModal({ + title: '提示', + content: "公司品牌不能为空", + }) + a = false; + return a; + } + //验证验证码 + if (!this.data.sVerifycode) { + wx.showModal({ + title: '提示', + content: "公司品牌不能为空", + }) + a = false; + return a; + } - }, + }, - onLoad(options) { + onLoad(options) { - }, + }, - /** - * 生命周期函数--监听页面初次渲染完成 - */ - onReady() { + /** + * 生命周期函数--监听页面初次渲染完成 + */ + onReady() { - }, + }, - /** - * 生命周期函数--监听页面显示 - */ - onShow() { + /** + * 生命周期函数--监听页面显示 + */ + onShow() { - }, + }, - /** - * 生命周期函数--监听页面隐藏 - */ - onHide() { + /** + * 生命周期函数--监听页面隐藏 + */ + onHide() { - }, + }, - /** - * 生命周期函数--监听页面卸载 - */ - onUnload() { + /** + * 生命周期函数--监听页面卸载 + */ + onUnload() { - }, + }, - /** - * 页面相关事件处理函数--监听用户下拉动作 - */ - onPullDownRefresh() { + /** + * 页面相关事件处理函数--监听用户下拉动作 + */ + onPullDownRefresh() { - }, + }, - /** - * 页面上拉触底事件的处理函数 - */ - onReachBottom() { + /** + * 页面上拉触底事件的处理函数 + */ + onReachBottom() { - }, + }, - /** - * 用户点击右上角分享 - */ - onShareAppMessage() { + /** + * 用户点击右上角分享 + */ + onShareAppMessage() { - } + } }) \ No newline at end of file diff --git a/utils/timer.js b/utils/timer.js index 5cefc8d..6a3ee78 100644 --- a/utils/timer.js +++ b/utils/timer.js @@ -1,24 +1,26 @@ -var length = 59; - +var length = 60; function countdown(that) { -    var seconds = that.data.seconds; -    var captchaLabel = that.data.captchaLabel; -    if (seconds <= 1) { -        captchaLabel = '获取验证码'; -        seconds = length; -        that.setData({ -            captchaDisabled: false -        }); -    } else { -        captchaLabel = --seconds + '秒后重新发送' -    } -    that.setData({ -        seconds: seconds, -        captchaLabel: captchaLabel -    }); + that.setData({ + captchaDisabled: true, + captchaLabel: length + '秒后重新发送' + }); + setTimeout(() => { + if (length <= 1) { + length = 60 + that.setData({ + captchaDisabled: false, + captchaLabel: "获取验证码" + }); + return false; + } else { + length--; + that.setData({ + captchaDisabled: true, + captchaLabel: length + '秒后重新发送' + }); + } + countdown(that) + }, 1000) } - -module.exports = { -    countdown: countdown, -    length: length -} \ No newline at end of file +module.exports = countdown + \ No newline at end of file