WenWuGuanJia/index_fenbao/fuWu/baoMing/baoMing.vue

<!--
# 对 baoMing.vue 代码的严厉批评
## 代码结构与风格：混乱不堪的“野路子”实现
首先，代码结构混乱到令人发指。全局变量 that 的使用（第62行和187行）是典型的新手错误，这种做法不仅破坏了Vue组件的封装性，还可能导致内存泄漏和难以追踪的bug。在现代前端开发中，这种写法早已被唾弃，而你却堂而皇之地使用，足见代码质量之低下。

代码注释严重缺失，关键逻辑如文件上传（ chooseFile 方法）、表单提交（ submit 方法）等没有任何说明，仿佛在挑战后续维护者的耐心。变量命名更是随心所欲， cr_id 、 modifyId 、 volunteer_id 等命名风格不统一，一会儿下划线，一会儿驼峰，完全无视代码规范的存在。

## 功能实现：漏洞百出的“豆腐渣工程”
### 表单验证：形同虚设的防线
表单验证规则（ rules 对象）漏洞百出。身份证号字段（ id_card ）只做了必填验证，连最基本的18位长度验证都没有（第135-139行被注释掉），这意味着用户可以输入任意长度的字符串，后端将承受巨大的验证压力。更可笑的是，区域选择组件的 name 属性居然被设置为 id_card （第28行），与身份证字段冲突，这会导致表单验证时的逻辑混乱。

提交表单时， validate(['id']) （第253行和320行）的调用更是让人摸不着头脑——表单中根本没有 id 字段，这种验证调用完全是无效的，相当于给系统开了个后门，让所有表单数据可以未经有效验证就提交。

### 功能逻辑：支离破碎的实现
文件上传功能（ chooseFile 方法）设计极其简陋。只允许上传一个文件（ count: 1 ），且没有文件类型和大小的限制，用户可以上传任意大小的文件，这可能导致服务器资源被恶意消耗。上传成功后，文件路径直接赋值给 valiFormData.fullurl （第240行），但在提交表单时却使用 file: fullurl （第269行），这种字段映射关系混乱不堪。

志愿者详情查询（ details 方法）调用API时只传递了 main_body_id: 1 （第292行），没有传递志愿者ID等关键参数，这会导致后端无法准确查询用户信息，返回的数据极有可能是错误的。修改资料功能（ modifySubmit 方法）的实现同样草率， volunteer_id 和 cr_id 的获取逻辑（第334-335行）依赖于多个来源，一旦某个来源为空，就会导致API调用失败。

### 安全与性能：触目惊心的隐患
安全方面，代码没有对用户输入进行任何过滤和转义，特别是身份证号、手机号等敏感信息，直接传递给后端，存在SQL注入的风险。文件上传时， wx.chooseMessageFile （第221行）的使用没有限制文件类型，恶意用户可以上传可执行文件或其他危险文件。

性能方面，表单输入没有使用防抖（debounce）处理，用户在输入时会频繁触发数据更新，增加了浏览器的渲染压力。API调用（如 getCategoryCascadeList 方法）使用了回调函数（第211-213行），而不是现代的 Promise 或 async/await 语法，代码可读性和可维护性极差。

### 用户体验：粗制滥造的交互
用户体验方面，代码的表现更是惨不忍睹。表单提交后没有加载状态提示（如loading动画），用户点击“报名”或“确认修改”按钮后，只能傻等，不知道操作是否正在进行。错误提示（ that.$common.errorToShow ）千篇一律，没有针对具体错误类型给出个性化提示，用户无法快速定位问题所在。

区域选择组件（ uni-data-picker ）的 onchange 方法（第202-204行）只是获取了值却没有任何处理， onnodeclick 方法（第205-208行）虽然设置了 region_id ，但没有更新表单数据，这会导致用户选择区域后，表单中没有相应的记录。

## 技术选型：固步自封的落后实践
代码使用了uni-app框架，但完全没有遵循框架的最佳实践。例如，没有使用Vue 3的组合式API（Composition API），而是死守着过时的选项式API（Options API），导致代码逻辑分散，难以维护。组件的引用（如 uni-navbar 、 uni-forms 等）没有进行任何封装，直接在模板中使用，增加了代码的耦合度。

