You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
 
 
 
 
 
huazhiyu/pages/Information/Information.vue

153 lines
3.5 KiB

<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="" @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>