149 lines
3.3 KiB
Vue
149 lines
3.3 KiB
Vue
|
<template>
|
||
|
|
<view class="container">
|
||
|
|
<view class="user-box">
|
||
|
|
<view class="avatar-box">
|
||
|
|
<button open-type="chooseAvatar" @chooseavatar="chooseaAatar" class="clearBtn">
|
||
|
|
<view class="avatar">
|
||
|
|
<u-avatar :src="src" size="80" shape="square"></u-avatar>
|
||
|
|
</view>
|
||
|
|
</button>
|
||
|
|
</view>
|
||
|
|
<view class="user">
|
||
|
|
<u-form labelPosition="left">
|
||
|
|
<u-form-item
|
||
|
|
label="昵称"
|
||
|
|
prop="username"
|
||
|
|
borderBottom
|
||
|
|
ref="item1">
|
||
|
|
<u-input v-model="username" placeholder="请输入昵称" border="none"></u-input>
|
||
|
|
</u-form-item>
|
||
|
|
</u-form>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
<view class="btn">
|
||
|
|
<u-button type="primary" text="保存" @click="saveInfo" :customStyle="{width:'45%'}"></u-button>
|
||
|
|
<u-button type="error" text="取消" @click="cancel" :customStyle="{width:'45%'}"></u-button>
|
||
|
|
</view>
|
||
|
|
</view>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { getConfig,setUserInfo,getUserInfo,getToken} from '@/utils/auth';
|
||
|
|
export default {
|
||
|
|
data() {
|
||
|
|
return {
|
||
|
|
src: '/static/img/avatar.png',
|
||
|
|
username:'',
|
||
|
|
userinfo:{},
|
||
|
|
savepth:'',//真正保存的文件路径
|
||
|
|
};
|
||
|
|
},
|
||
|
|
onShow() {
|
||
|
|
this.userinfo = getUserInfo() || {};
|
||
|
|
console.log(getUserInfo())
|
||
|
|
console.log(getUserInfo().avatar)
|
||
|
|
this.src = getUserInfo().avatar || ''
|
||
|
|
this.username = getUserInfo().nickname || ''
|
||
|
|
},
|
||
|
|
methods:{
|
||
|
|
chooseaAatar(e){
|
||
|
|
console.log(e)
|
||
|
|
this.src = e.detail.avatarUrl
|
||
|
|
this.uploadFile(e.detail.avatarUrl );//选好了就开始上传
|
||
|
|
},
|
||
|
|
uploadFile(src){
|
||
|
|
uni.showLoading({
|
||
|
|
title:'加载中...'
|
||
|
|
})
|
||
|
|
uni.uploadFile({
|
||
|
|
url:getConfig().uploadUrl,//图片上传路径
|
||
|
|
fileType:'image',//图片类型,
|
||
|
|
name:'file',//对应接口的文件名称
|
||
|
|
filePath:src,
|
||
|
|
header:{//请求头
|
||
|
|
"Content-Type": "multipart/form-data"
|
||
|
|
},
|
||
|
|
success:(res)=>{
|
||
|
|
uni.hideLoading()
|
||
|
|
//成功的回调
|
||
|
|
//一般用于重新获取数据渲染页面
|
||
|
|
const r = JSON.parse(res.data);
|
||
|
|
console.log(r)
|
||
|
|
if(r.code==0){
|
||
|
|
this.savepth = r.url
|
||
|
|
}
|
||
|
|
},
|
||
|
|
fail:(err)=>{
|
||
|
|
//失败的回调
|
||
|
|
console.log("err",err)
|
||
|
|
}
|
||
|
|
|
||
|
|
})
|
||
|
|
},
|
||
|
|
//保存数据
|
||
|
|
saveInfo(){
|
||
|
|
let that = this
|
||
|
|
let form = {};
|
||
|
|
form.nickName = this.username
|
||
|
|
form.avatarUrl = this.savepth,
|
||
|
|
form.openid = getToken()
|
||
|
|
uni.showLoading({
|
||
|
|
title:'保存中...'
|
||
|
|
})
|
||
|
|
that.request('saveUserInfo', form, 'POST').then(res=>{
|
||
|
|
console.log("wxloginres: ", res)
|
||
|
|
if(res.code==0){
|
||
|
|
uni.hideLoading()
|
||
|
|
setTimeout(function () {
|
||
|
|
uni.hideLoading();
|
||
|
|
}, 2000);
|
||
|
|
setUserInfo(res.data); //存储最新用户信息
|
||
|
|
uni.navigateBack({
|
||
|
|
delta:1//返回上一页
|
||
|
|
})
|
||
|
|
}else{
|
||
|
|
uni.showToast({
|
||
|
|
icon:"none",
|
||
|
|
title: "登录失败，请稍后试试！",
|
||
|
|
duration:2000
|
||
|
|
})
|
||
|
|
}
|
||
|
|
})
|
||
|
|
},
|
||
|
|
//取消保存
|
||
|
|
cancel(){
|
||
|
|
uni.navigateBack({
|
||
|
|
delta:1,//返回上一层
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style lang="scss">
|
||
|
|
.user-box{
|
||
|
|
width: 100%;
|
||
|
|
height: 460rpx;
|
||
|
|
background: #fff;
|
||
|
|
.avatar-box{
|
||
|
|
height: 260rpx;
|
||
|
|
.avatar{
|
||
|
|
width: 200rpx;
|
||
|
|
margin: 80rpx auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.user{
|
||
|
|
width: 90%;
|
||
|
|
margin: 30rpx auto;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
.btn{
|
||
|
|
display: flex;
|
||
|
|
justify-content: flex-end;
|
||
|
|
align-items: center;
|
||
|
|
width: 90%;
|
||
|
|
margin: 100rpx auto;
|
||
|
|
}
|
||
|
|
</style>
|
||
|
|
|