Skip to content

dev / zhiliang-light-mp

Go to a project
Toggle navigation
Toggle navigation pinning
5c310604 by simon
Options

默认提交

1 parent 8f78b155
Inline Side-by-side
Showing 7 changed files with 446 additions and 58 deletions
import QR from '../../utils/qrcode'
import Poster from '../../miniprogram_dist/poster/poster';
let app = getApp();
Page({
data: {
authorizeVisible: false,
userInfo: {},
qrImagePath: "",
imageUrl: "",
},
onShareAppMessage() {},
showAuth() {
this.setData({
authorizeVisible: true
})
},
onLoad(options) {
this.initData();
},
initData() {
// 获取用户信息 小程序码
this.queryMember().then((result) => {
wx.showLoading({
title: '二维码生成中···',
});
// 获取海报数据
let posterData = this.getPosterConfig();
// 绘制设置海报
this.onCreatePoster(posterData);
});
},
onPosterSuccess(e) {
wx.hideLoading();
const {
detail
} = e;
console.log("detail:", detail)
this.setData({
imageUrl: detail
})
},
onPosterFail(err) {
wx.hideLoading();
console.error(err);
},
/**
* 异步生成海报
*/
onCreatePoster(posterConfig) {
console.log("posterConfig:", posterConfig);
this.setData({
posterConfig: posterConfig
}, () => {
Poster.create(true); // 入参：true为抹掉重新生成
});
},
// 获取海报数据
getPosterConfig() {
// 合成图片需要的数据
let {
userInfo
} = this.data;
let blocks = [{
x: 0,
y: 0,
width: 690,
height: 900,
backgroundColor: "#ffffff",
borderRadius: 10,
}];
let images = [{
x: 286,
y: 30,
width: 120,
height: 120,
borderRadius: 120,
zIndex: 11,
url: userInfo.avatar,
}, {
x: 126,
y: 220,
width: 440,
height: 440,
zIndex: 11,
url: userInfo.memberUrl,
}];
let lines = [];
let texts = [{
x: 690 / 2,
y: 192,
width: 690,
fontSize: 36,
color: "#3680EB",
textAlign: "center",
zIndex: 11,
text: userInfo.nickname,
},
{
x: 690 / 2,
y: 640,
width: 690,
fontSize: 28,
color: "#666666",
textAlign: "center",
zIndex: 11,
text: userInfo.memberCode,
},
{
x: 690 / 2,
y: 740,
width: 690,
fontSize: 28,
color: "#666666",
textAlign: "center",
zIndex: 11,
text: "深士照明",
}, {
x: 690 / 2,
y: 800,
width: 690,
fontSize: 28,
color: "#666666",
textAlign: "center",
zIndex: 11,
text: "扫码即获专属积分，兑换超值奖品",
}
];
let posterData = {
width: 690,
height: 900,
debug: false,
blocks: blocks,
images: images,
lines: lines,
texts: texts,
}
return posterData;
},
/**
* 获取会员信息
*/
queryMember() {
let _this = this;
return new Promise((resolve, reject) => {
app.post({
url: app.api.member,
data: {}
}).then((result) => {
let userInfo = result
_this.setData({
userInfo: userInfo,
qrImagePath: userInfo.memberUrl,
})
resolve();
})
});
},
/**
* 图片查看
*/
onPreviewImageHandler(evt) {
// let curItem = getBindtapData(evt);
// let index = getBindtapData(evt, "index");
// let current = curItem[index] || '';
console.log("onPreviewImageHandler")
let current = this.data.imageUrl;
let urls = [current];
wx.previewImage({
current: current,
urls: urls
})
},
/**
* 保存图片到本地
*/
saveImageToPhotosAlbum() {
let _this = this;
if (!_this.data.imageUrl) {
wx.showToast({
title: "图片加载中,请重试",
icon: "none"
})
return;
}
wx.saveImageToPhotosAlbum({
filePath: _this.data.imageUrl,
success(res) {
wx.showToast({
title: '保存成功',
icon: 'success'
});
},
fail(err) {
wx.getSetting({
success: (res) => {
if (!res.authSetting['scope.writePhotosAlbum']) {
// 未授权
wx.showModal({
title: '提示',
content: '小程序请求访问相册权限',
confirmText: '前往授权',
success(res) {
if (res.confirm) {
wx.openSetting({
success(res) {}
})
} else if (res.cancel) {}
}
})
}
}
})
}
})
},
// 创建二维码
createQrCode(content, canvasId, cavW, cavH) {
//调用插件中的draw方法，绘制二维码图片
QR.api.draw(content, canvasId, cavW, cavH);
this.canvasToTempImage(canvasId);
},
//获取临时缓存图片路径，存入data中
canvasToTempImage(canvasId) {
let that = this;
wx.canvasToTempFilePath({
canvasId, // 这里canvasId即之前创建的canvas-id
success: function (res) {
let tempFilePath = res.tempFilePath;
console.log(tempFilePath);
that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
qrImagePath: tempFilePath,
});
},
fail: function (res) {
console.log(res);
}
});
},
//适配不同屏幕大小的canvas
setCanvasSize(sz) {
var size = {};
try {
var res = wx.getSystemInfoSync();
var scale = 750 / sz; //不同屏幕下canvas的适配比例；设计稿是750宽
var width = res.windowWidth / scale;
var height = width; //canvas画布为正方形
size.w = width;
size.h = height;
} catch (e) {
// Do something when catch error
console.log("获取设备信息失败" + e);
}
return size;
},
// 隐藏蒙层
hideMask() {
this.setData({
authorizeVisible: false,
})
},
// 子组件事件
evtcomp(evt) {
let {
name,
data
} = evt.detail;
switch (name) {
// 隐藏弹窗
case "_evt_hide_mask":
this.hideMask();
break;
default:
break;
}
},
})
{
"usingComponents": {
"poster": "/miniprogram_dist/poster/index"
},
"navigationBarTitleText": "我的二维码"
}
@import '../../assets/scss/mixins';
@import '../../assets/scss/utils';
$contentWidth:690px;
.page {
padding-bottom: $pageBottom;
.bgc {
background: #3680EB;
}
.bg {}
.main {
font-size: 28px;
.top-space {
height: 40px;
}
.content {
position: relative;
.card {
margin: 0 auto;
// padding: 20px 0 74px;
width: $contentWidth;
// background: #FFFFFF;
// box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.10);
border-radius: 10px;
text-align: center;
font-size: 32px;
.my-card {
width: 690px;
height: 900px;
}
.avatar {
width: 120px;
height: 120px;
border-radius: 120px;
}
.nickname {
margin: 8px 0 0;
font-size: 36px;
color: #3680EB;
}
.qrcode {
margin-top: 24px;
width: 440px;
height: 440px;
}
.t1 {
margin-top: 20px;
color: #666666;
}
.t2 {
margin-top: 40px;
}
}
.tips {
margin: 20px auto 0;
color: #FFFFFF;
text-align: center;
}
.btn-wrap {
margin-top: 40px;
.btn {
margin: 0 auto;
@include btc(320px, 84px);
border-radius: 8px;
background: #FFFFFF;
color: #3680EB;
font-size: 32px;
}
}
}
}
}
<poster id="poster" hide-loading="{{true}}" preload="{{false}}" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
<view class="page">
<view class="app__bgc bgc"></view>
<view class="app__bg bg"></view>
<view class="app__content main">
<view class="top-space"></view>
<view class="content">
<view class="card">
<image bindtap="onPreviewImageHandler" class="my-card" mode="widthFix" src="{{imageUrl}}" />
<!-- <image class="avatar" mode="widthFix" src="{{userInfo.avatar}}" />
<view class="nickname">{{userInfo.nickname}}</view>
<image class="qrcode" mode="widthFix" src="{{qrImagePath}}" />
<view class="t1">深士照明</view>
<view class="t1 t2">扫码即获专属积分，兑换超值奖品</view> -->
</view>
<view class="tips">分享邀请好友加入，赢取推广积分</view>
<view class="btn-wrap">
<view bindtap="saveImageToPhotosAlbum" class="btn">保存图片</view>
</view>
</view>
</view>
</view>
<van-popup show="{{ authorizeVisible }}">
<authorize-comp bind:evtcomp="evtcomp"></authorize-comp>
</van-popup>
......@@ -60,80 +60,57 @@ Page({
// 获取海报数据
getPosterConfig() {
let qrCodeWid = 320;
let avatarWid = 56;
// 合成图片需要的数据
let {
userInfo
} = this.data;
let blocks = [{
x: 0,
y: 0,
width: 690,
height: 900,
backgroundColor: "#ffffff",
borderRadius: 10,
}];
let images = [{
x: 286,
y: 30,
width: 120,
height: 120,
borderRadius: 120,
zIndex: 11,
url: userInfo.avatar,
}, {
x: 126,
y: 220,
width: 440,
height: 440,
zIndex: 11,
url: userInfo.memberUrl,
}];
let lines = [];
let texts = [{
x: 690 / 2,
y: 192,
let blocks = []
let images = [
// 背景图
{
x: 0,
y: 0,
width: 690,
fontSize: 36,
color: "#3680EB",
textAlign: "center",
zIndex: 11,
text: userInfo.nickname,
height: 945,
url: "../../image/my-qrcode/qr-bg.png",
},
// 二维码
{
x: 690 / 2,
y: 640,
width: 690,
fontSize: 28,
color: "#666666",
textAlign: "center",
x: (690 - qrCodeWid) * .5,
y: 350,
width: qrCodeWid,
height: qrCodeWid,
zIndex: 11,
text: userInfo.memberCode,
url: userInfo.memberUrl,
},
// 头像
{
x: 690 / 2,
y: 740,
width: 690,
fontSize: 28,
color: "#666666",
textAlign: "center",
x: (690 - avatarWid) * .5,
y: 480,
width: avatarWid,
height: avatarWid,
borderRadius: 12,
zIndex: 11,
text: "深士照明",
}, {
x: 690 / 2,
y: 800,
width: 690,
fontSize: 28,
color: "#666666",
textAlign: "center",
zIndex: 11,
text: "扫码即获专属积分，兑换超值奖品",
url: userInfo.avatar,
}
];
let lines = [];
let texts = [{
x: 690 / 2,
y: 720,
width: 690,
fontSize: 18,
color: "#666666",
textAlign: "center",
zIndex: 11,
text: userInfo.memberCode,
}];
let posterData = {
width: 690,
height: 900,
height: 945,
debug: false,
blocks: blocks,
images: images,
......
......@@ -8,6 +8,7 @@ $contentWidth:690px;
.bgc {
background: #3680EB;
// background: #ffffff;
}
.bg {}
......