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

<template>
	<view class="my-resources" :class="{ 'dark-mode': isDarkTheme }">
		<!-- 顶部导航栏 -->
		<view class="header">
			<text class="header-title">我的资源</text>
			<view class="header-right">
				<text class="dropdown-icon">▼</text>
			</view>
		</view>

		<!-- 搜索栏 -->
		<view class="search-bar">
			<view class="search-input-wrapper">
				<text class="search-icon">🔍</text>
				<input type="text" class="search-input" placeholder="请输入人搜索关键词" v-model="searchKeyword" @input="handleSearch" />
			</view>
		</view>
	
		<scroll-view scroll-y class="content">
			<!-- 资源列表 -->
			<view class="resource-item" v-for="(item, index) in resources" :key="index" @click="handleViewUserDetail(item)">
				<!-- 优质资源标签 -->
				<view class="quality-tag" v-if="item.isQuality">优质资源</view>

				<!-- 头部：头像 + 名字/性别 + 审核状态 -->
				<view class="resource-header">
					<image v-if="item.avatar" :src="item.avatar" mode="aspectFill" class="resource-avatar"></image>
					<view v-else class="resource-avatar-placeholder"></view>
					
					<view class="resource-info">
						<view class="name-gender-row">
							<text class="resource-name">{{ item.name }}</text>
							<text class="resource-gender">{{ item.gender }}</text>
							<text class="status-tag" :class="{ 'approved': item.status === '已审核', 'pending': item.status === '待审核' }">{{ item.status }}</text>
						</view>
					</view>

					<!-- 右侧点赞/加号 -->
					<view class="right-action" v-if="item.isPlus">
						<text class="heart-icon">💗</text>
					</view>
				</view>

				<!-- 标签 -->
				<view class="labels-section">
					<text class="label" v-for="(label, idx) in item.labels" :key="idx">{{ label }}</text>
				</view>

				<!-- 择偶要求 -->
				<view class="requirement-section">
					<text class="requirement-text">择偶要求: {{ item.requirement }}</text>
				</view>

				<!-- 联系方式 -->
				<view class="contact-section">
					<text class="contact-label">联系方式:</text>
					<text class="contact-number">{{ item.contact }}</text>
					<text class="copy-btn" @click.stop="handleCopy(item.contact)">复制</text>
				</view>

				<!-- 底部按钮 -->
				<view class="action-buttons">
					<text class="delete-btn" @click.stop="handleDelete(item.id)">删除</text>
					<text class="match-btn" @click.stop="handleMatch(item.id)">精准匹配</text>
				</view>
			</view>
		</scroll-view>
	
		<!-- 底部优质资源按钮 -->
		<view class="quality-resources-section fixed-bottom">
			<view class="quality-resources-btn" @click="navigateToQualityResources">
				<text class="btn-icon">⭐</text>
				<text class="btn-text">优质资源</text>
			</view>
		</view>
	
		<!-- 底部添加按钮 -->
		<view class="add-button" @click="handleAdd">
			<text class="add-button-icon">+</text>
		</view>
	
		<!-- 底部导航 -->
		<view class="tabbar">
			<view class="tabbar-item" @click="navigateToWorkbench">
				<text class="tab-icon">🏠</text>
				<text class="tab-text">工作台</text>
			</view>
			<view class="tabbar-item active" @click="navigateToMyResources">
				<text class="tab-icon">📋</text>
				<text class="tab-text">我的资源</text>
			</view>
			<view class="tabbar-item" @click="navigateToRanking">
				<text class="tab-icon">🏆</text>
				<text class="tab-text">排行榜</text>
			</view>
			<view class="tabbar-item" @click="navigateToMessage">
				<view class="tab-icon-wrapper">
					<text class="tab-icon">💬</text>
					<view class="badge" v-if="unreadCount > 0">{{ unreadCount }}</view>
				</view>
				<text class="tab-text">消息</text>
			</view>
			<view class="tabbar-item" @click="navigateToMine">
				<text class="tab-icon">👤</text>
				<text class="tab-text">我的</text>
			</view>
		</view>
	</view>
</template>

<script>
import api from '@/utils/api.js'

