rtliveCompany/pages_task/fillTask.vue

<template>
	<view class="container">
		<Step :step="currentStep" :stepsData="currentText" />
		<scroll-view class="content" scroll-y>
			<!-- 驳回意见提示 -->
			<view class="rejection-banner" v-if="rejectionInfo">
				<view class="rejection-icon">✕</view>
				<view class="rejection-text">驳回意见: {{ rejectionInfo }}</view>
			</view>

			<!-- 基本信息 -->
			<view class="form-section">
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>任务归属</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.institution }"
						@click="showTaskPopup=true">
						{{ formData.institution || '请选择任务归属' }}
						<image class="icon" src="/static/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>归属项目</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.belongingProject }"
						@click="showBelongingPopup = true">
						{{ formData.belongingProject || '请选择归属项目' }}
						<image class="icon" src="/static/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>费用分摊</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.costAllocation }"
						@click="showPicker('费用分摊',costColumns)">
						{{ formData.costAllocation || '请选择费用分摊主体' }}
						<image class="icon" src="/static/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text>添加任务备注</text>
					</view>
					<EvanSwitch v-model="formData.addRemark"></EvanSwitch>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>归属类型</text>
					</view>
					<text class="txt">院内</text>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>任务类型</text>
					</view>
					<view class="form-input picker-input" :class="{ placeholder: !formData.taskType }"
						@click="showPicker('任务类型',taskTypeColumns)">
						{{ formData.taskType || '请选择任务类型' }}
						<image class="icon" src="/static/image/icon_more.png"></image>
					</view>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>计划开始时间</text>
					</view>
					<picker mode="date" :value="formData.planStartTime" fields="day" @change="onPlanStartTimeChange">
						<view class="form-input picker-input" :class="{ placeholder: !formData.planStartTime }">
							{{ formData.planStartTime || '请选择计划开始时间' }}
							<image class="icon" src="/static/image/icon_more.png"></image>
						</view>
					</picker>
				</view>

				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>计划结束时间</text>
					</view>
					<picker mode="date" :value="formData.planEndTime" fields="day" @change="onPlanEndTimeChange">
						<view class="form-input picker-input" :class="{ placeholder: !formData.planEndTime }">
							{{ formData.planEndTime || '请选择计划结束时间' }}
							<image class="icon" src="/static/image/icon_more.png"></image>
						</view>
					</picker>
				</view>

				<!-- 观看方式 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>观看方式</text>
					</view>
					<view class="radio-group">
						<label class="radio-item" :class="{ active: formData.viewMode === '公开' }"
							@click="formData.viewMode = '公开'">
							<image class="radio-circle" v-if="formData.viewMode === '公开'"
								src="/static/image/icon_circle_sel.png"></image>
							<image class="radio-circle" v-else src="/static/image/icon_circle.png"></image>
							<text>公开</text>
						</label>
						<label class="radio-item" :class="{ active: formData.viewMode === '加密' }"
							@click="formData.viewMode = '加密'">
							<image class="radio-circle" v-if="formData.viewMode === '加密'"
								src="/static/image/icon_circle_sel.png"></image>
							<image class="radio-circle" v-else src="/static/image/icon_circle.png"></image>
							<text>加密</text>
						</label>
					</view>
				</view>

				<!-- 观看要求 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>观看要求</text>
					</view>
					<view class="radio-group">
						<label class="radio-item" :class="{ active: formData.viewRequire === '登录账户' }"
							@click="formData.viewRequire = '登录账户'">
							<!-- <view class="radio-circle" :class="{ checked: formData.viewRequire === '登录账户' }"></view> -->
							<image class="radio-circle" v-if="formData.viewRequire === '登录账户'"
								src="/static/image/icon_circle_sel.png"></image>
							<image class="radio-circle" v-else src="/static/image/icon_circle.png"></image>
							<text>登录账户</text>
						</label>
						<label class="radio-item" :class="{ active: formData.viewRequire === '认证客户' }"
							@click="formData.viewRequire = '认证客户'">
							<image class="radio-circle" v-if="formData.viewRequire === '认证客户'"
								src="/static/image/icon_circle_sel.png"></image>
							<image class="radio-circle" v-else src="/static/image/icon_circle.png"></image>
							<text>认证客户</text>
						</label>
					</view>
				</view>
			</view>
			<view class="form-section">
				<!-- 直播间标题 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>直播间标题</text>
					</view>
					<view class="form-input">
						<input v-model="formData.roomTitle" placeholder="请输入直播间标题" />
					</view>
				</view>

				<!-- 封面图 -->
				<view class="form-item column baseline">
					<view class="form-label">
						<text class="required">*</text>
						<text>封面图</text>
					</view>
					<view class="upload-area" @click="chooseCoverImage">
						<image v-if="formData.coverImage" :src="formData.coverImage" class="cover-image" />
						<view v-else class="upload-placeholder">
							<text>点击上传封面图</text>
						</view>
						<image v-if="formData.coverImage" class="delete-icon" src="/static/image/icon_cross.png"
							@click.stop="deleteCoverImage" />
					</view>
				</view>
			</view>
			<view class="form-section">
				<!-- 申请补充讲者任务 -->
				<view class="form-item">
					<view class="form-label">
						<text class="required">*</text>
						<text>申请补充讲者任务</text>
					</view>
					<EvanSwitch v-model="formData.applySpeaker"></EvanSwitch>
				</view>
			</view>
		</scroll-view>

		<view class="next-button" @click="toNext">下一步</view>

		<!-- 通用选择器 -->
		<u-picker :title='pickerTitle' :show="showPickerVisible" confirmColor='#576B95' ref="uPicker"
			:columns="pickerData" @confirm="confirm" @cancel="cancel">
		</u-picker>

		<!-- 归属项目弹窗 -->
		<u-popup :show="showBelongingPopup" mode="bottom" round="20" @close="closePopup" closeable>
			<view class="popup-content p32">
				<view class="popup-header">
					<text class="title">归属项目</text>
				</view>
				<view class="search-box">
					<image class="icon" src="/static/image/search.png"></image>
					<u-input v-model="searchKeyword" placeholder="请输入归属项目" border="none" clearable />
				</view>
				<scroll-view scroll-y class="project-list">
					<view v-for="(project, index) in filteredProjects" :key="index" class="project-item"
						:class="{ active: selectedIndex === index }" @tap="selectProject(project, index)">
						<text class="project-name">{{ project.name }}</text>
						<image class="icon" src="/static/image/icon_right.png"></image>
					</view>
				</scroll-view>
			</view>
		</u-popup>

		<!-- 任务归属弹窗 -->
		<u-popup :show="showTaskPopup" mode="bottom" round="16" @close="showTaskPopup = false" safeAreaInsetBottom>
			<view class="popup-content">
				<view class="popup-header">
					<text class="popup-title">任务归属</text>
					<image class="close-icon" src="/static/image/icon_cross.png" @click="showTaskPopup=false"></image>
				</view>
				<view class="two-level-container">
					<scroll-view class="primary-list" scroll-y>
						<view v-for="(item, index) in primaryOptions" :key="index" class="primary-item"
							:class="{ 'primary-active': activePrimaryIndex === index }"
							@click="handlePrimarySelect(index)">
							<text class="primary-text">{{ item.name }}</text>
						</view>
					</scroll-view>
					<scroll-view class="secondary-list" scroll-y>
						<view v-for="(subItem, subIndex) in currentSecondaryOptions" :key="subIndex"
							class="secondary-item" :class="{ 'secondary-active': selectedSecondaryItem === subItem }"
							@click="handleSecondarySelect(subItem)">
							<text class="secondary-text">{{ subItem }}</text>
							<u-icon v-if="selectedSecondaryItem === subItem" name="checkbox-mark" color="#2979ff"
								size="20" />
						</view>
					</scroll-view>
				</view>
				<view class="popup-footer">
					<button class="confirm-btn" @click="handleConfirm">确定</button>
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import Step from '@/pages_task/components/step.vue'
	import EvanSwitch from '@/components/evan-switch.vue'

	export default {
		components: {
			Step,
			EvanSwitch
		},
		data() {
			return {
				showTaskPopup: false,
				primaryOptions: [{
						id: 1,
						name: '中药事业部',
						children: ['中药一部', '中药二部', '中药三部', '中药四部']
					},
					{
						id: 2,
						name: '事业1组',
						children: ['事业1组-项目部', '事业1组-市场部', '事业1组-技术部']
					},
					{
						id: 3,
						name: '学术研究部',
						children: ['学术研究一部', '学术研究二部', '学术研究三部']
					},
					{
						id: 4,
						name: '湖南省药学服务公司',
						children: ['药学服务一部', '药学服务二部', '药学服务三部']
					},
					{
						id: 5,
						name: '医药事业部',
						children: ['医药一部', '医药二部', '医药三部']
					},
					{
						id: 6,
						name: '医疗事业部',
						children: ['医疗一部', '医疗二部', '医疗三部']
					},
					{
						id: 7,
						name: '健康管理部',
						children: ['健康管理一部', '健康管理二部']
					},
					{
						id: 8,
						name: '医疗事业部',
						children: ['医疗一部', '医疗二部', '医疗三部']
					},
					{
						id: 9,
						name: '健康管理部',
						children: ['健康管理一部', '健康管理二部']
					}
				],
				activePrimaryIndex: 0,
				currentSecondaryOptions: [],
				selectedSecondaryItem: '',
				selectedPrimaryItem: null,
				selectedIndex: -1,
				selectedProject: null,
				belongingprojects: [{
						name: '学术交流项目'
					},
					{
						name: '科学调研项目'
					},
					{
						name: '2026年1月医学研究项目'
					},
					{
						name: '2026年2月医学研究项目'
					},
					{
						name: '2026年3月医学研究项目'
					}
				],
				searchKeyword: '',
				showBelongingPopup: false,
				showPickerVisible: false,
				costColumns: [
					['主体1', '主体2', '主体3']
				],
				taskTypeColumns: [
					['类型1', '类型2', '类型3']
				],
				currentStep: 1,
				currentText: [{
						id: 1,
						stepNumber: 1,
						title: '填写任务'
					},
					{
						id: 2,
						stepNumber: 2,
						title: '积分设置'
					}
				],
				rejectionInfo: '',
				// 核心修复：所有表单字段统一放在formData里
				formData: {
					costAllocation: '',
					planStartTime: '',
					planEndTime: '',
					institution: '',
					belongingProject: '',
					taskType: '',
					addRemark: false,
					viewMode: '公开', // 观看方式默认值
					viewRequire: '登录账户', // 观看要求默认值
					roomTitle: '', // 直播间标题
					coverImage: '', // 封面图
					applySpeaker: true // 申请补充讲者任务
				},
				pickerTitle: '默认标题',
				pickerData: []
			}
		},
		onLoad(options) {
			if (options.rejectionInfo) {
				this.rejectionInfo = decodeURIComponent(options.rejectionInfo)
			}
			// 初始化二级选项
			this.currentSecondaryOptions = this.primaryOptions[0]?.children || []
		},
		computed: {
			filteredProjects() {
				if (!this.searchKeyword.trim()) {
					return this.belongingprojects;
				}
				return this.belongingprojects.filter(project =>
					project.name.includes(this.searchKeyword)
				);
			}
		},
		methods: {
			// 封面图上传
			chooseCoverImage() {
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						this.formData.coverImage = res.tempFilePaths[0]
					}
				})
			},
			// 删除封面图
			deleteCoverImage() {
				this.formData.coverImage = ''
			},
			// 一级分类选择
			handlePrimarySelect(index) {
				this.activePrimaryIndex = index;
				this.currentSecondaryOptions = this.primaryOptions[index].children || [];
				this.selectedSecondaryItem = '';
			},
			// 二级分类选择
			handleSecondarySelect(item) {
				this.selectedSecondaryItem = item;
				this.selectedPrimaryItem = this.primaryOptions[this.activePrimaryIndex];
			},
			// 任务归属确认
			handleConfirm() {
				if (this.selectedSecondaryItem) {
					const displayText = `${this.selectedPrimaryItem.name} > ${this.selectedSecondaryItem}`;
					this.formData.institution = displayText;
					this.showTaskPopup = false;
				} else {
					uni.showToast({
						title: '请选择二级部门',
						icon: 'none'
					});
				}
			},
			// 关闭归属项目弹窗
			closePopup() {
				this.showBelongingPopup = false;
				this.searchKeyword = '';
				this.selectedIndex = -1;
			},
			// 选择归属项目
			selectProject(project, index) {
				this.selectedIndex = index;
				this.selectedProject = project;
				this.formData.belongingProject = project.name;
				setTimeout(() => {
					this.showBelongingPopup = false;
					this.searchKeyword = '';
					this.selectedIndex = -1;
				}, 300);
			},
			// 打开通用选择器
			showPicker(title, data) {
				this.pickerData = data
				this.pickerTitle = title
				this.showPickerVisible = true
			},
			// 通用选择器确认
			confirm(e) {
				if (e.value && e.value.length > 0) {
					if (this.pickerTitle === '费用分摊') {
						this.formData.costAllocation = e.value[0]
					} else if (this.pickerTitle === '任务类型') {
						this.formData.taskType = e.value[0]
					}
				}
				this.showPickerVisible = false
			},
			// 通用选择器取消
			cancel() {
				this.showPickerVisible = false
			},
			// 下一步
			toNext() {
				uni.navigateTo({
					url: '/pages_task/editSelectCustomer'
				})
			},
			// 计划开始时间选择
			onPlanStartTimeChange(e) {
				this.formData.planStartTime = e.detail.value
			},
			// 计划结束时间选择
			onPlanEndTimeChange(e) {
				this.formData.planEndTime = e.detail.value
			}
		}
	}
