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 441 additions and 53 deletions
1 import QR from '../../utils/qrcode'
2 import Poster from '../../miniprogram_dist/poster/poster';
3
4 let app = getApp();
5 Page({
6 data: {
7 authorizeVisible: false,
8 userInfo: {},
9 qrImagePath: "",
10 imageUrl: "",
11 },
12 onShareAppMessage() {},
13 showAuth() {
14 this.setData({
15 authorizeVisible: true
16 })
17 },
18 onLoad(options) {
19 this.initData();
20 },
21 initData() {
22 // 获取用户信息 小程序码
23 this.queryMember().then((result) => {
24 wx.showLoading({
25 title: '二维码生成中···',
26 });
27 // 获取海报数据
28 let posterData = this.getPosterConfig();
29 // 绘制设置海报
30 this.onCreatePoster(posterData);
31 });
32 },
33
34 onPosterSuccess(e) {
35 wx.hideLoading();
36 const {
37 detail
38 } = e;
39 console.log("detail:", detail)
40 this.setData({
41 imageUrl: detail
42 })
43 },
44 onPosterFail(err) {
45 wx.hideLoading();
46 console.error(err);
47 },
48
49 /**
50 * 异步生成海报
51 */
52 onCreatePoster(posterConfig) {
53 console.log("posterConfig:", posterConfig);
54 this.setData({
55 posterConfig: posterConfig
56 }, () => {
57 Poster.create(true); // 入参：true为抹掉重新生成
58 });
59 },
60
61 // 获取海报数据
62 getPosterConfig() {
63 // 合成图片需要的数据
64 let {
65 userInfo
66 } = this.data;
67
68 let blocks = [{
69 x: 0,
70 y: 0,
71 width: 690,
72 height: 900,
73 backgroundColor: "#ffffff",
74 borderRadius: 10,
75 }];
76 let images = [{
77 x: 286,
78 y: 30,
79 width: 120,
80 height: 120,
81 borderRadius: 120,
82 zIndex: 11,
83 url: userInfo.avatar,
84 }, {
85 x: 126,
86 y: 220,
87 width: 440,
88 height: 440,
89 zIndex: 11,
90 url: userInfo.memberUrl,
91 }];
92 let lines = [];
93 let texts = [{
94 x: 690 / 2,
95 y: 192,
96 width: 690,
97 fontSize: 36,
98 color: "#3680EB",
99 textAlign: "center",
100 zIndex: 11,
101 text: userInfo.nickname,
102 },
103 {
104 x: 690 / 2,
105 y: 640,
106 width: 690,
107 fontSize: 28,
108 color: "#666666",
109 textAlign: "center",
110 zIndex: 11,
111 text: userInfo.memberCode,
112 },
113 {
114 x: 690 / 2,
115 y: 740,
116 width: 690,
117 fontSize: 28,
118 color: "#666666",
119 textAlign: "center",
120 zIndex: 11,
121 text: "深士照明",
122 }, {
123 x: 690 / 2,
124 y: 800,
125 width: 690,
126 fontSize: 28,
127 color: "#666666",
128 textAlign: "center",
129 zIndex: 11,
130 text: "扫码即获专属积分，兑换超值奖品",
131 }
132 ];
133
134 let posterData = {
135 width: 690,
136 height: 900,
137 debug: false,
138 blocks: blocks,
139 images: images,
140 lines: lines,
141 texts: texts,
142 }
143 return posterData;
144 },
145
146 /**
147 * 获取会员信息
148 */
149 queryMember() {
150 let _this = this;
151 return new Promise((resolve, reject) => {
152 app.post({
153 url: app.api.member,
154 data: {}
155 }).then((result) => {
156 let userInfo = result
157 _this.setData({
158 userInfo: userInfo,
159 qrImagePath: userInfo.memberUrl,
160 })
161 resolve();
162 })
163 });
164 },
165
166 /**
167 * 图片查看
168 */
169 onPreviewImageHandler(evt) {
170 // let curItem = getBindtapData(evt);
171 // let index = getBindtapData(evt, "index");
172 // let current = curItem[index] || '';
173 console.log("onPreviewImageHandler")
174 let current = this.data.imageUrl;
175 let urls = [current];
176 wx.previewImage({
177 current: current,
178 urls: urls
179 })
180 },
181
182 /**
183 * 保存图片到本地
184 */
185 saveImageToPhotosAlbum() {
186 let _this = this;
187 if (!_this.data.imageUrl) {
188 wx.showToast({
189 title: "图片加载中,请重试",
190 icon: "none"
191 })
192 return;
193 }
194 wx.saveImageToPhotosAlbum({
195 filePath: _this.data.imageUrl,
196 success(res) {
197 wx.showToast({
198 title: '保存成功',
199 icon: 'success'
200 });
201 },
202 fail(err) {
203 wx.getSetting({
204 success: (res) => {
205 if (!res.authSetting['scope.writePhotosAlbum']) {
206 // 未授权
207 wx.showModal({
208 title: '提示',
209 content: '小程序请求访问相册权限',
210 confirmText: '前往授权',
211 success(res) {
212 if (res.confirm) {
213 wx.openSetting({
214 success(res) {}
215 })
216 } else if (res.cancel) {}
217 }
218 })
219 }
220 }
221 })
222 }
223 })
224 },
225
226
227 // 创建二维码
228 createQrCode(content, canvasId, cavW, cavH) {
229 //调用插件中的draw方法，绘制二维码图片
230 QR.api.draw(content, canvasId, cavW, cavH);
231 this.canvasToTempImage(canvasId);
232 },
233 //获取临时缓存图片路径，存入data中
234 canvasToTempImage(canvasId) {
235 let that = this;
236 wx.canvasToTempFilePath({
237 canvasId, // 这里canvasId即之前创建的canvas-id
238 success: function (res) {
239 let tempFilePath = res.tempFilePath;
240 console.log(tempFilePath);
241 that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
242 qrImagePath: tempFilePath,
243 });
244 },
245 fail: function (res) {
246 console.log(res);
247 }
248 });
249 },
250 //适配不同屏幕大小的canvas
251 setCanvasSize(sz) {
252 var size = {};
253 try {
254 var res = wx.getSystemInfoSync();
255 var scale = 750 / sz; //不同屏幕下canvas的适配比例；设计稿是750宽
256 var width = res.windowWidth / scale;
257 var height = width; //canvas画布为正方形
258 size.w = width;
259 size.h = height;
260 } catch (e) {
261 // Do something when catch error
262 console.log("获取设备信息失败" + e);
263 }
264 return size;
265 },
266
267 // 隐藏蒙层
268 hideMask() {
269 this.setData({
270 authorizeVisible: false,
271 })
272 },
273 // 子组件事件
274 evtcomp(evt) {
275 let {
276 name,
277 data
278 } = evt.detail;
279 switch (name) {
280
281 // 隐藏弹窗
282 case "_evt_hide_mask":
283 this.hideMask();
284 break;
285
286 default:
287 break;
288 }
289 },
290
291 })
1 {
2 "usingComponents": {
3 "poster": "/miniprogram_dist/poster/index"
4 },
5 "navigationBarTitleText": "我的二维码"
6 }
1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils';
3
4 $contentWidth:690px;
5
6 .page {
7 padding-bottom: $pageBottom;
8
9 .bgc {
10 background: #3680EB;
11 }
12
13 .bg {}
14
15 .main {
16 font-size: 28px;
17
18 .top-space {
19 height: 40px;
20 }
21
22 .content {
23 position: relative;
24
25 .card {
26 margin: 0 auto;
27 // padding: 20px 0 74px;
28 width: $contentWidth;
29 // background: #FFFFFF;
30 // box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.10);
31 border-radius: 10px;
32 text-align: center;
33 font-size: 32px;
34
35 .my-card {
36 width: 690px;
37 height: 900px;
38 }
39
40 .avatar {
41 width: 120px;
42 height: 120px;
43 border-radius: 120px;
44 }
45
46 .nickname {
47 margin: 8px 0 0;
48 font-size: 36px;
49 color: #3680EB;
50 }
51
52 .qrcode {
53 margin-top: 24px;
54 width: 440px;
55 height: 440px;
56 }
57
58 .t1 {
59 margin-top: 20px;
60 color: #666666;
61 }
62
63 .t2 {
64 margin-top: 40px;
65 }
66 }
67
68 .tips {
69 margin: 20px auto 0;
70 color: #FFFFFF;
71 text-align: center;
72 }
73
74 .btn-wrap {
75 margin-top: 40px;
76
77 .btn {
78 margin: 0 auto;
79 @include btc(320px, 84px);
80 border-radius: 8px;
81 background: #FFFFFF;
82 color: #3680EB;
83 font-size: 32px;
84 }
85 }
86 }
87 }
88 }
1 <poster id="poster" hide-loading="{{true}}" preload="{{false}}" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
2 <view class="page">
3 <view class="app__bgc bgc"></view>
4 <view class="app__bg bg"></view>
5 <view class="app__content main">
6 <view class="top-space"></view>
7 <view class="content">
8 <view class="card">
9 <image bindtap="onPreviewImageHandler" class="my-card" mode="widthFix" src="{{imageUrl}}" />
10 <!-- <image class="avatar" mode="widthFix" src="{{userInfo.avatar}}" />
11 <view class="nickname">{{userInfo.nickname}}</view>
12 <image class="qrcode" mode="widthFix" src="{{qrImagePath}}" />
13 <view class="t1">深士照明</view>
14 <view class="t1 t2">扫码即获专属积分，兑换超值奖品</view> -->
15 </view>
16 <view class="tips">分享邀请好友加入，赢取推广积分</view>
17 <view class="btn-wrap">
18 <view bindtap="saveImageToPhotosAlbum" class="btn">保存图片</view>
19 </view>
20 </view>
21 </view>
22 </view>
23 <van-popup show="{{ authorizeVisible }}">
24 <authorize-comp bind:evtcomp="evtcomp"></authorize-comp>
25 </van-popup>
...@@ -60,80 +60,57 @@ Page({ ...@@ -60,80 +60,57 @@ Page({
60 60
61 // 获取海报数据 61 // 获取海报数据
62 getPosterConfig() { 62 getPosterConfig() {
63 let qrCodeWid = 320;
64 let avatarWid = 56;
63 // 合成图片需要的数据 65 // 合成图片需要的数据
64 let { 66 let {
65 userInfo 67 userInfo
66 } = this.data; 68 } = this.data;
67 69 let blocks = []
68 let blocks = [{ 70 let images = [
71 // 背景图
72 {
69 x: 0, 73 x: 0,
70 y: 0, 74 y: 0,
71 width: 690, 75 width: 690,
72 height: 900, 76 height: 945,
73 backgroundColor: "#ffffff", 77 url: "../../image/my-qrcode/qr-bg.png",
74 borderRadius: 10,
75 }];
76 let images = [{
77 x: 286,
78 y: 30,
79 width: 120,
80 height: 120,
81 borderRadius: 120,
82 zIndex: 11,
83 url: userInfo.avatar,
84 }, {
85 x: 126,
86 y: 220,
87 width: 440,
88 height: 440,
89 zIndex: 11,
90 url: userInfo.memberUrl,
91 }];
92 let lines = [];
93 let texts = [{
94 x: 690 / 2,
95 y: 192,
96 width: 690,
97 fontSize: 36,
98 color: "#3680EB",
99 textAlign: "center",
100 zIndex: 11,
101 text: userInfo.nickname,
102 }, 78 },
79 // 二维码
103 { 80 {
104 x: 690 / 2, 81 x: (690 - qrCodeWid) * .5,
105 y: 640, 82 y: 350,
106 width: 690, 83 width: qrCodeWid,
107 fontSize: 28, 84 height: qrCodeWid,
108 color: "#666666",
109 textAlign: "center",
110 zIndex: 11, 85 zIndex: 11,
111 text: userInfo.memberCode, 86 url: userInfo.memberUrl,
112 }, 87 },
88 // 头像
113 { 89 {
114 x: 690 / 2, 90 x: (690 - avatarWid) * .5,
115 y: 740, 91 y: 480,
116 width: 690, 92 width: avatarWid,
117 fontSize: 28, 93 height: avatarWid,
118 color: "#666666", 94 borderRadius: 12,
119 textAlign: "center",
120 zIndex: 11, 95 zIndex: 11,
121 text: "深士照明", 96 url: userInfo.avatar,
122 }, { 97 }
98 ];
99 let lines = [];
100 let texts = [{
123 x: 690 / 2, 101 x: 690 / 2,
124 y: 800, 102 y: 720,
125 width: 690, 103 width: 690,
126 fontSize: 28, 104 fontSize: 18,
127 color: "#666666", 105 color: "#666666",
128 textAlign: "center", 106 textAlign: "center",
129 zIndex: 11, 107 zIndex: 11,
130 text: "扫码即获专属积分，兑换超值奖品", 108 text: userInfo.memberCode,
131 } 109 }];
132 ];
133 110
134 let posterData = { 111 let posterData = {
135 width: 690, 112 width: 690,
136 height: 900, 113 height: 945,
137 debug: false, 114 debug: false,
138 blocks: blocks, 115 blocks: blocks,
139 images: images, 116 images: images,
......
...@@ -8,6 +8,7 @@ $contentWidth:690px; ...@@ -8,6 +8,7 @@ $contentWidth:690px;
8 8
9 .bgc { 9 .bgc {
10 background: #3680EB; 10 background: #3680EB;
11 // background: #ffffff;
11 } 12 }
12 13
13 .bg {} 14 .bg {}
......