wydy/wy-mobile/pages/vote.vue

<template>
	<view class="container">
		<!-- 顶部标题栏 -->
		<view class="header">
			<text class="header-title">盐龙街道住宅小区物业公司选聘调研</text>
		</view>

		<u--form labelPosition="left" :model="inputForm" :rules="rules" ref="uForm" labelWidth="80">
			<!-- 小区名称选择 -->
			<u-form-item label="小区" :borderBottom="true" prop="communityId1" required>
				<zxz-uni-data-select v-model="inputForm.communityId1" :localdata="communityList" @change="change1"
					:filterable='true' placeholder="请选择小区"></zxz-uni-data-select>

			</u-form-item>

			<!-- 楼栋号选择 -->
			<u-form-item label="楼栋号" :borderBottom="true" prop="communityId2" required>
				<zxz-uni-data-select v-model="inputForm.communityId2" :localdata="buildingList" @change="change2"
					:filterable='true' mode="none" placeholder="请选择楼栋号"></zxz-uni-data-select>
			</u-form-item>

			<!-- 房间号选择 -->
			<u-form-item label="房间号" prop="communityId3" required>
				<zxz-uni-data-select v-model="inputForm.communityId3" :localdata="roomList" :filterable='true'
					mode="none" placeholder="请选择房间号"></zxz-uni-data-select>
			</u-form-item>

			<!-- 房产持有人分割线 -->
			<view class="section-divider">
				<text class="divider-text">房产持有人</text>
			</view>

			<!-- 姓名输入 -->
			<u-form-item label="姓名" :borderBottom="true" prop="householder.name" required>
				<u-input v-model="inputForm.householder.name" @input="handleInput1" placeholder="请输入姓名" type="text" border="none"></u-input>
			</u-form-item>

			<!-- 身份证号后四位 -->
			<u-form-item label="身份证号 后4位" :borderBottom="true" prop="householder.cardNo" required>
				<yh-code-input mode="line" v-model="inputForm.householder.cardNo"></yh-code-input>

			</u-form-item>
			

			<!-- 联系电话 -->
			<u-form-item label="联系电话" :borderBottom="true" prop="phone">
				<u-input v-model="inputForm.householder.phone" placeholder="请输入联系电话号码" type="number" maxlength="11"
					border="none"></u-input>
			</u-form-item>

			<!-- 征求意见分割线 -->
			<view class="section-divider">
				<text class="divider-text">征求意见</text>
				<text class="divider-tag">(单选)</text>
			</view>

			<!-- 投票选项 -->
			<view class="vote-options">
				<u-radio-group  v-model="inputForm.voteName" @change="groupChange" iconPlacement="right"
					placement="column">

					<u-radio labelSize="18" shape="circle" activeColor="#00aaff" inactiveColor="#CCCCCC" class="radio-item"
						v-for="(item, index) in voteOptions" :key="index" :label="item.name" :name="item.name">
					</u-radio>

				</u-radio-group>
				<u-input v-if="inputForm.vote==='4'" :showWordLimit="true"  maxlength="20" v-model="inputForm.other" placeholder="请输入满意的物业公司名称"
					type="text"></u-input>
			</view>

			<!-- 物业管理建议 -->
			<view class="suggestion-section">
				<text class="suggestion-label">对物业管理有什么建议：</text>
				<u--textarea v-model="inputForm.suggestion" placeholder="请输入你对物业管理的建议"></u--textarea>

			</view>

			<!-- 提交按钮 -->
			<view class="submit-btn-container">
				<u-button class="submit-btn" @click="submitForm" :loading="isLoading" loadingText="提交中" shape="circle">
					提交
				</u-button>
			</view>
		</u--form>
	</view>
</template>

