|
@@ -2,22 +2,33 @@
|
|
<view class="episode-box">
|
|
<view class="episode-box">
|
|
<view class="header-box main-between cross-center">
|
|
<view class="header-box main-between cross-center">
|
|
<text class="title">{{ title }}</text>
|
|
<text class="title">{{ title }}</text>
|
|
- <view class="refresh main-left cross-center">
|
|
|
|
|
|
+ <view class="refresh main-left cross-center" @click="handleRefresh">
|
|
<text>换一批</text>
|
|
<text>换一批</text>
|
|
<view class="icon">
|
|
<view class="icon">
|
|
<u-icon name="reload" size="32rpx" bold />
|
|
<u-icon name="reload" size="32rpx" bold />
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
- <view class="container dir-left-wrap">
|
|
|
|
- <episode
|
|
|
|
- v-for="(episode,index) in episodes"
|
|
|
|
- :key="index"
|
|
|
|
- :episode="episode"
|
|
|
|
- :custom-style="{
|
|
|
|
- marginRight: ((index+1) % 3 !== 0 ? '20rpx' :''),
|
|
|
|
- }"
|
|
|
|
- />
|
|
|
|
|
|
+ <view
|
|
|
|
+ class="container dir-left-wrap"
|
|
|
|
+ :class="{
|
|
|
|
+ loading: loading,
|
|
|
|
+ 'main-center':loading,
|
|
|
|
+ 'cross-center': loading
|
|
|
|
+ }"
|
|
|
|
+ >
|
|
|
|
+ <u-loading-icon :show="loading" vertical />
|
|
|
|
+ <template v-if="episodes.length && !loading">
|
|
|
|
+ <episode
|
|
|
|
+ v-for="(episode,index) in episodes"
|
|
|
|
+ :key="index"
|
|
|
|
+ :episode="episode"
|
|
|
|
+ :guess="episode.guess"
|
|
|
|
+ :custom-style="{
|
|
|
|
+ marginRight: ((index+1) % 3 !== 0 ? '20rpx' :''),
|
|
|
|
+ }"
|
|
|
|
+ />
|
|
|
|
+ </template>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
</template>
|
|
@@ -25,6 +36,7 @@
|
|
<script>
|
|
<script>
|
|
import UIcon from '../../../uni_modules/uview-ui/components/u-icon/u-icon'
|
|
import UIcon from '../../../uni_modules/uview-ui/components/u-icon/u-icon'
|
|
import Episode from '../../../components/Episode/index'
|
|
import Episode from '../../../components/Episode/index'
|
|
|
|
+import { recommend } from '../../../api/episode'
|
|
export default {
|
|
export default {
|
|
name: 'EpisodeBox',
|
|
name: 'EpisodeBox',
|
|
components: { Episode, UIcon },
|
|
components: { Episode, UIcon },
|
|
@@ -32,20 +44,50 @@ export default {
|
|
title: {
|
|
title: {
|
|
type: String,
|
|
type: String,
|
|
required: true
|
|
required: true
|
|
|
|
+ },
|
|
|
|
+ type: {
|
|
|
|
+ type: String,
|
|
|
|
+ required: true
|
|
}
|
|
}
|
|
},
|
|
},
|
|
data() {
|
|
data() {
|
|
return {
|
|
return {
|
|
- episodes: [
|
|
|
|
- { name: '毒液', status: '已完结', total: 40 },
|
|
|
|
- { name: '毒液', status: '已完结', total: 40 },
|
|
|
|
- { name: '毒液', status: '已完结', total: 40 },
|
|
|
|
- { name: '毒液', status: '已完结', total: 40 }
|
|
|
|
- ]
|
|
|
|
|
|
+ loading: false,
|
|
|
|
+ episodes: []
|
|
}
|
|
}
|
|
},
|
|
},
|
|
computed: {},
|
|
computed: {},
|
|
- methods: {}
|
|
|
|
|
|
+ created() {
|
|
|
|
+ this.handleRefresh()
|
|
|
|
+ },
|
|
|
|
+ methods: {
|
|
|
|
+ getRecommend() {
|
|
|
|
+ this.loading = true
|
|
|
|
+ this.$api.episode.recommend().then(res => {
|
|
|
|
+ this.loading = false
|
|
|
|
+ this.episodes = res.data
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getNews() {
|
|
|
|
+ this.loading = true
|
|
|
|
+ this.$api.episode.news().then(res => {
|
|
|
|
+ this.loading = false
|
|
|
|
+ this.episodes = res.data
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ getRank() {
|
|
|
|
+ this.loading = true
|
|
|
|
+ this.$api.episode.rank().then(res => {
|
|
|
|
+ this.loading = false
|
|
|
|
+ this.episodes = res.data
|
|
|
|
+ })
|
|
|
|
+ },
|
|
|
|
+ handleRefresh() {
|
|
|
|
+ this.type === 'recommend' && this.getRecommend()
|
|
|
|
+ this.type === 'news' && this.getNews()
|
|
|
|
+ this.type === 'rank' && this.getRank()
|
|
|
|
+ }
|
|
|
|
+ }
|
|
}
|
|
}
|
|
</script>
|
|
</script>
|
|
|
|
|
|
@@ -68,6 +110,9 @@ export default {
|
|
}
|
|
}
|
|
.container{
|
|
.container{
|
|
margin-top: 30rpx;
|
|
margin-top: 30rpx;
|
|
|
|
+ min-height: 458rpx;
|
|
|
|
+ &.loading{
|
|
|
|
+ }
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
</style>
|