orderCancelDialog.vue 2.18 KB
<template>
  <mt-popup class="orderCancel" v-model="orderCancel"   :overlay="true">
      <div class="box">
          <img class='img' :src="popup_img" alt="">
          <div class="content">
            <h2>参与未成功</h2>
            <p>真的要放弃孩子启蒙英语的黄金机会吗?</p>
            <p class="warn">每天10分钟,英语启蒙很轻松!</p>
            <div class="btnbox">
              <div @click="dis" class="btn fal">含泪放弃</div>
              <div @click="payOrder()" class="btn suc">报名课程</div>
            </div>
          </div>
      </div>
    </mt-popup>
</template>

<script>
  import {getCouponListApi} from "../../service/api";
  import popup_img from '../../assets/shop/popup_img@2x.png'
  import { Popup } from "mint-ui";
  export default {
    name: "orderCancelDialog",
    components: {
    [Popup.name]: Popup
  },
    props:[
      "orderCancel"
    ],
    data(){
      return {
        popup_img:popup_img,
      }
    },
    mounted(){
    },
    methods:{
      payOrder(){
        this.$emit('payEven');
      },
      dis(){
        this.$emit('cancel');
      }
    },
    watch:{
      orderCancel(){
        console.log(this)
        console.log(this.orderCancel,46)
      }
    }
  }
</script>

<style scoped lang="less">
  @import "../../util/public";
  .orderCancel{
    top: 45%;
    background: transparent;
    .box{
      width: 315* @toVw;
    }
    .img{
      width: 315* @toVw;
    }
    .content{
      position: absolute;
      width: 315* @toVw;
      top: 112* @toVw;
      left: 0;
      text-align: center;
      h2{
        font-size: 25* @toVw;
        color: #6C6C6C;
      }
      p{font-size: 14* @toVw;color: #999999;margin: 20 * @toVw 0 0;}
      .warn{font-size: 15* @toVw;color: #EC612A;margin: 10 * @toVw 0 25* @toVw;font-weight: bold;}
      .btnbox{
        display: flex;
        .btn{width: 118* @toVw;height: 40* @toVw;line-height: 40* @toVw;font-size: 14* @toVw;color: white;border-radius: 20* @toVw;font-weight:bold; }
        .fal{background: #F8D56B;box-shadow:0px 4px 0px 0px rgba(239,147,70,0.97);}
        .suc{background: #EC612A;box-shadow:0px 4px 0px 0px rgba(190,61,10,0.97);}
      }
    }
  }

</style>