<template>
|
|
<a-tabs :defaultActiveKey="activeKey" @change="changeKey"
|
:tabBarStyle="{'display': 'flex','justify-content': 'center'}">
|
<a-tab-pane :key="keyType.type_1" tab="片刻">
|
<videoList v-on="$listeners" :activeKey="activeKey"></videoList>
|
</a-tab-pane>
|
<a-tab-pane :key="keyType.type_2" tab="流影">
|
<videoList v-on="$listeners" :activeKey="activeKey"></videoList>
|
</a-tab-pane>
|
<a-tab-pane :key="keyType.type_3" tab="谱库">
|
<photoShow :activeKey="activeKey"></photoShow>
|
</a-tab-pane>
|
</a-tabs>
|
|
</template>
|
|
<script>
|
import videoList from "../mini/box14-video.vue"
|
import photoShow from "../mini/box18-photoShow.vue"
|
import myConstant from "../../config/myConstant.js"
|
|
export default {
|
components: {
|
videoList,
|
photoShow,
|
},
|
created() {
|
this.getActiveKey()
|
},
|
watch: {
|
'$route'(to, from) {
|
if ("platform" === to.name) {
|
this.getActiveKey()
|
}
|
},
|
},
|
methods: {
|
getActiveKey() {
|
if (this.$route.query.activeKey != "" && this.$route.query.activeKey != undefined) {
|
this.activeKey = this.$route.query.activeKey;
|
} else {
|
//随机三选一
|
var random = Math.floor(Math.random() * 10);
|
this.activeKey = random >= 8 ?
|
this.keyType.type_3 : (random <= 3 ? this.keyType.type_2 : this.keyType.type_1)
|
|
this.$router.replace({query:{activeKey:this.activeKey}})
|
}
|
},
|
changeKey(key) {
|
this.activeKey = key
|
this.$router.replace({query:{activeKey:this.activeKey}})
|
}
|
},
|
data() {
|
return {
|
activeKey: "moment",
|
keyType: myConstant.activeKeyType
|
}
|
},
|
|
}
|
</script>
|
|
<style lang="less">
|
.ant-tabs-tab {
|
user-select: none;
|
}
|
</style>
|