yanzong_qianduan/pages/feedback/list.vue

<template>
	<view class="container">
		<view v-if="list && list.length > 0" class="f-list">
			<view v-for="(item, index) in list" :key="index" class="f-item">
				<view class="f-top">
					<view class="top-type">
						<view class="type-info">您的反馈：{{ typeList[item.type - 1] }}</view>
						<text :class="{ 'ing': item.status !== 1 }">{{ item.status === 1 ? '已完成' : '受理中' }}</text>
					</view>
					<view class="top-suggest">
						<view class="suggest" :class="{'suggest-mask': !item.openSuggest }">
							{{ item.suggest }}
							<view v-if="!item.openSuggest && item.showSuggestBtn" class="mask"></view>
						</view>
						<view v-if="item.showSuggestBtn" class="btn" @click="item.openSuggest = !item.openSuggest">
							{{ item.openSuggest ? '收起' : '展开' }}
							<image src="/static/arrow-right.png" mode="aspectFill" :style="{ transform: `rotate(${item.openSuggest ? '-90deg': '90deg'})`}"></image>
						</view>
					</view>
					<view class="time">{{ item.create_time }}</view>
				</view>
				<view v-if="item.status === 1" class="f-bottom">
					<view class="title">
						处理结果
						<view v-if="item.showResultBtn" class="btn" @click="item.openResult = !item.openResult">
								{{ item.openResult ? '收起' : '展开' }}
								<image src="/static/arrow-right.png" mode="aspectFill" :style="{ transform: `rotate(${item.openResult ? '-90deg': '90deg'})`}"></image>
						</view>
					</view>
					<view class="result" style="margin-bottom: 30rpx;">
						<view class="result-label">处理时间：</view>
						<view class="result-content" style="color: #333;">{{ item.solveTime }}</view>
					</view>
					<view class="result">
						<view class="result-label">回复内容：</view>
						<view class="result-content" :class="{'result-mask': !item.openResult }">
							{{ item.solveResult }}
							<view v-if="!item.openResult && item.showResultBtn" class="mask"></view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-if="list && list.length === 0" class="none">
			<image :src="$picUrl+'/static/f-none.png'" mode="aspectFill"></image>
			<view class="none-tip">还没有反馈内容哦~</view>
		</view>
	</view>
</template>

