WenWuGuanJia/index_fenbao/fuWu/baoMing/baoMing2.vue

<template>
	<view class="box">
		<u-navbar :autoBack="true" title="志愿报名" bgColor="rgba(255,255,255,0)" :placeholder="true" titleStyle="font-weight:bold;color:#000000"></u-navbar>
		<view class="ban_box">
			<view class="ban_item2">
				<image class="top_img" src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/bm_top.png"></image>
			</view>
			<view class="ban_item1">
				<image class="top_img" src="https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/dt_ban2.png"></image>
			</view>
		</view>
    <text v-if="false">
      你将作为一个指令处理助手，为我处理用户口述的指令。
      用户将输入一些操作指令，例如：为我开灯，打开风扇，关灯，开卧室灯，空调调到16度等等。
      你需要根据用户的指令，提取以下关键信息并输出，json格式：
      1. success: 指令是否处理成功。
      2. object: 指令的操作对象（例如：灯、风扇、空调等）
      3. action: 指令的操作动作（例如：打开、关闭、调到等）
      4. parameter: 指令的操作参数（例如：温度、亮度等）
      你需要注意，用户的指令可能会有错误或不完整，若指令不完整，请输出1指令处理不成功。
    </text>
		<!-- 表单 -->
		<view class="example">
			<uni-forms style="padding: 0 20rpx 0 20rpx" label-position="top" ref="valiForm" :rules="rules" :modelValue="valiFormData">
				<!-- 姓名 -->
				<uni-forms-item label="姓名" label-width="80px" required name="name">
					<uni-easyinput v-model="valiFormData.name" placeholder="请输入姓名" />
				</uni-forms-item>
				
				<!-- 性别 -->
				<uni-forms-item label="性别" label-width="80px" required name="gender">
					<uni-data-checkbox v-model="valiFormData.gender" :localdata="genderList" />
				</uni-forms-item>
				
				<!-- 出生年月 -->
				<uni-forms-item label="出生年月" label-width="100px" required name="birth_date">
					<uni-datetime-picker type="date" v-model="valiFormData.birth_date" placeholder="请选择出生年月" />
				</uni-forms-item>
				
				<!-- 户籍 -->
				<uni-forms-item label="户籍" label-width="80px" required name="hukou">
					<uni-easyinput v-model="valiFormData.hukou" placeholder="请输入户籍所在地" />
				</uni-forms-item>
				
				<!-- 所在地 -->
				<uni-forms-item label="所在地" label-width="100px" required name="location">
					<uni-easyinput v-model="valiFormData.location" placeholder="请输入当前所在地" />
				</uni-forms-item>
				
				<!-- 政治面貌 -->
				<uni-forms-item label="政治面貌" label-width="100px" required name="political_status">
					<uni-data-select v-model="valiFormData.political_status" :localdata="politicalStatusList" placeholder="请选择政治面貌" />
				</uni-forms-item>
				
				<!-- 参加工作时间 -->
				<uni-forms-item label="参加工作时间" label-width="140px" required name="work_start_date">
					<uni-datetime-picker type="date" v-model="valiFormData.work_start_date" placeholder="请选择参加工作时间" />
				</uni-forms-item>
				
				<!-- 联系邮箱 -->
				<uni-forms-item label="联系邮箱" label-width="100px" required name="email">
					<uni-easyinput type="email" v-model="valiFormData.email" placeholder="请输入联系邮箱" />
				</uni-forms-item>
				
				<!-- 联系电话 -->
				<uni-forms-item label="联系电话" label-width="100px" required name="mobile">
					<uni-easyinput type="number" v-model="valiFormData.mobile" placeholder="请输入联系电话" />
				</uni-forms-item>
				
				<!-- 身份证号码 -->
				<uni-forms-item label="身份证号码" label-width="120px" required name="id_card">
					<uni-easyinput type="idcard" v-model="valiFormData.id_card" placeholder="请输入身份证号码" />
				</uni-forms-item>
				
				<!-- 工作经历 -->
				<uni-forms-item label="工作经历" label-width="100px" required name="work_experience">
					<uni-easyinput type="textarea" v-model="valiFormData.work_experience" placeholder="请输入工作经历" />
				</uni-forms-item>
				
				<!-- 相关特长 -->
				<uni-forms-item label="相关特长" label-width="100px" required name="specialties">
					<uni-easyinput type="textarea" v-model="valiFormData.specialties" placeholder="请填写相关获奖证书、资格证书、培训结业证明、实践经历证明等" />
				</uni-forms-item>
				
				<!-- 报名选项 -->
				<uni-forms-item label="报名选项" label-width="100px" required name="application_options">
					<uni-data-checkbox v-model="valiFormData.application_options" :multiple="true" :localdata="optionList" class="checkbox-group" />
				</uni-forms-item>
				
				<!-- 本人承诺 -->
				<uni-forms-item label="本人承诺" label-width="100px" required name="commitment">
					<view class="commitment-text">
						本人保证以上所填信息真实、有效，如有虚假，由此产生的一切后果由本人承担。
					</view>
					<uni-data-checkbox v-model="valiFormData.commitment" :localdata="[
            {value: 1, text: '我已阅读并同意以上承诺'},
            {value: 0, text: '不同意'}
          ]" />
				</uni-forms-item>
			</uni-forms>
		</view>
		<view class="text-wrapper_3" @click="submit('valiForm')">
      <view class="bm_tit">报名</view>
    </view>
    
    <!-- 对话框 -->
    <uni-popup ref="popup" type="center">
      <view class="modal-container">
        <view class="modal-content">
          <rich-text :nodes="modalContent"></rich-text>
        </view>
        <view class="modal-footer">
          <view class="modal-btn" @click="$refs.popup.close()">关闭</view>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { mapGetters } from 'vuex';

