chuangte_bike_newxcx/page_fenbao/tousu/shlist.vue

<template>
	<view class="page">
		<u-navbar title="客户反馈管理" :border-bottom="false" :background="bgc" title-color='#000' title-size='36' back-icon-color="#000"
			height='44'></u-navbar>
		
		<view class="fixed-header">
			<!-- 温馨提示 -->
			<view class="warning-tip">
				<u-icon name="info-circle" size="28" style="margin-right: 10rpx;"></u-icon>
				温馨提示：请在24小时内处理订单反馈，否则24小时后，平台将自动介入
			</view>
			
			<!-- 搜索栏 -->
			<view class="search-box">
				<view class="search-input">
					<u-icon name="search" color="#999" size="32"></u-icon>
					<input type="text" placeholder="搜索反馈编号/内容" v-model="searchKeyword" confirm-type="search" @confirm="handleSearch" />
				</view>
				<view class="search-btn" @click="handleSearch">
					搜索
				</view>
			</view>
			
			<!-- 标签页导航 -->
			<view class="tabs-box">
				<view class="tab-item" :class="{ active: activeTab === 'pending' }" @click="switchTab('pending')">
					全部
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'processed' }" @click="switchTab('processed')">
					处理中
				</view>
				<view class="tab-item" :class="{ active: activeTab === 'rejected' }" @click="switchTab('rejected')">
					已处理
				</view>
			</view>
		</view>
		
		<!-- 占位符，高度需要根据 fixed-header 的实际高度调整，或者使用 padding-top -->
		<view class="header-placeholder"></view>
		
		<!-- 反馈列表 -->
		<view class="list-container">
			<view class="card" v-for="(item, index) in filteredList" :key="index" @click="btnxq(item)">
				<view class="card-header">
					<view class="title-wrap">
						<text class="title">{{item.title || '无标题'}}</text>
					</view>
					<view class="status-tag" :class="'status-' + item.status">
						{{ getStatusText(item.status) }}
					</view>
				</view>
				
				<view class="divider"></view>
				
				<view class="card-body">
					<view class="info-row">
						<text class="label">反馈编号</text>
						<text class="value">{{item.no}}</text>
					</view>
					<view class="info-row">
						<text class="label">反馈原因</text>
						<text class="value content-text">{{item.content}}</text>
					</view>
					<view class="info-row">
						<text class="label">反馈时间</text>
						<text class="value">{{item.createTime}}</text>
					</view>
					<view class="info-row" v-if="item.finishTime">
						<text class="label">处理时间</text>
						<text class="value">{{item.finishTime}}</text>
					</view>
					
					<!-- 剩余时间提示 -->
					<view class="expire-box" v-if="item.expireTime && !item.finishTime">
						<u-icon name="clock" size="28" :color="getRemainingColor(item.expireTime)"></u-icon>
						<text class="expire-text" :style="{color: getRemainingColor(item.expireTime)}">
							{{ getRemainingText(item.expireTime) }}
						</text>
					</view>
				</view>
				
				<view class="card-footer">
					<text class="detail-link">查看详情</text>
					<u-icon name="arrow-right" color="#999" size="24"></u-icon>
				</view>
			</view>
			
			<view class="loading-text" v-if="list.length > 0">
				{{ finished ? '没有更多了' : '加载中...' }}
			</view>
			
			<view class="no-data" v-if="list.length === 0 && !loading">
				<u-image width="300" height="300" src="https://api.ccttiot.com/smartmeter/img/static/uZFUpcz0YLe0fC7iH0q8" mode="aspectFit"></u-image>
				<text>暂无反馈记录</text>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				bgc: {
					backgroundColor: "#F7F7F7",
				},
				activeTab: 'pending',
				searchKeyword: '',
				pageNum: 1,
				pageSize: 20,
				total: 0,
				list: [],
				loading: false,
				finished: false,
				statusParam: '',
				areaId:''
			}
		},
		onLoad(option) {
			this.areaId = option.areaId
			this.getlist()
		},
		// 页面触底事件
		onReachBottom() {
			this.loadMore();
		},
		computed: {
			filteredList() {
				// 保持原有的前端搜索逻辑，虽然通常搜索应该走后端，但这里尊重原逻辑
				let source = this.list || [];
				if (this.searchKeyword) {
					const kw = this.searchKeyword.trim().toLowerCase();
					source = source.filter(item => {
						const text = `${item.no || item.id || ''}${item.title || ''}${item.content || ''}`.toLowerCase();
						return text.includes(kw);
					});
				}
				return source;
			},
			pendingCount() {
				return (this.list || []).filter(i => this.normalizeStatus(i.status) === 'pending').length;
			}
		},
		methods: {
			getStatusText(status) {
				const map = {
					1: '商家处理中',
					2: '用户处理中', // 假设
					3: '平台处理中',
					4: '已完成'
				};
				// 根据实际业务调整，这里沿用原代码的数字逻辑
				// 原代码：
				// 1: 商家处理中
				// 2: 用户处理中
				// 3: 平台处理中
				// 4: 已完成
				return map[status] || '待处理';
			},
			getRemainingColor(expireTime) {
				const text = this.getRemainingText(expireTime);
				if (text === '已逾期' || text === '剩余不足1分钟') return '#FF4D4F';
				return '#4C97E7';
			},
			// 计算剩余时间或已逾期
			getRemainingText(expireTime){
				if(!expireTime){ return '--' }
				let expireMs = NaN
				if (typeof expireTime === 'number') {
					expireMs = expireTime
				} else if (typeof expireTime === 'string') {
					const str = expireTime.replace(/-/g,'/').replace(/T/,' ').replace(/\.\d{3}Z?$/,'')
					expireMs = new Date(str).getTime()
				}
				if (!expireMs || isNaN(expireMs)) { return '--' }
				const now = this.nowTs || Date.now()
				let diff = expireMs - now
				if (diff <= 0) { return '已逾期' }
				const minute = 60000
				const hour = 60 * minute
				const day = 24 * hour
				const d = Math.floor(diff / day); diff %= day
				const h = Math.floor(diff / hour); diff %= hour
				const m = Math.floor(diff / minute)
				if (d > 0) { return `剩余${d}天${h}小时` }
				if (h > 0) { return `剩余${h}小时${m}分钟` }
				if (m > 0) { return `剩余${m}分钟` }
				return '剩余不足1分钟'
			},
			// 切换tab
			switchTab(tab) {
				if (this.activeTab === tab) return;
				this.activeTab = tab;
				if (tab === 'pending') {
					this.statusParam = '';
				} else if (tab === 'processed') {
					this.statusParam = '1,3';
				} else if (tab === 'rejected') {
					this.statusParam = '2,4'; // 原代码逻辑：rejected 对应 2,4 (已处理/已拒绝?)
				} else {
					this.statusParam = '';
				}
				this.pageNum = 1;
				this.list = [];
				this.finished = false;
				this.getlist();
			},
			// 点击跳转到商户投诉详情
			btnxq(item){
				console.log(item);
				uni.navigateTo({
					url:'/page_fenbao/tousu/shtsxq?id=' + item.id
				})
			},
			// 正常化状态
			normalizeStatus(status) {
				if (status === undefined || status === null) return 'pending';
				const s = String(status).toLowerCase();
				if (['0', 'pending', 'wait', 'waiting', '未处理'].includes(s)) return 'pending';
				if (['1', 'processed', 'done', '已处理', '已完成'].includes(s)) return 'processed';
				if (['2', 'rejected', 'refused', '已拒绝'].includes(s)) return 'rejected';
				return 'pending';
			},
			// 搜索
			handleSearch() {
				this.pageNum = 1;
				this.list = [];
				this.finished = false;
				this.getlist();
			},
			// 触底加载
			loadMore() {
				if (this.loading || this.finished) return;
				this.pageNum += 1;
				this.getlist();
			},
			// 请求投诉列表
			getlist() {
				if (this.loading) return;
				this.loading = true;
				const base = `/bst/complaint/list?pageNum=${this.pageNum}&pageSize=${this.pageSize}&orderByColumn=createTime&isAsc=desc&areaId=${this.areaId}`;
				const url = this.statusParam ? `${base}&statusList=${encodeURIComponent(this.statusParam)}` : base;
				this.$u.get(url).then((res) => {
					if (!res) return;
					// 优先解析顶层 rows/total
					if (Array.isArray(res.rows)) {
						const rows = res.rows;
						const total = res.total || res.totalCount || res.count || rows.length || 0;
						const mapped = (rows || []).map(r => ({
							id: r.id || r.complaintId || r.feedbackId || r.no,
							no: r.no || r.feedbackId || r.complaintId || r.id,
							title: r.title || r.reason || r.typeName || '',
							content: r.content || r.reason || '',
							createTime: r.createTime || r.create_time || r.createdAt || r.create_at || r.applyTime,
							finishTime: r.finishTime || r.processTime || r.process_time || r.updatedAt || r.updateTime,
							expireTime:r.expireTime,
							status: r.status
						}));
						this.total = total;
						this.list = this.pageNum === 1 ? mapped : this.list.concat(mapped);
						if (this.list.length >= this.total || mapped.length < this.pageSize) {
							this.finished = true;
						}
						return;
					}
					// 兼容原有逻辑...
					// 顶层 rows 为对象场景
 					if (res.rows && typeof res.rows === 'object' && !Array.isArray(res.rows)) {
 						let rows = res.rows.list || res.rows.rows || res.rows.records || res.rows.items || res.rows.data || [];
 						const total = res.total || res.totalCount || res.rows.total || res.rows.totalCount || rows.length || 0;
 						if (!Array.isArray(rows)) rows = [];
 						const mapped = (rows || []).map(r => ({
 							id: r.id || r.complaintId || r.feedbackId || r.no,
 							no: r.no || r.feedbackId || r.complaintId || r.id,
 							title: r.title || r.reason || r.typeName || '',
 							content: r.content || r.reason || '',
 							createTime: r.createTime || r.create_time || r.createdAt || r.create_at || r.applyTime,
 							finishTime: r.finishTime || r.processTime || r.process_time || r.updatedAt || r.updateTime,
 							status: r.status
 						}));
 						this.total = total;
 						this.list = this.pageNum === 1 ? mapped : this.list.concat(mapped);
 						if (this.list.length >= this.total || mapped.length < this.pageSize) {
 							this.finished = true;
 						}
 						return;
 					}
					// 其他情况
					const data = res.data !== undefined ? res.data : (res.result !== undefined ? res.result : (res.body !== undefined ? res.body : res));
					let total = 0;
					if (data && typeof data === 'object' && !Array.isArray(data)) {
						total = data.total || data.totalCount || data.totalRow || res.total || res.count || 0;
					}
					let rows = [];
					if (Array.isArray(data)) {
						rows = data;
						if (!total) total = rows.length;
					} else if (data && typeof data === 'object') {
						rows = data.list || data.rows || data.records || data.items || data.data || [];
						if (!Array.isArray(rows)) {
							rows = res.list || res.rows || res.records || res.items || [];
							if (!Array.isArray(rows)) {
								Object.keys(data).forEach(k => { if (Array.isArray(data[k])) rows = data[k]; });
							}
						}
						if (!total) total = data.total || data.totalCount || data.totalRow || rows.length || 0;
					}
					const mapped = (rows || []).map(r => ({
						id: r.id || r.complaintId || r.feedbackId || r.no,
						no: r.no || r.feedbackId || r.complaintId || r.id,
						title: r.title || r.reason || r.typeName || '',
						content: r.content || r.reason || '',
						createTime: r.createTime || r.create_time || r.createdAt || r.create_at || r.applyTime,
						finishTime: r.finishTime || r.processTime || r.process_time || r.updatedAt || r.updateTime,
						status: r.status
					}));
					this.total = total;
					this.list = this.pageNum === 1 ? mapped : this.list.concat(mapped);
					if (this.list.length >= this.total || mapped.length < this.pageSize) {
						this.finished = true;
					}
				}).finally(() => {
					this.loading = false;
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-color: #F7F7F7;
	}
	
	.page {
		min-height: 100vh;
		background-color: #F7F7F7;
		padding-bottom: 40rpx;
	}
	
	.fixed-header {
		position: fixed;
		top: 44px; /* 假设 navbar 高度为 44px */
		/* #ifdef H5 */
		top: 88rpx;
		/* #endif */
		left: 0;
		width: 100%;
		z-index: 100;
		background-color: #fff;
		box-shadow: 0 2rpx 10rpx rgba(0,0,0,0.05);
	}
	
	.header-placeholder {
		height: 200rpx; /* 根据 fixed-header 高度估算 */
	}
	
	.warning-tip {
		background-color: #FFFBE6;
		padding: 16rpx 24rpx;
		color: #E6A23C;
		font-size: 24rpx;
		display: flex;
		align-items: center;
	}
	
	.search-box {
		padding: 20rpx 30rpx;
		display: flex;
		align-items: center;
		background: #fff;
		
		.search-input {
			flex: 1;
			height: 72rpx;
			background: #F5F7FA;
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			margin-right: 20rpx;
			
			input {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				margin-left: 10rpx;
			}
		}
		
		.search-btn {
			width: 120rpx;
			height: 72rpx;
			background: linear-gradient(90deg, #4C97E7, #6ab0ff);
			border-radius: 36rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 28rpx;
			font-weight: 500;
			
			&:active {
				opacity: 0.9;
			}
		}
	}
	
	.tabs-box {
		display: flex;
		background: #fff;
		padding: 0 10rpx;
		border-bottom: 1rpx solid #f5f5f5;
		
		.tab-item {
			flex: 1;
			text-align: center;
			padding: 24rpx 0;
			font-size: 28rpx;
			color: #666;
			position: relative;
			transition: all 0.3s;
			
			&.active {
				color: #4C97E7;
				font-weight: 600;
				font-size: 30rpx;
				
				&::after {
					content: '';
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					width: 40rpx;
					height: 4rpx;
					background: #4C97E7;
					border-radius: 4rpx;
				}
			}
		}
	}
	
	.list-container {
		padding: 24rpx;
	}
	
	.card {
		background: #FFFFFF;
		border-radius: 20rpx;
		margin-bottom: 24rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.03);
		overflow: hidden;
		transition: all 0.3s;
		
		&:active {
			transform: scale(0.99);
		}
		
		.card-header {
			padding: 24rpx 30rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
			
			.title-wrap {
				flex: 1;
				margin-right: 20rpx;
				
				.title {
					font-size: 30rpx;
					font-weight: 600;
					color: #333;
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 1;
					overflow: hidden;
				}
			}
			
			.status-tag {
				font-size: 22rpx;
				padding: 4rpx 12rpx;
				border-radius: 8rpx;
				white-space: nowrap;
				
				&.status-1 { // 商家处理中
					background: #EBF4FF;
					color: #4C97E7;
				}
				&.status-2 { // 用户处理中
					background: #FFF0E6;
					color: #FF8C00;
				}
				&.status-3 { // 平台处理中
					background: #F2EBFF;
					color: #7B2BF9;
				}
				&.status-4 { // 已完成
					background: #F0F9EB;
					color: #67C23A;
				}
			}
		}
		
		.divider {
			height: 1rpx;
			background: #f9f9f9;
			margin: 0 30rpx;
		}
		
		.card-body {
			padding: 24rpx 30rpx;
			
			.info-row {
				display: flex;
				margin-bottom: 16rpx;
				font-size: 26rpx;
				line-height: 1.5;
				
				&:last-child {
					margin-bottom: 0;
				}
				
				.label {
					color: #999;
					width: 140rpx;
					flex-shrink: 0;
				}
				
				.value {
					color: #333;
					flex: 1;
					
					&.content-text {
						color: #666;
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						overflow: hidden;
					}
				}
			}
			
			.expire-box {
				margin-top: 20rpx;
				background: #FFFBE6;
				padding: 12rpx 20rpx;
				border-radius: 8rpx;
				display: flex;
				align-items: center;
				
				.expire-text {
					font-size: 24rpx;
					margin-left: 10rpx;
					font-weight: 500;
				}
			}
		}
		
		.card-footer {
			border-top: 1rpx solid #f9f9f9;
			padding: 20rpx 30rpx;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			
			.detail-link {
				font-size: 24rpx;
				color: #999;
				margin-right: 6rpx;
			}
		}
	}
	
	.loading-text {
		text-align: center;
		color: #999;
		font-size: 24rpx;
		padding: 30rpx 0;
	}
	
	.no-data {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding-top: 100rpx;
		
		text {
			font-size: 28rpx;
			color: #999;
			margin-top: 20rpx;
		}
	}
</style>