uniapp/pagesAccount/basic/index.vue

<template>
	<view class="content">
		<uni-forms ref="form" :model="form" :rules="rules" label-width="auto">
			<uni-forms-item name="account">
				<uni-easyinput v-model="form.account" placeholder="请输入登录账号" disabled />
			</uni-forms-item>
			<uni-forms-item name="phone">
				<uni-easyinput v-model="form.phone" placeholder="请输入联系电话" />
			</uni-forms-item>
			<uni-forms-item name="nick_name">
				<uni-easyinput v-model="form.nick_name" placeholder="请输入账号昵称" />
			</uni-forms-item>
			<uni-forms-item name="gender">
				<uni-data-checkbox v-model="form.gender" :localdata="genderList" :map="{text:'label',value:'value'}" />
			</uni-forms-item>
			<uni-forms-item name="logo_url">
				<upload :list="form.logo_url" name="logo_url" :count="1" @uplSuc="uplSuc" @uplDel="uplDel"></upload>
			</uni-forms-item>
		</uni-forms>
		<view class="btn">
			<button size="mini" @tap="toSubmit('form')">提交保存</button>
		</view>
	</view>
</template>

<script>
	import upload from "@/components/upload/index.vue";
	export default {
		components: {
			upload,
		},
		data() {
			return {
				form: {
					logo_url: [],
				},
				// 规则
				rules: {
					account: {
						rules: [{
							required: true,
							errorMessage: '请输入登录账号'
						}]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入联系电话'
						}]
					},
				},
				// 性别
				genderList: []
			};
		},
		onLoad() {
			const that = this;
			that.search();
			that.searchOther();
		},
		onShow() {},
		methods: {
			search() {
				const that = this;
				uni.getStorage({
					key: 'token',
					success: async (res) => {
						let arr = that.$jwt(res.data);
						if (arr) {
							let user = await that.$api(`user/${arr._id}`, 'GET', {})
							if (user && user.errcode == '0') {
								that.$set(that, `form`, user.data)
							}
						}
					}
				})
			},
			// 图片保存
			uplSuc(e) {
				const that = this;
				that.$set(that.form, `${e.name}`, [...that.form[e.name], e.data]);
			},
			// 图片删除
			uplDel(e) {
				const that = this;
				let data = that.form[e.name];
				let arr = data.filter((i, index) => index != e.data.index);
				that.$set(that.form, `${e.name}`, arr);
			},
			// 提交保存
			toSubmit(ref) {
				const that = this;
				let agree = that.agree;
				that.$refs[ref].validate().then(async parmas => {
					let res = await that.$api(`user/${that.form._id}`, 'POST', parmas)
					if (res.errcode == '0') {
						uni.showToast({
							title: '维护信息成功',
							icon: 'none'
						})
						uni.navigateBack()
					} else {
						uni.showToast({
							title: res.errmsg,
							icon: 'none'
						})
					}
				}).catch(err => {
					console.log('err', err);
				})
			},
			// 查询其他信息
			async searchOther() {
				const that = this;
				let res;
				res = await that.$api('dictdata', 'GET', {
					type: 'gender'
				})
				if (res.errcode == '0') {
					that.$set(that, `genderList`, res.data)
				}
			}
		}
	}
</script>

<style lang="scss">
	.content {
		background-color: var(--rgb000);
		padding: 0 2vw;
		overflow-y: auto;

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

			button {
				width: 80%;
				background-color: var(--rgbfa4);
				color: var(--rgbfff);
				padding: 1vw 0;
			}
		}
	}
</style>