<page-layout>
<view slot="header">
<header-navbar title="个人信息"></header-navbar>
</view>
<!-- 关键代码 start -->
<view slot="scroll" class="content">
<view class="row">
<view class="text1">头像:</view>
<button class="avatar-wrapper" open-type="chooseAvatar" bindchooseavatar="onChooseAvatar">
<image class="avatar" src="{{userInfo.avatar || ''}}"></image>
</button>
</view>
<view class="row">
<view class="text1">昵称:</view>
<input type="nickname" class="name-input" name="nickname" value="{{userInfo.nickName||''}}" bindchange="onInput" placeholder="请输入昵称" />
</view>
</view>
<!-- 关键代码 end -->
<view slot="bottom" class="info__footer">
<t-button t-class="footer-btn" theme="primary" content="保存" size="medium" shape="round" hover-class="none" bindtap="tapSave"></t-button>
</view>
</page-layout>
import request from '../../utils/request'
const baseUrl = require('../../utils/baseUrl')
Page({
data: {
userInfo: {
avatar: '',
customerId: '',
depositNum: '',
mobile: '',
nickName: '',
waterNum: ''
}
},
/**
* 生命周期函数--监听页面加载
*/
onLoad(options) {
this.getUserInfo()
},
// 最终提交保存
async tapSave() {
await this.uploadFile()
console.log(this.data.userInfo);
// return
const res = await request('/customerInfo/update', 'PUT', {
"avatar": this.data.userInfo.avatar,
"nickName": this.data.userInfo.nickName,
})
console.log('res', res);
if (res.success) {
wx.showToast({
title: '保存成功',
icon: 'none'
})
wx.switchTab({ url: '/pages/usercenter/index' });
}
},
// 输入昵称
onInput(e) {
const { value } = e.detail
console.log('输入昵称', value);
this.setData({
['userInfo.nickName']: value
})
},
// 选择头像
onChooseAvatar(e) {
console.log('选择头像', e);
const { avatarUrl } = e.detail
this.setData({
['userInfo.avatar']: avatarUrl
})
},
uploadFile() {
let that = this
return new Promise((resolve, reject) => {
console.log('uploadFile');
let url = `${baseUrl}/waterStoreFile/upload`
// res.tempFiles[0].tempFilePath
wx.uploadFile({
filePath: this.data.userInfo.avatar,
name: 'file',
url: url,
header: {
'Authorization': wx.getStorageSync('token') || ''
},
success(res) {
let result = JSON.parse(res.data)
console.log('上传成功', result);
if (result.success) {
console.log('成功');
that.setData({
['userInfo.avatar']: result.data.outsideUrl
})
}
resolve()
},
fail(rej) {
console.log('rej', rej);
resolve(rej)
}
})
})
},
async getUserInfo() {
const res = await request('/customerInfo/get', 'GET')
console.log('个人信息', res);
this.setData({
userInfo: res.data || {}
})
}
})
.content {
padding: 20rpx;
}
.info__footer {
display: flex;
justify-content: center;
align-items: flex-start;
height: 80rpx;
padding-top: 20rpx;
background: #fff;
}
.info__footer .footer-btn {
width: 398rpx;
}
.footer-btn {
background: linear-gradient(90deg, #34AAFF 0%, #0A73EE 100%) !important;
border: none !important;
}
.footer-btn::after {
border: none !important;
}
.content .row {
display: flex;
align-items: center;
height: 110rpx;
padding-left: 20rpx;
}
.content .text1 {
flex: 2;
}
.content .name-input,
.content .avatar-wrapper {
flex: 6;
text-align: right;
}
.content .avatar-wrapper::after {
border: none !important;
}
.content .avatar-wrapper {
display: flex;
justify-content: flex-end;
}
.content .avatar-wrapper .avatar {
display: block;
width: 100rpx;
height: 100rpx;
border-radius: 50%;
}