MoeNovaClient/pages/message/mailMessage.vue

<template>
	<view class="page"
		:style="{ background: tab == 1 ? '#f2f6f2' : '#ffffff', borderWidth: tab == 2 ? '2rpx' : 'none' }">
		<view class="mainBody">
			<!-- <scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll" scroll-left="0"> -->
			<view class="tabs">
				<view class="tab" :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>
			</view>
			<!-- </scroll-view> -->
		</view>
		<view class="reserveASeat"></view>
		<view class="list_info" v-if="tab === 2">
			<template v-if="offset">

				<view class="item" @click="goDetail(item)" v-for="(item, index) in list" :key="index">

					<CircleAvatar class="avator" :src="item.avator"></CircleAvatar>

					<view class="content">
						<view class="tit">
							<view class="name">{{ item.nickname }}</view>
							<view class="time one-omit">
								{{ item.title }}
								<!--  {{ item.create_time }} -->
								{{ ' ' + item.tdate }}
							</view>
							<view class="desc">{{ item.content }} </view>
						</view>
						<view class="right-image">
							<image class="works-image" mode="widthFix" v-if="item.image" :src="formatImage(item.image)">
							</image>
							<image class="right-image-icon" v-else src="@/static/me/arrow_right_gray.png">
							</image>
						</view>
					</view>
					<view class="line"></view>
				</view>


				<view class="blankHeight"></view>
				<view class="loading-more" v-if="tab === 2">
					<text v-if="isLoading">正在加载更多...</text>
					<view v-else-if="!hasMore">
						<text>无更多内容</text>
					</view>
				</view>
			</template>
			<template v-else-if="!isLoading">
				<view class="noData">
					<image src="@/static/icon/xx_img_zanwuxiaoxi.png"></image>
					<text class="tips-title"> 暂无内容</text>
					<text class="tips-content">
						点赞还在赶来的路上，别着急，你的精彩值得被看见</text>
				</view>
			</template>
		</view>

		<view class="list_article" v-if="tab === 1">
			<template v-if="offset">
				<block v-for="(item, index) in list2" :key="index">
					<view class="items" @click="goDetail(item)">
						<view class="dateAndTime">{{ item.create_time }}</view>
						<view class="items-content">
							<image v-if="item.image" :src="item.image || '../../static/dome/home-swper.png'"
								mode="widthFix"></image>
							<view class="title one-omit">{{ item.title }} </view>
							<view class="content">{{ item.content }}</view>
							<view class="viewDetails" v-if="item.article_id != 0">
								<text>查看详情</text>
								<image src="../../static/me/wd_icon_jiantou2.png"></image>
							</view>
							<view v-else style="width: 100%; height: 20rpx;"></view>
						</view>
					</view>
				</block>
				<view class="blankHeight"></view>
				<view class="loading-more" v-if="tab === 1">
					<text v-if="isLoading">正在加载更多...</text>
					<view v-else-if="!hasMore">
						<text>暂无更多消息</text>
					</view>
				</view>
			</template>
			<template v-else-if="!isLoading">
				<view class="noData">
					<image src="@/static/icon/xx_img_zanwuxiaoxi.png"></image>
					<text class="tips-title"> 暂无消息</text>
					<text class="tips-content">
						消息还在 "放假"，等它们元气满满回来</text>
				</view>
			</template>
		</view>

		<!-- 客服消息 -->
		<view class="customer-service-message" v-if="tab === 3">
			<template v-if="true || offset">
				<block v-for="(item, index) in list3" :key="index">
					<view class="msg-card"   @click="goPages('/pages/crowdFunding/customerService?id='+item.id)">
						<image class="avatar" :src="item.avatar" />
						<view class="msg-main">
							<view class="msg-header">
								<text class="nickname">{{ item.nickname }}</text>
								<text class="tag" v-if="item.tag">{{ item.tag }}</text>
								<text class="time">{{ item.create_time }}</text>
							</view>
							<view class="msg-content">{{ item.content }}</view>
						</view>
						<view v-if="item.quantity >0" class="red-dot">{{ item.quantity }}</view>
					</view>
				</block>
				<view class="blankHeight"></view>
				<view class="loading-more" v-if="tab === 3">
					<text v-if="isLoading">正在加载更多...</text>
					<view v-else-if="!hasMore">
						<text>暂无更多消息</text>
					</view>
				</view>
			</template>
			<template v-else-if="!isLoading">
				<view class="noData">
					<image src="@/static/icon/xx_img_zanwuxiaoxi.png"></image>
					<text class="tips-title"> 暂无消息</text>
					<text class="tips-content">
						消息还在 "放假"，等它们元气满满回来</text>
				</view>
			</template>
		</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,
				}, {
					name: "客服消息",
					id: 3,
				},
			],
			offset: 0,
			isLoading: false,
			hasMore: true,
			pageSize: 20,
			typeMap: {
				1: "sms",
				2: "hudong",
			},
			list3: [
				{
					avatar: '../../static/home/avator.png',
					nickname: '雾里',
					tag: '发起人',
					create_time: '17:10',
					content: '谢谢你的关注，远方的陌生人',
					quantity: 1	
				},{
					avatar: '../../static/home/avator.png',
					nickname: '雾里',
					tag: '发起人',
					create_time: '17:10',
					content: '谢谢你的关注，远方的陌生人',
					quantity: 0	
				},{
					avatar: '../../static/home/avator.png',
					nickname: '雾里',
					tag: '发起人',
					create_time: '17:10',
					content: '谢谢你的关注，远方的陌生人',
					quantity: 9	
				},
			],  
		};
	},
	onLoad() {
		this.loadData();
	},
	onShow() {
		this.refreshData();
	},
	onPullDownRefresh() {
		this.refreshData();
	},
	onReachBottom() {
		if (this.hasMore && !this.isLoading) {
			this.loadMore();
		};
	},
	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: {
		 goPages(url){
			console.log(url, 'url');
			
			uni.navigateTo({
				url,
			})
		 },
		onBack() { },
		checkTab(tab) {
			this.tab = tab;
			this.refreshData();
		},
		scroll: function (e) {
			console.log(e);
			this.old.scrollTop = e.detail.scrollTop;
		},
		goDetail(item) {
			if (item.article_del == 1) {
				uni.showToast({
					title: '该文章已删除',
					icon: 'none'
				});
				return;
			}
			let url = '';

			switch (item.type) {
				case 'sms':
					url = `/pages/index/articleDetail?id=${item.article_id}&type=sms`
					break;
				case 'work':
					url = `/pages/index/workDetail?sms_id=${item.id}&id=${item.article_id}&type=work`
					break;
				case 'article':
					url = `/pages/index/articleDetail?sms_id=${item.id}&id=${item.article_id}&type=article`
					break;
			}
			console.log(url, 'url');
			if (item.article_id != 0) {
				uni.navigateTo({
					url,
				})
			}


		},
		refreshData() {
			this.offset = 0;
			this.hasMore = true;
			if (this.tab === 1) {
				this.list2 = [];
				this.bgColor = "#f2f6f2";
			} else {
				this.bgColor = "#ffffff";
				this.list = [];
				if (!this.isLoading) {
					this.bgColor = "#f2f6f2";
				}
			}

			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];
						}
						this.offset += res.data.list.length;
					} else {
						this.hasMore = false;
						this.$refs.ToastW3.show("加载失败，请稍后重试");
					}
				},
				fail: () => {
					this.hasMore = false;
					this.$refs.ToastW3.show("网络错误，请检查网络连接");
				},
				complete: () => {
					this.isLoading = false;
					uni.stopPullDownRefresh();
				},
			});
		},
		dateFormat(date) {
			if (!date) {
				return "";
			}
			// 将日期字符串转换为 Date 对象
			try {
				const dateObj = new Date(date);
			} catch (error) {
				const dateObj = new Date();
			}
			// 格式化年份、月份、日期、小时和分钟
			const year = dateObj.getFullYear();
			const month = String(dateObj.getMonth() + 1).padStart(2, "0");
			const day = String(dateObj.getDate()).padStart(2, "0");
			const hours = String(dateObj.getHours()).padStart(2, "0");
			const minutes = String(dateObj.getMinutes()).padStart(2, "0");
			// 返回格式化后的字符串
			return `${year}.${month}.${day} ${hours}:${minutes}`;
		},
		formatImage(url) {
			if (url) {
				return url.split("|")[0];
			}
		},
	},
};
</script>

<style scoped lang="scss">
@import "mailMessage.scss";
.msg-card {
  transition: box-shadow 0.2s, background 0.2s, transform 0.1s;
}
.msg-card:active,
.msg-card-active {
  background: #f5f5f5 !important;
  transform: scale(0.97);
  box-shadow: 0 2rpx 16rpx rgba(172,249,52,0.10);
}
</style>