NurseStationPersonAppletUl/pages/Learningtraining/Learningtraining.vue

120 lines
2.4 KiB
Vue
Raw Normal View History

2023-04-21 15:44:00 +08:00
<template>
<view class="app">
<view class="text">
参加知识技能培训通过考试获得护理资格
</view>
<view class="items" v-for="(item,index) in list" :key="index" @tap='gographicvideo(item)'>
<view class="item">
<image :src="baseurl+item.trainingCategoryPictureUrl" mode=""></image>
<view class="title">
{{item.trainingCategoryName}}
</view>
</view>
</view>
</view>
</template>
<script>
import {
selectTrainingCategory
} from '@/api/Learningtraining/index.js'
import baseurl from '@/api/baseurl.js'
export default {
data() {
return {
baseurl: undefined,
pageNum: 1,
pageSize: 10,
list: [],
total: 0,
};
},
onLoad() {
this.baseurl = baseurl
this.pageNum = 1
this.info();
},
methods: {
info() {
selectTrainingCategory(this.pageNum, this.pageSize).then(res => {
this.list = res.rows
this.total = res.total
})
},
//跳转图文或者视频学习
gographicvideo(item) {
if (item.trainingCategoryName == '图文学习') {
uni.navigateTo({
url: `/pages/Graphiclearning/Graphiclearning?trainingCategoryId=${item.id}`
})
} else if (item.trainingCategoryName == '视频学习') {
uni.navigateTo({
url: `/pages/Videolearning/Videolearning?trainingCategoryId=${item.id}`
})
}
}
},
onReachBottom() { //下滑加载
if (this.list.length >= this.total) {} else {
this.pageNum++
selectTrainingCategory(this.pageNum, this.pageSize).then(res => {
res.rows.forEach(e => {
this.list.push(e)
})
})
}
},
onPullDownRefresh() { //下拉刷新
this.pageNum = 1
this.info();
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
}
</script>
<style lang="scss">
.app {
color: #333333;
padding: 0;
.items {
width: 96%;
margin: 25rpx auto;
.item {
width: 100%;
height: 132rpx;
background: #FFFFFF;
box-shadow: 0rpx 9rpx 31rpx 9rpx rgba(0, 0, 0, 0.03);
border-radius: 5rpx;
margin-bottom: 20rpx;
position: relative;
.title {
display: inline-block;
font-size: 32rpx;
position: absolute;
top: 50%;
left: 120rpx;
transform: translateY(-50%);
}
image {
width: 60rpx;
height: 60rpx;
position: absolute;
top: 50%;
left: 41rpx;
transform: translateY(-50%);
}
}
}
.text {
margin: 40rpx 0 0 23rpx;
font-size: 24rpx;
}
}
</style>