cxyy-applet/pagesMy/account/basic.vue

<template>
	<view class="container main">
		<view class="one">
			<form @submit="formSubmit">
				<view class="value other" style="display: none;">
					<view class="title">id</view>
					<view class="label">
						<input name="id" class="input" :value="form.id" placeholder="请输入id" />
					</view>
				</view>
				<view class="value other">
					<view class="title">账号</view>
					<view class="label">
						<text v-if="form.account">{{form.account}}</text>
						<input v-else name="account" class="input" :value="form.account" placeholder="请输入账号" />
					</view>
				</view>
				<view class="value other margin">
					<view class="title">昵称</view>
					<view class="label">
						<input name="nick_name" class="input" :value="form.nick_name" placeholder="请输入昵称" />
						<span v-if="errors.nick_name" class="error-message">{{ errors.nick_name }}</span>
					</view>
				</view>
				<view class="value other">
					<view class="title">所属产业</view>
					<view class="label">
						<uni-data-checkbox mode="button" multiple v-model="form.industry" :localdata="industryList"
							:map="{text:'title',value:'title'}"></uni-data-checkbox>
						<span v-if="errors.industry" class="error-message">{{ errors.industry }}</span>
					</view>
				</view>
				<view class="value other">
					<view class="title">性别</view>
					<view class="label">
						<picker class="picker" mode="selector" :range="genderList" @change="genderChange"
							range-key="label">
							<view>{{gender_name||'请选择性别'}}</view>
						</picker>
						<text class="iconfont icon-dayuhao"></text>
						<span v-if="errors.gender" class="error-message">{{ errors.gender }}</span>
					</view>
				</view>
				<view class="value other">
					<view class="title">手机号</view>
					<view class="label">
						<input name="phone" class="input" :value="form.phone" placeholder="请输入手机号" />
						<span v-if="errors.phone" class="error-message">{{ errors.phone }}</span>
					</view>
				</view>
				<view class="value other">
					<view class="title">电子邮箱</view>
					<view class="label">
						<input name="email" class="input" :value="form.email" placeholder="请输入电子邮箱" />
						<span v-if="errors.email" class="error-message">{{ errors.email }}</span>
					</view>
				</view>
				<view class="button">
					<button type="warn" form-type="submit">保存</button>
				</view>
			</form>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				openid: '',
				user: {},
				form: {
					industry: '',
				},
				gender_name: '',
				// 字典表
				genderList: [],
				industryList: [],
				errors: {}
			}
		},
		onLoad: async function(e) {
			const that = this;
			await that.searchOpenids();
			await that.searchToken();
			await that.searchOther();
			await that.search();
		},
		methods: {
			async searchOpenids() {
				const that = this;
				uni.getStorage({
					key: 'openid',
					success: function(res) {
						that.$set(that, `openid`, res.data);
					},
					fail: function(err) {
						uni.login({
							success: async function(res) {
								if (res.code) {
									const aee = await that.$app('/wechat/api/login/app',
										'GET', {
											js_code: res.code,
											config: that.$config.wx_projectkey
										})
									if (aee.errcode == '0') {
										uni.setStorage({
											key: "openid",
											data: aee.data.openid
										})
										that.$set(that, `openid`, aee.data.openid);
									} else {
										uni.showToast({
											title: aee.errmsg,
											icon: 'none'
										})
									}
								} else {
									uni.showToast({
										title: res.errMsg,
										icon: 'none'
									})
								}
							}
						});
					}
				})
			},
			// 用户信息
			searchToken() {
				const that = this;
				try {
					const res = uni.getStorageSync('token');
					if (res) {
						const user = that.$jwt(res);
						that.$set(that, `user`, user);
					}
				} catch (e) {}
			},
			async searchOther() {
				const that = this;
				let res;
				// 查询性别
				res = await that.$api(`/dictData`, 'GET', {
					code: 'gender',
					is_use: '0',
				})
				if (res.errcode == '0') that.$set(that, `genderList`, res.data);
				// 查询所属产业
				res = await that.$api(`/sector`, 'GET', {
					is_use: '0',
				})
				if (res.errcode == '0') that.$set(that, `industryList`, res.data);
			},
			// 查询
			async search() {
				const that = this;
				if (that.user && that.user.id) {
					let res;
					res = await that.$api(`/user/${that.user.id}`, 'GET', {})
					if (res.errcode == '0') {
						that.$set(that, `form`, res.data)
						if (res.data.gender) {
							let data = that.genderList.find(i => i.value == res.data.gender);
							if (data) that.$set(that, `gender_name`, data.label)
						}
					} else {
						uni.showToast({
							title: res.errmsg,
						});
					}
				}
			},
			// 性别选择
			genderChange(e) {
				const that = this;
				let data = that.genderList.find(i => i.value == e.detail.value);
				if (data) {
					that.$set(that.form, `gender`, data.value)
					that.$set(that, `gender_name`, data.label)
				}
			},
			// 自定义的验证函数
			validateObject(obj) {
				const errors = {};
				if (!obj.nick_name || obj.nick_name.trim() === '') {
					errors.nick_name = '请填写昵称！';
				}
				if (!obj.industry || obj.industry.trim() === '') {
					errors.industry = '请选择所属产业！';
				}
				if (!obj.gender || obj.gender.trim() === '') {
					errors.gender = '请选择性别！';
				}
				if (!obj.phone || obj.phone.trim() === '') {
					errors.phone = '请填写手机号！';
				} else {
					const regex = /^1[3456789]\d{9}$/;
					if (!regex.test(obj.phone)) errors.phone = '请填写正确的手机号码！';
				}
				if (!obj.email || obj.email.trim() === '') {
					errors.email = '请填写电子邮箱！';
				} else {
					const regex = /^[a-zA-Z0-9._-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,6}$/;
					if (!regex.test(obj.email)) errors.email = '请填写正确的电子邮箱！';
				}
				// 如果有错误，返回错误对象
				if (Object.keys(errors).length > 0) {
					return errors;
				}
				// 如果没有错误，返回null或undefined
				return null;
			},
			async formSubmit(e) {
				const that = this;
				const form = that.form
				const data = e.detail.value;
				if (!form.openid) data.openid = that.openid
				data.gender = form.gender
				data.industry = form.industry
				const errorsInfo = await that.validateObject(data);
				// 检查是否有错误
				if (errorsInfo) {
					that.$set(that, `errors`, errorsInfo)
					// 遍历错误对象并显示错误信息
					for (const key in errorsInfo) {
						if (errorsInfo.hasOwnProperty(key)) {
							console.error(`${key} 错误: ${errorsInfo[key]}`);
						}
					}
				} else {
					that.$set(that, `errors`, {})
					const res = await that.$api(`/user/${that.user.id}`, 'POST', data);
					if (res.errcode == '0') that.search();
					else {
						uni.showToast({
							title: res.errmsg,
						});
					}
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		background-color: var(--footColor);

		.one {
			.icon {
				padding: 2vw;
			}

			.margin {
				margin: 3vw 0 0 0;
			}

			.other {
				padding: 3vw 2vw;
				border-bottom: 1px solid var(--footColor);

				.checkbox-label {
					display: flex;
					flex-wrap: wrap;
				}
			}

			.value {
				display: flex;
				justify-content: space-between;
				align-items: center;
				background-color: var(--mainColor);

				.title {
					min-width: 25%;
				}

				.label {
					text-align: right;

					.error-message {
						margin: 5px 0 0 0;
						color: var(--fF0Color);
						font-size: var(--font12Size);
					}
				}
			}

			.remark {
				padding: 4vw 2vw;
				text-align: center;
				color: var(--f99Color);
				font-size: var(--font18Size);
			}

			.button {
				margin: 2vw 0 0 0;
				padding: 2vw;
				text-align: center;

				button {
					background-color: var(--f3CColor);
					font-size: var(--font14Size);
					border-radius: 2vw;
				}
			}
		}
	}
</style>