<template>
<view class="container">
<view class="card">
<view class="item flex align-center space-between">
<view class="label">
头像
</view>
<button class="avatar" open-type="chooseAvatar" @chooseavatar="chooseavatar">
<image :src="userInfo.headimg" mode=""></image>
</button>
</view>
<view class="item flex align-center space-between">
<view class="label">
昵称
</view>
<view class="value">
<input type="nickname" v-model="userInfo.username" @change="getname" value="" placeholder="用户昵称" />
</view>
</view>
</view>
<view class="options flex center" @click="submit" >
保存
</view>
</view>
</template>
<script>
import {
getInfo,update
} from "@/api/user.js";
import { upload } from "@/api/index.js";
export default {
data() {
return {
userInfo: {},
sexRange: [{
id: '男',
name: '男'
}, {
id: '女',
name: '女'
}]
}
},
onLoad() {
this.getInfo();
},
methods: {
getname(e){
this.userInfo.username = e.detail.value;
},
chooseavatar(e){
let that = this;
console.log('event',e);
upload({
filePath: e.detail.avatarUrl,
}).then(ras=>{
that.userInfo.headimg = ras.info.url;
})
},
submit(){
update({
data:{
headimg:this.userInfo.headimg,
username:this.userInfo.username,
}
}).then(res=>{
if(res.code == 1){
uni.showToast({
title:'保存成功'
});
setTimeout(()=>{
uni.navigateBack({
})
})
}
})
},
sexChange(e){
this.userInfo.base_sex = this.sexRange[e.detail.value].name;
},
getInfo() {
getInfo({
data: {}
}).then(res => {
this.userInfo = res.data.user;
})
},
goAddress() {
uni.navigateTo({
url: '/pages/me/address-list'
})
},
}
}
</script>
<style lang="scss">
.card {
margin-top: 10upx;
background: rgba(255, 255, 255, 1);
padding: 0 30upx;
.item {
border-bottom: 1px solid rgba(229, 229, 229, 1);
height: 100upx;
&:last-child {
border: none;
}
.label {
color: rgba(0, 0, 0, 1);
font-size: 30rpx;
}
.value {
color: rgba(128, 128, 128, 1);
font-size: 28rpx;
text-align: right;
}
span {
display: block;
font-size: 36upx;
margin-left: 16upx;
transform: scaleX(0.5);
}
.avatar {
width: 70rpx;
height: 70rpx;
border-radius: 50%;
margin: 0;
padding: 0;
background: none;
&::after{
border: none;
}
image {
width: 70upx;
height: 70upx;
border-radius: 50%;
}
}
}
}
page {
background: rgba(247, 247, 250, 1);
}
.options{
width: 690rpx;
height: 94rpx;
background: rgba(58, 131, 251, 1);
border-radius: 50rpx;
color: rgba(255, 255, 255, 1);
font-size: 36rpx;
line-height: 36rpx;
position: fixed;
bottom: 50upx;
left: 30upx;
}
</style>