<script>
	import * as Api from '@/api/feedback/index.js'
	export default {
		data() {
			return {
				typeList: [
					'功能异常：系统功能异常或不可用',
					'系统建议：用的不爽，我有建议',
					'功能新增：我想用的功能，希望能开发新增',
					'服务建议：服务商服务不到位，我有建议',
				],
				list: [
					// {
					// 	type: '系统功能异常或不可用',
					// 	suggest: '点击退款按钮，系统一直转圈，没有反应，请尽快修复解决，另外，系统上能否对接更多好资源。有时候系统打开会显示一直在加载中，不知道是什么原因有时候又没有这个情况。',
					// 	create_time: '2024-04-01 20:22:31',
					// 	status: 0,
					// 	solveTime: '2024-04-01 20:22:31',
					// 	solveResult: '您好，您反馈的系统问题，我们已经修复，请您删除下小程序，再重新搜索进入小程序即可。供应链系统资源我们-直都在努力对接中，感谢您',
					// 	openSuggest: false,
					// 	openResult: false,
					// },
					// {
					// 	type: '系统功能异常或不可用系统功能异常或不可用系统功能异常或不可用',
					// 	suggest: '点击退款按钮，系统一直转圈，没有反应，请尽快修复解决，另外，系统上能否对接更多好资源。有时候系统打开会显示一直在加载中，不知道是什么原因有时候又没有这个情况。',
					// 	create_time: '2024-04-01 20:22:31',
					// 	status: 1,
					// 	solveTime: '2024-04-01 20:22:31',
					// 	solveResult: '您好，您反馈的系统问题，我们已经修复，请您删除下小程序，再重新搜索进入小程序即可。供应链系统资源我们-直都在努力对接中，感谢您',
					// 	openSuggest: false,
					// 	openResult: false,
					// }
				],
				loading: false,
			};
		},
		mounted() {
			this.getMyFeedback();
		},
		methods: {
			async getMyFeedback() {
			  if (this.loading) {
			    return;
			  }
				this.loading = true;
				Api.getMyFeedback({})
					.then(result => {
						console.log(result);
						const data = result.data.data;
						this.list = [...data]
						// this.list = this.list.concat(data);
						for (const item of this.list) {
							item.openSuggest = false;
							item.openResult = false;
							item.showSuggestBtn = this.calcContentWidth(item.suggest);
							item.showResultBtn = this.calcContentWidth(item.solveResult);
						}
					})
					.finally(() => this.loading = false)
			},
			calcContentWidth(cont) {
				if (cont) {
					let len = 0;
					let spliti = 0;
					for (var i = 0; i < cont.length; i++) {
							if (cont.charCodeAt(i) > 255 || cont.charCodeAt(i<0)) {
								len += 17;
							} else {
								len += 10;
							}
					}
					return len > 816;
				}
				return false;
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx 24rpx;
		.f-list {
			.f-item {
				padding: 30rpx;
				margin-bottom: 20rpx;
				background: #fff;
				.f-top {
					.top-type {
						display: flex;
						margin-bottom: 27rpx;
						justify-content: space-between;
						.type-info {
							color: #333333;
							font-size: 30rpx;
							width: calc(100% - 130rpx);
						}
						text {
							width: 90rpx;
							height: 40rpx;
							background: #EFFBF7;
							border-radius: 10rpx;
							text-align: center;
							line-height: 40rpx;
							font-size: 24rpx;
							color: #52BC8C;
							margin-left: 40rpx;
							&.ing {
								color: #fff;
								background: #FB6569;
							}
						}
					}
					.top-suggest {
						display: flex;
						flex-direction: column;
						align-items: center;
						.suggest {
							font-size: 26rpx;
							color: #666;
							line-height: 32rpx;
							position: relative;
							&.suggest-mask {
								height: 64rpx;
								overflow: hidden;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								text-overflow: ellipsis;
								width: 100%;
							}
							.mask {
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								background: linear-gradient(to bottom, transparent 0 , rgba(255, 255, 255, 0.8) 100%);
							}
						}
					}
					.btn {
						color: #666;
						font-size: 26rpx;
						margin-top: 30rpx;
						>image {
							width: 11rpx;
							height: 20rpx;
							margin-left: 10rpx;
						}
					}
					.time {
						color: #999999;
						font-size: 26rpx;
						margin-bottom: 30rpx;
					}
				}
				.f-bottom {
					border-top: 1px solid #EAEAEA;
					padding-top: 30rpx;
					.title {
						display: flex;
						align-items: center;
						color: #333333;
						font-size: 30rpx;
						margin-bottom: 30rpx;
						.btn {
							color: #666;
							font-size: 26rpx;
							margin-left: auto;
							>image {
								width: 11rpx;
								height: 20rpx;
								margin-left: 10rpx;
							}
						}
					}
					.result {
						display: flex;
						font-size: 26rpx;
						.result-label {
							flex-shrink: 0;
							color: #999999;
						}
						.result-content {
							flex: 1;
							color: #666666;
							position: relative;
							&.result-mask {
								height: 64rpx;
								overflow: hidden;
								display: -webkit-box;
								-webkit-line-clamp: 2;
								-webkit-box-orient: vertical;
								text-overflow: ellipsis;
							}
							.mask {
								position: absolute;
								top: 0;
								left: 0;
								right: 0;
								bottom: 0;
								background: linear-gradient(to bottom, transparent 0 , rgba(255, 255, 255, 0.8) 100%);
							}
						}
					}
				}
			}
		}
		.none {
			display: flex;
			flex-direction: column;
			align-items: center;
			padding-top: 152rpx;
			>image {
				width: 400rpx;
				height: 348rpx;
			}
			.none-tip {
				color: #222222;
				font-size: 30rpx;
				margin-top: 14rpx;
			}
		}
	}
</style>