xiangqinxiangmu/LiangZhiYUMao/pages/matchmaker-workbench/success-case-upload.vue

<template>
	<view class="success-case-upload">
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack"></view>
			<text class="header-title">撮合成功审核</text>
			<view class="placeholder"></view>
		</view>

		<scroll-view scroll-y class="content">
			<view class="form-container">
				<!-- 男方信息 -->
				<view class="form-section">
					<view class="section-title">
						<text class="title-icon male">♂</text>
						<text class="title-text">男方信息</text>
					</view>
					
					<!-- 选择男方用户 -->
					<view class="form-item">
						<text class="form-label">选择男方用户 <text class="required">*</text></text>
						<view class="picker-wrapper" @click="openMalePicker">
							<view class="selected-user" v-if="selectedMale">
								<image class="user-avatar" :src="selectedMale.avatarUrl || '/static/default-avatar.svg'" mode="aspectFill"></image>
								<text class="user-name">{{ selectedMale.name }}</text>
								<text class="user-age" v-if="selectedMale.age">{{ selectedMale.age }}岁</text>
							</view>
							<text class="placeholder-text" v-else>请选择或搜索男方用户</text>
							<view class="arrow-down"></view>
						</view>
					</view>
					
					<!-- 男方真实姓名 -->
					<view class="form-item">
						<text class="form-label">男方真实姓名 <text class="required">*</text></text>
						<input class="form-input" v-model="formData.maleRealName" placeholder="请输入男方真实姓名" />
					</view>
				</view>

				<!-- 女方信息 -->
				<view class="form-section">
					<view class="section-title">
						<text class="title-icon female">♀</text>
						<text class="title-text">女方信息</text>
					</view>
					
					<!-- 选择女方用户 -->
					<view class="form-item">
						<text class="form-label">选择女方用户 <text class="required">*</text></text>
						<view class="picker-wrapper" @click="openFemalePicker">
							<view class="selected-user" v-if="selectedFemale">
								<image class="user-avatar" :src="selectedFemale.avatarUrl || '/static/default-avatar.svg'" mode="aspectFill"></image>
								<text class="user-name">{{ selectedFemale.name }}</text>
								<text class="user-age" v-if="selectedFemale.age">{{ selectedFemale.age }}岁</text>
							</view>
							<text class="placeholder-text" v-else>请选择或搜索女方用户</text>
							<view class="arrow-down"></view>
						</view>
					</view>
					
					<!-- 女方真实姓名 -->
					<view class="form-item">
						<text class="form-label">女方真实姓名 <text class="required">*</text></text>
						<input class="form-input" v-model="formData.femaleRealName" placeholder="请输入女方真实姓名" />
					</view>
				</view>

				<!-- 成功凭证 -->
				<view class="form-section">
					<view class="section-title">
						<text class="title-icon proof">📷</text>
						<text class="title-text">成功凭证</text>
					</view>
					
					<view class="form-item">
						<text class="form-label">上传凭证图片 <text class="required">*</text></text>
						<text class="form-hint">请上传结婚证、订婚照片等凭证（最多9张）</text>
						<view class="image-upload-area">
							<view class="image-item" v-for="(img, index) in proofImages" :key="index">
								<image class="uploaded-image" :src="img" mode="aspectFill"></image>
								<view class="delete-btn" @click="removeImage(index)">×</view>
							</view>
							<view class="add-image-btn" v-if="proofImages.length < 9" @click="chooseImage">
								<text class="add-icon">+</text>
								<text class="add-text">添加图片</text>
							</view>
						</view>
					</view>
				</view>

				<!-- 案例信息 -->
				<view class="form-section">
					<view class="section-title">
						<text class="title-icon info">💕</text>
						<text class="title-text">案例信息</text>
					</view>
					
					<!-- 案例类型 -->
					<view class="form-item">
						<text class="form-label">案例类型 <text class="required">*</text></text>
						<view class="radio-group">
							<view class="radio-item" :class="{ active: formData.caseType === 1 }" @click="formData.caseType = 1">
								<view class="radio-circle"></view>
								<text class="radio-text">订婚</text>
							</view>
							<view class="radio-item" :class="{ active: formData.caseType === 2 }" @click="formData.caseType = 2">
								<view class="radio-circle"></view>
								<text class="radio-text">结婚</text>
							</view>
						</view>
					</view>
					
					<!-- 成功日期 -->
					<view class="form-item">
						<text class="form-label">成功日期</text>
						<picker mode="date" :value="formData.caseDate" @change="onDateChange">
							<view class="date-picker">
								<text class="date-text" v-if="formData.caseDate">{{ formData.caseDate }}</text>
								<text class="placeholder-text" v-else>请选择日期</text>
								<view class="calendar-icon">📅</view>
							</view>
						</picker>
					</view>
				</view>

				<!-- 提交按钮 -->
				<view class="submit-section">
					<button class="submit-btn" :disabled="submitting" @click="submitForm">
						<text v-if="submitting">提交中...</text>
						<text v-else>提交审核</text>
					</button>
					<text class="submit-hint">提交后将由平台审核，审核通过后可获得积分奖励</text>
				</view>
			</view>
		</scroll-view>

		<!-- 用户选择弹窗 -->
		<uni-popup ref="userPickerPopup" type="bottom">
			<view class="user-picker-popup">
				<view class="popup-header">
					<text class="popup-title">{{ pickerGender === 1 ? '选择男方用户' : '选择女方用户' }}</text>
					<view class="close-btn" @click="closeUserPicker">×</view>
				</view>
				
				<!-- 搜索框 -->
				<view class="search-box">
					<input class="search-input" v-model="searchKeyword" placeholder="搜索姓名或手机号" @input="onSearchInput" />
					<view class="search-icon">🔍</view>
				</view>
				
				<!-- 用户列表 -->
				<scroll-view scroll-y class="user-list">
					<view class="user-item" v-for="user in filteredUsers" :key="user.resourceId" @click="selectUser(user)">
						<image class="user-avatar" :src="user.avatarUrl || '/static/default-avatar.svg'" mode="aspectFill"></image>
						<view class="user-info">
							<text class="user-name">{{ user.name }}</text>
							<text class="user-detail">{{ user.age }}岁 · {{ user.phone }}</text>
						</view>
					</view>
					<view class="empty-tip" v-if="filteredUsers.length === 0">
						<text>暂无匹配的用户</text>
					</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

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

