jeecguniapp vue3 新版首次发布

src/pages/message/components/chatList.vue

@@ -0,0 +1,238 @@
+<template>
+  <z-paging
+    ref="paging"
+    :fixed="false"
+    v-model="dataList"
+    @query="queryList"
+    :default-page-size="100"
+  >
+    <uni-list>
+      <template v-for="(item, index) in dataList" :key="index">
+        <view
+          :class="{ list: true, isTop: item.izTop == 1 }"
+          @longpress.prevent="handleLongPress(item)"
+          @click="handleGo(item)"
+        >
+          <template v-if="['systemNotice'].includes(item.type)">
+            <view class="avatar">
+              <text class="cuIcon-notice text-white"></text>
+            </view>
+          </template>
+          <template v-if="['group'].includes(item.type) && !item.fromAvatar">
+            <view class="group avatar">
+              <text class="text-white">{{ getFirstStr(item.fromUserName) }}</text>
+            </view>
+          </template>
+          <uni-list-chat
+            avatarCircle
+            clickable
+            :title="item.fromUserName"
+            :avatar="getAvatar(item)"
+            :note="getChatType(item)"
+            :time="beautifyTime(item.sendTime)"
+            badge-positon="left"
+            :badge-text="item.unreadNum"
+            @click="handleGo(item)"
+          ></uni-list-chat>
+        </view>
+      </template>
+    </uni-list>
+  </z-paging>
+  <BottomOperate
+    v-if="bottomOperatePopup.show"
+    v-bind="bottomOperatePopup"
+    @close="() => (bottomOperatePopup.show = false)"
+    @change="handleChange"
+  ></BottomOperate>
+  <wd-toast />
+</template>
+
+<script setup lang="ts">
+import { onLaunch, onShow, onHide, onLoad, onReady } from '@dcloudio/uni-app'
+import { http } from '@/utils/http'
+import { useToast, useMessage, useNotify, dayjs } from 'wot-design-uni'
+import { useRouter } from '@/plugin/uni-mini-router'
+import { beautifyTime } from '@/common/uitls'
+import { useParamsStore } from '@/store/page-params'
+
+defineOptions({
+  name: 'chatList',
+  options: {
+    styleIsolation: 'shared',
+  },
+})
+const toast = useToast()
+const router = useRouter()
+const paramsStore = useParamsStore()
+const paging = ref(null)
+const avatarList = ref()
+const dataList = ref([])
+
+const options = [
+  { key: 'backtop', icon: 'backtop', label: '置顶' },
+  { key: 'cancelbacktop', icon: 'translate-bold', label: '取消置顶' },
+  { key: 'delete', icon: 'delete', label: '删除', color: 'red' },
+]
+const bottomOperatePopup = reactive({
+  show: false,
+  title: '',
+  data: {},
+  options: [],
+})
+
+const queryList = () => {
+  http
+    .get('/eoa/im/newApi/getChatList')
+    .then((res: any) => {
+      if (res.success) {
+        paging.value.complete(res.result.logVoList)
+        nextTick(() => {
+          setTimeout(() => {
+            sortByIzTop(dataList.value)
+            dataList.value = [...dataList.value]
+          }, 10)
+        })
+      } else {
+        paging.value.complete(false)
+      }
+    })
+    .catch((res) => {
+      paging.value.complete(false)
+    })
+}
+const sortByIzTop = (arr) => {
+  return arr.sort((a, b) => {
+    if (a.izTop && !b.izTop) {
+      return -1 // a 排在 b 前面
+    } else if (!a.izTop && b.izTop) {
+      return 1 // b 排在 a 前面
+    } else {
+      return 0 // 保持原有顺序
+    }
+  })
+}
+const getFirstStr = (val) => {
+  return val ? val.substr(0, 1) : val
+}
+const getAvatar = (item) => {
+  if (['systemNotice'].includes(item.type)) {
+  } else if (['group'].includes(item.type)) {
+  }
+  return item.fromAvatar ?? ''
+}
+const getChatType = (item) => {
+  switch (item.type) {
+    case 'discussion':
+      return '[组消息]'
+    case 'systemNotice':
+      return '[系统消息]'
+    case 'friend':
+      return item.status == 'offline' ? '[离线]' : '[在线]'
+    case 'group':
+      return '[群消息]'
+    default:
+      return ''
+  }
+}
+const handleLongPress = (item) => {
+  bottomOperatePopup.show = true
+  bottomOperatePopup.title = item.fromUserName
+  bottomOperatePopup.data = item
+  bottomOperatePopup.options = options.filter((o) => {
+    if (o.key == 'backtop' && item.izTop == 1) {
+      return false
+    } else if (o.key == 'cancelbacktop' && item.izTop == 0) {
+      return false
+    }
+    return true
+  })
+}
+const handleChange = ({ option, data }) => {
+  if (['cancelbacktop', 'backtop'].includes(option.key)) {
+    let izTop = 1
+    if (option.key === 'cancelbacktop') {
+      izTop = 0
+    }
+    http
+      .post('/eoa/im/newApi/chatToTop', {
+        id: data.id,
+        izTop,
+      })
+      .then((res: any) => {
+        if (res.success) {
+          paging.value.reload()
+        }
+      })
+  } else if (option.key === 'delete') {
+    http
+      .post('/eoa/im/newApi/removeChat', {
+        id: data.id,
+      })
+      .then((res: any) => {
+        if (res.success) {
+          paging.value.reload()
+        }
+      })
+  }
+}
+// 跳转
+const handleGo = (item) => {
+  if (['systemNotice'].includes(item.type)) {
+    //1.系统消息
+    router.push({ name: 'annotationList', params: { backRouteName: 'message' } })
+  } else if (['friend'].includes(item.type)) {
+    //2.聊天
+    paramsStore.setPageParams('chat', { data: item })
+    router.push({ name: 'chat' })
+  } else {
+    ///3.群组和讨论组
+    // TODO
+    toast.warning('暂不支持')
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.z-paging-content {
+  background-color: #f1f1f1;
+}
+.list {
+  &.isTop {
+    :deep(.uni-list-chat) {
+      background-color: #eee;
+    }
+  }
+  position: relative;
+  .avatar {
+    &.group {
+      background-color: #f37b1d;
+      font-size: 18px;
+    }
+    position: absolute;
+    top: 10px;
+    left: 15px;
+    background-color: #0081ff;
+    font-size: 24px;
+    width: 45px;
+    height: 45px;
+    z-index: 1;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 50%;
+  }
+}
+:deep(.uni-list-chat) {
+  .uni-list-chat__badge {
+    z-index: 2;
+  }
+  .uni-list-chat__content-title {
+    color: #9ca3af;
+  }
+}
+:deep(.wd-popup) {
+  &.wd-popup--bottom {
+    bottom: 50px;
+  }
+}
+</style>