添加提现页面以及输入密码相关弹窗

@@ -39,6 +39,7 @@
     "pages/main/rewardpoint/home",
     "pages/main/rewardpoint/home",
     "pages/main/rewardpoint/cashout/cashout",
     "pages/main/rewardpoint/cashout/cashout",
     "pages/main/rewardpoint/exchange/exchange",
     "pages/main/rewardpoint/exchange/exchange",
+    "pages/main/rewardpoint/bindcard/bindcard",
 
 
     "pages/login/login",
     "pages/login/login",
     "pages/main/advancepayment/adPayDetails/adPayDetails",
     "pages/main/advancepayment/adPayDetails/adPayDetails",

+// pages/main/rewardpoint/bindcard/bindcard.js
+Page({
+
+  /**
+   * Page initial data
+   */
+  data: {
+
+  },
+
+  /**
+   * Lifecycle function--Called when page load
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * Lifecycle function--Called when page is initially rendered
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * Lifecycle function--Called when page show
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 下一步
+   */
+  nestStep:function(){
+    
+  },
+
+  /**
+   * Lifecycle function--Called when page hide
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * Lifecycle function--Called when page unload
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * Page event handler function--Called when user drop down
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * Called when page reach bottom
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * Called when user click on the top right corner to share
+   */
+  onShareAppMessage: function () {
+
+  }
+})

+{
+  "navigationBarTitleText": "添加银行卡"
+}

+<!--pages/main/rewardpoint/bindcard/bindcard.wxml-->
+<view>
+
+<view>
+
+</view>
+
+<view class="view_bottom">
+		<button class="btn_blue_radius" style="margin:20rpx" bindtap='nextStep'> 下一步</button>
+		<!-- <button wx:else class="btn_gray_radius" style="margin:20rpx"> 提现</button> -->
+	</view>
+</view>

+/* pages/main/rewardpoint/bindcard/bindcard.wxss */
+.view_bottom {
+  background: #fff;
+  width: 100%;
+  position: fixed;
+  bottom: 0;
+  display: flex;
+  flex-direction: row;
+}
+
+.placeholder_input_wrap{
+  color:#ccc;
+  font-size:30rpx;
+}
+
+.input_wrap{
+  width:356rpx;
+  color:#333;
+  font-size:56rpx;
+}
+
+.btn_blue_radius {
+  background: #357aeb;
+  border-radius: 5px;
+  flex: 1;
+  color: #fff;
+}

