dl_uniapp/pages/mine/history/history.vue

<template>
	<view class="container-box">
		<navigation-bar-vue title="足迹" style="width: 100%;" background-color="#ffffff"
			title-color="#000000"></navigation-bar-vue>
		<view class="content">
			<scroll-view style="height: 100%;" scroll-y="true" @scrolltolower="onReachBottomCus" refresher-enabled
				@refresherrefresh="onRefresherrefresh" :refresher-triggered="isTriggered">
				<view class="item-field" style="align-items: center;">
					<view class="my-suggest-dom">
						<text>最近{{maxHisNum}}条通告浏览记录</text>
					</view>
				</view>
				<notice-item v-if="dataList.length>0" :dataList="dataList" @goDetail="goDetail()"></notice-item>
				<view style="text-align: center" v-if="dataList.length==0">
					<image class="" src="@/static/images/nothing.png"></image>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import noticeItem from '@/pages/components/notice-item.vue'
	import navigationBarVue from '@/components/navigation/navigationBar.vue';
	import {
		toast,
		hasRights
	} from '@/utils/common.js'
	import {
		getCatgByCode
	} from '@/api/system/config.js'
	import {
		getHisList
	} from '@/api/business/notice.js'
	export default {
		components: {
			navigationBarVue,
			noticeItem
		},
		data() {
			return {
				dataList: [],
				queryParams: {
					pageNum: 1,
					pageSize: 10
				},
				total: 0,
				//下来刷新状态
				isTriggered: false,
				//当前用户权益可以看几条浏览记录
				maxHisNum: 20,
			}
		},
		mounted() {
			this.initData("dl_platform", "platformList")
			this.initData("dl_blogger_type", "bloggerTypeList")
			this.selectDataList()
		},
		onLoad: function() {

		},
		methods: {
			/**
			 * 初始化数据
			 * @param {Object} code
			 * @param {Object} dataObj
			 */
			initData(code, dataObj) {
				let that = this
				getCatgByCode({
					code: code
				}).then(res => {
					if (res.code == 200) {
						this[dataObj] = res.data
					}
				}).catch((e) => {
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			/**
			 * 查询数据
			 */
			selectDataList() {
				getHisList(this.queryParams).then(res => {
					this.isTriggered = false
					if (res.code == 200) {
						this.dataList = res.data
					}
				}).catch((e) => {
					this.isTriggered = false
					uni.showToast({
						icon: 'error',
						duration: 2000,
						title: e
					});
				})
			},
			/**
			 * 查看通告详情
			 * @param {Object} item
			 */
			goDetail(item) {
				this.$tab.navigateTo(`/pages/notice/detail?id=${item.id}`)
			},
			/**
			 * 上滑加载数据
			 */
			onReachBottomCus() {
				// //判断 如果页码*页容量大于等于总条数，提示该页数据加载完毕
				// if (this.queryParams.pageNum * this.queryParams.pageSize >= this.total) {
				// 	toast("没有更多数据了")
				// 	return
				// }
				// //页码+1,调用获取数据的方法获取第二页数据
				// this.queryParams.pageNum++
				// this.selectDataList()
			},
			/**
			 * 下拉刷新数据
			 */
			onRefresherrefresh() {
				this.isTriggered = true
				this.queryParams.pageNum = 1
				this.total = 0

				this.selectDataList()
			},
			/**
			 * 查看通告详情
			 * @param {Object} item
			 */
			goDetail(item) {
				this.$tab.navigateTo(`/pages/notice/detail?id=${item.id}`)
			}
		}
	}
</script>

<style lang="scss">
	.container-box {
		padding-top: calc(90rpx + var(--status-bar-height));
		border-top: 1rpx solid #F4F4F4;
		background-color: white;
		width: 100%;
		color: #363636;
		font-size: 30rpx;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: self-start;
		justify-content: center;
		position: relative;

		.content {
			border-top: 1rpx solid #F4F4F4;
			height: calc(100vh - var(--status-bar-height) - var(--window-bottom) - 95rpx);
			overflow-y: scroll;
			width: 100%;
			padding: 10rpx 30rpx;
			background-color: #F2F2F2;
			border-radius: 20rpx;
			display: flex;
			flex-direction: column;
			align-items: self-start;
			justify-content: start;
			position: relative;

			.item-field {
				color: #929292;
				width: 100%;
				display: flex;
				align-items: self-start;
				justify-content: center;

				.my-suggest-dom {
					margin: 0 30rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 26rpx;
					margin-top: 20rpx;
				}
			}
		}
	}
</style>