web-store-retail-h5/pages/email/index.vue

<template>
	<view class="content">
		<cl-tabbar :current="1">

		</cl-tabbar>
		<view class="tab">
			<view v-for="(item, index) in tabList" :key="index" @click="isTab = item.value" class="tab_i"
				:class="[isTab===item.value?'heng':'heng1']">
				{{ item.label }}({{item.num}})
			</view>
		</view>
		<template v-if="tableData.length>0">
			<view class="contentList" v-for="item,index in tableData" :key="index">
				<view class="flex_list">
					<view>
						<image v-if="isTab==1" class="email_icon" src="../../static/images/email1.png" mode=""></image>
						<image v-if="isTab==2" class="email_icon" src="../../static/images/email2.png" mode=""></image>
						<image v-if="isTab==3" class="email_icon" src="../../static/images/email3.png" mode=""></image>
					</view>
					<view class="right_content">
						<template v-if="isTab==1||isTab==2">
							<view class="email_top">
								<view class="etit1" v-if="isTab==1">{{ '平台公告' }}</view>
								<view class="etit1" v-if="isTab==2">{{ '站内信' }}</view>
								<view class="etit2">{{item.creationTime}}</view>
							</view>
							<view class="email_title">
								{{item.title}}
							</view>
							<view class="email_neir" @click="clickhtml(item.content)" v-html="item.content">

							</view>

							<view class="email_find" @click="goDetail(isTab,item.pkId)">
								{{ '查看详情' }} >
							</view>
						</template>
						<template v-if="isTab==3">
							<view class="email_top2">
								<view class="etit1">{{item.idea}}</view>
								<div v-if="item.type==1" class="kuang thetype1">{{ item.typeVal }}</div>
								<div v-if="item.type==2" class="kuang thetype2">{{ item.typeVal }}</div>
								<div v-if="item.type==3" class="kuang thetype3">{{ item.typeVal }}</div>
								<div v-if="item.type==4" class="kuang thetype4">{{ item.typeVal }}</div>
							</view>
							<view class="etit3">{{item.creationTime}}</view>

							<view v-for="(aitem,aindex) in item.feedbackReplyList" :key="aindex">
								<view class="email_title2">
									{{ '系统回复' }}：
								</view>
								<view class="email_neir" @click="clickhtml(aitem.replyContent)"
									v-html="aitem.replyContent">

								</view>
								<view class="etit3">{{aitem.creationTime}}</view>
							</view>
						</template>
					</view>
				</view>
			</view>
		</template>
		<u-empty v-else :text="'暂无信息'" mode="message" icon="http://cdn.uviewui.com/uview/empty/message.png">
		</u-empty>
	</view>
</template>

