pet-front/otherPages/userManage/userInfo.vue

<template>
	<view class="user-info-container container">
		<view class="user-avatar-section">
			<view class="user-info-title">
				用户头像
			</view>
			<view style="display: flex;justify-content: center;">
				<u-upload
					accept="image"
					:capture="['album','camera']"
					:fileList="fileList"
					@afterRead="afterRead"
					@delete="deletePic"
					:max-count="1"
					name="avatar"
					width="80"
					height="80"
					:custom-style="{flex:0}"
				>
					<image :src="avatarUrl" style="width: 80px;height: 80px;border-radius: 50%;"></image>
				</u-upload>
			</view>
		</view>
		
		<view class="user-info-section">
			<view class="user-info-title">
				基本信息
			</view>
			<view class="user-info-form">
				<view class="user-info-item">
					<view class="user-info-label">昵称</view>
					<view class="user-info-input">
						<u-input v-model="nickname" placeholder="请输入昵称" :border="false" />
					</view>
				</view>
				<!-- <view class="user-info-item">
					<view class="user-info-label">会员等级</view>
					<view class="user-info-value">
						<text>{{userLevel}}</text>
					</view>
				</view> -->
			</view>
		</view>
		
		<view class="user-info-btns">
			<view class="user-info-btn" @click="save">
				<u-button color="#FFBF60" :loading="loading">
					<view style="color: #fff;">
						保存
					</view>
				</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import {updateUserProfile, uploadAvatar} from '@/api/system/user'
	import {getPersonalInfo} from "@/api/system/personal.js"
	
	export default {
		data() {
			return {
				loading: false,
				fileList: [],
				avatarUrl: 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/avatar_1.png',
				nickname: '',
				userLevel: ''
			}
		},
		onLoad() {
			this.getUserInfo()
		},
		methods: {
			// 获取用户信息
			getUserInfo() {
				getPersonalInfo().then(res => {
					if (res && (res.id || res.id === 0)) {
						this.nickname = res.nickname || ''
						this.userLevel = res.level || ''
						if (res.avatar) {
							this.avatarUrl = res.avatar
							this.fileList = [{url: res.avatar}]
						}
					}
				})
			},
			// 删除图片
			deletePic(event) {
				this.fileList.splice(event.index, 1)
				this.avatarUrl = 'https://catmdogf.oss-cn-shanghai.aliyuncs.com/CMDF/front/personal/index/avatar_1.png'
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this.fileList.length
				lists.map((item) => {
					this.fileList.push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this.fileList[fileListLen]
					this.fileList.splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					this.avatarUrl = result
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: 'https://store-test.catmdogd.com/test-api/h5/oss/upload',
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						success: (res) => {
							setTimeout(() => {
								if(res && res.data){
									let resData = JSON.parse(res.data);
									resolve(resData.url);
								}
								reject("上传失败");
							}, 1000)
						}
					});
				})
			},
			// 保存用户信息
			save() {
				if (!this.nickname) {
					this.$modal.showToast('请输入昵称!')
					return
				}
				
				this.loading = true
				let params = {
					nickname: this.nickname,
					avatar: this.avatarUrl
				}
				
				updateUserProfile(params).then(res => {
					if (res && res.code == 200) {
						uni.showToast({
							title: '保存成功',
							duration: 3000,
							icon: "none"
						})
						setTimeout(() => {
							this.loading = false
							let len = getCurrentPages().length
							if (len >= 2) {
								uni.navigateBack()
							} else {
								uni.redirectTo({url: '/pages/personalCenter/index'})
							}
						}, 1000)
					} else {
						this.loading = false
						uni.showToast({
							title: '更新用户信息失败',
							duration: 3000,
							icon: "none"
						})
					}
				}).catch(() => {
					this.loading = false
					uni.showToast({
						title: '更新用户信息失败',
						duration: 3000,
						icon: "none"
					})
				})
			}
		}
	}
</script>

<style lang="scss">
	.user-info-container {
		position: relative;
		height: 100%;
		padding-bottom: 90px;
		
		.user-avatar-section {
			width: 100%;
			background-color: #fff;
			padding: 15px 20px;
			margin-bottom: 10px;
		}
		
		.user-info-section {
			width: 100%;
			background-color: #fff;
			padding: 15px 20px;
		}
		
		.user-info-title {
			font-size: 14px;
			color: #333;
			font-weight: bold;
			padding-bottom: 15px;
		}
		
		.user-info-form {
			width: 100%;
		}
		
		.user-info-item {
			display: flex;
			align-items: center;
			padding: 12px 0;
			border-bottom: 1px solid #efefef;
			
			&:last-child {
				border-bottom: none;
			}
		}
		
		.user-info-label {
			width: 80px;
			color: #333;
			font-size: 14px;
		}
		
		.user-info-input {
			flex: 1;
		}
		
		.user-info-value {
			flex: 1;
			color: #666;
			font-size: 14px;
		}
		
		.user-info-btns {
			background-color: #FFFFFF;
			padding: 10px 20px 40px;
			width: 100%;
			height: 90px;
			position: fixed;
			bottom: 0;
			z-index: 100;
			text-align: center;
			
			.user-info-btn {
				width: 80%;
				margin: 0 auto;
			}
		}
	}
</style>