quzhou/pages/Information/Information.vue

<template>
	<view class="page">
		<!-- 用户信息列表 -->
		<view class="user-list">
			<view class="list" style="height: 160rpx;">
				<view class="title">
					<text>头像</text>
				</view>
				<view class="more-content">
					<u-upload
						:fileList="finishImageList"
						:previewFullImage="false" 
						@afterRead="afterRead"
						 width="50" height="50"
						style="display: none;"
						ref="upload"
						name="1"
						
					></u-upload>
					<image :src="avatarUrl" mode="aspectFill" @click="uploadAvatar"></image>
					<text class="iconfont icon-more more"></text>
				</view>
			</view>
			<view class="list" @click="onNickname">
				<view class="title">
					<text>昵称</text>
				</view>
				<view class="more-content">
					<text class="content">{{nickname}}</text>
					<text class="iconfont icon-more more"></text>
				</view>
			</view>
		
			
		</view>
		<!-- 提示框 -->
		<DialogBox ref="DialogBox"></DialogBox>
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	import {getToken} from '@/common/auth.js'
	import {updateUserInfo} from '@/common/api.js'
	export default {
		data() {
			
			return {
				finishImageList:[],
				fileList1: [],
				DialogBox: {},
				// 昵称
				nickname: '',
				finishName:'',
				avatarUrl:'',
				avatarUrl_short:''
			};
		},
		onLoad(option) {
			this.nickname = option.name
			this.avatarUrl = option.avatar
			
		},
		methods:{
			uploadAvatar(){
				this.$refs.upload.chooseFile()
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					this.avatarUrl = JSON.parse(result).data.fullurl;
					this.avatarUrl_short = JSON.parse(result).data.url;
					updateUserInfo({avatar:this.avatarUrl}).then(res=>{
						this.$refs.uToast.show({
							message:'修改头像成功'
						})
					})
				}
				
			},
			//上传照片
			uploadFilePromise(url) {
				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: this.baseUrl+'api/common/upload', 
						filePath: url,
						name: 'file',
						header:{
							token:getToken()
						},
						formData: {
						},
						success: (res) => {
							
							if(JSON.parse(res.data).code==1){
								setTimeout(() => {
									this.finishImageList.push({url:JSON.parse(res.data).data.fullurl,path:JSON.parse(res.data).data.url})
									resolve(res.data)
								}, 1000)
							}else{
								uni.$u.toast(JSON.parse(res.data).msg)
								
								resolve(res.data)
							}
						},
						fail: (res) => {
							console.log(res,"rrr")
						}
					});
				})
			},
			/**
			 * 昵称点击
			 */
			onNickname(){
				this.finishName = this.nickname
				this.$refs['DialogBox'].confirm({
					title: '更改昵称',
					placeholder: '请输入修改的昵称',
					value: this.finishName,
					DialogType: 'input',
					animation: 0
				}).then((res)=>{
					this.nickname = res.value;
					
					updateUserInfo({nickname:res.value}).then(res=>{
						this.$refs.uToast.show({
							message:'修改成功'
						})
					})
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	@import 'Information.scss';
	/deep/.u-upload__deletable{
		display: none;
	}
</style>