export default {
	data() {
		return {
			searchKeyword: '',
			unreadCount: 3,
			resources: [
				{
					id: 1,
					avatar: '',
					name: '小高',
					gender: '男',
					status: '已审核',
					isPlus: false,
					labels: ['气质男', '小清新'],
					requirement: '165+ 本科',
					contact: '123****8912',
					isQuality: false
				},
				{
					id: 2,
					avatar: '',
					name: '小美',
					gender: '女',
					status: '已审核',
					isPlus: true,
					labels: ['温柔', '知性', '爱读书'],
					requirement: '175+ 硕士 有房',
					contact: '138****6543',
					isQuality: false
				},
				{
					id: 3,
					avatar: '',
					name: '阿强',
					gender: '男',
					status: '待审核',
					isPlus: false,
					labels: ['阳光', '运动型'],
					requirement: '160+ 大专以上',
					contact: '159****2234',
					isQuality: true
				}
			],
			isDarkTheme: false
		}
	},
	onShow() {
		const stored = uni.getStorageSync('matchmakerDarkMode')
		if (stored === true || stored === false) {
			this.isDarkTheme = stored
		}
	},
	onLoad() {
		// 加载我的资源数据
		this.loadMyResources()
	},
	methods: {
		async loadMyResources() {
			try {
				const res = await api.matchmaker.getMyResources()
				if (res && res.data && res.data.length > 0) {
					this.resources = res.data
				}
			} catch (e) {
				console.error('加载资源数据失败:', e)
			}
		},
		handleSearch() {
			console.log('搜索关键词:', this.searchKeyword)
		},
		handleCopy(contact) {
			uni.setClipboardData({
				data: contact.replace(/\*+/g, ''),
				success: () => {
					uni.showToast({
						title: '复制成功',
						icon: 'success'
					})
				}
			})
		},
		handleDelete(id) {
			uni.showModal({
				title: '删除确认',
				content: '确定要删除该资源吗？',
				success: (res) => {
					if (res.confirm) {
						console.log('删除资源:', id)
						uni.showToast({
							title: '删除成功',
							icon: 'success'
						})
					}
				}
			})
		},
		handleMatch(id) {
			console.log('精准匹配:', id)
			uni.navigateTo({
				url: `/pages/matchmaker-workbench/precise-match?id=${id}`
			})
		},
		handleAdd() {
			uni.navigateTo({
				url: '/pages/matchmaker-workbench/add-resource'
			})
		},
		navigateToWorkbench() {
			uni.redirectTo({
				url: '/pages/matchmaker-workbench/index'
			})
		},
		navigateToMyResources() {
			// 已在我的资源页面，无需跳转
		},
		navigateToRanking() {
			uni.redirectTo({
				url: '/pages/matchmaker-workbench/ranking'
			})
		},
		navigateToMessage() {
			uni.redirectTo({
				url: '/pages/matchmaker-workbench/message'
			})
		},
		navigateToMine() {
			uni.redirectTo({
				url: '/pages/matchmaker-workbench/mine'
			})
		},
		navigateToQualityResources() {
			uni.navigateTo({
				url: '/pages/matchmaker-workbench/quality-resources'
			})
		},
		handleViewUserDetail(item) {
			// 跳转到客户详情页面，传递用户ID
			uni.navigateTo({
				url: `/pages/matchmaker-workbench/client-detail?id=${item.id}`
			})
		}
	}
}
</script>

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

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

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

	.header-right {
		.dropdown-icon {
			font-size: 24rpx;
			color: #9C27B0;
		}
	}
}

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

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

		.search-icon {
			font-size: 28rpx;
			margin-right: 12rpx;
		}

		.search-input {
			flex: 1;
			font-size: 26rpx;
			color: #333;
			border: none;
			outline: none;
			background: transparent;

			&::placeholder {
				color: #999;
			}
		}
	}
}

.content {
	flex: 1;
	overflow-y: auto;
	padding: 15rpx 20rpx 20rpx;
}

