vue 实现分类渲染数据
<template>
<div class="container">
<!-- <van-sticky> -->
<van-tabs v-model="tabActive" sticky swipeable>
<van-tab
v-for="item in typeCV"
:title="item.listTitle"
:key="item.titleId"
@click="onItemClick(item.titleId)"
>
<van-list
class="cVideo-content"
v-model="loading"
:finished="finished"
:immediate-check="false"
finished-text="没有更多了"
@load="onLoad"
:offset="10"
>
<ul class="card-view">
<li
class="col-xs-6 view-cell"
v-for="(vItem, index) in courseVideoList"
:key="index"
v-show="vItem.id != null || undefined || '' || 0"
>
<nuxt-link
:to="
`/res061401/ycc/shop/mobile/video?kind=2&videoId=${vItem.id}&path=${vItem.path}`
"
>
<MyImg
:img-data="{
hash: vItem.cover,
width: '100%',
height: '100%',
defer: true,
adapt: false,
suffix: '',
alt: 'video Image'
}"
:warp-data="{
width: '98%',
height: '50%',
margin: '0 auto',
background: '#ccc'
}"
/>
<p class="cVideo-name text-ellipsis">{{ vItem.name }}</p>
<div class="cVideo-issuer-content pad-top-5">
<i
:class="
vItem.views > 0
? 'iconfont icon-yulan text-red'
: 'iconfont icon-yulan'
"
></i>
{{ vItem.views }}次浏览
</div>
<div class="cVideo-issuer-content pad-top-5 text-ellipsis">
<span>发布者:</span>
<span class="c-v-issuer">{{ vItem.issuer }}</span>
</div>
</nuxt-link>
</li>
</ul>
</van-list>
</van-tab>
</van-tabs>
<!-- </van-sticky> -->
</div>
</template>
<script>
import qs from 'qs'
import MyImg from '~/components/MyImg'
export default {
components: {
MyImg
},
// asyncData({ query }) {
// return {
// page=query.page,
// size=query.size
// }
// },
data() {
return {
loading: false,
finished: false,
page: 1, //请求第几页
size: 10, //每页请求的数量
total: 0, //总共的数据条数
courseVideoList: [
{
name: ''
}
],
tabActive: 0,
clist: [],
num: 0,
typeCV: [],
typeNum: '',
vid: ''
}
},
watch: {
//监听点击了哪一个tab分类
tabActive(index) {
this.vid = this.typeCV[index].titleId
//切换列表
this.getCourseVideoList1(this.vid)
// let vid = this.clist[index].id
// let page = 1
// let size = 10
// this.getCategoryList(vid, page)
}
},
beforeMount() {
//获取分类标题
this.getVideotypeList()
//展示e课列表
this.getCourseVideoList()
// let vid = this.clist[0].id
// this.clist.forEach(async (item, index) => {
// item.plist = await this.getCategoryList(item.id, 1)
// this.$forceUpdate()
// })
},
methods: {
onItemClick(titleId) {
// console.log('*****测试这一步走不到*******' + titleId)
},
getVideotypeList() {
this.$axios({
url: '/video/query',
method: 'post',
headers: {
'content-type': 'application/x-www-form-urlencoded',
reqType: 'getVideotypeList'
}
}).then(({ data: resData }) => {
if (resData.status == 1) {
let arrCV = resData.data
arrCV.forEach((item, index, array) => {
this.typeCV.push(arrCV[index])
})
} else {
this.$notify(`数据获取失败...`)
}
})
},
getCourseVideoList() {
this.$axios({
url: '/video/query',
method: 'post',
headers: {
'content-type': 'application/x-www-form-urlencoded',
reqType: 'getCourseList'
},
data: qs.stringify({
page: this.page,
size: this.size
})
}).then(({ data: resData }) => {
if (resData.status == 1) {
this.typeNum = resData.data.pages
let rows = resData.data.list //请求返回当页的列表
//定时器
setTimeout(() => {
//隐藏 加载时的提示
this.loading = false
this.total = resData.data.total
// this.clist=resData.data.data
if (rows == null || rows.length === 0) {
// 加载结束
this.finished = true
return
}
// 将新数据与旧数据进行合并
this.courseVideoList = this.courseVideoList.concat(rows)
//如果列表数据条数>=总条数，不再触发滚动加载
if (this.courseVideoList.length >= this.total) {
this.finished = true
}
}, 800)
// this.courseVideoList = resData.data.list
} else {
this.$notify(`数据获取失败...`)
}
})
},
//滚动加载时触发，list组件定义的方法
onLoad() {
this.page++
this.getCourseVideoList()
},
//获取分类的list
// async getCategoryList(vid, page) {
// let res = await this.$axios({
// url: `/video/query?vid=${vid}&page=${page}&size=10`,
// method: 'post',
// headers: {
// 'content-type': 'application/x-www-form-urlencoded',
// reqType: 'xxxx'
// }
// })
// console.log(res)
// return res.data.data
// }
//点击tabTitle切换列表
getCourseVideoList1(vid) {
this.courseVideoList = ''
this.$axios({
url: '/video/query',
method: 'post',
headers: {
'content-type': 'application/x-www-form-urlencoded',
reqType: 'getCourseList'
},
data: qs.stringify({
page: 1,
size: this.size,
videoType: this.vid
})
}).then(({ data: resData }) => {
if (resData.status == 1) {
this.typeNum = resData.data.pages
let rows = resData.data.list //请求返回当页的列表
// 将新数据与旧数据进行合并
this.courseVideoList = this.courseVideoList.concat(rows)
this.courseVideoList = rows
//定时器
setTimeout(() => {
//隐藏 加载时的提示
this.loading = false
this.total = resData.data.total
// this.clist=resData.data.data
if (rows == null || rows.length === 0) {
// 加载结束
this.finished = true
return
}
// 将新数据与旧数据进行合并
this.courseVideoList = this.courseVideoList.concat(rows)
//如果列表数据条数>=总条数，不再触发滚动加载
if (this.courseVideoList.length >= this.total) {
this.finished = true
}
}, 800)
// this.courseVideoList = resData.data.list
} else {
this.$notify(`数据获取失败...`)
}
})
}
},
head() {
return {
title: '经侦e课'
}
}
}
</script>
<style lang="scss" scoped>
/deep/ .van-tabs__content {
margin-top: 10px;
}
/deep/ .van-tab--active {
color: #323233;
font-weight: 600;
font-size: 1rem;
}
/deep/ .van-tabs__line {
position: absolute;
bottom: 0.9375rem;
left: 0;
z-index: 1;
height: 0.1875rem;
background-color: #323233;
border-radius: 0.1875rem;
}
/deep/ .van-tabs--line .van-tabs__wrap {
height: 2.75rem;
box-shadow: 0 2px 2px #ebe7e7;
}
/deep/ .van-tabs__nav--card {
box-sizing: border-box;
height: 1.875rem;
margin: 0 1rem;
border: 0.0625rem solid #fff;
border-radius: 0.125rem;
}
/deep/ .van-hairline--top-bottom {
box-shadow: 0 2px 2px #ebe7e7;
}
/deep/ .van-tabs__nav--card .van-tab {
color: #929292 !important;
line-height: 1.75rem;
border-right: 0.0625rem solid #fff !important;
border-radius: 5px;
background-color: #ebebeb;
margin-right: 5px;
}
/deep/ .van-tabs__nav--card .van-tab.van-tab--active {
color: #067eee !important;
background-color: #ebf0f4 !important;
border-radius: 5px;
}
.col-xs-6 {
width: 47%;
}
.pad-top-5 {
padding-top: 5px;
}
.view-cell {
position: relative;
float: left;
height: 11rem;
background: #fff;
box-shadow: 3px 3px 10px #e0e0e0;
margin-left: 2%;
margin-bottom: 10px;
border-radius: 5px;
}
.text-ellipsis {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
</style>
<style>
.cVideo-title {
border-bottom: 1px solid #e8e6e6;
padding: 10px;
font-weight: bold;
}
.cVideo-content {
margin-bottom: 15px;
}
.cVideo-views {
display: inline;
margin: 0 0 0 10px;
}
.cVideo-issuer-content {
float: right;
padding: 0 20px 0 0px;
}
.c-v-issuer {
color: #1989fa;
}
.cVideo-name {
padding: 5px 0 0 10px;
color: #333333;
font-weight: bold;
}
</style>
