先上HTML:
<
view
class=
"list-menu">
<
view
class=
"navigator"
bindtap=
'changeHead'>
<
view
class=
"navigator-text"><
text
>头像
</
text
></
view
>
<
view
class=
"navigator-content-text"
wx:if=
"{{myHeadImg!=null}}">
<
image
mode=
"aspectFill"
class=
"avatar"
src=
"{{myHeadImg}}"></
image
>
</
view
>
<
view
class=
"navigator-content-text"
wx:else
>
<
image
mode=
"aspectFill"
class=
"avatar"
src=
"{{userInfo.avatarUrl}}"></
image
>
</
view
>
<
image
class=
'charge-img'
src=
'https://img.cdn.zhaoshang800.com/img/2018/04/11/broker/703218f3-2b76-473d-86a3-1bd901cc57af.png'></
image
>
</
view
>
<
view
wx:for=
"{{info_list}}"
wx:key=
"{{id}}">
<
view
class=
"navigator">
<
view
class=
"navigator-text">{{item.title}}
</
view
>
<
view
class=
"navigator-content-text">{{item.content}}
</
view
>
</
view
>
</
view
>
</
view
>
这是JS：
const app = getApp();
Page({
/**
* 页面的初始数据
*/
data: {
myHeadImg:
null,
//本地的头像url
userInfo:{},
//获取微信的 头像，昵称，性别
hasUserInfo:
false,
info_list:[{
title:
"真实姓名",
content:
""
}, {
title:
"手机号码",
content:
""
}, {
title:
"所在城市",
content:
""
},]
},
changeHead:
function(){
// console.log('换头像')
var that=
this;
wx:wx.chooseImage({
count:
1,
sizeType: [
'original',
'compressed'],
sourceType: [
'album',
'camera'],
success:
function(res) {
console.log(res)
// userInfo.avatarUrl
// var userImg = "userInfo.avatarUrl";
var tempFilePaths=res.tempFilePaths;
// that.setData({ userImg: tempFilePaths})
that.upload(that, tempFilePaths)
},
fail:
function(res) {},
complete:
function(res) {},
})
},
//上传图片 后台接口
upload:
function(page, path) {
var that=
this;
wx.showToast({
icon:
"loading",
title:
"正在上传"
}),
console.log(path[
0])
console.log(app.data.mytoken)
wx.uploadFile({
url:
`${app.data.requestUrl
}/sale/image/upload`,
// method: 'post',
filePath: path[
0],
name:
'file',
success:
function (res) {
console.log(res);
if (res.statusCode !=
200) {
wx.showModal({
title:
'提示',
content:
'上传失败',
showCancel:
false
})
return;
}
var data = res.data
app.data.useLocaImg=
1
that.setData({
//上传成功修改显示头像
'myHeadImg': path[
0]
})
//将图片地址存到本地缓存
wx.setStorage({
key:
"myHeadImg",
data: path[
0]
})
},
fail:
function (e) {
// console.log(e);
wx.showModal({
title:
'提示',
content:
'上传失败',
showCancel:
false
})
},
complete:
function () {
wx.hideToast();
//隐藏Toast
}
})
},
/**
* 生命周期函数--监听页面加载
*/
onLoad:
function (options) {
var that=
this;
//得到本地缓存
wx.getStorage({
key:
'myHeadImg',
success:
function (res) {
// console.log(res.data)
//myHeadImg
that.setData({
'myHeadImg': res.data
})
}
})
// console.log(this.data.myHeadImg)
var bindName =
"info_list[" +
0 +
"].content";
var bindNumber =
"info_list[" +
1 +
"].content";
var bindCity =
"info_list[" +
2 +
"].content";
// console.log(app.data.MycityName)
this.setData({
[bindName]: app.data.MyuserName,
[bindNumber]: app.data.MyphoneNumber,
[bindCity]: app.data.MycityName,
})
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo:
true,
// info_list:app.globalData.userInfo.nickName
})
}
else
if (
this.data.canIUse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo:
true
})
}
}
else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo:
true
})
}
})
}
},
//退出登陆
dropOut:
function(){
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady:
function () {
},
/**
* 生命周期函数--监听页面显示
*/
onShow:
function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide:
function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload:
function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh:
function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom:
function () {
},
sure:
function(){
wx.navigateBack({
delta:
1
})
}
})
这是CSS：
.list-menu{
margin-top:
20
rpx;
background-color:
#fff;
}
.navigator {
padding:
20
rpx
10
rpx
20
rpx
30
rpx;
position:
relative;
display:
flex;
align-items:
center;
border-bottom:
1
rpx
solid
#eaeaea;
}
.navigator:before {
content:
" ";
position:
absolute;
left:
30
rpx;
top:
0;
right:
30
rpx;
height:
1px;
border-top:
1
rpx
solid
#D8D8D8;
color:
#D8D8D8;
}
.navigator:first-child:before {
display:
none;
}
.navigator-text {
flex:
1;
font-size:
34
rpx;
font-weight:
400;
}
.navigator-content-text{
font-size:
34
rpx;
color:
#323232;
padding-right:
30
rpx;
font-weight:
400;
}
.avatar{
width:
106.7
rpx;
height:
106.7
rpx;
border:
1
rpx
solid
#eaeaea;
border-radius:
100%;
margin-right:
16.7
rpx;
margin-top:
16.7
rpx;
}
.navigator-text {
flex:
1;
font-size:
34
rpx;
font-weight:
400;
color:
#323232;
}
.navigator-content-text{
font-size:
34
rpx;
color:
#323232;
padding-right:
20
rpx;
font-weight:
400;
}
.navigator
.charge-img{
padding-right:
20
rpx;
}
.charge-area{
margin-top:
20
rpx;
width:
100%;
box-sizing:
border-box;
padding:
16
rpx
20
rpx;
background:
#fff;
display:
flex;
}
.charge-text{
flex:
9;
font-size:
34
rpx;
color:
#323232;
font-weight:
400;
padding-left:
8
rpx;
}
.charge-imgs{
flex:
1;
text-align:
right;
}
.charge-img{
width:
30
rpx;
height:
30
rpx;
}
.button-area{
margin-top:
60
rpx;
box-sizing:
border-box;
width:
100%;
padding:
0
30
rpx;
}
.confirm-button{
background-color:
#E71853;
color:
#fff;
}