小程序-自定义底部弹窗

2022-02-17 09:11:14 阅读:1 编辑
<!--底部弹窗start-->
 <view class="drawer-screen" bindtap="closeModal" data-statu="close" wx:if="{{showModalStatus}}"></view>
    <view w-extract class="drawer-box" wx:if="{{showModalStatus}}">
        <view class="drawer-box-body">
            <text class="drawer-box-header">设置支付密码</text>
            <view class="drawer-box-content">
                <view class="drawer-box-item">
                    <text class="drawer-box-item-left">新支付密码:</text>
                    <view class="drawer-box-item-right">
                        <input type="password" class="add_num_input" value="{{password}}" bindinput="getPassword"></input>
                    </view>
                </view>
                <view class="drawer-box-item">
                    <text class="drawer-box-item-left">新确认支付密码:</text>
                    <view class="drawer-box-item-right">
                        <input type="password" class="add_num_input" value="{{confirm_password}}" bindinput="getConfirmPassword"></input>
                    </view>
                </view>
            </view>
            <view class="drawer-box-footer">
                <view class="drawer-box-footer-cancel" catchtap="cancleSelect">
                    <text>取消</text>
                </view>
                <view class="drawer-box-footer-ok" catchtap="okSelect">
                    <text>确认</text>
                </view>
            </view>
        </view>
    </view>
<!--底部弹窗end-->

.drawer-screen {
    width: 100%;
    height: 100%;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 12;
    background: #000;
    opacity: 0.5;
    overflow: hidden;
  }

  .drawer-box {
    width: 750rpx;
    position: fixed;
    bottom: 0rpx;
    left: 0;
    z-index: 1300;
    background: #fff;
    animation: showModel 0.3s ease-in-out;
  }

  .drawer-box-body {
    width: 750rpx;
    flex-direction: column;
    display: flex;
    align-items: flex-start;
    border-top-left-radius: 30rpx;
    border-top-right-radius: 30rpx;
    background-color: #ffffff;
    padding: 0 0 14rpx 0;
  }

  .drawer-box-header {

    color: #363636;
    font-size: 36rpx;
    text-overflow: ellipsis;
    margin: 62rpx 0 0 56rpx;
  }

  .drawer-box-content {
    display: flex;
    align-items: flex-start;
    align-self: center;
    white-space: normal;
    margin: 28rpx 0 0 0;
    flex-direction: column;
  }
  .drawer-box-item{
    display: flex;
    padding: 20rpx 0;
  }
  .drawer-box-item-left {
    line-height: 28rpx;
    color: #363636;
    font-size: 28rpx;
    margin: 22rpx 26rpx 0 0;
  }
  .drawer-box-item-right {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-radius: 10rpx;
    background-color: #f5f5f5;
    padding: 6rpx 28rpx 6rpx 32rpx;
  }

  .drawer-box-footer {
    display: flex;
    align-items: center;
    align-self: center;
    margin: 112rpx 0 0 0;
  }

  .drawer-box-footer-cancel {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-radius: 40rpx;
    background-color: #00000f;
    padding: 28rpx 126rpx 28rpx 124rpx;
    margin: 2rpx 18rpx 0 0;
    color: #fec015;
    font-size: 28rpx;
  }

  .drawer-box-footer-ok {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    border-radius: 40rpx;
    background-color: var(--maincolor,#fec015);
    padding: 28rpx 126rpx 28rpx 124rpx;
    margin: 2rpx 18rpx 0 0;
    color: var(--mainfontcolor,#fec015);
    font-size: 28rpx;
  }
  closeModal() {
    this.setData({
      showModalStatus: false
    })
  },
 cancleSelect() {
    this.setData({
      showModalStatus: false
    });
  },
  okSelect() {
    if(this.data.passowrd != this.data.confirm_password){
        app.tips("两次密码不一致");
        return;
    }
    this.data.lim.setPayPassword({
        pay_password:this.data.passowrd
    }).then((res)=>{
        this.setData({
            showModalStatus: false
          });
        app.tips("支付密码设置成功");

    });
  },
  toSettingPassword(){
    this.setData({
        passowrd: '',
        showModalStatus: true,
      });
  },
  getPassword(e){
    this.setData({
        passowrd:e.detail.value,
    });
  },
  getConfirmPassword(e){
    this.setData({
        confirm_password:e.detail.value,
    });
  }
 data:{
    showModalStatus:false,
    passowrd:'',
    confirm_password:'',
 }