微信小程序自定义弹出框组件，模拟wx.showModal_wx.showmodal源码

微信小程序开发交流qq群   173683895

效果图：

代码

wxml

<view wx:if='{{showModal}}'>
  <view class='mask_layer' bindtap='modal_click_Hidden' />
  <view class='modal_box'>
    <view class="title">取消订单</view>
    <view class='content'>
      <text class='modalMsg'></text>
      <textarea class='input_show1' bindinput='changeCancelReason' auto-height value='{{modalMsg}}' bindfocus='bindfocus' bindblur='bindblur' placeholder='{{modalMsg_placeholder}}'></textarea>
    </view>
    <view class='btn1'>
      <view bindtap='modal_click_Hidden' class='cancel'>取消</view>
      <view bindtap='Sure' class='Sure'>确定</view>
    </view>
  </view>
</view>

css

.mask_layer {
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 999;
left:0;top:0;
  background: #000;
  opacity: 0.5;
  overflow: hidden;
}
.modal_box {
  width: 76%;
  overflow: hidden;
  position: fixed;
  top: 50%;
  left: 0;
  z-index: 1001;
  background: #fafafa;
  margin: -150px 12% 0 12%;
  border-radius: 3px;
}
 
.title {
  padding: 15px;
  text-align: center;
  background-color: gazure;
}
 
.content {
  overflow-y: scroll; /*超出父盒子高度可滚动*/
}
 
 .input_show1{
   margin: 0 auto;
   width: 80%;
   margin-left: 10%;
   font-size: 32rpx;
   text-align: center;
 }
.btn1 {
  width: 100%;
  margin-top: 65rpx;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  box-sizing: border-box;
  background-color: white;
}
 
.cancel {
  width: 100%;
  padding: 10px;
  text-align: center;
  color: black;
}
 
.Sure {
  width: 100%;
  padding: 10px;
  color: #44b549;
  background-color: white;
  border-left: 1px solid #d0d0d0;
  text-align: center;
}
 
.modalMsg {
  text-align: center;
  margin-top: 45rpx;
  display: block;
}

js

 
  showCancelOrder: function() {
    this.setData({
      showModal:true
    })
  },
  modal_click_Hidden: function () {
    this.setData({
      showModal: false,
    })
  },
  // 确定
  Sure: function () {
    console.log(this.data.text)
    if (this.data.cancelReason==''){
      wx.showToast({
        title: '请填写订单取消原因',
        icon:'none'
      })
      return
    }else{
      // 提交到后端
      this.cancelOrder();
    }
  },
  changeCancelReason: function(e) {
    this.setData({
      cancelReason: e.detail.value
    })
  },
  cancelOrder: function() {
    var token = wx.getStorageSync('token');
    var that = this;
    util.POST({
      params: {
        'token': token,
        'id': this.data.order.id,
        'cancel_reason': this.data.cancelReason
      },
      API_URL: 'Doctor/cancelOrder',
      success: (res) => {
        res = res.data;
        if (res.code == 200) {
          wx.showToast({
            title: res.msg,
            icon: 'success',
            duration: 2000
          })
          setTimeout(function() {
            that.getOrderDetails();
          }, 2000)
        } else {
          wx.showToast({
            title: res.msg,
            icon: 'none',
            duration: 2000
          })
        }
        that.setData({
          showModal: false
        })
      },
      fail: function() {
 
      }
    })
  },