assess-app/page_subpack/message/message.vue

<template>
	<view class="total-page page-env-20 page-box scroll_content">
		<Nav :title="'消息'" :genre="1" :fixedHeight="50"></Nav>
		<view class="task-tabs" :style="{top:`${$tools.topHeight()}px`}">
			<z-tabs ref="tabs" :list="tabsList" :active-style="{color:'#10B261',fontWeight:'bold',fontSize:'30rpx'}"
				:bar-style="{background:'#10B261'}" :inactive-style="{fontWeight:'bold',fontSize:'28rpx'}"
				:current="current" :bar-animate-mode="'worm'" @change="tabsChange" />
		</view>
		<EnScroll ref="scroll" class="main" @onRefresh="onRefresh" @onScrollBottom="onScrollBottom">
			<view class="m-t20">
				<Enblank :message="'暂无消息'" v-if="!messageList.length">
				</Enblank>
			</view>
			<view class="m-lr20 page-env-160">
				<view class="row-c page-box-bg-fff m-t20 r-30 p-30 box-shadow-197" v-for="(item,index) in 30"
					:key="index">
					<image class="wh-80" :src="getLeftImg(index)" mode=""></image>
					<view class="flex m-l20">
						<view class="row-justify-sb center flex">
							<text class="text-color-333 sys-weight-400 size-30">您有新的可执行任务{{index}}</text>
							<image class="wh-30 m-l16" style="margin-top: 4rpx;" src="/static/img/task/task-phone.png"
								mode=""></image>
						</view>
						<view class="row-justify-sb center m-t10">
							<text class="size-26 text-color-666">垫资还款</text>
							<text class="size-24 text-color-999">2024/12/24用款</text>
						</view>
					</view>
				</view>
			</view>
			<!-- <view class="placeholder sys-list-background-color" style="height: 60rpx;" v-if="is_bottom"></view> -->
		</EnScroll>

	</view>
</template>
<script>
	// 任务列表
	import TaskItem from "@/common/task/task-item.vue";

	export default {
		components: {
			TaskItem
		},
		data() {
			return {
				current: 0,
				tabsList: [{
					name: '全部(12)',
					// 可以禁用某个item
					is_dot: true,
					dot_color: 'red',
					disabled: false
				}, {
					name: '未读(15)',
					// 可以禁用某个item
					is_dot: true,
					dot_color: 'yellow',
					disabled: false
				}, {
					name: '已读',
					// 可以禁用某个item
					is_dot: false,
					dot_color: '',
					disabled: false
				}],
				leftImg: ['task-house', 'task-business', 'task-repayment'],
				iconList: ['task-audit', 'task-do', 'task-stay'],
				messageList: []
			}
		},
		watch: {


		},
		methods: {
			tabsChange(index) {
				this.current = index;
			},
			getLeftImg(index) {
				return `/static/img/task/${this.leftImg[0]}.png`
			},
			// 下拉刷新
			onRefresh() {
				uni.showLoading({
					title: '数据加载中'
				})
				setTimeout(() => {
					uni.showToast({
						title: '加载完成',
						icon: 'none'
					})
					this.$refs.scroll.onEndPulling()
				}, 1000)
				console.log("下拉刷新");
			},
			// 滚动到底部
			onScrollBottom() {
				uni.showLoading({
					title: '数据加载中'
				})
				setTimeout(() => {
					uni.showToast({
						title: '加载完成',
						icon: 'none'
					})
				}, 1000)
				console.log("到底部了");
			},
		},
	}
</script>
<style lang="scss" scoped>

</style>