rtliveCompany/pages_task/caseCollection.vue

<template>
	<view class="container">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{height: statusBarHeight}"></view>
		
		<!-- 顶部导航栏 -->
		<view class="header">
			<view class="back-btn" @click="goBack">
				<image src="@/static/image/back.png" mode="aspectFill"></image>
			</view>
			<view class="title">病例征集</view>
			<view class="header-right">
				<text class="more-icon">⋯</text>
				<text class="more-icon">○</text>
			</view>
		</view>
		
		<scroll-view class="content" scroll-y>
			<!-- 表单标题 -->
			<view class="form-header">
				<view class="form-title">{{ formData.title }}</view>
				<view class="form-tips">
					<view class="tip-item">请您根据患者真实情况选择并填写</view>
					<view class="tip-item">我们承诺对您及患者所提供的所有信息严格保密</view>
				</view>
			</view>
			
			<!-- 表单内容 -->
			<view class="form-section">
				<!-- 患者姓名 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>1、患者姓名</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.patientName" 
						placeholder="请输入患者姓名"
					/>
				</view>
				
				<!-- 患者性别 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>2、患者性别</text>
					</view>
					<view class="radio-group">
						<view 
							class="radio-item" 
							:class="{ active: formData.patientGender === 'male' }"
							@click="formData.patientGender = 'male'">
							<view class="radio-icon">
								<text v-if="formData.patientGender === 'male'">✓</text>
							</view>
							<text>男</text>
						</view>
						<view 
							class="radio-item" 
							:class="{ active: formData.patientGender === 'female' }"
							@click="formData.patientGender = 'female'">
							<view class="radio-icon">
								<text v-if="formData.patientGender === 'female'">✓</text>
							</view>
							<text>女</text>
						</view>
					</view>
				</view>
				
				<!-- 患者年龄 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>3、患者年龄</text>
					</view>
					<input 
						class="form-input" 
						v-model="formData.patientAge" 
						type="number"
						placeholder="请输入患者年龄 (岁)"
					/>
				</view>
				
				<!-- 处方日期 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>4、处方日期</text>
					</view>
					<picker mode="date" :value="formData.prescriptionDate" @change="onDateChange">
						<view class="form-input picker-input" :class="{ placeholder: !formData.prescriptionDate }">
							{{ formData.prescriptionDate || '请选择处方日期' }}
							<text class="calendar-icon">📅</text>
						</view>
					</picker>
				</view>
				
				<!-- 心脏病类型 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>5、您被诊断的心脏病类型 (多选)</text>
					</view>
					<view class="checkbox-group">
						<view 
							class="checkbox-item" 
							:class="{ active: formData.diseaseTypes.includes('coronary') }"
							@click="toggleDiseaseType('coronary')">
							<view class="checkbox-icon">
								<text v-if="formData.diseaseTypes.includes('coronary')">✓</text>
							</view>
							<text>冠心病</text>
						</view>
						<view 
							class="checkbox-item" 
							:class="{ active: formData.diseaseTypes.includes('heartFailure') }"
							@click="toggleDiseaseType('heartFailure')">
							<view class="checkbox-icon">
								<text v-if="formData.diseaseTypes.includes('heartFailure')">✓</text>
							</view>
							<text>心力衰竭</text>
						</view>
						<view 
							class="checkbox-item" 
							:class="{ active: formData.diseaseTypes.includes('arrhythmia') }"
							@click="toggleDiseaseType('arrhythmia')">
							<view class="checkbox-icon">
								<text v-if="formData.diseaseTypes.includes('arrhythmia')">✓</text>
							</view>
							<text>心律失常</text>
						</view>
					</view>
				</view>
				
				<!-- 图片上传 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>6、图片上传</text>
					</view>
					<view class="upload-section">
						<view class="upload-item" v-for="(image, index) in formData.images" :key="index">
							<image class="uploaded-image" :src="image" mode="aspectFill"></image>
							<view class="delete-btn" @click="removeImage(index)">×</view>
						</view>
						<view class="upload-item upload-placeholder" @click="chooseImage" v-if="formData.images.length < 2">
							<text class="camera-icon">📷</text>
						</view>
					</view>
				</view>
			</view>
		</scroll-view>
		
		<!-- 提交按钮 -->
		<view class="submit-btn" @click="handleSubmit">提交</view>
	</view>
</template>

