wangluohuoyun-app/pages/mine/settings/editAvatar.vue

<template>
	<view class="content">
		<view @click="upload" class="picture">
			<image class="xj-image"  v-if="!deptListurl.avatarUrl" src="@/static/images/common/tianjiazhaopian@2x.png"></image>
			<image class="xj-image" :src="deptListurl.avatarUrl" v-if="deptListurl.avatarUrl"></image>
			
		</view>
			<view @click="submit" class="submit">提交</view>
		<u-action-sheet :actions="$helper.imgTypeList" :title="$helper.imgType" :show="isShowimgType"
			@select="imgTypeSelect" :closeOnClickOverlay="true" :closeOnClickAction="true"
			@close="isShowimgType=false">
		</u-action-sheet>
	</view>
</template>

<script>
	import uploadImage from '@/components/ossutil/uploadFile.js';
	import {
		mapState
	} from 'vuex';
	var that
	export default {
		data() {
			return {
					isShowimgType:false,
					imgSrc:'',
					deptListurl:{
						avatarUrl:'',
						id:''
					}
			}
		},
		onLoad() {
			that = this
		},
		computed: {
			...mapState(['hasLogin', 'userInfo'])
		},
		methods: {
			upload() {
				this.isShowimgType = true
			
			},
			imgTypeSelect(val) {
				console.log(val)
				if (val.name == '相册') {
					uni.chooseImage({
						count: 1,
						sourceType: that.$helper.chooseImage.sourceType,
						success: function(res) {
							console.log(JSON.stringify(res.tempFilePaths));
							uploadImage(res.tempFilePaths[0], 'appData/',
								result => {
									// 上传成功
									console.log('图片地址', result)
									that.$request.baseRequest('get', '/BDAccessToken/getAuth', {
											apiKey: 'yNWLRW6unoUxo2KXiCZxOxGS',
											secretKey: 'E8hqzKWdFdTGnFnpAwZ7ixtL89SN3deR'
										}).then(res => {
												that.$request.baseRequest('get', '/commonUser/getUserDefinedBean', {
														accessToken: res.data,
														  imagePath : result
													}).then(res1 => {
																	that.deptListurl.avatarUrl = result
													})
													.catch(res => {
													uni.$u.toast( res.message);
													});
										})
										.catch(res => {
										uni.$u.toast( res.message);
										});
									
						
			
								}
							)
						}
					});
			
				} else {
			
				}
			
			},
			submit(){
				this.deptListurl.id = this.userInfo.id
	
				
				
				
				
				
				// this.$request.baseRequest('post', '/commonUser/editUserInfo', this.deptListurl).then(res => {
				// 		uni.showToast({
				// 			title: '修改成功！',
				// 			icon: 'success',
				// 			duration: 2000,
				// 			success() {
				// 				setTimeout(()=>{
				// 					that.userInfo.avatarUrl = that.deptListurl.avatarUrl
				// 					var _student = uni.getStorageSync('userInfo');
				// 					_student.avatarUrl = that.deptListurl.avatarUrl;
				// 					uni.setStorageSync('userInfo', _student);
				// 					var name = 'userInfo';
				// 					var value = _student;
				// 					that.$store.commit('$uStore', {
				// 						name,
				// 						value
				// 					});
				// 					// this.$api.msg('修改成功2！')
				// 					uni.navigateBack({
				// 						delta:1
				// 					})
				// 				},2000)
				// 			}
				// 		})
				
				// 	})
				// 	.catch(res => {
				// 	uni.$u.toast( res.message);
				// 	});
			}
		}
	}
</script>

<style>
	.content{
		background: white;
		padding: 20rpx;
	}
.left-text {
			width: 290rpx;
			color: #333333;
			display: flex;
			align-items: center;
		}
		.picture {
			margin-top: 20rpx;
			background: #F5F6FA;
			width: 212rpx;
			height: 212rpx;
			border-radius: 10rpx;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color: #6A7282;
		}
		.xj-image {
			width: 100rpx;
			height: 100rpx;
		}
		.submit{
			margin-top: 20rpx;
			background: #2772FB;
			border-radius: 50rpx;
			padding: 20rpx 0;
			color: white;
			text-align: center;
		}
</style>