wxjs:
// pages/newPage/haoBao/index.js
const app = getApp()
Page({
/**
* 页面的初始数据
*/
data: {
pageNav: [
{
title: '简约白',
color: '#fff',
img: '',
iocn: '/image/iocn60.png'
},
{
title: '西瓜红',
color: '#fd8866',
img: '/image/topBg3.png',
iocn: '/image/iocn60.png'
},
{
title: '天空蓝',
color: '#e5f2fb',
img: '/image/topBg4.png',
iocn: '/image/iocn59.png',
ac: 1
},
{
title: '胭脂粉',
color: '#fcdee3',
img: '/image/topBg2.png',
iocn: '/image/iocn62.png'
},
{
title: '薰衣草',
color: '#ebdefb',
img: '/image/topBg.png',
iocn: '/image/iocn61.png'
},
{
title: '豆沙绿',
color: '#a6e7de',
img: '/image/topBg5.png',
iocn: '/image/iocn63.png'
}
],
active: 0,
wx_avatar_url: '',
userinfo: [],
index2:0,
walk_km: 0,
walk_sumk: 0,
walk_left:0
},
//获取encryptedData（没有解密的步数）和iv（加密算法的初始向量）
myWalk: function(e) {
let that = this
that.pushRQId = null
console.log(that.pushRQId)
if (app.HTTP.isLoading(that.pushRQId)) return
console.log('walk')
let formid = e.detail.formId
wx.checkSession({
success() {
// session_key 未过期，并且在本生命周期一直有效
},
fail() {
wx.clearStorageSync()
}
})
wx.getSetting({
success: function(res) {
console.log(res);
if (!res.authSetting['scope.werun']) {
wx.showModal({
title: '提示',
content: '获取微信运动步数，需要开启计步权限',
success: function(res) {
if (res.confirm) {
//跳转去设置
wx.openSetting({
success: function(res) {
wx.getWeRunData({
success: function(res2) {
that.pushRQId = app.HTTP.post(app.URL.userinfo_url, {
iv: res2.iv,
encryptedData: res2.encryptedData,
m: 'mywalk',
city: app.globalData.city,
formid: formid
}, (res) => {
//console.log(res); return
let arr_top3 = [];
if (res.walkrank.length > 0) {
arr_top3 = res.walkrank.splice(0, 3)
}
wx.setStorageSync('user_info', res.user)
that.setData({
walk_step: res.step,
walk_sum: res.stepsum,
walk_sumk: (res.stepsum * 0.75 * 0.001).toFixed(1),
walk_km: (res.step * 0.75 * 0.001).toFixed(1),
walk_top3: arr_top3,
walk_rank: res.walkrank,
userscore: res.user.score
})
wx.showToast({
title: '同步成功',
})
})
},
fail: function(res) {
wx.showModal({
title: '提示',
content: '开发者未开通微信运动，请关注“微信运动”公众号后重试',
showCancel: false,
confirmText: '知道了'
})
}
})
}
})
} else {
//不设置
}
}
})
} else {
wx.getWeRunData({
success: function(res2) {
console.log(res2)
that.pushRQId = app.HTTP.post(app.URL.userinfo_url, {
iv: res2.iv,
encryptedData: res2.encryptedData,
appid: app.URL.app_id,
m: 'mywalk',
city: app.globalData.city,
formid: formid
}, (res) => {
// console.log(res); return
let arr_top3 = [];
if (res.walkrank.length > 0) {
arr_top3 = res.walkrank.splice(0, 3)
}
wx.setStorageSync('user_info', res.user)
that.setData({
walk_step: res.step,
walk_sum: res.stepsum,
walk_sumk: (res.stepsum * 0.75 * 0.001).toFixed(1),
walk_km: (res.step * 0.75 * 0.001).toFixed(1),
walk_top3: arr_top3,
walk_rank: res.walkrank,
userscore: res.user.score
})
wx.showToast({
title: '同步成功',
})
})
},
fail: function(res) {
wx.showModal({
title: '提示',
content: '请关注“微信运动”公众号后重试',
showCancel: false,
confirmText: '知道了'
})
}
})
}
}
})
},
//选择背景色
changeBg: function(e) {
var that = this
let p = e.currentTarget.dataset
that.data.pageNav[p.index]['color']
// console.log(that.data.pageNav[p.index]['color'])
that.setData({
color: that.data.pageNav[p.index]['color'],
img: that.data.pageNav[p.index]['img'],
iocn: that.data.pageNav[p.index]['iocn'],
active: p.index
})
that.canvasImg()
},
canvasImg() {
let that = this;
var ress = wx.getSystemInfoSync()
var rpx = ress.windowWidth / 375
that.setData({
rpx: ress.windowWidth / 375
})
const ctx = wx.createCanvasContext('myCanvas');
ctx.setFillStyle('#fff'); //为创建的canvans上下文添充颜色 如果没有设置 fillStyle，默认颜色为 black。
ctx.fillRect(0, 0, 335 * rpx, 580 * rpx)
// ctx.setFillStyle('#d5313a'); //为创建的canvans上下文添充颜色 如果没有设置 fillStyle，默认颜色为 black。
// ctx.fillRect(20 * rpx, 100 * rpx, 295 * rpx, 350 * rpx)
ctx.drawImage(that.data.headimgurls, 0 * rpx, 0 * rpx, 335 * rpx, 335 * rpx);
//ctx.drawImage(that.data.bgWhite, 20 * rpx, 400 * rpx, 295 * rpx, 180 * rpx);
ctx.save(); // 先保存状态 已便于画完圆再用
ctx.beginPath(); //开始绘制
//先画个圆
ctx.arc(38 * rpx, 374 * rpx, 25 * rpx, 0, Math.PI * 2, false); //false代表顺时针 图片的位置加半径
ctx.setStrokeStyle('#fff')
ctx.stroke();
ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
ctx.drawImage(that.data.headimgurl, 13 * rpx, 348 * rpx, 50 * rpx, 50 * rpx); // 推进去图片
ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下文即状态 可以继续绘制
ctx.setFillStyle("#999");
ctx.setFontSize(14 * rpx); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.fillText(that.data.user.nickname+'向您推荐了一个好东西!', 76 * rpx, 380 * rpx);
ctx.setFillStyle("#3D3D3D");
ctx.setFontSize(14 * rpx); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.fillText('今天我走了', 13 * rpx, 430 * rpx);
ctx.setFillStyle("#f03725"); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.setFontSize(18 * rpx);
ctx.fillText(that.data.users.walkstep+'', 82 * rpx, 430 * rpx);
ctx.setFillStyle("#3D3D3D");
ctx.setFontSize(14 * rpx); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.fillText('步,', (that.data.users.walkstep.toString().length*11+80) * rpx, 430 * rpx);
ctx.setFillStyle("#3D3D3D");
ctx.setFontSize(14 * rpx); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.fillText('共走了', (that.data.users.walkstep.toString().length*11+110) * rpx, 430 * rpx);
ctx.setFillStyle("#f03725"); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.setFontSize(18 * rpx);
ctx.fillText(that.data.walk_km+'', (that.data.users.walksteps.toString().length*11+118+that.data.walk_sumk.toString().length*11) * rpx, 430 * rpx);
ctx.setFillStyle("#3D3D3D");
ctx.setFontSize(14 * rpx); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.fillText('公里', (that.data.users.walksteps.toString().length*11+110+that.data.walk_sumk.toString().length*11*2) * rpx, 430 * rpx);
ctx.setFillStyle("#3D3D3D");
ctx.setFontSize(14 * rpx); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.fillText('总里程距离', 13 * rpx, 460 * rpx);
ctx.setFillStyle("#f03725"); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.setFontSize(18 * rpx);
ctx.fillText(that.data.users.walksteps+'', 82 * rpx, 460 * rpx);
ctx.setFillStyle("#3D3D3D");
ctx.setFontSize(14 * rpx); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.fillText('步,', (that.data.users.walksteps.toString().length*11+80) * rpx, 460 * rpx);
ctx.setFillStyle("#3D3D3D");
ctx.setFontSize(14 * rpx); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.fillText('总共打卡', (that.data.users.walksteps.toString().length*11+110) * rpx, 460 * rpx);
ctx.setFillStyle("#f03725"); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.setFontSize(18 * rpx);
ctx.fillText(that.data.signnum+'', (that.data.users.walksteps.toString().length*11+155+that.data.signnum.toString().length*11) * rpx, 460 * rpx);
ctx.setFillStyle("#3D3D3D");
ctx.setFontSize(14 * rpx); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.fillText('次', (that.data.users.walksteps.toString().length*11+112+that.data.walk_sumk.toString().length*11*2) * rpx,460 * rpx);
ctx.setFillStyle('#f5f5f5')
ctx.fillRect(13* rpx, 480 * rpx, 310 * rpx, 90 * rpx)
ctx.drawImage(that.data.code,26 * rpx, 496 * rpx, 60 * rpx, 60 * rpx);
ctx.setFillStyle("#333");
ctx.setFontSize(12 * rpx); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.fillText(that.data.user.nickname, 100 * rpx, 526 * rpx);
ctx.drawImage("/image/add.png", 140 * rpx, 516 * rpx, 12 * rpx, 12 * rpx)
ctx.setFillStyle("#333");
ctx.setFontSize(12 * rpx); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.fillText(that.data.user.cityname, 156 * rpx, 526 * rpx);
ctx.setFillStyle("#333");
ctx.setFontSize(12 * rpx); //字大小
ctx.setTextAlign('left'); //是否居中显示，参考点画布中线
ctx.fillText('平台担保交易,一键提现到账', 100 * rpx, 546 * rpx);
ctx.draw();
},
saveImg() {
let that = this;
var res = wx.getSystemInfoSync()
var rpx = res.windowWidth / 375
that.setData({
rpx: res.windowWidth / 375
})
wx.canvasToTempFilePath({
x: 0,
y: 0,
335 * rpx, //画布宽高
height: 580 * rpx,
destWidth: 1005 * rpx, //画布宽高*dpr 以iphone6为准
destHeight: 1740 * rpx, //放大2倍以上，解决保存的图片模糊的问题
canvasId: 'myCanvas',
success: function (res) {
console.log(res.tempFilePath) //生成的临时图片路径
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success: function (res) {
console.log(res);
wx.showToast({
title: '保存成功',
})
},
fail: function () {
console.log('a')
}
})
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this._getUserinfo();
},
_getUserinfo: function () {
let that = this
app.HTTP.post(app.URL.userinfo_url, {
m: 'homeShare',
city: app.globalData.city
}, (info) => {
wx.setStorageSync('user_info', info.userinfo)
that.setData({
signnum: info.signnum,
walk_step: parseInt(info.walkstep),
walk_sum: info.walksteps,
walk_sumk: (info.walksteps * 0.75 * 0.001).toFixed(1),
walk_km: (parseInt(info.walkstep) * 0.75 * 0.001).toFixed(1),
users: info,
user: info.userinfo,
userImg: info.share_imgs
})
wx.downloadFile({
url: info.userinfo.headimgurl,
success: function (res2) {
that.setData({
headimgurl: res2.tempFilePath
});
let _suid = `user_id=${that.data.user.uid}`;
let _page = "pages/newPage/idx/index";
//
that._getFxcode(_page, _suid);
//that.canvasImg();
}
})
wx.downloadFile({
url: info.share_imgs[0].img,
success: function (res2) {
that.setData({
headimgurls: res2.tempFilePath
});
}
})
})
},
_getFxcode: function (_page, _scene) {
let that = this
app.HTTP.post(app.URL.hao_bao_home, {
//m: "getQrcode",
page: _page,
param: _scene,
}, (res) => {
wx.downloadFile({
url: res.url,
success: function (res2) {
that.setData({
code: res2.tempFilePath
});
that.canvasImg();
}
})
});
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
}
})
