|
|
<template>
|
|
|
<div class="attachment-wrap">
|
|
|
<div
|
|
|
class="attach-item"
|
|
|
v-for="attachment in attachments"
|
|
|
:key="attachment.id"
|
|
|
>
|
|
|
<n-button
|
|
|
@click.stop="download(attachment)"
|
|
|
type="primary"
|
|
|
size="tiny"
|
|
|
dashed
|
|
|
>
|
|
|
<template #icon>
|
|
|
<n-icon>
|
|
|
<cloud-download-outline />
|
|
|
</n-icon>
|
|
|
</template>
|
|
|
{{ attachment.type === 8 ? '收费' : '免费' }}附件
|
|
|
</n-button>
|
|
|
</div>
|
|
|
|
|
|
<!-- 删除确认 -->
|
|
|
<n-modal
|
|
|
v-model:show="showDownloadModal"
|
|
|
:mask-closable="false"
|
|
|
preset="dialog"
|
|
|
title="下载提示"
|
|
|
:content="downloadTip"
|
|
|
positive-text="确认下载"
|
|
|
negative-text="取消"
|
|
|
icon-placement="top"
|
|
|
@positive-click="execDownloadAction"
|
|
|
/>
|
|
|
</div>
|
|
|
</template>
|
|
|
|
|
|
<script setup lang="ts">
|
|
|
import { h, ref } from 'vue';
|
|
|
import { CloudDownloadOutline } from '@vicons/ionicons5';
|
|
|
import { precheckAttachment, getAttachment } from '@/api/user';
|
|
|
|
|
|
const props = withDefaults(
|
|
|
defineProps<{
|
|
|
attachments: Item.PostItemProps[];
|
|
|
price?: number;
|
|
|
}>(),
|
|
|
{
|
|
|
attachments: () => [],
|
|
|
price: 0,
|
|
|
}
|
|
|
);
|
|
|
const showDownloadModal = ref(false);
|
|
|
const downloadTip = ref<any>('');
|
|
|
const attachmentID = ref(0);
|
|
|
|
|
|
const download = (attachment: Item.PostItemProps) => {
|
|
|
showDownloadModal.value = true;
|
|
|
attachmentID.value = attachment.id;
|
|
|
|
|
|
downloadTip.value = '这是一个免费附件，您可以直接下载？';
|
|
|
if (attachment.type === 8) {
|
|
|
downloadTip.value = () =>
|
|
|
h('div', {}, [
|
|
|
h(
|
|
|
'p',
|
|
|
{},
|
|
|
'这是一个收费附件，下载将收取' +
|
|
|
(props.price / 100).toFixed(2) +
|
|
|
'元'
|
|
|
),
|
|
|
]);
|
|
|
|
|
|
precheckAttachment({
|
|
|
id: attachmentID.value,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
if (res.paid) {
|
|
|
downloadTip.value = () =>
|
|
|
h('div', {}, [
|
|
|
h(
|
|
|
'p',
|
|
|
{},
|
|
|
'此次下载您已支付或无需付费，请确认下载'
|
|
|
),
|
|
|
]);
|
|
|
}
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
showDownloadModal.value = false;
|
|
|
});
|
|
|
}
|
|
|
};
|
|
|
const execDownloadAction = () => {
|
|
|
getAttachment({
|
|
|
id: attachmentID.value,
|
|
|
})
|
|
|
.then((res) => {
|
|
|
window.open(res.signed_url.replace('http://', 'https://'), '_blank');
|
|
|
})
|
|
|
.catch((err) => {
|
|
|
console.log(err);
|
|
|
});
|
|
|
};
|
|
|
</script>
|
|
|
|
|
|
<style lang="less" scoped>
|
|
|
.attach-item {
|
|
|
margin: 10px 0;
|
|
|
}
|
|
|
</style> |
