dajiankang-uniapp/pages/mine/sett.vue

<template>
	<view class="container">
		<!-- 返回按钮 -->
		<wd-navbar :bordered="false" left-arrow custom-style="background-color: transparent !important;" title="个人信息" safeAreaInsetTop @click-left="back"></wd-navbar>
		<image src="/static/settbie.png" style="width: 750rpx; height: 690rpx; position: absolute; top: 0; left: 0; z-index: -1" mode="widthFix"></image>

		<view style="padding: 30rpx">
			<!-- 卡片 -->
			<view class="card">
				<!-- 头像行 -->
				<view class="avatar-row">
					<text class="label">头像</text>
					<button class="avatar-btn" open-type="chooseAvatar" @chooseavatar="chooseAvatar">
						<view class="avatar-uploader">
							<image v-if="userInfo.avatar" :src="userInfo.avatar" class="avatar-image"></image>
							<view v-else class="avatar-placeholder">
								<image src="/static/icon/icon_img.png"></image>
							</view>
						</view>
					</button>
				</view>

				<!-- 昵称 -->
				<view class="form-row" @click="prompt">
					<text class="label required">账户名称</text>
					<view class="form-row-right" style="font-size: 28rpx">
						<view>{{ userInfo.nickname || '微信用户' }}</view>
						<image src="/static/y.png" style="opacity: 0.5; width: 30rpx; height: 30rpx" mode="widthFix"></image>
					</view>
				</view>

				<!-- 手机号 -->
				<view class="form-row" @click="toPhone">
					<text class="label required">手机号</text>
					<view class="form-row-right" style="font-size: 28rpx">
						<view>{{ userInfo.mobile }}</view>
						<image src="/static/y.png" style="opacity: 0.5; width: 30rpx; height: 30rpx" mode="widthFix"></image>
					</view>
				</view>

				<!-- 等级 -->
				<view class="form-row">
					<text class="label required">等级</text>
					<view style="font-size: 28rpx" v-if="userInfo.userRights">{{userInfo.userRights.rights.rightsName}}</view>
					<view style="font-size: 28rpx" v-else>-</view>
				</view>
			</view>

			<!-- 保存按钮 -->
			<view class="save-btn" @click="logout">退出登录</view>
		</view>

		<!-- prompt -->
		<wd-message-box />
	</view>
</template>

<script setup>
import { ref, computed } from 'vue';
import { onLoad, onShow } from '@dcloudio/uni-app';
import api from '@/api/index';
import { uploadFiles } from '@/utils/fun.js';
import { Store } from '@/store';
import { useMessage } from '@/uni_modules/wot-design-uni';
const message = useMessage();

const store = Store();
const back = () => {
	uni.navigateBack();
};
const userInfo = computed(() => store.userInfo || {});
// 表单数据
const form = ref({
	avatar: '',
	nickname: '',
	mobile: '',
	sex: 0
});

onShow(async () => {
	await store.usersGetInfo();
});

onLoad(async () => {
	const storage = uni.getStorageSync('userInfo');
	if (storage) {
		const getData = await getUser();
		uni.setStorageSync('userInfo', getData);
		form.value = { ...getData };
	}
});

function prompt() {
	message
		.prompt({
			title: '请输入昵称',
			inputValue: form.value.nickname
		})
		.then(async (res) => {
			await api.usersUpdate({ nickname: res.value || '微信用户' });
			await store.usersGetInfo();
		})
		.catch((error) => {
			console.log(error);
		});
}

// 头像
const avatarUrl = ref('');

// 选择头像
const chooseAvatar = async (e) => {
	try {
		if (e.detail.avatarUrl) {
			const imgUrl = await uploadFiles(e.detail.avatarUrl);
			await api.usersUpdate({ avatar: imgUrl, mobile: userInfo.value.mobile, nickname: userInfo.value.nickname || '微信用户' });
			await store.usersGetInfo();
			// form.value.avatar = imgUrl;
		}
	} catch (err) {
		console.error('选择头像失败:', err);
	}
};

const chooseAvatarApp = async (e) => {
	try {
		uni.chooseImage({
			count: 1, //默认9
			sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
			sourceType: ['album'], //从相册选择
			success: function (res) {
				console.log(res.tempFilePaths);
				uploadFiles(res.tempFilePaths[0]).then((img) => {
					console.log(img);
					form.value.avatar = img;
				});
			}
		});
	} catch (err) {
		console.error('选择头像失败:', err);
	}
};

// 保存
const logout = async () => {
	uni.showModal({
		title: '提示',
		content: `是否确认退出登录?`,
		success: function (res) {
			if (res.confirm) {
				store.logoutUser();

			} else if (res.cancel) {
				console.log('用户点击取消');
			}
		}
	});
};

const toPhone = () => {
	uni.navigateTo({
		url: '/pages/mine/mobile'
	});
};
</script>

<style lang="scss" scoped>
.container {
	// padding: 30rpx;
}

.card {
	border-radius: 16rpx;
	padding: 0 30rpx;
	background-color: #fff;
}

.avatar-row {
	height: 170rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;

	.avatar-btn {
		width: 90rpx;
		height: 90rpx;
		margin: 0;
		padding: 0;
		border-radius: 50%;
		&::after {
			border-width: 0;
		}
	}

	.label {
		font-size: 28rpx;
		color: #232323;
	}
}

.avatar-uploader {
	width: 90rpx;
	height: 90rpx;
	border-radius: 50%;
	position: relative;

	.avatar-image {
		width: 100%;
		height: 100%;
	}

	.avatar-placeholder {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		image {
			width: 90rpx;
			height: 90rpx;
			background-color: #f5f5f5;
		}
	}
}

.form-row {
	height: 82rpx;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border-bottom: 1rpx solid #f5f5f5;

	.label {
		font-size: 28rpx;
		color: #232323;
	}

	.input {
		flex: 1;
		text-align: right;
		font-size: 24rpx;
		color: #232323;
		padding-left: 20rpx;
	}
	.input-disabled {
		color: #999;
	}
}

.form-row-right {
	display: flex;
	align-items: center;
	justify-content: space-between;
	image {
		margin-left: 10rpx;
	}
}

.save-btn {
	margin-top: 35rpx;
	width: 690rpx;
	height: 110rpx;
	background: #ffffff;
	box-shadow: 0rpx 2rpx 8rpx 2rpx rgba(0, 88, 219, 0.06);
	border-radius: 8rpx 8rpx 8rpx 8rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: bold;
	font-size: 30rpx;
	color: #5d7a4e;
}
</style>