<script>
	import clTabbar from '@/components/cl-tabbar.vue'
	import * as ema from '@/config/balance.js'
	export default {
		components: {
			'cl-tabbar': clTabbar,
		},
		data() {
			return {
				tabList: [{
					value: 1,
					label: '平台公告',
					num: 0,
				}, {
					value: 2,
					label:  '站内信',
					num: 0
				}, {
					value: 3,
					label:  '意见反馈',
					num: 0
				}],
				isTab: 1,
				tableData: [],
			}
		},
		watch: {
			isTab(n, o) {
				this.getDataList()
			},
		},
		onLoad() {
			uni.$on('tabChange', (isTab) => {
				if (isTab === 3) {
					// 从意见反馈跳转过来，isTab为3
					this.isTab = 3
				} else {
					// 初始进入页面时将isTab设置为1
					this.isTab = 1
				}
			});
			this.getDataList();
		},
		onUnload() {
			// 取消监听
			// uni.$off('isTab');
			uni.removeStorageSync('isTab');
		},

		onShow() {

			this.getOthers()
		},
		methods: {
			clickhtml(content) {
				// 在组件挂载后，调用handleImageClick方法预览第一张图片
				const parser = new DOMParser();
				const doc = parser.parseFromString(content, "text/html");
				const imgElements = doc.getElementsByTagName("img");
				if (imgElements.length > 0) {
					const firstImageUrl = imgElements[0].src;
					this.handleImageClick(firstImageUrl, content);
				}
			},
			handleImageClick(url, content) {
				uni.previewImage({
					urls: this.getUrls(content),
					current: url
				});
			},
			getUrls(content) {
				const parser = new DOMParser();
				const doc = parser.parseFromString(content, "text/html");
				const imgElements = doc.getElementsByTagName("img");
				const urls = [];
				for (let i = 0; i < imgElements.length; i++) {
					urls.push(imgElements[i].src);
				}
				return urls;
			},
			goDetail(index, pkId) {
				if (index == 1) {
					uni.navigateTo({
						url: '/pages/email/noticeDetail?index=' + index + '&pkId=' + pkId
					})
				} else if (index == 2) {
					uni.navigateTo({
						url: '/pages/email/emailDetail?index=' + index + '&pkId=' + pkId
					})
				}
			},
			getOthers() {
				ema.getNoticeCount().then(res => {
					this.tabList.forEach(ele => {
						if (ele.value == 1) {
							ele.num = res.data.noticeNum
						} else if (ele.value == 2) {
							ele.num = res.data.stationNum
						} else if (ele.value == 3) {
							ele.num = res.data.feedbackNum
						}
					})
				})
			},
			getDataList() {
				if (this.isTab == 1 || this.isTab == 2) {
					//公告1 站内信2
					ema.getNoticeList({
						functionType: this.isTab
					}).then(res => {
						this.tableData = res.rows;
					})
				} else if (this.isTab == 3) {
					//意见列表
					ema.getFeedbackList().then(res => {
						this.tableData = res.rows;
					})
				}
			}
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep img {
		max-width: 100%;
		height: auto;
	}

	.content {
		background: #F2F2F2;
		// height: 100vh;
		padding-bottom: 140rpx;

		.tab {
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-bottom: 6rpx;
			background-color: #FFFFFF;

			.tab_i {
				text-align: center;
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: 400;
				color: #333333;
				white-space: nowrap;
				display: flex;
				flex-direction: column;
				align-items: center;
				padding: 24rpx 0;
				// background-color: pink;

			}

			.heng {
				border-bottom: 6rpx solid #FB3024;
				color: #FB3024;

			}

			.heng {
				color: #333333;
			}

		}

		.contentList {
			margin: 30rpx 24rpx 0 23rpx;
			background-color: #ffffff;
			padding: 40rpx 28rpx;
			box-shadow: 0px 5rpx 5rpx 0px rgba(0, 0, 0, 0.05);
			border-radius: 15rpx;

			.flex_list {
				display: flex;

				.email_icon {
					width: 42rpx;
					height: 42rpx;
					border-radius: 50%;
				}

				.right_content {
					width: 95%;

					// flex: 1;
					.email_top {
						display: flex;
						align-items: center;
						justify-content: space-between;

						.etit1 {
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #222222;
						}

						.etit2 {
							font-size: 22rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #999999;
						}
					}

					.email_top2 {
						display: flex;
						align-items: center;

						.etit1 {
							font-size: 26rpx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							color: #222222;
						}

						.kuang {
							border-radius: 5rpx;
							// border: 2rpx solid #e25a60;
							font-size: 16rpx;
							padding: 5rpx;
							// color: #e25a60;
							margin-left: 16rpx;
						}

						.thetype1 {
							color: #1aa90e;
							border: 2rpx solid #1aa90e;
						}

						.thetype2 {
							color: #D61820;
							border: 2rpx solid #D61820;
						}

						.thetype3 {
							color: #FDA521;
							border: 2rpx solid #FDA521;
						}

						.thetype4 {
							color: #1B8DDF;
							border: 2rpx solid #1B8DDF;
						}


					}

					.etit3 {
						font-size: 22rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}

					.email_title {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #222222;
						margin: 23rpx 0;
					}

					.email_title2 {
						font-size: 28rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #07609F;
						margin-top: 30rpx;
					}

					.email_neir {
						font-size: 24rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #666666;
						// overflow: auto;


					}

					.email_find {
						margin-top: 25rpx;
						font-size: 22rpx;
						font-family: Source Han Sans CN;
						font-weight: 400;
						color: #999999;
					}
				}
			}
		}
	}
</style>