388 lines
9.8 KiB
JavaScript
388 lines
9.8 KiB
JavaScript
// pages/home/home.js
|
||
const api = require('../../lib/api')
|
||
const util = require('../../lib/util')
|
||
const app = getApp()
|
||
const g = app.globalData
|
||
Page({
|
||
|
||
/**
|
||
* 页面的初始数据
|
||
*/
|
||
data: {
|
||
CustomBar: g.CustomBar, //顶部到胶囊底部的高度
|
||
StatusBar: g.StatusBar, //安卓bar高度
|
||
src: g.bgs[g.bgIndex], //背景图片地址
|
||
yiyan:null, //一言
|
||
show: false, //控制utils页面的显示动画
|
||
display:{ //显示页面状态控制
|
||
'createBox':true,
|
||
'store':false,
|
||
'safe':false,
|
||
'start':false,
|
||
'example':false,
|
||
'maked':false
|
||
},
|
||
animating: false, //动画进行时，ture->禁止触发下个动画
|
||
codes: [], //已完成的用户二维码
|
||
codeSrc:null, //预览用图片地址
|
||
createCode: { //创建二维码所用数据
|
||
wxcode: '',
|
||
qqcode: '',
|
||
alcode: '',
|
||
username: '',
|
||
openId: wx.getStorageSync('openid'),
|
||
node: '',
|
||
timeout: '',
|
||
month: 0
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
onLoad: function (options) {
|
||
this.setData({
|
||
yiyan : wx.getStorageSync('yiyan'),
|
||
})
|
||
if(this.data.yiyan.hitokoto.length > 15) {
|
||
this.setData({
|
||
hitokotoStyle: "text-indent:2em;"
|
||
})
|
||
}
|
||
this.manageCodes()
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面初次渲染完成
|
||
*/
|
||
onReady: function () {
|
||
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面显示
|
||
*/
|
||
onShow: function () {
|
||
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面隐藏
|
||
*/
|
||
onHide: function () {
|
||
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面卸载
|
||
*/
|
||
onUnload: function () {
|
||
|
||
},
|
||
|
||
/**
|
||
* 页面相关事件处理函数--监听用户下拉动作
|
||
*/
|
||
onPullDownRefresh: function () {
|
||
|
||
},
|
||
|
||
/**
|
||
* 页面上拉触底事件的处理函数
|
||
*/
|
||
onReachBottom: function () {
|
||
|
||
},
|
||
|
||
/**
|
||
* 用户点击右上角分享
|
||
*/
|
||
onShareAppMessage: function () {
|
||
|
||
},
|
||
|
||
// 各种界面展示的动画处理
|
||
showUtils: function(e) {
|
||
var type = e.currentTarget.dataset.type
|
||
if(this.data.animating) return
|
||
var that = this
|
||
this.data.animating = true
|
||
if(this.data.show) {
|
||
//拉起主页
|
||
this.data.codeSrc = null
|
||
let display = this.data.display
|
||
for(var i in display) {
|
||
if(i != 'createBox') display[i] = false
|
||
}
|
||
display['createBox'] = true
|
||
this.setData({
|
||
display: display,
|
||
show:false
|
||
})
|
||
setTimeout(function(){
|
||
that.data.animating = false
|
||
},500)
|
||
} else {
|
||
//拉起utils页
|
||
//阻止点击返回键
|
||
if(!type) {
|
||
this.data.animating = false
|
||
return
|
||
}
|
||
this.setData({
|
||
show: true,
|
||
})
|
||
let display = this.data.display
|
||
for(var i in display) {
|
||
if(i != type) display[i] = false
|
||
}
|
||
display[type] = true
|
||
setTimeout(function(){
|
||
that.setData({
|
||
display: display
|
||
})
|
||
that.data.animating = false
|
||
if(type == 'example') that.rouseQRcode(true,null)
|
||
},500)
|
||
}
|
||
},
|
||
|
||
//处理数据
|
||
manageCodes:function() {
|
||
let codes = wx.getStorageSync('codes')
|
||
for( let i in codes) {
|
||
let end = this.TimeDown(codes[i]['timeout'])
|
||
codes[i]['end'] = end;
|
||
}
|
||
this.setData({
|
||
codes: codes
|
||
})
|
||
},
|
||
//时间处理辅助轮
|
||
TimeDown: function(arg) {
|
||
arg = parseInt(arg)
|
||
//结束时间
|
||
var endDate = new Date(arg);
|
||
//当前时间
|
||
var nowDate = new Date();
|
||
//相差的总秒数
|
||
var totalSeconds = parseInt((endDate - nowDate) / 1000);
|
||
//天数
|
||
var days = Math.floor(totalSeconds / (60 * 60 * 24));
|
||
//取模（余数）
|
||
var modulo = totalSeconds % (60 * 60 * 24);
|
||
//小时数
|
||
var hours = Math.floor(modulo / (60 * 60));
|
||
|
||
return days + "天" + hours + "小时"
|
||
},
|
||
|
||
//删除二维码
|
||
delCode:function(e) {
|
||
var id = e.currentTarget.dataset.id
|
||
console.log(id)
|
||
wx.showModal({
|
||
title: '警告',
|
||
content: '此操作不可恢复，并且不会返还费用',
|
||
success (res) {
|
||
if (res.confirm) {
|
||
wx.showLoading({
|
||
title: '操作中',
|
||
mask:true
|
||
})
|
||
api.delCode(id,function(){
|
||
wx.showToast({
|
||
title: "删除成功"
|
||
})
|
||
})
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消')
|
||
}
|
||
}
|
||
})
|
||
},
|
||
|
||
//从已完成跳转二维码显示
|
||
bindToRouse:function(e) {
|
||
var data = e.currentTarget.dataset.data
|
||
this.rouseQRcode(false,data)
|
||
},
|
||
|
||
//唤起二维码（参数制作）
|
||
rouseQRcode:function(isExample,data) {
|
||
//isExample == true 是从示例进来的
|
||
//isExample == false 是从创建完或者已创建进来的
|
||
wx.showLoading({
|
||
title: '绘制中',
|
||
mask:true
|
||
})
|
||
if(isExample) {
|
||
var status = {
|
||
wx: true,
|
||
qq: true,
|
||
al: true
|
||
}
|
||
var text = '英博'
|
||
var id = '5dc6d61074d52b3774ab3e25'
|
||
}
|
||
else {
|
||
// 在这里还要完成页面的切换操作
|
||
// 只改display
|
||
var display = this.data.display
|
||
for(var i in display) {
|
||
if(i != 'example') display[i] = false
|
||
}
|
||
display['example'] = true
|
||
this.setData({
|
||
display:display
|
||
})
|
||
console.log(this.data.display)
|
||
// data 的内容是一条记录的row
|
||
var id = data._id['$oid']
|
||
var text = data.username
|
||
var status = {
|
||
wx: data.wxcode? true:false,
|
||
qq: data.qqcode? true:false,
|
||
al: data.alcode? true:false
|
||
}
|
||
}
|
||
this.drawQRcode(status,text,id)
|
||
},
|
||
|
||
//绘制二维码
|
||
drawQRcode:function(status,text,id) {
|
||
//传入的信息
|
||
// var status = {
|
||
// wx: true,
|
||
// qq: true,
|
||
// al: true
|
||
// }
|
||
// var text = '英博'
|
||
// var id = '5dc6d61074d52b3774ab3e25'
|
||
//基本的信息
|
||
var canvasimgbg = null
|
||
var rpx = g.rpx
|
||
var fontSet1 = 'bold ' + parseInt(50*rpx) +'px sans-serif'
|
||
var fontSet2 = parseInt(35*rpx) + 'px sans-serif'
|
||
var that = this
|
||
var app = []
|
||
if(status.wx) app.push(25)
|
||
if(status.qq) app.push(279)
|
||
if(status.al) app.push(153)
|
||
wx.downloadFile({
|
||
url: that.data.src,
|
||
success: function (res) {
|
||
canvasimgbg = res.tempFilePath
|
||
var canvas = wx.createCanvasContext('qrcode');
|
||
canvas.drawImage(canvasimgbg, 0, 0, 632*rpx, 1054*rpx);
|
||
wx.downloadFile({
|
||
url: 'https://api.ooopn.com/qr/api.php?text=https%3A%2F%2Fqr.powerrain.cn%2Fqr%3Fid%3D'+id,
|
||
success:function(res) {
|
||
canvasimgbg = res.tempFilePath
|
||
canvas.drawImage(canvasimgbg, 66*rpx, 66*rpx, 500*rpx, 500*rpx);
|
||
canvas.font = fontSet1;
|
||
canvas.textAlign = 'center';
|
||
canvas.setFillStyle('white')
|
||
canvas.fillText(text, 316*rpx, 660*rpx)
|
||
canvas.font = fontSet2;
|
||
canvas.fillText('本二维码支持以下APP向我付款', 316*rpx, 760*rpx)
|
||
wx.downloadFile({
|
||
url: 'https://gss0.baidu.com/9fo3dSag_xI4khGko9WTAnF6hhy/zhidao/pic/item/b64543a98226cffc74a50341b4014a90f703eab2.jpg',
|
||
success:function(res) {
|
||
canvasimgbg = res.tempFilePath
|
||
//先画左右，再画中间
|
||
canvas.drawImage(canvasimgbg, app[0], 0, 103, 100, 66*rpx, 830*rpx, 100*rpx, 100*rpx);
|
||
canvas.drawImage(canvasimgbg, app[1], 0, 103, 100, 463*rpx, 830*rpx, 100*rpx, 100*rpx);
|
||
if(app[2])
|
||
canvas.drawImage(canvasimgbg, app[2], 0, 103, 100, 264*rpx, 830*rpx, 100*rpx, 100*rpx);
|
||
canvas.draw(true,()=>{});
|
||
// 导出为临时图片
|
||
wx.canvasToTempFilePath({
|
||
x: 0,
|
||
y: 0,
|
||
width: 632*rpx,
|
||
height: 1054*rpx,
|
||
destWidth: 1264,
|
||
destHeight: 2108,
|
||
canvasId: 'qrcode',
|
||
success: function (res) {
|
||
console.log(res)
|
||
that.data.codeSrc = res.tempFilePath
|
||
console.log(that.data.codeSrc)
|
||
wx.hideLoading()
|
||
wx.showModal({
|
||
title: '提示',
|
||
content: '单击图片即可预览，预览界面长按即可保存',
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
preview: function() {
|
||
console.log(this.data.codeSrc)
|
||
wx.previewImage({
|
||
urls: [this.data.codeSrc],
|
||
})
|
||
},
|
||
|
||
//上传支付宝二维码
|
||
scanCode: function(e) {
|
||
var type = e.currentTarget.dataset.type
|
||
var that = this
|
||
wx.scanCode({
|
||
success (res) {
|
||
//utils里边写个校验，返回true false
|
||
//写入
|
||
var check = util.checkInput(type,res.result)
|
||
console.log(check)
|
||
that.data.createCode[type] = res.result
|
||
that.setData({
|
||
createCode: that.data.createCode
|
||
})
|
||
wx.showToast({
|
||
title: '录入成功',
|
||
icon: 'success',
|
||
})
|
||
},
|
||
fail (err) {
|
||
console.log(err)
|
||
wx.showToast({
|
||
title: '扫码失败',
|
||
icon: 'none',
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
//输入用户名，月份啥的
|
||
inputChange: function(e) {
|
||
var type = e.currentTarget.dataset.type
|
||
var value = e.detail.value
|
||
var check = util.checkInput(type,value)
|
||
console.log(check)
|
||
this.data.createCode[type] = value
|
||
this.setData({
|
||
createCode: this.data.createCode
|
||
})
|
||
//utils校验，返回的东西直接装进createCode
|
||
//return value
|
||
console.log(e)
|
||
},
|
||
|
||
//提交
|
||
submit: function() {
|
||
var res = util.checkSubmit(this.data.createCode)
|
||
if (!res) return
|
||
console.log(res)
|
||
//showLoading
|
||
//api.newOrder
|
||
}
|
||
})
|
||
|