1.登录页添加拼图验证

2.创建心愿单页面优化
    1)随机出现一个心愿的描述 (原全部隐藏)
    2)未添加心愿单时，加empty提示

@@ -31,6 +31,7 @@
   },
   "usingComponents": {
     "authorize-comp": "../../component/authorize-comp/authorize-comp",
+    "empty-tips": "../../component/empty-tips/empty-tips",
     "van-popup": "../../ui/vant-weapp/popup/index"
   }
 }

@@ -42,6 +42,7 @@ Page({
     this.initData();
   },
   initData() {
+
     // 还原缓存心愿单
     let myWishList = app.store.getItem("wish") || [];
     this.setData({
@@ -52,10 +53,21 @@ Page({
       this.setData({
         userInfo: app.globalData.userInfo
       })
-      this.queryWishbillPrizeCandidate();
+      this.queryWishbillPrizeCandidate().then((result) => {
+        this.initBorder();
+      })
     });
     this.initShake();
   },
+  initBorder() {
+    // 第一幕
+    let productList1 = [
+      "P000000000000000000000000000001", "P000000000000000000000000000002", "P000000000000000000000000000003"
+    ]
+    let targetProductList = productList1;
+    let randomIndex = targetProductList[Math.floor(Math.random() * targetProductList.length)];
+    this.doShowTipsBorder(randomIndex);
+  },
   // 添加摇一摇
   initShake() {
     let _this = this;
@@ -207,13 +219,13 @@ Page({
    */
   onShowTipsBorderHandler(evt) {
     let curIndex = getBindtapData(evt, "index");
+    this.doShowTipsBorder(curIndex);
+  },
+  doShowTipsBorder(curIndex) {
     console.log("curIndex:", curIndex);
     let curData = productMap[curIndex + ""];
-    // let product = this.getProductByCode(curIndex);
     let product = getObjByListKeyValue(curIndex, 'prizeDefineCode', this.data.candidate);
     curData = Object.assign(curData, product)
-    console.log("product:", product);
-    console.log("curData:", curData);
     this.setData({
       curWish: curData,
       tipsBorderVisible: true,

@@ -216,6 +216,31 @@
           }
         }
 
+        .empty {
+          position: relative;
+          text-align: center;
+          min-height: 238px;
+          padding-top: 24px;
+          @extend .bb;
+
+          // color: #c7565d;
+          color: #c77378;
+          font-size: 28px;
+
+          .iconfont {
+            // color: #c7565d;
+            font-size: 120px;
+          }
+
+          .icon{}
+
+          .tips {
+
+            margin-top: 16px;
+            line-height: 40px;
+          }
+        }
+
         // 提交心愿按钮
         .submit-btn {
           margin: 48px auto 0;

@@ -36,7 +36,7 @@
         <image class="ebg" mode="widthFix" src="../../image/oss/create-wish/cw-border.png" />
         <view class="space1"></view>
         <!-- 心愿容器 -->
-        <view class="wish">
+        <view wx:if="{{myWishList.length > 0}}" class="wish">
           <view wx:for="{{myWishList}}" wx:key="{{index}}" class="wish-item">
             <view class="display">
               <image class="prod" mode="aspectFit" src="../../image/prize/prize-{{item.tag}}.png" />
@@ -49,8 +49,17 @@
             </view>
           </view>
         </view>
+        <!-- <view wx:else class="empty"></view> -->
+        <view wx:else class="empty">
+          <view class="icon">
+            <span class="iconfont iconempty"></span>
+          </view>
+          <view class="tips">
+            <text>心愿单空空如也~\n在上方挑选心仪的心愿吧！</text>
+          </view>
+        </view>
         <!-- 提交心愿单 -->
-        <view bindtap="onSubmitHandler" class="btn submit-btn {{myWishList.length <= 0 ? 'disable' : ''}}">
+        <view wx:if="{{myWishList.length > 0}}" bindtap="onSubmitHandler" class="btn submit-btn {{myWishList.length <= 0 ? 'disable' : ''}}">
           提交心愿单
         </view>
       </view>

@@ -25,6 +25,11 @@ Page({
       },
     ],
     isTerms: false,
+    thumbX: 44,
+    thumbXTarget: 350, // 正确的指数
+    thumbXFixed: 20, // 运行的误差
+    movableViewX: 0, // 滑块的值
+    isPlzAuth: false, //滑块验证
     // form end
     auth_time: 0,
     sendAuthCode: true,
@@ -32,6 +37,10 @@ Page({
   },
   onShareAppMessage() {},
   onLoad(options) {
+    let windowWidth = wx.getSystemInfoSync().windowWidth;
+    this.setData({
+      windowWidth
+    })
     let {
       redirect
     } = options;
@@ -145,6 +154,9 @@ Page({
       } else if (!this.data.verifyCode) {
         this.showLog("请输入验证码");
         reject();
+      } else if (!this.data.isPlzAuth) {
+        this.showLog("请完成拼图验证");
+        reject();
       } else {
         resolve();
       }
@@ -209,6 +221,36 @@ Page({
     }, 1000)
   },
 
+  // 监听滑动变量
+  onThumbChangeHandler(e) {
+    let thumbX = e.detail.x * 750 / this.data.windowWidth + 44;
+    this.setData({
+      thumbX: thumbX,
+    })
+  },
+
+  // 滑动停止
+  onTouchEndHandler(e) {
+    let {
+      thumbX,
+      thumbXTarget,
+      thumbXFixed
+    } = this.data;
+    let result = Math.abs(thumbXTarget - thumbX);
+    if (result < thumbXFixed) {
+      this.showLog("验证成功")
+      this.setData({
+        isPlzAuth: true
+      })
+    } else {
+      this.showLog("验证失败")
+    }
+    this.setData({
+      thumbX: 44,
+      movableViewX: 0,
+    })
+  },
+
   bindMobileInput(e) {
     this.setData({
       "mobile": e.detail.value

@@ -117,6 +117,92 @@ $formWidth:560px;
         }
       }
 
+       // 拼图
+       .puzzle {
+        margin-top: 32px;
+        $borderRadius: 32px;
+        width: $formWidth;
+        border-radius: $borderRadius;
+        border: solid 1px #db9a9d;
+
+        .plz {
+          position: relative;
+          @include border-top-radius($borderRadius);
+          width: $formWidth;
+          height: 183px;
+
+          .ebg {
+            @include border-top-radius($borderRadius);
+            width: $formWidth;
+            height: 183px;
+          }
+
+          .block {
+            position: absolute;
+            width: 83px;
+            height: 83px;
+            top: 41px;
+            z-index: 11;
+          }
+
+          .shadow {
+            left: 348px;
+          }
+
+          .thumb {
+
+            left: 44px;
+          }
+        }
+
+
+
+        .slider {
+          position: relative;
+          width: 560px;
+          height: 70px;
+          border-top: solid 1px #db9a9d;
+          background-color: #ffffff;
+          @include border-bottom-radius($borderRadius);
+
+          &-bar {
+            position: relative;
+            width: 410px;
+            padding: 0 45px;
+            height: 48px;
+            border-radius: 24px;
+            background-color: #fff0ed;
+            margin: 12px auto 0;
+
+            .tips {
+              width: 410px;
+              height: 48px;
+              line-height: 48px;
+              font-size: 24px;
+              color: #b83138;
+
+            }
+            .tips-wait {
+              text-align: right;
+              padding-left: 16px;
+              // @extend .bb;
+            }
+
+            .tips-authorized {
+              text-align: center;
+            }
+
+            &-thumb {
+              width: 109px;
+              height: 80px;
+              position: absolute;
+              top: -12px;
+            }
+          }
+        }
+      }
+
+
       // 隐私条款
       .policy {
         margin-left: 40px;

@@ -29,6 +29,25 @@
             </view>
           </view>
         </view>
+        <!-- 滑动拼图 -->
+        <view class="puzzle">
+          <view class="plz">
+            <image class="ebg" src="../../image/oss/register/plz-cont.png" mode="widthFix" />
+            <block wx:if="{{!isPlzAuth}}">
+              <image class="block shadow" mode="widthFix" src="../../image/oss/register/plz-block.png?ver=1" />
+              <image style="left:{{thumbX}}rpx;" class="block thumb" mode="widthFix" src="../../image/oss/register/plz-block-inline.png?ver=1" />
+            </block>
+          </view>
+          <view class="slider">
+            <movable-area class="slider-bar">
+              <view wx:if="{{!isPlzAuth}}" class="tips tips-wait">拖动左侧滑块，完成上方拼图验证</view>
+              <view wx:else class="tips tips-authorized">验证成功</view>
+              <movable-view wx:if="{{!isPlzAuth}}" x="{{movableViewX}}" bindchange="onThumbChangeHandler" direction="horizontal">
+                <image bindtouchend="onTouchEndHandler" class="slider-bar-thumb" mode="widthFix" src="../../image/oss/register/slider-block.png" />
+              </movable-view>
+            </movable-area>
+          </view>
+        </view>
         <!-- 条款/政策 -->
         <!-- <view class="policy">
           <span bindtap="onTermsHandler" class="check">

@@ -61,7 +61,6 @@
         </view>
         <!-- 滑动拼图 -->
         <view class="puzzle">
-          <!-- <view class="plz" bindtouchstart="onTouchStartHandler" bindtouchmove='onTouchMoveHandler' bindtouchend='onTouchEndHandler'> -->
           <view class="plz">
             <image class="ebg" src="../../image/oss/register/plz-cont.png" mode="widthFix" />
             <block wx:if="{{!isPlzAuth}}">