<script>
import { submitCaseCollection } from '@/api-js/medicationSurvey'
export default {
	data() {
		return {
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			activityId: '',
			formData: {
				title: '心脏相关疾病病例征集表',
				patientName: '',
				patientGender: 'male',
				patientAge: '',
				prescriptionDate: '',
				diseaseTypes: ['coronary', 'heartFailure'],
				images: []
			}
		}
	},
	onLoad(options) {
		if (options.activityId) {
			this.activityId = options.activityId
		}
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		onDateChange(e) {
			this.formData.prescriptionDate = e.detail.value
		},
		toggleDiseaseType(type) {
			const index = this.formData.diseaseTypes.indexOf(type)
			if (index > -1) {
				this.formData.diseaseTypes.splice(index, 1)
			} else {
				this.formData.diseaseTypes.push(type)
			}
		},
		chooseImage() {
			uni.chooseImage({
				count: 2 - this.formData.images.length,
				sizeType: ['compressed'],
				sourceType: ['album', 'camera'],
				success: (res) => {
					this.formData.images = [...this.formData.images, ...res.tempFilePaths]
				}
			})
		},
		removeImage(index) {
			this.formData.images.splice(index, 1)
		},
		async handleSubmit() {
			// 表单验证
			if (!this.formData.patientName) {
				uni.showToast({
					icon: 'none',
					title: '请输入患者姓名'
				})
				return
			}
			if (!this.formData.patientAge) {
				uni.showToast({
					icon: 'none',
					title: '请输入患者年龄'
				})
				return
			}
			if (!this.formData.prescriptionDate) {
				uni.showToast({
					icon: 'none',
					title: '请选择处方日期'
				})
				return
			}
			if (this.formData.diseaseTypes.length === 0) {
				uni.showToast({
					icon: 'none',
					title: '请至少选择一种心脏病类型'
				})
				return
			}
			if (this.formData.images.length === 0) {
				uni.showToast({
					icon: 'none',
					title: '请至少上传一张图片'
				})
				return
			}
			
			try {
				uni.showLoading({ title: '提交中...' })
				const res = await submitCaseCollection({
					activityId: this.activityId,
					...this.formData
				})
				uni.hideLoading()
				if (res.code === 200) {
					uni.showToast({
						icon: 'success',
						title: '提交成功'
					})
					setTimeout(() => {
						uni.navigateBack()
					}, 1500)
				} else {
					uni.showToast({
						icon: 'none',
						title: res.msg || '提交失败'
					})
				}
			} catch (e) {
				uni.hideLoading()
				uni.showToast({
					icon: 'none',
					title: '提交失败'
				})
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.container {
	min-height: 100vh;
	background: linear-gradient(180deg, #E6F3FF 0%, #FFFFFF 100%);
	display: flex;
	flex-direction: column;
}

.status-bar {
	width: 100%;
	background: transparent;
}

.header {
	position: relative;
	height: 88rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
	
	.back-btn {
		position: absolute;
		left: 24rpx;
		width: 40rpx;
		height: 40rpx;
		
		image {
			width: 100%;
			height: 100%;
		}
	}
	
	.title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
	}
	
	.header-right {
		position: absolute;
		right: 24rpx;
		display: flex;
		align-items: center;
		gap: 16rpx;
		
		.more-icon {
			font-size: 32rpx;
			color: #333;
		}
	}
}

.content {
	flex: 1;
	padding: 24rpx;
}

.form-header {
	margin-bottom: 32rpx;
	
	.form-title {
		font-size: 36rpx;
		font-weight: bold;
		color: #333;
		margin-bottom: 16rpx;
	}
	
	.form-tips {
		.tip-item {
			font-size: 24rpx;
			color: #666;
			margin-bottom: 8rpx;
		}
	}
}

.form-section {
	background: #fff;
	border-radius: 16rpx;
	padding: 24rpx;
}

.form-item {
	margin-bottom: 32rpx;
	
	&:last-child {
		margin-bottom: 0;
	}
	
	.form-label {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #333;
		margin-bottom: 16rpx;
		
		.required {
			color: #FF5030;
			margin-right: 4rpx;
		}
	}
	
	.form-input {
		width: 100%;
		height: 80rpx;
		padding: 0 24rpx;
		background: #f5f5f5;
		border-radius: 8rpx;
		font-size: 28rpx;
		color: #333;
		
		&.placeholder {
			color: #999;
		}
		
		&.picker-input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.calendar-icon {
				font-size: 32rpx;
			}
		}
	}
	
	.radio-group,
	.checkbox-group {
		display: flex;
		gap: 24rpx;
		
		.radio-item,
		.checkbox-item {
			display: flex;
			align-items: center;
			gap: 8rpx;
			font-size: 28rpx;
			color: #333;
			
			.radio-icon,
			.checkbox-icon {
				width: 40rpx;
				height: 40rpx;
				border: 2rpx solid #ddd;
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 24rpx;
				color: #388BFF;
			}
			
			.checkbox-icon {
				border-radius: 4rpx;
			}
			
			&.active {
				.radio-icon,
				.checkbox-icon {
					border-color: #388BFF;
					background: #E6F7FF;
				}
			}
		}
	}
	
	.upload-section {
		display: flex;
		gap: 16rpx;
		flex-wrap: wrap;
		
		.upload-item {
			width: 200rpx;
			height: 200rpx;
			border-radius: 8rpx;
			overflow: hidden;
			position: relative;
			
			.uploaded-image {
				width: 100%;
				height: 100%;
			}
			
			.delete-btn {
				position: absolute;
				top: 8rpx;
				right: 8rpx;
				width: 40rpx;
				height: 40rpx;
				background: rgba(0, 0, 0, 0.5);
				border-radius: 50%;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				color: #fff;
			}
			
			&.upload-placeholder {
				background: #f5f5f5;
				display: flex;
				align-items: center;
				justify-content: center;
				
				.camera-icon {
					font-size: 60rpx;
				}
			}
		}
	}
}

.submit-btn {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 88rpx;
	background: #388BFF;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: #fff;
	font-weight: 500;
	z-index: 100;
}
</style>