Skip to content

dev / zhiliang-light-mp

Go to a project
Toggle navigation
Toggle navigation pinning
11d4ac48 by simon
Options

no message

1 parent cbf060d5
Expand all
Inline Side-by-side
Showing 16 changed files with 367 additions and 77 deletions
1 {
2 "component": true
3 }
...\ No newline at end of file ...\ No newline at end of file
1 <!--index.wxml-->
2 <view class="container">
3 <canvas canvas-id='canvasid' class="canvas {{debug ? 'debug' : 'pro'}}" style='width: {{pxWidth}}px; height: {{pxHeight}}px;'></canvas>
4 </view>
1 .canvas {
2 width: 750rpx;
3 height: 750rpx;
4 }
5 .canvas.pro {
6 position: absolute;
7 bottom: 0;
8 left: 0;
9 transform: translate3d(-9999rpx, 0, 0);
10 }
11 .canvas.debug {
12 position: absolute;
13 bottom: 0;
14 left: 0;
15 border: 1rpx solid #ccc;
16 }
...\ No newline at end of file ...\ No newline at end of file
1 Component({
2 properties: {
3 config: {
4 type: Object,
5 value: {},
6 },
7 preload: { // 是否预下载图片资源
8 type: Boolean,
9 value: false,
10 },
11 hideLoading: { // 是否隐藏loading
12 type: Boolean,
13 value: false,
14 }
15 },
16 ready() {
17 if (this.data.preload) {
18 const poster = this.selectComponent('#poster');
19 this.downloadStatus = 'doing';
20 poster.downloadResource(this.data.config.images).then(() => {
21 this.downloadStatus = 'success';
22 this.trigger('downloadSuccess');
23 }).catch((e) => {
24 this.downloadStatus = 'fail';
25 this.trigger('downloadFail', e);
26 });
27 }
28 },
29 methods: {
30 trigger(event, data) {
31 if (this.listener && typeof this.listener[event] === 'function') {
32 this.listener[event](data);
33 }
34 },
35 once(event, fun) {
36 if (typeof this.listener === 'undefined') {
37 this.listener = {};
38 }
39 this.listener[event] = fun;
40 },
41 downloadResource(reset) {
42 return new Promise((resolve, reject) => {
43 if (reset) {
44 this.downloadStatus = null;
45 }
46 const poster = this.selectComponent('#poster');
47 if (this.downloadStatus && this.downloadStatus !== 'fail') {
48 if (this.downloadStatus === 'success') {
49 resolve();
50 } else {
51 this.once('downloadSuccess', () => resolve());
52 this.once('downloadFail', (e) => reject(e));
53 }
54 } else {
55 poster.downloadResource(this.data.config.images)
56 .then(() => {
57 this.downloadStatus = 'success';
58 resolve();
59 })
60 .catch((e) => reject(e));
61 }
62 })
63 },
64 onCreate(reset = false) {
65 !this.data.hideLoading && wx.showLoading({ mask: true, title: '生成中' });
66 return this.downloadResource(typeof reset === 'boolean' && reset).then(() => {
67 !this.data.hideLoading && wx.hideLoading();
68 const poster = this.selectComponent('#poster');
69 poster.create(this.data.config);
70 })
71 .catch((err) => {
72 !this.data.hideLoading && wx.hideLoading();
73 wx.showToast({ icon: 'none', title: err.errMsg || '生成失败' });
74 console.error(err);
75 this.triggerEvent('fail', err);
76 })
77 },
78 onCreateSuccess(e) {
79 const { detail } = e;
80 this.triggerEvent('success', detail);
81 },
82 onCreateFail(err) {
83 console.error(err);
84 this.triggerEvent('fail', err);
85 }
86 }
87 })
...\ No newline at end of file ...\ No newline at end of file
1 {
2 "component": true,
3 "usingComponents": {
4 "we-canvas": "../index/index"
5 }
6 }
...\ No newline at end of file ...\ No newline at end of file
1 <view bindtap='onCreate'>
2 <slot/>
3 </view>
4 <we-canvas id="poster" bind:success="onCreateSuccess" bind:fail="onCreateFail"/>
...\ No newline at end of file ...\ No newline at end of file
1 const defaultOptions = {
2 selector: '#poster'
3 };
4
5 function Poster(options = {}) {
6 options = {
7 ...defaultOptions,
8 ...options,
9 };
10
11 const pages = getCurrentPages();
12 const ctx = pages[pages.length - 1];
13
14 const poster = ctx.selectComponent(options.selector);
15 delete options.selector;
16
17 return poster;
18 };
19
20 Poster.create = (reset = false) => {
21 const poster = Poster();
22 if (!poster) {
23 console.error('请设置组件的id="poster"!!!');
24 } else {
25 return Poster().onCreate(reset);
26 }
27 }
28
29 export default Poster;
...\ No newline at end of file ...\ No newline at end of file
...@@ -15,7 +15,7 @@ Page({ ...@@ -15,7 +15,7 @@ Page({
15 name: "", 15 name: "",
16 phone: "", 16 phone: "",
17 messageContant: "", // 单词拼写错误 17 messageContant: "", // 单词拼写错误
18 18 userInfo: {},
19 19
20 }, 20 },
21 onShareAppMessage() {}, 21 onShareAppMessage() {},
...@@ -31,7 +31,31 @@ Page({ ...@@ -31,7 +31,31 @@ Page({
31 // this.setData({ 31 // this.setData({
32 // commonTipsCompVisible: false 32 // commonTipsCompVisible: false
33 // }) 33 // })
34 this.queryMember().then((result) => {
35 this.setData({
36 name:result.nickname
37 })
38 });
34 }, 39 },
40
41 /**
42 * 获取会员信息
43 */
44 queryMember() {
45 return new Promise((resolve, reject) => {
46 app.post({
47 url: app.api.member,
48 data: {}
49 }).then((result) => {
50 this.setData({
51 userInfo: result
52 })
53 resolve(result);
54 })
55 });
56 },
57
58
35 /** 59 /**
36 * 提交表单 60 * 提交表单
37 */ 61 */
...@@ -55,14 +79,14 @@ Page({ ...@@ -55,14 +79,14 @@ Page({
55 }) 79 })
56 return; 80 return;
57 } 81 }
58 if (!phone) { 82 // if (!phone) {
59 wx.showToast({ 83 // wx.showToast({
60 title: "请输入联系方式", 84 // title: "请输入联系方式",
61 icon: 'none' 85 // icon: 'none'
62 }) 86 // })
63 return; 87 // return;
64 } 88 // }
65 if (!checkMobile(phone)) { 89 if (phone && !checkMobile(phone)) {
66 wx.showToast({ 90 wx.showToast({
67 title: "请输入正确联系方式", 91 title: "请输入正确联系方式",
68 icon: 'none' 92 icon: 'none'
......
...@@ -8,11 +8,11 @@ ...@@ -8,11 +8,11 @@
8 <view class="form"> 8 <view class="form">
9 <view class="form-item"> 9 <view class="form-item">
10 <view class="label">用户姓名</view> 10 <view class="label">用户姓名</view>
11 <input class="val" bindinput="bindNameInput" placeholder="请输入姓名" /> 11 <input value="{{name}}" class="val" bindinput="bindNameInput" placeholder="请输入姓名" />
12 </view> 12 </view>
13 <view class="form-item"> 13 <view class="form-item">
14 <view class="label">联系方式</view> 14 <view class="label">联系方式</view>
15 <input class="val" bindinput="bindPhoneInput" placeholder="请输入联系方式" type="number" /> 15 <input class="val" bindinput="bindPhoneInput" placeholder="选填" type="number" />
16 </view> 16 </view>
17 <textarea class="textarea" bindinput="bindMessageContantInput" maxlength="500" placeholder="不超过500字"></textarea> 17 <textarea class="textarea" bindinput="bindMessageContantInput" maxlength="500" placeholder="不超过500字"></textarea>
18 <!-- 图片上传 --> 18 <!-- 图片上传 -->
......
1 import QR from '../../utils/qrcode' 1 import QR from '../../utils/qrcode'
2 import Poster from '../../miniprogram_dist/poster/poster';
2 3
3 let app = getApp(); 4 let app = getApp();
4 Page({ 5 Page({
...@@ -18,10 +19,115 @@ Page({ ...@@ -18,10 +19,115 @@ Page({
18 this.initData(); 19 this.initData();
19 }, 20 },
20 initData() { 21 initData() {
22 // 获取用户信息 小程序码
21 this.queryMember().then((result) => { 23 this.queryMember().then((result) => {
24 // 获取海报数据
25 let posterData = this.getPosterConfig();
26 // 绘制设置海报
27 this.onCreatePoster(posterData);
28 });
29 },
30
31 onPosterSuccess(e) {
32 wx.hideLoading();
33 const {
34 detail
35 } = e;
36 console.log("detail:", detail)
37 this.setData({
38 imageUrl: detail
39 })
40 },
41 onPosterFail(err) {
42 wx.hideLoading();
43 console.error(err);
44 },
22 45
46 /**
47 * 异步生成海报
48 */
49 onCreatePoster(posterConfig) {
50 console.log("posterConfig:", posterConfig);
51 this.setData({
52 posterConfig: posterConfig
53 }, () => {
54 Poster.create(true); // 入参：true为抹掉重新生成
23 }); 55 });
24 }, 56 },
57
58 // 获取海报数据
59 getPosterConfig() {
60 // 合成图片需要的数据
61 let {
62 userInfo
63 } = this.data;
64
65 let blocks = [{
66 x: 0,
67 y: 0,
68 width: 690,
69 height: 900,
70 backgroundColor: "#ffffff",
71 borderRadius: 10,
72 }];
73 let images = [{
74 x: 286,
75 y: 30,
76 width: 120,
77 height: 120,
78 borderRadius: 120,
79 zIndex: 11,
80 url: userInfo.avatar,
81 }, {
82 x: 126,
83 y: 220,
84 width: 440,
85 height: 440,
86 zIndex: 11,
87 url: userInfo.memberUrl,
88 }];
89 let lines = [];
90 let texts = [{
91 x: 690 / 2,
92 y: 192,
93 width: 690,
94 fontSize: 36,
95 color: "#3680EB",
96 textAlign: "center",
97 zIndex: 11,
98 text: userInfo.nickname,
99 }, {
100 x: 690 / 2,
101 y: 720,
102 width: 690,
103 fontSize: 28,
104 color: "#666666",
105 textAlign: "center",
106 zIndex: 11,
107 text: "深士照明",
108 }, {
109 x: 690 / 2,
110 y: 800,
111 width: 690,
112 fontSize: 28,
113 color: "#666666",
114 textAlign: "center",
115 zIndex: 11,
116 text: "扫码即获专属积分，兑换超值奖品",
117 }];
118
119 let posterData = {
120 width: 690,
121 height: 900,
122 debug: false,
123 blocks: blocks,
124 images: images,
125 lines: lines,
126 texts: texts,
127 }
128 return posterData;
129 },
130
25 /** 131 /**
26 * 获取会员信息 132 * 获取会员信息
27 */ 133 */
...@@ -37,73 +143,15 @@ Page({ ...@@ -37,73 +143,15 @@ Page({
37 userInfo: userInfo, 143 userInfo: userInfo,
38 qrImagePath: userInfo.memberUrl, 144 qrImagePath: userInfo.memberUrl,
39 }) 145 })
40
41 wx.downloadFile({
42 url: userInfo.memberUrl,
43 success(res) {
44 if (res.statusCode === 200) {
45 _this.setData({
46 imageUrl: res.tempFilePath
47 })
48 }
49 }
50 })
51
52 // 生成个人二维码
53 // let tlMemberCode = userInfo.memberCode;
54 // let qrSize = this.setCanvasSize(440);
55 // let codeContent = `tlMemberCode=${tlMemberCode}`
56 // this.createQrCode(codeContent, 'qrcanvas', qrSize.w, qrSize.h);
57
58 resolve(); 146 resolve();
59 }) 147 })
60 }); 148 });
61 }, 149 },
62 150
63 createQrCode(content, canvasId, cavW, cavH) {
64 //调用插件中的draw方法，绘制二维码图片
65 QR.api.draw(content, canvasId, cavW, cavH);
66 this.canvasToTempImage(canvasId);
67 },
68 //获取临时缓存图片路径，存入data中
69 canvasToTempImage(canvasId) {
70 let that = this;
71 wx.canvasToTempFilePath({
72 canvasId, // 这里canvasId即之前创建的canvas-id
73 success: function (res) {
74 let tempFilePath = res.tempFilePath;
75 console.log(tempFilePath);
76 that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
77 qrImagePath: tempFilePath,
78 });
79 },
80 fail: function (res) {
81 console.log(res);
82 }
83 });
84 },
85 //适配不同屏幕大小的canvas
86 setCanvasSize(sz) {
87 var size = {};
88 try {
89 var res = wx.getSystemInfoSync();
90 var scale = 750 / sz; //不同屏幕下canvas的适配比例；设计稿是750宽
91 var width = res.windowWidth / scale;
92 var height = width; //canvas画布为正方形
93 size.w = width;
94 size.h = height;
95 } catch (e) {
96 // Do something when catch error
97 console.log("获取设备信息失败" + e);
98 }
99 return size;
100 },
101
102 /** 151 /**
103 * 保存图片到本地 152 * 保存图片到本地
104 */ 153 */
105 saveImageToPhotosAlbum() { 154 saveImageToPhotosAlbum() {
106 console.log("saveImageToPhotosAlbum");
107 let _this = this; 155 let _this = this;
108 if (!_this.data.imageUrl) { 156 if (!_this.data.imageUrl) {
109 wx.showToast({ 157 wx.showToast({
...@@ -143,4 +191,52 @@ Page({ ...@@ -143,4 +191,52 @@ Page({
143 } 191 }
144 }) 192 })
145 }, 193 },
194
195
196
197
198
199
200
201 // 创建二维码
202 createQrCode(content, canvasId, cavW, cavH) {
203 //调用插件中的draw方法，绘制二维码图片
204 QR.api.draw(content, canvasId, cavW, cavH);
205 this.canvasToTempImage(canvasId);
206 },
207 //获取临时缓存图片路径，存入data中
208 canvasToTempImage(canvasId) {
209 let that = this;
210 wx.canvasToTempFilePath({
211 canvasId, // 这里canvasId即之前创建的canvas-id
212 success: function (res) {
213 let tempFilePath = res.tempFilePath;
214 console.log(tempFilePath);
215 that.setData({ // 如果采用mpvue,即 this.imagePath = tempFilePath
216 qrImagePath: tempFilePath,
217 });
218 },
219 fail: function (res) {
220 console.log(res);
221 }
222 });
223 },
224 //适配不同屏幕大小的canvas
225 setCanvasSize(sz) {
226 var size = {};
227 try {
228 var res = wx.getSystemInfoSync();
229 var scale = 750 / sz; //不同屏幕下canvas的适配比例；设计稿是750宽
230 var width = res.windowWidth / scale;
231 var height = width; //canvas画布为正方形
232 size.w = width;
233 size.h = height;
234 } catch (e) {
235 // Do something when catch error
236 console.log("获取设备信息失败" + e);
237 }
238 return size;
239 },
240
241
146 }) 242 })
......
1 { 1 {
2 "usingComponents": {
3 "poster": "/miniprogram_dist/poster/index"
4 },
2 "navigationBarTitleText": "我的二维码" 5 "navigationBarTitleText": "我的二维码"
3 } 6 }
......
...@@ -24,14 +24,19 @@ $contentWidth:690px; ...@@ -24,14 +24,19 @@ $contentWidth:690px;
24 24
25 .card { 25 .card {
26 margin: 0 auto; 26 margin: 0 auto;
27 padding: 20px 0 74px; 27 // padding: 20px 0 74px;
28 width: $contentWidth; 28 width: $contentWidth;
29 background: #FFFFFF; 29 // background: #FFFFFF;
30 box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.10); 30 // box-shadow: 0 3px 9px 0 rgba(0, 0, 0, 0.10);
31 border-radius: 10px; 31 border-radius: 10px;
32 text-align: center; 32 text-align: center;
33 font-size: 32px; 33 font-size: 32px;
34 34
35 .my-card {
36 width: 690px;
37 height: 900px;
38 }
39
35 .avatar { 40 .avatar {
36 width: 120px; 41 width: 120px;
37 height: 120px; 42 height: 120px;
......
1 <poster id="poster" hide-loading="{{true}}" preload="{{false}}" config="{{posterConfig}}" bind:success="onPosterSuccess" bind:fail="onPosterFail"></poster>
1 <view class="page"> 2 <view class="page">
2 <view class="app__bgc bgc"></view> 3 <view class="app__bgc bgc"></view>
3 <view class="app__bg bg"></view> 4 <view class="app__bg bg"></view>
...@@ -5,13 +6,12 @@ ...@@ -5,13 +6,12 @@
5 <view class="top-space"></view> 6 <view class="top-space"></view>
6 <view class="content"> 7 <view class="content">
7 <view class="card"> 8 <view class="card">
8 <image class="avatar" mode="widthFix" src="{{userInfo.avatar}}" /> 9 <image class="my-card" mode="widthFix" src="{{imageUrl}}" />
10 <!-- <image class="avatar" mode="widthFix" src="{{userInfo.avatar}}" />
9 <view class="nickname">{{userInfo.nickname}}</view> 11 <view class="nickname">{{userInfo.nickname}}</view>
10 <image class="qrcode" mode="widthFix" src="{{qrImagePath}}" /> 12 <image class="qrcode" mode="widthFix" src="{{qrImagePath}}" />
11 <!-- <image wx:if="{{qrImagePath}}" class="qrcode" mode="widthFix" src="{{qrImagePath}}" />
12 <canvas wx:else class="qrcode" style="visibility: hidden;" canvas-id="qrcanvas" /> -->
13 <view class="t1">深士照明</view> 13 <view class="t1">深士照明</view>
14 <view class="t1 t2">扫码即获专属积分，兑换超值奖品</view> 14 <view class="t1 t2">扫码即获专属积分，兑换超值奖品</view> -->
15 </view> 15 </view>
16 <view class="tips">分享邀请好友加入，赢取推广积分</view> 16 <view class="tips">分享邀请好友加入，赢取推广积分</view>
17 <view class="btn-wrap"> 17 <view class="btn-wrap">
......
...@@ -94,8 +94,21 @@ Page({ ...@@ -94,8 +94,21 @@ Page({
94 parentId: "" 94 parentId: ""
95 } 95 }
96 }).then((result) => { 96 }).then((result) => {
97 let provinceList = result;
98 // ---- start 把广东移动到第一条
99 for (var i = 0; i < provinceList.length; i++) {
100 let key = provinceList[i].areaName.indexOf('广东');
101 if (key != -1) {
102 let target = provinceList[i];
103 provinceList.unshift(target);
104 provinceList.splice(i + 1, 1);
105 break;
106 }
107 }
108 // ---- end 把广东移动到第一条
109
97 this.setData({ 110 this.setData({
98 provinceList: result 111 provinceList: provinceList
99 }) 112 })
100 console.log("provinceList:", result); 113 console.log("provinceList:", result);
101 }) 114 })
......