JiangShan-app/pagesB/user/message/index.vue

<template>
	<page-meta>
		<navigation-bar :title="$tt('message.message')" title-align="center" background-color="#3378FE" />
	</page-meta>
	<view class="user-message">
		<view class="nav-tops">
			<view class="sub-wrap">
				<u-subsection :list="tabList" :current="curSub" bgColor=" rgba(255,255,255,0.2)" activeColor="#3378FE"
					inactiveColor="#FFFFFF" @change="handleTabsClick"></u-subsection>
			</view>
		</view>

		<view class="log-content">
			<view class="nav-bar">
				<view v-if="!isSearch" style="margin-right: 20rpx;">
					<u-icon name="search" size="27" @click="isSearch = true"></u-icon>
				</view>
				<view v-else style="width: 100%;">
					<!-- #ifndef APP-NVUE -->
					<u-input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
						v-model="queryParams.noticeTitle" :placeholder="$tt('group.inputContent')" shape="circle"
						@clear="handleClearSearch" clearable>
					<!-- #endif -->
						<!-- #ifdef APP-NVUE -->
						<u--input :customStyle="{ padding: '17rpx 36rpx', background: '#FFFFFF' }"
							v-model="queryParams.noticeTitle" :placeholder="$tt('group.inputContent')" shape="circle"
							@clear="handleClearSearch" clearable>
						<!-- #endif -->
							<template slot="prefix">
								<u-icon name="search" color="rgb(192, 196, 204)" size="26"
									@click="isSearch = false"></u-icon>
							</template>
							<template slot="suffix">
								<view style="display: flex; flex-direction: row; align-items: center;">
									<span
										style="width: 0px; height: 14px; border: 1px solid #000000; opacity: 0.1;"></span>
									<span style="font-size: 14px; font-weight: 400; color: #3378FE; margin-left: 24rpx;"
										@click="handleSearch">{{$tt('common.search')}}</span>
								</view>
							</template>
					<!-- #ifndef APP-NVUE -->
					</u-input>
					<!-- #endif -->
					<!-- #ifdef APP-NVUE -->
					</u--input>
					<!-- #endif -->
				</view>
			</view>
			<scroll-view v-show="total !== 0" class="data-list" :scroll-y="true" @refresherrefresh="handleRefresher"
				:refresher-enabled="true" :refresher-triggered="isTriggeredTop" refresher-background="#F1F3F9"
				@scrolltolower="handleScrollToLower">
				<view class="item-wrap" v-for="(item, index) in datas" :key="index" @click="handleGotoDetail(item)">
					<view class="title">
						<view class="name">{{item.noticeTitle}}</view>
						<view class="status">
							{{ getNoticeTypeDisplay(item) }}
						</view>
					</view>
					<view class="describe">
						<view class="item">{{$tt('message.creator')}}：{{item.createBy}}</view>
						<view class="item">{{$tt('message.creationTime')}}：{{item.createTime}}</view>
					</view>
					<view class="tools" v-if="item.status === 2">
						<view class="btn"><u-button type="primary" size="mini" :text="$tt('alert.process')"></u-button>
						</view>
					</view>
				</view>
				<u-loadmore :status="loadmoreStatus" v-if="total > queryParams.pageSize" marginTop="20" />
			</scroll-view>
			<u-empty mode="list" :show="total === 0 && isTriggeredTop === false" marginTop="60"></u-empty>
		</view>
		<u-loading-page :loading="loading" bg-color="rbga(0,0,0,0)" loadingText="fastbee.cn"></u-loading-page>
	</view>
</template>

