TmOct5/ZhHealth
1
0
Fork 0
Code Issues Pull Requests Projects Releases 3 Wiki Activity

资料详情页面调整

Browse Source
This commit is contained in:
唐明明
2022-01-26 15:52:55 +08:00
parent 8bd933b3ee
commit 4d5d595329
3 changed files with 237 additions and 164 deletions
Download Patch File Download Diff File Expand all files Collapse all files

112
pages/im/friends/mine.vue
View File

@@ -13,30 +13,25 @@
<view class="address">地址：{{infoObj.address}}</view>
</view>
</view>
<!-- 按钮组 -->
<!-- 用户身份 -->
<view class="info-btns">
<view class="item">
<label>性别</label>
<view class="text">{{infoObj.gender === 0 ? '男': '女'}}</view>
<view class="text" v-if="infoObj.gender === 0">保密</view>
<view class="text" v-if="infoObj.gender === 1">男</view>
<view class="text" v-if="infoObj.gender === 2">女</view>
</view>
<view class="item">
<label>地址二维码</label>
<u-icon name="arrow-right" color="#999" size="14"></u-icon>
<label>HASH</label>
<view class="text">{{infoObj.hash}}</view>
</view>
</view>
<!-- footer -->
<view class="footer">
<view class="footer-item">
<view class="icon">
<u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
</view>
<view class="text">发消息</view>
</view>
<view class="footer-item">
<view class="icon">
<u-icon class="icon-u" name="chat-fill" color="#fff" size="26"></u-icon>
</view>
<view class="text">发消息</view>
<!-- 二维码 -->
<view class="info-code">
<uqrcode class="info-code-src" :size="198" ref="uQRCode" text="qrContent" />
<view class="info-code-text">
<view>ZH-HEALTH扫一扫上面的二维码</view>
<view>添加我的好友</view>
</view>
</view>
</view>
@@ -55,15 +50,18 @@
portraitUrl : '',
gender : 0,
hash : ''
}
},
qrContent: 'ADDFRIEND|'
}
},
onLoad(e){
console.log(e)
},
mounted() {
getUserInfo(this.$Route.query.targetId).then(res => {
this.infoObj = res
this.qrContent += res.userId
console.log(this.infoObj)
})
},
@@ -77,6 +75,52 @@
.content{
background: $window-color;
min-height: 100vh;
padding-top: $padding;
box-sizing: border-box;
.info-code{
background: white;
margin: 0 $margin;
border-radius: $radius;
padding: $padding*3 $padding $padding;
text-align: center;
&-src{
display: inline-block;
}
&-text{
text-align: center;
color: $text-gray;
font-size: $title-size-sm;
line-height: 40rpx;
padding: $padding 0;
}
}
// 用户信息
.info-flex{
padding: $padding;
margin: 0 $margin;
display: flex;
background: white;
border-radius: $radius;
.info-text{
width: calc(100% - 50px);
padding-left: $padding;
box-sizing: border-box;
.nickname{
line-height: 30px;
font-size: $title-size + 6;
color: $text-color;
text-align: left;
}
.address{
line-height: 20px;
font-size: $title-size-sm;
color: $text-gray;
text-align: left;
@extend .nowrap;
}
}
}
// footer
.footer{
position: fixed;
@@ -108,31 +152,11 @@
}
}
}
// 用户信息
.info-flex{
padding: $padding;
display: flex;
.info-text{
width: calc(100% - 50px);
padding-left: $padding;
box-sizing: border-box;
.nickname{
line-height: 30px;
font-size: $title-size + 6;
color: $text-color;
}
.address{
line-height: 20px;
font-size: $title-size-lg;
color: $text-gray;
@extend .nowrap;
}
}
}
// 用户信息
// btns
.info-btns{
background: white;
margin: 0 $margin;
margin: $margin;
border-radius: $radius;
.item{
line-height: 100rpx;
@@ -144,8 +168,14 @@
&:last-child{
border-bottom: none;
}
label{
width: 200rpx;
}
.text{
width: calc(100% - 200rpx);
color: $text-gray-m;
text-align: right;
@extend .nowrap;
}
}
}