export default {
	data() {
		return {
			matchmakerId: null,
			formData: {
				maleRealName: '',
				femaleRealName: '',
				caseType: 2, // 默认结婚
				caseDate: ''
			},
			selectedMale: null,
			selectedFemale: null,
			proofImages: [],
			submitting: false,
			resubmitId: null, // 重新提交时的原记录ID
			
			// 用户选择器
			pickerGender: 1, // 1-男 2-女
			searchKeyword: '',
			maleUsers: [],
			femaleUsers: [],
			searchTimer: null
		}
	},
	computed: {
		filteredUsers() {
			const users = this.pickerGender === 1 ? this.maleUsers : this.femaleUsers
			if (!this.searchKeyword) {
				return users
			}
			const keyword = this.searchKeyword.toLowerCase()
			return users.filter(u => 
				(u.name && u.name.toLowerCase().includes(keyword)) ||
				(u.phone && u.phone.includes(keyword))
			)
		}
	},
	onLoad(options) {
		this.loadMatchmakerInfo()
		// 检查是否是重新提交
		if (options.resubmitId) {
			this.resubmitId = options.resubmitId
			this.loadResubmitData(options.resubmitId)
		}
	},
	onShow() {
		this.loadResources()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		
		async loadMatchmakerInfo() {
			try {
				const userInfo = uni.getStorageSync('userInfo')
				if (userInfo && userInfo.userId) {
					// 通过userId获取红娘信息
					const matchmakerInfo = await api.matchmaker.getByUserId(userInfo.userId)
				
					if (matchmakerInfo) {
						// 兼容不同字段名
						this.matchmakerId = matchmakerInfo.matchmakerId || matchmakerInfo.matchmaker_id || null
						
					}
					if (!this.matchmakerId) {
						uni.showToast({ title: '未找到红娘信息', icon: 'none' })
					}
				}
			} catch (e) {
				
				uni.showToast({ title: '获取红娘信息失败', icon: 'none' })
			}
		},
		
		// 加载重新提交的数据进行回显
		async loadResubmitData(id) {
			try {
				const res = await api.successCaseUpload.getAuditRecordDetail(id)
				
				if (res) {
					// 回显表单数据
					this.formData.maleRealName = res.maleRealName || ''
					this.formData.femaleRealName = res.femaleRealName || ''
					this.formData.caseType = res.caseType || 2
					this.formData.caseDate = res.caseDate || ''
					
					// 回显凭证图片（存储格式为JSON数组字符串）
					if (res.proofImages) {
						try {
							const images = JSON.parse(res.proofImages)
							this.proofImages = Array.isArray(images) ? images : []
						} catch (e) {
							// 兼容逗号分隔格式
							this.proofImages = res.proofImages.split(',').filter(img => img)
						}
					}
					
					// 回显男方用户信息
					if (res.maleUserId) {
						const maleInfo = res.maleUserInfo || {}
						this.selectedMale = {
							userId: res.maleUserId,
							name: maleInfo.name || res.maleRealName,
							avatarUrl: maleInfo.avatarUrl || '',
							age: maleInfo.age || null
						}
					}
					
					// 回显女方用户信息
					if (res.femaleUserId) {
						const femaleInfo = res.femaleUserInfo || {}
						this.selectedFemale = {
							userId: res.femaleUserId,
							name: femaleInfo.name || res.femaleRealName,
							avatarUrl: femaleInfo.avatarUrl || '',
							age: femaleInfo.age || null
						}
					}
				}
			} catch (e) {
			
				uni.showToast({ title: '加载数据失败', icon: 'none' })
			}
		},
		
		async loadResources() {
			if (!this.matchmakerId) {
				setTimeout(() => this.loadResources(), 500)
				return
			}
			
			try {
				// 加载男方用户列表（只查询已注册用户，user_id不为空）
				const maleRes = await api.myResource.getRegisteredDropdown(this.matchmakerId, 1)
				
				this.maleUsers = Array.isArray(maleRes) ? maleRes : (maleRes?.data || [])
				
				// 加载女方用户列表（只查询已注册用户，user_id不为空）
				const femaleRes = await api.myResource.getRegisteredDropdown(this.matchmakerId, 2)
				
				this.femaleUsers = Array.isArray(femaleRes) ? femaleRes : (femaleRes?.data || [])
			} catch (e) {
			
			}
		},
		
		openMalePicker() {
			this.pickerGender = 1
			this.searchKeyword = ''
			this.$refs.userPickerPopup.open()
		},
		
		openFemalePicker() {
			this.pickerGender = 2
			this.searchKeyword = ''
			this.$refs.userPickerPopup.open()
		},
		
		closeUserPicker() {
			this.$refs.userPickerPopup.close()
		},
		
		selectUser(user) {
			if (this.pickerGender === 1) {
				this.selectedMale = user
				// 自动填充真实姓名（每次选择都更新）
				this.formData.maleRealName = user.name || ''
			} else {
				this.selectedFemale = user
				// 自动填充真实姓名（每次选择都更新）
				this.formData.femaleRealName = user.name || ''
			}
			this.closeUserPicker()
		},
		
		onSearchInput() {
			// 防抖搜索
			if (this.searchTimer) {
				clearTimeout(this.searchTimer)
			}
			this.searchTimer = setTimeout(() => {
				this.searchResources()
			}, 300)
		},
		
		async searchResources() {
			if (!this.matchmakerId) return
			
			try {
				// 如果关键词为空，重新加载当前性别的完整列表
				if (!this.searchKeyword || !this.searchKeyword.trim()) {
					const res = await api.myResource.getRegisteredDropdown(this.matchmakerId, this.pickerGender)
					
					const users = Array.isArray(res) ? res : (res?.data || [])
					if (this.pickerGender === 1) {
						this.maleUsers = users
					} else {
						this.femaleUsers = users
					}
					return
				}
				
				// 使用已注册用户搜索接口（只返回user_id不为空的资源）
				const res = await api.myResource.searchRegistered(this.matchmakerId, this.searchKeyword.trim(), this.pickerGender)
				
				const users = Array.isArray(res) ? res : (res?.data || [])
				if (this.pickerGender === 1) {
					this.maleUsers = users
				} else {
					this.femaleUsers = users
				}
			} catch (e) {
				
			}
		},
		
		async chooseImage() {
			try {
				// uni.chooseImage 在 Promise 模式下返回 [err, res] 格式
				const [err, res] = await uni.chooseImage({
					count: 9 - this.proofImages.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera']
				})
				
			
				
				if (err) {
					
					return
				}
				
				if (res && res.tempFilePaths && res.tempFilePaths.length > 0) {
					uni.showLoading({ title: '上传中...' })
					
					for (const tempPath of res.tempFilePaths) {
					
						try {
							const uploadRes = await this.uploadImage(tempPath)
							
							if (uploadRes) {
								this.proofImages.push(uploadRes)
							}
						} catch (e) {
							
							uni.showToast({ title: '图片上传失败', icon: 'none' })
						}
					}
					
					uni.hideLoading()
					
				}
			} catch (e) {
				
			}
		},
		
		async uploadImage(tempPath) {
			return new Promise((resolve, reject) => {
				uni.uploadFile({
					url: 'https://api.zhongruanke.cn/api/success-case-upload/upload-image',
					filePath: tempPath,
					name: 'file',
					success: (res) => {
						try {
							const data = JSON.parse(res.data)
							if (data.code === 200 && data.data) {
								resolve(data.data)
							} else {
								uni.showToast({ title: data.message || '上传失败', icon: 'none' })
								reject(new Error(data.message))
							}
						} catch (e) {
							reject(e)
						}
					},
					fail: (err) => {
						reject(err)
					}
				})
			})
		},
		
		removeImage(index) {
			this.proofImages.splice(index, 1)
		},
		
		onDateChange(e) {
			this.formData.caseDate = e.detail.value
		},
		
		async submitForm() {
			// 表单验证
			if (!this.selectedMale) {
				uni.showToast({ title: '请选择男方用户', icon: 'none' })
				return
			}
			if (!this.selectedFemale) {
				uni.showToast({ title: '请选择女方用户', icon: 'none' })
				return
			}
			if (this.selectedMale.userId === this.selectedFemale.userId) {
				uni.showToast({ title: '男方和女方不能是同一人', icon: 'none' })
				return
			}
			if (!this.formData.maleRealName.trim()) {
				uni.showToast({ title: '请填写男方真实姓名', icon: 'none' })
				return
			}
			if (!this.formData.femaleRealName.trim()) {
				uni.showToast({ title: '请填写女方真实姓名', icon: 'none' })
				return
			}
			if (this.proofImages.length === 0) {
				uni.showToast({ title: '请上传至少一张成功凭证图片', icon: 'none' })
				return
			}
			
			this.submitting = true
			
			try {
				const submitData = {
					matchmakerId: this.matchmakerId,
					maleUserId: this.selectedMale.userId,  // 传递users表的user_id
					femaleUserId: this.selectedFemale.userId,  // 传递users表的user_id
					maleRealName: this.formData.maleRealName.trim(),
					femaleRealName: this.formData.femaleRealName.trim(),
					proofImages: this.proofImages,
					caseType: this.formData.caseType,
					caseDate: this.formData.caseDate || null
				}
				
				const res = await api.successCaseUpload.submit(submitData)
			
				
				// request函数成功时返回的是data字段的内容（这里是id）
				// 如果能走到这里说明请求成功了
				if (res !== undefined && res !== null) {
					uni.showToast({ title: '提交成功', icon: 'success' })
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({ title: '提交失败', icon: 'none' })
				}
			} catch (e) {
				
				uni.showToast({ title: '提交失败，请稍后重试', icon: 'none' })
			} finally {
				this.submitting = false
			}
		}
	}
}
</script>