样式部分（ <style> 标签）使用了大量的内联样式和固定像素值，没有使用CSS变量或预处理器（如SCSS），导致样式难以统一管理和修改。 /deep/ 选择器（第386行）的使用是一种不良实践，它会破坏组件的样式封装性，导致样式冲突。

## 总结：亟待重构的“代码垃圾”
综上所述， baoMing.vue 代码是一个典型的反面教材，从代码结构到功能实现，从安全性能到用户体验，几乎每一个方面都存在严重问题。它不仅反映了开发者对前端开发规范的无知，也暴露了项目管理的混乱。

这样的代码如果被部署到生产环境，极有可能导致系统崩溃、数据泄露等严重问题。因此，强烈建议对该代码进行全面重构，采用现代前端开发的最佳实践，如使用Vue 3的组合式API、完善表单验证、优化文件上传功能、提升用户体验等。只有这样，才能确保系统的稳定性、安全性和可维护性，为用户提供良好的使用体验。
-->

<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>



		<!-- 表单 -->
		<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="100px" required name="mobile">
					<uni-easyinput type="number" v-model="valiFormData.mobile" placeholder="请输入联系电话" />
				</uni-forms-item>

				<uni-forms-item label="您的身份证" label-width="100px" 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="id_card">
					<uni-data-picker :localdata="regionList" popup-title="请选择班级" @change="onchange" @nodeclick="onnodeclick"></uni-data-picker>
				</uni-forms-item>
				<uni-forms-item label="住址" label-width="100px" required name="address">
					<uni-easyinput v-model="valiFormData.address" placeholder="请输入住址" />
				</uni-forms-item>
				<uni-forms-item label="单位" label-width="80px" required name="unit_name">
					<uni-easyinput v-model="valiFormData.unit_name" placeholder="请输入单位名称" />
				</uni-forms-item>
				<!-- 		<uni-forms-item label="备注" label-width="80px" required name="notesVal">
					<uni-easyinput v-model="valiFormData.notesVal" placeholder="请输入申请类型(个人、家庭、机构)" />
				</uni-forms-item> -->

				<uni-forms-item label="认领原因" label-width="80px" required name="intro">
					<uni-easyinput type="textarea" v-model="valiFormData.intro" placeholder="请输入认领原因或个人介绍(可上传个人优秀证明、奖项)" />
					<view @click="chooseFile" class="scfj">
						<view>上传文件</view>
						<view>
							<uni-icons type="wallet" size="18"></uni-icons>
						</view>
					</view>
				</uni-forms-item>
			</uni-forms>
		</view>
		<view v-if="valiFormData.status == '-1'" class="text-wrapper_3" @click="modifySubmit('valiForm')">
			<view class="bm_tit">确认修改</view>
		</view>
		<view v-else class="text-wrapper_3" @click="submit('valiForm')">
			<view class="bm_tit">报名</view>
		</view>
	</view>
</template>

