zz--front/pages2/wd/avatar.vue

<template>
	<view>
		<u-cell-group>
				<u-cell-item  title="头像" @click="editAvatar">
					<image :src="avatarUrl" class="avatar"></image>
				</u-cell-item>
				<u-cell-item  title="昵称" :value="nickname" @click="editNickName"></u-cell-item>
			</u-cell-group>
			<u-modal v-model="show" :show-cancel-button="true" title="修改昵称">
				<view class="slot-content">
					<u-input v-model="nickname"  />
				</view>
			</u-modal>
			<view style="position: fixed;bottom: 50rpx;width: 100%;padding: 20rpx;">
				<button  @click="submitForm" class="submit_btn">保存</button>
				
				<button  @click="exit" class="exit_btn">退出登录</button>
			</view>
	</view>
</template>

<script>
	import {mapGetters} from 'vuex';
	export default {
		data() {
			return {
				show: false,
				avatarUrl:'',
				nickname:'',
				url:''
			}
		},
		onLoad(option) {
			this.avatarUrl = this.$method.splitImgHost(this.userInfo.avatar)
			this.nickname = this.userInfo.nickname
		},
		methods: {
			imageInfos(){
				var self = this
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: self.avatarUrl,
						success: async res => {
							let canvasWidth = res.width; //图片原始长宽
							let canvasHeight = res.height;
							if (canvasWidth > 1000 || canvasHeight > 1000) {
								uni.compressImage({
									src: self.avatarUrl,
									quality: 75,
									width: '50%',
									height: '50%',
									success: async rest => {
										const waitUpload = await self.uploadFile(rest.tempFilePath, 0);
										resolve()
									} 
								});
							} else {
								console.log('无需压缩');
								const waitUpload = await self.uploadFile(self.avatarUrl, 0);
								resolve()
							}
						}
					});
				});
			},
			uploadFile(options, int) {
				return new Promise((resolve, reject) => {
					var self = this;
					var data = {
						imageStatus: int
					};
					this.$api.aliyunpolicy(data).then(res => {
						var ossToken = res.data.data.resultContent;
						uni.uploadFile({
							url: ossToken.host,
							name: 'file',
							filePath: options,
							fileType: 'image',
							header: {
								AuthorizationToken: 'WX ' + uni.getStorageSync('token')
							},
							formData: {
								key: ossToken.dir,
								OSSAccessKeyId: ossToken.accessid,
								policy: ossToken.policy,
								Signature: ossToken.signature,
								callback: ossToken.callback,
								success_action_status: 200
							},
							success: result => {
								if (result.statusCode === 200) {
									uni.showToast({
										title: '成功',
										icon: 'none'
									});
									self.userInfo.avatar = ossToken.dir;
									resolve();
								} else {
									uni.showToast({
										title: '上传失败',
										icon: 'none'
									});
									return;
								}
							},
							fail: error => {
								uni.showToast({
									title: '上传接口报错',
									icon: 'none'
								});
								return;
							}
						});
					});
				});
			},
			updateInfo(){
				let self = this
				this.$api.appuserInfo(this.userInfo).then(res => {
					if (res.data.code === 200) {
						uni.showToast({
							title: '提交成功',
							icon: 'none'
						});
						self.$api.refreshUserInfo()
					}
				});
			},
			submitForm(){
				if(this.nickname==''){
					uni.showModal({
						title: "提示",
						content: '昵称不能为空',
						showCancel: false
					})
					return
				}
				this.userInfo.nickname=this.nickname
				this.submit()
			},
			async submit(){
				if(this.avatarUrl!=this.userInfo.avatar){
					const waitYS = await this.imageInfos();
				}
				this.updateInfo()
			},
			exit(){
				this.$method.exit()
			},
			editNickName(){
				this.show = true
			},
			editAvatar(){
				let that = this
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: [ 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    success: function (res) {
						that.avatarUrl = res.tempFilePaths[0]
				    }
				});
			}
		
		},
		computed: {...mapGetters(['userInfo'])}
	}
</script>

<style scope>
	.exit_btn{
		font-size: 30rpx;
		margin-top: 30rpx;
		padding: 5rpx;
	}
	.submit_btn{
		background-color: #32467B !important;
		border-color: #32467B !important;
		color: #FFFFFF;
		font-size: 30rpx;
		padding: 5rpx;
	}
	.slot-content{
		margin: 30rpx;
		color: #606266;
	}
	.avatar{
		height: 70rpx;
		width: 70rpx;
		border-radius: 50%;
		
	}
page {
		background: #FFFFFF;
	}
</style>