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">{{$t('infoNickname')}}</view>
				<view class="right">
					<input name="name" type="text" v-model="memInfo.nickname" :placeholder="$t('verifyRecord')"
						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">{{$t('infoGender')}}</view>
				<view class="right">
					<picker mode="selector" :range="sexItem" @change="onsexArr">
						<view class="uni-input">
							{{memInfo.gender==0?$t('verifyPicker'):memInfo.gender==1? $t('infoMan'):$t('infoWoman')}}
						</view>
						<icon class="iconfont icon-arrow-down"></icon>
					</picker>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">{{$t('infoBirthday')}}</view>
				<view class="right">
					<picker mode="date" :end="endDate" @change="maskClick"
						:value="memInfo.birthday?memInfo.birthday:endDate" fields="day">
						<view class="uni-input">{{memInfo.birthday?memInfo.birthday:$t('verifyPicker')}}</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">{{$t('infoHeight')}}</view>
				<view class="right">
					<input type="digit" v-model="memInfo.height" :placeholder="$t('verifyRecord')" />
					<text>cm</text>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">{{$t('infoWeight')}}</view>
				<view class="right">
					<input type="digit" v-model="memInfo.weight" :placeholder="$t('verifyRecord')" />
					<text>kg</text>
				</view>
			</view>
			<view class="lan border-bottom">
				<view class="left">{{$t('infoActivityCoefficient')}}</view>
				<view class="right">
					<picker mode="selector" @change="changeClickType" :range="activityLevel" range-key="name"
						:value="levelInd">
						<view>
							{{memInfo.activity_level?activityLevel[levelInd].name:$t('verifyRecord')}}
							<icon class="iconfont icon-arrow-down"></icon>
						</view>
					</picker>
				</view>
			</view>
		</view>

		<view class="btn" @click="confirmInfo">{{$t('btnSubmit')}}</view>
	</view>
</template>

<script>
	import {
		mapState
	} from "vuex";
	export default {
		data() {
			return {
				sexItem: [
					this.$t("infoMan"),
					this.$t("infoWoman")
				],
				levelInd: 0,
				isEdit: false,
				memInfo: {
					birthday: "",
					height: "",
					weight: "",
					gender: 0,
					nickname: "",
					activity_level: "",
				},
			};
		},
		computed: {
			...mapState(["user", "configInfo"]),
			endDate() {
				return this.$tools.getDate("start")
			},
			activityLevel() {
				return this.configInfo.activity_level
			}
		},
		onLoad(options) {
			// 编辑
			let that = this
			uni.setNavigationBarTitle({
				title: that.$t('infoPersonalProfile')
			})
			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)
				console.log("11111", this.levelInd, this.activityLevel, this.memInfo)
				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(that.$t('verifyNickName'))
					return;
				}
				if (!this.memInfo.gender) {
					this.$tools.msg(that.$t('verifyGender'))
					return;
				}
				if (!this.memInfo.birthday) {
					this.$tools.msg(that.$t('verifyBirthday'))
					return;
				}
				if (!this.memInfo.height) {
					this.$tools.msg(that.$t('verifyHeight'))
					return;
				}
				if (!this.memInfo.weight) {
					this.$tools.msg(that.$t('verifyWeight'))
					return;
				}
				// if (!this.memInfo.activity_level) {
				// 	this.$tools.msg(that.$t('verifyActivityCoefficient'))
				// 	return;
				// }
				that.subInfo(this.memInfo)
			},
			subInfo(data) {
				let that = this
				that.$model.getUserInfoEdit(data).then(res => {
					if (res.code == 0) {
						that.$store.dispatch("getUserInfo")
						uni.navigateBack({
							delta: 1
						});
					} else {
						that.$tools.msg(res.message);
					}
				});
			},
			//确定年龄
			maskClick(e) {
				this.memInfo.birthday = e.detail.value
			},
			//确定性别
			onsexArr(e) {
				this.memInfo.gender = this.sexItem[e.target.value] == this.$t("infoMan") ? 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;
		flex-wrap: wrap;
		align-items: center;
		font-size: 14px;
		padding: 10px 0;
		border-bottom: 1px solid #f7f7f7;

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


		.right {
			display: flex;
			align-items: center;
			justify-content: flex-end;
			width: 75%;
			position: relative;
			text-align: right;


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

			.name {
				padding-right: 50rpx;
			}

			picker {
				width: 100%;
				min-height: 70rpx;
				text-align: right;
				border: none;
				margin-right: 8px;
				display: flex;
				align-items: center;
				justify-content: flex-end;

				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: 10px;
				width: 60rpx;
				justify-content: flex-end;
			}
		}
	}

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