<script>
	import voteRecordService from "@/api/vote/voteRecordService.js"
	import communityService from "@/api/vote/communityService.js"
	import yhCodeInput from '../components/yh-code-input/yh-code-input.vue';
	export default {
		components:{
			yhCodeInput
		},
		data() {
			return {
				inputForm: {
					id: '',
					communityId1: '',
					communityId2: '',
					communityId3: '',
					communityName: '',
					communityName1: '',
					householder: {
						id: ''
					},
					vote: '1',
					voteName: '续签',
					suggestion: '',
					other: ''
				},
				// 小区数据
				communityList: [],
				selectedCommunity: -1,

				// 楼栋数据
				buildingList: [],
				selectedBuilding: -1,

				// 房间号数据
				roomList: [],
				selectedRoom: -1,

				// 房产持有人信息
				name: '',
				idLastFour: '',
				phone: '',

				// 投票选项
				voteOptions: [{
						name: '续签',
						value: '1'
					},
					{
						name: '公开招标',
						value: '2'
					},
					{
						name: '弃权',
						value: '3'
					},
					{
						name: '其他',
						value: '4'
					}
				],
				selectedVote: '1', // 默认选中公开招标

				// 建议
				suggestion: '',

				// 提交状态
				isLoading: false,
				rules: {
					'communityId1': [{
						type: 'string',
						required: true,
						message: '请选择小区',
						trigger: ['blur', 'change']
					}],
					'communityId2': [{
						type: 'string',
						required: true,
						message: '请选择楼栋号',
						trigger: ['blur', 'change']
					}],
					'communityId3': [{
						type: 'string',
						required: true,
						message: '请选择房间号',
						trigger: ['blur', 'change']
					}],
					'householder.name': [{
						type: 'string',
						required: true,
						message: '请输入姓名',
						trigger: ['blur', 'change']
					}],
					'householder.cardNo': [{
						type: 'string',
						required: true,
						message: '请输入身份证号',
						trigger: ['blur', 'change']
					}, {
						required: true, // 是否必填（根据需求决定是否添加）
						pattern: /^[a-zA-Z0-9]{4}$/, // 正则：必须是4位数字（\d表示数字，{4}表示长度为4）
						message: '请输入4位数字', // 验证失败提示
						trigger: ['blur', 'change'] // 触发验证的时机（失去焦点/值改变）
					}],
					'vote': [{
						type: 'string',
						required: true,
						message: '请选择投票项',
						trigger: ['blur', 'change']
					}],
				}
			};
		},
		onLoad() {
			this.getList(0, 'communityList')
		},
		methods: {
			
			 handleInput1(val) {
			      // 正则 /\s+/g 匹配所有空白字符（空格、换行等），替换为空
			      this.inputForm.householder.name = val.replace(/\s+/g, '');
			    },
			// 小区选择变化
			change1(e) {
				this.inputForm.communityName1=e.text
				this.inputForm.communityId2 = ''
				this.inputForm.communityId3 = ''
				this.buildingList = []
				this.roomList = []
				this.getList(e.value, "buildingList")
			},

			// 楼栋选择变化
			change2(e) {
				this.inputForm.communityId3 = ''
				this.roomList = []
				this.getList(e.value, "roomList")
			},

			// 投票选项变化
			onVoteChange(value) {
				this.selectedVote = value;
			},


			groupChange(e) {
				this.inputForm.vote = this.getValueByName(e)

			},
			getValueByName(targetName) {
				// 找到name匹配的选项对象
				const matchedOption = this.voteOptions.find(option => option.name === targetName);
				// 若找到则返回value，未找到返回null（或根据需求自定义默认值）
				return matchedOption ? matchedOption.value : null;
			},
			getList(parent_id, name) {
				communityService.getListById(parent_id).then((data) => {

					this[name] = data
				}).catch(e => {
					console.error(e)
				})
			},


			// 提交表单
			submitForm() {

				var _this = this
				if (this.inputForm.vote === '4' && !this.inputForm.other) {
					uni.showToast({
						title: '请填写您所满意的物业',
						icon: 'none',
						duration: 2000
					})
					return
				}
				this.$refs.uForm.validate().then(res => {
					uni.showLoading({
						title: '提交中',
						mask: true
					})
					_this.inputForm.householderName=_this.inputForm.householder.name
					voteRecordService.save(_this.inputForm).then((data) => {
						console.log(data)
						uni.hideLoading()
						uni.showToast({
							title: `提交成功`,
							icon: 'none',
							duration: 2000
						})
						setTimeout(() => {
							  uni.reLaunch({
							        url: '/pages/success?id='+_this.inputForm.communityId1
							      });
						}, 2000);
					}).catch(e => {
						console.error(e)
						uni.hideLoading()
						uni.showModal({
							title: '提示',
							content: e.data.msg,
							showCancel:false
							})
					
					})


				}).catch(errors => {
					uni.$u.toast(errors[0].message)

				})
			},

			// 重置表单
			resetForm() {
				this.selectedCommunity = -1;
				this.selectedBuilding = -1;
				this.selectedRoom = -1;
				this.name = '';
				this.idLastFour = '';
				this.phone = '';
				this.selectedVote = 'bid';
				this.suggestion = '';
			}
		}
	};
