vist_go_uniApp/pagesA/user/index.vue

<template>
	<view>
		<!-- 头像区域 -->
		<view class="avatar-region">
			<view class="flex-items">
				<view class="font32 mar-l-20">
					头像
				</view>
				<view class="mar-l-auto mar-r-20">
					<u-upload :fileList="fileList" @afterRead="afterRead" name="1" :maxCount="1">
						<view class="flex-items">
							<image class="avatar" :src="user.avatar||'../../static/images/avatar.png'"
								mode="aspectFill">
							</image>
							<uni-icons color="#d0d7df" type="right" size="30"></uni-icons>
						</view>
					</u-upload>
				</view>
			</view>
		</view>
		<!-- 基本信息区域 -->
		<view class="info-region">
			<view class="font-gray mar-l-20 mar-b-30">
				基本信息
			</view>
			<view class="flex-items mar-b-50">
				<view class="font32 mar-l-20">
					姓名
				</view>
				<view class="mar-l-auto mar-r-20">
					<view class="flex-items">
						<u-input v-model="user.account" :border="false" placeholder="请输入姓名"></u-input>
					</view>
				</view>
			</view>
			<view class="flex-items mar-b-50">
				<view class="font32 mar-l-20 ">
					手机号码
				</view>
				<view class="mar-l-auto mar-r-20">
					<view class="flex-items">
						<u-input v-model="user.phone" :border="false" placeholder="请输入手机号码" type="number"></u-input>
					</view>
				</view>
			</view>
			<view class="flex-items mar-b-50">
				<view class="font32 mar-l-20 ">
					公司名称
				</view>
				<view class="mar-l-auto mar-r-20 select-container">
					<view class="flex-items">
						<uni-data-select v-model="user.companyId" :localdata="companyOptions" :clear="false"
							class="custom-select"></uni-data-select>
					</view>
				</view>
			</view>
			<view class="flex-items mar-b-50">
				<view class="font32 mar-l-20 ">
					部门
				</view>
				<view class="mar-l-auto mar-r-20 select-container">
					<view class="flex-items">
						<uni-data-select v-model="user.departmentId" :localdata="departmentOptions" :clear="false"
							class="custom-select"></uni-data-select>
					</view>
				</view>
			</view>



		</view>
		<view class="button-container">
			<button @click="handleSave" class="save-button">
				保存
			</button>
			<button @click="handlerLogout" class="logout-button">
				退出登录
			</button>
		</view>

	</view>
</template>

<script>
	import {
		memberDetail,
		memberUpdate
	} from '@/config/api';

	import {
		mapMutations,
		mapActions,
		mapGetters
	} from 'vuex';
	import {
		UPLOAD_URL
	} from '@/common/config.js'
	export default {
		data() {
			return {
				fileList: [],
				user: {},
				token: "",
				companyOptions: [{
						value: 1,
						text: '科技有限公司'
					},
					{
						value: 2,
						text: '网络科技公司'
					},
					{
						value: 3,
						text: '软件开发公司'
					}
				],
				departmentOptions: [{
						value: 1,
						text: '技术部'
					},
					{
						value: 2,
						text: '产品部'
					},
					{
						value: 3,
						text: '运营部'
					},
					{
						value: 4,
						text: '市场部'
					}
				]
			};
		},
		computed: {
			...mapGetters(['userInfo'])
		},
		onLoad() {
			this.token = uni.getStorageSync('access_token')
		},
		onShow() {
			this.detail()
			console.log(this.user)
		},

		methods: {
			...mapActions(['logout']),

			handlerLogout() {
				this.logout()
				uni.$u.toast("退出登录")
				uni.navigateBack({
					delta: 1 // delta 表示返回的页面数，1 表示返回上一页
				});
			},

			// 新增图片
			async afterRead(event) {
				// 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				console.log(lists, "list")
				let fileListLen = this.fileList.length
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].thumb)
					this.user.avatar = result.data.link
					let item = this.fileList[fileListLen]
				}
				memberUpdate(this.user)
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: UPLOAD_URL,
						filePath: url,
						header: {
							"Blade-Auth": this.token
						},
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							resolve(JSON.parse(res.data))
						}
					});
				})
			},
			async detail() {
				const data = await memberDetail()
				if (data.code == 200) {
					this.user = data.data
					uni.setStorageSync('user', this.user)
				}
			},



			async handleSave() {
				try {
					const result = await memberUpdate(this.user)
					console.log(result, "12")
					if (result.code === 200) {
						console.log("12")

						// 重新获取最新数据
						await this.detail()
						uni.showToast({
							title: '保存成功',
							icon: 'success',
							duration: 2000
						});
					} else {
						uni.showToast({
							title: '保存失败',
							icon: 'success',
							duration: 2000
						});
					}
				} catch (error) {
					uni.showToast({
						title: '保存失败',
						icon: 'success',
						duration: 2000
					});
					console.error('Save error:', error)
				}
			},

		},

	};
</script>

<style>
	.avatar-region {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 40rpx;
		width: 700rpx;
		height: auto;
		padding-bottom: 30rpx;
		padding-top: 30rpx;
		background-color: white;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		margin-left: 25rpx;
	}

	.info-region {
		box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
		border-radius: 40rpx;
		width: 700rpx;
		height: auto;
		padding-bottom: 30rpx;
		padding-top: 30rpx;
		background-color: white;
		margin-top: 30rpx;
		margin-bottom: 30rpx;
		margin-left: 25rpx;
	}


	.avatar {
		width: 130rpx;
		height: 130rpx;
		border-radius: 50%;
		overflow: hidden;
	}

	.button-container {
		padding: 0 32rpx;
		margin-top: 60rpx;
	}

	.save-button {
		width: 100%;
		height: 88rpx;
		background: #2979ff;
		border-radius: 44rpx;
		font-size: 32rpx;
		color: #FFFFFF;
		margin-bottom: 30rpx;
	}

	.logout-button {
		width: 100%;
		height: 88rpx;
		background: #FF4748;
		border-radius: 44rpx;
		font-size: 32rpx;
		color: #FFFFFF;
	}

	.select-container {
		width: 400rpx;
	}

	/* 自定义下拉框样式 */
	.custom-select {
		width: 100% !important;
	}

	/* 确保下拉框内容可以完整显示 */
	:deep(.uni-select) {
		width: 100% !important;
	}

	:deep(.uni-select__input-box) {
		width: 100% !important;
		padding-right: 30rpx !important;
	}

	:deep(.uni-select__input-text) {
		flex: 1;
	}

	:deep(.uni-select__selector) {
		width: 100% !important;
	}
</style>