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.
185 lines
3.8 KiB
185 lines
3.8 KiB
<template>
|
|
<view class="editInfo">
|
|
<view class="status_bar"><!-- 这里是状态栏 --></view>
|
|
<view class="a" v-if="uploadPic == false">
|
|
<u-navbar @leftClick="leftClick" height="50" :autoBack="true">
|
|
<view
|
|
class="u-nav-slot"
|
|
slot="left"
|
|
>
|
|
<u-icon
|
|
name="arrow-left"
|
|
size="19"
|
|
></u-icon>
|
|
<view class="title">
|
|
个人中心
|
|
</view>
|
|
</view>
|
|
</u-navbar>
|
|
<view class="editInfoContent">
|
|
<view class="editItem" style="margin-top:0" @click="modifyPhoto">
|
|
<view class="editTitle">
|
|
头像修改
|
|
</view>
|
|
<view class="touxiang">
|
|
<u-avatar :src="userInfo.avatar" @c></u-avatar>
|
|
<u-icon
|
|
name="arrow-right"
|
|
size="20"
|
|
></u-icon>
|
|
</view>
|
|
</view>
|
|
<view class="editItem">
|
|
<view class="editTitle">
|
|
昵称修改
|
|
</view>
|
|
<view class="input">
|
|
<u--input placeholder="请输入昵称" inputAlign="right" color="#999999" border="none" v-model="userInfo.nickname"></u--input>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<view class="submitBtn" @click="modifyInfoHandle">
|
|
提交
|
|
</view>
|
|
</view>
|
|
|
|
<view class="b" v-else>
|
|
<okingtz-cropper
|
|
@back="back"
|
|
:image="userInfo.avatar"
|
|
selectButtonBackgroundColor="#0076F6"
|
|
saveButtonBackgroundColor="#0076F6"
|
|
@uploadSuccess="uploadSuccess"></okingtz-cropper>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import axios from 'axios'
|
|
import { profileUser, uploadBase64, UserInfo } from '@/common/api.js';
|
|
import OkingtzCropper from '@/components/okingtz-cropper/components/okingtz-cropper/okingtz-cropper'
|
|
export default {
|
|
data() {
|
|
return {
|
|
userInfo: {},
|
|
uploadPic: false
|
|
}
|
|
},
|
|
components: {
|
|
OkingtzCropper
|
|
},
|
|
methods:{
|
|
// 上传照片
|
|
async uploadSuccess(res){
|
|
const data = await uploadBase64({base64img: res},{});
|
|
this.uploadPic = false
|
|
this.userInfo.avatar = this.baseUrl+data.url
|
|
this.userInfo.avatar1 = data.url
|
|
console.log(this.userInfo)
|
|
},
|
|
modifyPhoto(){
|
|
this.uploadPic = true
|
|
},
|
|
back(){
|
|
this.uploadPic = false
|
|
},
|
|
leftClick(){
|
|
uni.navigateTo({
|
|
url:'/pages/my/my'
|
|
})
|
|
},
|
|
//提交
|
|
async modifyInfoHandle(){
|
|
let params = {
|
|
nickname:this.userInfo.nickname,
|
|
avatar:this.userInfo.avatar1
|
|
}
|
|
const res = await profileUser(params,{ custom: { auth: true }})
|
|
uni.showToast({
|
|
title:"修改成功"
|
|
})
|
|
this.getUserInfo();
|
|
setTimeout(()=>{
|
|
uni.navigateBack({
|
|
delta:1
|
|
})
|
|
},2000)
|
|
},
|
|
//查询用户信息
|
|
async getUserInfo(){
|
|
let res = await UserInfo({},{ custom: { auth: true }})
|
|
uni.setStorageSync("userInfo",res);
|
|
if(res.avatar){
|
|
res.avatar1 = res.avatar
|
|
if(res.avatar.indexOf("http") == -1 && res.avatar.indexOf("uploads/") == 0){
|
|
res.avatar = this.baseUrl + res.avatar
|
|
}
|
|
}
|
|
this.userInfo = res;
|
|
},
|
|
},
|
|
onShow() {
|
|
console.log(this.baseUrl)
|
|
this.getUserInfo()
|
|
}
|
|
}
|
|
</script>
|
|
|
|
|
|
<style lang="scss" scoped>
|
|
.u-nav-slot{
|
|
display: flex;
|
|
align-items: center;
|
|
.title{
|
|
font-size: 36upx;
|
|
color: #222222;
|
|
}
|
|
}
|
|
.editInfoContent{
|
|
margin:0 24upx;
|
|
margin-top:50px;
|
|
padding-top:20upx;
|
|
.editItem{
|
|
padding:40upx 30upx;
|
|
display: flex;
|
|
background: #FFFFFF;
|
|
border-radius: 20upx;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin:20upx 0;
|
|
.editTitle{
|
|
font-size: 30upx;
|
|
color: #333333;
|
|
}
|
|
.touxiang{
|
|
display: flex;
|
|
align-items: center;
|
|
&>image{
|
|
width: 90upx;
|
|
height: 90upx;
|
|
border-radius: 50%;
|
|
margin-right:20upx;
|
|
}
|
|
}
|
|
.input{
|
|
text-align: right;
|
|
color:#999999
|
|
}
|
|
.editInfoIcon{
|
|
width:30upx;
|
|
height:30upx;
|
|
}
|
|
}
|
|
}
|
|
.submitBtn{
|
|
width:64%;
|
|
margin:80upx auto;
|
|
background: #0076F6;
|
|
border-radius: 60upx;
|
|
font-size: 30upx;
|
|
font-weight: 400;
|
|
color: #FFFFFF;
|
|
text-align: center;
|
|
padding:30upx 0;
|
|
}
|
|
</style> |