nurseWeChatAppletUI/pages/Healthknowledge/Healthknowledge.vue
2023-02-20 16:22:42 +08:00

148 lines
2.9 KiB
Vue

<template>
<view class="app">
<u-tabs :list="tabList" :current="tabcurrent" @change="change"></u-tabs>
<view class="Healthknowledge">
<!-- <view class="title">
健康常识
</view> -->
<view class="list">
<view class="item" v-for="(item,index) in informationCategoryVOList" :key="index"
@tap='gohealthitem(item)'>
<view class="text">
{{item.informationTitle}}
</view>
<view class="author"></view>
<image :src="item.leadThumbnailUrl" mode=""></image>
</view>
</view>
</view>
<u-back-top :scroll-top="scrollTop"></u-back-top>
</view>
</template>
<script>
import {
getHeathHousingList
} from '@/api/Healthknowledge/index.js'
import baseurl from '@/api/baseurl.js'
export default {
data() {
return {
tabcurrent: 0,
tabList: [{
name: '健康常识'
}],
pageNum: 1,
pageSize: 10,
informationCategoryVOList: [],
total: 0,
scrollTop: 0,
};
},
onShow() {
this.getHeathHousing();
},
methods: {
//跳转健康咨询item
gohealthitem(item) {
uni.navigateTo({
url: `/pages/Healthitem/Healthitem?item=${encodeURIComponent(JSON.stringify(item))}`
})
},
getHeathHousing() {
getHeathHousingList(this.pageNum, this.pageSize).then(res => {
this.informationCategoryVOList = res.rows
this.total = res.total
})
},
change() {
},
},
onPageScroll(e) {
this.scrollTop = e.scrollTop;
},
onReachBottom() { //下滑加载
if (this.informationCategoryVOList.length >= this.total) {} else {
this.pageNum++
getHeathHousingList(this.pageNum, this.pageSize).then(res => {
if (res.rows) {
res.rows.forEach(e => {
e.leadThumbnailUrl = baseurl + e.leadThumbnailUrl
this.informationCategoryVOList.push(e)
})
}
})
}
},
onPullDownRefresh() { //下拉刷新
this.pageNum = 1;
this.getHeathHousing();
setTimeout(function() {
uni.stopPullDownRefresh();
}, 1000);
},
}
</script>
<style lang="scss">
.app {
padding: 0;
.Healthknowledge {
width: 94%;
margin: 20rpx auto;
padding: 0 50rpx 50rpx;
background-color: #fff;
position: relative;
line-height: 46rpx;
.list {
width: 100%;
margin: 20rpx auto 0;
.item {
width: 100%;
height: 200rpx;
position: relative;
border-bottom: 2rpx solid #CDC9C9;
image {
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 253rpx;
height: 164rpx;
border-radius: 10rpx;
}
.author {
position: absolute;
bottom: 20rpx;
left: 0;
font-size: 20rpx;
color: #969494;
}
.text {
position: absolute;
top: 20rpx;
left: 0;
width: 50%;
font-size: 30rpx;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
}
.title {
font-size: 38rpx;
font-weight: bold;
}
}
}
</style>