<style lang="scss" scoped>
/* 确保所有元素使用border-box */
* {
	box-sizing: border-box;
}

.success-case-upload {
	min-height: 100vh;
	background: linear-gradient(180deg, #f8e1f4 0%, #fff5f5 100%);
	display: flex;
	flex-direction: column;
	width: 100%;
	overflow-x: hidden;
}

.header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 60rpx 30rpx 30rpx;
	background: linear-gradient(135deg, #d63384 0%, #9c27b0 100%);
	
	.back-btn {
		width: 60rpx;
		height: 60rpx;
		background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='white'%3E%3Cpath d='M15.41 7.41L14 6l-6 6 6 6 1.41-1.41L10.83 12z'/%3E%3C/svg%3E") no-repeat center;
		background-size: contain;
	}
	
	.header-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #fff;
	}
	
	.placeholder {
		width: 60rpx;
	}
}

.content {
	flex: 1;
	padding: 30rpx 30rpx 30rpx 30rpx;
	box-sizing: border-box;
}

.form-container {
	display: flex;
	flex-direction: column;
	gap: 30rpx;
	width: 100%;
}

.form-section {
	background: #fff;
	border-radius: 20rpx;
	padding: 30rpx;
	box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.05);
	box-sizing: border-box;
	width: 100%;
}

