apply-assistant-v3/root/NEUIKit/pages/Chat/message/pin-list.vue

<template>
  <div :class="`wrapper ${pinInfos.length === 0 ? 'bg-white' : ''}`">
    <NavBar :title="t('pinText')">
      <template v-slot:left>
        <div class="nav-bar-text" @tap="back">{{ t('pinText') }}</div>
      </template>
    </NavBar>
    <div class="pinCard-item-wrapper">
      <Empty v-if="pinInfos.length === 0" :text="t('noPinListText')" />

      <div
        v-else
        v-for="(item, index) in pinInfos"
        :key="item.message.messageClientId"
      >
        <PinCard
          :msg="item.message"
          :index="index"
          :key="item.message.messageClientId"
          :handleUnPinMsg="handleUnPinMsg(item.message)"
        >
        </PinCard>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { onLoad } from '@dcloudio/uni-app'
import { autorun } from 'mobx'
import { onUnmounted, ref } from '../../../utils/transformVue'
import Icon from '../../../components/Icon.vue'
import NavBar from '../../../components/NavBar.vue'
import PinCard from '../../../components/PinCard.vue'
import { t } from '../../../utils/i18n'
import { getUniPlatform } from '../../../utils'
import { deepClone } from '../../../utils'
import { V2NIMTeamMember } from 'nim-web-sdk-ng/dist/v2/NIM_UNIAPP_SDK/V2NIMTeamService'
import Empty from '../../../components/Empty.vue'
const inputValue = ref('')
const showClearIcon = ref(false)
const myMemberInfo = ref<V2NIMTeamMember>()
let teamId = ''
let conversationId = ''
let pinInfos = ref([])
let uninstallPinInfosWatch = () => {}

onLoad((option) => {
  conversationId = option?.conversationId
  uninstallPinInfosWatch = autorun(() => {
    const curPinMsgsMap =
      uni.$UIKitStore.msgStore.pinMsgs.map.get(conversationId)

    pinInfos.value = [...curPinMsgsMap.values()]
      .filter((pinInfo) => pinInfo.pinState > 0 && pinInfo.message)
      .sort((a, b) => b.message!.createTime - a.message!.createTime)
  })
})

const handleUnPinMsg = (msg) => {
  return () => {
    // 不用进行 catch 处理，因为 store 里面的 pin 相关方法处理过了，并且会将错误日志输出到控制台
    return uni.$UIKitStore.msgStore
      .unpinMessageActive(msg)
      .catch((err: any) => {
        if (err?.code && typeof t(`${err.code}`) !== 'undefined') {
          uni.showToast({
            title: t(`${err.code}`),
            icon: 'error',
            duration: 1000,
          })
        } else {
          uni.showToast({
            title: t('unpinFailedText'),
            icon: 'error',
            duration: 1000,
          })
        }
      })
  }
}

onUnmounted(() => {
  uninstallPinInfosWatch()
})
</script>

<style lang="scss" scoped>


page {
  padding-top: var(--status-bar-height);
  background-color: rgb(245, 246, 247);
}

.wrapper {
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 30px;
  background-color: rgb(245, 246, 247);
  min-height: 100vh;
  .nav-bar-text {
    color: rgb(20, 146, 209);
  }
}
.bg-white {
  background: #fff;
}
</style>