<!-- 遮罩层 -->
<template name="mask">
  <view class="mask" @touchmove.stop.prevent="moveHandle">
    <view class="maskbgc"></view>
    <view class="content">
      <view class="header">
        <view class="title">订单兑换</view>
        <image src="../../static/images/closeicon.png" class="iconclose" @tap="closeMask" />
      </view>
      <view class="content-warp">
        <view class="message">
          <image v-if="iconShow" src="../../static/images/sureicon.png" class="iocn"></image>
          <icon v-if="!iconShow" class="iocn" type="warn" size="40"/>
          <view class="txt">{{ txt }}</view>
        </view>
        <view class="sure">
          <view class="btn" @tap="sureconver">确认</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'mask',
  components: {},
  props: {
    txt: {
      type: String,
      default: '该订单已核销',
    },
    iconShow: {
      type: Boolean,
      default: false
    }
  },
  data() {
    //这里存放数据
    return {};
  },
  //监控data中的数据变化
  watch: {},
  //方法集合
  methods: {
    // 确认后
    sureconver () {
      this.$emit('isSureConver', true)
    },
    closeMask() {
      this.$emit('isSureConver', false)
    },

    // 禁止页面滚动
    moveHandle() {}

  },
  onLoad() {},
};
</script>
<style lang='scss' scoped>
.mask {
  position: relative;
  width: 100vw;
  height: 100vh;

  .maskbgc {
    position: absolute;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.4);
  }
  .content {
    position: absolute;
    top: 50%;
    margin-top: -281upx;
    left: 50%;
    margin-left: -320upx;
    width: 640upx;
    z-index: 101;
    box-sizing: border-box;
    overflow: hidden;
    .header {
      position: relative;
      width: 100%;
      height: 102upx;
      border-top-left-radius: 20upx;
      border-top-right-radius: 20upx;
      background-color: #ffcd00;
      .title {
        text-align: center;
        font-weight: 600;
        line-height: 102upx;
        color: #0f1e1a;
        font-size: 36upx;
        letter-spacing: 2upx;
      }
      .iconclose {
        position: absolute;
        right: 24upx;
        top: 50%;
        margin-top: -15upx;
        height: 31upx;
        width: 31upx;
      }
    }

    .content-warp {
      background-color: #fff;
      border-bottom-left-radius: 20upx;
      border-bottom-right-radius: 20upx;
      .message{
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
        height: 340upx;
        .txt {
          text-align: center;
          color: #18211e;
          font-size: 36upx;
          letter-spacing: 2upx;
        }
        .iocn {
          width: 70upx;
          height: 70upx;
          margin-bottom: 25upx;
        }
      }
        .sure {
          padding-bottom: 40upx;
          box-sizing: border-box;
          display: flex;
          justify-content: center;
          align-items: center;
          .btn {
            width: 280upx;
            height: 80upx;
            background-color: #a95cff;
            color: #fff;
            font-size: 32upx;
            letter-spacing: 2upx;
            text-align: center;
            line-height: 80upx;
            border-radius: 10upx;
          }
        }
    }
  }
}
</style>