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

im聊天模块，我的群聊样式调整；通讯录页面优化处理；我的二维码样式重构；

Browse Source
This commit is contained in:
张冬雪
2022-02-17 13:04:10 +08:00
parent 88493f7fa6
commit 7c9a8f702d
11 changed files with 194 additions and 162 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,32 +1,20 @@
<template>
<view class="content">
<view class="friend-ewm-content">
<view class="bg"></view>
<!-- 用户信息 -->
<view class="info-flex">
<u-avatar :src="infoObj.portraitUrl" shape="square" size="50" bg-color="#fff"></u-avatar>
<view class="info-text">
<view class="info-flex-item">
<u-avatar :src="infoObj.portraitUrl" shape="square" size="210rpx" bg-color="#fff" class="avatar" />
<view class="nickname">{{infoObj.name}}</view>
<view class="address">地址：{{infoObj.address}}</view>
</view>
</view>
<!-- 用户身份 -->
<view class="info-btns">
<view class="item">
<label>性别</label>
<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>
<view class="text">{{infoObj.address}}</view>
</view>
</view>
<!-- 二维码 -->
<view class="info-code">
<uqrcode class="info-code-src" :size="198" :text="qrContent" />
<view class="info-code-text">
<view>ZH-HEALTH扫一扫上面的二维码</view>
<view>添加我的好友</view>
<view class="address">{{infoObj.address}}</view>
<view class="info-code">
<uqrcode class="info-code-src" :size="160" :text="qrContent" />
<view class="info-code-text">扫描二维码加我ZH大健康好友</view>
</view>
<u-icon class="download" :name="require('@/static/imgs/copy-333.png')" size="14" :bold="true"
@click="copy" :label="'应用下载:'+ downUrl" labelPos="left" labelSize="14" space="6"
labelColor="#26a377" />
<view class="copy" @click="copy"> 复制地址 </view>
</view>
</view>
</view>
@@ -48,141 +36,126 @@
gender: 0,
hash: ''
},
downUrl: 'http://www.baidu.com',
qrContent: 'ADDFRIEND|'
}
},
onLoad(e) {
this.qrContent += e.targetId
getUserInfo(e.targetId).then(res => {
this.infoObj = res
})
onLoad(e) {
this.qrContent += e.targetId
getUserInfo(e.targetId).then(res => {
this.infoObj = res
})
},
methods: {
copy() {
uni.setClipboardData({
data: this.downUrl,
success: function() {
uni.showToast({
title: ` 下载链接已复制到剪贴板 `,
icon: 'none',
position:'bottom',
mask: true,
duration: 2000
})
}
});
}
}
}
</script>
<style lang="scss" scoped>
.content {
background: $window-color;
.friend-ewm-content {
background: #fff;
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;
}
.bg {
background-color: red;
width: 100%;
height: 340rpx;
background-color: $main-color;
}
// 用户信息
.info-flex {
padding: $padding;
margin: 0 $margin;
display: flex;
padding: $padding 0;
// margin: 0 $margin;
background: white;
border-radius: $radius;
border-radius: 50rpx 50rpx 0 0;
position: relative;
top: -100rpx;
.info-text {
width: calc(100% - 50px);
padding-left: $padding;
.info-flex-item {
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
box-sizing: border-box;
position: relative;
top: -160rpx;
.avatar {
// padding: 14rpx;
border-radius: 10rpx;
background-color: #fff;
border: solid 14rpx rgba($color: #fff, $alpha:1);
}
.nickname {
line-height: 30px;
font-size: $title-size + 6;
line-height: 80rpx;
font-size: $title-size + 5;
color: $text-color;
text-align: left;
font-weight: 600;
}
.address {
line-height: 20px;
font-size: $title-size-sm;
line-height: 60rpx;
font-size: $title-size-m + 2;
color: $text-gray;
text-align: left;
@extend .nowrap;
}
}
}
// footer
.footer {
position: fixed;
bottom: 0;
left: 0;
right: 0;
padding: $padding*2 $padding;
display: flex;
justify-content: space-around;
.info-code {
background: white;
margin: 0 $margin;
border-radius: $radius;
padding: $padding * 1.4 $padding $padding;
text-align: center;
.footer-item {
margin: 0 $margin/2;
&-src {
display: inline-block;
border-radius: 10rpx;
border: solid 20rpx rgba($color: #f9f9f9, $alpha:1);
background-color: #fff;
padding: 14rpx;
}
.icon {
background: $main-color;
width: 88rpx;
height: 88rpx;
line-height: 88rpx;
display: inline-block;
border-radius: 50%;
.icon-u {
margin-top: calc((88rpx/2) - 13px);
margin-left: calc((88rpx/2) - 13px);
&-text {
text-align: center;
color: $text-gray;
font-size: $title-size-m + 1;
line-height: 40rpx;
padding: 8rpx 0 $padding 0;
}
}
.text {
.download {
background-color: #f9f9fb;
padding: 20rpx 30rpx 10rpx 30rpx;
border-radius: 10rpx;
}
.copy {
font-size: $title-size + 4;
color: $main-color;
font-size: $title-size-m;
text-align: center;
padding-top: 10rpx;
}
}
}
// btns
.info-btns {
background: white;
margin: $margin;
border-radius: $radius;
.item {
line-height: 100rpx;
border-bottom: solid 1rpx $border-color;
display: flex;
padding: 0 $padding;
justify-content: space-between;
font-size: $title-size-lg;
&:last-child {
border-bottom: none;
}
label {
width: 200rpx;
}
.text {
width: calc(100% - 200rpx);
color: $text-gray-m;
text-align: right;
@extend .nowrap;
background-color: rgba($color: $main-color, $alpha: .1);
padding: 20rpx 100rpx;
border-radius: 50rpx;
margin-top: 40rpx;
}
}
}