Skip to content

dev / marubi-wish-list-mp

Go to a project
Toggle navigation
Toggle navigation pinning
b83d74e4 by simon
Options

no message

1 parent a13126d4
Expand all
Inline Side-by-side
Showing 19 changed files with 331 additions and 42 deletions
...@@ -12,6 +12,7 @@ ...@@ -12,6 +12,7 @@
12 // 原子类 12 // 原子类
13 @import "assets/scss/utils"; 13 @import "assets/scss/utils";
14 14
15
15 // 图标 16 // 图标
16 // @import 'styles/iconfont.wxss'; 17 // @import 'styles/iconfont.wxss';
17 18
...@@ -131,3 +132,85 @@ button::after { ...@@ -131,3 +132,85 @@ button::after {
131 border: none; 132 border: none;
132 } 133 }
133 134
135 .animated {
136 -webkit-animation-duration: 1s;
137 animation-duration: 1s;
138 -webkit-animation-fill-mode: both;
139 animation-fill-mode: both;
140 }
141
142 .animated.infinite {
143 -webkit-animation-iteration-count: infinite;
144 animation-iteration-count: infinite;
145 }
146
147 @-webkit-keyframes tada {
148 from {
149 -webkit-transform: scale3d(1, 1, 1);
150 transform: scale3d(1, 1, 1);
151 }
152
153 10%,
154 20% {
155 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
156 transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
157 }
158
159 30%,
160 50%,
161 70%,
162 90% {
163 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
164 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
165 }
166
167 40%,
168 60%,
169 80% {
170 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
171 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
172 }
173
174 to {
175 -webkit-transform: scale3d(1, 1, 1);
176 transform: scale3d(1, 1, 1);
177 }
178 }
179
180 @keyframes tada {
181 from {
182 -webkit-transform: scale3d(1, 1, 1);
183 transform: scale3d(1, 1, 1);
184 }
185
186 10%,
187 20% {
188 -webkit-transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
189 transform: scale3d(0.9, 0.9, 0.9) rotate3d(0, 0, 1, -3deg);
190 }
191
192 30%,
193 50%,
194 70%,
195 90% {
196 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
197 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, 3deg);
198 }
199
200 40%,
201 60%,
202 80% {
203 -webkit-transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
204 transform: scale3d(1.1, 1.1, 1.1) rotate3d(0, 0, 1, -3deg);
205 }
206
207 to {
208 -webkit-transform: scale3d(1, 1, 1);
209 transform: scale3d(1, 1, 1);
210 }
211 }
212
213 .tada {
214 -webkit-animation-name: tada;
215 animation-name: tada;
216 }
......
...@@ -11,4 +11,4 @@ ...@@ -11,4 +11,4 @@
11 11
12 @import "var"; 12 @import "var";
13 13
14 @import "animate"; 14
......

89.5 KB | W: | H:

90.3 KB | W: | H:

  • 2-up
  • Swipe
  • Onion skin
