smartDriveEEUniApp/pages/customer/components/ServiceList.vue

<template>
	<view>
		<view class="list-header">
			<text class="total">共{{ total || list.length }}条</text>
			<view class="filter-inputs">
				<input 
					class="filter-input" 
					v-model="salesName" 
					placeholder="所属销售姓名" 
					@input="onInputChange" />
				<input 
					class="filter-input" 
					v-model="customerName" 
					placeholder="客户姓名" 
					@input="onInputChange" />
			</view>
			<view class="refresh-btn" @click="handleRefresh">
				<uni-icons type="reload" size="16" color="#007AFF"></uni-icons>
				<text>刷新</text>
			</view>
		</view>
		<scroll-view class="service-list" scroll-y>
			<view 
				class="service-item" 
				v-for="(item, index) in list" 
				:key="index"
				@click="$emit('itemClick', item)">
				<view class="service-header">
					<text class="service-title">{{ item.title }}</text>
					<view class="service-actions">
						<text class="archive-text">档案</text>
						<uni-icons type="right" size="16" color="#999"></uni-icons>
					</view>
				</view>
				<view class="service-meta">
					<text class="service-date">{{ item.date }}</text>
				</view>
				<view class="service-content">
					<text class="service-desc">{{ item.description }}</text>
				</view>
				<view class="service-customer">
					<view class="customer-avatar">
						<text class="avatar-text">{{ item.customerName.charAt(0) }}</text>
					</view>
					<text class="customer-name">{{ item.customerName }}</text>
				</view>
				<view class="ai-tag">
					<text>以上内容由AI生成</text>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		name: 'ServiceList',
		props: {
			list: {
				type: Array,
				default: () => []
			},
			total: {
				type: Number,
				default: 0
			}
		},
		data() {
			return {
				salesName: '',
				customerName: ''
			}
		},
		methods: {
			onInputChange() {
				// 输入框变化时，可以在这里添加实时搜索逻辑（如果需要）
			},
			handleRefresh() {
				// 触发刷新事件，并传递查询参数
				this.$emit('filterClick', {
					salesName: this.salesName.trim(),
					customerName: this.customerName.trim()
				});
			}
		}
	}
</script>

<style scoped>
	.list-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 24rpx 32rpx;
		background-color: #FFFFFF;
		border-bottom: 1px solid #F0F0F0;
		gap: 16rpx;
		flex-wrap: wrap;
	}
	
	.total {
		font-size: 28rpx;
		color: #666;
		flex-shrink: 0;
	}
	
	.filter-inputs {
		display: flex;
		align-items: center;
		flex: 1;
		gap: 16rpx;
		min-width: 0;
	}
	
	.filter-input {
		flex: 1;
		height: 64rpx;
		padding: 0 24rpx;
		background-color: #F5F5F5;
		border-radius: 8rpx;
		font-size: 26rpx;
		color: #333;
	}
	
	.filter-input::placeholder {
		color: #999;
	}
	
	.refresh-btn {
		display: flex;
		align-items: center;
		padding: 8rpx 16rpx;
		background-color: #F5F5F5;
		border-radius: 8rpx;
		flex-shrink: 0;
	}
	
	.refresh-btn text {
		font-size: 24rpx;
		color: #007AFF;
		margin-left: 8rpx;
	}
	
	.service-list {
		height: calc(100vh - 420rpx);
		background-color: #FFFFFF;
	}
	
	.service-item {
		padding: 32rpx;
		border-bottom: 1px solid #F0F0F0;
		background-color: #FFFFFF;
	}
	
	.service-header {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 16rpx;
	}
	
	.service-title {
		font-size: 32rpx;
		font-weight: 500;
		color: #333;
	}
	
	.service-actions {
		display: flex;
		align-items: center;
	}
	
	.archive-text {
		font-size: 26rpx;
		color: #999;
		margin-right: 8rpx;
	}
	
	.service-meta {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}
	
	.service-date {
		font-size: 24rpx;
		color: #999;
		margin-right: 16rpx;
	}
	
	.service-duration {
		font-size: 24rpx;
		color: #999;
	}
	
	.service-content {
		margin-bottom: 24rpx;
	}
	
	.service-desc {
		font-size: 28rpx;
		color: #666;
		line-height: 1.6;
	}
	
	.service-customer {
		display: flex;
		align-items: center;
		margin-bottom: 16rpx;
	}
	
	.customer-avatar {
		width: 64rpx;
		height: 64rpx;
		background-color: #2196F3;
		border-radius: 50%;
		display: flex;
		align-items: center;
		justify-content: center;
		margin-right: 16rpx;
	}
	
	.avatar-text {
		font-size: 32rpx;
		color: #FFFFFF;
		font-weight: 500;
	}
	
	.customer-name {
		font-size: 28rpx;
		color: #333;
	}
	
	.ai-tag {
		padding-top: 16rpx;
		border-top: 1px solid #F0F0F0;
	}
	
	.ai-tag text {
		font-size: 24rpx;
		color: #999;
	}
</style>