yizhizan-h5/package/my/feedback/index.vue

<template>
	<view class="page-container">
		<nav-bar title="我要留言"></nav-bar>
		
		<view class="content">
			<scroll-view
				:scroll-y="true"
				class="scroll-view"
				:refresher-threshold="80"
				:refresher-enabled="true"
				:refresher-triggered="isRefreshing"
				scroll-with-animation="true"
				@refresherrefresh="handleRefresh"
				@scrolltolower="loadMore">
				<view class="list" v-if="list.length">
					<view class="item-card" v-for="item in list" :key="item.messageId">
						<view class="text">{{ item.content }}</view>
						<view class="time">{{ item.createTime }}</view>
						<view>
							<view class="tag" :class="{ 'tag-danger': item.status == 2 }" v-if="setStatusText(item.status)">{{ setStatusText(item.status) }}</view>
							<view v-if="item.auditContent" class="audit-content">{{ item.auditContent }}</view>
						</view>
						<view class="buttons">
							<view class="button" @click="handleDelete(item)">删除</view>
						</view>
					</view>
				</view>
				<view class="empty" v-else>暂无留言内容</view>
			</scroll-view>
		</view>
		
		<c-modal :value="showConfirmModal" title="提示" @cancel="showConfirmModal = false" @confirm="deleteMessage">
			您是否确定删除该留言？
		</c-modal>
		
		<c-modal :value="showModal" title="请留言" @cancel="showModal = false" @confirm="handleSubmit">
			<textarea
				v-model="message"
				placeholder="请提交您想要反馈的留言"
				class="textarea"
				placeholder-class="placeholder-class"
				maxlength="1000">
			</textarea>
		</c-modal>
		
		<view class="button-section">
			<view class="submit-btn" @click="showModal = true">我要留言</view>
		</view>
	</view>
</template>

<script>
	import navBar from '@/components/nav-bar/index.vue'
	import cModal from '@/components/c-modal.vue'
	export default {
		components: {
			navBar,
			cModal
		},
		data() {
			return {
				showConfirmModal: false,
				showModal: false,
				loading: false,
				updating: false,
				message: '',
				list: [],
				deleteMessageId: '',
				total: 0,
				page: 1,
				limit: 10,
				isRefreshing: false,
			}
		},
		watch: {
			showModal(value) {
				if (!value) {
					this.message = ''
				}
			}
		},
		onLoad() {
			if (this.$queue.getData('token')) {
				this.getList()
			}
		},
		methods: {
			// 设置状态文案
			setStatusText(value) {
				switch (value) {
					case 0:
						return '已留言'
					case 1: 
						return '已采纳'
					case 2:
						return '不采纳'
				}
				return ''
			},
			// 获取留言数据
			getList() {
				if (this.loading) return
				
				this.loading = true
				uni.showLoading({ title: '加载中' })
				this.$Request
					.getT('/app/messageBoard/selectMessageBoardList', {
						page: this.page,
						limit: this.limit
					})
					.then(res => {
						if (res.code === 0) {
							this.list = this.page == 1 ? res.data.records : [...this.list, ...res.data.records],
							this.total = res.data.total
						}
					})
					.finally(() => {
						this.isRefreshing = false
						this.loading = false
						uni.hideLoading()
					})
			},
			
			handleDelete(item) {
				this.deleteMessageId = item.messageId
				this.showConfirmModal = true
			},
			
			// 删除留言
			deleteMessage() {
				if (this.updating) return
				
				this.updating = true
				uni.showLoading({ title: '删除中' })
				this.$Request
					.getT('/app/messageBoard/deleteMessageBoard', {
						messageBoardId: this.deleteMessageId
					})
					.then(res => {
						if (res.code === 0) {
							this.$queue.showToast('删除成功')
							this.showConfirmModal = false
							this.page = 1
							this.getList()
						}
					})
					.finally(() => {
						this.updating = false
						uni.hideLoading()
					})
			},
			
			// 提交留言
			handleSubmit() {
				if (this.updating) return
				if (!this.message) {
					this.$queue.showToast('请输入留言内容')
					return
				}
				
				this.updating = true
				uni.showLoading({ title: '留言中' })
				this.$Request
					.postJson('/app/messageBoard/updateMessageBoard', {
						messageId: '',
						content: this.message
					})
					.then(res => {
						if (res.code == 0) {
							this.$queue.showToast('留言成功')
							this.showModal = false
							this.page = 1
							this.getList()
						}
					})
					.finally(() => {
						this.updating = false
						uni.hideLoading()
					})
			},
			
			// 刷新
			handleRefresh() {
				if (this.isRefreshing) return
				this.isRefreshing = true
				this.page = 1
				this.getList()
			},
			
			// 加载更多
			loadMore() {
				if (this.loading || this.list.length >= this.total) return
				this.page++
				this.getList()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import '@/common.scss';
	
	.page-container {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 100vh;
		font-family: DM Sans;
		font-style: Regular;
		
		.content {
			flex: 1;
			padding: 0 40rpx;
			overflow: hidden;
			.scroll-view {
				width: 100%;
				height: 100%;
			}
			.list {
				padding: 20rpx 0;
			}
			.item-card {
				padding: 16rpx 36rpx;
				box-sizing: border-box;
				border: 1px solid rgba(227, 231, 236, 1);
				border-radius: 6px;
				background: rgba(255, 255, 255, 1);
				margin-bottom: 20rpx;
				.text {
					color: rgba(23, 23, 37, 1);
					font-size: 28rpx;
					font-weight: 400;
					line-height: 44rpx;
					margin-bottom: 8rpx;
					word-break: break-all;
				}
				.time {
					color: rgba(156, 164, 171, 1);
					font-size: 20rpx;
					font-weight: 400;
					line-height: 40rpx;
				}
				.tag {
					display: inline-block;
					padding: 8rpx;
					border-radius: 8rpx;
					background: rgba(1, 107, 246, 0.1);
					color: rgba(1, 107, 246, 1);
					font-size: 20rpx;
					font-weight: 400;
					line-height: 1;
					margin: 8rpx 0;
				}
				.tag-danger {
					color: rgba(237, 66, 69, 1);
					background: rgba(255, 246, 247, 1);
				}
				.audit-content {
					color: #999;
					font-size: 24rpx;
					margin-bottom: 12rpx;
					word-wrap: break-word;
				}
				.button {
					width: 190rpx;
					height: 60rpx;
					border: 1px solid rgba(232, 232, 232, 1);
					border-radius: 60rpx;
					text-align: center;
					line-height: 58rpx;
					color: rgba(153, 153, 153, 1);
					font-size: 24rpx;
					font-weight: 500;
				}
			}
			
			.empty {
				padding: 50rpx;
				text-align: center;
				color: #999;
			}
		}
		
		.textarea {
			width: 100%;
			box-sizing: border-box;
			border: 1px solid rgba(242, 242, 242, 1);
			border-radius: 6px;
			background: rgba(250, 250, 250, 1);
			padding: 26rpx 20rpx;
			font-size: 28rpx;
			line-height: 40rpx;
			color: rgba(158, 161, 168, 1);
		}
		.placeholder-class {
			color: rgba(158, 161, 168, 1);
		}
	}
</style>