AuthorReadingNow.vue
3.76 KB
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
<template>
<main class="landing-page">
<div class="container-fluid episode-intro app-discovery-bg">
<Header></Header>
<!-- menu wrapper -->
<div class="intro-startup">
<div class="spot-light-top">
<img src="../assets/images/spot-light-top.svg" />
<div class="app-discovery">
<div class="top-user">
<img src="../assets/images/retake-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Retake'"/>
<img src="../assets/images/behind-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Behind-the-scenes'"/>
<img src="../assets/images/critique-red.svg" v-if="this.allSlide[0].payload.metaData.type == 'Critique'"/>
<img src="../assets/images/jxtapose.svg" v-if="this.allSlide[0].payload.metaData.type == 'Juxtapose'"/>
<!-- <img src="../assets/images/app-photo.svg" /> -->
</div><!-- top user -->
<h1>{{currentSlideData.payload.metaData.title}}</h1>
<h2>{{currentSlideData.payload.metaData.count}}</h2>
<img :src="currentSlideData.payload.metaData.authorImage" class="discovery-app-img" />
</div><!-- app Disovery -->
</div><!-- spot light top -->
<img src="../assets/images/popcorn-set.svg" class="popcorn-set top-intro-bt" />
<div class="footer-nav">
<div class="footer-top">
<ul class="top-intro-bt ps_right">
<li><a href="javascript:void(0);" @click="goBack"><img src="../assets/images/skip-prev.svg" > Prev</a></li>
<li><a href="javascript:void(0);" @click="goNext"><img src="../assets/images/skip-next.svg" > Skip to next slide</a></li>
</ul>
</div><!-- footer top -->
<div class="footer-bottom">
<ul>
<li></li>
<li></li>
</ul>
</div><!-- footer top -->
</div><!-- footer -->
</div>
<!-- body wrapper -->
</div>
<!-- main wrapper -->
</main>
</template>
<script>
import Vue from "vue";
import router from "../router";
import Header from "./Header";
export default {
components: {
Header: Header,
},
name: "AuthorReadingNow",
data() {
return {
allSlide:[],
currentSlideIndex:null,
currentSlideData:null,
};
},
mounted() {
var allSlideData = localStorage.getItem("spotlight_slide"+this.$route.params.caseStudyId);
if (allSlideData) {
this.allSlide = JSON.parse(allSlideData);
this.getCurrentSlideData();
}else{
this.$router.push("/login");
}
},
methods: {
getCurrentSlideData(){
var i = this.allSlide.findIndex((slide_) => slide_.slideId == this.$route.params.slideId);
this.currentSlideIndex = i;
this.currentSlideData = this.allSlide[i]
console.log( this.allSlide[0],"currentSlideData",this.currentSlideData)
},
goNext(){
this.currentSlideIndex++
this.$router.push({
name: this.allSlide[this.currentSlideIndex].ur,
params: {
caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
slideId: this.allSlide[this.currentSlideIndex].slideId,
},
});
},
goBack(){
this.currentSlideIndex--
this.$router.push({
name: this.allSlide[this.currentSlideIndex].ur,
params: {
caseStudyId: this.allSlide[this.currentSlideIndex].caseStudyId,
slideId: this.allSlide[this.currentSlideIndex].slideId,
},
});
},
goToLogin() {
this.$router.push("/login");
},
goToSignUp() {
this.$router.push("/");
},
goToProfile() {
this.$router.push("/profile");
},
},
};
</script>