<script>
	import { getNoticeList } from '@/apis/modules/notice';

	export default {
		data() {
			return {
				isSearch: true,
				loading: false,
				isTriggeredTop: false,
				// tabs列表
				curSub: 0,
				tabList: [{
					name: this.$tt('message.all'),
				}, {
					name: this.$tt('message.inform'),
				}, {
					name: this.$tt('message.notice'),
				}],
				queryParams: {
					noticeType: null,
					pageNum: 1,
					pageSize: 5,
				},
				datas: [],
				total: 0, // 总条数
				loadmoreStatus: 'loadmore',
			};
		},
		mounted() {
			this.queryParams.pageNum = 1;
			this.getDatas();
		},
		methods: {
			// 获取列表数据
			getDatas() {
				this.loading = true;
				getNoticeList(this.queryParams).then(res => {
					const { code, rows, total } = res;
					if (code === 200) {
						if (this.queryParams.pageNum === 1) {
							this.datas = rows;
						} else {
							this.datas = this.datas.concat(rows);
						}
						this.total = total;
					}
					this.loading = false;
					uni.stopPullDownRefresh();
				});
			},
			// 单击查询
			handleTabsClick(index) {
				this.curSub = index;
				this.queryParams.noticeType = index === 0 ? null : index;
				this.datas = [];
				this.queryParams.pageNum = 1;
				this.getDatas();
			},
			// 搜索
			handleSearch(value) {
				this.datas = [];
				this.queryParams.pageNum = 1;
				this.getDatas();
			},
			handleClearSearch() {
				this.handleSearch();
			},
			// 跳转到详情
			handleGotoDetail(item) {
				uni.navigateTo({
					url: '/pagesB/user/message/detail?noticeId=' + item.noticeId
				});
			},
			// 获取通知类型显示
			getNoticeTypeDisplay(item) {
				const { noticeType } = item;
				if (noticeType === '1') {
					return this.$tt('message.inform');
				} else if (noticeType === '2') {
					return this.$tt('message.notice');
				}
			},
			// 下拉刷新
			handleRefresher() {
				this.isTriggeredTop = true;
				this.datas = [];
				this.total = 0;
				this.queryParams.pageNum = 1;
				setTimeout(() => {
					this.getDatas();
					this.isTriggeredTop = false;
				}, 500)
			},
			// 上拉加载
			handleScrollToLower() {
				this.loadmoreStatus = 'loading';
				this.queryParams.pageNum = this.queryParams.pageNum + 1;
				if ((this.queryParams.pageNum - 1) * this.queryParams.pageSize >= this.total) {
					this.loadmoreStatus = 'nomore';
				} else {
					this.getDatas();
					this.loadmoreStatus = 'loadmore';
				}
			},
		}
	};
</script>

<style lang="scss" scoped>
	.user-message {
		// #ifdef MP-WEIXIN
		height: 100vh;
		// #endif
		// #ifdef H5
		height: calc(100vh - 88rpx);
		// #endif
		// #ifdef APP-PLUS
		height: 100vh;
		// #endif
		display: flex;
		flex-direction: column;
		overflow-y: hidden;

		.nav-tops {
			height: 17.28rem;
			background-color: $uni-color-primary;
			background-size: 100% 100%;
			z-index: 0;
			flex-shrink: 0;


			.sub-wrap {
				width: 60%;
				padding: 32rpx 34rpx;

				::v-deep .u-subsection--button {
					height: 68rpx;
					padding: 8rpx;
				}
			}

			.bg {
				position: absolute;
				top: 0;
				left: 0;
				width: 100%;
				height: 100%;
				overflow: hidden;
				z-index: 0;

				image {
					width: 100%;
					height: 100%;
					filter: blur(3px);
					opacity: 0.3;
				}
			}
		}

		.log-content {
			flex: 1 1 auto;
			background: $uni-bg-color-grey;
			margin-top: -13.653rem;
			z-index: 1;
			border-top-left-radius: 10px;
			border-top-right-radius: 10px;
			padding: 36rpx 30rpx;
			display: flex;
			flex-direction: column;
			overflow-y: auto;

			.nav-bar {
				margin-bottom: 2rpx;
			}

			.data-list {
				flex: 1 1 auto;
				overflow-y: auto;
				margin-top: 2rpx;
				padding-bottom: 24rpx;

				.item-wrap {
					border-radius: 20rpx;
					padding: 10rpx 20rpx;
					background-color: #ffffff;
					margin-top: 26rpx;

					.title {
						position: relative;
						display: flex;
						flex-direction: row;
						justify-content: space-between;
						align-items: center;
						border-bottom: 1px solid #eaecef;
						padding: 20rpx 0;

						.name {
							flex: 1;
							font-size: 32rpx;
							margin-right: 20rpx;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}

						.status {
							position: absolute;
							right: -20rpx;
							top: -10rpx;
							width: 64px;
							height: 24px;
							background: #486FF2;
							font-weight: 400;
							font-size: 20rpx;
							color: #FFFFFF;
							line-height: 28rpx;
							font-style: normal;
							display: flex;
							flex-direction: column;
							justify-content: center;
							align-items: center;
							border-top-right-radius: 20rpx;
							border-bottom-left-radius: 20rpx;
						}
					}

					.describe {
						padding: 10rpx 0;

						.item {
							display: flex;
							margin: 16rpx 0;
							width: 100%;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
							font-size: 28rpx;
							line-height: 20px;
						}
					}

					.tools {
						display: flex;
						flex-direction: row;
						justify-content: flex-end;
						margin-bottom: 10rpx;
					}
				}
			}
		}
	}
</style>