@@ -5,6 +5,17 @@ Page({
    * Page initial data
    * Page initial data
    */
    */
   data: {
   data: {
+    showModal:false,
+    hasBind:true,
+    cashNum:6989.88,
+    inputNum:"",
+    pwdList: [1, 2, 3, 4, 5, 6],
+    //输入框聚焦状态
+    isFocus: false,
+    //输入框聚焦样式 是否自动获取焦点
+    focusType: true,
+    valueData: '', //输入的值
+    dataLength: '',
 
 
   },
   },
 
 
@@ -30,6 +41,66 @@ Page({
   },
   },
 
 
   /**
   /**
+   * 绑定银行卡
+   */
+  bindCard:function(){
+    wx.navigateTo({
+      url: '../bindcard/bindcard',
+    })
+  },
+
+  /**
+   * 实时监听输入框内容
+   */
+  getInput:function(e){
+    var money;
+    if (/^(\d?)+(\.\d{0,2})?$/.test(e.detail.value)) { //正则验证，提现金额小数点后不能大于两位数字
+      money = e.detail.value;
+    } else {
+      money = e.detail.value.substring(0, e.detail.value.length - 1);
+    }
+    this.setData({
+      inputNum: money
+    })
+  },
+
+ /**
+  * 清空输入内容
+  */
+  clear:function(){
+    this.setData({
+      inputNum: ""
+    })
+  },
+
+  /**
+   * 全部提现
+   */
+  cashAll:function(){
+    this.setData({
+      inputNum: this.data.cashNum
+    })
+  },
+
+  /**
+   * 提现
+   */
+  cashOut:function(){
+    var inputnum = this.data.inputNum
+    var maxnum = this.data.cashNum
+    if(inputnum&&inputnum>0&&inputnum<=maxnum){
+      this.setData({
+        showModal: !this.data.showModal?true:this.data.showModal,
+      })
+    }else{
+      wx.showToast({
+        title: '请输入正确提现金额',
+        icon:"none"
+      })
+    }
+  },
+
+  /**
    * Lifecycle function--Called when page hide
    * Lifecycle function--Called when page hide
    */
    */
   onHide: function () {
   onHide: function () {
@@ -62,5 +133,47 @@ Page({
    */
    */
   onShareAppMessage: function () {
   onShareAppMessage: function () {
 
 
+  },
+
+  // 获得焦点时
+  handleUseFocus() {
+    this.setData({
+      focusType: true
+    })
+  },
+
+  // 失去焦点时
+  handleUseBlur() {
+    this.setData({
+      focusType: false
+    })
+  },
+
+  // 点击6个框聚焦
+  handleFocus() {
+    this.setData({
+      isFocus: true
+    })
+  },
+
+  // 获取输入框的值
+  handleSetData(e) {
+    // 更新数据
+    this.setData({
+      dataLength: e.detail.value.length,
+      valueData: e.detail.value
+    })
+    // 当输入框的值等于6时（发起支付等...）
+    if (e.detail.value.length === 6) {
+      // 通知用户输入数字达到6位数可以发送接口校验密码是否正确
+      this.triggerEvent('initData', e.detail.value)
+    }
+  },
+
+  closeModal:function(){
+    this.setData({
+      showModal:false
+    })
   }
   }
+
 })
 })

 <view style="background:#f5f5f5;width:100%;height:1600rpx">
 <view style="background:#f5f5f5;width:100%;height:1600rpx">
 
 
-	<view class='card_rectangle_bg_row' style='padding:30rpx;flex-direction:column'>
-		<view style="flex-direction:row;padding-top:14rpx">
+	<view style="height:26rpx"></view>
+	<view class='card_rectangle_bg_row' style='padding:26rpx;flex-direction:column'>
+		<view style="padding-top:10rpx">
 			<text style="font-size:28rpx;color:#333">到账银行卡：</text>
 			<text style="font-size:28rpx;color:#333">到账银行卡：</text>
-			<view style="float:right">
-					<image src="/images/reward_point.png" style="width:64rpx;height:64rpx"></image>
-					<view style="font-size:30rpx;color:#333;line-height:64rpx">招商银行(9214)</view>
-					<image src="/images/arrow_right.png" style="width:64rpx;height:64rpx"></image>
+			<view wx:if="{{hasBind}}" style="display:flex;float:right">
+				<image src="/images/reward_point.png" style="width:64rpx;height:64rpx;margin:0 14rpx"></image>
+				<view style="font-size:30rpx;color:#333;line-height:64rpx">招商银行(9214)</view>
+				<image hidden="{{true}}" src="/images/arrow_right.png" style="width:64rpx;height:64rpx"></image>
+			</view>
+			<view wx:else style="display:flex;float:right" bindtap="bindCard">
+				<view style="font-size:30rpx;color: #FA4B4B;line-height:64rpx;margin-bottom:30rpx">未绑定银行卡</view>
+				<image src="/images/arrow_right.png" style="width:64rpx;height:64rpx"></image>
 			</view>
 			</view>
 		</view>
 		</view>
-    <view style="width:100%;float:right;margin-right:60rpx;font-size:28rpx;color:#333">2小时内到账</view>
+		<text wx:if="{{hasBind}}" style="text-align: right;margin-right:64rpx;font-size:28rpx;color:#999">2小时内到账</text>
+		<view style='background:#eee;height:1rpx;margin-top:14rpx'></view>
 		<view style="font-size:28rpx;color:#999;line-height:96rpx">提现金额</view>
 		<view style="font-size:28rpx;color:#999;line-height:96rpx">提现金额</view>
-		<view></view>
+		<view style="height：112rpx;display:flex;align-items: center;">
+			<text style="font-size:48rpx;color:#333;margin-right:6rpx">￥</text>
+			<input placeholder-class="placeholder_input_wrap" class="input_wrap" type="digit" maxlength="14" placeholder="当前余额{{cashNum}}元" value="{{inputNum}}" bindinput="getInput" />
+			<image wx:if="{{inputNum&&inputNum>0}}" src="/images/clear.png" style="width:32rpx;height:32rpx;padding:36rpx" bindtap="clear"></image>
+			<text style="height:100%;font-size:30rpx;color: #357AEB;line-height:112rpx;margin: auto;" bindtap="cashAll">全部提现</text>
+		</view>
+
+		<view wx:if="{{inputNum&&inputNum>cashNum}}">
+			<view style='background:#eee;height:2rpx;margin:16rpx 0 26rpx 0'></view>
+			<view style="font-size:30rpx;color: #FA4B4B;line-height: 42rpx;">超过可提现金额</view>
+		</view>
+
+
 	</view>
 	</view>
 	<view class="view_bottom">
 	<view class="view_bottom">
-		<button wx:if="{true}" class="btn_white_radius" style="margin:20rpx" bindtap='cashout'> 提现</button>
-		<button wx:else class="btn_blue_radius" style="margin:20rpx" bindtap='goexchange'> 提现</button>
+		<button wx:if="{{hasBind}}" class="btn_blue_radius" style="margin:20rpx" bindtap='cashOut'> 提现</button>
+		<button wx:else class="btn_gray_radius" style="margin:20rpx"> 提现</button>
+	</view>
+
+	<!-- 密码支付弹窗 -->
+	<view wx:if="{{showModal}}" class="mask"></view>
+	<view wx:if="{{showModal}}" class="modal_lg" style="padding:30rpx">
+		<view style="width:100%;display:flex">
+			<text style="font-size:36rpx;color:#333;width: 100%;text-align: center;">请输入支付密码</text>
+			<text style="font-size:36rpx;color:#333;float:right;width" bindtap='closeModal'>ｘ</text>
+		</view>
+		<view style="font-size:28rpx;color:#999;margin-top:40rpx">提现</view>
+		<view style="font-size:54rpx;color:#333;margin-top:10rpx">300.00</view>
+		<view style="margin-top:30rpx;width: 100%;">
+			<text style="font-size:28rpx;color:#333;float:left">服务费</text>
+			<text style="font-size:28rpx;color:#333;float:right">￥75.00</text>
+		</view>
+		<view style="margin-top:12rpx;width: 100%;">
+			<text style="font-size:28rpx;color:#333;float:left">费率</text>
+			<text style="font-size:28rpx;color: #FA4B4B;float:right">25%</text>
+		</view>
+
+		<view style="margin:26rpx 0;display:flex">
+			<!-- <view wx:for="{{pwdList}}" wx:key="" wx:for-index="idx">
+
+				<input wx:if="{{idx==0}}" class="pwd_wrap_bg" length="1" type="number"></input>
+				<input wx:else class="pwd_wrap_bg b-l-n" length="1" type="number"></input>
+			</view>
+		</view> -->
+
+
+
+			<!-- 模拟输入框 -->
+			<view class='pay-box {{focusType ? "focus-border" : ""}}' bindtap="handleFocus">
+				<block wx:for="{{pwdList}}" wx:key=""  wx:for-index="idx">
+					<view class=' password-box' style='{{idx == 0 ? "":"border-left:none"}}'>
+						<view wx:if="{{(dataLength === item - 1)&& focusType}}" class="cursor"></view>
+						<view wx:if="{{dataLength >= item}}" class="input-black-dot"></view>
+					</view>
+				</block>
+			</view>
+			<!-- 隐藏input框 -->
+			<input focus="{{isFocus}}" maxlength="6" type="number" style="position:fixed;color:#fff;font-size:8rpx;height: 96rpx;padding-left: 2rpx;" bindinput="handleSetData" bindfocus="handleUseFocus" bindblur="handleUseFocus" />
+		</view>
 	</view>
 	</view>
 </view>
 </view>

@@ -8,6 +8,17 @@
   flex-direction: row;
   flex-direction: row;
 }
 }
 
 