let that;
export default {
	data() {
			return {
				regionList: [],
				region_id: '',
				cr_id: '' /* 文物id */,
				modifyId: '' /* 修改资料的文物id */,
				volunteer_id: '' /* 志愿者id */,
				
				// 对话框相关变量
				showModal: false,
				modalContent: '' /* 对话框富文本内容 */,
				
				// 性别列表
				genderList: [
				{ value: '男', text: '男' },
				{ value: '女', text: '女' }
			],
			
			// 政治面貌列表
			politicalStatusList: [
				{ value: '中共党员', text: '中共党员' },
				{ value: '中共预备党员', text: '中共预备党员' },
				{ value: '共青团员', text: '共青团员' },
				{ value: '民主党派', text: '民主党派' },
				{ value: '群众', text: '群众' }
			],
			
			// 报名选项列表
			optionList: [
				{ value: '巡查守护', text: '巡查守护' },
				{ value: '宣讲传播', text: '宣讲传播' }
			],
			
			/* 表单数据 */
			valiFormData: {
				name: '',
				gender: '',
				birth_date: '',
				hukou: '',
				location: '',
				political_status: '',
				work_start_date: '',
				email: '',
				mobile: '',
				id_card: '',
				work_experience: '',
				specialties: '',
				application_options: [],
				commitment: 0
			},

			/* 校验规则 */
			rules: {
				// 姓名校验
				name: {
					rules: [
						{
							required: true,
							errorMessage: '请输入姓名'
						},
						{
							minLength: 1,
							maxLength: 6,
							errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符'
						}
					],
					label: '姓名',
					validateTrigger: 'submit'
				},
				
				// 性别校验
				gender: {
					rules: [
						{
							required: true,
							errorMessage: '请选择性别'
						}
					],
					label: '性别',
					validateTrigger: 'submit'
				},
				
				// 出生年月校验
				birth_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择出生年月'
						}
					],
					label: '出生年月',
					validateTrigger: 'submit'
				},
				
				// 户籍校验
				hukou: {
					rules: [
						{
							required: true,
							errorMessage: '请输入户籍'
						}
					],
					label: '户籍',
					validateTrigger: 'submit'
				},
				
				// 所在地校验
				location: {
					rules: [
						{
							required: true,
							errorMessage: '请输入所在地'
						}
					],
					label: '所在地',
					validateTrigger: 'submit'
				},
				
				// 政治面貌校验
				political_status: {
					rules: [
						{
							required: true,
							errorMessage: '请选择政治面貌'
						}
					],
					label: '政治面貌',
					validateTrigger: 'submit'
				},
				
				// 参加工作时间校验
				work_start_date: {
					rules: [
						{
							required: true,
							errorMessage: '请选择参加工作时间'
						}
					],
					label: '参加工作时间',
					validateTrigger: 'submit'
				},
				
				// 联系邮箱校验
				email: {
					rules: [
						{
							required: true,
							errorMessage: '请输入联系邮箱'
						},
						{
							pattern: /^[a-zA-Z0-9_.-]+@[a-zA-Z0-9-]+(\.[a-zA-Z0-9-]+)*\.[a-zA-Z0-9]{2,6}$/,
							errorMessage: '请输入正确的邮箱格式'
						}
					],
					label: '联系邮箱',
					validateTrigger: 'submit'
				},
				
				// 联系电话校验
				mobile: {
					rules: [
						{
							required: true,
							errorMessage: '请输入联系电话'
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							errorMessage: '请输入正确的手机号格式'
						}
					],
					label: '联系电话',
					validateTrigger: 'submit'
				},
				
				// 身份证号码校验
				id_card: {
					rules: [
						{
							required: true,
							errorMessage: '请输入身份证号码'
						},
						{
							pattern: /^[1-9]\d{5}(18|19|20)\d{2}(0[1-9]|1[0-2])(0[1-9]|[12]\d|3[01])\d{3}[\dXx]$/,
							errorMessage: '请输入正确的身份证号码格式'
						}
					],
					label: '身份证号码',
					validateTrigger: 'submit'
				},
				
				// 工作经历校验
				work_experience: {
					rules: [
						{
							required: true,
							errorMessage: '请输入工作经历'
						}
					],
					label: '工作经历',
					validateTrigger: 'submit'
				},
				
				// 相关特长校验
				specialties: {
					rules: [
						{
							required: true,
							errorMessage: '请输入相关特长'
						}
					],
					label: '相关特长',
					validateTrigger: 'submit'
				},
				
				// 报名选项校验
				application_options: {
					rules: [
						{
							required: true,
							errorMessage: '请至少选择一项报名选项'
						},
						{
							type: 'array',
							minLength: 1,
							errorMessage: '请至少选择一项报名选项'
						}
					],
					label: '报名选项',
					validateTrigger: 'submit'
				},
				
				// 本人承诺校验
				commitment: {
					rules: [
						{
							required: true,
							errorMessage: '请阅读并同意本人承诺'
						},
						{
							type: 'boolean',
							enum: [true],
							errorMessage: '请阅读并同意本人承诺'
						}
					],
					label: '本人承诺',
					validateTrigger: 'submit'
				}
			}
		};
	},
	onLoad(o) {
			that = this;
			this.cr_id = o.id;
			this.volunteer_id = o.volunteer_id;
			this.modifyId = o.modifyId;
			this.getCategoryCascadeList();

			if (this.isLogin) {
				// 调用API获取对话框内容并显示
				this.$api.getSubmit2ModalContent({}, function (res) {
					if (res.code === 1) {
						that.modalContent = res.data;
						that.$refs.popup.open();
					} else {
						that.modalContent = '获取对话框内容失败:' + res.msg;
						that.$refs.popup.open();
					}
				});
			}
		},
  computed: {
    ...mapGetters(['isLogin'])
  },
	methods: {
		onchange(e) {
			const value = e.detail.value;
		},
		onnodeclick(node) {
			this.region_id = node.value;
			console.log(node);
		},
		// 区域
		getCategoryCascadeList() {
			this.$api.getCategoryCascadeList({ main_body_id: 1, pid: 5, level: 2 }, function (res) {
				that.regionList = res.data;
			});
		},

		// 测试上传文件
		chooseFile() {
			let userToken = '';
			let auth = this.$db.get('auth');
			userToken = auth.token;
			wx.chooseMessageFile({
				count: 1,
				type: 'file', // 修改为支持的文档类型
				// 配置后导致读取不到聊天文件
				// extension: ['.doc', '.xlsx', '.docx', '.ppt'],
				success(res) {
					const tempFilePaths = res.tempFiles;
					uni.uploadFile({
						url: that.$config.baseUrl + 'api/common/upload?token=' + userToken,
						filePath: tempFilePaths[0].path,
						name: 'file',
						header: {
							'content-type': 'multipart/form-data' // 根据实际情况设置请求头
						},
						formData: {}, // 如果需要，添加额外的form数据
						success: (res) => {
							console.log('上传成功，服务器响应数据:', res.data);

							let url = JSON.parse(res.data);
							that.valiFormData.fullurl = url.data.fullurl;
							// console.log('生成的链接', that.valiFormData.fullurl);
							that.$common.errorToShow('上传成功');
						},
						fail: (err) => {
							console.error('文件上传失败:', err);
						}
					});
				}
			});
		},

		submit() {
			this.$refs.valiForm.validate(['id'], async (err, valiFormData) => {
				if (!err) {
					console.log('校验成功');
					/* 检验成功 */
					const { 
						name, gender, birth_date, hukou, location, political_status, 
						work_start_date, email, mobile, id_card, work_experience, 
						specialties, application_options 
					} = this.valiFormData;
					this.$api.applyVolunteer(
						{
							main_body_id: 1,
							name: name,
							gender: gender,
							birth_date: birth_date,
							hukou: hukou,
							location: location,
							political_status: political_status,
							work_start_date: work_start_date,
							email: email,
							mobile: mobile,
							id_card: id_card,
							work_experience: work_experience,
							specialties: specialties,
							application_options: application_options,
							region_id: this.region_id,
							cr_id: this.cr_id
						},
						function (res) {
							if (res.code === 1) {
								that.$common.errorToShow(res.msg);
								setTimeout(() => {
									uni.switchTab({
										url: '/pages/shouhu/shouhu'
									});
								}, 1000);
							} else {
								that.$common.errorToShow(res.msg);
							}
						}
					);
				} else {
					that.$common.errorToShow('请完善信息');
				}
			});
		},
	}
};
</script>

