更新搜索框背景色；通讯录导航栏背景图；聊天设置排版；聊天列表群名过长排版
Some checks failed
Check / lint (push) Has been cancelled
Check / typecheck (push) Has been cancelled
Check / build (build, 18.x, ubuntu-latest) (push) Has been cancelled
Check / build (build, 18.x, windows-latest) (push) Has been cancelled
Check / build (build:app, 18.x, ubuntu-latest) (push) Has been cancelled
Check / build (build:app, 18.x, windows-latest) (push) Has been cancelled
Check / build (build:mp-weixin, 18.x, ubuntu-latest) (push) Has been cancelled
Check / build (build:mp-weixin, 18.x, windows-latest) (push) Has been cancelled
Some checks failed
Check / lint (push) Has been cancelled
Check / typecheck (push) Has been cancelled
Check / build (build, 18.x, ubuntu-latest) (push) Has been cancelled
Check / build (build, 18.x, windows-latest) (push) Has been cancelled
Check / build (build:app, 18.x, ubuntu-latest) (push) Has been cancelled
Check / build (build:app, 18.x, windows-latest) (push) Has been cancelled
Check / build (build:mp-weixin, 18.x, ubuntu-latest) (push) Has been cancelled
Check / build (build:mp-weixin, 18.x, windows-latest) (push) Has been cancelled
This commit is contained in:
wwt
parent
b151f90fa6
commit
f1fa0208c1
@ -50,7 +50,10 @@ const inputSearchText = (e) => {
|
|||||||
.search-input {
|
.search-input {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
}
|
}
|
||||||
|
::v-deep .noNvueBorder > .noNvueBorder > .noNvueBorder {
|
||||||
|
background: #f9f9fd !important;
|
||||||
|
border-radius: 8rpx !important;
|
||||||
|
}
|
||||||
.search-input::v-deep .tmicon-times-circle-fill::before {
|
.search-input::v-deep .tmicon-times-circle-fill::before {
|
||||||
content: '\e82a';
|
content: '\e82a';
|
||||||
color: #d2d2d5;
|
color: #d2d2d5;
|
||||||
|
|||||||
@ -2,15 +2,18 @@
|
|||||||
<div class="choose-deps-page">
|
<div class="choose-deps-page">
|
||||||
<zPaging ref="zPaging" :show-scrollbar="false">
|
<zPaging ref="zPaging" :show-scrollbar="false">
|
||||||
<template #top>
|
<template #top>
|
||||||
<customNavbar :title="pageTitle"></customNavbar>
|
<div class="top_bg">
|
||||||
</template>
|
<customNavbar class="index_top_navbar" :title="pageTitle"></customNavbar>
|
||||||
<div class="choose-deps">
|
<div class="pl-[32rpx] pr-[32rpx] pt-[32rpx] pb-[32rpx]">
|
||||||
<div class="w-full pl-[32rpx] pr-[32rpx]">
|
|
||||||
<div class="pl-[16rpx] pr-[16rpx] pt-[22rpx] pb-[24rpx] bg-[#FFFFFF]">
|
|
||||||
<customInput
|
<customInput
|
||||||
:searchText="searchVal"
|
:searchText="searchVal"
|
||||||
@inputSearchText="inputSearchText"
|
@inputSearchText="inputSearchText"
|
||||||
></customInput>
|
></customInput>
|
||||||
|
</div>
|
||||||
|
</div>
|
||||||
|
</template>
|
||||||
|
<div class="choose-deps">
|
||||||
|
<div class="w-full pl-[32rpx] pr-[32rpx]">
|
||||||
<div
|
<div
|
||||||
v-if="crumbs.length"
|
v-if="crumbs.length"
|
||||||
class="w-full overflow-x-auto mt-[22rpx] leading-[48rpx] text-[#2F2F2F] flex items-center no-scrollbar"
|
class="w-full overflow-x-auto mt-[22rpx] leading-[48rpx] text-[#2F2F2F] flex items-center no-scrollbar"
|
||||||
@ -38,7 +41,6 @@
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
<div
|
<div
|
||||||
v-if="
|
v-if="
|
||||||
(state.chooseMode === 1 || state.chooseMode === 2) &&
|
(state.chooseMode === 1 || state.chooseMode === 2) &&
|
||||||
@ -1104,6 +1106,22 @@ const toUserDetail = (userItem) => {
|
|||||||
height: 100%;
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
}
|
}
|
||||||
|
::v-deep .index_top_navbar .tmicon-angle-left{
|
||||||
|
color:#fff !important;
|
||||||
|
}
|
||||||
|
::v-deep .index_top_navbar .text-weight-b{
|
||||||
|
color:#fff !important;
|
||||||
|
}
|
||||||
|
|
||||||
|
::v-deep .index_top_navbar .statusHeightTop > .noNvueBorder:first-child {
|
||||||
|
background: transparent !important;
|
||||||
|
border: none !important;
|
||||||
|
}
|
||||||
|
.top_bg{
|
||||||
|
background: url('@/static/image/mine/page_top.png') no-repeat;
|
||||||
|
background-size: cover;
|
||||||
|
background-position: bottom center;
|
||||||
|
}
|
||||||
.choose-deps-page {
|
.choose-deps-page {
|
||||||
.choose-deps {
|
.choose-deps {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
|
|||||||
@ -1,235 +1,251 @@
|
|||||||
<template>
|
<template>
|
||||||
<div>
|
<div>
|
||||||
<wd-swipe-action class="swipe_action">
|
<wd-swipe-action class="swipe_action">
|
||||||
<div
|
<div
|
||||||
@click="cellClick"
|
@click="cellClick"
|
||||||
:class="['chatItem', props.data.is_top === 1 ? 'isTop' : '']"
|
:class="['chatItem', props.data.is_top === 1 ? 'isTop' : '']"
|
||||||
>
|
>
|
||||||
<div class="avatarImg">
|
<div class="avatarImg">
|
||||||
<tm-badge
|
<tm-badge
|
||||||
:count="props.data.unread_num"
|
:count="props.data.unread_num"
|
||||||
:maxCount="99"
|
:maxCount="99"
|
||||||
color="#D03050"
|
color="#D03050"
|
||||||
>
|
>
|
||||||
<avatarModule
|
<avatarModule
|
||||||
:mode="props?.data?.group_type === 0 ? 1 : 2"
|
:mode="props?.data?.group_type === 0 ? 1 : 2"
|
||||||
:avatar="props?.data?.avatar"
|
:avatar="props?.data?.avatar"
|
||||||
:groupType="props?.data?.group_type"
|
:groupType="props?.data?.group_type"
|
||||||
:userName="props?.data?.name"
|
:userName="props?.data?.name"
|
||||||
:customStyle="{
|
:customStyle="{
|
||||||
width: '96rpx',
|
width: '96rpx',
|
||||||
height: '96rpx',
|
height: '96rpx',
|
||||||
}"
|
}"
|
||||||
:customTextStyle="{
|
:customTextStyle="{
|
||||||
fontSize: '32rpx',
|
fontSize: '32rpx',
|
||||||
fontWeight: 'bold',
|
fontWeight: 'bold',
|
||||||
color: '#fff',
|
color: '#fff',
|
||||||
lineHeight: '44rpx',
|
lineHeight: '44rpx',
|
||||||
}"
|
}"
|
||||||
></avatarModule>
|
></avatarModule>
|
||||||
</tm-badge>
|
</tm-badge>
|
||||||
</div>
|
</div>
|
||||||
<div class="chatInfo">
|
<div class="chatInfo">
|
||||||
<div class="chatInfo_1">
|
<div class="chatInfo_1">
|
||||||
<div >
|
<div class="name_center">
|
||||||
<span class="text-[#000000] text-[32rpx] font-bold opacity-90 mr-[20rpx]">{{ props.data.name }}</span>
|
<div class="text-[#000000] text-[32rpx]
|
||||||
<span v-if="props.data.group_type === 2" class="depTag">
|
font-bold opacity-90 name_text">
|
||||||
部门
|
{{ formatNameText(props.data.name) }}
|
||||||
</span>
|
<span v-if="props.data.group_type === 2" class="depTag tag">
|
||||||
<span v-if="props.data.group_type === 3" class="projectTag">
|
部门
|
||||||
项目
|
</span>
|
||||||
</span>
|
<span v-if="props.data.group_type === 3" class="projectTag tag">
|
||||||
<span v-if="props.data.group_type === 4" class="companyTag">
|
项目
|
||||||
公司
|
</span>
|
||||||
</span>
|
<span v-if="props.data.group_type === 4" class="companyTag tag">
|
||||||
</div>
|
公司
|
||||||
<div class="text-[#000000] text-[28rpx] font-medium opacity-26 ml-[24rpx]">
|
</span>
|
||||||
{{ beautifyTime(props.data.updated_at) }}
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<div class="chatInfo_2 w-full mr-[6rpx]">
|
<div
|
||||||
<div class="w-full chatInfo_2_1 textEllipsis">
|
class="text-[#000000] text-[28rpx] font-medium opacity-26 ml-[24rpx] time_right"
|
||||||
{{ props.data.msg_text }}
|
>
|
||||||
</div>
|
{{ beautifyTime(props.data.updated_at) }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div class="chatInfo_2 w-full mr-[6rpx]">
|
||||||
<template #right>
|
<div class="w-full chatInfo_2_1 textEllipsis">
|
||||||
<div class="flex flex-row flex-row-center-end">
|
{{ props.data.msg_text }}
|
||||||
<!-- 样式占位 -->
|
</div>
|
||||||
<div style="width:1px"></div>
|
</div>
|
||||||
<div
|
</div>
|
||||||
@click="handleTop"
|
</div>
|
||||||
class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#F09F1F] flex items-center justify-center"
|
<template #right>
|
||||||
>
|
<div class="flex flex-row flex-row-center-end">
|
||||||
{{ props.data.is_top === 1 ? '取消置顶' : '置顶' }}
|
<!-- 样式占位 -->
|
||||||
</div>
|
<div style="width: 1px"></div>
|
||||||
<div
|
<div
|
||||||
@click="handleDelete"
|
@click="handleTop"
|
||||||
class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#CF3050] flex items-center justify-center"
|
class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#F09F1F] flex items-center justify-center"
|
||||||
>
|
>
|
||||||
删除
|
{{ props.data.is_top === 1 ? "取消置顶" : "置顶" }}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
<div
|
||||||
</template>
|
@click="handleDelete"
|
||||||
</wd-swipe-action>
|
class="w-[156rpx] h-[154rpx] text-[#ffffff] bg-[#CF3050] flex items-center justify-center"
|
||||||
<div
|
>
|
||||||
v-if="props.index !== talkStore.talkItems.length - 1"
|
删除
|
||||||
class="divider"
|
</div>
|
||||||
></div>
|
</div>
|
||||||
</div>
|
</template>
|
||||||
|
</wd-swipe-action>
|
||||||
|
<div
|
||||||
|
v-if="props.index !== talkStore.talkItems.length - 1"
|
||||||
|
class="divider"
|
||||||
|
></div>
|
||||||
|
</div>
|
||||||
</template>
|
</template>
|
||||||
<script setup>
|
<script setup>
|
||||||
import avatarModule from '@/components/avatar-module/index.vue'
|
import avatarModule from "@/components/avatar-module/index.vue";
|
||||||
import { ref, reactive, defineProps, computed } from 'vue'
|
import { ref, reactive, defineProps, computed } from "vue";
|
||||||
import dayjs from 'dayjs'
|
import dayjs from "dayjs";
|
||||||
import { beautifyTime } from '@/utils/datetime'
|
import { beautifyTime } from "@/utils/datetime";
|
||||||
import { ServeClearTalkUnreadNum } from '@/api/chat'
|
import { ServeClearTalkUnreadNum } from "@/api/chat";
|
||||||
import { useTalkStore, useDialogueStore } from '@/store'
|
import { useTalkStore, useDialogueStore } from "@/store";
|
||||||
import { useSessionMenu } from '@/hooks'
|
import { useSessionMenu } from "@/hooks";
|
||||||
|
|
||||||
const talkStore = useTalkStore()
|
const talkStore = useTalkStore();
|
||||||
const { onToTopTalk, onRemoveTalk } = useSessionMenu()
|
const { onToTopTalk, onRemoveTalk } = useSessionMenu();
|
||||||
const dialogueStore = useDialogueStore()
|
const dialogueStore = useDialogueStore();
|
||||||
const props = defineProps({
|
const props = defineProps({
|
||||||
data: {
|
data: {
|
||||||
type: Object,
|
type: Object,
|
||||||
default: {},
|
default: {},
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
index: {
|
index: {
|
||||||
type: Number,
|
type: Number,
|
||||||
default: -1,
|
default: -1,
|
||||||
required: true,
|
required: true,
|
||||||
},
|
},
|
||||||
})
|
});
|
||||||
|
|
||||||
|
// 添加格式化方法
|
||||||
|
const formatNameText = (text, maxLength = 19) => {
|
||||||
|
return text.length > maxLength ? `${text.slice(0, maxLength - 1)}...` : text;
|
||||||
|
};
|
||||||
|
|
||||||
const cellClick = () => {
|
const cellClick = () => {
|
||||||
console.log(props.data)
|
console.log(props.data);
|
||||||
// 更新编辑信息
|
// 更新编辑信息
|
||||||
dialogueStore.setDialogue(props.data)
|
dialogueStore.setDialogue(props.data);
|
||||||
|
|
||||||
// 清空消息未读数
|
// 清空消息未读数
|
||||||
if (props.data.unread_num > 0) {
|
if (props.data.unread_num > 0) {
|
||||||
ServeClearTalkUnreadNum({
|
ServeClearTalkUnreadNum({
|
||||||
talk_type: props.data.talk_type,
|
talk_type: props.data.talk_type,
|
||||||
receiver_id: props.data.receiver_id,
|
receiver_id: props.data.receiver_id,
|
||||||
}).then(() => {
|
}).then(() => {
|
||||||
talkStore.updateItem({
|
talkStore.updateItem({
|
||||||
index_name: props.data.index_name,
|
index_name: props.data.index_name,
|
||||||
unread_num: 0,
|
unread_num: 0,
|
||||||
})
|
});
|
||||||
})
|
});
|
||||||
}
|
}
|
||||||
uni.navigateTo({
|
uni.navigateTo({
|
||||||
url: '/pages/dialog/index?sessionId=' + props.data.id,
|
url: "/pages/dialog/index?sessionId=" + props.data.id,
|
||||||
})
|
});
|
||||||
}
|
};
|
||||||
|
|
||||||
const handleTop = () => {
|
const handleTop = () => {
|
||||||
console.log(props.data, 1)
|
console.log(props.data, 1);
|
||||||
onToTopTalk(props.data)
|
onToTopTalk(props.data);
|
||||||
}
|
};
|
||||||
|
|
||||||
//点击删除会话
|
//点击删除会话
|
||||||
const handleDelete = () => {
|
const handleDelete = () => {
|
||||||
console.log(props.data)
|
console.log(props.data);
|
||||||
onRemoveTalk(props.data)
|
onRemoveTalk(props.data);
|
||||||
}
|
};
|
||||||
</script>
|
</script>
|
||||||
<style lang="scss" scoped>
|
<style lang="scss" scoped>
|
||||||
::v-deep .swipe_action {
|
::v-deep .swipe_action {
|
||||||
// border: 1px solid #fff;
|
// border: 1px solid #fff;
|
||||||
// transform: translate3d(1px, 0px, 0px) !important;
|
// transform: translate3d(1px, 0px, 0px) !important;
|
||||||
}
|
}
|
||||||
.chatItem {
|
.chatItem {
|
||||||
width: 100%;
|
width: 100%;
|
||||||
height: 154rpx;
|
height: 154rpx;
|
||||||
padding: 30rpx 16rpx;
|
padding: 30rpx 16rpx;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
|
|
||||||
&.isTop {
|
&.isTop {
|
||||||
background-color: #f3f3f3;
|
background-color: #f3f3f3;
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatInfo {
|
.chatInfo {
|
||||||
flex: 1;
|
flex: 1;
|
||||||
margin-left: 20rpx;
|
margin-left: 20rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatInfo_1 {
|
.chatInfo_1 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatInfo_2 {
|
.chatInfo_2 {
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: space-between;
|
justify-content: space-between;
|
||||||
margin-top: 6rpx;
|
margin-top: 6rpx;
|
||||||
}
|
}
|
||||||
|
|
||||||
.chatInfo_2_1 {
|
.chatInfo_2_1 {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
color: rgba($color: #000000, $alpha: 0.4);
|
color: rgba($color: #000000, $alpha: 0.4);
|
||||||
|
}
|
||||||
|
.tag{
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
text-align: center;
|
||||||
|
margin-left: 10rpx;
|
||||||
|
margin-top: 4rpx;
|
||||||
|
vertical-align: top;
|
||||||
|
height: 38rpx;
|
||||||
|
line-height: 38rpx;
|
||||||
|
padding: 0 10rpx;
|
||||||
|
font-size: 24rpx;
|
||||||
|
border-radius: 6rpx;
|
||||||
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
.companyTag {
|
.companyTag {
|
||||||
width: 76rpx;
|
border: 1px solid #7a58de;
|
||||||
height: 38rpx;
|
color: #7a58de;
|
||||||
line-height: 38rpx;
|
|
||||||
border: 1px solid #7a58de;
|
|
||||||
font-size: 24rpx;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
color: #7a58de;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.depTag {
|
.depTag {
|
||||||
width: 76rpx;
|
border: 1px solid #377ec6;
|
||||||
height: 38rpx;
|
color: #377ec6;
|
||||||
line-height: 38rpx;
|
|
||||||
border: 1px solid #377ec6;
|
|
||||||
font-size: 24rpx;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
color: #377ec6;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
.projectTag {
|
.projectTag {
|
||||||
width: 76rpx;
|
border: 1px solid #c1681c;
|
||||||
height: 38rpx;
|
color: #c1681c;
|
||||||
line-height: 38rpx;
|
|
||||||
border: 1px solid #c1681c;
|
|
||||||
font-size: 24rpx;
|
|
||||||
text-align: center;
|
|
||||||
border-radius: 6rpx;
|
|
||||||
color: #c1681c;
|
|
||||||
font-weight: bold;
|
|
||||||
|
|
||||||
display: inline-block;
|
|
||||||
}
|
}
|
||||||
|
.name_center{
|
||||||
.textEllipsis {
|
flex: 1;
|
||||||
|
min-width: 0;
|
||||||
|
}
|
||||||
|
.name_text{
|
||||||
|
display: inline-block;
|
||||||
|
max-height: 88rpx; // 两行文字的高度
|
||||||
|
line-height: 44rpx;
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
display: -webkit-box;
|
display: -webkit-box;
|
||||||
-webkit-line-clamp: 1;
|
-webkit-line-clamp: 2;
|
||||||
-webkit-box-orient: vertical;
|
-webkit-box-orient: vertical;
|
||||||
|
word-break: break-all;
|
||||||
|
}
|
||||||
|
.time_right {
|
||||||
|
/* white-space: nowrap;
|
||||||
|
max-width: 146rpx; */
|
||||||
|
flex: 0 0 auto; /* 不伸缩，保持内容宽度 */
|
||||||
|
white-space: nowrap;
|
||||||
|
}
|
||||||
|
|
||||||
|
.textEllipsis {
|
||||||
|
overflow: hidden;
|
||||||
|
text-overflow: ellipsis;
|
||||||
|
display: -webkit-box;
|
||||||
|
-webkit-line-clamp: 1;
|
||||||
|
-webkit-box-orient: vertical;
|
||||||
}
|
}
|
||||||
|
|
||||||
.divider {
|
.divider {
|
||||||
background-color: rgba(243, 243, 243, 1);
|
background-color: rgba(243, 243, 243, 1);
|
||||||
height: 1rpx;
|
height: 1rpx;
|
||||||
margin: 0 18rpx;
|
margin: 0 18rpx;
|
||||||
}
|
}
|
||||||
</style>
|
</style>
|
||||||
|
|||||||
BIN
src/static/image/mine/page_top.png
Normal file
BIN
src/static/image/mine/page_top.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
Loading…
Reference in New Issue
Block a user