MoeNovaClient/pages/message/mailMessage.vue

<template>
	<view class="page">
		<view class="mainBody">
			<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0">
<!-- 				<view class="item" :class="{'active':tab===0}" @click="checkTab(0)">
					<text class="left">全部</text>
					<view class="line"></view>
				</view> -->
				<view class="item" :class="{'active':tab===item.id}" @click="checkTab(item.id)"
					v-for="(item,index) in cate" :key="index">
					<text class="left">{{item.name}}</text>
					<view class="line"></view>
				</view>
			</scroll-view>

		</view>
		<view class="list_info" v-if="tab === 2">
			<block v-for="(item,index) in list" :key="index">
				<view class="item" @click="goDetail(item)">
					<view class="avator">
						<image class="icon" :src="item.image" mode="aspectFill"></image>
					</view>
					<view class="content">
						<view class="tit">
							<view class="name">{{item.name}}</view>
							<view class="time">{{item.time}}</view>
							<view class="desc">{{item.desc}}</view>
						</view>
						<view class="thumbnail">
							<image :src="item.thumbnail" mode="aspectFill"></image>
						</view>
					</view>
				</view>
			</block>
			<view class="blankHeight"></view>
		</view>

		<view class="list_article" v-if="tab === 1">
			<block v-for="(item,index) in list2" :key="index">
				<view class="item" @click="goDetail(item)">
					<view class="thumbnail">
						<image :src="item.thumbnail" mode="aspectFill"></image>
					</view>
					<view class="title">{{item.title}}</view>
					<view class="content">{{item.content}}</view>
					<view class="divider"></view>
					<view class="time">{{item.time}}</view>
				</view>
			</block>
			<view class="blankHeight"></view>
		</view>

		<DialogBox ref="DialogBox"></DialogBox>
		<ToastW3 ref="ToastW3"></ToastW3>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				tab: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				list: [{
					image: '/static/images/avatar.png',
					name: '张三',
					time: '2024-03-20 12:30',
					desc: '给你点赞了一下作品',
					thumbnail: '/static/images/thumb1.png'
				}, {
					image: '/static/images/avatar2.png',
					name: '李四',
					time: '2024-03-19 15:45',
					desc: '评论了你的作品：真不错！',
					thumbnail: '/static/images/thumb2.png'
				}],
				list2: [{
					thumbnail: '/static/images/article1.png',
					title: '2024年最新艺术设计趋势',
					content: '近期艺术设计领域出现了许多新的趋势，本文将为您详细解析这些新趋势带来的机遇与挑战...',
					time: '2024-03-20 10:00'
				}, {
					thumbnail: '/static/images/article2.png',
					title: '如何提升作品质量',
					content: '作品质量是艺术创作中最重要的环节，本文将分享一些实用的技巧和方法...',
					time: '2024-03-19 14:30'
				}],
				cate: [{"name": "消息",id: 1},{"name": "点赞和评论",id: 2}],
			}
		},
		onLoad() {},
		onShow() {
			this.loadData();
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				// uni.navigateTo({
				// 	url: '/pages/my/wishList'
				// });
			}
		},
		methods: {
			onBack() {},
			checkTab(tab) {
				this.tab = tab;
				this.loadData();
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goDetail(item) {

			},
			loadData() {

			},
		}
	}
</script>

<style scoped lang="scss">
	@import 'mailMessage.scss';
</style>