167 lines
3.9 KiB
Vue
167 lines
3.9 KiB
Vue
<template>
|
||
<div>
|
||
<p>封面:</p>
|
||
<div class="thumb-div">
|
||
<el-image
|
||
v-if="newsItem.thumbUrl"
|
||
style="width: 300px; max-height: 300px"
|
||
:src="newsItem.thumbUrl"
|
||
fit="contain"
|
||
/>
|
||
<Icon
|
||
v-else
|
||
icon="ep:plus"
|
||
class="avatar-uploader-icon"
|
||
:class="isFirst ? 'avatar' : 'avatar1'"
|
||
/>
|
||
<div class="thumb-but">
|
||
<el-upload
|
||
:action="UPLOAD_URL"
|
||
:headers="HEADERS"
|
||
multiple
|
||
:limit="1"
|
||
:file-list="fileList"
|
||
:data="uploadData"
|
||
:before-upload="onBeforeUpload"
|
||
:on-error="onUploadError"
|
||
:on-success="onUploadSuccess"
|
||
>
|
||
<template #trigger>
|
||
<el-button size="small" type="primary">本地上传</el-button>
|
||
</template>
|
||
<el-button
|
||
size="small"
|
||
type="primary"
|
||
@click="showImageDialog = true"
|
||
style="margin-left: 5px"
|
||
>
|
||
素材库选择
|
||
</el-button>
|
||
<template #tip>
|
||
<div class="el-upload__tip">支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div>
|
||
</template>
|
||
</el-upload>
|
||
</div>
|
||
<el-dialog
|
||
title="选择图片"
|
||
v-model="showImageDialog"
|
||
width="80%"
|
||
append-to-body
|
||
destroy-on-close
|
||
>
|
||
<WxMaterialSelect
|
||
type="image"
|
||
:account-id="accountId!"
|
||
@select-material="onMaterialSelected"
|
||
/>
|
||
</el-dialog>
|
||
</div>
|
||
</div>
|
||
</template>
|
||
|
||
<script setup lang="ts">
|
||
import WxMaterialSelect from '@/views/mp/components/wx-material-select'
|
||
import { getAccessToken } from '@/utils/auth'
|
||
import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus'
|
||
import { UploadType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
|
||
import { NewsItem } from './types'
|
||
const message = useMessage()
|
||
|
||
const UPLOAD_URL = import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-permanent' // 上传永久素材的地址
|
||
const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
|
||
|
||
const props = defineProps<{
|
||
modelValue: NewsItem
|
||
isFirst: boolean
|
||
}>()
|
||
|
||
const emit = defineEmits<{
|
||
(e: 'update:modelValue', v: NewsItem)
|
||
}>()
|
||
const newsItem = computed<NewsItem>({
|
||
get() {
|
||
return props.modelValue
|
||
},
|
||
set(val) {
|
||
emit('update:modelValue', val)
|
||
}
|
||
})
|
||
|
||
const accountId = inject<number>('accountId')
|
||
const showImageDialog = ref(false)
|
||
|
||
const fileList = ref<UploadFiles>([])
|
||
interface UploadData {
|
||
type: UploadType
|
||
accountId: number
|
||
}
|
||
const uploadData: UploadData = reactive({
|
||
type: UploadType.Image,
|
||
accountId: accountId!
|
||
})
|
||
|
||
/** 素材选择完成事件*/
|
||
const onMaterialSelected = (item: any) => {
|
||
showImageDialog.value = false
|
||
newsItem.value.thumbMediaId = item.mediaId
|
||
newsItem.value.thumbUrl = item.url
|
||
}
|
||
|
||
const onBeforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) =>
|
||
useBeforeUpload(UploadType.Image, 2)(rawFile)
|
||
|
||
const onUploadSuccess: UploadProps['onSuccess'] = (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
|
||
}
|
||
|
||
const onUploadError = (err: Error) => {
|
||
message.error('上传失败: ' + err.message)
|
||
}
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.el-upload__tip {
|
||
margin-left: 5px;
|
||
}
|
||
|
||
.thumb-div {
|
||
display: inline-block;
|
||
width: 100%;
|
||
text-align: center;
|
||
|
||
.avatar-uploader-icon {
|
||
width: 120px;
|
||
height: 120px;
|
||
font-size: 28px;
|
||
line-height: 120px;
|
||
color: #8c939d;
|
||
text-align: center;
|
||
border: 1px solid #d9d9d9;
|
||
}
|
||
|
||
.avatar {
|
||
width: 230px;
|
||
height: 120px;
|
||
}
|
||
|
||
.avatar1 {
|
||
width: 120px;
|
||
height: 120px;
|
||
}
|
||
|
||
.thumb-but {
|
||
margin: 5px;
|
||
}
|
||
}
|
||
</style>
|