zx_flk_app/pages/my/set.vue

<template>
	<view class="set-page">
		<navBar name="设置" left="0"></navBar>
		<image @click="editAvatarFn" :src="userInfo.headimg || defaultHeadImg" class="head-img" />
		<view class="list-wrap">
			<view v-for="(item, index) in list" :key="index" class="item" @tap="routerLink(item.url)">
				<view class="title">{{ item.title }}</view>
				<view :class="['text-right', item.hideArrow && 'hide-arrow']">
					<view v-if="item.textProp == 'registrationTime' && userInfo.ctime">
						{{ formatTimestamp(userInfo.ctime) }}
					</view>
					<input class="inp" @input="handleInput" @blur="inpfn" maxlength="22"
						v-if="item.textProp == 'nickname'" v-model="userInfo[item.textProp]" type="text" />
					<block v-else>
						{{ userInfo[item.textProp] || '' }}
					</block>
				</view>
			</view>
		</view>
		<view class="zx-form-btn fix-bottom-btn logout-btn" @tap="handleQuit">退出登录</view>
	</view>
</template>

<script>
	const storage = require('@/common/storage.js')
	import {
		QINIU_URL,
		defaultHeadImg
	} from '@/common/constant'
	var config = require('../../common/config_gyq.js');
	var http = require('../../common/request');
	const common = require('../../common/common.js');
	export default {
		data() {
			return {
				isComposing: false,
				QINIU_URL,
				defaultHeadImg,
				userInfo: {},
				list: [{
						title: '昵称',
						url: '',
						textProp: 'nickname'
					},
					{
						title: '注册时间',
						textProp: 'registrationTime',
						hideArrow: true
					},
					{
						title: '修改密码',
						url: '/pages/loginRegister/changePassword'
					},
					{
						title: '关于我们',
						url: '/pages/aboutMy/aboutMy',
						textProp: 'version'
					},
					{
						title: '隐私协议',
						url: '/pages/contract/contract?contract_id=270'
					},
					{
						title: '用户条款',
						url: '/pages/contract/contract?contract_id=102'
					}
				]
			}
		},
		onShow() {
			const user_token = storage.getUserToken()
			user_token && this.loadUserInfo()
		},
		methods: {
		 // 输入处理
		    handleInput(e) {
		      // 延迟处理输入法组合输入
		      setTimeout(() => {
		        const value = e.detail.value;
		        const truncated = this.truncateToMaxBytes(value, 22);
		        // 更新值（避免无限触发，需判断）
		        if (truncated !== value) {
		         this.userInfo.nickname = truncated;
		        }
		      }, 0);
		    },
			// 截断字符串至指定字节
			truncateToMaxBytes(str, maxBytes) {
				let totalBytes = 0;
				let result = '';

				for (const char of str) {
					// 判断字符是否为双字节（如中文）
					const charBytes = /[^\x00-\xff]/.test(char) ? 2 : 1;
					if (totalBytes + charBytes > maxBytes) break;

					totalBytes += charBytes;
					result += char;
				}

				return result;
			},

			formatTimestamp(timestamp) {
				const date = new Date(timestamp * 1000);
				return date.toLocaleDateString('zh-CN'); // 本地化格式（如：2021/5/3）
			},
			inpfn(e) {
				console.log(e.detail.value)
				this.editUserInfoFn()
			},
			editAvatarFn() {
				let _this = this
				common.upLoadImgQiNiu((imgUrl) => {
					_this.userInfo.headimg = imgUrl
					_this.editUserInfoFn()
				});
			},
			async editUserInfoFn() {
				let {
					data
				} = await http.postApi(config.API_USER_MODIFY_USER_INFO, {
					nickname: this.userInfo.nickname,
					head_img: this.userInfo.headimg,
				})
				storage.setUserInfoData(this.userInfo)
			},
			loadUserInfo() {
				const userInfo = storage.getUserInfoData()
				this.setData({
					userInfo
				})
			},
			routerLink(url) {
				uni.navigateTo({
					url
				})
			},
			handleQuit() {
				uni.showModal({
					title: '提示',
					content: '您确定要退出当前账号吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确定',
					success: function(res) {
						if (res.confirm) {
							storage.clearStorage()
							uni.reLaunch({
								url: '/pages/index/index'
							})
						}
					}
				})
			}
		}
	}
</script>

<style lang="scss">
	@import "@/libs/css/layout.scss";

	.inp {
		font-size: 30rpx;
		color: #060809;
		text-align: right;
	}

	.set-page {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 0 32rpx 48rpx;

		.head-img {
			width: 174rpx;
			height: 174rpx;
			margin: 0 auto 40rpx;
			border-radius: 50%;
		}

		.list-wrap {
			width: 100%;
			background: #FFFFFF;
			border-radius: 40rpx;
			padding: 8rpx 32rpx;

			.item {
				padding: 40rpx 0;
				display: flex;
				justify-content: space-between;
				border-bottom: 2px solid #F1F4F5;

				&:last-child {
					border-bottom: 0;
				}

				.title {
					font-family: PingFangSC, PingFang SC;
					font-weight: bold;
					font-size: 32rpx;
					color: #060809;
				}

				.text-right {
					font-family: Futura, Futura;
					font-weight: 500;
					font-size: 30rpx;
					color: #060809;
					display: flex;
					align-items: center;

					&::after {
						content: "";
						width: 28rpx;
						height: 28rpx;
						margin-left: 12rpx;
						background: url('https://qiniu.bms16.com/FtGhNkwKlhR7hOZsaj0gmRl9KjPx');
						background-size: 100%;
					}

					&.hide-arrow {
						&::after {
							display: none;
						}
					}
				}
			}
		}

		.logout-btn {
			color: #FA2918;
			background: #E4E7EC;
		}
	}
</style>