app/pages/me/modifyDesc.vue

<template>
	<view class="page">
		<view class="line"></view>
		<view class="single-line-box">
			<input
				class="description-input"
				type="text"
				:value="description"
				:model="description"
				placeholder="请填入简介~"
				maxlength="16"
				@input="typingContent"
			/>
			<view class="length-cal">
				<text class="length-text">{{ wordsLength }}/16</text>
			</view>
		</view>

		<view class="notice">
			<text class="tips">*注：请设置0-16字的个人简介</text>
		</view>
	</view>
</template>

<script>
import storage from '@/utils/storage.js'; //缓存
import { vlogModifyUserInfo } from '@/api/vlog';
export default {
	data() {
		return {
			description: storage.getVlogUserInfo().description,
			wordsLength: 0
		};
	},
	onNavigationBarButtonTap() {
		this.updateDesc();
	},
	onShow() {
		this.wordsLength = this.description.length;
	},
	methods: {
		async updateDesc() {
			let me = this;
			let userId = storage.getVlogUserInfo().id;
			let description = this.description == '' ? '这家伙很懒，什么都没留下~' : this.description;
			let pendingUserInfo = {
				id: userId,
				description: description,
				type: 6
			};
			var result = await vlogModifyUserInfo(pendingUserInfo, 6);
			if (result.data.status == 200) {
				let userInfoUpdated = result.data.data;
				// 重置本地用户信息
				storage.setVlogUserInfo(userInfoUpdated);
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
				var timer = setTimeout(() => {
					clearTimeout(timer);
					uni.navigateBack({
						delta: 1,
						animationType: 'fade-out'
					});
				}, 1000);
			} else {
				uni.showToast({
					title: result.data.msg,
					icon: 'none',
					duration: 3000
				});
			}
		},

		typingContent(e) {
			this.description = e.detail.value;
			this.wordsLength = this.description.length;
		}
	}
};
</script>

<style lang="scss" scoped>
.page {
	position: absolute;
	left: 0;
	right: 0;
	top: 0;
	bottom: 0;
	background-color: #181b27;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	overflow: hidden;

	.line {
		height: 1rpx;
		background-color: #393a41;
		width: 750rpx;
	}

	.single-line-box {
		align-self: center;
		display: flex;
		flex-direction: column;
		padding: 30rpx;
		margin-top: 20rpx;
		.description-input {
			padding-left: 20rpx;
			padding-top: 30rpx;
			color: #ffffff;
			font-size: 32rpx;
			width: 700rpx;
			height: 100rpx;
			background-color: #4a4c52;
			border-top-left-radius: 20rpx;
			border-top-right-radius: 20rpx;
		}
		.length-cal {
			width: 100%;
			height: 20px;
			background-color: #4a4c52;
			padding-right: 20rpx;
			display: flex;
			flex-direction: row;
			justify-content: flex-end;
			padding-bottom: 12rpx;
			border-bottom-left-radius: 20rpx;
			border-bottom-right-radius: 20rpx;
			.length-text {
				font-size: 24rpx;
				font-weight: 400;
				color: #f1f1f1;
			}
		}
	}

	.notice {
		align-self: center;
		.tips {
			font-size: 24rpx;
			font-weight: 400;
			color: #bfbfbf;
			width: 700rpx;
		}
	}
}
</style>