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.title}}</view>
							<view class="time">{{item.create_time}}</view>
							<view class="desc">{{item.content}}</view>
						</view>
					</view>
				</view>
			</block>
			<view class="blankHeight"></view>
			<view class="loading-more" v-if="tab === 2">
				<text v-if="isLoading">正在加载更多...</text>
				<text v-else-if="!hasMore">没有更多内容了</text>
			</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.image" mode="aspectFill"></image>
					</view>
					<view class="title">{{item.title}}</view>
					<view class="content">{{item.content}}</view>
					<view class="divider"></view>
					<view class="time">{{item.create_time}}</view>
				</view>
			</block>
			<view class="blankHeight"></view>
			<view class="loading-more" v-if="tab === 1">
				<text v-if="isLoading">正在加载更多...</text>
				<text v-else-if="!hasMore">没有更多内容了</text>
			</view>
		</view>

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

		<tabbar-view :tabbars="tabbars" :currentIndex="3" ref="tabbar"></tabbar-view>
	</view>
</template>

<script>
	import tabbarView from "@/components/tabbar/tabbar.vue";
	import tabbar from "@/mixins/tabbar";
	export default {
		components: {
			tabbarView,
		},
		mixins: [tabbar],
		data() {
			return {
				tab: 1,
				scrollTop: 0,
				old: {
					scrollTop: 0
				},
				list: [],
				list2: [],
				cate: [{
					"name": "消息",
					id: 1
				}, {
					"name": "点赞和评论",
					id: 2
				}],
				offset: 0,
				isLoading: false,
				hasMore: true,
				pageSize: 20,
				typeMap: {
					1: 'sms',
					2: 'hudong'
				}
			}
		},
		onLoad() {
			this.loadData();
		},
		onShow() {
			this.refreshData();
		},
		onPullDownRefresh() {
			this.refreshData();
		},
		onReachBottom() {
			if (this.hasMore && !this.isLoading) {
				this.loadMore();
			}
		},
		onNavigationBarButtonTap(e) {
			if (e.index === 0) {
				// uni.navigateTo({
				// 	url: '/pages/my/wishList'
				// });
			}
		},
		methods: {
			onBack() {},
			checkTab(tab) {
				this.tab = tab;
				this.refreshData();
			},
			scroll: function(e) {
				console.log(e)
				this.old.scrollTop = e.detail.scrollTop
			},
			goDetail(item) {

			},
			refreshData() {
				this.offset = 0;
				this.hasMore = true;
				if (this.tab === 1) {
					this.list2 = [];
				} else {
					this.list = [];
				}
				this.loadData();
			},
			loadMore() {
				this.offset += this.pageSize;
				this.loadData();
			},
			loadData() {
				if (this.isLoading) return;
				this.isLoading = true;

				const type = this.typeMap[this.tab];
				if (!type) {
					this.isLoading = false;
					return;
				}

				uni.request({
					url: this.$apiHost + '/Sms/getlist',
					method: 'GET',
					data: {
						uuid: getApp().globalData.uuid,
						skey: getApp().globalData.skey,
						type: type,
						offset: this.offset
					},
					header: {
						"content-type": "application/json",
						'sign': getApp().globalData.headerSign
					},
					success: (res) => {
						console.log('xx1', res.data);
						if (res.data && res.data.success == 'yes' && res.data.list) {
							const newData = res.data.list || [];

							if (newData.length < this.pageSize) {
								this.hasMore = false;
							}

							if (this.tab === 1) {
								this.list2 = this.offset === 0 ? newData : [...this.list2, ...newData];
							} else {
								this.list = this.offset === 0 ? newData : [...this.list, ...newData];
							}
						} else {
							this.hasMore = false;
							this.$refs.ToastW3.show('加载失败，请稍后重试');
						}
					},
					fail: () => {
						this.hasMore = false;
						this.$refs.ToastW3.show('网络错误，请检查网络连接');
					},
					complete: () => {
						this.isLoading = false;
						uni.stopPullDownRefresh();
					}
				});
			},
		}
	}
</script>

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