xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/quality-resources.vue

<template>
	<view class="quality-resources">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-icon" @click="handleBack"></view>
			<text class="header-title">优质资源</text>
			<view class="filter-icon" @click="handleFilter"></view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input-wrapper">
				<view class="search-icon-small"></view>
				<input type="text" class="search-input" placeholder="请输入搜索关键词" placeholder-style="color: #999;" />
			</view>
		</view>

		<!-- 资源列表 -->
		<scroll-view scroll-y class="content">
			<view class="resource-item" v-for="(resource, index) in resources" :key="index">
				<view class="resource-header">
					<view class="avatar"></view>
					<view class="resource-info">
						<view class="name-gender">
							<text class="name">{{ resource.name }}</text>
							<text class="gender">{{ resource.gender }}</text>
							<text class="status">{{ resource.status }}</text>
						</view>
						<view class="tags">
							<view class="tag" v-for="(tag, tagIndex) in resource.tags" :key="tagIndex">{{ tag }}</view>
						</view>
					</view>
				</view>
				<view class="resource-details">
					<view class="requirement">
						<text class="requirement-label">择偶要求:</text>
						<text class="requirement-content">{{ resource.requirement }}</text>
					</view>
					<view class="contact-info">
						<text class="contact-label">联系方式:</text>
						<text class="contact-number">{{ resource.contact }}</text>
						<view class="copy-btn" @click="handleCopy(resource.contact)">复制</view>
					</view>
					<view class="action-btn" @click="handleChat(resource)">牵线聊聊</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	name: 'quality-resources',
	data() {
		return {
			resources: [
				{
					name: '小高',
					gender: '男',
					status: '未匹配',
					tags: ['气质男', '小清新'],
					requirement: '165+ 本科',
					contact: '123****8912'
				},
				{
					name: '小子',
					gender: '男',
					status: '未匹配',
					tags: ['周末有空'],
					requirement: '165+ 本科',
					contact: '123****8912'
				},
				{
					name: '小博',
					gender: '男',
					status: '未匹配',
					tags: ['电话联系', '优质男'],
					requirement: '180+ 本科',
					contact: '123****8912'
				}
			]
		}
	},
	methods: {
		// 返回上一页
		handleBack() {
			uni.navigateBack()
		},
		// 筛选
		handleFilter() {
			// 实现筛选功能
		},
		// 复制联系方式
		handleCopy(contact) {
			uni.setClipboardData({
				data: contact,
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					})
				}
			})
		},
		// 牵线聊聊
		handleChat(resource) {
			// 跳转到聊天页面或打开聊天弹窗
			uni.showToast({
				title: '牵线成功',
				icon: 'success'
			})
		}
	}
}
</script>

<style lang="scss" scoped>
.quality-resources {
	min-height: 100vh;
	background: #FFF9F9;
	display: flex;
	flex-direction: column;
}

/* 顶部导航栏 */
.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 25rpx 30rpx;
	padding-top: calc(25rpx + env(safe-area-inset-top));
	background: #FFF9F9;
	border-bottom: 1rpx solid #F0F0F0;

	.back-icon {
		width: 44rpx;
		height: 44rpx;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%239C27B0"><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}

	.header-title {
		font-size: 38rpx;
		font-weight: bold;
		color: #9C27B0;
	}

	.filter-icon {
		width: 44rpx;
		height: 44rpx;
		background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M10 18h4v-2h-4v2zM3 6v2h18V6H3zm3 7h12v-2H6v2z"/></svg>');
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
}

/* 搜索栏 */
.search-bar {
	padding: 20rpx 30rpx;
	background: #FFF9F9;

	.search-input-wrapper {
		display: flex;
		align-items: center;
		background: #FFFFFF;
		border-radius: 25rpx;
		padding: 15rpx 20rpx;
		box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

		.search-icon-small {
			width: 32rpx;
			height: 32rpx;
			background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23999"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>');
			background-size: contain;
			background-repeat: no-repeat;
			background-position: center;
			margin-right: 15rpx;
		}

		.search-input {
			flex: 1;
			font-size: 28rpx;
			color: #333;
			placeholder-color: #999;
		}
	}
}

/* 内容区域 */
.content {
	flex: 1;
	padding: 0 30rpx 20rpx;
}

/* 资源列表项 */
.resource-item {
	background: #FFFFFF;
	border-radius: 20rpx;
	padding: 25rpx;
	margin-bottom: 20rpx;
	box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
}

.resource-header {
	display: flex;
	align-items: flex-start;
	margin-bottom: 20rpx;

	.avatar {
		width: 100rpx;
		height: 100rpx;
		border-radius: 50%;
		background: #F0F0F0;
		margin-right: 20rpx;
	}

	.resource-info {
		flex: 1;

		.name-gender {
			display: flex;
			align-items: center;
			gap: 15rpx;
			margin-bottom: 10rpx;

			.name {
				font-size: 32rpx;
				font-weight: bold;
				color: #333;
			}

			.gender {
				font-size: 24rpx;
				color: #999;
				padding: 4rpx 12rpx;
				background: #F5F5F5;
				border-radius: 12rpx;
			}

			.status {
				font-size: 24rpx;
				color: #FF6B8A;
				padding: 4rpx 12rpx;
				background: #FFF3F5;
				border-radius: 12rpx;
			}
		}

		.tags {
		display: flex;
		flex-wrap: wrap;
		gap: 10rpx;

			.tag {
				font-size: 22rpx;
				color: #9C27B0;
				padding: 6rpx 14rpx;
				background: #F3E5F5;
				border-radius: 14rpx;
			}
		}
	}
}

.resource-details {
	
	.requirement {
		display: flex;
		margin-bottom: 15rpx;

		.requirement-label {
			font-size: 26rpx;
			color: #666;
			margin-right: 10rpx;
		}

		.requirement-content {
			font-size: 26rpx;
			color: #333;
		}
	}

	.contact-info {
		display: flex;
		align-items: center;
		margin-bottom: 20rpx;

		.contact-label {
			font-size: 26rpx;
			color: #666;
			margin-right: 10rpx;
		}

		.contact-number {
			font-size: 26rpx;
			color: #333;
			margin-right: 15rpx;
		}

		.copy-btn {
			font-size: 24rpx;
			color: #9C27B0;
			padding: 6rpx 16rpx;
			background: #F3E5F5;
			border-radius: 14rpx;
		}
	}

	.action-btn {
		width: 200rpx;
		height: 60rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #9C27B0;
		color: #FFFFFF;
		font-size: 28rpx;
		border-radius: 30rpx;
		margin-left: auto;
	}
}
</style>