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.
 
 
 
 

139 lines
2.8 KiB

<template>
<view style="display: flex;flex-direction: column;">
<NavBar ref="nav" navTitle="个人信息" :showIcon="true">
</NavBar>
<loading-state ref="pageView" @request="request">
<view @click="uploadHeadImage()" class="menu-item">
<text class="text">头像</text>
<image :src="page.photo" style="width: 70rpx;height: 70rpx;margin-right: 10rpx;"></image>
<image class="more" src="../../static/more.png"></image>
</view>
<view class="line-thin"></view>
<view @click="remark()" class="menu-item">
<text class="text">昵称</text>
<text class="explain">{{page.nick}}</text>
<image class="more" src="../../static/more.png"></image>
</view>
</loading-state>
<uni-popup ref="inputDialog" type="dialog">
<uni-popup-dialog ref="inputClose" mode="input" title="修改昵称" :value="page.nick" placeholder="请输入内容"
@confirm="dialogInputConfirm"></uni-popup-dialog>
</uni-popup>
</view>
</template>
<script>
export default {
data() {
return {
page: {}
}
},
onLoad(options) {
this.request()
},
methods: {
// 获取数据
request() {
let _this = this
_this.$api.getBaseInfo(getApp().globalData.sid).then((resp) => {
_this.page = resp
_this.$nextTick(() => {
_this.$refs.pageView.setLoadState(2)
})
}).catch(e => {
console.log(e);
})
},
uploadHeadImage() {
let _this = this
uni.chooseImage({
success: (chooseImageRes) => {
const tempFilePaths = chooseImageRes.tempFilePaths;
uni.uploadFile({
url: _this.$api.headerUpload,
filePath: tempFilePaths[0],
name: 'file',
formData: {
'userSid': getApp().globalData.sid
},
success: (uploadFileRes) => {
_this.page.photo = JSON.parse(uploadFileRes.data).data;
}
});
}
});
},
// 修改昵称
remark() {
this.$refs.inputDialog.open()
},
dialogInputConfirm(val) {
let _this = this
_this.$api.changeNick({
userSid: getApp().globalData.sid,
userNickName: val
}).then((resp) => {
_this.page.nick = val
}).catch(e => {
console.log(e);
})
}
}
}
</script>
<style lang="scss">
page {
background-color: #f1f2f3;
}
.menu-item {
height: 112rpx;
width: auto;
display: flex;
flex-direction: row;
background-color: #fff;
align-items: center;
padding-left: 36rpx;
padding-right: 36rpx;
}
.more {
width: 35rpx;
height: 35rpx;
float: right;
}
.menu-item .icon {
width: 69rpx;
height: 35rpx;
}
.menu-item .text {
font-size: 32rpx;
color: #101010;
flex: 1;
float: left;
}
.menu-item .explain {
font-size: 28rpx;
color: #828282;
margin-right: 10rpx;
}
.line-thin {
height: 1rpx;
width: 100%;
background-color: #eee;
}
</style>