rtliveDoctor/pages_task/questionnaireForm.vue

<template>
	<view class="container">
		<image class="bg" src="@/static/image/bg_qestion.svg" mode="widthFix"></image>
		<view class="fixed-top-box" :style="{background: bgColor }">
			<view class="status_bar" :style="{height: statusBarHeight}"></view>
			<view class="back-box" @click="goBack">
				<image src="@/static/image/back.png" mode=""></image>
				<text class="title">问卷调查</text>
				<text></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>
					<radio-group @change="onGenderChange" class="radio-group">
						<label class="radio-item">
							<radio value="male" :checked="formData.patientGender === 'male'" color="#388BFF" />
							<text>男</text>
						</label>
						<label class="radio-item">
							<radio value="female" :checked="formData.patientGender === 'female'" color="#388BFF" />
							<text>女</text>
						</label>
					</radio-group>
				</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 || '请选择处方日期' }}
							<image class="w48 h48" src="@/static/image/calendar.png" mode=""></image>
						</view>
					</picker>
				</view>
				
				<!-- 并发症类型 -->
				<view class="form-item">
									<view class="form-label">
										<text class="required">*</text>
										<text>5、您被诊断的并发症类型 (多选)</text>
									</view>
									<checkbox-group @change="onComplicationTypeChange" class="checkbox-group">
										<label class="checkbox-item">
											<checkbox value="retinopathy" :checked="formData.complicationTypes.includes('retinopathy')" color="#388BFF" />
											<text>视网膜病变</text>
										</label>
										<label class="checkbox-item">
											<checkbox value="neuropathy" :checked="formData.complicationTypes.includes('neuropathy')" color="#388BFF" />
											<text>周围神经病变</text>
										</label>
										<label class="checkbox-item">
											<checkbox value="osteoporosis" :checked="formData.complicationTypes.includes('osteoporosis')" color="#388BFF" />
											<text>骨质疏松</text>
										</label>
									</checkbox-group>
								</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">
							<image class="w48 h48" src="@/static/image/icon_camera1.png" mode=""></image>
						</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 {
			top:0,
			statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px',
			activityId: '',
			formData: {
				title: '糖尿病并发症调研',
				patientName: '',
				patientGender: 'male',
				patientAge: '',
				prescriptionDate: '',
				complicationTypes: ['retinopathy', 'neuropathy'],
				images: []
			}
		}
	},
	onLoad(options) {
		if (options.activityId) {
			this.activityId = options.activityId
		}
	},
	onPageScroll(e) {
		//console.log(e)
		this.top = e.scrollTop;
	},
	computed: {
		// 计算属性的 getter
		bgColor: function() {
			var top = this.top / 30;
			return 'rgba(255, 255, 255,' + top + ')';
		},
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		onDateChange(e) {
			this.formData.prescriptionDate = e.detail.value
		},
		onGenderChange(e) {
			this.formData.patientGender = e.detail.value
		},
		onDiseaseTypeChange(e) {
			this.formData.diseaseTypes = e.detail.value
		},
		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="stylus">
	checkbox .wx-checkbox-input{
		border-radius:0 !important;
	}
	checkbox .wx-checkbox-input.wx-checkbox-input-checked {
		border-radius:0 !important;
	}
</style>
<style lang="scss" scoped>
.container {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	.bg{
		width: 100%;
		position: absolute;
		top: 0;
		left: 0;
	}
}
.status-bar {
	width: 100%;
	background: transparent;
}
.fixed-top-box{
			width: 100%;
			// background: linear-gradient(135deg, #66b2ef 0%, #0bb3f2 100%);
			position: fixed;
			top: 0;
			left: 0;
			z-index: 1000;
			.back-box{
				height: 88upx;
				padding-left: 22upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 24upx;
				image{
					width: 40upx;
					height: 40upx;
				}
				.title{
					font-family: PingFang SC, PingFang SC;
					font-weight: 600;
					font-size: 36rpx;
					color: #333333;
				}
			}
		}
.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 {
	margin-top:168rpx;
	flex: 1;
	padding: 24rpx;
	box-sizing: border-box;
}

.form-header {
	margin-bottom: 32rpx;
	
	.form-title {
		font-family: PingFang SC, PingFang SC;
		font-weight: 600;
		font-size: 40rpx;
		color: #333333;
		margin-bottom: 32rpx;
		text-align: center;
	}
	
	.form-tips {
		.tip-item {
			font-family: PingFang SC, PingFang SC;
			font-weight: 400;
			font-size: 28rpx;
			color: #666666;
			line-height: 44rpx;
			text-align: center;
		}
	}
}

.form-section {
	padding-bottom: 160rpx;
	
}

.form-item {
	background: #fff;
	padding: 24rpx 32rpx;
	margin-bottom: 20rpx;
	border-radius: 16rpx;
	&: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: 72rpx;
		padding: 0 24rpx;
		// background: #f5f5f5;
		border-radius: 12rpx 12rpx 12rpx 12rpx;
		border: 2rpx solid #F5F5F5;
		font-size: 28rpx;
		color: #333;
		
		&.placeholder {
			color: #C8C9CC
		}
		
		&.picker-input {
			display: flex;
			align-items: center;
			justify-content: space-between;
			
			.calendar-icon {
				font-size: 32rpx;
			}
		}
	}
	
	.radio-group,
	.checkbox-group {
		display: flex;
		flex-direction: column;
		gap: 48rpx;
		
		.radio-item,
		.checkbox-item {
			display: flex;
			align-items: center;
			gap: 16rpx;
			font-size: 28rpx;
			color: #333;
		}
	}
	
	.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;
	border-radius: 200rpx 200rpx 200rpx 200rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 32rpx;
	color: #fff;
	font-weight: 500;
	z-index: 100;
	margin:40rpx 32rpx;
}
</style>