微信小程序自定义弹框

我会带着你远行 2022-12-09 01:52 246阅读 0赞

wxml

<view class="cancelBtn" bindtap="cancelOrder" data-id="{
       {item.id}}" data-type="{
       {type}}">取消订单</view>
    
    
    
    
    
    <view class="modalDlg-mask" wx:if="{
       {showModal}}"></view>
    <view class="modalDlg" wx:if="{
       {showModal}}">
    	<view class="page-body">
    		<form bindsubmit="submit">
    			<view class="modalDlg-title">
    				<text>取消订单原因</text>
    			</view>
    			<view class="modalDlg-content">
    				<view class="modalDlg-content-item">
    					<radio-group bindchange="radioChange">
    						<label class="weui-cell weui-check__label" wx:for="{
       {items}}" wx:key="index">
    							<view class="weui-cell__hd">
    								<radio value="{
       {item.value}}" color="#ff5155" />
    							</view>
    							<view wx:if="{
       {item.value!=='3'}}" class="weui-cell__bd">{
       {item.name}}</view>
    							<text wx:if="{
       {item.value==='3'}}" style="width:150rpx;">{
       {item.name}}</text>
    							<textarea wx:if="{
       {item.value==='3'}}" bindinput="bindTextArea" auto-height="true" placeholder="请输入其他原因"></textarea>
    						</label>
    					</radio-group>
    				</view>
    			</view>
    			<view class="modalDlg-footer">
    				<view bindtap="closeModal" class="modalDlg-btn closeBtn">取消</view>
    				<view bindtap="confirmModal" form-type="submit" class="modalDlg-btn confirmBtn">确定</view>
    			</view>
    		</form>
    	</view>
    </view>

data:{
    showModal: false, //取消订单弹框
    
    } ,
    
    
    
      //取消订单弹框
      cancelOrder() {
        this.setData({
          showModal: true
        })
      },
    
        //取消订单弹框-确定
      confirmModal() {
    
       this.setData({
              showModal: false
            });
    
     },
     //取消订单弹框-取消
      closeModal() {
         
        this.setData({
          showModal: false
        })
    
      },

wxss

/* 取消订单弹框 */
    .page-body {
      width: 100%;
    }
    
    /* 遮罩层 */
    .modalDlg-mask {
      width: 100%;
      height: 100%;
      position: fixed;
      top: 0;
      left: 0;
      background: #000;
      z-index: 9000;
      opacity: 0.5;
    }
    
    /* 弹出层 */
    .modalDlg {
      width: 70%;
      position: fixed;
      top: 25%;
      left: 0;
      right: 0;
      z-index: 9999;
      margin: 0 auto;
      background-color: #fff;
      border-radius: 5px;
      display: flex;
      flex-direction: column;
      align-items: center;
    }
    .modalDlg-title{
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20rpx 0rpx;
    }
    
    
    .modalDlg-content {
      width: 100%;
      display: flex;
      flex-direction: column;
      justify-content: center;
      padding: 10rpx 0;
    }
    .modalDlg-content .modalDlg-content-item{
    display: flex;
    align-items: center;
    justify-content: space-between;
     }
    
     .modalDlg-content .modalDlg-content-item radio-group{
       width: 100%;
       color: #666;
     }
     .modalDlg-content .modalDlg-content-item .weui-check__label{
    display: flex;
    align-items: center;
    }
    .modalDlg-content .modalDlg-content-item .weui-cell__bd{
      line-height: 48rpx;
      }
    .modalDlg-content .modalDlg-content-item .weui-cell{
      padding: 20rpx;
      display: flex;
      flex-direction: row;
    }
     
    .modalDlg-footer {
      width: 100%;
      height: 100rpx;
      border-top: 1rpx solid #ededed;
      display: flex;
      align-items: center;
      flex-wrap: nowrap;
      justify-content: space-between;
    }
    
     
    
    /* 弹出层里面的文字 */
    .modalDlg .modalDlg-content text {
      text-align: justify;
      font-size: 28rpx;
      color: #666;
      /* margin-left: 10px; */
    }
    
    /* 弹出层里面的按钮 */
    .modalDlg-btn {
      width: 80px;
      height: 70rpx;
      line-height: 70rpx;
      text-align: center;
      font-size: 28rpx;
      border-radius: 40rpx;
      margin: 0 auto;
    }
    
    .modalDlg .modalDlg-footer .closeBtn {
      background: #fff;
      color: #fc4141;
      border: 1rpx solid #fc4141;
    }
    
    .modalDlg .modalDlg-footer .confirmBtn {
      background: #fc4141;
      color: #fff;
    }