0b2/peiwan-uniapp
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

项目初始化

Browse Source
This commit is contained in:
jerry
2025-01-21 01:46:34 +08:00
parent 364021b042
commit 48153e7761
962 changed files with 172070 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

194
pages/im/components/navigationBar.vue Normal file
View File

@@ -0,0 +1,194 @@
<template>
<view>
<tui-navigation-bar :isOpacity="false" @init="initNavigation" @change="opacityChange" :scrollTop="scrollTop" backgroundColor="#fff" color="#333">
<view>
<view class="nav-box">
<view class="title">
<text class="nickname">{{user.nickname}}</text>
<view class="sex-badge" v-if="user.sex == 2">
<u-icon name="ziyuan2" custom-prefix="iconfont"></u-icon>
</view>
<view class="sex-man" v-if="user.sex == 1">
<u-icon name="ziyuan3" custom-prefix="iconfont"></u-icon>
</view>
</view>
<view class="online" v-if="user.online">
<view v-if="isReconnecting">会话重连中</view>
<view class="text" v-else>
<tui-badge :scaleRatio="0.8" type="green" dot></tui-badge>
<text class="time">在线</text>
<!-- <u-icon name="arrow-right" size="16"></u-icon> -->
</view>
</view>
<!-- <view class="online" v-else>
<view v-if="isReconnecting">会话重连中</view>
<view v-else>
<text class="time">{{user.time}}</text>
</view>
</view> -->
<view class="action" @click="goBack">
<u-icon name="nav-back" size="44"></u-icon>
</view>
</view>
<view>
<slot name="card-swiper"></slot>
</view>
<view>
<slot name="card-notice"></slot>
</view>
<!-- <view class="more">
<view class="more-btn" @click="more">
<view class="line"></view>
<view class="line"></view>
</view>
</view> -->
</view>
</tui-navigation-bar>
</view>
</template>
<script>
import tuiBadge from "@/components/thorui/tui-badge/tui-badge.vue";
import tuiNavigationBar from "@/components/thorui/tui-navigation-bar/tui-navigation-bar.vue";
export default {
components: {
tuiBadge,
tuiNavigationBar,
},
props: {
user: {},
isReconnecting: false,
},
data() {
return {
top: 0, //标题图标距离顶部距离
opacity: 1,
height: 0,
scrollTop: 0.5,
}
},
methods: {
initNavigation(e) {
this.height = e.height;
this.opacity = e.opacity;
this.top = e.top;
this.$emit('initNav', e);
},
opacityChange(e) {
this.opacity = e.opacity;
},
goBack() {
uni.navigateBack();
},
more() {
this.$emit('more');
},
}
}
</script>
<style lang="scss" scoped>
.nav-box {
height: 44px;
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
flex-direction: column;
font-size: 22rpx;
position: relative;
.title {
justify-content: center;
align-items: center;
text-align: center;
margin-bottom: 3px;
display: flex;
width: 100%;
.nickname {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
max-width: calc(100% - 440rpx);
font-size: 12px;
}
}
.online {
font-size: 10px;
line-height: 10px;
color: #303133;
display: flex;
align-items: center;
.time {
margin: 0 3px;
}
.text {
display: flex;
align-items: center;
}
}
.action {
position: absolute;
left: 0;
top: 0;
bottom: 0;
display: flex;
padding: 0 10px;
align-items: center;
width: 50px;
}
}
.sex-badge {
display: flex;
align-items: center;
justify-content: center;
background-color: #e03997;
color: #ffffff;
border-radius: 3px;
font-size: 8px;
height: 30rpx;
width: 30rpx;
margin: 0 10rpx;
}
.sex-man {
display: flex;
align-items: center;
justify-content: center;
background-color: #0081ff;
color: #ffffff;
border-radius: 3px;
font-size: 8px;
height: 30rpx;
width: 30rpx;
margin: 0 10rpx;
}
.more {
display: flex;
justify-content: center;
align-items: center;
.more-btn {
background-color: #fff;
padding: 0 7px;
width: 31px;
height: 15px;
border-radius: 0 0 3px 3px;
.line {
background-color: rgba(0, 0, 0, 0.1);
margin: 3px 0;
height: 1px;
width: 100%;
}
}
}
</style>