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.
206 lines
4.6 KiB
206 lines
4.6 KiB
<template>
|
|
<view class="page-user-modify">
|
|
<view class="top"></view>
|
|
<view class="item-box btPadding">
|
|
<view class="item">
|
|
<view class="left PfScMedium">头像</view>
|
|
<view class="right" @click="upload">
|
|
<img :src="avator" class="avator" v-if="!uinfo.avatar">
|
|
<img :src="uinfo.avatar" class="avator" v-else>
|
|
<view class="avator_tips">点击上传照片</view>
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="left PfScMedium">昵称</view>
|
|
<view class="right">
|
|
<input type="text" placeholder="请输入用户昵称" v-model="uinfo.nickname" disabled="">
|
|
</view>
|
|
</view>
|
|
<view class="item">
|
|
<view class="left PfScMedium">用户编号</view>
|
|
<view class="right over copy-box">
|
|
<view>{{uinfo.uid}}</view>
|
|
<img :src="cssUrl+'copy.svg'" class="copy" @click="copyUid(uinfo.uid)">
|
|
</view>
|
|
</view>
|
|
|
|
</view>
|
|
<view class="submit-blank"></view>
|
|
<view class="submit-box btPadding">
|
|
<view class="primary btn btn3" hover-class="hover" @click="save">保存</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
cssUrl:this.cssUrl,
|
|
avator:this.cssUrl+'default_avator.svg',
|
|
uinfo:{}
|
|
}
|
|
},
|
|
onLoad() {
|
|
this.getUser()
|
|
},
|
|
methods: {
|
|
save(){
|
|
this.$pop.modelShow('保存成功')
|
|
},
|
|
getUser(){
|
|
this.$http.req('client/user/info', {}, 'POST').then(data=>{
|
|
if(data == -1) return
|
|
this.uinfo = data
|
|
});
|
|
},
|
|
copyUid(uid) {
|
|
var that = this
|
|
uni.setClipboardData({
|
|
data: uid,
|
|
success: function () {
|
|
}
|
|
});
|
|
},
|
|
upload() {
|
|
var that = this
|
|
var token = uni.getStorageSync('token')
|
|
uni.chooseImage({
|
|
count: 1,
|
|
success: function(res) {
|
|
var tempFilePaths = res.tempFilePaths;
|
|
uni.uploadFile({
|
|
url: '/api/client/common/avatar/',
|
|
filePath: tempFilePaths[0],
|
|
name: 'file',
|
|
header: {
|
|
'Authorization': token
|
|
},
|
|
success: function(res){
|
|
try{
|
|
var data = JSON.parse(res.data)
|
|
if(data.code != 2000){
|
|
that.$pop.modelShow('上传失败:'+data.msg)
|
|
return
|
|
}
|
|
that.uinfo.avatar = data.data.url
|
|
}catch(e){
|
|
that.$pop.modelShow('上传失败~'+e.message)
|
|
}
|
|
},
|
|
fail: function(res){
|
|
that.$pop.modelShow('上传失败')
|
|
}
|
|
});
|
|
}
|
|
});
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.page-user-modify{
|
|
.top{
|
|
margin-top: 20rpx;
|
|
}
|
|
background: #F8F8F8;
|
|
width: 100%;
|
|
height: 100vh;
|
|
box-sizing: border-box;
|
|
.item-box{
|
|
margin-top: 20rpx;
|
|
width:710rpx;
|
|
margin: 0 auto;
|
|
background: #F8F8F8;
|
|
box-sizing: border-box;
|
|
.item{
|
|
width: 710rpx;
|
|
background: #FFFFFF;
|
|
margin: 0 auto;
|
|
box-sizing: border-box;
|
|
padding: 40rpx 12rpx;
|
|
border-bottom: 2rpx solid rgba(151,151,151, 0.15);
|
|
display: flex;
|
|
align-items: center;
|
|
line-height: 44rpx;
|
|
justify-content: space-between;
|
|
&:last-of-type{
|
|
border-bottom: none;
|
|
}
|
|
.left{
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
font-size: 32rpx;
|
|
color: #000000;
|
|
letter-spacing: 2rpx;
|
|
padding-left: 12rpx;
|
|
width: 160rpx;
|
|
flex-shrink: 0;
|
|
}
|
|
.right{
|
|
flex-grow: 1;
|
|
position: relative;
|
|
text-align: right;
|
|
line-height: 44rpx;
|
|
.avator{
|
|
width: 160rpx;
|
|
height: 160rpx;
|
|
background: #F8F8F8;
|
|
border-radius: 12rpx;
|
|
}
|
|
.avator_tips{
|
|
position: absolute;
|
|
bottom: 10rpx;
|
|
right: 0;
|
|
width: 100%;
|
|
z-index: 1;
|
|
height: 44rpx;
|
|
line-height: 44rpx;
|
|
background: rgba(0,0,0,0.28);
|
|
border-radius: 12rpx;
|
|
width: 160rpx;
|
|
font-size: 22rpx;
|
|
text-align: center;
|
|
color: #FFFFFF;
|
|
}
|
|
&.copy-box{
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
view{
|
|
flex-grow: 1;
|
|
max-width: 272rpx;
|
|
overflow: hidden;
|
|
text-overflow: ellipsis;
|
|
word-break: break-all;
|
|
white-space: nowrap;
|
|
}
|
|
.copy{
|
|
width: 40rpx;
|
|
height: 40rpx;
|
|
flex-shrink: 0;
|
|
margin-left: 16rpx;
|
|
}
|
|
}
|
|
}
|
|
|
|
}
|
|
}
|
|
.submit-blank{
|
|
width: 100%;
|
|
height: 134rpx;
|
|
}
|
|
.submit-box{
|
|
width: 750rpx;
|
|
height: 124rpx;
|
|
background: #FFFFFF;
|
|
box-shadow: 0rpx -2rpx 6rpx 0rpx rgba(181,181,181,0.13);
|
|
position: fixed;
|
|
bottom: 0;
|
|
view{
|
|
margin: 0 auto;
|
|
}
|
|
}
|
|
}
|
|
</style>
|
|
|