<template>
|
<view class="setting">
|
<Navbar title="用户信息"></Navbar>
|
<view class="user">
|
<view class="userImg" @click="chooseImg">
|
<view class="t">用户头像</view>
|
<button class="cell-wrapper" open-type="chooseAvatar" @chooseavatar="chooseImg">
|
<image class="head" :src="userForm.headImg" mode="widthFix"></image>
|
</button>
|
</view>
|
<view class="userName">
|
<view class="t">用户昵称</view>
|
<input class="input" type="nickname" v-model="userForm.nickName" placeholder="请输入昵称" />
|
</view>
|
<button class="btn" @click="savaUser">保存</button>
|
</view>
|
</view>
|
</template>
|
|
<script setup>
|
import {ref, onMounted} from 'vue'
|
import Navbar from '../../components/navbar/navbar.vue'
|
import {setUserInfo, getUserInfo} from '@/api/index.js'
|
|
const userForm = ref({
|
headImg: '',
|
nickName: ''
|
})
|
|
const chooseImg = (e) => {
|
if(e.detail.avatarUrl){
|
userForm.value.headImg = e.detail.avatarUrl
|
}
|
}
|
|
// 获取用户信息存缓存
|
const getUser = () => {
|
getUserInfo().then(res => {
|
if(res.code == 200){
|
uni.setStorageSync('userInfo',JSON.stringify(res.data))
|
}
|
})
|
}
|
|
const savaUser = () => {
|
setUserInfo(userForm.value).then(res => {
|
if(res.code === 200) {
|
getUser()
|
uni.showToast({
|
title:'修改成功',
|
icon: 'success'
|
})
|
setTimeout(() => {
|
uni.navigateBack()
|
}, 1000)
|
}
|
})
|
}
|
|
onMounted(() => {
|
const userInfo = JSON.parse(uni.getStorageSync('userInfo'))
|
userForm.value = {
|
id: userInfo.id,
|
headImg: userInfo.headImg,
|
nickName: userInfo.nickName
|
}
|
})
|
</script>
|
|
<style scoped lang="scss">
|
.user{
|
padding: 40rpx;
|
box-sizing: border-box;
|
.userImg{
|
width: 100%;
|
padding: 10rpx 20rpx;
|
box-sizing: border-box;
|
border-radius: 20rpx;
|
background-color: #fff;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.cell-wrapper{
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 50%;
|
border: 0;
|
margin: 0;
|
background-color: #ddd;
|
}
|
.head{
|
width: 80rpx;
|
height: 80rpx;
|
border-radius: 50%;
|
margin-left: -30rpx;
|
}
|
}
|
.userName{
|
margin-top: 40rpx;
|
width: 100%;
|
padding: 30rpx 20rpx;
|
box-sizing: border-box;
|
border-radius: 20rpx;
|
background-color: #fff;
|
display: flex;
|
justify-content: space-between;
|
align-items: center;
|
.input{
|
width: 200rpx;
|
text-align: right;
|
}
|
}
|
.btn{
|
margin-top: 100rpx;
|
background-color: $uni-primary;
|
border-color: $uni-primary;
|
color: #fff;
|
}
|
}
|
</style>
|
