no message
This commit is contained in:
parent
cd95054b4c
commit
cda2954924
@ -1,5 +1,5 @@
|
||||
<template>
|
||||
<view class="flex flex-col items-center justify-center rounded-circle overflow-hidden bg-gray border"
|
||||
<view :class="['flex', 'flex-col', 'items-center', 'justify-center', 'overflow-hidden', 'bg-gray', 'border', { 'rounded-circle': classType === 'circle' }]"
|
||||
:style="`width:${size.lg}rpx; height: ${size.lg}rpx;`" @click="reGenerate()">
|
||||
<view v-for="(item, index) in groups.list" :key="index" class="flex justify-center">
|
||||
<image v-for="(url, idx) in item" :key="idx" :src="url" :style="groups.style"></image>
|
||||
@ -17,6 +17,11 @@ const props = defineProps({
|
||||
type: Array,
|
||||
default: () => []
|
||||
// default: ()=>new Array(9).fill('https://picsum.photos/300/300')
|
||||
},
|
||||
classType: {
|
||||
type: String,
|
||||
default: 'circle',
|
||||
validator: (value) => ['circle', 'square'].includes(value)
|
||||
}
|
||||
})
|
||||
|
||||
|
||||
@ -3,38 +3,70 @@
|
||||
<view :style="{ height: statusBarHeight }" class="status-bar"></view>
|
||||
<view class="relative z-3 flex items-center px-15 py-12 header-bar">
|
||||
<view class="flex-shrink-0 mr-5">
|
||||
<group-avatar :size="120" :avatarList="currentTeam ? currentTeam.avatarList : []" />
|
||||
<group-avatar
|
||||
:size="120"
|
||||
:avatarList="currentTeam ? currentTeam.avatarList : []"
|
||||
/>
|
||||
</view>
|
||||
<view class="w-0 flex-grow ">
|
||||
<view class="w-0 flex-grow">
|
||||
<view class="flex items-center mb-10">
|
||||
<view class="team-name flex-shrink-0">{{ team.name }}</view>
|
||||
<view v-if="teams.length > 1" class="flex-shrink-0 flex items-center switch-btn ml-10"
|
||||
@click="showDropDown = true">
|
||||
<image class="switch-icon" src="/static/home/switch-team.png" mode="aspectFit"></image>
|
||||
<view
|
||||
v-if="teams.length > 1"
|
||||
class="flex-shrink-0 flex items-center switch-btn ml-10"
|
||||
@click="showDropDown = true"
|
||||
>
|
||||
<image
|
||||
class="switch-icon"
|
||||
src="/static/home/switch-team.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="currentTeam" class="text-base text-white truncate">{{ currentTeam.corpName }}</view>
|
||||
<view v-if="currentTeam" class="text-base text-white truncate">{{
|
||||
currentTeam.corpName
|
||||
}}</view>
|
||||
</view>
|
||||
<view v-if="menuButtonInfo && menuButtonInfo.width > 0" class="flex-shrink-0"
|
||||
:style="{ width: menuButtonInfo.width + 'px', height: menuButtonInfo.height + 'px' }">
|
||||
<view
|
||||
v-if="menuButtonInfo && menuButtonInfo.width > 0"
|
||||
class="flex-shrink-0"
|
||||
:style="{
|
||||
width: menuButtonInfo.width + 'px',
|
||||
height: menuButtonInfo.height + 'px',
|
||||
}"
|
||||
>
|
||||
</view>
|
||||
</view>
|
||||
<view class="relative">
|
||||
<view v-if="showDropDown" class="team-dropdown py-12 bg-white shadow-lg">
|
||||
<scroll-view scroll-y="true" style="max-height: 50vh;">
|
||||
<scroll-view scroll-y="true" style="max-height: 50vh">
|
||||
<view class="px-15">
|
||||
<view v-for="item in teams" :key="item.teamId" class="mb-10 p-10 flex items-center bg-gray rounded-sm"
|
||||
@click="select(item)">
|
||||
<view class="flex-shrink-0 mr-5">
|
||||
<view
|
||||
v-for="item in teams"
|
||||
:key="item.teamId"
|
||||
class="mb-10 p-10 flex items-center bg-gray rounded-sm"
|
||||
@click="select(item)"
|
||||
>
|
||||
<view class="flex-shrink-0 mr-5 rounded-circle">
|
||||
<group-avatar :size="96" :avatarList="item.avatarList" />
|
||||
</view>
|
||||
<view class="w-0 flex-grow mr-5">
|
||||
<view class="mb-5 text-lg font-semibold text-dark">{{ item.name }}</view>
|
||||
<view class="text-base text-gray leading-normal">{{ item.corpName }}</view>
|
||||
<view class="mb-5 text-lg font-semibold text-dark">{{
|
||||
item.name
|
||||
}}</view>
|
||||
<view class="text-base text-gray leading-normal">{{
|
||||
item.corpName
|
||||
}}</view>
|
||||
</view>
|
||||
<view class="flex">
|
||||
<image class="check-icon"
|
||||
:src="team && team.teamId === item.teamId ? '/static/form/checked.svg' : '/static/form/unchecked.svg'">
|
||||
<image
|
||||
class="check-icon"
|
||||
:src="
|
||||
team && team.teamId === item.teamId
|
||||
? '/static/form/checked.svg'
|
||||
: '/static/form/unchecked.svg'
|
||||
"
|
||||
>
|
||||
</image>
|
||||
</view>
|
||||
</view>
|
||||
@ -48,54 +80,71 @@
|
||||
<view class="triangle-wrapper">
|
||||
<view class="team-triangle"></view>
|
||||
</view>
|
||||
<image class="laba-icon flex-shrink-0" src="/static/home/speaker-intro.png" mode="aspectFit"></image>
|
||||
<view class="introduce-text flex-grow line-clamp-2">{{ team.teamTroduce }}</view>
|
||||
<image
|
||||
class="laba-icon flex-shrink-0"
|
||||
src="/static/home/speaker-intro.png"
|
||||
mode="aspectFit"
|
||||
></image>
|
||||
<view class="introduce-text flex-grow line-clamp-2">{{
|
||||
team.teamTroduce
|
||||
}}</view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
<view v-if="showDropDown" class="mask" @click="showDropDown = false"></view>
|
||||
</template>
|
||||
<script setup>
|
||||
import { computed, ref, onMounted, watch } from 'vue';
|
||||
import { computed, ref, onMounted, watch } from "vue";
|
||||
|
||||
import groupAvatar from '@/components/group-avatar.vue';
|
||||
import groupAvatar from "@/components/group-avatar.vue";
|
||||
|
||||
const statusBarHeight = ref('50px');
|
||||
const statusBarHeight = ref("50px");
|
||||
const menuButtonInfo = ref(null);
|
||||
const showDropDown = ref(false)
|
||||
const showDropDown = ref(false);
|
||||
|
||||
const emits = defineEmits(['changeTeam']);
|
||||
const emits = defineEmits(["changeTeam"]);
|
||||
const props = defineProps({
|
||||
team: {
|
||||
type: Object,
|
||||
default: () => ({})
|
||||
default: () => ({}),
|
||||
},
|
||||
teams: {
|
||||
type: Array,
|
||||
default: () => []
|
||||
}
|
||||
})
|
||||
default: () => [],
|
||||
},
|
||||
});
|
||||
|
||||
const currentTeam = computed(() => props.teams.find(i => props.team && i.teamId === props.team.teamId))
|
||||
const currentTeam = computed(() =>
|
||||
props.teams.find((i) => props.team && i.teamId === props.team.teamId)
|
||||
);
|
||||
|
||||
function select(team) {
|
||||
emits('changeTeam', team)
|
||||
showDropDown.value = false
|
||||
emits("changeTeam", team);
|
||||
showDropDown.value = false;
|
||||
}
|
||||
|
||||
watch(() => props.teams, (teams) => {
|
||||
if (teams.length && !(currentTeam.value && teams.some(i => i.teamId === currentTeam.value.teamId))) {
|
||||
emits('changeTeam', teams[0])
|
||||
watch(
|
||||
() => props.teams,
|
||||
(teams) => {
|
||||
if (
|
||||
teams.length &&
|
||||
!(
|
||||
currentTeam.value &&
|
||||
teams.some((i) => i.teamId === currentTeam.value.teamId)
|
||||
)
|
||||
) {
|
||||
emits("changeTeam", teams[0]);
|
||||
}
|
||||
})
|
||||
}
|
||||
);
|
||||
|
||||
onMounted(() => {
|
||||
const win = uni.getWindowInfo();
|
||||
if (win && win.statusBarHeight > 0) {
|
||||
statusBarHeight.value = win.statusBarHeight + 'px';
|
||||
statusBarHeight.value = win.statusBarHeight + "px";
|
||||
}
|
||||
menuButtonInfo.value = uni.getMenuButtonBoundingClientRect();
|
||||
})
|
||||
});
|
||||
</script>
|
||||
<style scoped>
|
||||
.status-bar {
|
||||
@ -146,7 +195,11 @@ onMounted(() => {
|
||||
width: 690rpx;
|
||||
min-height: 111rpx;
|
||||
box-sizing: border-box;
|
||||
background: linear-gradient(186deg, rgba(255, 255, 255, 0.4) 13.34%, rgba(255, 255, 255, 0.6) 99.17%);
|
||||
background: linear-gradient(
|
||||
186deg,
|
||||
rgba(255, 255, 255, 0.4) 13.34%,
|
||||
rgba(255, 255, 255, 0.6) 99.17%
|
||||
);
|
||||
border-radius: 16rpx;
|
||||
padding: 20rpx 20rpx 20rpx 0;
|
||||
position: relative;
|
||||
@ -170,7 +223,11 @@ onMounted(() => {
|
||||
bottom: -10rpx;
|
||||
width: 16rpx;
|
||||
height: 16rpx;
|
||||
background: linear-gradient(186deg, rgba(255, 255, 255, 0.4) 13.34%, rgba(255, 255, 255, 0.6) 99.17%);
|
||||
background: linear-gradient(
|
||||
186deg,
|
||||
rgba(255, 255, 255, 0.4) 13.34%,
|
||||
rgba(255, 255, 255, 0.6) 99.17%
|
||||
);
|
||||
transform: translateX(-50%) rotate(45deg);
|
||||
}
|
||||
|
||||
@ -223,4 +280,8 @@ onMounted(() => {
|
||||
border-bottom-left-radius: 16rpx;
|
||||
border-bottom-right-radius: 16rpx;
|
||||
}
|
||||
|
||||
.rounded-circle {
|
||||
border-radius: 50%;
|
||||
}
|
||||
</style>
|
||||
@ -27,6 +27,7 @@
|
||||
<GroupAvatar
|
||||
:avatarList="getAvatarList(conversation.groupID)"
|
||||
:size="96"
|
||||
classType="square"
|
||||
/>
|
||||
<view v-if="conversation.unreadCount > 0" class="unread-badge">
|
||||
<text class="unread-text">{{
|
||||
@ -555,6 +556,8 @@ onHide(() => {
|
||||
height: 96rpx;
|
||||
border-radius: 8rpx;
|
||||
}
|
||||
|
||||
.unread-badge {
|
||||
position: absolute;
|
||||
top: -8rpx;
|
||||
right: -8rpx;
|
||||
|
||||
0
static/doctor-avatar.png
Normal file
0
static/doctor-avatar.png
Normal file
Loading…
x
Reference in New Issue
Block a user