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.answer }">{{ item.answer ? '已完成' : '受理中' }}</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.answer" 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.deal_time }}</view>
					</view>
					<view class="result">
						<view class="result-label">回复内容：</view>
						<view class="result-content" :class="{'result-mask': !item.openResult }">
							{{ item.answer }}
							<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: [],
				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.answer);
						}
					})
					.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>