rtliveCompany/pages_task/selectCustomer.vue

<template>
	<view class="container">
		<Step :step="currentStep" :stepsData="currentText" />

		<scroll-view class="content" scroll-y>
			<!-- 搜索栏 -->
			<view class="search-section">
				<view class="search-input-wrapper">
					<image class="search-icon" src="/static/image/icon_search.png"></image>
					<input class="search-input" type="text" placeholder="输入客户名称" v-model="searchKeyword"
						@input="handleSearch" />
					<image class="clear-icon" src="/static/image/icon_clear.png" v-if="searchKeyword"
						@click="clearSearch"></image>
				</view>
				<view class="section-title">已选择 {{ selectedCustomers.length }} 人：</view>
				<view class="selected-tags">
					<view class="selected-tag" v-for="(customer, index) in selectedCustomers" :key="customer.id">
						<text class="tag-name">{{ customer.name }}</text>
						<text class="tag-remove" @click="removeCustomer(customer.id)">×</text>
					</view>
				</view>
			</view>

			<!-- 已选择客户 -->
			<view class="selected-section">

			</view>


			<!-- 客户列表 -->
			<view class="customer-list">
				<view class="customer-item" :class="{ active: isSelected(customer.id) }"
					v-for="(customer, index) in filteredCustomers" :key="customer.id" @click="toggleCustomer(customer)">
					<view class="left">
						<image class="head" src="/static/image/img_avatar_client.png"></image>
						<view class="customer-info">
							<view class="customer-header">
								<view class="customer-name">{{ customer.name }}</view>
								<view class="customer-level">{{ customer.level }}</view>
							</view>
							<view class="customer-details">
								<view class="customer-hospital">{{ customer.hospital }}</view>
								<view class="customer-department">{{ customer.department }}</view>
							</view>
						</view>
					</view>
					<checkbox :value="customer.id" :checked="isSelected(customer.id)" @click.stop="toggleCustomer(customer)"
						color="#388BFF" />
				</view>
			</view>
		</scroll-view>

		<!-- 底部操作栏 -->
		<view class="bottom-bar">
			<view class="del-box" @click="deleteSelected">
				<image class="w40 h40" src="/static/image/icon_delete.png"></image>
				<text>删除</text>
			</view>
			<view class="action-buttons">
				<view class="btn btn-cancel" @click="handlePrev">上一步</view>
				<view class="btn btn-submit" @click="handleNext">下一步</view>
			</view>
		</view>
	</view>
</template>

