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