|
|
@ -11,6 +11,12 @@
|
|
|
|
}}</router-link>
|
|
|
|
}}</router-link>
|
|
|
|
-
|
|
|
|
-
|
|
|
|
{{ mv.data.name }}
|
|
|
|
{{ mv.data.name }}
|
|
|
|
|
|
|
|
<div class="like-button" v-show="accountLogin">
|
|
|
|
|
|
|
|
<button-icon @click.native="likeMV">
|
|
|
|
|
|
|
|
<svg-icon icon-class="heart-solid" v-if="mv.subed"></svg-icon>
|
|
|
|
|
|
|
|
<svg-icon icon-class="heart" v-else></svg-icon>
|
|
|
|
|
|
|
|
</button-icon>
|
|
|
|
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<div class="info">
|
|
|
|
<div class="info">
|
|
|
|
{{ mv.data.playCount | formatPlayCount }} Views ·
|
|
|
|
{{ mv.data.playCount | formatPlayCount }} Views ·
|
|
|
@ -26,17 +32,20 @@
|
|
|
|
</template>
|
|
|
|
</template>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
<script>
|
|
|
|
|
|
|
|
import { mvDetail, mvUrl, simiMv, likeAMV } from "@/api/mv";
|
|
|
|
|
|
|
|
import { isAccountLoggedIn } from "@/utils/auth";
|
|
|
|
import NProgress from "nprogress";
|
|
|
|
import NProgress from "nprogress";
|
|
|
|
import { mvDetail, mvUrl, simiMv } from "@/api/mv";
|
|
|
|
|
|
|
|
import Plyr from "plyr";
|
|
|
|
|
|
|
|
import "@/assets/css/plyr.css";
|
|
|
|
import "@/assets/css/plyr.css";
|
|
|
|
|
|
|
|
import Plyr from "plyr";
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
import ButtonIcon from "@/components/ButtonIcon.vue";
|
|
|
|
import MvRow from "@/components/MvRow.vue";
|
|
|
|
import MvRow from "@/components/MvRow.vue";
|
|
|
|
|
|
|
|
|
|
|
|
export default {
|
|
|
|
export default {
|
|
|
|
name: "mv",
|
|
|
|
name: "mv",
|
|
|
|
components: {
|
|
|
|
components: {
|
|
|
|
MvRow,
|
|
|
|
MvRow,
|
|
|
|
|
|
|
|
ButtonIcon,
|
|
|
|
},
|
|
|
|
},
|
|
|
|
data() {
|
|
|
|
data() {
|
|
|
|
return {
|
|
|
|
return {
|
|
|
@ -53,6 +62,11 @@ export default {
|
|
|
|
simiMvs: [],
|
|
|
|
simiMvs: [],
|
|
|
|
};
|
|
|
|
};
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
computed: {
|
|
|
|
|
|
|
|
accountLogin() {
|
|
|
|
|
|
|
|
return isAccountLoggedIn();
|
|
|
|
|
|
|
|
},
|
|
|
|
|
|
|
|
},
|
|
|
|
methods: {
|
|
|
|
methods: {
|
|
|
|
getData(id) {
|
|
|
|
getData(id) {
|
|
|
|
mvDetail(id).then((data) => {
|
|
|
|
mvDetail(id).then((data) => {
|
|
|
@ -81,6 +95,14 @@ export default {
|
|
|
|
this.simiMvs = data.mvs;
|
|
|
|
this.simiMvs = data.mvs;
|
|
|
|
});
|
|
|
|
});
|
|
|
|
},
|
|
|
|
},
|
|
|
|
|
|
|
|
likeMV() {
|
|
|
|
|
|
|
|
likeAMV({
|
|
|
|
|
|
|
|
mvid: this.mv.data.id,
|
|
|
|
|
|
|
|
t: this.mv.subed ? 0 : 1,
|
|
|
|
|
|
|
|
}).then((data) => {
|
|
|
|
|
|
|
|
if (data.code === 200) this.mv.subed = !this.mv.subed;
|
|
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
},
|
|
|
|
},
|
|
|
|
},
|
|
|
|
mounted() {
|
|
|
|
mounted() {
|
|
|
|
let videoOptions = {
|
|
|
|
let videoOptions = {
|
|
|
@ -154,4 +176,13 @@ export default {
|
|
|
|
opacity: 0.88;
|
|
|
|
opacity: 0.88;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.like-button {
|
|
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
|
|
.svg-icon {
|
|
|
|
|
|
|
|
height: 18px;
|
|
|
|
|
|
|
|
width: 18px;
|
|
|
|
|
|
|
|
color: var(--color-primary);
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
}
|
|
|
|
</style>
|
|
|
|
</style>
|
|
|
|