Skip to content

dev / marubi-wish-list-mp

Go to a project
Toggle navigation
Toggle navigation pinning
8c056043 by simon
Options

1.登录页添加拼图验证 

2.创建心愿单页面优化
    1)随机出现一个心愿的描述 (原全部隐藏)
    2)未添加心愿单时，加empty提示
1 parent a422d568
Inline Side-by-side
Showing 8 changed files with 200 additions and 7 deletions
...@@ -31,6 +31,7 @@ ...@@ -31,6 +31,7 @@
31 }, 31 },
32 "usingComponents": { 32 "usingComponents": {
33 "authorize-comp": "../../component/authorize-comp/authorize-comp", 33 "authorize-comp": "../../component/authorize-comp/authorize-comp",
34 "empty-tips": "../../component/empty-tips/empty-tips",
34 "van-popup": "../../ui/vant-weapp/popup/index" 35 "van-popup": "../../ui/vant-weapp/popup/index"
35 } 36 }
36 } 37 }
......
...@@ -42,6 +42,7 @@ Page({ ...@@ -42,6 +42,7 @@ Page({
42 this.initData(); 42 this.initData();
43 }, 43 },
44 initData() { 44 initData() {
45
45 // 还原缓存心愿单 46 // 还原缓存心愿单
46 let myWishList = app.store.getItem("wish") || []; 47 let myWishList = app.store.getItem("wish") || [];
47 this.setData({ 48 this.setData({
...@@ -52,10 +53,21 @@ Page({ ...@@ -52,10 +53,21 @@ Page({
52 this.setData({ 53 this.setData({
53 userInfo: app.globalData.userInfo 54 userInfo: app.globalData.userInfo
54 }) 55 })
55 this.queryWishbillPrizeCandidate(); 56 this.queryWishbillPrizeCandidate().then((result) => {
57 this.initBorder();
58 })
56 }); 59 });
57 this.initShake(); 60 this.initShake();
58 }, 61 },
62 initBorder() {
63 // 第一幕
64 let productList1 = [
65 "P000000000000000000000000000001", "P000000000000000000000000000002", "P000000000000000000000000000003"
66 ]
67 let targetProductList = productList1;
68 let randomIndex = targetProductList[Math.floor(Math.random() * targetProductList.length)];
69 this.doShowTipsBorder(randomIndex);
70 },
59 // 添加摇一摇 71 // 添加摇一摇
60 initShake() { 72 initShake() {
61 let _this = this; 73 let _this = this;
...@@ -207,13 +219,13 @@ Page({ ...@@ -207,13 +219,13 @@ Page({
207 */ 219 */
208 onShowTipsBorderHandler(evt) { 220 onShowTipsBorderHandler(evt) {
209 let curIndex = getBindtapData(evt, "index"); 221 let curIndex = getBindtapData(evt, "index");
222 this.doShowTipsBorder(curIndex);
223 },
224 doShowTipsBorder(curIndex) {
210 console.log("curIndex:", curIndex); 225 console.log("curIndex:", curIndex);
211 let curData = productMap[curIndex + ""]; 226 let curData = productMap[curIndex + ""];
212 // let product = this.getProductByCode(curIndex);
213 let product = getObjByListKeyValue(curIndex, 'prizeDefineCode', this.data.candidate); 227 let product = getObjByListKeyValue(curIndex, 'prizeDefineCode', this.data.candidate);
214 curData = Object.assign(curData, product) 228 curData = Object.assign(curData, product)
215 console.log("product:", product);
216 console.log("curData:", curData);
217 this.setData({ 229 this.setData({
218 curWish: curData, 230 curWish: curData,
219 tipsBorderVisible: true, 231 tipsBorderVisible: true,
......
...@@ -216,6 +216,31 @@ ...@@ -216,6 +216,31 @@
216 } 216 }
217 } 217 }
218 218
219 .empty {
220 position: relative;
221 text-align: center;
222 min-height: 238px;
223 padding-top: 24px;
224 @extend .bb;
225
226 // color: #c7565d;
227 color: #c77378;
228 font-size: 28px;
229
230 .iconfont {
231 // color: #c7565d;
232 font-size: 120px;
233 }
234
235 .icon{}
236
237 .tips {
238
239 margin-top: 16px;
240 line-height: 40px;
241 }
242 }
243
219 // 提交心愿按钮 244 // 提交心愿按钮
220 .submit-btn { 245 .submit-btn {
221 margin: 48px auto 0; 246 margin: 48px auto 0;
......
...@@ -36,7 +36,7 @@ ...@@ -36,7 +36,7 @@
36 <image class="ebg" mode="widthFix" src="../../image/oss/create-wish/cw-border.png" /> 36 <image class="ebg" mode="widthFix" src="../../image/oss/create-wish/cw-border.png" />
37 <view class="space1"></view> 37 <view class="space1"></view>
38 <!-- 心愿容器 --> 38 <!-- 心愿容器 -->
39 <view class="wish"> 39 <view wx:if="{{myWishList.length > 0}}" class="wish">
40 <view wx:for="{{myWishList}}" wx:key="{{index}}" class="wish-item"> 40 <view wx:for="{{myWishList}}" wx:key="{{index}}" class="wish-item">
41 <view class="display"> 41 <view class="display">
42 <image class="prod" mode="aspectFit" src="../../image/prize/prize-{{item.tag}}.png" /> 42 <image class="prod" mode="aspectFit" src="../../image/prize/prize-{{item.tag}}.png" />
...@@ -49,8 +49,17 @@ ...@@ -49,8 +49,17 @@
49 </view> 49 </view>
50 </view> 50 </view>
51 </view> 51 </view>
52 <!-- <view wx:else class="empty"></view> -->
53 <view wx:else class="empty">
54 <view class="icon">
55 <span class="iconfont iconempty"></span>
56 </view>
57 <view class="tips">
58 <text>心愿单空空如也~\n在上方挑选心仪的心愿吧！</text>
59 </view>
60 </view>
52 <!-- 提交心愿单 --> 61 <!-- 提交心愿单 -->
53 <view bindtap="onSubmitHandler" class="btn submit-btn {{myWishList.length <= 0 ? 'disable' : ''}}"> 62 <view wx:if="{{myWishList.length > 0}}" bindtap="onSubmitHandler" class="btn submit-btn {{myWishList.length <= 0 ? 'disable' : ''}}">
54 提交心愿单 63 提交心愿单
55 </view> 64 </view>
56 </view> 65 </view>
......
...@@ -25,6 +25,11 @@ Page({ ...@@ -25,6 +25,11 @@ Page({
25 }, 25 },
26 ], 26 ],
27 isTerms: false, 27 isTerms: false,
28 thumbX: 44,
29 thumbXTarget: 350, // 正确的指数
30 thumbXFixed: 20, // 运行的误差
31 movableViewX: 0, // 滑块的值
32 isPlzAuth: false, //滑块验证
28 // form end 33 // form end
29 auth_time: 0, 34 auth_time: 0,
30 sendAuthCode: true, 35 sendAuthCode: true,
...@@ -32,6 +37,10 @@ Page({ ...@@ -32,6 +37,10 @@ Page({
32 }, 37 },
33 onShareAppMessage() {}, 38 onShareAppMessage() {},
34 onLoad(options) { 39 onLoad(options) {
40 let windowWidth = wx.getSystemInfoSync().windowWidth;
41 this.setData({
42 windowWidth
43 })
35 let { 44 let {
36 redirect 45 redirect
37 } = options; 46 } = options;
...@@ -145,6 +154,9 @@ Page({ ...@@ -145,6 +154,9 @@ Page({
145 } else if (!this.data.verifyCode) { 154 } else if (!this.data.verifyCode) {
146 this.showLog("请输入验证码"); 155 this.showLog("请输入验证码");
147 reject(); 156 reject();
157 } else if (!this.data.isPlzAuth) {
158 this.showLog("请完成拼图验证");
159 reject();
148 } else { 160 } else {
149 resolve(); 161 resolve();
150 } 162 }
...@@ -209,6 +221,36 @@ Page({ ...@@ -209,6 +221,36 @@ Page({
209 }, 1000) 221 }, 1000)
210 }, 222 },
211 223
224 // 监听滑动变量
225 onThumbChangeHandler(e) {
226 let thumbX = e.detail.x * 750 / this.data.windowWidth + 44;
227 this.setData({
228 thumbX: thumbX,
229 })
230 },
231
232 // 滑动停止
233 onTouchEndHandler(e) {
234 let {
235 thumbX,
236 thumbXTarget,
237 thumbXFixed
238 } = this.data;
239 let result = Math.abs(thumbXTarget - thumbX);
240 if (result < thumbXFixed) {
241 this.showLog("验证成功")
242 this.setData({
243 isPlzAuth: true
244 })
245 } else {
246 this.showLog("验证失败")
247 }
248 this.setData({
249 thumbX: 44,
250 movableViewX: 0,
251 })
252 },
253
212 bindMobileInput(e) { 254 bindMobileInput(e) {
213 this.setData({ 255 this.setData({
214 "mobile": e.detail.value 256 "mobile": e.detail.value
......
...@@ -117,6 +117,92 @@ $formWidth:560px; ...@@ -117,6 +117,92 @@ $formWidth:560px;
117 } 117 }
118 } 118 }
119 119
120 // 拼图
121 .puzzle {
122 margin-top: 32px;
123 $borderRadius: 32px;
124 width: $formWidth;
125 border-radius: $borderRadius;
126 border: solid 1px #db9a9d;
127
128 .plz {
129 position: relative;
130 @include border-top-radius($borderRadius);
131 width: $formWidth;
132 height: 183px;
133
134 .ebg {
135 @include border-top-radius($borderRadius);
136 width: $formWidth;
137 height: 183px;
138 }
139
140 .block {
141 position: absolute;
142 width: 83px;
143 height: 83px;
144 top: 41px;
145 z-index: 11;
146 }
147
148 .shadow {
149 left: 348px;
150 }
151
152 .thumb {
153
154 left: 44px;
155 }
156 }
157
158
159
160 .slider {
161 position: relative;
162 width: 560px;
163 height: 70px;
164 border-top: solid 1px #db9a9d;
165 background-color: #ffffff;
166 @include border-bottom-radius($borderRadius);
167
168 &-bar {
169 position: relative;
170 width: 410px;
171 padding: 0 45px;
172 height: 48px;
173 border-radius: 24px;
174 background-color: #fff0ed;
175 margin: 12px auto 0;
176
177 .tips {
178 width: 410px;
179 height: 48px;
180 line-height: 48px;
181 font-size: 24px;
182 color: #b83138;
183
184 }
185 .tips-wait {
186 text-align: right;
187 padding-left: 16px;
188 // @extend .bb;
189 }
190
191 .tips-authorized {
192 text-align: center;
193 }
194
195 &-thumb {
196 width: 109px;
197 height: 80px;
198 position: absolute;
199 top: -12px;
200 }
201 }
202 }
203 }
204
205
120 // 隐私条款 206 // 隐私条款
121 .policy { 207 .policy {
122 margin-left: 40px; 208 margin-left: 40px;
......
...@@ -29,6 +29,25 @@ ...@@ -29,6 +29,25 @@
29 </view> 29 </view>
30 </view> 30 </view>
31 </view> 31 </view>
32 <!-- 滑动拼图 -->
33 <view class="puzzle">
34 <view class="plz">
35 <image class="ebg" src="../../image/oss/register/plz-cont.png" mode="widthFix" />
36 <block wx:if="{{!isPlzAuth}}">
37 <image class="block shadow" mode="widthFix" src="../../image/oss/register/plz-block.png?ver=1" />
38 <image style="left:{{thumbX}}rpx;" class="block thumb" mode="widthFix" src="../../image/oss/register/plz-block-inline.png?ver=1" />
39 </block>
40 </view>
41 <view class="slider">
42 <movable-area class="slider-bar">
43 <view wx:if="{{!isPlzAuth}}" class="tips tips-wait">拖动左侧滑块，完成上方拼图验证</view>
44 <view wx:else class="tips tips-authorized">验证成功</view>
45 <movable-view wx:if="{{!isPlzAuth}}" x="{{movableViewX}}" bindchange="onThumbChangeHandler" direction="horizontal">
46 <image bindtouchend="onTouchEndHandler" class="slider-bar-thumb" mode="widthFix" src="../../image/oss/register/slider-block.png" />
47 </movable-view>
48 </movable-area>
49 </view>
50 </view>
32 <!-- 条款/政策 --> 51 <!-- 条款/政策 -->
33 <!-- <view class="policy"> 52 <!-- <view class="policy">
34 <span bindtap="onTermsHandler" class="check"> 53 <span bindtap="onTermsHandler" class="check">
......
...@@ -61,7 +61,6 @@ ...@@ -61,7 +61,6 @@
61 </view> 61 </view>
62 <!-- 滑动拼图 --> 62 <!-- 滑动拼图 -->
63 <view class="puzzle"> 63 <view class="puzzle">
64 <!-- <view class="plz" bindtouchstart="onTouchStartHandler" bindtouchmove='onTouchMoveHandler' bindtouchend='onTouchEndHandler'> -->
65 <view class="plz"> 64 <view class="plz">
66 <image class="ebg" src="../../image/oss/register/plz-cont.png" mode="widthFix" /> 65 <image class="ebg" src="../../image/oss/register/plz-cont.png" mode="widthFix" />
67 <block wx:if="{{!isPlzAuth}}"> 66 <block wx:if="{{!isPlzAuth}}">
......