RentWeAppFront/pages-assets/fallback/fallback.vue

<template>
	<view class="page-view">
		<!-- 顶部导航栏 -->
		<customNavbar title="留言板" :is-transparent="navbarStyle.isTransparent" :bg-color="navbarStyle.bgColor"
			:text-color="navbarStyle.textColor" :opacity="navbarStyle.opacity" :show-home="true" />

		<!-- 留言列表 -->
		<scroll-view scroll-y="true" class="scroll-view" @scrolltolower="loadMore" @refresherrefresh="refresh"
			:refresher-enabled="true" :refresher-triggered="isRefreshing">
			<view class="message-item" v-for="(item, index) in flowList" :key="index" @click="navigateToDetail(item)">
				<view class="message-header">
					<text :class="['status-tag', item.status]">{{ item.statusText }}</text>
					<text class="message-title">留言内容</text>
				</view>
				<view class="message-content">
					<text class="content-text">{{ item.content }}</text>
				</view>
				<view class="message-footer">
					<text class="message-time">留言时间：{{ item.summitDate }}</text>
				</view>
			</view>
		</scroll-view>

		<!-- 底部新增留言按钮 -->
		<view class="add-btn-container">
			<button class="add-btn" @click="goToSubmit()">新增留言</button>
		</view>
		<!-- 新增留言弹窗 -->
		<u-popup v-model="showAddPopup" mode="center" length="60%">
			<view class="popup-content">
				<textarea v-model="newMessageContent" placeholder="请输入留言内容" class="textarea" />
				<button class="popup-btn" @click="addFallback()">提交留言</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showAddPopup: false,
				newMessageContent: '',
				flowList: [],
				// 导航栏样式控制
				navbarStyle: {
					isTransparent: true,
					bgColor: '#ffffff',
					textColor: '#000000',
					opacity: 0
				},
				loadStatus: 'loadmore',
				isRefreshing: false,
				// 滚动距离
				scrollTop: 0
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			// 计算导航栏透明度和样式
			this.updateNavbarStyle(e.scrollTop);
		},
		onShow() {
			this.$checkToken(this.$getToken())
		},
		onLoad() {
			this.fetchFallback();
		},
		methods: {
			// 点击留言项跳转到详情页
			navigateToDetail(item) {
				uni.navigateTo({
					url: `/pages-assets/fallback/fallbackDetail?id=${item.id}`,
				});
			},
			fetchFallback() {
				if (this.loadStatus !== 'loadmore') return;
				this.loadStatus = 'loading';
				let token = this.$getToken()
				let url = '/fallback/queryPage'
				this.$u.post(url, {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}, {
					WT: token
				}).then(res => {
					const rows = res.data.result || [];
					console.log(rows)
					if (this.pageNo === 1) this.flowList = [];
					this.flowList = this.flowList.concat(rows)
					if (rows.length < this.pageSize) {
						this.loadStatus = 'nomore';
					} else {
						this.pageNo++;
						this.loadStatus = 'loadmore';
					}
				}).catch(err => {
					console.log("获取留言信息失败：", err)
					this.loadStatus = 'loadmore';
				})
			},
			loadMore() {
				// 只有在 loadStatus 为 'loadmore' 时才触发
				if (this.loadStatus !== 'loadmore') return;
				this.fetchReserve()
			},
			goToSubmit() {
				this.showAddPopup = true;
			},
			addFallback() {
				const content = this.newMessageContent.trim();
				if (!content) {
					uni.showToast({
						title: '请输入留言内容',
						icon: 'none'
					});
					return;
				}
				const token = this.$getToken();
				this.$u.post('/fallback/submit', {
						content
					}, {
						WT: token
					})
					.then(res => {
						uni.showToast({
							title: '留言成功',
							icon: 'success'
						});
						this.showAddPopup = false;
						this.newMessageContent = '';
						this.refresh();
					})
					.catch(err => {
						console.error('新增留言失败：', err);
						uni.showToast({
							title: '留言失败',
							icon: 'none'
						});
							this.showAddPopup = false;
					});
			},
			refresh() {
				this.isRefreshing = true;
				setTimeout(() => {
					this.isRefreshing = false;
				}, 1000);
			},
			// 根据滚动距离更新导航栏样式
			updateNavbarStyle(scrollTop) {
				// 定义滚动阈值，超过此值导航栏变为不透明
				const threshold = 200;
			
				// 计算透明度
				let opacity = scrollTop / threshold;
				opacity = Math.min(opacity, 1);
				opacity = Math.max(opacity, 0);
			
				// 更新导航栏样式
				this.navbarStyle.opacity = opacity;
			
				if (opacity > 0.5) {
					this.navbarStyle.isTransparent = false;
				} else {
					this.navbarStyle.isTransparent = true;
				}
			}
		}
		
	}
</script>

<style scoped>
	.page-view {
		/* 给导航栏留空间 */
		padding-top: 175rpx;
		min-height: 100vh;
		position: relative;
		background: linear-gradient(0deg, #F3F1ED 43%, #F5E9DB 100%);
	}

	.scroll-view {
		height: calc(100vh - 120rpx - 120rpx);
		padding: 5% 0;
	}

	.message-item {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 32rpx;
		padding-left: 95rpx;
		width: 92%;
		margin: auto;
		margin-bottom: 20rpx;
	}

	.message-header {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;
	}

	.status-tag {
		font-size: 24rpx;
		padding: 6rpx 16rpx;
		border-radius: 21rpx;
		margin-right: 20rpx;
		color: #ffffff;
		position: absolute;
		left: 10rpx;
	}

	.status-tag.processed {
		background: linear-gradient(90deg, #F34038 0%, #FF7C76 100%);
		box-shadow: 0rpx 0rpx 7rpx 0rpx #FB392A;
	}

	.status-tag.processing {
		background: linear-gradient(90deg, #FEAF04 0%, #FFC145 100%);
		box-shadow: 0rpx 0rpx 7rpx 0rpx #FFBF41;
	}

	.status-tag.pending {
		background: linear-gradient(90deg, #6688FC 0%, #809BFB 100%);
		box-shadow: 0rpx 0rpx 7rpx 0rpx #7E99FB;
	}

	.message-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #2D2B2C;
	}

	.message-content {
		margin-bottom: 20rpx;
	}

	.content-text {
		font-size: 24rpx;
		color: #86868C;
		line-height: 44rpx;
	}

	.message-time {
		font-size: 24rpx;
		color: #ADADB1;
	}

	.add-btn-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 40rpx;
		background-color: #f5f5f5;
		box-shadow: 0 -2rpx 12rpx rgba(0, 0, 0, 0.05);
	}

	.add-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 32rpx;
		border: none;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	/* 弹窗样式 */
	.popup-content {
		border-radius: 8rpx;
		padding: 20rpx;
	}

	.popup-content .textarea {
		width: 100%;
		min-height: 400rpx;
		padding: 14rpx 20rpx;
		border-radius: 8rpx;
		background: #fff;
		color: #333;
	}

	.popup-btn {
		margin-top: 20rpx;
		width: 100%;
		height: 60rpx;
		background: #FF6F63;
		color: #fff;
		border-radius: 8rpx;
		font-size: 30rpx;
	}
</style>