+.placeholder_input_wrap{
+  color:#ccc;
+  font-size:30rpx;
+}
+
+.input_wrap{
+  width:356rpx;
+  color:#333;
+  font-size:56rpx;
+}
+
 .btn_blue_radius {
 .btn_blue_radius {
   background: #357aeb;
   background: #357aeb;
   border-radius: 5px;
   border-radius: 5px;
@@ -15,11 +26,107 @@
   color: #fff;
   color: #fff;
 }
 }
 
 
-.btn_white_radius {
+.btn_gray_radius {
   flex: 1;
   flex: 1;
   height: 42px;
   height: 42px;
-  background: #FFFFFF;
+  background: #D0D0D0;
   border-radius: 5px;
   border-radius: 5px;
-  border: 1px solid #EEEEEE;
-  color: #666666;
-}
+  color: #999;
+}
+
+/* 遮罩层 */
+
+.mask {
+  width: 100%;
+  height: 100%;
+  position: fixed;
+  top: 0;
+  left: 0;
+  background: #000;
+  opacity: 0.7;
+  z-index: 10;
+}
+
+.modal_lg {
+  width: 80%;
+  position: fixed;
+  left: 0;
+  right: 0;
+  margin: 0 auto;
+  background-color: #fff;
+  border-radius: 16rpx;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  top: 180rpx;
+  z-index: 10;
+}
+
+
+.pwd_wrap_bg{
+  width: 96rpx;
+  height: 96rpx;
+  background: #FFFFFF;
+  border: 1px solid #E5E5E5;
+  text-align: center;
+  font-size: 50rpx;
+
+}
+
+.b-l-n {
+  border-left: none;
+}
+
+.pay-box {
+  margin: 0 auto;
+  display: flex;
+  flex-direction: row;
+  background: #FFFFFF;
+  width: 582rpx;
+  height: 96rpx;
+}
+
+/* 支付密码框聚焦的时候 */
+
+.focus-border {
+  border-color: #E5E5E5;
+}
+
+/* 单个格式样式（聚焦的时候） */
+.password-box {
+  flex: 1;
+  border: 1px solid #E5E5E5;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 模拟光标 */
+
+.cursor {
+  width: 2rpx;
+  height: 36rpx;
+  background-color: #333;
+  animation: focus 1.2s infinite;
+}
+
+/* 光标动画 */
+
+@keyframes focus {
+  from {
+    opacity: 1;
+  }
+
+  to {
+    opacity: 0;
+  }
+}
+
+/* 模拟输入的password的黑点 */
+
+.input-black-dot {
+  width: 24rpx;
+  height: 24rpx;
+  background-color: #000;
+  border-radius: 50%;
+}

@@ -5,7 +5,7 @@ Page({
    * Page initial data
    * Page initial data
    */
    */
   data: {
   data: {
-
+    cashList:["",""],
   },
   },
 
 
   /**
   /**

@@ -11,7 +11,7 @@
  <view class="text_gray_32">积分明细</view> 
  <view class="text_gray_32">积分明细</view> 
 </view>
 </view>
 
 
-<view wx:if="{true}" wx:for="{'',''}" style="background:#fff;width:100%;height:140rpx">
+<view wx:if="{true}" wx:for="{{cashList}}" style="background:#fff;width:100%;height:140rpx">
     <view style='background:#f5f5f5;height:2rpx;'></view>
     <view style='background:#f5f5f5;height:2rpx;'></view>
     <view style="margin:26rpx 40rpx">
     <view style="margin:26rpx 40rpx">
       <view style="float:left;display:flex;flex-direction:column;">
       <view style="float:left;display:flex;flex-direction:column;">