xg_total_process_master_cloud_h5/pages/cw/invoice/EmailForm.vue

<template>
	<view style="width: 100%;">
		<u-action-sheet :show="show" @close="onClose">
			<view class="cu-bar bg-white">
				<view class="action text-blue" @tap="onClose">取消</view>
				<view class="action text-green" @tap="selectUsers">确定</view>
			</view>
			<u-form :show="show" :model="inputForm" labelWidth="100px" class="u-form" labelPosition="left" ref="inputForm">
				<u-form-item label="姓名" prop="userName"
							 :rules="[]">
					<u-input v-model="inputForm.userName" :disabled="true" placeholder="请填写姓名" clearable></u-input>
				</u-form-item>
				<u-form-item label="邮箱" prop="userEmail"
							 :rules="[]">
					<u-input v-model="inputForm.userEmail" placeholder="请填写邮箱" clearable></u-input>
				</u-form-item>
				<u-form-item label="电话" prop="userPhone"
							 :rules="[]">
					<u-input v-model="inputForm.userPhone" :disabled="true" placeholder="请填写电话" clearable></u-input>
				</u-form-item>
			</u-form>
		</u-action-sheet>
	</view>
</template>

<script>
	import userService from "@/api/sys/userService"

	export default {
		data() {
			return {
				show: false,
				id: '',
				inputForm: {
					userName: '',
					userEmail: '',
					userPhone: '',
				}
			};
		},
		props: {
			value: String,
			placeholder: {
				type: String,
				default: '请选择项目'
			},
			readonly: {
				type: Boolean,
				default: false
			},
			disabled: {
				type: Boolean,
				default: false
			},
		},
		mounted() {
		},
		methods: {
			init(id,userEmail) {
				this.inputForm.userEmail = userEmail
				this.show = true;
				this.id = id;
			},
			onClose() {
				this.show = false;
			},
			selectUsers() {
				return new Promise((resolve, reject) => {
					// 表单规则验证
					let errors = [];

					// 验证邮箱
					if (this.isNotEmpty(this.inputForm.userEmail)) {
						var reg = /^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/;
						if (!reg.test(this.inputForm.userEmail)) {
							errors.push('请输入正确的邮箱地址');
						}
					}

					if (errors.length > 0) {
						// 存在错误，显示提示信息
						errors.forEach(error => {
							uni.showToast({
								title: error,
								icon: 'none',
								duration: 2000
							});
						});
						reject(errors); // 将错误数组传递给调用者
					} else {
						// 所有验证通过，执行保存操作
						// 处理确定按钮点击事件
						userService.updateEmail({ id: this.id, email: this.inputForm.userEmail })
								.then((data) => {
									if (data === '修改成功') {
										uni.showToast({
											title: '修改成功',
											icon: 'none',
											duration: 2000
										});
										this.show = false;
										// 在邮箱更新成功后触发父组件的输入事件
										this.$emit('input', this.inputForm.userEmail);
										resolve(); // 通知调用者操作成功
									}
								})
								.catch(error => {
									reject(error); // 将具体的错误信息传递给调用者
								});
					}
				});
			},
			isEmpty(value) {
				let result = false;
				if (value == null || value == undefined) {
					result = true;
				}
				if (typeof value == 'string' && (value.replace(/\s+/g, "") == "" || value == "")) {
					result = true;
				}
				if (typeof value == "object" && value instanceof Array && value.length === 0) {
					result = true;
				}
				return result;
			},
			isNotEmpty (value) {
				return !this.isEmpty(value)
			},
		}
	};
</script>

<style scoped>
	.u-action-sheet {
		/* 设置为绝对定位，使其相对于父元素定位 */
		position: absolute;
		/* 居中显示 */
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		/* 设置最大宽度，以避免过宽 */
		max-width: 90%;
		/* 设置最大高度，以避免过高 */
		max-height: 90%;
		/* 设置溢出滚动 */
		overflow-y: auto;
		/* 设置背景颜色 */
		background-color: #fff;
		/* 设置边框 */
		border: 1px solid #ddd;
		/* 设置圆角 */
		border-radius: 8px;
	}

	.u-form {
		/* 设置内边距 */
		padding: 20px;
	}

	.u-form-item {
		/* 设置底部外边距 */
		margin-bottom: 20px;
	}

	.u-input {
		/* 设置输入框宽度 */
		width: 100%;
	}
</style>