微信小程序开发交流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() {}})},
