scout666/chat-app
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

fix
Some checks failed
Check / lint (push) Has been cancelled
Details
Check / typecheck (push) Has been cancelled
Details
Check / build (build, 18.x, ubuntu-latest) (push) Has been cancelled
Details
Check / build (build, 18.x, windows-latest) (push) Has been cancelled
Details
Check / build (build:app, 18.x, ubuntu-latest) (push) Has been cancelled
Details
Check / build (build:app, 18.x, windows-latest) (push) Has been cancelled
Details
Check / build (build:mp-weixin, 18.x, ubuntu-latest) (push) Has been cancelled
Details
Check / build (build:mp-weixin, 18.x, windows-latest) (push) Has been cancelled
Details

Browse Source
This commit is contained in:
caiyx 2024-12-24 16:28:44 +08:00
parent 1213ad9b98
commit f9d97f642b
12 changed files with 445 additions and 41 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/x-confirm/index.vue
View File

@ -10,8 +10,10 @@ let onCancel=null
const confirm=ref(true)
const contentText=ref('')
const imageRef=ref('')
const confirmLabel=ref(language('components.confirm.confirmText'))
const cancelLabel=ref(language('components.confirm.cancelText'))
const confirmLabel=ref('确定')
const cancelLabel=ref('取消')
const confirmC=ref('#46299D')
const cancelC=ref('#1A1A1A')
const sendCancel=()=>{
confirmState.value=false
if (typeof onCancel==='function'){
@ -24,7 +26,7 @@ const sendConfirm=()=>{
onConfirm()
}
}
const showConfirm=({content,image,onConfirm:confirm,onCancel:cancel,confirmText,cancelText})=>{
const showConfirm=({content,image,onConfirm:confirm,onCancel:cancel,confirmText,cancelText,confirmColor,cancelColor})=>{
confirmState.value=true
contentText.value=content
imageRef.value = image?image:''
@ -32,6 +34,8 @@ const showConfirm=({content,image,onConfirm:confirm,onCancel:cancel,confirmText,
onCancel=cancel
confirmLabel.value = confirmText || confirmLabel.value
cancelLabel.value = cancelText || cancelLabel.value
confirmC.value = confirmColor || confirmC.value
cancelC.value = cancelColor || cancelC.value
}
defineExpose({
showConfirm
@ -59,7 +63,7 @@ defineExpose({
:fontSize="32"
:height="112"
:margin="[0]"
:font-color="'#1A1A1A'"
:font-color="cancelC"
:transprent="cancel"
text
:label="cancelLabel"></tm-button>
@ -75,7 +79,7 @@ defineExpose({
:transprent="confirm"
:height="112"
:margin="[0]"
:font-color="'#46299D'"
:font-color="confirmC"
text
:label="confirmLabel"></tm-button>
</div>

16
src/pages.json
View File

@ -22,6 +22,22 @@
"enablePullDownRefresh":false
}
},
{
"path": "pages/creatGroupChat/index",
"type": "page",
"style": {
"navigationStyle": "custom",
"enablePullDownRefresh":false
}
},
{
"path": "pages/chooseGroupType/index",
"type": "page",
"style": {
"navigationStyle": "custom",
"enablePullDownRefresh":false
}
},
{
"path": "pages/chooseChat/index",
"type": "page",

100
src/pages/chooseGroupType/index.vue Normal file
View File

@ -0,0 +1,100 @@
<template>
<div class="outer-layer">
<div>
<tm-navbar :hideBack="false" hideHome title="选择群类型" :leftWidth="320">
</tm-navbar>
</div>
<div class="root">
<div class="w-full pl-[32rpx] pr-[32rpx] overflow-y-auto" >
<div class=" pl-[32rpx] pr-[32rpx] pt-[44rpx] bg-[#FFFFFF]" >
<div class="text-[40rpx] leading-[54rpx] text-[#2F2F2F] font-bold" >
群类型保存后将不可修改
</div>
<div class="text-[28rpx] leading-[54rpx] text-[#46299D] mt-[16rpx]" >
请创建过程中正确选择
</div>
<div class="mt-[54rpx] w-full h-[872rpx]" >
<div class="groupCard">
</div>
</div>
</div>
</div>
<div class="h-[162rpx] flex justify-center bg-[#FFFFFF]">
<div class="mt-[14rpx]" >
<tm-button
color="#46299D"
disabled="true"
disabledColor="#E6E6E6"
:margin="[0]"
:shadow="0"
:width="426"
:height="76"
size="large"
label="按钮"
>
</tm-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, watch, computed } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { useChatList } from "@/store/chatList/index.js";
import { useAuth } from "@/store/auth";
import { useTalkStore, useUserStore } from "@/store";
import addCircle from "@/static/image/chatList/addCircle.png";
import cahtPopover from "@/static/image/chatList/cahtPopover.png";
import zu4992 from "@/static/image/chatList/zu4992@2x.png";
import zu4991 from "@/static/image/chatList/zu4991@2x.png";
import zu4989 from "@/static/image/chatList/zu4989@2x.png";
const talkStore = useTalkStore();
const userStore = useUserStore();
const { userInfo } = useAuth();
const groupChatName = ref("");
const groupChatType = ref('');
</script>
<style scoped lang="scss">
uni-page-body,
page {
height: 100%;
}
.outer-layer {
overflow-y: auto;
flex: 1;
background-image: url("@/static/image/clockIn/z3280@3x.png");
background-size: cover;
padding-bottom: 0;
display: flex;
flex-direction: column;
}
.root {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding-top: 18rpx;
overflow: hidden;
}
.divider{
height: 1rpx;
background-color: #7C7C7C;
opacity: 0.6;
}
.avatar-placeholder {
width: 192rpx;
height: 192rpx;
background-color: #e0e0e0;
border-radius: 50%;
margin-bottom: 40rpx;
}
.groupCard {
display: block;
}
</style>

175
src/pages/creatGroupChat/index.vue Normal file
View File

@ -0,0 +1,175 @@
<template>
<div class="outer-layer">
<div>
<tm-navbar :hideBack="false" hideHome title="发起群聊" :leftWidth="320">
</tm-navbar>
</div>
<div class="root">
<div class="w-full pl-[32rpx] pr-[32rpx]" >
<div class="w-full mt-[60rpx] flex justify-center" >
<div v-if="!groupChatType" class="avatar-placeholder">
</div>
<div class="mb-[40rpx]" v-else>
<tm-image
:width="192"
:height="192"
:round="12"
:src="avatarImg"
></tm-image>
</div>
</div>
<div class="input-group">
<div class="input-item">
群名称
</div>
<div class="input-box" >
<tm-input
:followTheme="false"
color="#fff"
placeholderStyle="color: #B4B4B4"
focusColor="#FFF"
:fontSize="28"
:maxlength="20"
:transprent="true"
placeholder="请输入群名称（1~20个字）"
:padding="[0]"
>
</tm-input>
</div>
</div>
<div class="input-group mt-[20rpx]">
<div class="input-item">
群类型
</div>
<div @click="chooseGroupType" class="left-box" >
<div class="text-[#B4B4B4] text-[28rpx]" >
请选择群类型
</div>
<div class="ml-[32rpx]" >
<tm-icon :font-size="22" color="#747474" name="tmicon-angle-right"></tm-icon>
</div>
</div>
</div>
</div>
<div class="h-[162rpx] flex justify-center bg-[#FFFFFF]">
<div class="mt-[14rpx]" >
<tm-button
color="#46299D"
disabled="true"
disabledColor="#E6E6E6"
:margin="[0]"
:shadow="0"
:width="426"
:height="76"
size="large"
label="按钮"
>
</tm-button>
</div>
</div>
</div>
</div>
</template>
<script setup>
import { ref, watch, computed } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { useChatList } from "@/store/chatList/index.js";
import { useAuth } from "@/store/auth";
import { useTalkStore, useUserStore } from "@/store";
import addCircle from "@/static/image/chatList/addCircle.png";
import cahtPopover from "@/static/image/chatList/cahtPopover.png";
import zu4992 from "@/static/image/chatList/zu4992@2x.png";
import zu4991 from "@/static/image/chatList/zu4991@2x.png";
import zu4989 from "@/static/image/chatList/zu4989@2x.png";
const talkStore = useTalkStore();
const userStore = useUserStore();
const { userInfo } = useAuth();
const groupChatName = ref("");
const groupChatType = ref('');
const avatarImg = computed(() => {
let srcT = "";
switch (groupChatType.value) {
case '普通群':
srcT = zu4992;
break;
case '项目群':
srcT = zu4991;
break;
case '部门群':
srcT = zu4989;
break;
default:
srcT = zu4992;
}
return srcT;
})
const chooseGroupType = () => {
uni.navigateTo({
url: '/pages/chooseGroupType/index'
})
}
</script>
<style scoped lang="scss">
uni-page-body,
page {
height: 100%;
}
.outer-layer {
overflow-y: auto;
flex: 1;
background-image: url("@/static/image/clockIn/z3280@3x.png");
background-size: cover;
padding-bottom: 0;
display: flex;
flex-direction: column;
}
.root {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.divider{
height: 1rpx;
background-color: #7C7C7C;
opacity: 0.6;
}
.avatar-placeholder {
width: 192rpx;
height: 192rpx;
background-color: #e0e0e0;
border-radius: 50%;
margin-bottom: 40rpx;
}
.input-group {
height: 110rpx;
background-color: #fff;
padding-left: 32rpx;
padding-right: 40rpx;
display: flex;
align-items: center;
}
.input-item {
line-height: 54rpx;
font-size: 28rpx;
color: #000;
font-weight: bold;
}
.input-box {
margin-left: 84rpx;
width: 404rpx;
}
.left-box {
margin-left: 290rpx;
display: flex;
align-items: center;
}
</style>

61
src/pages/dialog/index.vue
View File

@ -70,7 +70,7 @@
</div>
<div class="talk-content" :class="{ pointer: dialogueStore.isOpenMultiSelect }">
<deepBubble
<deepBubble
@clickMenu="(menuType) => onContextMenu(menuType, item)"
:isShowCopy="isShowCopy(item)"
:isShowWithdraw="isRevoke(talkParams.uid,item)"
@ -163,6 +163,27 @@
<!--底部安全区-->
<div class="content-placeholder"></div>
<tm-drawer
placement="bottom"
v-model:show="state.showWin"
:hideHeader="true"
:height="416"
:round="6"
>
<div class="w-full h-full flex flex-col items-center" >
<div class="mt-[46rpx] mb-[44rpx] leading-[48rpx] text-[#747474] text-[24rpx]" >
撤回该条消息？
</div>
<div class="divider" ></div>
<div @click="withdrawerConfirm" class="mt-[32rpx] mb-[32rpx] text-[32rpx] text-[#CF3050] leading-[48rpx]">
撤回
</div>
<div class="divider" ></div>
<div @click="state.showWin = false" class="mt-[32rpx] mb-[32rpx] text-[32rpx] text-[#000000] leading-[48rpx]">
取消
</div>
</div>
</tm-drawer>
</div>
</div>
</template>
@ -206,6 +227,7 @@ import zu6052 from "@/static/image/chatList/zu6052@2x.png"
import zu6053 from "@/static/image/chatList/zu6053@2x.png"
import deepBubble from "@/components/deep-bubble/deep-bubble.vue"
import {isRevoke } from './menu'
import useConfirm from '@/components/x-confirm/useConfirm.js'
@ -213,6 +235,7 @@ Quill.register('formats/emoji', EmojiBlot)
const { getDialogueList, updateZpagingRef, virtualList } = useDialogueListStore()
const talkStore = useTalkStore()
const { showConfirm } = useConfirm();
const settingsStore = useSettingsStore()
const userStore = useUserStore()
const dialogueStore = useDialogueStore()
@ -235,6 +258,8 @@ const talkParams = reactive({
const state = ref({
isOpenEmojiPanel: false,
isOpenFilePanel: false,
showWin: false,
onfocusItem: null,
})
const handleEmojiPanel = () => {
@ -353,7 +378,7 @@ const isShowCopy = (item) => {
default:
return false
}
}
const selectedMessage = computed(() => {
@ -552,7 +577,14 @@ const actionCite = (item) => {
const actionWithdraw = (item) => {
console.log('撤回');
dialogueStore.ApiRevokeRecord(item.msg_id)
state.value.onfocusItem = item
state.value.showWin = true;
}
const withdrawerConfirm = () => {
dialogueStore.ApiRevokeRecord(state.value.onfocusItem.msg_id)
state.value.onfocusItem = null
state.value.showWin = false;
}
const actionDelete = (item) => {
@ -603,10 +635,20 @@ const handleDelete = () => {
return message.warning('未选择消息')
}
console.log('删除');
const msgIds = selectedMessage.value.map(item => item.msg_id)
virtualList.value = virtualList.value.filter(item => !msgIds.includes(item.msg_id))
dialogueStore.ApiDeleteRecord(msgIds)
clearMultiSelect()
showConfirm({
content: '确定删除聊天记录',
confirmText:'删除',
confirmColor:'#CF3050',
onConfirm: async () => {
const msgIds = selectedMessage.value.map(item => item.msg_id)
virtualList.value = virtualList.value.filter(item => !msgIds.includes(item.msg_id))
dialogueStore.ApiDeleteRecord(msgIds)
clearMultiSelect()
},
onCancel: () => {
}
})
}
@ -946,4 +988,9 @@ page {
z-index: 1;
/* 确保 z-index 低于 deepBubble */
}
.divider {
width: 100%;
height: 1rpx;
background-color: #E7E7E7;
}
</style>

118
src/pages/index/index.vue
View File

@ -1,27 +1,74 @@
<template>
<div class="outer-layer">
<div>
<tm-navbar :hideBack="false" hideHome title="" :leftWidth="320" >
<tm-navbar :hideBack="false" hideHome title="" :leftWidth="420">
<template v-slot:left>
<div class="flex items-center ml-[48rpx]" >
<tm-image :width="72" :height="72" :round="12" :src="userStore.avatar"></tm-image>
<div class="ml-[24rpx] text-[36rpx] font-bold">{{ userStore.nickname }}</div>
<div class="flex items-center ml-[48rpx]">
<tm-image
:width="72"
:height="72"
:round="12"
:src="userStore.avatar"
></tm-image>
<div class="ml-[24rpx] text-[36rpx] font-bold">
{{ userStore.nickname }}
</div>
</div>
</template>
<template v-slot:right>
<div class="mr-[48rpx]">
<tm-image :width="41" :height="41" :round="12" :src="addCircle"></tm-image>
<tm-popover position="br" color="#333333" :width="260">
<tm-image
:width="41"
:height="41"
:round="12"
:src="addCircle"
></tm-image>
<template v-slot:label>
<div class="w-full h-[208rpx] pt-[22rpx] pb-[22rpx] pl-[34rpx] pr-[32rpx]" >
<div @click="creatGroupChat" class="flex items-center mb-[30rpx]" >
<div class="mr-[26rpx] flex items-center">
<tm-image
:width="40"
:height="40"
:src="cahtPopover"
></tm-image>
</div>
<div class="leading-[54rpx] text-[32rpx] text-[#FFFFFF] font-bold" >发起群聊</div>
</div>
<div class="divider" ></div>
<div class="flex items-center mt-[28rpx]" >
<div class="mr-[26rpx] flex items-center">
<tm-image
:width="40"
:height="40"
:src="zu3289"
></tm-image>
</div>
<div class="leading-[54rpx] text-[32rpx] text-[#FFFFFF] font-bold" >
通讯录
</div>
</div>
</div>
</template>
</tm-popover>
</div>
</template>
</template>
</tm-navbar>
</div>
<div class="root">
<div class="searchRoot">
<tm-input placeholder="请输入…" color="#F9F9FD" :round="1" prefix="tmicon-search" prefixColor="#46299D" ></tm-input>
<tm-input
placeholder="请输入…"
color="#F9F9FD"
:round="1"
prefix="tmicon-search"
prefixColor="#46299D"
></tm-input>
</div>
<div class="contentRoot">
<chatItem
v-for="(item,index) in items"
v-for="(item, index) in items"
:key="item.index_name"
:index="index"
:data="item"
@ -31,22 +78,24 @@
</div>
</template>
<script setup>
import { ref,watch,computed } from 'vue';
import { ref, watch, computed } from "vue";
import { onShow, onLoad } from "@dcloudio/uni-app";
import { useChatList } from "@/store/chatList/index.js";
import {useAuth} from "@/store/auth";
import { useTalkStore,useUserStore } from '@/store'
import chatItem from './components/chatItem.vue';
import { useAuth } from "@/store/auth";
import { useTalkStore, useUserStore } from "@/store";
import chatItem from "./components/chatItem.vue";
import addCircle from "@/static/image/chatList/addCircle.png";
import cahtPopover from "@/static/image/chatList/cahtPopover.png";
import zu3289 from "@/static/image/chatList/zu3289@2x.png";
const talkStore = useTalkStore()
const userStore = useUserStore()
const {userInfo}=useAuth()
const talkStore = useTalkStore();
const userStore = useUserStore();
const { userInfo } = useAuth();
const topItems = computed(() => talkStore.topItems)
const topItems = computed(() => talkStore.topItems);
const items = computed(() => {
// if (searchKeyword.value.length === 0) {
return talkStore.talkItems
return talkStore.talkItems;
// }
// return talkStore.talkItems.filter((item) => {
@ -54,21 +103,30 @@ const items = computed(() => {
// return keyword.toLowerCase().indexOf(searchKeyword.value.toLowerCase()) != -1
// })
})
});
const creatGroupChat = () => {
uni.navigateTo({
url: "/pages/creatGroupChat/index",
});
};
watch(() => talkStore, (newValue, oldValue) => {
console.log(talkStore);
watch(
() => talkStore,
(newValue, oldValue) => {
console.log(talkStore);
},
{ deep: true, immediate: true }
);
},{deep:true,immediate:true})
onShow(()=>{
talkStore.loadTalkList()
})
onShow(() => {
talkStore.loadTalkList();
});
</script>
<style scoped lang="scss">
uni-page-body,page{
height: 100%;
uni-page-body,
page {
height: 100%;
}
.outer-layer {
overflow-y: auto;
@ -91,5 +149,9 @@ height: 100%;
margin-top: 20rpx;
background-color: #fff;
}
.divider{
height: 1rpx;
background-color: #7C7C7C;
opacity: 0.6;
}
</style>

BIN
src/static/image/chatList/cahtPopover.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 854 B

BIN
src/static/image/chatList/zu3289@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
src/static/image/chatList/zu6030@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 40 KiB

BIN
src/static/image/chatList/zu6031@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 41 KiB

BIN
src/static/image/chatList/zu6032@2x.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 42 KiB

2
src/store/auth/index.js
View File

@ -4,7 +4,7 @@ import {uniStorage} from "@/utils/uniStorage.js"
import {ref} from 'vue'
export const useAuth = createGlobalState(() => {
// const token = useStorage('token', '', uniStorage)
const token = ref('30119d9978a6f3321fb4779c0040e997df4dd0dd0cf6b71119657617d2249ed783f940b0050d5be7e758740ea467afdf3eeb4d28fb5ea234af60ebe51fb218ff6a0563074f3084b41c1bc8dc0733d06bfbb433a8d5a1d13eb6227adbf50a5da566a4cacdbf91899e563f10864fe2acfe9526343f2c27f726448f6cf9ac172a9716f21a7079e22f4ded14f57418364bea07bfd33259ff97ca4c3c4a54cd90e529b1ac523444d29485f9ee637bb0ca5dfdd87125a1161291696084029bc0cc6bbcf690e3d99787d75eabd8906b6f79035c23391abf12bbabf10ab7b1a0ca998c38')
const token = ref('79b5c732d96d2b27a48a99dfd4a5566c43aaa5796242e854ebe3ffc198d6876b9628e7b764d9af65ab5dbb2d517ced88170491b74b048c0ba827c0d3741462cb89dc59ed46653a449af837a8262941ca1430937103230a1e32a1715f569f3efdbe6f8cb8b7b8642bd679668081b9b08f693d1b5be6002d936ec51e1e3e0c4927de9e32ac99a109b326e5d2bda27ec87624bb416ec70d2a95a2e190feeba9f0d6bae8571b3dfe89c824712344759a8f2bff9d70747c52525cf6a5614f9c770bca461a9b9c247b6dca97bcf83bbaf99bb726752c4fe1e9a4aa7de5c4cf3e88a3e480801280d45cdc124f9d8221105d8529c7c268c1251c3477bff5c051043bf980d1ae32bb67035d540ba9325759be69093c01497a2ece6c54d7ba2c2ccd07bb67242ccd7b216049b2afefd767f7269fa45ebb81dff8bec485f539e91611a2908af4407a64e67e6a1cb533d30ae71e630f')
const refreshToken = useStorage('refreshToken', '', uniStorage)
const userInfo = useStorage('userInfo', {}, uniStorage)
const leaderList = useStorage('leaderList', [], uniStorage)