<script>
let that;
import { mapGetters } from 'vuex'
export default {
	data() {
		return {
			regionList: [],
			region_id: '',
			cr_id: '' /* 文物id */,
			modifyId: '' /* 修改资料的文物id */,
			volunteer_id: '' /* 志愿者id */,
			/* 表单数据 */
			valiFormData: {
				name: '',
				mobile: '',
				address: '',
				id_card: '',
				unit_name: '',
				fullurl: '',
				intro: ''
			},

			/* 校验规则 */
			rules: {
				// 对name字段进行必填验证
				name: {
					// name 字段的校验规则
					rules: [
						// 校验 name 不能为空
						{
							required: true,
							errorMessage: '请输入姓名'
						},
						// 对name字段进行长度验证
						{
							minLength: 1,
							maxLength: 6,
							errorMessage: '{label}长度在 {minLength} 到 {maxLength} 个字符'
						}
					],
					// 当前表单域的字段中文名，可不输入
					label: '姓名',
					validateTrigger: 'submit'
				},
				/* 手机号校验 */
				mobile: {
					// mobile 字段的校验规则
					rules: [
						// 校验 mobile 不能为空
						{
							required: true,
							errorMessage: '请输入联系电话'
						},
						// 对mobile字段进行长度验证
						{
							minLength: 11,
							maxLength: 11,
							errorMessage: '{label}长度为 {minLength}  个字符'
						}
					],
					// 当前表单域的字段中文名，可不输入
					label: '手机号',
					validateTrigger: 'submit'
				},
				/* 身份证校验 */
				id_card: {
					// idCard 字段的校验规则
					rules: [
						// 校验 idCard 不能为空
						{
							required: true,
							errorMessage: '请输入身份证号'
						}
						// 对idCard字段进行长度验证
						// {
						// 	minLength: 18,
						// 	maxLength: 18,
						// 	errorMessage: '{label}长度为 {minLength}  个字符'
						// }
					],
					// 当前表单域的字段中文名，可不输入
					label: '身份证号',
					validateTrigger: 'submit'
				},

				/* 单位 */
				unit_name: {
					rules: [
						// 校验 unit 不能为空
						{
							required: true,
							errorMessage: '请输入单位名称'
						}
					]
				},

				address: {
					rules: [
						// 校验 住址 不能为空
						{
							required: true,
							errorMessage: '请输入单位名称'
						}
					]
				},
				// notesVal: {
				// 	rules: [
				// 		// 校验 申请类型 不能为空
				// 		{
				// 			required: true,
				// 			errorMessage: '请输入申请类型'
				// 		}
				// 	]
				// },
				intro: {
					rules: [
						{
							required: true,
							errorMessage: '请输入认领原因或个人介绍'
						}
					]
				}
			}
		};
	},
	onLoad(o) {
		that = this;
		this.cr_id = o.id;
		this.volunteer_id = o.volunteer_id;
		this.modifyId = o.modifyId;
		this.details();
		this.getCategoryCascadeList();
    if (this.isLogin) {
      console.log('111');
      
    }
	},
  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, mobile, address, id_card, unit_name, intro, fullurl } = this.valiFormData;
					this.$api.applyVolunteer(
						{
							main_body_id: 1,
							name: name,
							mobile: mobile,
							region_id: this.region_id,
							address: address,
							unit_name: unit_name,
							id_card: id_card,
							intro: intro,
							cr_id: this.cr_id,
							file: fullurl
						},
						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);
							}
							// console.log(res);
						}
					);
				} else {
					that.$common.errorToShow('请完善信息');
				}
			});
		},
		// 志愿者详情判断是否为被驳回
		details() {
			this.$api.details({ main_body_id: 1 }, function (res) {
				// 被驳回
				if (res.data != null && res.data.status == '-1') {
					// console.log(res);
					that.valiFormData = res.data;

					// console.log(that.valiFormData, '被驳回');
				}
				if (res.data != null && res.data.status == '2') {
					that.$common.errorToShow('您已经是志愿者，正在前往守护');
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/shouhu/shouhu'
						});
					}, 3000);
				}
				if (res.data != null && res.data.status == '0') {
					that.$common.errorToShow('您的资料正在审核中');
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/shouhu/shouhu'
						});
					}, 3000);
				}
			});
		},
		// 修改资料
		modifySubmit() {
			this.$refs.valiForm.validate(['id'], async (err, valiFormData) => {
				if (!err) {
					console.log('校验成功');
					/* 检验成功 */
					const { name, mobile, address, id_card, unit_name, intro } = this.valiFormData;
					this.$api.editApplyVolunteer(
						{
							main_body_id: 1,
							name: name,
							mobile: mobile,
							address: address,
							unit_name: unit_name,
							id_card: id_card,
							intro: intro,
							volunteer_id: this.volunteer_id || this.valiFormData.id,
							cr_id: this.cr_id || this.valiFormData.cr_list[0].id
						},
						function (res) {
							if (res.code === 1) {
								that.$common.errorToShow(res.msg);
							} else {
								that.$common.errorToShow(res.msg);
							}
							// console.log(res);
						}
					);
				} 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;
}
</style>