技術標籤：小程式小程式

場景

使用者進入介面彈出輸入視窗，需要使用者輸入內容，如果取消則跳轉到指定介面，重新進入還會彈出視窗，只有輸入正確內容才能正式進入此介面

實現

wxml

<view class="container">
  <view wx:if="{{!completed}}">
    <view class='toast-box'>
      <view class='toastbg'></view>
      <view class='showToast'>
 

        <view class='toast-title'>
          <text>確認底金?</text>
        </view>
        <view class='toast-main'>
          <view class='toast-input'>
            <input type='number' placeholder='請輸入符合您的保底金額~' focus="true" bindinput='getUserInput'>
 
</input>
          </view>
        </view>
        <view class='toast-button'>
          <view class='cancel'>
            <button bindtap="cancelSelected">取消</button>
          </view>
          <view class='success'>
            <button
 
 bindtap="successSelected">確定</button>
          </view>
        </view>
      </view>
    </view>
  </view>
</view>

wxss

.container {
  width: 100%;
  min-height: 100vh;
  background-color: #101419;
}

.toast-box {
  width: 100%;
  height: 100%;
  opacity: 1;
  position: fixed;
  top: 0px;
  left: 0px;
}


.toastbg {
  opacity: 0.2;
  background-color: black;
  position: absolute;
  width: 100%;
  min-height: 100vh;
}

.showToast {
  position: absolute;
  opacity: 1;
  width: 70%;
  margin-left: 15%;
  margin-top: 40%;
}

.toast-title {
  padding-left: 5%;
  background-color: #2196f3;
  color: white;
  padding-top: 2vh;
  padding-bottom: 2vh;
  border-top-right-radius: 16rpx;
  border-top-left-radius: 16rpx;
}

.toast-main {
  padding-top: 2vh;
  padding-bottom: 2vh;
  background-color: white;
  text-align: center;
}

.toast-input {
  margin-left: 5%;
  margin-right: 5%;
  border: 1px solid #ddd;
  padding-left: 2vh;
  padding-right: 2vh;
  padding-top: 1vh;
  padding-bottom: 1vh;
}

.toast-button {
  display: flex;
}

.cancel, .success {
  width: 50%;
}

.cancel button {
  color: #999;
  width: 100%;
  background-color: white;
  border-radius: 0px;
  border-bottom-left-radius: 16rpx;
}

.success button {
  color: #1d2228;
  width: 100%;
  background-color: white;
  border-radius: 0px;
  border-bottom-right-radius: 16rpx;
}

js

Page({

  /**
   * 頁面的初始資料
   */
  data: {
    completed: false,  // 彈窗控制
    deposit: 0  // 儲存使用者輸入的內容
  },

  // 獲取使用者輸入的內容
  getUserInput(event) {
    const money = event.detail.value || event.detail.text
    this.setData({deposit: money})
  },

  // 取消按鈕觸發事件
  cancelSelected(event) {
    wx.switchTab({
      url: '/pages/optional/optional',
    })
  },

  // 確定按鈕觸發事件
  successSelected(event) {
    if (!(/(^[0-9]*$)/.test(this.data.deposit))) {
      wx.showToast({
        title: '只能輸入純數字',
        icon: 'none',
        duration: 2000
      })
    } else {
      this.setData({completed: true})
    }
  },

})

效果圖