Skip to content

dev / marubi-wish-list-mp

Go to a project
Toggle navigation
Toggle navigation pinning
678744e3 by simon
Options

版本提交

1 parent 28e34513
Inline Side-by-side
Showing 40 changed files with 1705 additions and 28 deletions
...@@ -33,6 +33,7 @@ App({ ...@@ -33,6 +33,7 @@ App({
33 loading: true, 33 loading: true,
34 }).then((result) => { 34 }).then((result) => {
35 this.globalData.indexInfo = result; 35 this.globalData.indexInfo = result;
36 this.globalData.userInfo = result.userInfo;
36 if (result.isNeedAuth == 1) { 37 if (result.isNeedAuth == 1) {
37 //需要授权 38 //需要授权
38 this.router.push({ 39 this.router.push({
......
...@@ -105,6 +105,7 @@ ...@@ -105,6 +105,7 @@
105 105
106 // 通用按钮 106 // 通用按钮
107 @mixin cb($width:320px, $height:80px, $fontSize:32px) { 107 @mixin cb($width:320px, $height:80px, $fontSize:32px) {
108 font-weight: 300;
108 position: relative; 109 position: relative;
109 width: $width; 110 width: $width;
110 height: $height; 111 height: $height;
......
1 let app = getApp();
2 Component({
3 properties: {
4 // 这里定义了innerText属性，属性值可以在组件使用时指定
5 innerText: {
6 type: String,
7 value: 'default value',
8 }
9 },
10 data: {
11 // 这里是一些组件内部数据
12 someData: {}
13 },
14 methods: {
15 // 这里是一个自定义方法
16 customMethod() {
17 this.triggerEvent('evtcomp', {
18 name: "_evt_custom"
19 })
20 },
21 // 隐藏蒙层
22 hideMask() {
23 this.triggerEvent('evtcomp', {
24 name: "_evt_hide_mask"
25 });
26 },
27 toMyWishHandler() {
28 app.router.push({
29 openType: "reLaunchs",
30 path: "wish"
31 })
32 }
33 }
34 })
1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils';
3
4 .comp-item {
5 position: relative;
6 width: 654px;
7 height: 732px;
8
9 font-weight: 300;
10
11 // background-color: wheat;
12 .bg {
13 position: absolute;
14 width: 654px;
15 height: 732px;
16 }
17
18 .cont {
19 position: relative;
20 text-align: center;
21 color: #333333;
22
23 .space1 {
24 height: 92px;
25 }
26
27 .tit {
28 color: #ba3038;
29 font-size: 36px;
30 }
31
32 .tips {
33 margin-top: 42px;
34 font-size: 32px;
35
36 .val {
37 color: #ba3138;
38 }
39 }
40
41 }
42
43
44 .btn-wrap {
45 position: absolute;
46 left: 0;
47 right: 0;
48 bottom: 100px;
49 display: flex;
50 justify-content: center;
51 padding: 0 50px;
52 @extend .bb;
53
54 .btn {
55 margin: 0 auto;
56 @include cb(234px, 64px);
57 }
58
59 .btn2 {
60 border: solid 1px #b83138;
61 background: transparent;
62 color: #ba3039;
63 }
64 }
65
66
67
68
69 }
70
71 // 心愿
72 .wish {
73 position: relative;
74 margin: 0 auto 0;
75 display: flex;
76 justify-content: space-between;
77 @extend .bb;
78 // padding-top: 116px;
79 padding: 56px 80px 0;
80
81 &-item {
82 position: relative;
83 text-align: center;
84
85 .display {
86 position: relative;
87 width: 140px;
88 height: 140px;
89 border-radius: 70px;
90 background-image: radial-gradient(circle at 0 0, #ffffff, #f2e6e6);
91 @extend .fcc;
92
93 .prod {
94 max-width: 200px;
95 max-height: 200px;
96 margin-bottom: 10px;
97 }
98
99 .close {
100 width: 30px;
101 height: 30px;
102 position: absolute;
103 bottom: 0;
104 right: 0;
105 }
106 }
107
108 .name {
109 width: 160px;
110 margin: 8px auto 0;
111 color: #333333;
112 font-size: 20px;
113 // font-weight: 300;
114 }
115
116 .val {
117 @extend .fcc;
118 color: #b93138;
119 font-size: 20px;
120 margin-top: 12px;
121
122 .icon {
123 margin-left: 6px;
124 width: 11px;
125 height: 18px;
126 }
127 }
128 }
129 }
1 <view class="comp-item">
2 <image class="bg" src="../../image/oss/tips/tips-create-complete.png" mode="widthFix" />
3 <view class="cont">
4 <view class="space1"></view>
5 <view class="tit">· 太棒了 ·</view>
6 <view class="tips">
7 共获得
8 <span class="val">100</span>
9 弹力值
10 </view>
11 <!-- 心愿容器 -->
12 <view class="wish">
13 <view class="wish-item">
14 <view class="display">
15 <image class="prod" mode="aspectFit" src="../../image/oss/prize/prize_3.png" />
16 <!-- <image class="close" mode="widthFix" src="../../image/oss/create-wish/cw-close-btn.png" /> -->
17 </view>
18 <!-- <view class="name">丸美弹力蛋白凝时紧致乳</view> -->
19 <view class="val">
20 <image class="icon" mode="widthFix" src="../../image/oss/create-wish/cw-light.png" />
21 获得20
22 </view>
23 </view>
24 <view class="wish-item">
25 <view class="display">
26 <image class="prod" mode="aspectFit" src="../../image/oss/prize/prize_2.png" />
27 <!-- <image class="close" mode="widthFix" src="../../image/oss/create-wish/cw-close-btn.png" /> -->
28 </view>
29 <!-- <view class="name">丸美弹力蛋白凝时紧致乳</view> -->
30 <view class="val">
31 <image class="icon" mode="widthFix" src="../../image/oss/create-wish/cw-light.png" />
32 获得20
33 </view>
34 </view>
35 <view class="wish-item">
36 <view class="display">
37 <image class="prod" mode="aspectFit" src="../../image/oss/prize/prize_1.png" />
38 <!-- <image class="close" mode="widthFix" src="../../image/oss/create-wish/cw-close-btn.png" /> -->
39 </view>
40 <!-- <view class="name">丸美弹力蛋白凝时紧致乳</view> -->
41 <view class="val">
42 <image class="icon" mode="widthFix" src="../../image/oss/create-wish/cw-light.png" />
43 获得20
44 </view>
45 </view>
46 </view>
47 </view>
48 <view class="btn-wrap">
49 <view bindtap="toMyWishHandler" class="btn">立即查看</view>
50 </view>
51 </view>
...@@ -24,8 +24,12 @@ Component({ ...@@ -24,8 +24,12 @@ Component({
24 this.triggerEvent('_evt_hide_mask', { 24 this.triggerEvent('_evt_hide_mask', {
25 name: "_evt_custom" 25 name: "_evt_custom"
26 }) 26 })
27 // app.router.push({
28 // path:"question"
29 // })
27 app.router.push({ 30 app.router.push({
28 path:"question" 31 openType: "reLaunchs",
32 path: "wish"
29 }) 33 })
30 } 34 }
31 } 35 }
......
...@@ -4,13 +4,13 @@ ...@@ -4,13 +4,13 @@
4 .comp-item { 4 .comp-item {
5 position: relative; 5 position: relative;
6 width: 654px; 6 width: 654px;
7 height: 588px; 7 height: 861px;
8 8
9 // background-color: wheat; 9 // background-color: wheat;
10 .bg { 10 .bg {
11 position: absolute; 11 position: absolute;
12 width: 654px; 12 width: 654px;
13 height: 588px; 13 height: 861px;
14 } 14 }
15 15
16 .space1 { 16 .space1 {
......
1 Component({
2 properties: {
3 // 这里定义了innerText属性，属性值可以在组件使用时指定
4 innerText: {
5 type: String,
6 value: 'default value',
7 }
8 },
9 data: {
10 // 这里是一些组件内部数据
11 someData: {}
12 },
13 methods: {
14 // 这里是一个自定义方法
15 customMethod() {
16 this.triggerEvent('evtcomp', {
17 name: "_evt_custom"
18 })
19 },
20 // 隐藏蒙层
21 hideMask() {
22 this.triggerEvent('evtcomp', {
23 name: "_evt_hide_mask"
24 });
25 },
26 onCreateHandler(){
27 this.triggerEvent('evtcomp', {
28 name: "_evt_create_wish"
29 });
30 }
31 }
32 })
1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils';
3
4 .comp-item {
5 position: relative;
6 width: 654px;
7 height: 951px;
8
9 // background-color: wheat;
10 .bg {
11 position: absolute;
12 width: 654px;
13 height: 951px;
14 }
15
16
17 .cont {
18 position: relative;
19
20 .space1 {
21 height: 250px;
22 }
23
24 // 心愿列表
25 .wish {
26 @extend .bb;
27 padding: 0 80px;
28
29 .row {
30 display: flex;
31
32 }
33
34 .row2 {
35 justify-content: flex-end;
36
37 .desc {
38 padding-left: 32px;
39 }
40 }
41
42 .wish-item {
43 width: 420px;
44 height: 122px;
45 box-shadow: 0px 6px 30px 0 rgba(0, 0, 0, 0.3);
46 background-color: #ffffff;
47 display: flex;
48 justify-content: center;
49 margin-bottom: 32px;
50
51 .prod {
52 position: relative;
53 width: 122px;
54 height: 122px;
55 text-align: center;
56
57 image {
58 position: absolute;
59 max-width: 120px;
60 max-height: 120px;
61 bottom: 12px;
62 left: 0;
63 right: 0;
64 margin: 0 auto;
65 }
66 }
67
68 .desc {
69 width: 300px;
70 font-weight: 300;
71 font-size: 22px;
72 display: flex;
73 flex-wrap: wrap;
74 align-content: center;
75 @extend .bb;
76
77 .name {
78 color: #333333;
79 }
80
81 .val {
82 font-size: 18px;
83 color: #999999;
84 margin-top: 4px;
85 }
86 }
87 }
88
89
90
91 &-item2 {
92 justify-self: flex-end;
93 align-self: flex-end;
94 }
95
96 }
97
98 // 累计心愿值
99 .wish-val {
100 @extend .fcc;
101 color: #333333;
102 font-size: 24px;
103
104 .icon {
105 width: 12px;
106 height: 25px;
107 margin-right: 8px;
108 }
109
110 .val {
111 color: #b93138;
112 }
113 }
114
115 }
116
117
118 .btn-wrap {
119 position: absolute;
120 left: 0;
121 right: 0;
122 bottom: 100px;
123 display: flex;
124 justify-content: center;
125 padding: 0 50px;
126 @extend .bb;
127
128 .btn {
129 margin: 0 auto;
130 @include cb(234px, 64px);
131 }
132
133 .btn2 {
134 border: solid 1px #b83138;
135 background: transparent;
136 color: #ba3039;
137 }
138 }
139
140
141
142 }
1 <view class="comp-item">
2 <image class="bg" src="../../image/oss/tips/tips-wish.png" mode="widthFix" />
3 <view class="cont">
4 <view class="space1"></view>
5 <view class="wish">
6 <view class="row">
7 <view class="wish-item">
8 <view class="prod">
9 <image mode="widthFix" src="../../image/oss/prize/prize_1.png" />
10 </view>
11 <view class="desc">
12 <view class="name">丸美弹力蛋白凝时紧致乳</view>
13 <view class="val">需弹力值：5480</view>
14 </view>
15 </view>
16 </view>
17 <view class="row row2">
18 <view class="wish-item ">
19 <view class="desc">
20 <view class="name">丸美弹力蛋白凝时紧致乳</view>
21 <view class="val">需弹力值：5480</view>
22 </view>
23 <view class="prod">
24 <image mode="widthFix" src="../../image/oss/prize/prize_2.png" />
25 </view>
26 </view>
27 </view>
28 <view class="row">
29 <view class="wish-item">
30 <view class="prod">
31 <image mode="widthFix" src="../../image/oss/prize/prize_3.png" />
32 </view>
33 <view class="desc">
34 <view class="name">丸美弹力蛋白凝时紧致乳</view>
35 <view class="val">需弹力值：5480</view>
36 </view>
37 </view>
38 </view>
39 </view>
40 <view class="wish-val">
41 <image class="icon" mode="widthFix" src="../../image/oss/question/question-light.png" />
42 累计心愿单所需弹力值：
43 <span class="val">2500</span>
44 </view>
45 </view>
46 <view class="btn-wrap">
47 <view bindtap="hideMask" class="btn btn2">返回修改</view>
48 <view bindtap="onCreateHandler" class="btn">马上创建</view>
49 </view>
50 </view>
...@@ -22,4 +22,5 @@ module.exports = { ...@@ -22,4 +22,5 @@ module.exports = {
22 wishbillAcceptTypeSubmit: '/warubiEyeCreamApi/app/wishbill/accept/type/submit', // post 提交礼品领取方式 22 wishbillAcceptTypeSubmit: '/warubiEyeCreamApi/app/wishbill/accept/type/submit', // post 提交礼品领取方式
23 wishbillAddressSubmit: '/warubiEyeCreamApi/app/wishbill/address/submit', // post 提交邮寄地址 23 wishbillAddressSubmit: '/warubiEyeCreamApi/app/wishbill/address/submit', // post 提交邮寄地址
24 wishbillStoreAppoint: '/warubiEyeCreamApi/app/wishbill/store/appoint', // post 预约自提门店 24 wishbillStoreAppoint: '/warubiEyeCreamApi/app/wishbill/store/appoint', // post 预约自提门店
25 wxacodeGet: '/warubiEyeCreamApi/app/qrcode/create', //
25 } 26 }
......
1 const main = {
2 /**
3 * 渲染块
4 * @param {Object} params
5 */
6 drawBlock({ text, width = 0, height, x, y, paddingLeft = 0, paddingRight = 0, borderWidth, backgroundColor, borderColor, borderRadius = 0, opacity = 1 }) {
7 // 判断是否块内有文字
8 let blockWidth = 0; // 块的宽度
9 let textX = 0;
10 let textY = 0;
11 if (typeof text !== 'undefined') {
12 // 如果有文字并且块的宽度小于文字宽度，块的宽度为 文字的宽度 + 内边距
13 const textWidth = this._getTextWidth(typeof text.text === 'string' ? text : text.text);
14 blockWidth = textWidth > width ? textWidth : width;
15 blockWidth += paddingLeft + paddingLeft;
16
17 const { textAlign = 'left', text: textCon } = text;
18 textY = height / 2 + y; // 文字的y轴坐标在块中线
19 if (textAlign === 'left') {
20 // 如果是右对齐，那x轴在块的最左边
21 textX = x + paddingLeft;
22 } else if (textAlign === 'center') {
23 textX = blockWidth / 2 + x;
24 } else {
25 textX = x + blockWidth - paddingRight;
26 }
27 } else {
28 blockWidth = width;
29 }
30
31 if (backgroundColor) {
32 // 画面
33 this.ctx.save();
34 this.ctx.setGlobalAlpha(opacity);
35 this.ctx.setFillStyle(backgroundColor);
36 if (borderRadius > 0) {
37 // 画圆角矩形
38 this._drawRadiusRect(x, y, blockWidth, height, borderRadius);
39 this.ctx.fill();
40 } else {
41 this.ctx.fillRect(this.toPx(x), this.toPx(y), this.toPx(blockWidth), this.toPx(height));
42 }
43 this.ctx.restore();
44 }
45 if (borderWidth) {
46 // 画线
47 this.ctx.save();
48 this.ctx.setGlobalAlpha(opacity);
49 this.ctx.setStrokeStyle(borderColor);
50 this.ctx.setLineWidth(this.toPx(borderWidth));
51 if (borderRadius > 0) {
52 // 画圆角矩形边框
53 this._drawRadiusRect(x, y, blockWidth, height, borderRadius);
54 this.ctx.stroke();
55 } else {
56 this.ctx.strokeRect(this.toPx(x), this.toPx(y), this.toPx(blockWidth), this.toPx(height));
57 }
58 this.ctx.restore();
59 }
60
61 if (text) {
62 this.drawText(Object.assign(text, { x: textX, y: textY }))
63 }
64 },
65
66 /**
67 * 渲染文字
68 * @param {Object} params
69 */
70 drawText(params) {
71 const { x, y, fontSize, color, baseLine, textAlign, text, opacity = 1, width, lineNum, lineHeight } = params;
72 if (Object.prototype.toString.call(text) === '[object Array]') {
73 let preText = { x, y, baseLine };
74 text.forEach(item => {
75 preText.x += item.marginLeft || 0;
76 const textWidth = this._drawSingleText(Object.assign(item, {
77 ...preText,
78 }));
79 preText.x += textWidth + (item.marginRight || 0); // 下一段字的x轴为上一段字x + 上一段字宽度
80 })
81 } else {
82 this._drawSingleText(params);
83 }
84 },
85
86 /**
87 * 渲染图片
88 */
89 drawImage(data) {
90 const { imgPath, x, y, w, h, sx, sy, sw, sh, borderRadius = 0, borderWidth = 0, borderColor } = data;
91 this.ctx.save();
92 if (borderRadius > 0) {
93 this._drawRadiusRect(x, y, w, h, borderRadius);
94 this.ctx.strokeStyle = 'rgba(255,255,255,0)';
95 this.ctx.stroke();
96 this.ctx.clip();
97 this.ctx.drawImage(imgPath, this.toPx(sx), this.toPx(sy), this.toPx(sw), this.toPx(sh), this.toPx(x), this.toPx(y), this.toPx(w), this.toPx(h));
98 if (borderWidth > 0) {
99 this.ctx.setStrokeStyle(borderColor);
100 this.ctx.setLineWidth(this.toPx(borderWidth));
101 this.ctx.stroke();
102 }
103 } else {
104 this.ctx.drawImage(imgPath, this.toPx(sx), this.toPx(sy), this.toPx(sw), this.toPx(sh), this.toPx(x), this.toPx(y), this.toPx(w), this.toPx(h));
105 }
106 this.ctx.restore();
107 },
108 /**
109 * 渲染线
110 * @param {*} param0
111 */
112 drawLine({ startX, startY, endX, endY, color, width }) {
113 this.ctx.save();
114 this.ctx.beginPath();
115 this.ctx.setStrokeStyle(color);
116 this.ctx.setLineWidth(this.toPx(width));
117 this.ctx.moveTo(this.toPx(startX), this.toPx(startY));
118 this.ctx.lineTo(this.toPx(endX), this.toPx(endY));
119 this.ctx.stroke();
120 this.ctx.closePath();
121 this.ctx.restore();
122 },
123 downloadResource(images = []) {
124 const drawList = [];
125 this.drawArr = [];
126 images.forEach((image, index) => drawList.push(this._downloadImageAndInfo(image, index)));
127 return Promise.all(drawList);
128 },
129 initCanvas(w, h, debug) {
130 return new Promise((resolve) => {
131 this.setData({
132 pxWidth: this.toPx(w),
133 pxHeight: this.toPx(h),
134 debug,
135 }, resolve);
136 });
137 }
138 }
139 const handle = {
140 /**
141 * 画圆角矩形
142 */
143 _drawRadiusRect(x, y, w, h, r) {
144 const br = r / 2;
145 this.ctx.beginPath();
146 this.ctx.moveTo(this.toPx(x + br), this.toPx(y)); // 移动到左上角的点
147 this.ctx.lineTo(this.toPx(x + w - br), this.toPx(y));
148 this.ctx.arc(this.toPx(x + w - br), this.toPx(y + br), this.toPx(br), 2 * Math.PI * (3 / 4), 2 * Math.PI * (4 / 4))
149 this.ctx.lineTo(this.toPx(x + w), this.toPx(y + h - br));
150 this.ctx.arc(this.toPx(x + w - br), this.toPx(y + h - br), this.toPx(br), 0, 2 * Math.PI * (1 / 4))
151 this.ctx.lineTo(this.toPx(x + br), this.toPx(y + h));
152 this.ctx.arc(this.toPx(x + br), this.toPx(y + h - br), this.toPx(br), 2 * Math.PI * (1 / 4), 2 * Math.PI * (2 / 4))
153 this.ctx.lineTo(this.toPx(x), this.toPx(y + br));
154 this.ctx.arc(this.toPx(x + br), this.toPx(y + br), this.toPx(br), 2 * Math.PI * (2 / 4), 2 * Math.PI * (3 / 4))
155 },
156 /**
157 * 计算文本长度
158 * @param {Array|Object}} text 数组 或者 对象
159 */
160 _getTextWidth(text) {
161 let texts = [];
162 if (Object.prototype.toString.call(text) === '[object Object]') {
163 texts.push(text);
164 } else {
165 texts = text;
166 }
167 let width = 0;
168 texts.forEach(({ fontSize, text, marginLeft = 0, marginRight = 0 }) => {
169 this.ctx.setFontSize(this.toPx(fontSize));
170 width += this.ctx.measureText(text).width + marginLeft + marginRight;
171 })
172
173 return this.toRpx(width);
174 },
175 /**
176 * 渲染一段文字
177 */
178 _drawSingleText({ x, y, fontSize, color, baseLine, textAlign = 'left', text, opacity = 1, textDecoration = 'none',
179 width, lineNum = 1, lineHeight = 0, fontWeight = 'normal', fontStyle = 'normal', fontFamily = "sans-serif"}) {
180 this.ctx.save();
181 this.ctx.beginPath();
182 this.ctx.font = fontStyle + " " + fontWeight + " " + this.toPx(fontSize, true) + "px " + fontFamily
183 this.ctx.setGlobalAlpha(opacity);
184 // this.ctx.setFontSize(this.toPx(fontSize));
185 this.ctx.setFillStyle(color);
186 this.ctx.setTextBaseline(baseLine);
187 this.ctx.setTextAlign(textAlign);
188 let textWidth = this.toRpx(this.ctx.measureText(text).width);
189 const textArr = [];
190 if (textWidth > width) {
191 // 文本宽度 大于 渲染宽度
192 let fillText = '';
193 let line = 1;
194 for (let i = 0; i <= text.length - 1 ; i++) { // 将文字转为数组，一行文字一个元素
195 fillText = fillText + text[i];
196 if (this.toRpx(this.ctx.measureText(fillText).width) >= width) {
197 if (line === lineNum) {
198 if (i !== text.length - 1) {
199 fillText = fillText.substring(0, fillText.length - 1) + '...';
200 }
201 }
202 if(line <= lineNum) {
203 textArr.push(fillText);
204 }
205 fillText = '';
206 line++;
207 } else {
208 if(line <= lineNum) {
209 if(i === text.length -1){
210 textArr.push(fillText);
211 }
212 }
213 }
214 }
215 textWidth = width;
216 } else {
217 textArr.push(text);
218 }
219
220 textArr.forEach((item, index) => {
221 this.ctx.fillText(item, this.toPx(x), this.toPx(y + (lineHeight || fontSize) * index));
222 })
223
224 this.ctx.restore();
225
226 // textDecoration
227 if (textDecoration !== 'none') {
228 let lineY = y;
229 if (textDecoration === 'line-through') {
230 // 目前只支持贯穿线
231 lineY = y;
232 }
233 this.ctx.save();
234 this.ctx.moveTo(this.toPx(x), this.toPx(lineY));
235 this.ctx.lineTo(this.toPx(x) + this.toPx(textWidth), this.toPx(lineY));
236 this.ctx.setStrokeStyle(color);
237 this.ctx.stroke();
238 this.ctx.restore();
239 }
240
241 return textWidth;
242 },
243 }
244 const helper = {
245 /**
246 * 下载图片并获取图片信息
247 */
248 _downloadImageAndInfo(image, index) {
249 return new Promise((resolve, reject) => {
250 const { x, y, url, zIndex } = image;
251 const imageUrl = url;
252 // 下载图片
253 this._downImage(imageUrl, index)
254 // 获取图片信息
255 .then(imgPath => this._getImageInfo(imgPath, index))
256 .then(({ imgPath, imgInfo }) => {
257 // 根据画布的宽高计算出图片绘制的大小，这里会保证图片绘制不变形
258 let sx;
259 let sy;
260 const borderRadius = image.borderRadius || 0;
261 const setWidth = image.width;
262 const setHeight = image.height;
263 const width = this.toRpx(imgInfo.width);
264 const height = this.toRpx(imgInfo.height);
265
266 if (width / height <= setWidth / setHeight) {
267 sx = 0;
268 sy = (height - ((width / setWidth) * setHeight)) / 2;
269 } else {
270 sy = 0;
271 sx = (width - ((height / setHeight) * setWidth)) / 2;
272 }
273 this.drawArr.push({
274 type: 'image',
275 borderRadius,
276 borderWidth: image.borderWidth,
277 borderColor: image.borderColor,
278 zIndex: typeof zIndex !== 'undefined' ? zIndex : index,
279 imgPath,
280 sx,
281 sy,
282 sw: (width - (sx * 2)),
283 sh: (height - (sy * 2)),
284 x,
285 y,
286 w: setWidth,
287 h: setHeight,
288 });
289 resolve();
290 })
291 .catch(err => reject(err));
292 });
293 },
294 /**
295 * 下载图片资源
296 * @param {*} imageUrl
297 */
298 _downImage(imageUrl) {
299 return new Promise((resolve, reject) => {
300 if (/^http/.test(imageUrl) && !new RegExp(wx.env.USER_DATA_PATH).test(imageUrl)) {
301 wx.downloadFile({
302 url: this._mapHttpToHttps(imageUrl),
303 success: (res) => {
304 if (res.statusCode === 200) {
305 resolve(res.tempFilePath);
306 } else {
307 reject(res.errMsg);
308 }
309 },
310 fail(err) {
311 reject(err);
312 },
313 });
314 } else {
315 // 支持本地地址
316 resolve(imageUrl);
317 }
318 });
319 },
320 /**
321 * 获取图片信息
322 * @param {*} imgPath
323 * @param {*} index
324 */
325 _getImageInfo(imgPath, index) {
326 return new Promise((resolve, reject) => {
327 wx.getImageInfo({
328 src: imgPath,
329 success(res) {
330 resolve({ imgPath, imgInfo: res, index });
331 },
332 fail(err) {
333 reject(err);
334 },
335 });
336 });
337 },
338 toPx(rpx, int) {
339 if (int) {
340 return parseInt(rpx * this.factor);
341 }
342 return rpx * this.factor;
343 },
344 toRpx(px, int) {
345 if (int) {
346 return parseInt(px / this.factor);
347 }
348 return px / this.factor;
349 },
350 /**
351 * 将http转为https
352 * @param {String}} rawUrl 图片资源url
353 */
354 _mapHttpToHttps(rawUrl) {
355 if (rawUrl.indexOf(':') < 0) {
356 return rawUrl;
357 }
358 const urlComponent = rawUrl.split(':');
359 if (urlComponent.length === 2) {
360 if (urlComponent[0] === 'http') {
361 urlComponent[0] = 'https';
362 return `${urlComponent[0]}:${urlComponent[1]}`;
363 }
364 }
365 return rawUrl;
366 },
367 }
368 Component({
369 properties: {
370 },
371 created() {
372 const sysInfo = wx.getSystemInfoSync();
373 const screenWidth = sysInfo.screenWidth;
374 this.factor = screenWidth / 750;
375 },
376 methods: Object.assign({
377 /**
378 * 计算画布的高度
379 * @param {*} config
380 */
381 getHeight(config) {
382 const getTextHeight = (text) => {
383 let fontHeight = text.lineHeight || text.fontSize;
384 let height = 0;
385 if (text.baseLine === 'top') {
386 height = fontHeight;
387 } else if (text.baseLine === 'middle') {
388 height = fontHeight / 2;
389 } else {
390 height = 0;
391 }
392 return height;
393 }
394 const heightArr = [];
395 (config.blocks || []).forEach((item) => {
396 heightArr.push(item.y + item.height);
397 });
398 (config.texts || []).forEach((item) => {
399 let height;
400 if (Object.prototype.toString.call(item.text) === '[object Array]') {
401 item.text.forEach((i) => {
402 height = getTextHeight({...i, baseLine: item.baseLine});
403 heightArr.push(item.y + height);
404 });
405 } else {
406 height = getTextHeight(item);
407 heightArr.push(item.y + height);
408 }
409 });
410 (config.images || []).forEach((item) => {
411 heightArr.push(item.y + item.height);
412 });
413 (config.lines || []).forEach((item) => {
414 heightArr.push(item.startY);
415 heightArr.push(item.endY);
416 });
417 const sortRes = heightArr.sort((a, b) => b - a);
418 let canvasHeight = 0;
419 if (sortRes.length > 0) {
420 canvasHeight = sortRes[0];
421 }
422 if (config.height < canvasHeight || !config.height) {
423 return canvasHeight;
424 } else {
425 return config.height;
426 }
427 },
428 create(config) {
429 this.ctx = wx.createCanvasContext('canvasid', this);
430
431 const height = this.getHeight(config);
432 this.initCanvas(config.width, height, config.debug)
433 .then(() => {
434 // 设置画布底色
435 if (config.backgroundColor) {
436 this.ctx.save();
437 this.ctx.setFillStyle(config.backgroundColor);
438 this.ctx.fillRect(0, 0, this.toPx(config.width), this.toPx(height));
439 this.ctx.restore();
440 }
441 const { texts = [], images = [], blocks = [], lines = [] } = config;
442 const queue = this.drawArr
443 .concat(texts.map((item) => {
444 item.type = 'text';
445 item.zIndex = item.zIndex || 0;
446 return item;
447 }))
448 .concat(blocks.map((item) => {
449 item.type = 'block';
450 item.zIndex = item.zIndex || 0;
451 return item;
452 }))
453 .concat(lines.map((item) => {
454 item.type = 'line';
455 item.zIndex = item.zIndex || 0;
456 return item;
457 }));
458 // 按照顺序排序
459 queue.sort((a, b) => a.zIndex - b.zIndex);
460
461 queue.forEach((item) => {
462 if (item.type === 'image') {
463 this.drawImage(item)
464 } else if (item.type === 'text') {
465 this.drawText(item)
466 } else if (item.type === 'block') {
467 this.drawBlock(item)
468 } else if (item.type === 'line') {
469 this.drawLine(item)
470 }
471 });
472
473 const res = wx.getSystemInfoSync();
474 const platform = res.platform;
475 let time = 0;
476 if (platform === 'android') {
477 // 在安卓平台，经测试发现如果海报过于复杂在转换时需要做延时，要不然样式会错乱
478 time = 300;
479 }
480 this.ctx.draw(false, () => {
481 setTimeout(() => {
482 wx.canvasToTempFilePath({
483 canvasId: 'canvasid',
484 success: (res) => {
485 this.triggerEvent('success', res.tempFilePath);
486 },
487 fail: (err) => {
488 this.triggerEvent('fail', err);
489 },
490 }, this);
491 }, time);
492 });
493 })
494 .catch((err) => {
495 wx.showToast({ icon: 'none', title: err.errMsg || '生成失败' });
496 console.error(err);
497 });
498 },
499 }, main, handle, helper),
500 });
501
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
...@@ -4,6 +4,9 @@ Page({ ...@@ -4,6 +4,9 @@ Page({
4 tipsRegisterVisible: false, 4 tipsRegisterVisible: false,
5 tipsGroupMemberVisible: false, 5 tipsGroupMemberVisible: false,
6 tipsNewMemberVisible: false, 6 tipsNewMemberVisible: false,
7 tipsWishVisible: false,
8 tipsShakeVisible: false,
9 tipsCreateCompleteVisible: true,
7 curStatus: 1, // 当前场景 10 curStatus: 1, // 当前场景
8 candidate: [], // 心愿候选列表 11 candidate: [], // 心愿候选列表
9 myWishList: [], // 我的心愿列表 12 myWishList: [], // 我的心愿列表
...@@ -16,7 +19,6 @@ Page({ ...@@ -16,7 +19,6 @@ Page({
16 app.queryIndex().then((result) => { 19 app.queryIndex().then((result) => {
17 this.queryWishbillPrizeCandidate(); 20 this.queryWishbillPrizeCandidate();
18 }); 21 });
19
20 }, 22 },
21 /** 23 /**
22 * 点击提交心愿单按钮 24 * 点击提交心愿单按钮
...@@ -50,6 +52,7 @@ Page({ ...@@ -50,6 +52,7 @@ Page({
50 wishBillCode 52 wishBillCode
51 } = indexInfo; 53 } = indexInfo;
52 // 未登陆 出注册弹窗提示 54 // 未登陆 出注册弹窗提示
55 // isCrmLogin = 1;
53 if (isCrmLogin == 0) { 56 if (isCrmLogin == 0) {
54 this.setData({ 57 this.setData({
55 tipsRegisterVisible: true 58 tipsRegisterVisible: true
...@@ -67,7 +70,7 @@ Page({ ...@@ -67,7 +70,7 @@ Page({
67 } 70 }
68 // 新老会员 71 // 新老会员
69 // isNewMember 72 // isNewMember
70 hadAnswerQuestion = 1; //硬编码答题 73 // hadAnswerQuestion = 1; //硬编码答题
71 if (isNewMember == 1) { 74 if (isNewMember == 1) {
72 // 新会员 75 // 新会员
73 if (hadAnswerQuestion) { 76 if (hadAnswerQuestion) {
...@@ -75,7 +78,10 @@ Page({ ...@@ -75,7 +78,10 @@ Page({
75 // todo 校验选择 78 // todo 校验选择
76 // 校验完成后显示提示 79 // 校验完成后显示提示
77 80
78 this.queryWishbillCreate(); 81 this.setData({
82 tipsWishVisible: true
83 });
84 // this.queryWishbillCreate();
79 } else { 85 } else {
80 // 未答题，提示答题 86 // 未答题，提示答题
81 this.setData({ 87 this.setData({
...@@ -148,13 +154,24 @@ Page({ ...@@ -148,13 +154,24 @@ Page({
148 data 154 data
149 } = evt.detail; 155 } = evt.detail;
150 switch (name) { 156 switch (name) {
151 157 // 隐藏蒙层
152 case "_evt_hide_mask": 158 case "_evt_hide_mask":
153 this.setData({ 159 this.setData({
154 ruleTipsVisible: false, 160 ruleTipsVisible: false,
155 tipsGroupMemberVisible: false, 161 tipsGroupMemberVisible: false,
156 tipsNewMemberVisible: false, 162 tipsNewMemberVisible: false,
163 tipsWishVisible: false,
164 tipsWishVisible:false,
165 tipsCreateCompleteVisible:false,
166 })
167 break;
168
169 // 创建心愿单
170 case "_evt_create_wish":
171 this.setData({
172 tipsWishVisible: false
157 }) 173 })
174 this.queryWishbillCreate();
158 break; 175 break;
159 176
160 default: 177 default:
......
...@@ -4,6 +4,9 @@ ...@@ -4,6 +4,9 @@
4 "tips-register-comp": "../../component/tips-register-comp/tips-register-comp", 4 "tips-register-comp": "../../component/tips-register-comp/tips-register-comp",
5 "tips-group-member-comp": "../../component/tips-group-member-comp/tips-group-member-comp", 5 "tips-group-member-comp": "../../component/tips-group-member-comp/tips-group-member-comp",
6 "tips-new-comp": "../../component/tips-new-comp/tips-new-comp", 6 "tips-new-comp": "../../component/tips-new-comp/tips-new-comp",
7 "tips-wish-comp": "../../component/tips-wish-comp/tips-wish-comp",
8 "tips-shake-comp": "../../component/tips-shake-comp/tips-shake-comp",
9 "tips-create-complete-comp": "../../component/tips-create-complete-comp/tips-create-complete-comp",
7 "van-popup": "../../ui/vant-weapp/popup/index" 10 "van-popup": "../../ui/vant-weapp/popup/index"
8 } 11 }
9 } 12 }
......
...@@ -9,7 +9,6 @@ ...@@ -9,7 +9,6 @@
9 background-color: #ffd5da; 9 background-color: #ffd5da;
10 } 10 }
11 11
12
13 .bg { 12 .bg {
14 image { 13 image {
15 position: absolute; 14 position: absolute;
......
...@@ -66,3 +66,12 @@ ...@@ -66,3 +66,12 @@
66 <van-popup show="{{ tipsNewMemberVisible }}"> 66 <van-popup show="{{ tipsNewMemberVisible }}">
67 <tips-new-comp bind:evtcomp="evtcomp"></tips-new-comp> 67 <tips-new-comp bind:evtcomp="evtcomp"></tips-new-comp>
68 </van-popup> 68 </van-popup>
69 <van-popup show="{{ tipsWishVisible }}">
70 <tips-wish-comp bind:evtcomp="evtcomp"></tips-wish-comp>
71 </van-popup>
72 <van-popup show="{{ tipsShakeVisible }}">
73 <tips-shake-comp bind:evtcomp="evtcomp"></tips-shake-comp>
74 </van-popup>
75 <van-popup show="{{ tipsCreateCompleteVisible }}">
76 <tips-create-complete-comp bind:evtcomp="evtcomp"></tips-create-complete-comp>
77 </van-popup>
......
...@@ -35,7 +35,7 @@ Page({ ...@@ -35,7 +35,7 @@ Page({
35 } = evt.detail; 35 } = evt.detail;
36 switch (name) { 36 switch (name) {
37 37
38 case "_evt_hide_rule_tips": 38 case "_evt_hide_mask":
39 this.setData({ 39 this.setData({
40 tipsRuleVisible: false 40 tipsRuleVisible: false
41 }) 41 })
......
1 import Poster from '../../miniprogram_dist/poster/poster';
1 let app = getApp(); 2 let app = getApp();
2 Page({ 3 Page({
3 data: {}, 4 data: {
4 onShareAppMessage() {}, 5 imageUrl: "", // 海报图片
5 onLoad(options) {}, 6 wxShareTitle: "", // 分享标题
7 wxCodePath: "", // 微信二维码参数地址，分享链接公用
8 wxCodeUrl: "", // 微信二维码图片地址
9 },
10 onShareAppMessage() {
11 if (res.from === 'button') {
12 // 来自页面内转发按钮
13 console.log(res.target)
14 }
15 let title = this.data.wxShareTitle;
16 let path = this.data.wxCodePath;
17 let imageUrl = this.data.imageUrl;
18 console.log("title:", title);
19 console.log("path:", path);
20 console.log("imageUrl:", imageUrl);
21 return {
22 title,
23 path,
24 imageUrl
25 }
26 },
27 onLoad(options) {
28 app.queryIndex().then((result) => {
29 console.log("result:", result);
30 wx.showLoading({
31 title: '生成中',
32 });
33 this.initData();
34 })
35 },
36 initData() {
37 // 设置 分享链接，分享文案
38 let nickname = app.globalData.userInfo && app.globalData.userInfo.nickname || "";
39 let billCode = app.globalData.indexInfo.wishBillCode;
40 let wxShareTitle = nickname + `正在参加丸美眼霜节心愿单活动，需要你的倾情相助！`;
41 let wxCodePath = `/pages/coop/coop?billCode=${billCode}&s=share`
42 this.setData({
43 wxCodePath: wxCodePath,
44 wxShareTitle: wxShareTitle
45 })
46
47 // 获取小程序码
48 app.post({
49 url: app.api.wxacodeGet,
50 data: {
51 path: encodeURIComponent(wxCodePath)
52 }
53 }).then((result) => {
54 this.setData({
55 wxCodeUrl: result
56 })
57
58 // 获取海报数据
59 let posterData = this.getPosterConfig();
60 // 绘制设置海报
61 this.onCreatePoster(posterData);
62 })
63
64 // // 获取海报数据
65 // let posterData = this.getPosterConfig();
66 // // 绘制设置海报
67 // this.onCreatePoster(posterData);
68
69 },
70
71 onPosterSuccess(e) {
72 console.log("onPosterSuccess");
73 wx.hideLoading();
74 const {
75 detail
76 } = e;
77 console.log("detail:", detail)
78 this.setData({
79 imageUrl: detail
80 })
81 },
82 onPosterFail(err) {
83 wx.hideLoading();
84 console.error(err);
85 },
86
87 /**
88 * 查看图片
89 */
90 onPreviewImage() {
91 let imageUrl = this.data.imageUrl
92 console.log("imageUrl:", imageUrl);
93 wx.previewImage({
94 current: imageUrl,
95 urls: [imageUrl]
96 })
97 },
98 /**
99 * 保存图片到本地
100 */
101 saveImageToPhotosAlbum() {
102 let _this = this;
103 wx.saveImageToPhotosAlbum({
104 filePath: _this.data.imageUrl,
105 success(res) {
106 wx.showToast({
107 title: '海报保存成功',
108 icon: 'success'
109 });
110 },
111 fail(err) {
112 wx.getSetting({
113 success: (res) => {
114 if (!res.authSetting['scope.writePhotosAlbum']) {
115 // 未授权
116 wx.showModal({
117 title: '提示',
118 content: '小程序请求访问相册权限',
119 confirmText: '前往授权',
120 success(res) {
121 if (res.confirm) {
122 wx.openSetting({
123 success(res) {}
124 })
125 } else if (res.cancel) {}
126 }
127 })
128 }
129 }
130 })
131 }
132 })
133 },
134
135 /**
136 * 异步生成海报
137 */
138 onCreatePoster(posterConfig) {
139 console.log("posterConfig:", posterConfig);
140 this.setData({
141 posterConfig: posterConfig
142 }, () => {
143 Poster.create(true); // 入参：true为抹掉重新生成
144 });
145 },
146
147
148 // 获取海报数据
149 getPosterConfig() {
150 // 合成图片需要的数据
151 let {
152 userInfo
153 } = app.globalData;
154 let codeUrl = this.data.wxCodeUrl;
155 let posterData = {
156 width: 700,
157 height: 921,
158 debug: false,
159 blocks: [],
160 images: [
161 // 底图
162 {
163 width: 700,
164 height: 921,
165 x: 0,
166 y: 0,
167 url: '../../image/draw/draw-c1.png',
168 },
169 // // 头像
170 // {
171 // width: 102,
172 // height: 102,
173 // x: 35,
174 // y: 700,
175 // url: userInfo.avatar,
176 // },
177 // 小程序码
178 {
179 width: 118,
180 height: 118,
181 x: 560,
182 y: 780,
183 url: codeUrl,
184 zIndex: 14
185 }
186 ],
187 lines: [],
188 texts: [{
189 x: 165,
190 y: 810,
191 width: 360,
192 lineHeight: 32,
193 fontSize: 26,
194 lineNum: 3,
195 baseLine: 'middle',
196 text: `${userInfo.nickname}正在参加丸美眼霜节心愿单活动，需要你的倾情相助！`,
197 color: '#666666',
198 zIndex: 111
199 }],
200 }
201 return posterData;
202 },
203
204
6 // 子组件事件 205 // 子组件事件
7 evtcomp(evt) { 206 evtcomp(evt) {
8 let { 207 let {
......
1 { 1 {
2 "navigationBarTitleText": "more" 2 "navigationBarTitleText": "心愿单海报",
3 "usingComponents": {
4 "poster": "/miniprogram_dist/poster/index"
5 }
3 } 6 }
......
...@@ -4,15 +4,55 @@ ...@@ -4,15 +4,55 @@
4 .page { 4 .page {
5 .bgc {} 5 .bgc {}
6 6
7 .bg {} 7 .bg {
8 position: fixed;
9 width: 100%;
10 height: 100%;
11 }
8 12
9 .main { 13 .main {
14 position: relative;
15
10 .top-space { 16 .top-space {
11 height: 0px; 17 height: 24px;
12 } 18 }
13 19
14 .content { 20 .content {
15 position: relative; 21 position: relative;
22
23 .poster-wrap {
24 width: 700px;
25 height: 921px;
26 margin: 0 auto;
27
28 .poster {
29 width: 700px;
30 height: 921px;
31 }
32
33 .tips {
34 margin-top: 10px;
35 color: #ebc6ce;
36 font-size: 26px;
37 @extend .bb;
38 padding: 0 10px;
39 font-weight: 300;
40 line-height: 1.5;
41 }
42
43 .download-btn {
44 margin: 28px auto 0;
45 border-radius: 40px;
46 background-image: linear-gradient(to right, #ffdcd4, #fdf2f0 51%, #ffdcd4);
47 color: #a73136;
48 font-size: 32px;
49 @include btc(300px, 80px);
50 }
51 }
52
53
16 } 54 }
55
56
17 } 57 }
18 } 58 }
......
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> -->
4 <!-- <view class="app__top-shadow"></view> --> 5 <image class="bg" mode="scaleToFill" src="../../image/oss/poster/poster-bg.png" />
5 <view class="app__content main"> 6 <view class="app__content main">
6 <view class="top-space"></view> 7 <view class="top-space"></view>
7 <view class="content"></view> 8 <view class="content">
9 <view class="poster-wrap" wx:if="{{imageUrl}}">
10 <image bindtap="onPreviewImage" class="poster" src="{{imageUrl}}" mode="widthFix" />
11 <view class="tips">*您可以一键保存本海报或者长按直接分享给好友，让更多
12 人来为您助力哦！</view>
13 <view bindtap="saveImageToPhotosAlbum" class="download-btn">一键保存</view>
14 </view>
15 </view>
8 </view> 16 </view>
9 </view> 17 </view>
......
...@@ -20,7 +20,7 @@ Page({ ...@@ -20,7 +20,7 @@ Page({
20 // "state": 0 20 // "state": 0
21 // }] 21 // }]
22 // }, 22 // },
23 questionResult:{}, 23 questionResult: {},
24 // 答题结果 24 // 答题结果
25 questionNumList: ["A", "B", "C", "D"], 25 questionNumList: ["A", "B", "C", "D"],
26 myAnswer: [], //我的答案 26 myAnswer: [], //我的答案
......
...@@ -34,7 +34,7 @@ ...@@ -34,7 +34,7 @@
34 <image class="d2" mode="widthFix" src="../../image/oss/question/question-d2.png" /> 34 <image class="d2" mode="widthFix" src="../../image/oss/question/question-d2.png" />
35 <view class="cont"> 35 <view class="cont">
36 <view class="space1"></view> 36 <view class="space1"></view>
37 <view class="tit">测验结果：答对1题，答错2题</view> 37 <view class="tit">测验结果：答对{{questionResult.right}}题，答错{{questionResult.wrong}}题</view>
38 <view class="ball"> 38 <view class="ball">
39 <view class="t1">获得</view> 39 <view class="t1">获得</view>
40 <view class="score">{{questionResult.elasticValue}}</view> 40 <view class="score">{{questionResult.elasticValue}}</view>
......
1 let app = getApp(); 1 let app = getApp();
2 Page({ 2 Page({
3 data: {}, 3 data: {
4 tipsRuleVisible: false,
5 userInfo: {},
6 wishInfo: {},
7 helperInfo: {}
8 },
4 onShareAppMessage() {}, 9 onShareAppMessage() {},
5 onLoad(options) {}, 10 onLoad(options) {
11 this.initData();
12 },
13 initData() {
14 app.queryIndex().then((result) => {
15 this.setData({
16 userInfo: app.globalData.userInfo
17 })
18 this.queryWishbillDetail();
19 this.queryWishbillHelpers();
20 })
21 },
22 // 显示规则页面
23 onShowRuleHandler() {
24 this.setData({
25 tipsRuleVisible: true
26 })
27 },
28 // 显示海报图
29 onCreatePosterHandler() {
30 app.router.push({
31 path: "poster"
32 })
33 },
34 // 获取心愿单详情
35 queryWishbillDetail() {
36 return new Promise((resolve, reject) => {
37 app.post({
38 url: app.api.wishbillDetail,
39 data: {
40 billCode: app.globalData.indexInfo.wishBillCode
41 }
42 }).then((result) => {
43 this.setData({
44 wishInfo: result
45 })
46 })
47 });
48 },
49 // 获取助力列表
50 queryWishbillHelpers() {
51 return new Promise((resolve, reject) => {
52 app.post({
53 url: app.api.wishbillHelpers,
54 data: {
55 billCode: app.globalData.indexInfo.wishBillCode,
56 page: 1,
57 size: 50
58 }
59 }).then((result) => {
60 this.setData({
61 helperInfo: result
62 })
63 })
64 });
65 },
6 // 子组件事件 66 // 子组件事件
7 evtcomp(evt) { 67 evtcomp(evt) {
8 let { 68 let {
...@@ -11,7 +71,10 @@ Page({ ...@@ -11,7 +71,10 @@ Page({
11 } = evt.detail; 71 } = evt.detail;
12 switch (name) { 72 switch (name) {
13 73
14 case "_evt_hide": 74 case "_evt_hide_mask":
75 this.setData({
76 tipsRuleVisible: false
77 })
15 break; 78 break;
16 79
17 default: 80 default:
......
1 { 1 {
2 "navigationBarTitleText": "more" 2 "navigationBarTitleText": "我的心愿单",
3 "usingComponents": {
4 "authorize-comp": "../../component/authorize-comp/authorize-comp",
5 "tips-rule-comp": "../../component/tips-rule-comp/tips-rule-comp",
6 "van-popup": "../../ui/vant-weapp/popup/index"
7 }
3 } 8 }
......
...@@ -2,17 +2,192 @@ ...@@ -2,17 +2,192 @@
2 @import '../../assets/scss/utils'; 2 @import '../../assets/scss/utils';
3 3
4 .page { 4 .page {
5 font-weight: 300;
6 padding-bottom: $pageBottom;
7
5 .bgc {} 8 .bgc {}
6 9
7 .bg {} 10 .bg {
11 .b1 {
12 position: absolute;
13 width: 750px;
14 height: 576px;
15 }
16
17 .b1 {
18 position: absolute;
19 width: 750px;
20 height: 576px;
21 }
22 }
23
24 .decoration {
25 position: relative;
26
27 .d1 {
28 position: absolute;
29 width: 532px;
30 height: 847px;
31 top: 290px;
32 right: 0;
33 }
34 }
8 35
9 .main { 36 .main {
10 .top-space { 37 .top-space {
11 height: 0px; 38 height: 152px;
12 } 39 }
13 40
14 .content { 41 .content {
15 position: relative; 42 position: relative;
43
44 // 我的信息框
45 .my {
46 position: relative;
47 margin: 0 auto 0;
48 width: 742px;
49 height: 957px;
50
51 .ebg {
52 position: absolute;
53 width: 742px;
54 height: 957px;
55 }
56
57 .portrait {
58 position: absolute;
59 width: 182px;
60 height: 182px;
61 border-radius: 91px;
62 background-color: wheat;
63 left: 0;
64 right: 0;
65 top: -82px;
66 margin: 0 auto;
67 }
68
69 // 内容
70 .cont {
71 position: relative;
72 text-align: center;
73
74 // 占位
75 .space1 {
76 height: 118px;
77 }
78
79 .nickname {
80 color: #ba3039;
81 font-size: 36px;
82 }
83
84 .number {
85 color: #999999;
86 font-size: 24px;
87 }
88
89 .mycard {
90 margin: 16px auto;
91 border-radius: 24px;
92 box-shadow: 0px 2px 9px 0 rgba(0, 0, 0, 0.1);
93 background-color: #ffffff;
94 color: #bb3039;
95 @include btc(160px, 48px);
96 font-size: 24px;
97
98 }
99 }
100
101 // 海报按钮
102 .poster-btn {
103 position: absolute;
104 left: 0;
105 right: 0;
106 bottom: 42px;
107 margin: 0 auto;
108 box-shadow: 0px 2px 9px 0 rgba(0, 0, 0, 0.2);
109 background-image: linear-gradient(to right, #b83138, #f2234a 51%, #b83138);
110 color: #ffffff;
111 font-size: 28px;
112 @include btc(200px, 56px);
113 @include border-top-radius(28px);
114 }
115 }
116
117 // 协作
118 .coop {
119 margin-top: 60px;
120 text-align: center;
121
122 .tit {
123 color: #a01635;
124 font-size: 40px;
125 }
126
127 .tips {
128 margin-top: 16px;
129 color: #333333;
130 font-size: 24px;
131
132 .t1 {
133 color: #ba3039;
134 }
135 }
136
137 .list {
138 margin: 32px auto 0;
139 width: 654px;
140 height: 331px;
141 background-color: #fffbf8;
142 padding: 30px 20px;
143 @extend .bb;
144 overflow-y: auto;
145
146 &-item {
147 font-size: 22px;
148 width: 100%;
149 // margin: 12px 0;
150 margin-bottom: 20px;
151 }
152 }
153 }
154
155 // 按钮容器
156 .btn-wrap {
157 position: relative;
158 margin: 72px auto 0;
159 width: 654px;
160 display: flex;
161 justify-content: space-between;
162
163 .btn {
164 @include cb(300px, 80px);
165 }
166
167 .btn2 {
168 border-radius: 40px;
169 border: solid 2px #b83138;
170 background: transparent;
171 color: #a21f3c;
172 }
173 }
174 }
175
176 .rule-btn {
177 position: absolute;
178 top: 32px;
179 right: 0;
180 @include border-left-radius(30px);
181 @include btc(162px, 60px);
182 font-size: 30px;
183 color: #bf0221;
184
185 box-shadow: 7.4px 8.2px 27px 0 rgba(228, 78, 96, 0.86);
186 background-image: linear-gradient(to right, #fbddd5, #f9efed 51%, #ffded9 99%), linear-gradient(to bottom, #000000, #000000);
187
188 .c1 {
189 padding-left: 12px;
190 }
16 } 191 }
17 } 192 }
18 } 193 }
......
1 <view class="page"> 1 <view class="page">
2 <view class="app__bgc bgc"></view> 2 <view class="app__bgc bgc"></view>
3 <view class="app__bg bg"></view> 3 <view class="app__bg bg">
4 <image class="b1" mode="widthFix" src="../../image/oss/my-wish/my-wish-c1.png" />
5 </view>
6 <view class="decoration">
7 <image class="d1" src="../../image/oss/my-wish/my-wish-d1.png" mode="widthFix" />
8 </view>
4 <view class="app__content main"> 9 <view class="app__content main">
5 <view class="top-space"></view> 10 <view class="top-space"></view>
6 <view class="content"></view> 11 <view class="content">
12 <!-- 我的信息框 -->
13 <view class="my">
14 <image class="ebg" src="../../image/oss/my-wish/my-wish-c2.png" mode="widthFix" />
15 <image class="portrait" src="{{wishInfo.member.avatar}}" />
16 <!-- 内容 -->
17 <view class="cont">
18 <view class="space1"></view>
19 <view class="nickname">{{wishInfo.member.nickname}}</view>
20 <view class="number">{{wishInfo.member.mobile}}</view>
21 <view class="mycard">我的卡券</view>
22 </view>
23 <view bindtap="onCreatePosterHandler" class="poster-btn">生成海报</view>
24 </view>
25 <!-- 协作 -->
26 <view class="coop">
27 <view class="tit">· 我的弹力帮帮团 ·</view>
28 <view class="tips">
29 积累
30 <span class="t1">5</span>
31 人助力，获得
32 <span class="t1">12100</span>
33 弹力值！
34 </view>
35 <scroll-view scroll-y="{{true}}" class="list">
36 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
37 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
38 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
39 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
40 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
41 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
42 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
43 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
44 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
45 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
46 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
47 <view class="list-item">·小丸子 刚刚使出吃奶的力气，帮你摇出了 140 弹力值！</view>
48 </scroll-view>
49 </view>
50 <view class="btn-wrap">
51 <view class="btn btn2">弹力girl榜单</view>
52 <view class="btn">弹弹好友</view>
53 </view>
54 </view>
55 <!-- 规则按钮 -->
56 <view class="rule-btn" bindtap="onShowRuleHandler">
57 <span class="c1">活动详情</span>
58 </view>
7 </view> 59 </view>
8 </view> 60 </view>
61 <van-popup show="{{ tipsRuleVisible }}">
62 <tips-rule-comp bind:evtcomp="evtcomp"></tips-rule-comp>
63 </van-popup>
......