/* 优质资源按钮（紧贴加号按钮上方，稍微缩小） */
.quality-resources-section {
	position: fixed;
	right: 30rpx; /* 与加号按钮右边对齐 */
	bottom: 240rpx; /* 在加号按钮正上方留一点间距 */
	z-index: 999;

	.quality-resources-btn {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 8rpx;
		padding: 14rpx 22rpx; /* 比之前的 20rpx 略小 */
		background: linear-gradient(135deg, #FFF3E0 0%, #FFE0B2 100%);
		border-radius: 18rpx;
		border: 2rpx solid #FFB74D;

		.btn-icon {
			font-size: 28rpx; /* 略小 */
		}

		.btn-text {
			font-size: 24rpx; /* 略小 */
			font-weight: bold;
			color: #FF9800;
		}
	}
}

/* 资源卡片 */
.resource-item {
	background: #FFFFFF;
	border-radius: 16rpx;
	margin-bottom: 15rpx;
	padding: 20rpx;
	position: relative;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.05);

	/* 优质资源标签 */
	.quality-tag {
		position: absolute;
		top: 15rpx;
		right: 15rpx;
		background: linear-gradient(135deg, #FFD700 0%, #FFA000 100%);
		color: #FFFFFF;
		font-size: 20rpx;
		font-weight: bold;
		padding: 6rpx 14rpx;
		border-radius: 12rpx;
	}

	/* 头部：头像 + 名字/性别 + 审核状态 */
	.resource-header {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		gap: 15rpx;

		.resource-avatar {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			flex-shrink: 0;
			background: #E8E8E8;
		}

		.resource-avatar-placeholder {
			width: 80rpx;
			height: 80rpx;
			border-radius: 50%;
			flex-shrink: 0;
			background: linear-gradient(135deg, #E0E0E0, #BDBDBD);
		}

		.resource-info {
			flex: 1;

			.name-gender-row {
				display: flex;
				align-items: center;
				gap: 10rpx;

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

				.resource-gender {
					font-size: 24rpx;
					color: #666;
				}

				.status-tag {
					display: inline-block;
					padding: 4rpx 12rpx;
					border-radius: 12rpx;
					font-size: 20rpx;
					font-weight: bold;

					&.approved {
						background: #E8F5E8;
						color: #4CAF50;
					}

					&.pending {
						background: #FFF3E0;
						color: #FF9800;
					}
				}
			}
		}

		.right-action {
			.heart-icon {
				font-size: 28rpx;
			}
		}
	}

	/* 标签 */
	.labels-section {
		display: flex;
		flex-wrap: wrap;
		gap: 8rpx;
		margin-bottom: 12rpx;

		.label {
			display: inline-block;
			padding: 5rpx 14rpx;
			background: #F5F5F5;
			color: #666;
			border-radius: 12rpx;
			font-size: 22rpx;
		}
	}

	/* 择偶要求 */
	.requirement-section {
		margin-bottom: 12rpx;

		.requirement-text {
			font-size: 24rpx;
			color: #666;
			line-height: 1.4;
		}
	}

	/* 联系方式 */
	.contact-section {
		display: flex;
		align-items: center;
		margin-bottom: 15rpx;
		gap: 8rpx;

		.contact-label {
			font-size: 24rpx;
			color: #333;
			font-weight: bold;
		}

		.contact-number {
			flex: 1;
			font-size: 24rpx;
			color: #9C27B0;
		}

		.copy-btn {
			font-size: 22rpx;
			color: #9C27B0;
			font-weight: bold;
		}
	}

	/* 底部按钮 */
	.action-buttons {
		display: flex;
		justify-content: space-between;
		gap: 12rpx;

		.delete-btn {
			flex: 1;
			padding: 10rpx 20rpx;
			background: #FFEBEE;
			color: #E91E63;
			border-radius: 20rpx;
			font-size: 24rpx;
			font-weight: bold;
			text-align: center;
		}

		.match-btn {
			flex: 1;
			padding: 10rpx 20rpx;
			background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
			color: #FFFFFF;
			border-radius: 20rpx;
			font-size: 24rpx;
			font-weight: bold;
			text-align: center;
		}
	}
}

/* 添加按钮 */
.add-button {
	position: fixed;
	bottom: 130rpx;
	right: 30rpx;
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
	background: linear-gradient(135deg, #9C27B0 0%, #BA68C8 100%);
	display: flex;
	align-items: center;
	justify-content: center;
	box-shadow: 0 4rpx 16rpx rgba(156, 39, 176, 0.3);
	z-index: 1000;

	.add-button-icon {
		font-size: 50rpx;
		color: #FFFFFF;
		line-height: 1;
		font-weight: bold;
	}
}

/* 底部导航 */
.tabbar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 110rpx;
	background: #FFFFFF;
	border-top: 1rpx solid #F0F0F0;
	display: flex;
	justify-content: space-around;
	align-items: center;
	padding-bottom: env(safe-area-inset-bottom);

	.tabbar-item {
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 6rpx;
		padding: 10rpx 0;

		.tab-icon-wrapper {
			position: relative;

			.badge {
				position: absolute;
				top: -8rpx;
				right: -12rpx;
				background: #FF4444;
				color: #FFFFFF;
				font-size: 18rpx;
				font-weight: bold;
				min-width: 28rpx;
				height: 28rpx;
				padding: 0 6rpx;
				border-radius: 14rpx;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}

		.tab-icon {
			font-size: 36rpx;
		}

		.tab-text {
			font-size: 20rpx;
			color: #999;
		}

		&.active {
			.tab-text {
				color: #9C27B0;
				font-weight: bold;
			}
		}
	}
}
</style>