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 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>
			<u-loadmore :status="loadStatus" />
		</scroll-view>

		<view class="add-btn-container">
			<button class="add-btn" @click="goToSubmit()">新增留言</button>
		</view>

		<!-- 修复后的弹窗 -->
		<u-popup v-model="showAddPopup" mode="center">
			<view class="popup-content">
				<view class="asset-select" @click="openAssetPopup">
					<text class="select-text">{{selectedAsset.assetsName || '请选择资产'}}</text>
					<u-icon name="arrow-right" size="26" color="#999"></u-icon>
				</view>

				<textarea v-model="newMessageContent" placeholder="请输入留言内容" class="textarea" />

				<button class="popup-btn" @click="addFallback()">提交留言</button>
			</view>
		</u-popup>

		<u-popup v-model="showAssetPopup" mode="bottom">
			<view class="asset-popup-wrap">
				<view class="popup-title">选择资产</view>
				<scroll-view scroll-y class="asset-list">
					<view class="asset-item" v-for="item in assetsList" :key="item.assetsNo" @click="selectAsset(item)">
						{{ item.assetsName }}
					</view>
				</scroll-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				showAddPopup: false,
				newMessageContent: '',
				flowList: [],
				pageNo: 1,
				pageSize: 10,
				navbarStyle: {
					isTransparent: true,
					bgColor: '#ffffff',
					textColor: '#000000',
					opacity: 0
				},
				loadStatus: 'more',
				isRefreshing: false,
				scrollTop: 0,
				showAssetPopup: false,
				assetsList: [],
				selectedAsset: null
			}
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop;
			this.updateNavbarStyle(e.scrollTop);
		},
		onShow() {
			this.$checkToken(this.$getToken())
			this.checkOaAuth()
		},
		onLoad() {
			this.fetchFallback();
		},
		methods: {
			checkOaAuth() {
				const token = this.$getToken()
				if (!token) return
				const userInfo = uni.getStorageSync('userInfo')
				if (!userInfo || !userInfo.oaAuth) {
					uni.showModal({
						title: '提示',
						content: '您还未实名认证，请先完成实名认证',
						showCancel: false,
						confirmText: '去认证',
						success: () => {
							uni.redirectTo({ url: '/pages-biz/profile/profile' })
						}
					})
				}
			},
			navigateToDetail(item) {
				uni.navigateTo({
					url: "/pages-assets/fallback/fallbackDetail?id=" + item.id
				});
			},
			openAssetPopup() {
				this.showAssetPopup = true;
				this.getAssetsList();
			},
			getAssetsList() {
				this.$u.post('/assets/queryPage', {
					pageNo: 1,
					pageSize: 100
				}, {
					WT: this.$getToken()
				}).then(res => {
					this.assetsList = res.data.result || [];
				}).catch(err => {
					console.log("获取资产失败", err);
				})
			},
			selectAsset(item) {
				this.selectedAsset = item;
				this.showAssetPopup = false;
			},
			fetchFallback() {
				if (this.loadStatus !== 'more') return;
				this.loadStatus = 'loading';
				this.$u.post('/fallback/queryPage', {
					pageNo: this.pageNo,
					pageSize: this.pageSize
				}, {
					WT: this.$getToken()
				}).then(res => {
					const rows = res.data.result || [];
					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 = 'more';
					}
				}).catch(err => {
					console.log("获取留言失败", err)
					this.loadStatus = 'more';
				})
			},
			loadMore() {
				if (this.loadStatus !== 'more') return;
				this.fetchFallback()
			},
			goToSubmit() {
				this.showAddPopup = true;
				this.selectedAsset = null;
				this.newMessageContent = '';
			},
			addFallback() {
				const content = this.newMessageContent.trim();
				const token = this.$getToken()
				if (!token) {
					uni.showToast({ title: '请先登录', icon: 'none' });
					return
				}
				let userInfo = uni.getStorageSync('userInfo');
				if(!userInfo || !userInfo.cusNo) {
					uni.showToast({ title: '您还未实名', icon: 'none' });
					return;
				}
				if (!this.selectedAsset) {
					uni.showToast({ title: '请选择资产', icon: 'none' });
					return;
				}
				if (!content) {
					uni.showToast({ title: '请输入留言内容', icon: 'none' });
					return;
				}
				this.$u.post('/fallback/submit', {
					content: content,
					assetsNo: this.selectedAsset.assetsNo
				}, {
					WT: this.$getToken()
				}).then(res => {
					uni.showToast({ title: '留言成功', icon: 'success' });
					this.showAddPopup = false;
					this.refresh();
				}).catch(err => {
					uni.showToast({ title: '提交失败', icon: 'none' });
					this.showAddPopup = false;
				});
			},
			refresh() {
				this.isRefreshing = true;
				this.pageNo = 1;
				this.flowList = [];
				this.loadStatus = 'more';
				this.fetchFallback();
				setTimeout(()=>{
					this.isRefreshing = false;
				},800)
			},
			updateNavbarStyle(scrollTop) {
				const threshold = 200;
				let opacity = scrollTop / threshold;
				opacity = Math.min(opacity, 1);
				opacity = Math.max(opacity, 0);
				this.navbarStyle.opacity = opacity;
				this.navbarStyle.isTransparent = opacity <= 0.5;
			}
		}
	}
