kitchendDevice/pageTwo/me/userEdit.vue

<template>
	<view class="content">
		<view class="lanBox">
			<view class="headbox">
				<view class="touxiang">
					<image :src="user.head_pic" 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?'请选择性别':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="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>

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

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				ageArr: [],
				sexItem: [
					"男",
					"女"
				],
				isEdit: false,
				memInfo: {
					age: "",
					height: "",
					weight: "",
					gender: "",
					nickname: "",
				},
			};
		},
		computed: {
			...mapState(["user", "appTheme"]),
		},
		onLoad(options) {
			var agedata = []
			for (var i = 5; i <= 80; i++) {
				agedata.push(i);
			}
			this.ageArr = agedata
			// 编辑
			if (options.familayData) {
				let info = options.familayData
				this.memInfo = JSON.parse(info)
				this.isEdit = true
				console.log("编辑", this.memInfo)
			} else {
				this.memInfo = this.user
			}
		},
		methods: {
			// 提交
			confirmInfo() {
				let that = this
				if (!this.memInfo.nickname) {
					this.$tools.msg("请输入昵称")
					return;
				}
				if (!this.memInfo.gender) {
					this.$tools.msg("请选择性别")
					return;
				}
				if (!this.memInfo.age) {
					this.$tools.msg("请选择年龄")
					return;
				}
				if (!this.memInfo.height) {
					this.$tools.msg("请输入身高")
					return;
				}
				if (!this.memInfo.weight) {
					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)
				})
			},
			//确定性别
			onsexArr(e) {
				this.memInfo.gender = this.sexItem[e.target.value] == "男" ? 1 : 2
			},
			// 确定年龄
			onageArr(e) {
				this.memInfo.age = this.ageArr[e.target.value]
			},
		},
	};
</script>

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

	.lanBox {
		margin-top: 15px;
		padding: 15px 15px 0;
		width: calc(100% - 30px);
		background: #fff;
		border-radius: 10px;

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

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

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

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


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


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

			.name {
				padding-right: 25px;
			}

			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: 30px;
				text-align: right;
				color: #828282;
			}

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

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