...@@ -68,7 +68,8 @@ ...@@ -68,7 +68,8 @@
68 margin: 0 auto; 68 margin: 0 auto;
69 width: 480px; 69 width: 480px;
70 color: #333333; 70 color: #333333;
71 font-size: 28px; 71 // font-size: 28px;
72 font-size: 24px;
72 line-height: 1.6; 73 line-height: 1.6;
73 height: 140px; 74 height: 140px;
74 @include ellipsis(3); 75 @include ellipsis(3);
......
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
9 <view class="content"> 9 <view class="content">
10 <!-- 摇一摇 --> 10 <!-- 摇一摇 -->
11 <!-- bindtap="queryWishbillAssist" --> 11 <!-- bindtap="queryWishbillAssist" -->
12 <view bindtap="queryWishbillAssist" wx:if="{{status != 1}}" class="shake"> 12 <view bindtap="queryWishbillAssist" wx:if="{{status != 1 && wishInfo.isAssist != 1}}" class="shake">
13 <image class="ebg" mode="widthFix" src="../../image/oss/coop/coop-c2.png" /> 13 <image class="ebg" mode="widthFix" src="../../image/oss/coop/coop-c2.png" />
14 <image class="coop-shake animated tada infinite" mode="widthFix " src="../../image/oss/coop/coop-shake.png" /> 14 <image class="coop-shake animated tada infinite" mode="widthFix " src="../../image/oss/coop/coop-shake.png" />
15 <view class="space1"></view> 15 <view class="space1"></view>
......
...@@ -15,7 +15,7 @@ Page({ ...@@ -15,7 +15,7 @@ Page({
15 tipsGroupMemberVisible: false, 15 tipsGroupMemberVisible: false,
16 tipsNewMemberVisible: false, 16 tipsNewMemberVisible: false,
17 tipsWishVisible: false, 17 tipsWishVisible: false,
18 tipsShakeVisible: true, 18 tipsShakeVisible: false,
19 tipsCommonVisible: false, 19 tipsCommonVisible: false,
20 tipsCreateCompleteVisible: false, 20 tipsCreateCompleteVisible: false,
21 tipsInnerText: "", 21 tipsInnerText: "",
...@@ -31,6 +31,7 @@ Page({ ...@@ -31,6 +31,7 @@ Page({
31 userInfo: {}, 31 userInfo: {},
32 isPageVisible: false, 32 isPageVisible: false,
33 // canShake:false, 33 // canShake:false,
34 guideIndex: 0,
34 }, 35 },
35 onShareAppMessage() {}, 36 onShareAppMessage() {},
36 onShow() { 37 onShow() {
...@@ -59,17 +60,20 @@ Page({ ...@@ -59,17 +60,20 @@ Page({
59 this.initBorder(); 60 this.initBorder();
60 }) 61 })
61 this.checkNeedQuestion(); 62 this.checkNeedQuestion();
63 this.checkFirst();
62 }); 64 });
63 this.initShake(); 65 this.initShake();
64 }, 66 },
65 initBorder() { 67 initBorder() {
66 // 第一幕 68 // 第一幕
67 let productList1 = [ 69 // let productList1 = [
68 "P000000000000000000000000000001", "P000000000000000000000000000002", "P000000000000000000000000000003" 70 // "P000000000000000000000000000001", "P000000000000000000000000000002", "P000000000000000000000000000003"
69 ] 71 // ]
70 let targetProductList = productList1; 72 // let targetProductList = productList1;
71 let randomIndex = targetProductList[Math.floor(Math.random() * targetProductList.length)]; 73 // let randomIndex = targetProductList[Math.floor(Math.random() * targetProductList.length)];
72 this.doShowTipsBorder(randomIndex); 74 // this.doShowTipsBorder(randomIndex);
75 this.doShowTipsBorder("P000000000000000000000000000002");
76
73 }, 77 },
74 // 添加摇一摇 78 // 添加摇一摇
75 initShake() { 79 initShake() {
...@@ -83,20 +87,23 @@ Page({ ...@@ -83,20 +87,23 @@ Page({
83 tipsShakeVisible: false, 87 tipsShakeVisible: false,
84 tipsCreateCompleteVisible: true 88 tipsCreateCompleteVisible: true
85 }) 89 })
86 // wx.showModal({
87 // title: '提示',
88 // content: '触发摇一摇',
89 // success: res => {
90 // _this.setData({
91 // tipsShakeVisible: false,
92 // tipsCreateCompleteVisible: true
93 // })
94 // }
95 // })
96 } 90 }
97 }); 91 });
98 }, 92 },
99 93
94
95 /**
96 * 是否第一次进入当前页面
97 */
98 checkFirst() {
99 let isFirst = app.store.getItem("create-wish-first");
100 if (!isFirst) {
101 this.setData({
102 guideIndex: 1
103 })
104 }
105 },
106
100 /** 107 /**
101 * 检验是否需要先答题 是的话弹答题 108 * 检验是否需要先答题 是的话弹答题
102 * 1.已经登陆 109 * 1.已经登陆
...@@ -372,6 +379,11 @@ Page({ ...@@ -372,6 +379,11 @@ Page({
372 * @param {*} evt 379 * @param {*} evt
373 */ 380 */
374 onChangeStatusHandler(evt) { 381 onChangeStatusHandler(evt) {
382 wx.showToast({
383 title: "场景修缉中，敬请期待",
384 icon: "none"
385 });
386 return;
375 let curStatus = this.data.curStatus; 387 let curStatus = this.data.curStatus;
376 curStatus++; 388 curStatus++;
377 if (curStatus > 3) { 389 if (curStatus > 3) {
...@@ -382,6 +394,20 @@ Page({ ...@@ -382,6 +394,20 @@ Page({
382 tipsBorderVisible: false 394 tipsBorderVisible: false
383 }) 395 })
384 }, 396 },
397
398 // 点击蒙层指引
399 onGuideHandler() {
400 let guideIndex = this.data.guideIndex;
401 guideIndex++;
402 if (guideIndex > 2) {
403 guideIndex = 0;
404 app.store.setItem("create-wish-first", "true");
405 }
406 this.setData({
407 guideIndex
408 })
409 },
410
385 /** 411 /**
386 * 根据唯一码/code 索引 412 * 根据唯一码/code 索引
387 */ 413 */
......
...@@ -29,6 +29,13 @@ ...@@ -29,6 +29,13 @@
29 height: 40px; 29 height: 40px;
30 animation: scalelinear 2s linear infinite; 30 animation: scalelinear 2s linear infinite;
31 } 31 }
32
33 .rect {
34 position: absolute;
35 z-index: 41;
36 // background-color: wheat;
37 opacity: .5;
38 }
32 } 39 }
33 40
34 .view1 { 41 .view1 {
...@@ -50,6 +57,27 @@ ...@@ -50,6 +57,27 @@
50 left: 558px; 57 left: 558px;
51 top: 437px; 58 top: 437px;
52 } 59 }
60
61 .rect1 {
62 width: 150px;
63 height: 360px;
64 left: 40px;
65 top: 160px;
66 }
67
68 .rect2 {
69 width: 150px;
70 height: 150px;
71 left: 234px;
72 top: 350px;
73 }
74
75 .rect3 {
76 width: 150px;
77 height: 380px;
78 left: 534px;
79 top: 220px;
80 }
53 } 81 }
54 82
55 .tips-border { 83 .tips-border {
...@@ -232,7 +260,7 @@ ...@@ -232,7 +260,7 @@
232 font-size: 120px; 260 font-size: 120px;
233 } 261 }
234 262
235 .icon{} 263 .icon {}
236 264
237 .tips { 265 .tips {
238 266
...@@ -278,3 +306,36 @@ ...@@ -278,3 +306,36 @@
278 transform: scale(1); 306 transform: scale(1);
279 } 307 }
280 } 308 }
309
310
311 .guide {
312 position: relative;
313
314 .mask {
315 background-color: rgba($color: #000000, $alpha: .7);
316 width: 100%;
317 height: 100%;
318 z-index: 101;
319 position: fixed;
320 bottom: 0;
321 }
322
323 &-item {
324 position: absolute;
325 z-index: 9999;
326 }
327
328 &-item-1 {
329 width: 644px;
330 height: 246px;
331 top: 158px;
332 left: 20px;
333 }
334
335 &-item-2 {
336 width: 639px;
337 height: 169px;
338 top: 496px;
339 left: 40px;
340 }
341 }
......
1 <view class="page"> 1 <view class="page">
2 <view wx:if="{{guideIndex >= 1 && guideIndex <= 2 }}" bindtap="onGuideHandler" class="guide">
3 <view class="mask"></view>
4 <image wx:if="{{guideIndex == 1}}" class="guide-item guide-item-1" mode="widthFix" src="../../image/guide/guide-c-wish-1.png" />
5 <image wx:if="{{guideIndex == 2}}" class="guide-item guide-item-2" mode="widthFix" src="../../image/guide/guide-c-wish-2.png" />
6 </view>
2 <view class="app__bgc bgc {{curStatus==1?'bgc1':''}}"></view> 7 <view class="app__bgc bgc {{curStatus==1?'bgc1':''}}"></view>
3 <view class="app__bg bg"></view> 8 <view class="app__bg bg"></view>
4 <!-- 场景 --> 9 <!-- 场景 -->
...@@ -9,6 +14,9 @@ ...@@ -9,6 +14,9 @@
9 <image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000002" class="point point1" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" /> 14 <image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000002" class="point point1" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" />
10 <image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000003" class="point point2" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" /> 15 <image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000003" class="point point2" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" />
11 <image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000001" class="point point3" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" /> 16 <image bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000001" class="point point3" mode="widthFix" src="../../image/oss/create-wish/cw-point.png" />
17 <view class="rect rect1" bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000002"></view>
18 <view class="rect rect2" bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000003"></view>
19 <view class="rect rect3" bindtap="onShowTipsBorderHandler" data-index="P000000000000000000000000000001"></view>
12 </view> 20 </view>
13 <view wx:if="{{curStatus==2}}" class="view view2">场景待确认2</view> 21 <view wx:if="{{curStatus==2}}" class="view view2">场景待确认2</view>
14 <view wx:if="{{curStatus==3}}" class="view view3">场景待确认3</view> 22 <view wx:if="{{curStatus==3}}" class="view view3">场景待确认3</view>
......
...@@ -13,21 +13,26 @@ Page({ ...@@ -13,21 +13,26 @@ Page({
13 }) 13 })
14 }, 14 },
15 onLoad(options) { 15 onLoad(options) {
16 app.queryIndex({ 16
17 auth: false 17 let sessionId = app.store.getItem('sessionId');
18 }).then((result) => { 18 if (sessionId) {
19 this.setData({ 19 app.queryIndex({
20 indexInfo: app.globalData.indexInfo 20 auth: false
21 }) 21 }).then((result) => {
22 let { 22 this.setData({
23 wishBillCode 23 indexInfo: app.globalData.indexInfo
24 } = app.globalData.indexInfo;
25 if (wishBillCode) {
26 app.router.push({
27 path: "wish"
28 }) 24 })
29 } 25 let {
30 }) 26 wishBillCode
27 } = app.globalData.indexInfo;
28 if (wishBillCode) {
29 app.router.push({
30 openType: "redirectTo",
31 path: "wish"
32 })
33 }
34 })
35 }
31 }, 36 },
32 initData() {}, 37 initData() {},
33 // 开始互动游戏 判断是否会员 38 // 开始互动游戏 判断是否会员
......
...@@ -21,6 +21,7 @@ Page({ ...@@ -21,6 +21,7 @@ Page({
21 status: 1, // 1正常(有库存) 2无库存 21 status: 1, // 1正常(有库存) 2无库存
22 animationThumbData: [], // 进度条动画 22 animationThumbData: [], // 进度条动画
23 animationFlagData: [], // 旗帜画库 23 animationFlagData: [], // 旗帜画库
24 guideIndex: 0, // 指引索引
24 }, 25 },
25 onShareAppMessage(res) { 26 onShareAppMessage(res) {
26 if (res.from === 'button') { 27 if (res.from === 'button') {
...@@ -55,9 +56,36 @@ Page({ ...@@ -55,9 +56,36 @@ Page({
55 this.playAnimation(); 56 this.playAnimation();
56 }); 57 });
57 this.queryWishbillHelpers(); 58 this.queryWishbillHelpers();
59 // this.pageScrollToBottom();
60 this.checkFirst();
58 }) 61 })
59 }, 62 },
60 63
64 /**
65 * 是否第一次进入当前页面
66 */
67 checkFirst() {
68 let isFirst = app.store.getItem("wish-first");
69 if (!isFirst) {
70 this.setData({
71 guideIndex: 1
72 })
73 }
74 },
75
76 /**
77 * 滚动到页面底部
78 */
79 pageScrollToBottom() {
80 wx.createSelectorQuery().select('#page').boundingClientRect(function (rect) {
81 // 使页面滚动到底部
82 wx.pageScrollTo({
83 scrollTop: rect.bottom + 5000,
84 duration: 300
85 })
86 }).exec()
87 },
88
61 // 播放动画 89 // 播放动画
62 playAnimation() { 90 playAnimation() {
63 let wishList = this.data.wishList; 91 let wishList = this.data.wishList;
...@@ -185,6 +213,25 @@ Page({ ...@@ -185,6 +213,25 @@ Page({
185 onShareHandler() { 213 onShareHandler() {
186 214
187 }, 215 },
216 // 点击蒙层指引
217 onGuideHandler() {
218 let guideIndex = this.data.guideIndex;
219 guideIndex++;
220 if (guideIndex > 4) {
221 guideIndex = 0;
222 wx.pageScrollTo({
223 scrollTop: 0,
224 duration: 300
225 })
226 app.store.setItem("wish-first", "true");
227 }
228 if (guideIndex == 4) {
229 this.pageScrollToBottom();
230 }
231 this.setData({
232 guideIndex
233 })
234 },
188 // 获取心愿单详情 235 // 获取心愿单详情
189 queryWishbillDetail() { 236 queryWishbillDetail() {
190 return new Promise((resolve, reject) => { 237 return new Promise((resolve, reject) => {
......
...@@ -88,14 +88,19 @@ ...@@ -88,14 +88,19 @@
88 .mycard { 88 .mycard {
89 @include cb(160px, 48px); 89 @include cb(160px, 48px);
90 margin: 16px auto; 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; 91 font-size: 24px;
97 92
93
94 // @include cb(160px, 48px);
95 // margin: 16px auto;
96 // font-size: 24px;
97 // @include btc(160px, 48px);
98 // color: #bf0221;
99 // background-image: linear-gradient(to right, #fbddd5, #f9efed 51%, #ffded9 99%), linear-gradient(to bottom, #000000, #000000);
100 // border-radius: 24px;
98 } 101 }
102
103
99 } 104 }
100 105
101 // 奖品 106 // 奖品
...@@ -225,7 +230,7 @@ ...@@ -225,7 +230,7 @@
225 background-image: linear-gradient(to right, #b83138, #f2234a 51%, #b83138); 230 background-image: linear-gradient(to right, #b83138, #f2234a 51%, #b83138);
226 color: #ffffff; 231 color: #ffffff;
227 font-size: 28px; 232 font-size: 28px;
228 @include btc(200px, 56px); 233 @include btc(192px, 54px);
229 @include border-top-radius(28px); 234 @include border-top-radius(28px);
230 } 235 }
231 } 236 }
...@@ -320,3 +325,49 @@ ...@@ -320,3 +325,49 @@
320 } 325 }
321 } 326 }
322 } 327 }
328
329 .guide {
330 position: relative;
331
332 .mask {
333 background-color: rgba($color: #000000, $alpha: .7);
334 width: 100%;
335 height: 100%;
336 z-index: 101;
337 position: fixed;
338 bottom: 0;
339 }
340
341 &-item {
342 position: absolute;
343 z-index: 9999;
344 }
345
346 &-item-1 {
347 width: 459px;
348 height: 281px;
349 top: 30px;
350 right: 2px;
351 }
352
353 &-item-2 {
354 width: 565px;
355 height: 281px;
356 top: 296px;
357 left: 127px;
358 }
359
360 &-item-3 {
361 width: 565px;
362 height: 281px;
363 top: 899.8px;
364 left: 159px;
365 }
366
367 &-item-4 {
368 width: 410px;
369 height: 199px;
370 top: 1588px;
371 left: 292px;
372 }
373 }
......
1 <view class="page"> 1 <view class="page" id="page">
2 <view wx:if="{{guideIndex >= 1 && guideIndex <= 4 }}" bindtap="onGuideHandler" class="guide">
3 <view class="mask"></view>
4 <image wx:if="{{guideIndex == 1}}" class="guide-item guide-item-1" mode="widthFix" src="../../image/guide/guide-wish-1.png" />
5 <image wx:if="{{guideIndex == 2}}" class="guide-item guide-item-2" mode="widthFix" src="../../image/guide/guide-wish-2.png" />
6 <image wx:if="{{guideIndex == 3}}" class="guide-item guide-item-3" mode="widthFix" src="../../image/guide/guide-wish-3.png" />
7 <image wx:if="{{guideIndex == 4}}" class="guide-item guide-item-4" mode="widthFix" src="../../image/guide/guide-wish-4.png" />
8 </view>
2 <view class="app__bgc bgc"></view> 9 <view class="app__bgc bgc"></view>
3 <view class="app__bg bg"> 10 <view class="app__bg bg">
4 <image class="b1" mode="widthFix" src="../../image/oss/my-wish/my-wish-c1.png" /> 11 <image class="b1" mode="widthFix" src="../../image/oss/my-wish/my-wish-c1.png" />
......