147 lines
3.3 KiB
Vue
147 lines
3.3 KiB
Vue
<template>
|
|
<view style="height: 100vh;background: #F9FAFF;">
|
|
<view class="myinfo-top">
|
|
<navs :top='top' :page='pageName' :color='color'></navs>
|
|
</view>
|
|
<view class="myinfo-box">
|
|
<view class="info">
|
|
<view>
|
|
<view class="">头像</view>
|
|
<view style="flex: 1;text-align: right;padding-right: 23rpx;">
|
|
<button type="default" plain="true" open-type="chooseAvatar" class="chavatar"
|
|
@chooseavatar="chooseavatar">
|
|
<image src="@/static/image/default-avatar.svg" mode=""></image>
|
|
</button>
|
|
</view>
|
|
<view class="iconfont icon-tubiaoyanse"></view>
|
|
</view>
|
|
<view>
|
|
<view class="">昵称</view>
|
|
<view style="flex: 1;text-align: right;padding-right: 23rpx;">
|
|
<input type="nickname" :value="wxname" @blur="inputWxName" class="nut-input-text" />
|
|
</view>
|
|
<view class="iconfont icon-tubiaoyanse"></view>
|
|
</view>
|
|
<view>
|
|
<view class="">简介</view>
|
|
<view style="flex: 1;text-align: right;padding-right: 23rpx;">
|
|
<input type="text" :value="jianjie" class="nut-input-text" />
|
|
</view>
|
|
<view class="iconfont icon-tubiaoyanse"></view>
|
|
</view>
|
|
<view>
|
|
<view class="">手机号</view>
|
|
<view style="flex: 1;text-align: right;padding-right: 23rpx;">
|
|
<input type="text" :value="telephone" class="nut-input-text" />
|
|
</view>
|
|
<view class="iconfont icon-tubiaoyanse"></view>
|
|
</view>
|
|
<view>
|
|
<view class="">公司</view>
|
|
<view style="flex: 1;text-align: right;padding-right: 23rpx;">
|
|
<input type="text" :value="company" class="nut-input-text" />
|
|
</view>
|
|
<view class="iconfont icon-tubiaoyanse"></view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
pageName: '个人信息',
|
|
color: 1,
|
|
top: 0,
|
|
wxname: '我是昵称',
|
|
jianjie: '这人很懒，不想写简介',
|
|
telephone: '1237899****',
|
|
company: 'xxxx公司'
|
|
};
|
|
},
|
|
onLoad() {
|
|
this.top = uni.getMenuButtonBoundingClientRect().top;
|
|
},
|
|
methods: {
|
|
chooseavatar: function(e) {
|
|
const {
|
|
avatarUrl
|
|
} = e.detail;
|
|
console.log('---头像', avatarUrl);
|
|
},
|
|
inputWxName: function(e) {
|
|
this.wxname = e.detail.value;
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.myinfo-top {
|
|
background-color: #fff;
|
|
padding-bottom: 8rpx;
|
|
}
|
|
|
|
.myinfo-box {
|
|
padding: 31rpx 30rpx 0;
|
|
|
|
.info {
|
|
padding: 0 25rpx;
|
|
border-radius: 30rpx;
|
|
background: #ffffff;
|
|
|
|
>view {
|
|
display: flex;
|
|
color: #333;
|
|
font-size: 28rpx;
|
|
border-bottom: 1rpx solid #F0F0F0;
|
|
height: 88rpx;
|
|
line-height: 88rpx;
|
|
|
|
&:first-child {
|
|
height: 168rpx;
|
|
line-height: 168rpx;
|
|
}
|
|
|
|
&:last-child {
|
|
border: none;
|
|
height: 96rpx;
|
|
line-height: 96rpx;
|
|
}
|
|
|
|
.chavatar {
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: #fff;
|
|
padding: 0;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
align-items: center;
|
|
|
|
image {
|
|
width: 108rpx;
|
|
height: 108rpx;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
button[plain] {
|
|
border: 0
|
|
}
|
|
|
|
.nut-input-text {
|
|
width: 100%;
|
|
height: 100%;
|
|
}
|
|
|
|
.icon-tubiaoyanse {
|
|
font-size: 24rpx;
|
|
color: #A4A4A4;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|