mp-ui-user/src/packageOther/avatar/index.vue

<template>
	<view>
		<!-- #ifdef MP-ALIPAY -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="个人信息"
			leftIconSize="0"></u-navbar>
		<!-- #endif -->
		<!-- #ifdef MP-WEIXIN -->
		<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="个人信息"></u-navbar>
		<!-- #endif -->
		<!-- #ifndef MP-WEIXIN || MP-ALIPAY -->
		<view v-if="pagesNum > 1">
			<u-navbar :placeholder="true" bgColor="#fff" :autoBack="true" :border="true" title="个人信息" />
		</view>
		<view v-else>
			<u-navbar leftIconSize="0" :placeholder="true" bgColor="#fff" :border="true" title="个人信息">
				<view class="nav-left flex" slot="left" @click="$toIndex()">
					<u-icon name="arrow-left" size="20" color="#333"></u-icon>
				</view>
			</u-navbar>
		</view>
		<!-- #endif -->

		<view class="wrap">
			<view class="wrap-avatar flex">
				<view class="title">头像</view>
				<!-- <view><u-avatar :src="avatarUrl"></u-avatar></view> -->
				<!-- #ifdef H5 -->
				<button type="button" class="button" @click="onChooseImage">
					<u-avatar :src="avatarUrl+ '?imageView2/2/w/80'" mode="aspectFill"></u-avatar>
				</button>
				<!-- #endif -->

				<!-- #ifndef H5 -->
				<button type="balanced" class="button" open-type="chooseAvatar" @chooseavatar="onChooseavatar">
					<u-avatar :src="avatarUrl" mode="aspectFill"></u-avatar>
				</button>
				<!-- #endif -->
			</view>
			<view class="wrap-avatar flex">
				<view class="title">昵称</view>
				<view class="setName">
					<!-- <u-input v-model="userInfo.nickName" placeholder="请设置昵称" inputAlign="right" border="none" /> -->
					<input v-model="userInfo.nickName" class="input" type="nickname" placeholder="请设置昵称" />
				</view>
			</view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="tip">建议使用您的微信头像与昵称</view>
			<!-- #endif -->
			<view class="btn">
				<u-button type="primary" text="确定" @click="setAvatar" shape="circle"></u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import env from '../../config/env.js'
	import $http from '@/utils/request.js'
	import appId from '@/config/appId.js'
	export default {
		data() {
			return {
				avatarUrl: '', //展示用
				avatar: '', //上传用
				userInfo: {},
				pagesNum: '',
			}
		},
		onShow() {
			this.pagesNum = getCurrentPages().length
			this.getInfo()
			// this.userInfo = uni.getStorageSync('userInfo')
			// this.avatarUrl = env.filePublic + this.userInfo.avatar
			// this.avatar = this.userInfo.avatar
		},
		methods: {
			// 我的信息
			getInfo() {
				uni.showLoading({
					title: '加载中'
				});
				$http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.userInfo = res.data
						this.avatarUrl = env.filePublic + res.data.avatar
						this.avatar = res.data.avatar
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			setAvatar() {
				uni.showLoading({
					title: '加载中'
				});
				let data = {
					nickName: this.userInfo.nickName, //昵称
					userId: this.userInfo.userId, //用户id
					avatar: this.avatar, //文件地址
				}
				$http.post('/api/v1/mp/user/mine/updateUserInfo', data).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						$http.post('/api/v1/mp/user/getLoginUserinfo', { appSource: appId }).then(res => {
							if (res.code == 0) {
								uni.setStorageSync('userInfo', res.data)
								this.toUserIndex()
							}
						})
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			onChooseImage() {
				let _this = this
				uni.chooseImage({ //选择本地图片
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						_this.avatarUrl = res.tempFilePaths[0] // 将选择的图片路径预览
						$http.upload(res.tempFilePaths[0]).then(res2 => {
							uni.hideLoading();
							if (res2.code == 0) {
								this.avatarUrl = res.tempFilePaths[0]
								this.avatar = res2.data.fileName
							}
						}).catch(() => {
							uni.hideLoading();
						})
					}
				});
			},
			onChooseavatar(e) {
				uni.showLoading({
					title: '加载中'
				});
				$http.upload(e.detail.avatarUrl).then(res => {
					uni.hideLoading();
					if (res.code == 0) {
						this.avatarUrl = e.detail.avatarUrl
						this.avatar = res.data.fileName
					}
				}).catch(() => {
					uni.hideLoading();
				})
			},
			toUserIndex() {
				uni.switchTab({
					url: `/pages/user/index`
				})
			},
		}
	}
</script>
<style lang="scss" scoped>
	.wrap {
		min-height: calc(100vh - 64px - var(--status-bar-height));
		background-color: #FFFFFF;
		padding: 15px;

		&-avatar {
			justify-content: space-between;
			border-bottom: 1px solid rgba(102, 102, 102, 0.12);
			line-height: 50px;

			.title {
				color: #666;
				font-size: 30rpx
			}

			.setName {
				.input {
					text-align: right;
					width: 600rpx;
					line-height: 100rpx;
					height: 100rpx;
				}
			}

			.button {
				border: none;
				border-radius: 50%;
				background-color: #fff;
				padding: 0;
				margin: 0;
			}
		}

		&-avatar:first-child {
			margin-bottom: 10px;
		}

		.tip {
			margin: 5px 0;
			font-size: 24rpx;
			color: #999;
		}

		.btn {
			::v-deep .u-button {
				margin-top: 80rpx;
				border: none;
				color: #fff;
				background: $uni-text-color;
			}
		}
	}
</style>