<view class="popup-memu"> <view class="line" style="background-color: rgb(255, 255, 255)"></view> <view class="payMode" bindtap="pay" data-pay_type='weipay'>  <image src="/images/wechat.png"></image>  <text style="width:70%">微信</text>  <image src="/images/arrows-right.png"></image> </view> <view class="payMode" bindtap="pay" data-pay_type='1'>  <image src="/images/vip.png"></image>  <text style="width:70%">會員卡</text>  <image src="/images/arrows-right.png"></image> </view> <view class="payMode" bindtap="pay" data-pay_type='2'>  <image src="/images/payPacket.png"></image>  <text style="width:70%">零錢</text>  <image src="/images/arrows-right.png"></image> </view></view> <!-- 密碼框帶鍵盤 --><action-sheet hidden="{{passwordInputHidden}}" bindchange="passwordInputHidden"> <view class='password-input'>  <view>   <text style="display:{{inputPassword[0]?'':'none'}}"></text>  </view>  <view>   <text style="display:{{inputPassword[1]?'':'none'}}"></text>  </view>  <view>   <text style="display:{{inputPassword[2]?'':'none'}}"></text>  </view>  <view>   <text style="display:{{inputPassword[3]?'':'none'}}"></text>  </view>  <view>   <text style="display:{{inputPassword[4]?'':'none'}}"></text>  </view>  <view>   <text style="display:{{inputPassword[5]?'':'none'}}"></text>  </view> </view> <view class='tips'>請輸入支付密碼(  <text>-￥100</text>)</view> <view class='keyboard'>  <view class='left number'>   <view data-key="1" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>1</view>   <view data-key="2" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>2</view>   <view data-key="3" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>3</view>   <view data-key="4" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>4</view>   <view data-key="5" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>5</view>   <view data-key="6" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>6</view>   <view data-key="7" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>7</view>   <view data-key="8" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>8</view>   <view data-key="9" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>9</view>   <view data-key="X" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>X</view>   <view data-key="0" hover-class='active' hover-stay-time='100' bindtap='inputPassword'>0</view>   <view data-key="." hover-class='active' hover-stay-time='100' bindtap='inputPassword'>.</view>  </view>  <view class='right ctr-btn'>   <view class='ctr-btn-item' hover-class='active' hover-stay-time='100' bindtap='clear'>    <label class='iconfont icon-shanchu'></label>   </view>   <view class='ctr-btn-item' hover-class='active' hover-stay-time='100' bindtap='passwordInputHidden'>取消</view>  </view> </view></action-sheet>

.popup-memu { width: 100%; background-color: white; border-top: 1px solid #dedbd5; border-bottom: 1px solid #eee; display: block;} .line { background-color: #eee; margin-left: 10px; height: 1px; margin-right: 10px;} .popup-memu { height: 50px; font-size: 15px; line-height: 50px; border-bottom: 1px solid #eee;} .payMode { display: flex; background: #fff; align-items: center; border-bottom: 2px solid #eee;} .payMode image { width: 30px; height: 30px; margin-left: 18px; margin-right: 10px;} .sheet-content { background-color: #fff; padding: 0 15rpx;}/* 鍵盤 */.password-input { display: flex; width: 660rpx; border: 1px solid #ddd; margin: 0 auto; margin-top: 50rpx; background-color: #fff; border-radius: 3px;} .password-input view { width: 110rpx; height: 80rpx; display: flex; align-items: center; justify-content: center; box-sizing: border-box; border-right: 1px solid #ccc;} .password-input view:nth-child(6) { border-right: none;} .password-input view text { width: 6px; height: 6px; border-radius: 50%; background-color: #333;} .tips { font-size: 28rpx; text-align: center; margin-top: 5px;} .tips text { color: #c30;} .keyboard { width: 100%; display: flex; background-color: #fff; border-top: 1px solid #eee; margin-top: 50rpx;} .keyboard .number { display: flex; width: 570rpx; flex-wrap: wrap;} .keyboard .number view { width: 190rpx; height: 120rpx; line-height: 120rpx; text-align: center; font-size: 46rpx; font-weight: bold; box-sizing: border-box; border-right: 1px solid #eee; border-bottom: 1px solid #eee;} .keyboard .ctr-btn { width: 180rpx;} .keyboard .ctr-btn view { height: 240rpx; line-height: 240rpx; text-align: center; box-sizing: border-box; border-bottom: 1px solid #eee;} .keyboard .ctr-btn view .iconfont { font-size: 44rpx !important; color: #c30;} .keyboard .ctr-btn view:nth-child(2) { font-size: 46rpx; color: #c30;} .keyboard .active { background-color: #e4e7ed;} .activity { background-color: #fff; padding: 25rpx 20rpx; display: flex; align-items: center; justify-content: space-between; font-size: 24rpx; border-bottom: 1px solid #f6f6f6;} .activity.activity-item { font-size: 26rpx;} .arrows-right { width: 30rpx; height: 30rpx;} .arrows-right.active { transform: rotate(270deg);}/* 鍵盤結(jié)束 */

Page({  /**  * 頁面的初始數(shù)據(jù)  */ data: {  inputPassword: '', //輸入的密碼  passwordInputHidden: true,//hidden是true 默認(rèn)隱藏  pay_type: '',//支付方式  password: 123456,//設(shè)置的密碼 這里寫死 實際開發(fā)中后臺專門設(shè)置一個表存儲用戶設(shè)置的密碼 },  /**  * 生命周期函數(shù)--監(jiān)聽頁面加載  */ onLoad: function (options) {  },  pay(e) {  //你選擇的支付方式  var pay_type = e.currentTarget.dataset.pay_type;  var _this = this;  if (pay_type == 'weipay') {    //此處寫入微信支付需要執(zhí)行的代碼不做過多介紹  } else {    //內(nèi)部支付 打開鍵盤   _this.passwordInputHidden();  } },   inputPassword(e) {  //鍵盤輸入的密碼 賦值給inputPassword  this.data.inputPassword = this.data.inputPassword + e.currentTarget.dataset.key;  this.setData({   inputPassword: this.data.inputPassword  });  //當(dāng)輸入密碼正確時   if (this.data.inputPassword.length == 6 && this.data.password == this.data.inputPassword) {     this.passwordInputHidden();//關(guān)閉小鍵盤  }   //當(dāng)輸入密碼錯誤時 給個提示 并且把輸入的密碼清零  if (this.data.inputPassword.length == 6 && this.data.password != this.data.inputPassword) {   wx.showModal({    title: "提示",    content: "輸入密碼錯誤",   })   this.setData({    inputPassword: ''   });  } }, passwordInputHidden() {  this.setData({   passwordInputHidden: !this.data.passwordInputHidden //取反 打開關(guān)閉小鍵盤  });  this.setData({   inputPassword: ''  }); }, //刪除輸入錯誤的密碼 clear() {  var index = this.data.inputPassword.length;  if (index > 0) {   var inputPassword = this.data.inputPassword.substr(0, index - 1);   this.setData({    inputPassword: inputPassword   });  } }, })