体验官修改
This commit is contained in:
301
pages/recruit/poster/poster.js
Normal file
301
pages/recruit/poster/poster.js
Normal file
@@ -0,0 +1,301 @@
|
||||
Page({
|
||||
|
||||
/**
|
||||
* 页面的初始数据
|
||||
*/
|
||||
data: {
|
||||
shareSee: false, // 分享弹出
|
||||
inviteCode: '', // 二维码
|
||||
currentBgIndex: 0, // 轮播图数量
|
||||
styleShow: false, // 是否展示图片查看并选择
|
||||
|
||||
styleType:'', // 二维码 切换 还是背景图
|
||||
qrcodes:[], // 城市二维码数组
|
||||
currentCodeIndex:0,//
|
||||
|
||||
//海报
|
||||
loading : true,
|
||||
codeType : 'city',
|
||||
posterDatas : {}, // 定位
|
||||
posterDatasLists: [],// 海报数据返回
|
||||
|
||||
|
||||
},
|
||||
|
||||
/**
|
||||
* 生命周期函数--监听页面加载
|
||||
*/
|
||||
onLoad() {
|
||||
wx.showLoading({
|
||||
title: '请求中...',
|
||||
})
|
||||
},
|
||||
// 切换城市
|
||||
changeCity(){
|
||||
this.setData({
|
||||
styleType:'qcode',
|
||||
styleShow:true
|
||||
})
|
||||
},
|
||||
// 轮播图滚动
|
||||
swiperChange(e) {
|
||||
let index = e.detail.current
|
||||
if(this.data.codeType == 'city'){
|
||||
wx.setNavigationBarTitle({
|
||||
title: `城市体验官(${this.data.posterDatasLists[index].name})`,
|
||||
})
|
||||
this.setData({
|
||||
inviteCode:this.data.posterDatasLists[index].code
|
||||
})
|
||||
}
|
||||
this.setData({
|
||||
posterDatas: this.data.posterDatasLists[index],
|
||||
currentBgIndex: index
|
||||
})
|
||||
this.initCanvas()
|
||||
},
|
||||
// 选择上面图切换轮播
|
||||
selectBgIndex(e) {
|
||||
let index = e.currentTarget.dataset.index
|
||||
if (index != this.data.currentBgIndex) {
|
||||
this.setData({
|
||||
currentBgIndex: index
|
||||
})
|
||||
}
|
||||
},
|
||||
// 切换上面二维码图片
|
||||
selectCodeIndex(e) {
|
||||
let index = e.currentTarget.dataset.index
|
||||
let qrcodes = this.data.qrcodes
|
||||
|
||||
if (index != this.data.currentCodeIndex) {
|
||||
this.setData({
|
||||
currentCodeIndex: index,
|
||||
inviteCode: qrcodes[index].code
|
||||
})
|
||||
wx.setNavigationBarTitle({
|
||||
title: `城市体验官(${qrcodes[index].name})`,
|
||||
})
|
||||
}
|
||||
|
||||
},
|
||||
// 展示或者隐藏样式
|
||||
changeStyle() {
|
||||
this.setData({
|
||||
styleShow: !this.data.styleShow,
|
||||
styleType:''
|
||||
})
|
||||
},
|
||||
onShow() {
|
||||
this.ShareInfo();
|
||||
},
|
||||
//生成海报初始化
|
||||
initCanvas() {
|
||||
var that = this;
|
||||
var posterDatas = that.data.posterDatas
|
||||
const query = wx.createSelectorQuery()
|
||||
query.select('#firstCanvas').fields({
|
||||
node: true,
|
||||
size: true
|
||||
},
|
||||
function (res) {
|
||||
const canvas = res.node
|
||||
const ctx = canvas.getContext('2d')
|
||||
const dpr = wx.getSystemInfoSync().pixelRatio
|
||||
canvas.width = posterDatas.width * dpr
|
||||
canvas.height = posterDatas.height * dpr
|
||||
ctx.scale(dpr, dpr)
|
||||
posterDatas.canvas = canvas
|
||||
posterDatas.ctx = ctx
|
||||
posterDatas.dpr = dpr
|
||||
//存储
|
||||
that.setData({
|
||||
posterDatas
|
||||
})
|
||||
}).exec()
|
||||
wx.hideLoading()
|
||||
},
|
||||
|
||||
/**
|
||||
* 小程序码
|
||||
*/
|
||||
ShareInfo() {
|
||||
wx.$api.recruit.posters({
|
||||
size: 200,
|
||||
path: '/pages/recruit/index'
|
||||
}).then(res2 => {
|
||||
this.setData({
|
||||
loading: false,
|
||||
qrcodes:res2.data.qrcodes,
|
||||
inviteCode: res2.data.qrcodes[0].code,
|
||||
})
|
||||
wx.setNavigationBarTitle({
|
||||
title: `城市体验官(${res2.data.qrcodes[0].name})`,
|
||||
})
|
||||
wx.getSystemInfo({
|
||||
success: (res) => {
|
||||
let windowWidth = res.windowWidth // 当前设备宽
|
||||
let windowHeight = res.windowHeight // 当前设备高
|
||||
this.setData({
|
||||
windowWidth: windowWidth,
|
||||
windowHeight: windowHeight
|
||||
})
|
||||
let lists = [] //
|
||||
let posters = res2.data.qrcodes
|
||||
posters.map(item => {
|
||||
item.position.newx = windowWidth / item.width * item.position.x.toFixed(2)
|
||||
item.position.newy = windowHeight / item.height * item.position.y.toFixed(2)
|
||||
item.position.newSize = windowWidth / item.width * item.position.size.toFixed(2)
|
||||
item.show = true, // 显示隐藏海报弹窗
|
||||
item.success = false, // 是否成功生成过海报
|
||||
item.canvas = null, // 画布的节点
|
||||
item.ctx = null, // 画布的上下文
|
||||
item.dpr = 1, // 设备的像素比
|
||||
lists.push(item)
|
||||
})
|
||||
this.setData({
|
||||
posterDatasLists: lists,
|
||||
posterDatas: lists[0]
|
||||
})
|
||||
// 数据处理完，初始化 canvas
|
||||
this.initCanvas()
|
||||
}
|
||||
})
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
//海报生成 //画布 生成 海报[海报]
|
||||
saveImg() {
|
||||
var that = this;
|
||||
var posterDatas = that.data.posterDatas
|
||||
var canvas = posterDatas.canvas
|
||||
var ctx = posterDatas.ctx
|
||||
|
||||
wx.showLoading({
|
||||
title: '海报生成中',
|
||||
mask: true
|
||||
});
|
||||
|
||||
//二维码
|
||||
var codeImg = new Promise(function (resolve, reject) {
|
||||
const photo = canvas.createImage();
|
||||
photo.src = that.data.inviteCode;
|
||||
photo.onload = (e) => {
|
||||
resolve(photo);
|
||||
}
|
||||
});
|
||||
|
||||
//背景素材
|
||||
var backImg = new Promise(function (resolve, reject) {
|
||||
const photo = canvas.createImage();
|
||||
photo.src = posterDatas.cover;
|
||||
photo.onload = (e) => {
|
||||
resolve(photo);
|
||||
}
|
||||
});
|
||||
Promise.all([codeImg, backImg]).then(res => {
|
||||
|
||||
// 绘制背景
|
||||
ctx.drawImage(res[1], 0, 0, posterDatas.width, posterDatas.height);
|
||||
|
||||
// 绘制[二维码-白色背景]
|
||||
ctx.fillStyle = "white";
|
||||
ctx.fillRect(posterDatas.position.x + 10, posterDatas.position.y + 10, posterDatas.position.size, posterDatas.position.size);
|
||||
ctx.fillRect(posterDatas.position.x + 10, posterDatas.position.y + 10, posterDatas.position.size, posterDatas.position.size);
|
||||
|
||||
// 绘制[二维码]
|
||||
ctx.drawImage(res[0], posterDatas.position.x + 10, posterDatas.position.y + 10, posterDatas.position.size, posterDatas.position.size);
|
||||
|
||||
// 关闭loading
|
||||
wx.hideLoading();
|
||||
//显示海报
|
||||
posterDatas.success = true;
|
||||
|
||||
that.setData({
|
||||
posterDatas
|
||||
})
|
||||
|
||||
this.onDownloadImges();
|
||||
|
||||
}).catch(err => {})
|
||||
},
|
||||
|
||||
//下载图片[海报]
|
||||
onDownloadImges() {
|
||||
wx.showLoading({
|
||||
title: '保存中',
|
||||
mask: true
|
||||
});
|
||||
var that = this;
|
||||
var posterDatas = that.data.posterDatas;
|
||||
if (!posterDatas.pic) {
|
||||
that.onCanvasBuildImges();
|
||||
return;
|
||||
}
|
||||
//可写成函数调用 这里不做解释
|
||||
wx.saveImageToPhotosAlbum({
|
||||
filePath: posterDatas.pic,
|
||||
success(res) {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: '已保存到相册，快去分享吧',
|
||||
})
|
||||
that.setData({
|
||||
posterDatas,
|
||||
shareSee: !that.data.shareSee,
|
||||
styleShow: false
|
||||
})
|
||||
},
|
||||
fail() {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: '进入设置页，开启“保存到相册”',
|
||||
})
|
||||
that.setData({
|
||||
posterDatas,
|
||||
styleShow: false
|
||||
})
|
||||
return;
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
//画布 转 图片[海报]
|
||||
onCanvasBuildImges() {
|
||||
var that = this;
|
||||
var posterDatas = that.data.posterDatas;
|
||||
wx.canvasToTempFilePath({
|
||||
canvas: posterDatas.canvas,
|
||||
width: posterDatas.width,
|
||||
height: posterDatas.height,
|
||||
destWidth: posterDatas.width * 3,
|
||||
destHeight: posterDatas.height * 3,
|
||||
success: res => {
|
||||
posterDatas["pic"] = res.tempFilePath;
|
||||
that.setData({
|
||||
posterDatas
|
||||
})
|
||||
that.onDownloadImges();
|
||||
},
|
||||
fail() {
|
||||
wx.hideLoading();
|
||||
wx.showToast({
|
||||
icon: 'none',
|
||||
title: 'sorry 保存失败,请稍后再试.',
|
||||
})
|
||||
return;
|
||||
}
|
||||
});
|
||||
},
|
||||
|
||||
/**
|
||||
* 分享弹出
|
||||
*/
|
||||
shareTap() {
|
||||
this.setData({
|
||||
shareSee: !this.data.shareSee
|
||||
})
|
||||
}
|
||||
})
|
||||
Reference in New Issue
Block a user