kitchendDevice/pageTwo/me/userEdit.vue

<template>
	<view class="content">
		<view class="lanBox">
			<view class="headbox">
				<view class="touxiang" v-if="user.head_pic">
					<image :src="user.head_pic" class="headimage" />
				</view>
				<view class="touxiang" v-else>
					<image src="/static/tou.png" class="headimage" />
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">昵称</view>
				<view class="right">
					<input name="name" type="text" v-model="memInfo.nickname" placeholder="请输入" class="name" />
					<icon class="iconfont icon-bianji" v-if="!memInfo.nickname"></icon>
					<icon class="iconfont icon-error" v-else @click="memInfo.nickname=''"></icon>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">性别</view>
				<view class="right">
					<picker mode="selector" :range="sexItem" @change="onsexArr">
						<view class="uni-input">{{memInfo.gender==0?'请选择':memInfo.gender==1?'男':'女'}}</view>
						<icon class="iconfont icon-arrow-down"></icon>
					</picker>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">出生日期</view>
				<view class="right">
					<picker mode="date" :end="endDate" @change="maskClick"
						:value="memInfo.birthday?memInfo.birthday:endDate">
						<view class="uni-input">{{memInfo.birthday?memInfo.birthday:"请选择"}}</view>
						<icon class="iconfont icon-arrow-down"></icon>
					</picker>
				</view>
			</view>
			<!-- <view class="lan border-bottom">
				<view class="left">年龄</view>
				<view class="right">
					<picker mode="selector" :range="ageArr" @change="onageArr">
						<view class="uni-input">{{!memInfo.age?'请选择年龄':memInfo.age+'岁'}}</view>
						<icon class="iconfont icon-arrow-down"></icon>
					</picker>
				</view>
			</view> -->
			<view class="lan border-bottom">
				<view class="left">身高</view>
				<view class="right">
					<input type="digit" v-model="memInfo.height" placeholder="请输入" />
					<text>cm</text>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">体重</view>
				<view class="right">
					<input type="digit" v-model="memInfo.weight" placeholder="请输入" />
					<text>kg</text>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">活动系数</view>
				<view class="right">
					<picker mode="selector" @change="changeClickType" :range="activityLevel" range-key="name" :value="levelInd">
						<view>
							{{activityLevel[levelInd].name}}
							<icon class="iconfont icon-arrow-down"></icon>
						</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="btn" @click="confirmInfo">提交</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				sexItem: [
					"男",
					"女"
				],
				levelInd: 0,
				isEdit: false,
				memInfo: {
					birthday: "",
					height: "",
					weight: "",
					gender: 0,
					nickname: "",
					activity_level: 0,
				},
			};
		},
		computed: {
			...mapState(["user", "configInfo"]),
			endDate() {
				return this.$tools.getDate("start")
			},
			activityLevel() {
				return this.configInfo.activity_level
			}
		},
		onLoad(options) {
			// 编辑
			if (options.familayData) {
				let info = options.familayData
				this.memInfo = JSON.parse(info)
				this.isEdit = true
			} else if (this.user.aud_id) {
				this.memInfo = this.user
				this.levelInd = this.activityLevel.findIndex(ite => ite.val == this.memInfo.activity_level)
				if (this.memInfo.activity_level == null) {
					this.levelInd = 0
					this.memInfo.activity_level = this.activityLevel[0].val
				}
			}

		},
		methods: {
			// 提交
			confirmInfo() {
				let that = this
				console.log("activity_level", this.memInfo)
				if (!this.memInfo.nickname) {
					this.$tools.msg("请输入昵称")
					return;
				}
				if (!this.memInfo.gender) {
					this.$tools.msg("请选择性别")
					return;
				}
				if (!this.memInfo.birthday) {
					this.$tools.msg("请选择出生日期")
					return;
				}
				if (!this.memInfo.height) {
					this.$tools.msg("请输入身高")
					return;
				}
				if (!this.memInfo.weight) {
					this.$tools.msg("请输入体重")
					return;
				}
				if (!this.memInfo.activity_level) {
					this.$tools.msg("请选择活动系数")
					return;
				}
				that.subInfo(this.memInfo)
			},
			subInfo(data) {
				let that = this
				that.$model.getUserInfoEdit(data).then(res => {
					if (res.code == 0) {
						that.$tools.msg("提交成功");
						that.handleHomeUserInfo()
						uni.navigateBack({
							delta: 1
						});
					} else {
						that.$tools.msg(res.message);
					}
				});
			},
			// 获取账号信息
			handleHomeUserInfo() {
				let that = this
				that.$model.getHomeUserInfo({}).then(res => {
					if (res.code != 0) return
					that.$store.commit('changeUserInfo', res.data)
				})
			},
			//确定年龄
			maskClick(e) {
				console.log("出生日期", e.detail.value)
				this.memInfo.birthday = e.detail.value
			},
			//确定性别
			onsexArr(e) {
				this.memInfo.gender = this.sexItem[e.target.value] == "男" ? 1 : 2
			},
			changeClickType(e) {
				this.levelInd = e.target.value
				this.memInfo.activity_level = this.activityLevel[e.target.value].val
			}
		},
	};
</script>

<style scoped="scoped" lang="scss">
	.content {
		padding: 0 30rpx;
	}

	.lanBox {
		margin-top: 30rpx;
		padding: 30rpx 30rpx 0;
		width: calc(100% - 60rpx);
		background: #fff;
		border-radius: 20rpx;

		.headbox {
			text-align: center;
			position: relative;
			display: flex;
			justify-content: center;
			height: 65px;
			margin-bottom: 30rpx;

			.headimage {
				display: block;
				width: 65px;
				height: 65px;
				font-size: 65px;
				border-radius: 50%;
			}
		}
	}

	.lan {
		display: flex;
		align-items: center;
		font-size: 14px;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #f7f7f7;

		.left {
			width: 24%;
			text-align: left;
		}


		.right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 76%;
			height: 100rpx;
			position: relative;
			text-align: right;


			/deep/input {
				height: 100rpx;
				line-height: 100rpx;
				border: none;
				background: inherit;
				width: 100%;
			}

			.name {
				padding-right: 50rpx;
			}

			picker {
				width: 100%;
				text-align: right;
				border: none;
				margin-right: 8px;

				view {
					padding-right: 18px;
					color: #828282;
					font-size: 14px;
				}
			}

			text {
				display: inline-block;
				width: 60rpx;
				text-align: right;
				color: #828282;
			}

			.iconfont {
				color: #828282;
				position: absolute;
				right: 0px;
				top: 0;
				width: 60rpx;
				justify-content: flex-end;
			}
		}
	}

	.btn {
		color: #fff;
		width: 100%;
	}
</style>