<script>
	import Step from '@/pages_task/components/step.vue'
	export default {
		components: {
			Step
		},
		data() {
			return {
				currentText: [{
						id: 1,
						stepNumber: 1,
						title: '填写任务'
					},
					{
						id: 2,
						stepNumber: 2,
						title: '选择客户'
					},
					{
						id: 3,
						stepNumber: 3,
						title: '积分设置'
					}
				],
				currentStep: 2,
				searchKeyword: '',
				selectedCustomers: [{
						id: 1,
						name: '王小明',
						level: '一级',
						hospital: '湖南省人民医院',
						department: '口腔科'
					},
					{
						id: 2,
						name: '李洋',
						level: '一级',
						hospital: '湖南省人民医院',
						department: '口腔科'
					}
				],
				customerList: [{
						id: 1,
						name: '王小明',
						level: '一级',
						hospital: '湖南省人民医院',
						department: '口腔科'
					},
					{
						id: 2,
						name: '李洋',
						level: '一级',
						hospital: '湖南省人民医院',
						department: '口腔科'
					},
					{
						id: 3,
						name: '王小明',
						level: '一级',
						hospital: '湖南省人民医院',
						department: '口腔科'
					},
					{
						id: 4,
						name: '王小明',
						level: '一级',
						hospital: '湖南省人民医院',
						department: '口腔科'
					},
					{
						id: 5,
						name: '王小明',
						level: '一级',
						hospital: '湖南省人民医院',
						department: '口腔科'
					},
					{
						id: 6,
						name: '王小明',
						level: '一级',
						hospital: '湖南省人民医院',
						department: '口腔科'
					}
				]
			}
		},
		computed: {
			filteredCustomers() {
				if (!this.searchKeyword.trim()) {
					return this.customerList
				}
				const keyword = this.searchKeyword.toLowerCase()
				return this.customerList.filter(customer =>
					customer.name.toLowerCase().includes(keyword) ||
					customer.hospital.toLowerCase().includes(keyword) ||
					customer.department.toLowerCase().includes(keyword)
				)
			}
		},
		methods: {
			handleSearch() {
				// 搜索逻辑已经在computed中处理
			},
			clearSearch() {
				this.searchKeyword = ''
			},
			isSelected(customerId) {
				return this.selectedCustomers.some(customer => customer.id === customerId)
			},
			toggleCustomer(customer) {
				const index = this.selectedCustomers.findIndex(item => item.id === customer.id)
				if (index > -1) {
					// 已选中，移除
					this.selectedCustomers.splice(index, 1)
				} else {
					// 未选中，添加
					this.selectedCustomers.push(customer)
				}
			},
			removeCustomer(customerId) {
				const index = this.selectedCustomers.findIndex(item => item.id === customerId)
				if (index > -1) {
					this.selectedCustomers.splice(index, 1)
				}
			},
			deleteSelected() {
				if (this.selectedCustomers.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '请先选择要删除的客户'
					})
					return
				}
				
				// 这里可以添加删除逻辑，比如从列表中移除已选中的客户
				uni.showModal({
					title: '提示',
					content: `确定要删除选中的 ${this.selectedCustomers.length} 个客户吗？`,
					success: (res) => {
						if (res.confirm) {
							// 从客户列表中移除已选中的客户
							const selectedIds = this.selectedCustomers.map(item => item.id)
							this.customerList = this.customerList.filter(
								customer => !selectedIds.includes(customer.id)
							)
							// 清空已选中的客户
							this.selectedCustomers = []
							uni.showToast({
								title: '删除成功'
							})
						}
					}
				})
			},
			handlePrev() {
				uni.navigateBack()
			},
			handleNext() {
				if (this.selectedCustomers.length === 0) {
					uni.showToast({
						icon: 'none',
						title: '请至少选择一个客户'
					})
					return
				}

				// 跳转到下一步（积分设置）
				uni.navigateTo({
					url: '/pages_task/pointsSettings'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		min-height: 100vh;
		background: #F7F8FA;
		display: flex;
		flex-direction: column;

		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 544rpx;
			background: linear-gradient(180deg, #E4EFFE 0%, rgba(228, 239, 254, 0) 100%);
		}
	}

	.step-container {
		display: flex;
		align-items: center;
		justify-content: center;
		background: #fff;
		padding: 32rpx 0;
		margin-bottom: 20rpx;

		.step-item {
			display: flex;
			flex-direction: column;
			align-items: center;
			position: relative;

			.step-number {
				width: 48rpx;
				height: 48rpx;
				border-radius: 50%;
				background: #F2F3F5;
				color: #C8C9CC;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				font-weight: 500;
				margin-bottom: 8rpx;
				transition: all 0.3s;

				&.active {
					background: #388BFF;
					color: #fff;
				}
			}

			.step-text {
				font-size: 28rpx;
				color: #C8C9CC;
				transition: all 0.3s;

				&.active {
					color: #388BFF;
					font-weight: 500;
				}
			}

			&.active {
				.step-number {
					background: #388BFF;
					color: #fff;
				}

				.step-text {
					color: #388BFF;
					font-weight: 500;
				}
			}
		}

		.step-divider {
			width: 80rpx;
			height: 2rpx;
			background: #EBEDF0;
			margin: 0 20rpx;
		}
	}

	.content {
		flex: 1;
		padding: 24rpx;
		box-sizing: border-box;
		padding-bottom: 200rpx;
	}


	.search-section {
		background-color: #ffffff;
		border-radius: 24rpx 24rpx 24rpx 24rpx;
		padding: 24rpx;
		margin-bottom: 24rpx;

		.section-title {
			font-size: 24rpx;
			color: #999999;
			margin-bottom: 24rpx;
		}

		.selected-tags {
			display: flex;
			flex-wrap: wrap;
			gap: 16rpx;

			.selected-tag {
				display: flex;
				align-items: center;
				border-radius: 76rpx 76rpx 76rpx 76rpx;
				border: 2rpx solid #F5F5F5;
				padding: 12rpx 24rpx;
				font-size: 28rpx;

				.tag-name {
					color: #333;
					margin-right: 8rpx;
				}

				.tag-remove {
					color: #C8C9CC;
					font-size: 36rpx;
					line-height: 1;
					cursor: pointer;
				}
			}
		}

		.search-input-wrapper {
			background: #F7F8FA;
			border-radius: 38rpx 38rpx 38rpx 38rpx;
			position: relative;
			display: flex;
			align-items: center;
			padding: 0 28rpx;
			height: 72rpx;
			margin-bottom: 24rpx;

			.search-icon {
				width: 36rpx;
				height: 36rpx;
				margin-right: 16rpx;
			}

			.search-input {
				flex: 1;
				height: 100%;
				font-size: 28rpx;
				color: #333;
			}

			.clear-icon {
				width: 32rpx;
				height: 32rpx;
				margin-left: 16rpx;
			}
		}
	}

	.customer-list {
		.customer-item {
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 32rpx;
			margin-bottom: 12rpx;
			background-color: #ffffff;
			cursor: pointer;
			transition: all 0.3s;

			&.active {
				background: rgba(56,139,255,0.06);
			}

			&:last-child {
				margin-bottom: 0;
			}

			.left {
				display: flex;
				align-items: center;

				.head {
					width: 88rpx;
					height: 88rpx;
					border-radius: 50%;
					margin-right: 24rpx;
				}

				.customer-info {
					flex: 1;

					.customer-header {
						display: flex;
						align-items: center;
						margin-bottom: 12rpx;

						.customer-name {
							font-weight: 500;
							font-size: 32rpx;
							color: #333333;
							margin-right: 16rpx;
						}

						.customer-level {
							font-size: 24rpx;
							color: #C89743;
							background: #FFF6E5;
							border-radius: 8rpx;
							padding: 4rpx 12rpx;
						}
					}

					.customer-details {
						display: flex;
						align-items: center;

						.customer-hospital {
							font-size: 28rpx;
							color: #666;
							margin-right: 24rpx;
							border-right: 2rpx solid #EAEBEE;
							padding-right: 24rpx;
						}

						.customer-department {
							font-size: 28rpx;
							color: #666;
						}
					}
				}
			}

		}
	}

	.bottom-bar {
		position: fixed;
		bottom: 0;
		left: 0;
		right: 0;
		background: #fff;
		padding: 24rpx 32rpx;
		border-top: 1rpx solid #F2F3F5;
		z-index: 100;
		display: flex;
		align-items: center;

		.del-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 24rpx;
			color: #666666;
			margin-right: 32rpx;
			cursor: pointer;
		}

		.action-buttons {
			display: flex;
			flex: 1;
			justify-content: space-between;

			.btn {
				width: 292rpx;
				height: 88rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: 500;
				border-radius: 200rpx 200rpx 200rpx 200rpx;
				cursor: pointer;

				&.btn-cancel {
					background: #fff;
					border: 2rpx solid #388BFF;
					color: #388BFF;
				}

				&.btn-submit {
					background: #388BFF;
					color: #fff;
				}
			}
		}
	}
</style>