AiSkinMeasurementMp/pages/user/info.vue

<template>
	<view class="info">
		<view class="main">
			<view class="avatar">
				<u-avatar :src="avatarSrc" size="70"></u-avatar>
			</view>
			<view class="form-box">
				<u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
					<u-form-item required prop="name" borderBottom>
						<u--input v-model="form.name" type="text" maxlength="15" border placeholder="请输入昵称"></u--input>
					</u-form-item>

					<u-form-item required prop="gender" borderBottom @click="showGender = true;">
						<u--input v-model="form.gender" disabled disabledColor="#ffffff" placeholder="请选择性别"
							border></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<u-form-item required labelWidth="80" prop="date" borderBottom @click="showDate = true">
						<u--input v-model="form.date" disabled disabledColor="#ffffff" placeholder="请选择出生日期"
							border></u--input>
						<u-icon slot="right" name="arrow-right"></u-icon>
					</u-form-item>

					<u-form-item borderBottom>
						<u-input v-model="form.height" border placeholder="请输入身高" type="number" maxlength="3"></u-input>
					</u-form-item>

					<u-form-item borderBottom>
						<u--input v-model="form.weight" border placeholder="请输入体重" type="number"
							maxlength="3"></u--input>
					</u-form-item>

				</u--form>
			</view>
			<!-- 性别弹窗 -->
			<u-action-sheet :actions="genderList" @select="selectClickGender" :show="showGender"></u-action-sheet>
			<!-- 出生日期弹窗 -->
			<u-datetime-picker ref="datetimePicker" :closeOnClickOverlay="true" :show="showDate" v-model="pickerDate" mode="date" :minDate="minDate"
				:maxDate="maxDate" confirmColor="#E19F4B" @confirm="onConfirmDate" @cancel="onCancelDate"
				:formatter="formatter"></u-datetime-picker>

			<view class="action-box">
				<view class="btn-box">
					<u-button @click="onSubmit()" shape="circle" :color="bgthemeColor" type="info" size="large">
						<text :style="{ color: themeColor, fontSize: '32rpx', fontWeight: 'bold' }">{{actionText}}</text>
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			checked: true,
			showDate: false,
			showGender: false,
			pickerDate: Number(new Date()),
			form: {
				name: '',
				gender: '',
				date: '',
				height: '',
				weight: ''
			},
			genderList: [
				{
					name: '男',
					subname: "",
					color: '#000',
					fontSize: '16',
				},
				{
					name: '女',
					subname: "",
					color: '#000',
					fontSize: '16'
				},
			],
			rules: {
				name: [{
					required: true,
					message: '请输入昵称',
					trigger: ['blur', 'change']
				}],
				gender: [{
					required: true,
					message: '请选择性别',
					trigger: ['blur', 'change']
				}],
				date: [{
					required: true,
					message: '请选择出生日期',
					trigger: ['blur', 'change']
				}],
			},
			action: '',
		}
	},
	onReady() {
		//如果需要兼容微信小程序，并且校验规则中含有方法等，只能通过setRules方法设置规则。
		this.$refs.uForm.setRules(this.rules)
		this.$refs.datetimePicker.setFormatter(this.formatter)
	},
	computed: {
		themeColor() {
			return this.$themeColor
		},
		bgthemeColor() {
			return '#333'
		},
		avatarSrc() {
			return this.$store.state.user.userInfo.avatarSrc || require('../../static/tabbar/user_default.png')
		},
		minDate() {
			const now = new Date();
			const minDate = new Date(now.getFullYear() - 50, now.getMonth(), now.getDate());
			return minDate
		},
		maxDate() {
			const now1 = new Date();
			const maxDate = new Date(now1.getFullYear() - 10, now1.getMonth(), now1.getDate());
			return maxDate.getTime()
		},
		actionText() {
			return this.action === 'update' ? '修改资料': '创建用户'
		},
		userInfo() {
			return this.$store.state.user.userInfo
		},

	},
	onLoad(props) {
		if(props) {
			this.action = props.action;
			if(props.action === 'update' && this.userInfo) {
				this.form = {... this.userInfo}
				this.pickerDate = new Date(this.userInfo.date)
				/* this.form.date = new Date(this.userInfo.date).getTime() */
			}
			console.log("this.action", this.action);
		}
	},
	methods: {
		formatter(type, value) {
			if (type === 'year') {
				return `${value}年`
			}
			if (type === 'month') {
				return `${value}月`
			}
			if (type === 'day') {
				return `${value}日`
			}
			return value
		},
		onSubmit() {
			console.log("this.form", this.form);
			let that = this;
			this.$refs.uForm.validate().then( async valid => {
				if(valid) {
					uni.showLoading({
                        title: that.action === 'update' ? '修改中': '创建中',
                        mask: true,
                    })
					setTimeout(() => {
						// 缓存到本地
						that.$store.commit('SET_USERINFO', that.form);
						that.$store.commit('saveAll');
						uni.showToast({
							title: that.action === 'update' ? '修改成功' : "创建成功",
							icon: 'success'
						});
					}, 1000)
					setTimeout(() => {
						uni.switchTab({
							url: '/pages/index/index',
						})
					}, 2000)
					
						
					
				}
			}).catch(errors => {
				console.log("errors", errors);
			})
		},
		selectClickGender(e) {
			console.log("e", e);
			this.form.gender = e.name;
			this.showGender = false
		},
		onConfirmDate(date) {
			console.log("date", date);
			this.form.date = this.$util.formateDate('yyyy-mm-dd', date.value);
			this.showDate = false;
		},
		onCancelDate() {
			this.showDate = false;
		}
	}
}
</script>

<style lang="scss">
.info {
	position: relative;
	height: 100vh;
	width: 100vw;
	overflow: hidden;

	.main {
		padding: 40rpx;

		.avatar {
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 20rpx 0;
		}

		.form-box {
			.u-form-item {
				padding: 0 20rpx;
				border-radius: 50rpx;
				border: 1rpx solid $uni-text-color-grey;
				margin: 20rpx 0;

			}

			.u-form-item__body__left {
				height: 80rpx !important;
				width: 10rpx !important;

				.u-form-item__body__left__content__required {
					left: -10rpx !important;
					top: -10rpx !important;
				}
			}

			.u-form-item__body__right__message {
				margin-left: 20rpx !important;
			}
		}

		.action-box {
			width: 100%;
			position: fixed;
			bottom: 30rpx;
			left: 0;

			.btn-box {
				padding: 0 40rpx;
				margin-top: 20rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				text {
					font-size: 36rpx;
				}

				.black {
					color: $uni-text-color;
				}

				.gray {
					color: $uni-text-color-grey;
				}
			}
		}
	}
}
</style>