SichuanDaily/src/views/message/index.vue

<template>
  <n-drawer
    v-model:show="show"
    :width="340"
    placement="right"
    :trap-focus="false"
    :block-scroll="false"
    :show-mask="false"
    :mask-closable="false"
    to="#drawer-target"
    style="--n-body-padding: 0px"
  >
    <n-drawer-content title="留言列表">
      <n-list
        hoverable
        clickable
        style="--n-color-modal: none"
        :show-divider="false"
        v-if="messageList.length > 0"
      >
        <n-list-item
          v-for="(ms, index) in messageList"
          :key="index"
          style=""
          @click="handleMessageClick(ms)"
        >
          <n-flex justify="space-between">
            <div class="truncate inline-block" style="width: 260px">
              {{ ms && ms.content.content }}
            </div>

            <n-dropdown
              trigger="hover"
              :options="ms.status === 0 ? fullOptions : delOptions"
              @select="(key) => handleSelect(key, ms)"
            >
              <n-icon :size="20">
                <svg
                  xmlns="http://www.w3.org/2000/svg"
                  xmlns:xlink="http://www.w3.org/1999/xlink"
                  viewBox="0 0 32 32"
                >
                  <circle cx="8" cy="16" r="2" fill="currentColor"></circle>
                  <circle cx="16" cy="16" r="2" fill="currentColor"></circle>
                  <circle cx="24" cy="16" r="2" fill="currentColor"></circle>
                </svg>
              </n-icon>
            </n-dropdown>
          </n-flex>
        </n-list-item>
      </n-list>
      <div v-else class="mt-16">
        <n-empty description="暂没数据"></n-empty>
      </div>
    </n-drawer-content>
  </n-drawer>
</template>

<script setup lang="ts">
import { computed, onBeforeMount, onMounted, ref } from 'vue'
import { useMainStore } from '@/store'
import {
  NList,
  NListItem,
  NDropdown,
  NEmpty,
  useDialog,
  useMessage
} from 'naive-ui'

import {
  fetchMessageList,
  auditMessage,
  delMessage
} from '@/api/module/message'
import type { MessageItem } from './type'
import { sdk, sdk_mounted } from '@/sdk'

const show = ref(true)
defineProps<{ msg: string }>()

const messageList = ref<MessageItem[]>([])
const dialog = useDialog()
const message = useMessage()
const main = useMainStore()
onBeforeMount(() => {
  main.setWidthSceneRef(340)
})

onMounted(() => {
  show.value = true
  refresh()

  // sdk.then((sdk) => {
  //
  // })
})

const refresh = async () => {
  const res = await fetchMessageList(main.sceneCode)
  console.log('res', res)
  messageList.value = (res as never as MessageItem[]) || []
}
const handleMessageClick = async (ms: MessageItem) => {
  const sid = ms.content.sid
  console.log('sid', sid)
  sdk_mounted((sdk) => {
    sdk.TagManager.openTag(sid) // 打开热点
  })
}
const fullOptions = ref([
  {
    label: '审核并屏示',
    key: '1'
  },
  {
    label: '删除',
    key: '2'
  }
])
const delOptions = ref([
  {
    label: '删除',
    key: '2'
  }
])

const handleSelect = async (key: string, ms: MessageItem) => {
  console.log('handleSelect', key, ms.id)
  switch (key) {
    case '1':
      await auditMessage({
        id: Number(ms.id),
        num: main.sceneCode
      })
      message.success('审核成功！')
      await refresh()
      break
    case '2':
      dialog.warning({
        title: '删除',
        content: '是否确定删除？',
        negativeText: '取消',
        positiveText: '确认',
        onPositiveClick: async () => {
          await delMessage({
            id: Number(ms.id),
            num: main.sceneCode
          })
          sdk_mounted((sdk) => {
            sdk.TagManager.removeTag(ms.content.sid) // 打开热点
          })
          message.success('删除成功！')
          await refresh()
        }
      })
      break
  }
}

// __sdk.TagManager.openTag('1730448544227') // 打开热点
// __sdk.TagManager.removeTag('1730448544227') // 移除热点
</script>

<style lang="sass" scoped>
a
  color: #42b983

label
  margin: 0 0.5em
  font-weight: bold

code
  background-color: #eee
  padding: 2px 4px
  border-radius: 4px
  color: #304455
</style>