You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
110 lines
2.9 KiB
Vue
110 lines
2.9 KiB
Vue
5 months ago
|
<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>
|
||
|
|
@import '../../styles/common.scss';
|
||
|
|
|
||
|
|
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>
|