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
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
<template>
<div class="guideActivity">
<div class="h2">
<img :src="icon_yes" alt /> <span v-if='!exChange'>恭喜您，成功激活课程!</span> <span v-if='exChange'>恭喜您，成功兑换课程!</span>
</div>
<div class="top">
<img class="qr" v-if='!exChange' :src="imgguide2" alt />
<img class="qr" v-if='exChange' :src="imgguide" alt />
<img v-if="userCourse.teacher_qr" class="qrcode" :src="userCourse.teacher_qr" />
</div>
<!-- <img class='logo' :src="logo" alt=""> -->
</div>
</template>
<script>
import icon_yes from "../../assets/yb/icon_yes@2x.png";
import imgguide from "../../assets/shop/imgguide@2x.png";
import imgguide2 from "../../assets/shop/imgguide2@2x.png";
import logo from "../../assets/yb/logo@2x.png";
import {
getCourseInfoApi,
getwechatParam,
getUserDetailApi,
getGoodsDetailApi
} from "../../service/api";
export default {
name: "guideActivity",
components: {},
data() {
return {
icon_yes: icon_yes,
logo: logo,
groupDetail: {},
userCourse: {},
imgguide: imgguide,
imgguide2:imgguide2,
exChange:null
};
},
mounted() {
this.initPage();
},
methods: {
initPage() {
if(this.$route.query.exChange){
this.exChange = this.$route.query.exChange
}
if (window.location.href.indexOf("invite_code") > -1) {
this.invite_code = this.$route.query.invite_code;
}
this.userCourse = JSON.parse(localStorage.getItem("userCourse"));
console.log(this.userCourse);
this.user_id = JSON.parse(localStorage.getItem("userDesc")).user_id;
}
}
};
</script>
<style scoped lang="less">
@import "../../util/public";
.guideActivity {
background: #ffffff;
text-align: center;
border-top: 1px solid transparent;
.top {
margin: 35 * @toVw auto;
width: 326 * @toVw;
// background: #FFEAAD;
border-radius: 24 * @toVw;
position: relative;
img {
max-width: 100%;
}
.qr {
// position: absolute;
// left: 25 * @toVw;
width: 326 * @toVw;
// top: 31*@toVw;
border-radius: 10 * @toVw;
}
.qrcode {
position: absolute;
top: 110 * @toVw;
left: 68 * @toVw;
width: 189 * @toVw;
z-index: 1;
}
p {
position: absolute;
top: 270 * @toVw;
width: 100%;
text-align: center;
color: #6f5c25;
font-weight: bold;
font-size: 17 * @toVw;
}
}
.h2 {
font-size: 17 * @toVw;
font-weight: bold;
text-align: center;
margin-top: 30 * @toVw;
img {
width: 24 * @toVw;
position: relative;
top: 2 * @toVw;
}
}
.logo {
position: fixed;
left: 130 * @toVw;
bottom: 20 * @toVw;
width: 125 * @toVw;
}
}
@media screen and (orientation: landscape) {
}
</style>