</script>

<style scoped>
	.page-view {
		padding-top: 175rpx;
		min-height: 100vh;
		position: relative;
		background: linear-gradient(0deg, #F3F1ED 43%, #F5E9DB 100%);
		box-sizing: border-box;
	}
	.scroll-view {
		height: calc(100vh - 175rpx - 140rpx);
		padding: 5% 0;
		box-sizing: border-box;
	}
	.message-item {
		background-color: #ffffff;
		border-radius: 10rpx;
		padding: 32rpx;
		padding-left: 95rpx;
		width: 92%;
		margin: auto;
		margin-bottom: 20rpx;
		position: relative;
	}
	.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%);
	}
	.status-tag.processing {
		background: linear-gradient(90deg, #FEAF04 0%, #FFC145 100%);
	}
	.status-tag.pending {
		background: linear-gradient(90deg, #6688FC 0%, #809BFB 100%);
	}
	.message-title {
		font-size: 30rpx;
		font-weight: 500;
		color: #2D2B2C;
	}
	.content-text {
		font-size: 24rpx;
		color: #86868C;
		line-height: 44rpx;
	}
	.message-time {
		font-size: 24rpx;
		color: #ADADB1;
	}

	/* 核心修复：弹窗宽度与排版 */
	.popup-content {
		background: #fff;
		padding: 30rpx;
		border-radius: 8rpx;
		width: 70%; /* 扩大弹窗宽度，避免文字竖排 */
		min-width: 400rpx;
	}
	.asset-select {
		padding: 20rpx;
		background: #f7f7f7;
		border-radius: 8rpx;
		font-size: 28rpx;
		margin-bottom: 20rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		white-space: nowrap; /* 强制文字不换行 */
	}
	.select-text {
		color: #999;
	}
	.textarea {
		width: 100%;
		min-height: 200rpx;
		padding: 20rpx;
		background: #f7f7f7;
		border-radius: 8rpx;
		font-size: 28rpx;
		box-sizing: border-box;
	}
	.popup-btn {
		margin-top: 20rpx;
		width: 100%;
		height: 80rpx;
		background: #FF6F63;
		color: #fff;
		border-radius: 8rpx;
		font-size: 30rpx;
		border: none;
		white-space: nowrap; /* 按钮文字不换行 */
	}

	.asset-popup-wrap {
		padding: 30rpx;
		background: #fff;
	}
	.popup-title {
		font-size: 32rpx;
		font-weight: 500;
		text-align: center;
		margin-bottom: 20rpx;
	}
	.asset-list {
		max-height: 400rpx;
	}
	.asset-item {
		padding: 24rpx;
		font-size: 28rpx;
		border-bottom: 1rpx solid #f0f0f0;
	}

	.add-btn-container {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		padding: 30rpx 40rpx;
		background-color: #f5f5f5;
	}
	.add-btn {
		width: 100%;
		height: 80rpx;
		background: linear-gradient(90deg, #FF6F63 0%, #FB392A 100%);
		border-radius: 10rpx;
		color: #ffffff;
		font-size: 32rpx;
		border: none;
	}
</style>