5 changed files with 195 additions and 18 deletions
@ -0,0 +1,183 @@ |
|||
<template> |
|||
<view class="page-user-modify"> |
|||
<view class="item-box btPadding"> |
|||
<view class="item"> |
|||
<view class="left PfScMedium">头像</view> |
|||
<view class="right" @click="upload"> |
|||
<img :src="avator" class="avator"> |
|||
<view class="avator_tips">点击上传照片</view> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="left PfScMedium">昵称</view> |
|||
<view class="right"> |
|||
<input type="text" placeholder="请输入用户昵称"> |
|||
</view> |
|||
</view> |
|||
<view class="item"> |
|||
<view class="left PfScMedium">用户编号</view> |
|||
<view class="right over copy-box"> |
|||
<view>17678689931</view> |
|||
<img :src="cssUrl+'copy.svg'" class="copy" @click="copyUid('17678689931')"> |
|||
</view> |
|||
</view> |
|||
|
|||
<view class="submit-blank"></view> |
|||
</view> |
|||
|
|||
<view class="submit-box btPadding"> |
|||
<view class="primary btn btn3" hover-class="hover">保存</view> |
|||
</view> |
|||
</view> |
|||
</template> |
|||
|
|||
<script> |
|||
export default { |
|||
data() { |
|||
return { |
|||
cssUrl:this.cssUrl, |
|||
avator:this.cssUrl+'default_avator.svg' |
|||
} |
|||
}, |
|||
methods: { |
|||
copyUid(uid) { |
|||
uni.setClipboardData({ |
|||
data: uid, |
|||
success: function () { |
|||
uni.showToast({ |
|||
title:'用户编号已复制', |
|||
icon:'none' |
|||
}) |
|||
} |
|||
}); |
|||
}, |
|||
upload() { |
|||
uni.chooseImage({ |
|||
count: 1, |
|||
success: function(res) { |
|||
var tempFilePaths = res.tempFilePaths; |
|||
uni.uploadFile({ |
|||
url: 'http://example.com/upload', |
|||
filePath: tempFilePaths[0], |
|||
name: 'file', |
|||
header: { |
|||
'content-type' : 'multipart/form-data' |
|||
}, |
|||
formData:{ |
|||
'user': 'test' |
|||
}, |
|||
success: function(res){ |
|||
console.log(res.data); |
|||
}, |
|||
fail: function(res){ |
|||
console.log(res); |
|||
} |
|||
}); |
|||
} |
|||
}); |
|||
} |
|||
} |
|||
} |
|||
</script> |
|||
|
|||
<style lang="scss" scoped> |
|||
.page-user-modify{ |
|||
background: #F8F8F8; |
|||
width: 100%; |
|||
height: 100vh; |
|||
box-sizing: border-box; |
|||
.item-box{ |
|||
margin-top: 20rpx; |
|||
width:710rpx; |
|||
margin: 0 auto; |
|||
background: #FFFFFF; |
|||
box-sizing: border-box; |
|||
.item{ |
|||
width: 686rpx; |
|||
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: 133rpx; |
|||
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: 0; |
|||
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> |
|||
|
After Width: | Height: | Size: 2.6 KiB |
Loading…
Reference in new issue