</script>

<style lang="scss" scoped>
	.column {
		flex-direction: column;
	}

	.baseline {
		align-items: baseline !important;
	}

	// 页面容器样式
	.container {
		min-height: 100vh;
		background: #F7F8FA;
		display: flex;
		flex-direction: column;
		position: relative;

		// 顶部渐变背景
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			width: 100%;
			height: 544rpx;
			background: linear-gradient(180deg, #E4EFFE 0%, rgba(228, 239, 254, 0) 100%);
		}

		// 滚动内容区
		.content {
			flex: 1;
			box-sizing: border-box;

			// 驳回提示
			.rejection-banner {
				display: flex;
				align-items: center;
				padding: 24rpx;
				background: #FF5030;
				color: #fff;
				margin: 24rpx;
				border-radius: 8rpx;

				.rejection-icon {
					width: 40rpx;
					height: 40rpx;
					border-radius: 50%;
					background: rgba(255, 255, 255, 0.3);
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 24rpx;
					margin-right: 16rpx;
				}

				.rejection-text {
					flex: 1;
					font-size: 28rpx;
					line-height: 1.5;
				}
			}

			// 表单区域
			.form-section {
				background: #fff;
				margin: 20rpx;
				border-radius: 24rpx;
				padding: 32rpx;

				// 表单项
				.form-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					border-bottom: 1px solid #EBEDF0;
					padding: 30rpx 0;

					&:last-child {
						border-bottom: 0;
					}

					// 表单标签
					.form-label {
						display: flex;
						align-items: center;
						font-size: 28rpx;
						color: #333;
						margin-bottom: 16rpx;

						.required {
							color: #CF3546;
							margin-right: 4rpx;
						}
					}

					// 纯文本展示
					.txt {
						font-size: 28rpx;
						color: #333333;
					}

					// 输入框容器
					.form-input {
						flex: 1;
						font-size: 28rpx;
						color: #C8C9CC;
						text-align: end;

						&.placeholder {
							color: #C8C9CC;
						}

						&.picker-input {
							display: flex;
							align-items: center;
							justify-content: flex-end;
						}

						.icon {
							width: 36rpx;
							height: 36rpx;
						}
					}

					// 单选组样式（嵌套到form-item里）
					.radio-group {
						display: flex;
						gap: 40rpx;

						.radio-item {
							display: flex;
							align-items: center;
							font-size: 28rpx;

							.radio-circle {
								width: 36rpx;
								height: 36rpx;
								border-radius: 50%;
								margin-right: 16rpx;
							}

						}
					}

					// 上传区域样式（嵌套到form-item里）
					.upload-area {
						position: relative;
						width: 200rpx;
						height: 120rpx;
						border: 1rpx dashed #C8C9CC;
						border-radius: 8rpx;
						display: flex;
						align-items: center;
						justify-content: center;

						.cover-image {
							width: 100%;
							height: 100%;
							border-radius: 8rpx;
						}

						.upload-placeholder {
							color: #C8C9CC;
							font-size: 24rpx;
						}

						.delete-icon {
							position: absolute;
							top: -12rpx;
							right: -12rpx;
							width: 32rpx;
							height: 32rpx;
							background: #fff;
							border-radius: 50%;
						}
					}
				}
			}
		}

		// 下一步按钮
		.next-button {
			text-align: center;
			font-size: 32rpx;
			color: #FFFFFF;
			height: 88rpx;
			line-height: 88rpx;
			background: #388BFF;
			border-radius: 200rpx;
			margin: 32rpx;
		}
	}

	// 弹窗样式
	::v-deep .u-popup__content {
		border-radius: 40rpx 40rpx 0 0 !important;
	}

	.popup-content {
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		height: 70vh;
		background-color: #fff;

		.popup-header {
			padding: 40rpx 30rpx 20rpx;
			text-align: center;

			.close-icon {
				width: 44rpx;
				height: 44rpx;
				position: absolute;
				right: 32rpx;
			}

			flex-shrink: 0;

			.title,
			.popup-title {
				font-size: 32rpx;
				font-weight: 600;
				color: #333;
			}
		}

		.search-box {
			display: flex;
			align-items: center;
			background: #F7F8FA;
			border-radius: 38rpx;
			padding: 16rpx 28rpx;
			margin-bottom: 24rpx;

			.icon {
				width: 26rpx;
				height: 26rpx;
				margin-right: 10rpx;
			}
		}

		.project-list {
			height: calc(100% - 200rpx);

			.project-item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 28rpx 0;
				font-size: 28rpx;
				border-bottom: 1rpx solid #eee;

				&:active {
					background-color: #f9f9f9;
				}

				&.active {
					.project-name {
						font-weight: 500;
						color: #388BFF;
					}

					.icon {
						opacity: 1;
					}
				}

				.project-name {
					color: #333;
					transition: all 0.2s ease;
				}

				.icon {
					width: 36rpx;
					height: 36rpx;
					opacity: 0;
					transition: opacity 0.2s ease;
				}
			}
		}

		.two-level-container {
			display: flex;
			flex: 1;
			border-top: 1rpx solid #f5f5f5;

			.primary-list {
				width: 40%;
				background-color: #f8f9fa;

				.primary-item {
					padding: 28rpx 20rpx;
					background: #F2F3F5;

					&:active {
						background: #FFFFFF;
					}

					&.primary-active {
						position: relative;
						background-color: #fff;

						&::before {
							content: '';
							position: absolute;
							top: 50%;
							left: 0;
							transform: translateY(-50%);
							width: 8rpx;
							height: 32rpx;
							background: #388BFF;
						}

						.primary-text {
							font-weight: 500;
						}
					}

					.primary-text {
						font-size: 28rpx;
						color: #666;
					}
				}
			}

			.secondary-list {
				width: 60%;
				padding: 0 20rpx;

				.secondary-item {
					display: flex;
					justify-content: space-between;
					align-items: center;
					padding: 28rpx 10rpx;
					font-size: 28rpx;
					color: #333;

					&.secondary-active {
						font-weight: 500;
						color: #388BFF;
					}
				}
			}
		}

		.popup-footer {
			padding: 20rpx 30rpx 40rpx;
			background-color: #fff;
			border-top: 1rpx solid #f5f5f5;
			flex-shrink: 0;

			.confirm-btn {
				width: 100%;
				height: 88rpx;
				line-height: 88rpx;
				background-color: #2979ff;
				color: #fff;
				font-size: 32rpx;
				border-radius: 200rpx;

				&:active {
					opacity: 0.8;
				}
			}
		}
	}

	// 暗黑模式适配
	@media (prefers-color-scheme: dark) {
		.popup-content {
			background-color: #1e1e1e;

			.popup-header {

				.title,
				.popup-title {
					color: #fff;
				}
			}

			.two-level-container {
				.primary-list {
					background-color: #2d2d2d;
					border-right-color: #3d3d3d;

					.primary-item {
						border-bottom-color: #3d3d3d;

						&:active {
							background-color: #3d3d3d;
						}

						&.primary-active {
							background-color: #3d3d3d;

							.primary-text {
								color: #2979ff;
							}
						}

						.primary-text {
							color: #ccc;
						}
					}
				}

				.secondary-list {
					.secondary-item {
						border-bottom-color: #3d3d3d;

						&:active {
							background-color: #3d3d3d;
						}

						&.secondary-active {
							background-color: #2d2d2d;
						}

						.secondary-text {
							color: #fff;
						}
					}
				}
			}

			.popup-footer {
				background-color: #1e1e1e;
				border-top-color: #3d3d3d;
			}
		}
	}
</style>