</script>

<style scoped>
	.container {
		flex: 1;
		background-color: #ffffff;
		min-height: 100vh;
		font-family: "黑体";
	}

	/* 顶部标题栏 */
	.header {
		background-color: #00aaff;
		padding: 25rpx 20rpx;
		text-align: center;
	}

	.header-title {
		color: #ffffff;
		font-size: 32rpx;
		font-weight: 500;
		line-height: 1.5;
	}

	/* 内容区域 */
	.content {
		flex: 1;
		padding-bottom: 50rpx;
	}

	/* 分割线区域 */
	.section-divider {
		display: flex;
		align-items: center;
		padding: 20rpx 30rpx;
		background-color: #f5f7fa;
		margin: 10rpx 0;
	}

	.divider-text {
		color: #00aaff;
		font-size: 30rpx;
		font-weight: 500;
	}

	.divider-tag {
		color: #666666;
		font-size: 24rpx;
		margin-left: 15rpx;
	}

	/* 投票选项 */
	.vote-options {
		padding: 10rpx 30rpx;
	}

	.radio-item {
		display: flex;
		align-items: center;
		margin-bottom: 25rpx;
		font-size: 28rpx;
		color: #333333;
	}

	/* 建议区域 */
	.suggestion-section {
		padding: 20rpx 30rpx;
	}

	.suggestion-label {
		display: block;
		font-size: 32rpx;
		color: #333333;
		margin-bottom: 20rpx;
	}

	.suggestion-input {
		width: 100%;
		min-height: 200rpx;
		font-size: 26rpx;
	}

	/* 提交按钮 */
	.submit-btn-container {
		padding: 30rpx 20rpx;
	}

	.submit-btn {
		width: 100%;
		height: 90rpx;
		line-height: 90rpx;
		font-size: 32rpx;
		background-color: #00aaff;
		color: #ffffff;
	}

	/* uView组件样式调整 */
	::v-deep .u-form-item__label {
		width: 160rpx !important;
		font-size: 28rpx !important;
		color: #333333 !important;
	}

	::v-deep .u-input__inner {
		font-size: 28rpx !important;
	}

	::v-deep .u-picker__placeholder {
		font-size: 28rpx !important;
	}

	::v-deep .uni-select {
		border: unset;
		border-bottom: unset;
	}

	::v-deep .uni-select__input-placeholder {
		color: rgb(192, 196, 204);
		font-size: 15px;
	}
	::v-deep .u-form-item__body__left__content__label{
		font-size: 17px;
	}
	::v-deep .uni-input-input{
		font-size: 18px;
	}
	::v-deep .uni-select__input-text{
		font-size: 18px;
	}
</style>