1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
<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>