fix

src/components/x-confirm/index.vue

@@ -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 confirmLabel=ref('确定')
-const cancelLabel=ref(language('components.confirm.cancelText'))
+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>

src/pages.json

@@ -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",

src/pages/chooseGroupType/index.vue

@@ -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>

src/pages/creatGroupChat/index.vue

@@ -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>

src/pages/dialog/index.vue

@@ -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 = () => {
@@ -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('删除');
+  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>

src/pages/index/index.vue

@@ -1,23 +1,70 @@
 <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>
+            <tm-image
-            <div class="ml-[24rpx] text-[36rpx] font-bold">{{ userStore.nickname }}</div>
+              :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>
       </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
@@ -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 { useTalkStore, useUserStore } from "@/store";
-import chatItem from './components/chatItem.vue';
+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 talkStore = useTalkStore();
-const userStore = useUserStore()
+const userStore = useUserStore();
-const {userInfo}=useAuth()
+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,20 +103,29 @@ const items = computed(() => {
 
   //   return keyword.toLowerCase().indexOf(searchKeyword.value.toLowerCase()) != -1
   // })
-})
+});
 
+const creatGroupChat = () => {
+  uni.navigateTo({
+    url: "/pages/creatGroupChat/index",
+  });
+};
 
-watch(() => talkStore, (newValue, oldValue) => {
+watch(
+  () => talkStore,
+  (newValue, oldValue) => {
     console.log(talkStore);
-
+  },
-},{deep:true,immediate:true})
+  { deep: true, immediate: true }
+);
 
 onShow(() => {
-  talkStore.loadTalkList()
+  talkStore.loadTalkList();
-})
+});
 </script>
 <style scoped lang="scss">
-uni-page-body,page{
+uni-page-body,
+page {
   height: 100%;
 }
 .outer-layer {
@@ -91,5 +149,9 @@ height: 100%;
   margin-top: 20rpx;
   background-color: #fff;
 }
-
+.divider{
+  height: 1rpx;
+  background-color: #7C7C7C;
+  opacity: 0.6;
+}
 </style>

src/store/auth/index.js

@@ -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)