158 lines
4.4 KiB
Vue
158 lines
4.4 KiB
Vue
<script lang="ts" setup>
|
||
import type { UploadFile } from 'ant-design-vue';
|
||
|
||
import type { NewsItem } from './types';
|
||
|
||
import { computed, inject, reactive, ref } from 'vue';
|
||
|
||
import { IconifyIcon } from '@vben/icons';
|
||
import { useAccessStore } from '@vben/stores';
|
||
|
||
import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
|
||
|
||
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
||
import { MaterialSelect } from '#/views/mp/components';
|
||
|
||
const props = defineProps<{
|
||
isFirst: boolean;
|
||
modelValue: NewsItem;
|
||
}>();
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'update:modelValue', v: NewsItem): void;
|
||
}>();
|
||
|
||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传永久素材的地址
|
||
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
|
||
const newsItem = computed<NewsItem>({
|
||
get() {
|
||
return props.modelValue;
|
||
},
|
||
set(val) {
|
||
emit('update:modelValue', val);
|
||
},
|
||
});
|
||
|
||
const dialogVisible = ref(false);
|
||
|
||
const accountId = inject<number>('accountId');
|
||
|
||
const fileList = ref<UploadFile[]>([]);
|
||
interface UploadData {
|
||
type: UploadType;
|
||
accountId: number;
|
||
}
|
||
const uploadData: UploadData = reactive({
|
||
type: UploadType.Image,
|
||
accountId: accountId!,
|
||
});
|
||
|
||
function handleOpenDialog() {
|
||
dialogVisible.value = true;
|
||
}
|
||
|
||
/** 素材选择完成事件 */
|
||
function onMaterialSelected(item: any) {
|
||
dialogVisible.value = false;
|
||
newsItem.value.thumbMediaId = item.mediaId;
|
||
newsItem.value.thumbUrl = item.url;
|
||
}
|
||
// DONE @hw：注释都补充下哈；
|
||
/** 上传前校验 */
|
||
const onBeforeUpload = (file: UploadFile) =>
|
||
useBeforeUpload(UploadType.Image, 2)(file as any);
|
||
|
||
// DONE @hw：注释都补充下哈；
|
||
/** 上传错误处理 */
|
||
function onUploadChange(info: any) {
|
||
if (info.file.status === 'error') {
|
||
onUploadError(info.file.error || new Error('上传失败'));
|
||
}
|
||
}
|
||
|
||
// DONE @hw：注释都补充下哈；
|
||
/** 上传成功处理 */
|
||
function onUploadSuccess(res: any) {
|
||
if (res.code !== 0) {
|
||
message.error(`上传出错：${res.msg}`);
|
||
return false;
|
||
}
|
||
|
||
// 重置上传文件的表单
|
||
fileList.value = [];
|
||
// 设置草稿的封面字段
|
||
newsItem.value.thumbMediaId = res.data.mediaId;
|
||
newsItem.value.thumbUrl = res.data.url;
|
||
}
|
||
|
||
// DONE @hw：注释都补充下哈；
|
||
/** 上传失败处理 */
|
||
function onUploadError(err: Error) {
|
||
message.error(`上传失败: ${err.message}`);
|
||
}
|
||
</script>
|
||
|
||
<template>
|
||
<div>
|
||
<p>封面:</p>
|
||
<!-- DONE @hw：我貌似上传不成功。不确定是不是我这边的问题；；；可以微信沟通下哈。 -->
|
||
<!-- DONE @hw：尽量使用 tindwind 替代。ps：如果多个组件复用，那就不用调整 -->
|
||
<div class="flex w-full flex-col items-center justify-center text-center">
|
||
<Image
|
||
v-if="newsItem.thumbUrl"
|
||
class="max-h-[300px] w-[300px]"
|
||
:src="newsItem.thumbUrl"
|
||
:preview="false"
|
||
/>
|
||
<IconifyIcon
|
||
v-else
|
||
icon="lucide:plus"
|
||
class="border border-[#d9d9d9] text-center text-[28px] leading-[120px] text-[#8c939d]"
|
||
:class="isFirst ? 'h-[120px] w-[230px]' : 'h-[120px] w-[120px]'"
|
||
/>
|
||
<div class="m-[5px]">
|
||
<div class="flex items-center justify-center">
|
||
<Upload
|
||
:action="UPLOAD_URL"
|
||
:headers="HEADERS"
|
||
:file-list="fileList"
|
||
:data="{ ...uploadData }"
|
||
:before-upload="onBeforeUpload"
|
||
@success="onUploadSuccess"
|
||
@change="onUploadChange"
|
||
>
|
||
<template #default>
|
||
<Button size="small" type="primary">本地上传</Button>
|
||
</template>
|
||
</Upload>
|
||
<Button
|
||
size="small"
|
||
type="primary"
|
||
class="ml-[5px]"
|
||
@click="handleOpenDialog"
|
||
>
|
||
素材库选择
|
||
</Button>
|
||
</div>
|
||
|
||
<div class="ml-[5px] mt-[5px] text-xs text-[#999]">
|
||
支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
|
||
</div>
|
||
</div>
|
||
<!-- DONE @hw：是不是使用 vben 自带的 Modal 哈；这样 ele 通用性更好点。其它模块，涉及到 Modal 也按照这个调整噢 -->
|
||
<Modal
|
||
v-model:open="dialogVisible"
|
||
title="图片选择"
|
||
width="65%"
|
||
:footer="null"
|
||
>
|
||
<MaterialSelect
|
||
type="image"
|
||
:account-id="accountId!"
|
||
@select-material="onMaterialSelected"
|
||
/>
|
||
</Modal>
|
||
</div>
|
||
</div>
|
||
</template>
|