571 lines
15 KiB
JavaScript
571 lines
15 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
|
||
},
|
||
orderParams: {}, // 支付发起参数
|
||
preparePay: false, // 控制 payjs 组件的创建与销毁
|
||
paying: false, // 可选：如需知晓用户是否「已经跳转到了 PAYJS 小程序还未返回」的状态则可通过事件处理函数监听事件内的 paying 数据
|
||
},
|
||
|
||
/**
|
||
* 生命周期函数--监听页面加载
|
||
*/
|
||
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
|
||
if(type == 'maked' && this.data.codes.length == 0) {
|
||
wx.showToast({
|
||
title: '空空如也呢',
|
||
icon: 'none'
|
||
})
|
||
return
|
||
}
|
||
var that = this
|
||
this.data.animating = true
|
||
if(this.data.show) {
|
||
//拉起主页
|
||
// 如果是start页先弹窗问是否返回， 是就清除数据
|
||
if(this.data.display['start']) {
|
||
wx.showModal({
|
||
title: '警告',
|
||
content: '此时返回将清除已录入的数据',
|
||
success (res) {
|
||
if (res.confirm) {
|
||
that.data.createCode = {
|
||
wxcode: '',
|
||
qqcode: '',
|
||
alcode: '',
|
||
username: '',
|
||
openId: wx.getStorageSync('openid'),
|
||
node: '',
|
||
timeout: '',
|
||
month: 0
|
||
}
|
||
that.setData({
|
||
createCode: that.data.createCode,
|
||
orderParams:{}
|
||
})
|
||
that.data.codeSrc = null
|
||
let display = that.data.display
|
||
for(var i in display) {
|
||
if(i != 'createBox') display[i] = false
|
||
}
|
||
display['createBox'] = true
|
||
that.setData({
|
||
display: display,
|
||
show:false
|
||
})
|
||
setTimeout(function(){
|
||
that.data.animating = false
|
||
},500)
|
||
} else if (res.cancel) {
|
||
console.log('用户点击取消')
|
||
that.data.animating = false
|
||
}
|
||
}
|
||
})
|
||
} else {
|
||
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)
|
||
if(type == 'start') {
|
||
wx.showModal({
|
||
title: '提示',
|
||
content: '由于技术原因，将于下个版本支持苹果手机',
|
||
showCancel: false
|
||
})
|
||
}
|
||
},500)
|
||
}
|
||
},
|
||
|
||
//处理数据
|
||
manageCodes:function(callBack) {
|
||
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
|
||
})
|
||
callBack && callBack()
|
||
},
|
||
//时间处理辅助轮
|
||
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
|
||
var that = this
|
||
wx.showModal({
|
||
title: '警告',
|
||
content: '此操作不可恢复，并且不会返还费用',
|
||
success (res) {
|
||
if (res.confirm) {
|
||
wx.showLoading({
|
||
title: '操作中',
|
||
mask:true
|
||
})
|
||
api.delCode(id,function(){
|
||
//刷新并处理数据
|
||
api.reflash(wx.getStorageSync('openid'),function(info) {
|
||
wx.setStorageSync('codes', info);
|
||
that.manageCodes(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
|
||
})
|
||
this.data.animating = 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
|
||
})
|
||
// 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) {
|
||
that.data.codeSrc = res.tempFilePath
|
||
wx.hideLoading()
|
||
that.data.animating = false
|
||
wx.showModal({
|
||
title: '提示',
|
||
content: '单击图片即可预览，预览界面长按即可保存',
|
||
showCancel: false
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
}
|
||
})
|
||
},
|
||
|
||
preview: function() {
|
||
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)
|
||
if(check) {
|
||
that.data.createCode[type] = check
|
||
that.setData({
|
||
createCode: that.data.createCode
|
||
})
|
||
wx.showToast({
|
||
title: '录入成功',
|
||
icon: 'success',
|
||
})
|
||
}else {
|
||
return
|
||
}
|
||
},
|
||
fail (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)
|
||
if(check) {
|
||
this.data.createCode[type] = check
|
||
this.setData({
|
||
createCode: this.data.createCode
|
||
})
|
||
}
|
||
return check
|
||
},
|
||
|
||
//提交
|
||
submit: function() {
|
||
if (Object.keys(this.data.orderParams).length != 0) {
|
||
this.setData({
|
||
preparePay: true
|
||
})
|
||
return
|
||
}
|
||
var that = this;
|
||
var res = util.checkSubmit(this.data.createCode)
|
||
if (!res) return
|
||
console.log(res)
|
||
wx.showLoading({
|
||
title: '订单创建中',
|
||
mask:true
|
||
})
|
||
api.createOder(res.totalFee,res.data,function(parms) {
|
||
that.setData({
|
||
preparePay: true,
|
||
orderParams: parms
|
||
})
|
||
wx.hideLoading()
|
||
})
|
||
|
||
|
||
},
|
||
|
||
/**
|
||
* 支付成功的事件处理函数
|
||
*
|
||
* res.detail 为 PAYJS 小程序返回的订单信息
|
||
*
|
||
* 可通过 res.detail.payjsOrderId 拿到 PAYJS 订单号
|
||
* 可通过 res.detail.responseData 拿到详细支付信息
|
||
*/
|
||
bindPaySuccess (res) {
|
||
wx.showLoading({
|
||
title: '订单查询中',
|
||
mask:true
|
||
});
|
||
var that = this
|
||
console.log('success', res)
|
||
console.log('[支付成功] PAYJS 订单号：', res.detail.payjsOrderId)
|
||
console.log('outTradeNo', res.detail.outTradeNo)
|
||
// 进行checkOrder
|
||
api.checkOrder(res.detail.outTradeNo,function(order_id) {
|
||
//重置createCode
|
||
var data = that.data.createCode
|
||
data._id = {}
|
||
data._id['$oid'] = order_id
|
||
that.data.createCode = {
|
||
wxcode: '',
|
||
qqcode: '',
|
||
alcode: '',
|
||
username: '',
|
||
openId: wx.getStorageSync('openid'),
|
||
node: '',
|
||
timeout: '',
|
||
month: 0
|
||
}
|
||
that.setData({
|
||
createCode: that.data.createCode,
|
||
orderParams:{}
|
||
})
|
||
//调起绘制二维码的界面
|
||
wx.hideLoading()
|
||
that.rouseQRcode(false,data)
|
||
})
|
||
|
||
//刷新并处理数据
|
||
api.reflash(wx.getStorageSync('openid'),function(info) {
|
||
wx.setStorageSync('codes', info);
|
||
that.manageCodes()
|
||
})
|
||
},
|
||
/**
|
||
* 支付失败的事件处理函数
|
||
*
|
||
* res.detail.error 为 true 代表传入小组件的参数存在问题
|
||
* res.detail.navigateSuccess 代表了是否成功跳转到 PAYJS 小程序
|
||
* res.detail.info 可能存有失败的原因
|
||
*
|
||
* 如果下单成功但是用户取消支付则可在 res.detail.info.payjsOrderId 拿到 payjs 订单号
|
||
*/
|
||
bindPayFail (res) {
|
||
console.log('fail', res)
|
||
if (res.detail.error) {
|
||
// 后端订单生成完成
|
||
// !!!!苹果手机会卡在这里！！！
|
||
console.error('发起支付失败', res.detail.info)
|
||
|
||
} else if (res.detail.navigateSuccess) {
|
||
// 跳转到了付款界面但是没付款
|
||
console.log('[取消支付] PAYJS 订单号：', res.detail.info.payjsOrderId)
|
||
|
||
} else {
|
||
// 用户放弃了付款，没跳转，再次跳转还可以进行支付
|
||
// 目测啥都不用干
|
||
}
|
||
},
|
||
/**
|
||
* 支付完毕的事件处理函数
|
||
*
|
||
* 无论支付成功或失败均会执行
|
||
* 应当在此销毁 payjs 组件
|
||
*/
|
||
bindPayComplete () {
|
||
console.log('complete')
|
||
this.setData({
|
||
preparePay: false, // 销毁 payjs 组件
|
||
})
|
||
},
|
||
/**
|
||
* 【可选】组件内部数据被修改时的事件
|
||
*
|
||
* 当前仅用于监听 paying 数据
|
||
* 当用户跳转到 PAYJS 小程序并等待返回的过程中 paying 值为 true
|
||
*/
|
||
bindDataChange (res) {
|
||
if (res.detail.paying) {
|
||
this.setData({
|
||
paying: res.detail.paying
|
||
})
|
||
}
|
||
}
|
||
})
|
||
|