uniapp微信小程序对话框取消确认按钮

uniapp微信小程序对话框实现，样式用scss写的，标题+内容+按钮

效果图

 data() {
 	return {
		refundMask: false,
  }
 }
 
 <view class="refund-button">
  <button class="refund-button-btn plain" @click="handleRefund()">申请退款</button>
 </view>
 
 <view v-if="refundMask" class="refund">
      <view class="mask"></view>
      <view class="dialog">
        <view class="header"><text class="head-txt">退票说明</text></view>
        <view class="body">
          <view class="body-li">
            <view class="body-li-txt">票价</view>
            <view class="body-li-price">￥30</view>
          </view>
          <view class="body-li">
            <view class="body-li-txt">预计手续费
              <text class="body-li-txt-tips">当前时间按20%核收</text>
            </view>
            <view class="body-li-price">-￥6</view>
          </view>
          <view class="body-li">
            <view class="body-li-txt">预计退款金额</view>
            <view class="body-li-price">￥30</view>
          </view>
        </view>
        <view class="footer">
          <view class="footer-button">
            <button class="footer-button-btn default" @click="cancel">取消</button>
            <button class="footer-button-btn primary" @click="confirm">确认退票</button>
          </view>
        </view>
      </view>

    </view>
    
    
<style lang="scss" scoped>
.refund-button {
  overflow: hidden;
  margin: $uni-margin-xs 0;
  &-btn {
    float: right;
    padding: 0 $uni-padding-xs;
    @include height-lineHeight(rpx(22),rpx(20));
    border-radius: 4rpx*$hd 4rpx*$hd;
    @include font($uni-font-size-sm,$uni-color-gray3);
    &.plain {
      background: none;
      border: $uni-border-color-base $uni-border-base solid!important;
    }
  }
}

.refund {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 9999;

  .mask {
    position: $uni-position-absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .3);
    border-radius: 11rpx*$hd;
    z-index: 1;
  }
  .dialog {
    transform: translate(-50%,-80%);
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 1;
    width: 63%;
    background: $uni-bg-color-white;
    border-radius: 12rpx*$hd;
    overflow: hidden;

    .header {
      margin: 15rpx*$hd;
      @include font($uni-font-size-base,$uni-color-base,bold);
      text-align: $uni-text-align-center;
    }

    .body {
      margin: $uni-margin-lg;
      font-size: $uni-font-size-sm;

      &-li {
        @include display-flex;
        @include justify-content(space-between);
        @include align-items(flex-start);
        margin-bottom: $uni-margin-lg;

        &-txt {
          &-tips {
            display: block;
            margin-top: $uni-margin-xs;
            color: $uni-color-gray3;
          }
        }
        &-price {
          @include font($uni-font-size-base,#f26161,bold);
        }

      }
    }
    .footer {
      &-button {
        @include display-flex;
        @include set-border-top();

       &-btn {
         flex: 1;
         @include height-lineHeight(rpx(40),rpx(40));
         &.primary {
           color: #409eff;
         }
         &:not(:last-child) {
           @include set-border-right();
         }
       }

      }
    }
  }
}
</style>

methods: {
 handleRefund() {
      this.refundMask = true;
      console.log("11111");
    },
    cancel() {
      this.refundMask = false;
    },
    confirm() {
      this.refundMask = false;
      uni.showToast({
        title: "退票成功",
        icon: "none",
      });
    },
}