.section-title {
	display: flex;
	align-items: center;
	margin-bottom: 30rpx;
	
	.title-icon {
		font-size: 36rpx;
		margin-right: 16rpx;
		
		&.male { color: #2196F3; }
		&.female { color: #E91E63; }
		&.proof { color: #FF9800; }
		&.info { color: #9C27B0; }
	}
	
	.title-text {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
}

.form-item {
	margin-bottom: 30rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
}

.form-label {
	display: block;
	font-size: 28rpx;
	color: #666;
	margin-bottom: 16rpx;
	
	.required {
		color: #E91E63;
	}
}

.form-hint {
	display: block;
	font-size: 24rpx;
	color: #999;
	margin-bottom: 16rpx;
}

.form-input {
	width: 100%;
	height: 88rpx;
	background: #f5f5f5;
	border-radius: 12rpx;
	padding: 0 24rpx;
	font-size: 28rpx;
	box-sizing: border-box;
	border: none;
}

.form-textarea {
	width: 100%;
	height: 200rpx;
	background: #f5f5f5;
	border-radius: 12rpx;
	padding: 24rpx;
	font-size: 28rpx;
	box-sizing: border-box;
}

.char-count {
	display: block;
	text-align: right;
	font-size: 24rpx;
	color: #999;
	margin-top: 8rpx;
}

.picker-wrapper {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	background: #f5f5f5;
	border-radius: 12rpx;
	padding: 0 24rpx;
	
	.placeholder-text {
		color: #999;
		font-size: 28rpx;
	}
	
	.arrow-down {
		width: 24rpx;
		height: 24rpx;
		border-right: 4rpx solid #999;
		border-bottom: 4rpx solid #999;
		transform: rotate(45deg);
	}
}

.selected-user {
	display: flex;
	align-items: center;
	flex: 1;
	
	.user-avatar {
		width: 56rpx;
		height: 56rpx;
		border-radius: 50%;
		margin-right: 16rpx;
	}
	
	.user-name {
		font-size: 28rpx;
		color: #333;
		margin-right: 16rpx;
	}
	
	.user-age {
		font-size: 24rpx;
		color: #999;
	}
}

.image-upload-area {
	display: flex;
	flex-wrap: wrap;
	gap: 20rpx;
}

.image-item {
	position: relative;
	width: 200rpx;
	height: 200rpx;
	
	.uploaded-image {
		width: 100%;
		height: 100%;
		border-radius: 12rpx;
	}
	
	.delete-btn {
		position: absolute;
		top: -16rpx;
		right: -16rpx;
		width: 40rpx;
		height: 40rpx;
		background: #E91E63;
		border-radius: 50%;
		color: #fff;
		font-size: 28rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
}

.add-image-btn {
	width: 200rpx;
	height: 200rpx;
	background: #f5f5f5;
	border: 2rpx dashed #ccc;
	border-radius: 12rpx;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	
	.add-icon {
		font-size: 60rpx;
		color: #999;
	}
	
	.add-text {
		font-size: 24rpx;
		color: #999;
		margin-top: 8rpx;
	}
}

.radio-group {
	display: flex;
	gap: 40rpx;
}

.radio-item {
	display: flex;
	align-items: center;
	padding: 20rpx 40rpx;
	background: #f5f5f5;
	border-radius: 12rpx;
	
	&.active {
		background: linear-gradient(135deg, #d63384 0%, #9c27b0 100%);
		
		.radio-circle {
			border-color: #fff;
			
			&::after {
				content: '';
				width: 16rpx;
				height: 16rpx;
				background: #fff;
				border-radius: 50%;
			}
		}
		
		.radio-text {
			color: #fff;
		}
	}
	
	.radio-circle {
		width: 32rpx;
		height: 32rpx;
		border: 4rpx solid #999;
		border-radius: 50%;
		margin-right: 16rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	
	.radio-text {
		font-size: 28rpx;
		color: #333;
	}
}

.date-picker {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	background: #f5f5f5;
	border-radius: 12rpx;
	padding: 0 24rpx;
	
	.date-text {
		font-size: 28rpx;
		color: #333;
	}
	
	.placeholder-text {
		font-size: 28rpx;
		color: #999;
	}
	
	.calendar-icon {
		font-size: 36rpx;
	}
}

.submit-section {
	margin-top: 20rpx;
	padding: 0 0 60rpx 0;
	width: 100%;
	box-sizing: border-box;
}

.submit-btn {
	width: 100%;
	height: 96rpx;
	background: linear-gradient(135deg, #d63384 0%, #9c27b0 100%);
	border-radius: 48rpx;
	color: #fff;
	font-size: 32rpx;
	font-weight: bold;
	display: flex;
	align-items: center;
	justify-content: center;
	border: none;
	
	&[disabled] {
		opacity: 0.6;
	}
}

.submit-hint {
	display: block;
	text-align: center;
	font-size: 24rpx;
	color: #999;
	margin-top: 20rpx;
}

/* 用户选择弹窗 */
.user-picker-popup {
	background: #fff;
	border-radius: 30rpx 30rpx 0 0;
	max-height: 80vh;
	display: flex;
	flex-direction: column;
}

.popup-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 30rpx;
	border-bottom: 1rpx solid #eee;
	
	.popup-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #333;
	}
	
	.close-btn {
		font-size: 48rpx;
		color: #999;
		line-height: 1;
	}
}

.search-box {
	display: flex;
	align-items: center;
	margin: 20rpx 30rpx;
	background: #f5f5f5;
	border-radius: 40rpx;
	padding: 0 30rpx;
	
	.search-input {
		flex: 1;
		height: 80rpx;
		font-size: 28rpx;
	}
	
	.search-icon {
		font-size: 36rpx;
	}
}

.user-list {
	flex: 1;
	max-height: 60vh;
	padding: 0 30rpx;
}

.user-item {
	display: flex;
	align-items: center;
	padding: 24rpx 0;
	border-bottom: 1rpx solid #f5f5f5;
	
	.user-avatar {
		width: 80rpx;
		height: 80rpx;
		border-radius: 50%;
		margin-right: 24rpx;
	}
	
	.user-info {
		flex: 1;
		
		.user-name {
			display: block;
			font-size: 30rpx;
			color: #333;
			margin-bottom: 8rpx;
		}
		
		.user-detail {
			font-size: 24rpx;
			color: #999;
		}
	}
}

.empty-tip {
	padding: 60rpx 0;
	text-align: center;
	color: #999;
	font-size: 28rpx;
}
</style>