<style>
.box {
	width: 100%;
	padding-bottom: 50rpx;
	background-image: url('https://huli-app.wenlvti.net/app_static/WenWuGuanJia/image/xy_bgt.png');
	background-size: 100% 100%;
	background-repeat: repeat-y;
	height: auto;
}
.ban_box {
	position: relative;
	margin-top: 40rpx;
}

.top_img {
	width: 100%;
	height: 100%;
}
.ban_item1 {
	position: absolute;
	top: -20rpx;
	left: 233rpx;
	width: 290rpx;
	height: 290rpx;
	margin: auto;
}
.ban_item2 {
	width: 250rpx;
	height: 250rpx;
	margin: auto;
}
/deep/.uni-forms-item__error {
	color: red !important;
}
.is-input-border {
	background-color: #f7dfc0 !important;
}
.uni-forms-item__label {
	color: #000000 !important;
}

.text-wrapper_3 {
	margin: auto;
	margin-top: 50rpx;
	height: 80rpx;
	flex-direction: column;
	width: 240rpx;
	background: url('/static/img/dt_bg2.png') no-repeat;
	background-size: 100% 100%;
}
.bm_tit {
	text-align: center;
	font-size: 36rpx;
	line-height: 80rpx;
	letter-spacing: 6rpx;
	text-align: center;
	font-weight: 700;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.example {
	height: 87%;
	margin: 20rpx 32rpx 0 32rpx;
}
.uni-forms {
	padding: 0 20rpx 0 20rpx;
}
.uni-forms-item {
	margin-bottom: 30rpx !important;
}
.active {
	border: 6rpx solid #efb57a;
	border-radius: 10rpx;
}
.img {
	width: 230rpx;
	height: 250rpx;
	border: 6rpx solid #efb57a;
	border-radius: 10rpx;
}
.map_tit {
	display: flex;
	align-items: center;
	margin-left: 60rpx;
	margin-top: 40rpx;
	font-size: 40rpx;
	font-family: Songti SC, Songti SC;
	font-weight: 900;
	line-height: 52rpx;
	color: #444444;
}
.scarch_box {
	width: 430rpx;
	height: 82rpx;
	padding: 15rpx 0 0 30rpx;
	/* background-image: url('/static/img/search_bg1.png');
	background-size: 100% 100%; */
}
.rl_box {
	width: 90%;
	margin: auto;
	margin-top: 40rpx;
	display: flex;
	justify-content: space-between;
}
.rl_item {
	width: 188rpx;
	height: 102rpx;
	background-image: url('/static/img/rl_bg.png');
	background-size: 100% 100%;
}
.tit {
	text-align: center;
	line-height: 102rpx;
	font-weight: 700;
	font-size: 36rpx;
	letter-spacing: 6rpx;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}

.scfj {
	width: 170rpx;
	height: 50rpc;
	line-height: 50rpx;
	align-items: center;
	display: flex;
	background-color: #f7dfc0;
	position: absolute;
	top: -60rpx;
	right: 2rpx;
	border-radius: 5rpx;
	justify-content: space-around;
}
.tit2 {
	text-align: center;
	line-height: 66rpx;
	font-weight: 700;
	font-size: 32rpx;
	letter-spacing: 6rpx;
	background: linear-gradient(180deg, #af7e44 0%, #934b36 100%);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
}
.is-input-error-border {
	border: none !important;
}

.xx_box {
	padding: 20rpx;
	background-color: #e1bf9a;
	width: 660rpx;
	height: 560rpx;
	padding-top: 80rpx;
}
.xx_tit {
	height: 360rpx;
	font-size: 30rpx;
	padding: 20rpx;
	text-indent: 2em;
	background-color: #f3e3d3;
	overflow: scroll;
}

/* 性别选择样式 */
.gender-select {
	display: flex;
	align-items: center;
}

/* 政治面貌选择样式 */
.political-status-select {
	width: 100%;
}

/* 报名选项多选框样式 */
.checkbox-group {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.checkbox-item {
	display: flex;
	align-items: center;
	gap: 10rpx;
}

.checkbox-item text {
	font-size: 32rpx;
	color: #333;
}

/* 本人承诺样式 */
.commitment-text {
	font-size: 28rpx;
	color: #666;
	line-height: 44rpx;
	margin-bottom: 20rpx;
	text-indent: 2em;
}

.commitment-agree {
			font-size: 30rpx;
			color: #333;
			margin-left: 10rpx;
		}
		
		/* 对话框样式 */
		.modal-container {
			width: 80%;
			max-width: 600rpx;
			background-color: #ffffff;
			border-radius: 12rpx;
			overflow: hidden;
		}
		
		.modal-content {
			padding: 30rpx;
			max-height: 500rpx;
			overflow-y: auto;
		}
		
		.modal-footer {
			padding: 20rpx;
			text-align: center;
			border-top: 1rpx solid #e5e5e5;
		}
		
		.modal-btn {
			width: 200rpx;
			height: 70rpx;
			line-height: 70rpx;
			background-color: #af7e44;
			color: #ffffff;
			border-radius: 35rpx;
			text-align: center;
			margin: 0 auto;
			font-size: 30rpx;
			font-weight: 500;
		}
	</style>