Skip to content

dev / marubi-wish-list-mp

Go to a project
Toggle navigation
Toggle navigation pinning
3a17532c by simon
Options

版本提交

1 parent 2d06ff22
Inline Side-by-side
Showing 23 changed files with 849 additions and 74 deletions
1 { 1 {
2 "pages": [ 2 "pages": [
3 "pages/user-table/user-table",
3 "pages/index/index", 4 "pages/index/index",
4 "pages/authorize/authorize", 5 "pages/authorize/authorize",
6 "pages/coop/coop",
5 "pages/register/register", 7 "pages/register/register",
6 "pages/wish/wish", 8 "pages/wish/wish",
7 "pages/create-wish/create-wish", 9 "pages/create-wish/create-wish",
8 "pages/question/question", 10 "pages/question/question",
9 "pages/new-welfare/new-welfare", 11 "pages/new-welfare/new-welfare",
10 "pages/user-table/user-table",
11 "pages/coupon-detail/coupon-detail", 12 "pages/coupon-detail/coupon-detail",
12 "pages/rank/rank", 13 "pages/rank/rank",
13 "pages/poster/poster", 14 "pages/poster/poster",
14 "pages/my-card/my-card", 15 "pages/my-card/my-card",
15 "pages/coop/coop",
16 "pages/example/example", 16 "pages/example/example",
17 "pages/more/more" 17 "pages/more/more"
18 ], 18 ],
......
...@@ -31,18 +31,25 @@ ...@@ -31,18 +31,25 @@
31 } 31 }
32 32
33 .tips { 33 .tips {
34 margin-top: 24px; 34 margin-top: 32px;
35 height: 210px; 35 // height: 210px;
36 color: #999999; 36 color: #999999;
37 font-size: 28px; 37 font-size: 28px;
38 @extend .bb; 38 @extend .bb;
39 padding: 0 100px; 39 padding: 0 100px;
40 text{
41 line-height: 32px
42 }
40 } 43 }
41 44
42 .btn { 45 .btn {
43 position: relative; 46 @include cb(234px, 64px);
47 // position: relative;
48 position: absolute;
49 left: 0;
50 right: 0;
51 bottom: 100px;
44 margin: 0 auto; 52 margin: 0 auto;
45 // @include cb(300px, 80px); 53 // @include cb(300px, 80px);
46 @include cb(234px, 64px);
47 } 54 }
48 } 55 }
......
...@@ -4,8 +4,8 @@ ...@@ -4,8 +4,8 @@
4 <view class="cont"> 4 <view class="cont">
5 <view class="tit">· 温馨提示 ·</view> 5 <view class="tit">· 温馨提示 ·</view>
6 <view class="tips"> 6 <view class="tips">
7 <text decode="{{true}}" >{{innerText}}</text> 7 <text decode="{{true}}">{{innerText}}</text>
8 </view> 8 </view>
9 <view bindtap="hideMask" class="btn">我知道了</view>
10 </view> 9 </view>
10 <view bindtap="hideMask" class="btn">我知道了</view>
11 </view> 11 </view>
......
...@@ -17,6 +17,14 @@ Component({ ...@@ -17,6 +17,14 @@ Component({
17 wishBillInfo:{ 17 wishBillInfo:{
18 type: Object, 18 type: Object,
19 value: {}, 19 value: {},
20 },
21 wishInfo:{
22 type: Object,
23 value: {},
24 },
25 wishList:{
26 type: Object,
27 value: [],
20 } 28 }
21 }, 29 },
22 data: { 30 data: {
......
...@@ -5,42 +5,18 @@ ...@@ -5,42 +5,18 @@
5 <view class="tit">· 太棒了 ·</view> 5 <view class="tit">· 太棒了 ·</view>
6 <view class="tips"> 6 <view class="tips">
7 共获得 7 共获得
8 <span class="val">{{eleVal}}</span> 8 <span class="val">{{wishInfo.totalElasticValue}}</span>
9 弹力值 9 弹力值
10 </view> 10 </view>
11 <!-- 心愿容器 --> 11 <!-- 心愿容器 -->
12 <view class="wish"> 12 <view class="wish">
13 <view class="wish-item"> 13 <view wx:for="{{wishList}}" wx:key="{{index}}" class="wish-item">
14 <view class="display"> 14 <view class="display">
15 <image class="prod" mode="aspectFit" src="../../image/prize/prize-3.png" /> 15 <image class="prod" mode="aspectFit" src="../../image/prize/prize-{{item.tag}}.png" />
16 <!-- <image class="close" mode="widthFix" src="../../image/oss/create-wish/cw-close-btn.png" /> -->
17 </view> 16 </view>
18 <!-- <view class="name">丸美弹力蛋白凝时紧致乳</view> -->
19 <view class="val"> 17 <view class="val">
20 <image class="icon" mode="widthFix" src="../../image/oss/create-wish/cw-light.png" /> 18 <image class="icon" mode="widthFix" src="../../image/oss/create-wish/cw-light.png" />
21 获得20 19 获得{{item.initialElasticValue}}
22 </view>
23 </view>
24 <view class="wish-item">
25 <view class="display">
26 <image class="prod" mode="aspectFit" src="../../image/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/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> 20 </view>
45 </view> 21 </view>
46 </view> 22 </view>
......

295 KB | W: | H:

104 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
1 import {
2 getBindtapData,
3 getObjByListKeyValue
4 } from '../../utils/util';
5
6 import {
7 productMap
8 } from '../../const/custom-data';
9
1 let app = getApp(); 10 let app = getApp();
2 Page({ 11 Page({
3 data: {}, 12 data: {
13 options: null,
14 wishInfo: {},
15 wishList: []
16 },
4 onShareAppMessage() {}, 17 onShareAppMessage() {},
5 onLoad(options) {}, 18 onLoad(options) {
19 this.setData({
20 options
21 })
22 this.initData();
23 },
24 initData() {
25 app.queryIndex().then((result) => {
26 this.queryWishbillDetail();
27 })
28 },
29 // 我也要玩
30 onPlayTooHandler() {
31 app.router.push({
32 openType: "reLaunch",
33 path: "index"
34 })
35 },
36 // 获取心愿单详情
37 queryWishbillDetail() {
38 return new Promise((resolve, reject) => {
39 app.post({
40 url: app.api.wishbillDetail,
41 data: {
42 billCode: app.globalData.indexInfo.wishBillCode
43 }
44 }).then((result) => {
45 let wishList = result.wishGifts;
46 wishList.forEach(element => {
47 let product = productMap[element.prizeDefineCode + ""];
48 element = Object.assign(element, product);
49 let progress = element.elasticValue / element.conditionElasticValue * 100;
50 if (progress > 100) progress = 100;
51 // 直接计算坐标
52 let progressLeft = progress * 3.22 - 51;
53 element.progress = progress;
54 element.progressLeft = progressLeft;
55 });
56 this.setData({
57 wishInfo: result,
58 wishList: wishList
59 })
60 console.log("wishInfo:", this.data.wishInfo);
61 console.log("wishList:", this.data.wishList);
62 })
63 });
64 },
6 // 子组件事件 65 // 子组件事件
7 evtcomp(evt) { 66 evtcomp(evt) {
8 let { 67 let {
......
1 { 1 {
2 "navigationBarTitleText": "more" 2 "navigationBarTitleText": "好友助力"
3 } 3 }
......
...@@ -2,17 +2,299 @@ ...@@ -2,17 +2,299 @@
2 @import '../../assets/scss/utils'; 2 @import '../../assets/scss/utils';
3 3
4 .page { 4 .page {
5
6 font-weight: 300;
7
5 .bgc {} 8 .bgc {}
6 9
7 .bg {} 10 .bg {
11 position: fixed;
12 width: 100%;
13 height: 100%;
14 }
15
16 .decoration {
17 position: relative;
18 z-index: 11;
19
20 .d1 {
21 position: absolute;
22 width: 728px;
23 height: 292px;
24 top: -60px;
25 left: 11px;
26 }
27 }
28
8 29
9 .main { 30 .main {
10 .top-space { 31 .top-space {
11 height: 0px; 32 height: 48px;
12 } 33 }
13 34
14 .content { 35 .content {
15 position: relative; 36 position: relative;
37
38 // 摇一摇
39 .shake {
40 margin: 0 auto;
41 width: 700px;
42 height: 920px;
43
44 .ebg {
45 width: 700px;
46 height: 920px;
47 position: absolute;
48 }
49
50 .space1 {
51 height: 52px;
52 }
53
54 .cont {
55 position: relative;
56
57 .tips {
58 margin: 0 auto;
59 width: 480px;
60 color: #333333;
61 font-size: 28px;
62 line-height: 1.6;
63 height: 150px;
64 }
65
66 // 心愿
67 .wish {
68 position: relative;
69 margin: 450px auto 0;
70 display: flex;
71 // justify-content: center;
72 @extend .bb;
73 min-height: 238px;
74 width: 630px;
75
76 &-item {
77 position: relative;
78 text-align: center;
79 width: 210px;
80
81 .display {
82 position: relative;
83 margin: 0 auto;
84 width: 140px;
85 height: 140px;
86 border-radius: 70px;
87 background-image: radial-gradient(circle at 0 0, #ffffff, #f2e6e6);
88 @extend .fcc;
89
90 .prod {
91 max-width: 200px;
92 max-height: 200px;
93 margin-bottom: 10px;
94 }
95
96 .close {
97 width: 30px;
98 height: 30px;
99 position: absolute;
100 bottom: 0;
101 right: 0;
102 }
103 }
104
105 .name {
106 width: 160px;
107 margin: 8px auto 0;
108 color: #333333;
109 font-size: 20px;
110 // font-weight: 300;
111 }
112
113 .val {
114 @extend .fcc;
115 color: #b93138;
116 font-size: 20px;
117 margin-top: 4px;
118
119 .icon {
120 margin-left: 6px;
121 width: 11px;
122 height: 18px;
123 }
124 }
125 }
126 }
127
128 }
129 }
130
131 .result-wrap {
132 position: relative;
133
134 .play-too-btn {
135 @include cb(234px, 64px);
136 margin: 12px auto 0;
137 }
138 }
139
140 // 摇后结果
141 .result {
142 margin: 0 auto;
143 width: 706px;
144 height: 923px;
145
146 .ebg {
147 width: 706px;
148 height: 923px;
149 position: absolute;
150 }
151
152 .space1 {
153 height: 32px;
154 }
155
156 .cont {
157
158 position: relative;
159
160 .user {
161 height: 150px;
162 display: flex;
163 align-items: center;
164 padding: 0 98px;
165 @extend .bb;
166
167 .portrait {
168 width: 100px;
169 height: 100px;
170 border-radius: 50px;
171 }
172
173 .nickname {
174 font-size: 24px;
175 color: #333333;
176 line-height: 1.5;
177 width: 390px;
178 margin-left: 17px;
179
180 }
181 }
182
183 .tips2 {
184 margin-top: 46px;
185 font-size: 30px;
186 text-align: center;
187 color: #c82d3e;
188 // background-color: wheat;
189 height: auto;
190
191 .t1 {
192 line-height: 1.6;
193 height: auto;
194 }
195 }
196
197 // 奖品
198 .wish {
199 margin: 24px auto 0;
200 position: relative;
201 width: 580px;
202
203 &-item {
204 position: relative;
205 display: flex;
206 justify-content: space-between;
207 height: 124px;
208 padding: 24px 0;
209
210 .display {
211 position: relative;
212 width: 124px;
213 height: 124px;
214 border-radius: 62px;
215 background-image: radial-gradient(circle at 0 0, #ffffff, #f2e6e6);
216 @extend .fcc;
217
218 .prod {
219 max-width: 200px;
220 max-height: 200px;
221 }
222 }
223
224 .mid {
225 display: flex;
226 flex: 1;
227 flex-wrap: wrap;
228 padding: 14px 20px;
229 @extend .bb;
230
231 .name {
232 color: #333333;
233 font-size: 26px;
234 @include ellipsis(2);
235 }
236
237 .progress {
238 display: flex;
239 align-items: flex-end;
240 align-self: flex-end;
241
242 $proWidth: 322px;
243
244 .pro {
245 width: $proWidth;
246 position: relative;
247
248 .flag {
249 position: absolute;
250 left: 0px;
251 bottom: 14px;
252 color: #a97a4b;
253 font-size: 16px;
254 width: 51px;
255 height: 30px;
256
257 image {
258 position: absolute;
259 width: 51px;
260 height: 30px;
261 }
262
263 .t1 {
264 position: relative;
265 text-align: center;
266 width: 51px;
267 padding-top: 2px;
268 }
269 }
270
271 .line {
272 width: $proWidth;
273 height: 12px;
274 border-radius: 6px;
275 background-color: #f7e4e5;
276
277 &-thumb {
278 height: 12px;
279 border-radius: 6px;
280 background-color: #ba3038;
281 }
282 }
283 }
284
285 .val {
286 font-size: 24px;
287 color: #c82d3e;
288 padding-left: 12px;
289 }
290 }
291 }
292 }
293 }
294
295 }
296
297 }
16 } 298 }
17 } 299 }
18 } 300 }
......
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 <image class="bg" src="../../image/oss/coop/coop-bg-1.png" mode="scaleToFill" />
4 <!-- <view class="app__top-shadow"></view> --> 4 <view class="decoration">
5 <image class="d1" mode="widthFix" src="../../image/oss/coop/coop-d1.png" />
6 </view>
5 <view class="app__content main"> 7 <view class="app__content main">
6 <view class="top-space"></view> 8 <view class="top-space"></view>
7 <view class="content"></view> 9 <view class="content">
10 <!-- 摇一摇 -->
11 <view wx:if="{{1>10}}" class="shake">
12 <image class="ebg" mode="widthFix" src="../../image/oss/coop/coop-c2.png" />
13 <view class="space1"></view>
14 <view class="cont">
15 <view class="tips">你的好友{{wishInfo.member.nickname}}的心愿单需要你的帮助哦！拿起手机摇一摇，即可为ta贡献弹力值！</view>
16 <view class="wish">
17 <view wx:for="{{wishList}}" wx:key="{{index}}" class="wish-item">
18 <view class="display">
19 <image class="prod" mode="aspectFit" src="../../image/prize/prize-{{item.tag}}.png" />
20 </view>
21 <view class="name">{{item.prizeName}}</view>
22 </view>
23 </view>
24 </view>
25 </view>
26 <!-- 摇后结果 -->
27 <view class="result-wrap">
28 <view class="result">
29 <image class="ebg" mode="widthFix" src="../../image/oss/coop/coop-c3.png" />
30 <view class="space1"></view>
31 <view class="cont">
32 <view class="user">
33 <image class="portrait" mode="widthFix" src="{{wishInfo.member.avatar}}" />
34 <view class="nickname">
35 你的好友{{wishInfo.member.nickname}}的心愿单需要你的帮助哦！拿起手机摇一摇，即可为ta贡献弹力值！
36 </view>
37 </view>
38 <view class="tips2">
39 <text class="t1">太厉害了\n您总共摇出了140弹力值</text>
40 </view>
41 <!-- 奖品 -->
42 <view class="wish">
43 <view wx:for="{{wishList}}" wx:key="{{index}}" class="wish-item">
44 <view class="display">
45 <image class="prod" mode="aspectFit" src="../../image/prize/prize-{{item.tag}}.png" />
46 </view>
47 <view class="mid">
48 <view class="name">{{item.prizeName}}</view>
49 <view class="progress">
50 <view class="pro">
51 <view class="flag" style="left:{{item.progressLeft}}rpx;">
52 <image class="prod" mode="aspectFit" src="../../image/oss/my-wish/my-wish-c4.png" />
53 <view class="t1">{{item.elasticValue}}</view>
54 </view>
55 <view class="line">
56 <view class="line-thumb" style="width:{{item.progress}}%;"></view>
57 </view>
58 </view>
59 <view class="val">{{item.conditionElasticValue}}</view>
60 </view>
61 </view>
62 </view>
63 </view>
64 </view>
65 </view>
66 <view bindtap="onPlayTooHandler" class="play-too-btn">我也要玩</view>
67 </view>
68 </view>
8 </view> 69 </view>
9 </view> 70 </view>
......
1 import { 1 import {
2 getBindtapData 2 getBindtapData,
3 getObjByListKeyValue
3 } from '../../utils/util'; 4 } from '../../utils/util';
4 5
5 import { 6 import {
...@@ -16,7 +17,7 @@ Page({ ...@@ -16,7 +17,7 @@ Page({
16 tipsWishVisible: false, 17 tipsWishVisible: false,
17 tipsShakeVisible: false, 18 tipsShakeVisible: false,
18 tipsCommonVisible: false, 19 tipsCommonVisible: false,
19 tipsCreateCompleteVisible: false, 20 tipsCreateCompleteVisible: true,
20 tipsInnerText: "", 21 tipsInnerText: "",
21 curStatus: 1, // 当前场景 22 curStatus: 1, // 当前场景
22 candidate: [], // 心愿候选列表 23 candidate: [], // 心愿候选列表
...@@ -25,6 +26,8 @@ Page({ ...@@ -25,6 +26,8 @@ Page({
25 taskTotalElasticValue: 0, // 任务分 26 taskTotalElasticValue: 0, // 任务分
26 wishBillInfo: {}, // 生成的心愿单 27 wishBillInfo: {}, // 生成的心愿单
27 curWish: {}, // 当前选择心愿 28 curWish: {}, // 当前选择心愿
29 wishInfo: {}, // 创建后的心愿信息
30 wishList: [], // 创建后的心愿单列表
28 userInfo: {}, 31 userInfo: {},
29 isPageVisible: false, 32 isPageVisible: false,
30 }, 33 },
...@@ -51,6 +54,7 @@ Page({ ...@@ -51,6 +54,7 @@ Page({
51 userInfo: app.globalData.userInfo 54 userInfo: app.globalData.userInfo
52 }) 55 })
53 this.queryWishbillPrizeCandidate(); 56 this.queryWishbillPrizeCandidate();
57 this.queryWishbillDetail();
54 }); 58 });
55 this.initShake(); 59 this.initShake();
56 }, 60 },
...@@ -202,7 +206,8 @@ Page({ ...@@ -202,7 +206,8 @@ Page({
202 let curIndex = getBindtapData(evt, "index"); 206 let curIndex = getBindtapData(evt, "index");
203 console.log("curIndex:", curIndex); 207 console.log("curIndex:", curIndex);
204 let curData = productMap[curIndex + ""]; 208 let curData = productMap[curIndex + ""];
205 let product = this.getProductByCode(curIndex); 209 // let product = this.getProductByCode(curIndex);
210 let product = getObjByListKeyValue(curIndex, 'prizeDefineCode', this.data.candidate);
206 curData = Object.assign(curData, product) 211 curData = Object.assign(curData, product)
207 console.log("product:", product); 212 console.log("product:", product);
208 console.log("curData:", curData); 213 console.log("curData:", curData);
...@@ -245,7 +250,7 @@ Page({ ...@@ -245,7 +250,7 @@ Page({
245 }) 250 })
246 if (uni) { 251 if (uni) {
247 this.setData({ 252 this.setData({
248 tipsInnerText: "心愿重复啦~", 253 tipsInnerText: "心愿重复啦~\n换个其他心愿试试！",
249 tipsCommonVisible: true 254 tipsCommonVisible: true
250 }) 255 })
251 return; 256 return;
...@@ -320,6 +325,30 @@ Page({ ...@@ -320,6 +325,30 @@ Page({
320 }); 325 });
321 }); 326 });
322 }, 327 },
328 // 获取心愿单详情
329 queryWishbillDetail() {
330 return new Promise((resolve, reject) => {
331 app.queryIndex().then((result) => {
332 app.post({
333 url: app.api.wishbillDetail,
334 data: {
335 billCode: app.globalData.indexInfo.wishBillCode
336 }
337 }).then((result) => {
338 let wishList = result.wishGifts;
339 wishList.forEach(element => {
340 let product = productMap[element.prizeDefineCode + ""];
341 element = Object.assign(element, product);
342 });
343 console.log("wishList:", wishList);
344 this.setData({
345 wishInfo: result,
346 wishList: wishList
347 })
348 })
349 })
350 });
351 },
323 // 隐藏所有蒙层 352 // 隐藏所有蒙层
324 hideMask() { 353 hideMask() {
325 this.setData({ 354 this.setData({
......
...@@ -71,7 +71,7 @@ ...@@ -71,7 +71,7 @@
71 <tips-shake-comp bind:evtcomp="evtcomp"></tips-shake-comp> 71 <tips-shake-comp bind:evtcomp="evtcomp"></tips-shake-comp>
72 </van-popup> 72 </van-popup>
73 <van-popup show="{{ tipsCreateCompleteVisible }}"> 73 <van-popup show="{{ tipsCreateCompleteVisible }}">
74 <tips-create-complete-comp bind:evtcomp="evtcomp" wish-list="{{myWishList}}" ele-val="{{taskTotalElasticValue}}" wish-bill-info="{{wishBillInfo}}"></tips-create-complete-comp> 74 <tips-create-complete-comp bind:evtcomp="evtcomp" wish-info="{{wishInfo}}" wish-list="{{wishList}}" wish-list="{{wishList}}" ele-val="{{taskTotalElasticValue}}" wish-bill-info="{{wishBillInfo}}"></tips-create-complete-comp>
75 </van-popup> 75 </van-popup>
76 <van-popup show="{{ tipsCommonVisible }}"> 76 <van-popup show="{{ tipsCommonVisible }}">
77 <tips-common-comp bind:evtcomp="evtcomp" inner-text="{{tipsInnerText}}"></tips-common-comp> 77 <tips-common-comp bind:evtcomp="evtcomp" inner-text="{{tipsInnerText}}"></tips-common-comp>
......
...@@ -62,15 +62,15 @@ ...@@ -62,15 +62,15 @@
62 justify-content: space-between; 62 justify-content: space-between;
63 flex-wrap: wrap; 63 flex-wrap: wrap;
64 margin-top: 32px; 64 margin-top: 32px;
65 // align-items: center;
65 66
66 &-item { 67 &-item {
68 display: flex;
67 width: 312px; 69 width: 312px;
68 height: 72px; 70 padding: 20px 10px;
69 line-height: 72px;
70 border-radius: 36px; 71 border-radius: 36px;
71 border: solid 1px #999999; 72 border: solid 1px #999999;
72 @extend .bb; 73 @extend .bb;
73 padding: 0 10px;
74 font-size: 22px; 74 font-size: 22px;
75 color: #333333; 75 color: #333333;
76 margin-bottom: 28px; 76 margin-bottom: 28px;
......
...@@ -18,7 +18,8 @@ ...@@ -18,7 +18,8 @@
18 </view> 18 </view>
19 <view class="answer"> 19 <view class="answer">
20 <view bindtap="onSelectAnswerHandler" data-pdata="{{item}}" data-pindex="{{index}}" data-data="{{item2}}" data-index="{{index2}}" wx:for="{{item.answers}}" wx:key="index2" wx:for-index="index2" wx:for-item="item2" class="answer-item {{item2.selected ? 'selected':''}} {{item2.rightAnswer == 1 && hadAnswer ? 'right' :''}} "> 20 <view bindtap="onSelectAnswerHandler" data-pdata="{{item}}" data-pindex="{{index}}" data-data="{{item2}}" data-index="{{index2}}" wx:for="{{item.answers}}" wx:key="index2" wx:for-index="index2" wx:for-item="item2" class="answer-item {{item2.selected ? 'selected':''}} {{item2.rightAnswer == 1 && hadAnswer ? 'right' :''}} ">
21 {{questionNumList[index2]}}.{{item2.answer}} 21 <view>{{questionNumList[index2]}}.</view>
22 <view>{{item2.answer}}</view>
22 </view> 23 </view>
23 </view> 24 </view>
24 </view> 25 </view>
......
...@@ -3,6 +3,24 @@ Page({ ...@@ -3,6 +3,24 @@ Page({
3 data: {}, 3 data: {},
4 onShareAppMessage() {}, 4 onShareAppMessage() {},
5 onLoad(options) {}, 5 onLoad(options) {},
6
7 /**
8 * 提交表单
9 * @param {*} evt
10 */
11 onSubmitHandler(evt) {
12
13 },
14 /**
15 * 返回心愿单页面
16 * @param {*} evt
17 */
18 onWishHandler(evt) {
19 app.router.push({
20 openType: "reLaunch",
21 path: "wish"
22 })
23 },
6 // 子组件事件 24 // 子组件事件
7 evtcomp(evt) { 25 evtcomp(evt) {
8 let { 26 let {
......
1 { 1 {
2 "navigationBarTitleText": "more" 2 "navigationBarTitleText": "领取礼物"
3 } 3 }
......
1 @import '../../assets/scss/mixins'; 1 @import '../../assets/scss/mixins';
2 @import '../../assets/scss/utils'; 2 @import '../../assets/scss/utils';
3 3
4 $contentWidth:560px;
5 $iptHeight:80px;
6
4 .page { 7 .page {
5 .bgc {} 8 .bgc {}
6 9
7 .bg {} 10 .bg {
11 position: fixed;
12 width: 100%;
13 height: 100%;
14 }
15
16 .decoration {
17 position: relative;
18
19 .d1 {
20 position: absolute;
21 width: 193px;
22 height: 625px;
23 left: 0;
24 top: -120px;
25 }
26
27 .d2 {
28 position: absolute;
29 width: 194px;
30 height: 369px;
31 right: 0;
32 top: 200px;
33 }
34 }
8 35
9 .main { 36 .main {
37 position: relative;
38
10 .top-space { 39 .top-space {
11 height: 0px; 40 height: 40px;
12 } 41 }
13 42
14 .content { 43 .content {
15 position: relative; 44 position: relative;
45
46 .top {
47 .tit {
48 text-align: center;
49 width: 369px;
50 height: 86px;
51 margin: 0 auto;
52
53 image {
54 width: 369px;
55 height: 86px;
56 }
57 }
58
59 .display {
60 margin: 24px auto 0;
61 position: relative;
62 width: 190px;
63 height: 190px;
64 border-radius: 95px;
65 background-image: radial-gradient(circle at 0 0, #ffffff, #d8d8d8);
66 @extend .fcc;
67
68 .prod {
69 max-width: 200px;
70 max-height: 200px;
71 }
72
73 .close {
74 width: 30px;
75 height: 30px;
76 position: absolute;
77 bottom: 0;
78 right: 0;
79 }
80 }
81
82 .name {
83 text-align: center;
84 color: #ffffff;
85 font-size: 28px;
86 margin-top: 20px;
87 }
88 }
89
90 .table {
91 position: relative;
92 margin: 12px auto 0;
93 width: 744px;
94 height: 840px;
95
96 .ebg {
97 position: absolute;
98 width: 744px;
99 height: 840px;
100 }
101
102 .tips {
103 color: #ba3039;
104 font-size: 24px;
105 }
106
107 .space1 {
108 height: 88px;
109 }
110
111 .border {
112 position: relative;
113 width: $contentWidth;
114 margin: 0 auto;
115 height: 840px;
116 }
117
118 .submit-btn {
119 @include cb(300px, 80px);
120 position: absolute;
121 left: 0;
122 right: 0;
123 bottom: 68px;
124 margin: 0 auto;
125 }
126
127 .edit {
128 .form {
129 margin-top: 40px;
130
131 .ipt {
132 color: #333333;
133 width: $contentWidth;
134 height: $iptHeight;
135 border-radius: 40px;
136 border: solid 1px #b83138;
137 background-color: #ffffff;
138 display: flex;
139 margin-bottom: 30px;
140
141 .label {
142 text-align: center;
143 width: 110px;
144 height: $iptHeight;
145 line-height: $iptHeight;
146 color: #b93138;
147 font-size: 28px;
148 }
149
150 .input {
151 flex: 1;
152 height: $iptHeight;
153 @extend .bb;
154 padding-right: 24px;
155 }
156
157 .area {
158 display: flex;
159 align-items: center;
160
161 &-item {
162 @include ellipsis(1);
163 display: flex;
164 justify-content: center;
165 align-items: center;
166 width: 150px;
167 @extend .bb;
168 padding: 0 20px;
169
170 .icon {
171 width: 15px;
172 height: 9px;
173 margin-left: 8px;
174 }
175 }
176
177 .line {
178 width: 2px;
179 height: 30px;
180 background-color: #b83138;
181 }
182
183
184 }
185
186 .textarea {
187 min-height: 160px;
188 @extend .bb;
189 padding: 24px 0;
190 }
191 }
192
193 .ipt2 {
194 height: auto;
195 // min-height: 160px;
196 }
197 }
198
199
200 }
201
202 .result {
203 .form {
204 margin: 58px auto 0;
205 font-size: 28px;
206 color: #b93138;
207
208 &-item {
209 display: flex;
210 margin-bottom: 30px;
211
212 .label {
213 width: 80px;
214 }
215
216 .val {
217 color: #333333;
218 flex: 1;
219 }
220 }
221 }
222 }
223 }
224
225
16 } 226 }
17 } 227 }
18 } 228 }
......
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"></view> -->
4 <!-- <view class="app__top-shadow"></view> --> 4 <image class="bg" src="../../image/oss/poster/poster-bg.png" mode="scaleToFill" />
5 <view class="decoration">
6 <image class="d1" mode="widthFix" src="../../image/oss/user-table/user-table-d1.png" />
7 <image class="d2" mode="widthFix" src="../../image/oss/user-table/user-table-d2.png" />
8 </view>
5 <view class="app__content main"> 9 <view class="app__content main">
6 <view class="top-space"></view> 10 <view class="top-space"></view>
7 <view class="content"></view> 11 <view class="content">
12 <view class="top">
13 <view class="tit">
14 <image mode="widthFix" src="../../image/oss/user-table/user-table-c1.png" />
15 </view>
16 <view class="display">
17 <image class="prod" mode="aspectFit" src="../../image/prize/prize-1.png" />
18 </view>
19 <view class="name">丸美弹力蛋白凝时紧致乳</view>
20 </view>
21 <!-- 表单 -->
22 <view class="table">
23 <image class="ebg" mode="widthFix" src="../../image/oss/user-table/user-table-c2.png" />
24 <!-- 编辑框 -->
25 <view wx:if="{{1>10}}" class="border edit">
26 <view class="space1"></view>
27 <view class="tips">*请填写您的邮寄地址，我们将为您送出以上礼品</view>
28 <view class="form">
29 <view class="ipt">
30 <view class="label">姓名</view>
31 <input class="input" placeholder="请输入" />
32 </view>
33 <view class="ipt">
34 <view class="label">电话</view>
35 <input class="input" placeholder="请输入" />
36 </view>
37 <view class="ipt">
38 <view class="label">区域</view>
39 <view class="input area">
40 <view class="area-item area-item2">
41 省
42 <image class="icon" mode="widthFix" src="../../image/oss/icon/icon-drow-down.png" />
43 </view>
44 <view class="line"></view>
45 <view class="area-item area-item2">
46 市
47 <image class="icon" mode="widthFix" src="../../image/oss/icon/icon-drow-down.png" />
48 </view>
49 <view class="line"></view>
50 <view class="area-item area-item2">
51 区
52 <image class="icon" mode="widthFix" src="../../image/oss/icon/icon-drow-down.png" />
53 </view>
54 </view>
55 </view>
56 <view class="ipt ipt2">
57 <view class="label">地址</view>
58 <textarea class="input textarea" placeholder="请输入"></textarea>
59 </view>
60 </view>
61 <view bindtap="onSubmitHandler" class="submit-btn">确认提交</view>
62 </view>
63 <!-- 结果显示 -->
64 <view wx:else class="border result">
65 <view class="space1"></view>
66 <view class="tips">*感谢您提交的地址，我们将尽快为您送出以上礼品</view>
67 <view class="form">
68 <view class="form-item">
69 <view class="label">姓名</view>
70 <view class="val">林小美</view>
71 </view>
72 <view class="form-item">
73 <view class="label">电话</view>
74 <view class="val">18812345678</view>
75 </view>
76 <view class="form-item">
77 <view class="label">地址</view>
78 <view class="val">广州市天河区珠江新城花城大道路xx广州市天河区珠江新城花城大道路xx广州市天河区珠江新城花城大道路xx</view>
79 </view>
80 </view>
81 <view bindtap="onWishHandler" class="submit-btn">返回首页</view>
82 </view>
83 </view>
84 </view>
8 </view> 85 </view>
9 </view> 86 </view>
......
1 import {
2 getBindtapData,
3 getObjByListKeyValue
4 } from '../../utils/util';
5
6 import {
7 productMap
8 } from '../../const/custom-data';
9
1 let app = getApp(); 10 let app = getApp();
2 Page({ 11 Page({
3 data: { 12 data: {
...@@ -24,13 +33,21 @@ Page({ ...@@ -24,13 +33,21 @@ Page({
24 * 领取我的奖品 33 * 领取我的奖品
25 */ 34 */
26 onGetGiftHandler(evt) { 35 onGetGiftHandler(evt) {
27 36 let curData = getBindtapData(evt);
37 console.log("curData:", curData);
38 app.poster({
39 url: app.api.wishbillGiftAccept,
40 data: curData
41 }).then((result) => {
42 // let curData
43 });
28 }, 44 },
29 /** 45 /**
30 * 查看我的奖品 46 * 查看我的奖品
31 */ 47 */
32 onCheckGiftHandler(evt) { 48 onCheckGiftHandler(evt) {
33 49 let curData = getBindtapData(evt);
50 console.log("curData:", curData);
34 }, 51 },
35 // 显示规则页面 52 // 显示规则页面
36 onShowRuleHandler() { 53 onShowRuleHandler() {
...@@ -69,9 +86,20 @@ Page({ ...@@ -69,9 +86,20 @@ Page({
69 billCode: app.globalData.indexInfo.wishBillCode 86 billCode: app.globalData.indexInfo.wishBillCode
70 } 87 }
71 }).then((result) => { 88 }).then((result) => {
89 let wishList = result.wishGifts;
90 wishList.forEach(element => {
91 let product = productMap[element.prizeDefineCode + ""];
92 element = Object.assign(element, product);
93 let progress = element.elasticValue / element.conditionElasticValue * 100;
94 if (progress > 100) progress = 100;
95 // 直接计算坐标
96 let progressLeft = progress * 2.2 - 51;
97 element.progress = progress;
98 element.progressLeft = progressLeft;
99 });
72 this.setData({ 100 this.setData({
73 wishInfo: result, 101 wishInfo: result,
74 wishList: result.wishGifts 102 wishList: wishList
75 }) 103 })
76 }) 104 })
77 }); 105 });
......
...@@ -59,7 +59,6 @@ ...@@ -59,7 +59,6 @@
59 width: 182px; 59 width: 182px;
60 height: 182px; 60 height: 182px;
61 border-radius: 91px; 61 border-radius: 91px;
62 background-color: wheat;
63 left: 0; 62 left: 0;
64 right: 0; 63 right: 0;
65 top: -82px; 64 top: -82px;
...@@ -124,7 +123,6 @@ ...@@ -124,7 +123,6 @@
124 max-width: 200px; 123 max-width: 200px;
125 max-height: 200px; 124 max-height: 200px;
126 } 125 }
127
128 } 126 }
129 127
130 .mid { 128 .mid {
...@@ -137,7 +135,7 @@ ...@@ -137,7 +135,7 @@
137 135
138 .name { 136 .name {
139 color: #333333; 137 color: #333333;
140 font-size: 28px; 138 font-size: 26px;
141 @include ellipsis(2); 139 @include ellipsis(2);
142 } 140 }
143 141
...@@ -201,7 +199,8 @@ ...@@ -201,7 +199,8 @@
201 align-self: center; 199 align-self: center;
202 font-size: 28px; 200 font-size: 28px;
203 } 201 }
204 .disable{ 202
203 .disable {
205 background: transparent; 204 background: transparent;
206 background-color: #d2d2d2; 205 background-color: #d2d2d2;
207 } 206 }
......
...@@ -24,28 +24,30 @@ ...@@ -24,28 +24,30 @@
24 <view class="wish"> 24 <view class="wish">
25 <view wx:for="{{wishList}}" wx:key="{{index}}" class="wish-item"> 25 <view wx:for="{{wishList}}" wx:key="{{index}}" class="wish-item">
26 <view class="display"> 26 <view class="display">
27 <image class="prod" mode="aspectFit" src="../../image/prize/prize-3.png" /> 27 <image class="prod" mode="aspectFit" src="../../image/prize/prize-{{item.tag}}.png" />
28 </view> 28 </view>
29 <view class="mid"> 29 <view class="mid">
30 <view class="name">{{item.prizeName}}</view> 30 <view class="name">{{item.prizeName}}</view>
31 <view class="progress"> 31 <view class="progress">
32 <view class="pro"> 32 <view class="pro">
33 <view class="flag" style="left:{{(item.elasticValue/item.conditionElasticValue) * 220 - 51}}rpx;"> 33 <view class="flag" style="left:{{item.progressLeft}}rpx;">
34 <image class="prod" mode="aspectFit" src="../../image/oss/my-wish/my-wish-c4.png" /> 34 <image class="prod" mode="aspectFit" src="../../image/oss/my-wish/my-wish-c4.png" />
35 <view class="t1">{{item.elasticValue}}</view> 35 <view class="t1">{{item.elasticValue}}</view>
36 </view> 36 </view>
37 <view class="line"> 37 <view class="line">
38 <view class="line-thumb" style="width:{{item.elasticValue/item.conditionElasticValue}}%;"></view> 38 <view class="line-thumb" style="width:{{item.progress}}%;"></view>
39 </view> 39 </view>
40 </view> 40 </view>
41 <view class="val">{{item.conditionElasticValue}}</view> 41 <view class="val">{{item.conditionElasticValue}}</view>
42 </view> 42 </view>
43 </view> 43 </view>
44 <view wx:if="{{item.accessStatus == 0}}" class="btn disable"> 44 <view wx:if="{{item.accessStatus == 0}}" class="btn disable">弹力充值中</view>
45 弹力充值中 45 <view bindtap="onGetGiftHandler" data-data="{{item}}" wx:if="{{item.accessStatus == 1}}" class="btn">
46 马上领取
47 </view>
48 <view bindtap="onCheckGiftHandler" data-data="{{item}}" wx:if="{{item.accessStatus == 2}}" class="btn">
49 已领取
46 </view> 50 </view>
47 <view bindtap="onGetGiftHandler" wx:if="{{item.accessStatus == 1}}" class="btn">马上领取</view>
48 <view bindtap="onCheckGiftHandler" wx:if="{{item.accessStatus == 2}}" class="btn">已领取</view>
49 </view> 51 </view>
50 </view> 52 </view>
51 <view bindtap="onCreatePosterHandler" class="poster-btn">生成海报</view> 53 <view bindtap="onCreatePosterHandler" class="poster-btn">生成海报</view>
......
...@@ -132,13 +132,30 @@ function getBindtapData(evt, key = "data") { ...@@ -132,13 +132,30 @@ function getBindtapData(evt, key = "data") {
132 return evt.currentTarget.dataset[keyStr]; 132 return evt.currentTarget.dataset[keyStr];
133 } 133 }
134 134
135
136 /**
137 * 从数组中获取 key未value的对象
138 * @param {*} value
139 * @param {*} key
140 * @param {*} list
141 */
142 function getObjByListKeyValue(value, key, list) {
143 let result = null;
144 list.forEach(element => {
145 if (element[key + ""] == value) {
146 result = element;
147 }
148 });
149 return result;
150 }
151
135 /** 152 /**
136 * 获取小程序码 153 * 获取小程序码
137 * path = "/pages/index/index?pa=1" 154 * path = "/pages/index/index?pa=1"
138 * @param {*} path 155 * @param {*} path
139 */ 156 */
140 function wxacodeGet(path) { 157 function wxacodeGet(path) {
141 return " https://api.k.wxpai.cn/bizproxy/mzcfsapi/qrcode/create?path=" + encodeURIComponent(path); 158 return "https://api.k.wxpai.cn/bizproxy/mzcfsapi/qrcode/create?path=" + encodeURIComponent(path);
142 } 159 }
143 160
144 161
...@@ -215,4 +232,5 @@ module.exports = { ...@@ -215,4 +232,5 @@ module.exports = {
215 formatWeek: formatWeek, 232 formatWeek: formatWeek,
216 getBindtapData: getBindtapData, 233 getBindtapData: getBindtapData,
217 wxacodeGet: wxacodeGet, 234 wxacodeGet: wxacodeGet,
235 getObjByListKeyValue:getObjByListKeyValue,
218 } 236 }
......