jhlapp/pagesT/user/editID.vue

<template>
	<view class="editPwd">
		<view class="input-li">
			<text class="custom-icon custom-icon-mima"></text>
			<input placeholder="账户" placeholder-class="input-pl" type="text" v-model="mobile" />
		</view>
		<view class="input-li">
			<text class="custom-icon custom-icon-mima"></text>
			<input placeholder="密码" placeholder-class="input-pl" type="password" v-model="password" />
		</view>
		<view class="conform-btn" @click="editID">确认修改</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex';
	export default {
		data() {
			return {
				mobile: "",
				password: "",
			};
		},
		computed: {
			userInfo() {
				return this.$store.state.userInfo;
			},
		},
		methods: {
			...mapActions({
				logout: 'logout'
			}),
			editID() {
				if (!this.mobile.trim() || !this.password) {
					this.$u.toast('账号密码不能为空');
					return
				}
				this.$u.api.updateUserMobile({
					mobile: this.mobile,
					userCenterId: this.userInfo.userCenterId,
					password: this.password
				}).then(res => {
					this.$u.toast('修改成功，请重新登录');
					setTimeout(() => {
						this.logout();
					}, 500);
				});
			}
		}
	}
</script>

<style lang="scss" scope>
	.editPwd {
		padding-top: 50rpx;
	}

	.input-li {
		width: 702rpx;
		margin: 30rpx auto 0;
		border: 1px solid #eeeeee;
		line-height: 80rpx;
		border-radius: 8rpx;
		padding: 0 30rpx;

		.input-pl {
			font-size: 24rpx;
			font-weight: 300;
		}

		.custom-icon {
			color: #444444;
			font-size: 32rpx;
		}

		input {
			padding-left: 30rpx;
			display: inline-block;
			vertical-align: middle;
		}
	}

	.conform-btn {
		width: 680rpx;
		color: #ffffff;
		line-height: 80rpx;
		background-color: $uni-color-primary;
		text-align: center;
		border-radius: 10rpx;
		margin: 60rpx auto 0;
	}
</style>