refactor: MP/wx-reply组件，抽离useUpload钩子
This commit is contained in:
dhb52
parent
c27be373d0
commit
39d8ecbfc7
@ -8,7 +8,7 @@
|
||||
④ 支持发送【视频】消息时，支持新建视频
|
||||
-->
|
||||
<template>
|
||||
<el-tabs type="border-card" v-model="objDataRef.type" @tab-click="handleClick">
|
||||
<el-tabs type="border-card" v-model="objData.type" @tab-click="handleClick">
|
||||
<!-- 类型 1：文本 -->
|
||||
<el-tab-pane name="text">
|
||||
<template #label>
|
||||
@ -18,7 +18,7 @@
|
||||
type="textarea"
|
||||
:rows="5"
|
||||
placeholder="请输入内容"
|
||||
v-model="objDataRef.content"
|
||||
v-model="objData.content"
|
||||
@input="inputContent"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
@ -28,9 +28,9 @@
|
||||
<el-row align="middle"><Icon icon="ep:picture" class="mr-5px" /> 图片</el-row>
|
||||
</template>
|
||||
<!-- 情况一：已经选择好素材、或者上传好图片 -->
|
||||
<div class="select-item" v-if="objDataRef.url">
|
||||
<img class="material-img" :src="objDataRef.url" />
|
||||
<p class="item-name" v-if="objDataRef.name">{{ objDataRef.name }}</p>
|
||||
<div class="select-item" v-if="objData.url">
|
||||
<img class="material-img" :src="objData.url" />
|
||||
<p class="item-name" v-if="objData.name">{{ objData.name }}</p>
|
||||
<el-row class="ope-row" justify="center">
|
||||
<el-button type="danger" circle @click="deleteObj">
|
||||
<Icon icon="ep:delete" />
|
||||
@ -44,21 +44,21 @@
|
||||
<el-button type="success" @click="openMaterial">
|
||||
素材库选择 <Icon icon="ep:circle-check" />
|
||||
</el-button>
|
||||
<el-dialog title="选择图片" v-model="dialogImageVisible" width="90%" append-to-body>
|
||||
<WxMaterialSelect :obj-data="objDataRef" @select-material="selectMaterial" />
|
||||
<el-dialog title="选择图片" v-model="dialogState.image" width="90%" append-to-body>
|
||||
<WxMaterialSelect :obj-data="objData" @select-material="selectMaterial" />
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
<!-- 文件上传 -->
|
||||
<el-col :span="12" class="col-add">
|
||||
<el-upload
|
||||
:action="actionUrl"
|
||||
:headers="headers"
|
||||
:action="UPLOAD_URL"
|
||||
:headers="HEADERS"
|
||||
multiple
|
||||
:limit="1"
|
||||
:file-list="fileList"
|
||||
:data="uploadData"
|
||||
:before-upload="beforeImageUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
:on-success="onUploadSuccess"
|
||||
>
|
||||
<el-button type="primary">上传图片</el-button>
|
||||
<template #tip>
|
||||
@ -75,10 +75,10 @@
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:phone" /> 语音</el-row>
|
||||
</template>
|
||||
<div class="select-item2" v-if="objDataRef.url">
|
||||
<p class="item-name">{{ objDataRef.name }}</p>
|
||||
<div class="select-item2" v-if="objData.url">
|
||||
<p class="item-name">{{ objData.name }}</p>
|
||||
<div class="item-infos">
|
||||
<WxVoicePlayer :url="objDataRef.url" />
|
||||
<WxVoicePlayer :url="objData.url" />
|
||||
</div>
|
||||
<el-row class="ope-row" justify="center">
|
||||
<el-button type="danger" circle @click="deleteObj"><Icon icon="ep:delete" /></el-button>
|
||||
@ -90,21 +90,21 @@
|
||||
<el-button type="success" @click="openMaterial">
|
||||
素材库选择<Icon icon="ep:circle-check" />
|
||||
</el-button>
|
||||
<el-dialog title="选择语音" v-model="dialogVoiceVisible" width="90%" append-to-body>
|
||||
<el-dialog title="选择语音" v-model="dialogState.voice" width="90%" append-to-body>
|
||||
<WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
<!-- 文件上传 -->
|
||||
<el-col :span="12" class="col-add">
|
||||
<el-upload
|
||||
:action="actionUrl"
|
||||
:headers="headers"
|
||||
:action="UPLOAD_URL"
|
||||
:headers="HEADERS"
|
||||
multiple
|
||||
:limit="1"
|
||||
:file-list="fileList"
|
||||
:data="uploadData"
|
||||
:before-upload="beforeVoiceUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
:on-success="onUploadSuccess"
|
||||
>
|
||||
<el-button type="primary">点击上传</el-button>
|
||||
<template #tip>
|
||||
@ -123,20 +123,20 @@
|
||||
</template>
|
||||
<el-row>
|
||||
<el-input
|
||||
v-model="objDataRef.title"
|
||||
v-model="objData.title"
|
||||
class="input-margin-bottom"
|
||||
placeholder="请输入标题"
|
||||
@input="inputContent"
|
||||
/>
|
||||
<el-input
|
||||
class="input-margin-bottom"
|
||||
v-model="objDataRef.description"
|
||||
v-model="objData.description"
|
||||
placeholder="请输入描述"
|
||||
@input="inputContent"
|
||||
/>
|
||||
<div style="text-align: center">
|
||||
<WxVideoPlayer v-if="objDataRef.url" :url="objDataRef.url" />
|
||||
</div>
|
||||
<el-row style="text-align: center" justify="center">
|
||||
<WxVideoPlayer v-if="objData.url" :url="objData.url" />
|
||||
</el-row>
|
||||
<el-col>
|
||||
<el-row style="text-align: center" align="middle">
|
||||
<!-- 选择素材 -->
|
||||
@ -144,21 +144,21 @@
|
||||
<el-button type="success" @click="openMaterial">
|
||||
素材库选择 <Icon icon="ep:circle-check" />
|
||||
</el-button>
|
||||
<el-dialog title="选择视频" v-model="dialogVideoVisible" width="90%" append-to-body>
|
||||
<WxMaterialSelect :objData="objDataRef" @select-material="selectMaterial" />
|
||||
<el-dialog title="选择视频" v-model="dialogState.video" width="90%" append-to-body>
|
||||
<WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
<!-- 文件上传 -->
|
||||
<el-col :span="12">
|
||||
<el-upload
|
||||
:action="actionUrl"
|
||||
:headers="headers"
|
||||
:action="UPLOAD_URL"
|
||||
:headers="HEADERS"
|
||||
multiple
|
||||
:limit="1"
|
||||
:file-list="fileList"
|
||||
:data="uploadData"
|
||||
:before-upload="beforeVideoUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
:on-success="onUploadSuccess"
|
||||
>
|
||||
<el-button type="primary">新建视频 <Icon icon="ep:upload" /></el-button>
|
||||
</el-upload>
|
||||
@ -173,8 +173,8 @@
|
||||
<el-row align="middle"><Icon icon="ep:reading" /> 图文</el-row>
|
||||
</template>
|
||||
<el-row>
|
||||
<div class="select-item" v-if="objDataRef.articles?.length > 0">
|
||||
<WxNews :articles="objDataRef.articles" />
|
||||
<div class="select-item" v-if="objData.articles?.length > 0">
|
||||
<WxNews :articles="objData.articles" />
|
||||
<el-col class="ope-row">
|
||||
<el-button type="danger" circle @click="deleteObj">
|
||||
<Icon icon="ep:delete" />
|
||||
@ -182,7 +182,7 @@
|
||||
</el-col>
|
||||
</div>
|
||||
<!-- 选择素材 -->
|
||||
<el-col :span="24" v-if="!objDataRef.content">
|
||||
<el-col :span="24" v-if="!objData.content">
|
||||
<el-row style="text-align: center" align="middle">
|
||||
<el-col :span="24">
|
||||
<el-button type="success" @click="openMaterial">
|
||||
@ -192,9 +192,9 @@
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-col>
|
||||
<el-dialog title="选择图文" v-model="dialogNewsVisible" width="90%" append-to-body>
|
||||
<el-dialog title="选择图文" v-model="dialogState.news" width="90%" append-to-body>
|
||||
<WxMaterialSelect
|
||||
:objData="objDataRef"
|
||||
:obj-data="objData"
|
||||
@select-material="selectMaterial"
|
||||
:newsType="newsType"
|
||||
/>
|
||||
@ -213,22 +213,22 @@
|
||||
<el-row align="middle" justify="center">
|
||||
<img
|
||||
style="width: 100px"
|
||||
v-if="objDataRef.thumbMediaUrl"
|
||||
:src="objDataRef.thumbMediaUrl"
|
||||
v-if="objData.thumbMediaUrl"
|
||||
:src="objData.thumbMediaUrl"
|
||||
/>
|
||||
<icon v-else icon="ep:plus" />
|
||||
</el-row>
|
||||
<el-row align="middle" justify="center" style="margin-top: 2%">
|
||||
<div class="thumb-but">
|
||||
<el-upload
|
||||
:action="actionUrl"
|
||||
:headers="headers"
|
||||
:action="UPLOAD_URL"
|
||||
:headers="HEADERS"
|
||||
multiple
|
||||
:limit="1"
|
||||
:file-list="fileList"
|
||||
:data="uploadData"
|
||||
:before-upload="beforeThumbImageUpload"
|
||||
:on-success="handleUploadSuccess"
|
||||
:before-upload="beforeImageUpload"
|
||||
:on-success="onUploadSuccess"
|
||||
>
|
||||
<template #trigger>
|
||||
<el-button type="primary" link>本地上传</el-button>
|
||||
@ -241,359 +241,271 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
<el-dialog title="选择图片" v-model="dialogThumbVisible" width="80%" append-to-body>
|
||||
<el-dialog title="选择图片" v-model="dialogState.thumb" width="80%" append-to-body>
|
||||
<WxMaterialSelect
|
||||
:objData="{ type: 'image', accountId: objDataRef.accountId }"
|
||||
:objData="{ type: 'image', accountId: objData.accountId }"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="objDataRef.title" placeholder="请输入标题" @input="inputContent" />
|
||||
<el-input v-model="objData.title" placeholder="请输入标题" @input="inputContent" />
|
||||
<div style="margin: 20px 0"></div>
|
||||
<el-input
|
||||
v-model="objDataRef.description"
|
||||
placeholder="请输入描述"
|
||||
@input="inputContent"
|
||||
/>
|
||||
<el-input v-model="objData.description" placeholder="请输入描述" @input="inputContent" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin: 20px 0"></div>
|
||||
<el-input v-model="objDataRef.musicUrl" placeholder="请输入音乐链接" @input="inputContent" />
|
||||
<el-input v-model="objData.musicUrl" placeholder="请输入音乐链接" @input="inputContent" />
|
||||
<div style="margin: 20px 0"></div>
|
||||
<el-input
|
||||
v-model="objDataRef.hqMusicUrl"
|
||||
v-model="objData.hqMusicUrl"
|
||||
placeholder="请输入高质量音乐链接"
|
||||
@input="inputContent"
|
||||
/>
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
<script lang="ts" name="WxReplySelect">
|
||||
<script setup lang="ts" name="WxReplySelect">
|
||||
import WxNews from '@/views/mp/components/wx-news/main.vue'
|
||||
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
|
||||
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
|
||||
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
|
||||
|
||||
import { getAccessToken } from '@/utils/auth'
|
||||
import { defineComponent } from 'vue'
|
||||
import { MaterialType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
|
||||
import type { UploadRawFile } from 'element-plus'
|
||||
|
||||
export default defineComponent({
|
||||
components: {
|
||||
WxNews,
|
||||
WxMaterialSelect,
|
||||
WxVoicePlayer,
|
||||
WxVideoPlayer
|
||||
const props = defineProps({
|
||||
objData: {
|
||||
// 消息对象。
|
||||
type: Object, // 设置为 Object 的原因，方便属性的传递
|
||||
required: true
|
||||
},
|
||||
props: {
|
||||
objData: {
|
||||
// 消息对象。
|
||||
type: Object, // 设置为 Object 的原因，方便属性的传递
|
||||
required: true
|
||||
},
|
||||
newsType: {
|
||||
// 图文类型：1、已发布图文；2、草稿箱图文
|
||||
type: String,
|
||||
default: '1'
|
||||
}
|
||||
},
|
||||
setup(props) {
|
||||
const objDataRef = reactive(props.objData)
|
||||
const message = useMessage() // 消息弹窗
|
||||
const tempObj = new Map().set(objDataRef.type, Object.assign({}, objDataRef))
|
||||
// ========== 素材选择的弹窗，是否可见 ==========
|
||||
const dialogNewsVisible = ref(false) // 图文
|
||||
const dialogImageVisible = ref(false) // 图片
|
||||
const dialogVoiceVisible = ref(false) // 语音
|
||||
const dialogVideoVisible = ref(false) // 视频
|
||||
const dialogThumbVisible = ref(false) // 缩略图
|
||||
// ========== 文件上传（图片、语音、视频） ==========
|
||||
const fileList = ref([])
|
||||
const uploadData = reactive({
|
||||
accountId: undefined,
|
||||
type: objDataRef.type,
|
||||
title: '',
|
||||
introduction: ''
|
||||
})
|
||||
const actionUrl = ref(
|
||||
import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary'
|
||||
)
|
||||
const headers = ref({ Authorization: 'Bearer ' + getAccessToken() }) // 设置上传的请求头部
|
||||
const beforeThumbImageUpload = (file) => {
|
||||
const isType =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/png' ||
|
||||
file.type === 'image/gif' ||
|
||||
file.type === 'image/bmp' ||
|
||||
file.type === 'image/jpg'
|
||||
if (!isType) {
|
||||
message.error('上传图片格式不对!')
|
||||
return false
|
||||
}
|
||||
const isLt = file.size / 1024 / 1024 < 2
|
||||
if (!isLt) {
|
||||
message.error('上传图片大小不能超过 2M!')
|
||||
return false
|
||||
}
|
||||
uploadData.accountId = objDataRef.accountId
|
||||
return true
|
||||
}
|
||||
const beforeVoiceUpload = (file) => {
|
||||
// 校验格式
|
||||
const isType =
|
||||
file.type === 'audio/mp3' ||
|
||||
file.type === 'audio/mpeg' ||
|
||||
file.type === 'audio/wma' ||
|
||||
file.type === 'audio/wav' ||
|
||||
file.type === 'audio/amr'
|
||||
if (!isType) {
|
||||
message.error('上传语音格式不对!' + file.type)
|
||||
return false
|
||||
}
|
||||
// 校验大小
|
||||
const isLt = file.size / 1024 / 1024 < 2
|
||||
if (!isLt) {
|
||||
message.error('上传语音大小不能超过 2M!')
|
||||
return false
|
||||
}
|
||||
uploadData.accountId = objDataRef.accountId
|
||||
return true
|
||||
}
|
||||
const beforeImageUpload = (file) => {
|
||||
// 校验格式
|
||||
const isType =
|
||||
file.type === 'image/jpeg' ||
|
||||
file.type === 'image/png' ||
|
||||
file.type === 'image/gif' ||
|
||||
file.type === 'image/bmp' ||
|
||||
file.type === 'image/jpg'
|
||||
if (!isType) {
|
||||
message.error('上传图片格式不对!')
|
||||
return false
|
||||
}
|
||||
// 校验大小
|
||||
const isLt = file.size / 1024 / 1024 < 2
|
||||
if (!isLt) {
|
||||
message.error('上传图片大小不能超过 2M!')
|
||||
return false
|
||||
}
|
||||
uploadData.accountId = objDataRef.accountId
|
||||
return true
|
||||
}
|
||||
const beforeVideoUpload = (file) => {
|
||||
// 校验格式
|
||||
const isType = file.type === 'video/mp4'
|
||||
if (!isType) {
|
||||
message.error('上传视频格式不对!')
|
||||
return false
|
||||
}
|
||||
// 校验大小
|
||||
const isLt = file.size / 1024 / 1024 < 10
|
||||
if (!isLt) {
|
||||
message.error('上传视频大小不能超过 10M!')
|
||||
return false
|
||||
}
|
||||
uploadData.accountId = objDataRef.accountId
|
||||
return true
|
||||
}
|
||||
const handleUploadSuccess = (response) => {
|
||||
if (response.code !== 0) {
|
||||
message.error('上传出错：' + response.msg)
|
||||
return false
|
||||
}
|
||||
|
||||
// 清空上传时的各种数据
|
||||
fileList.value = []
|
||||
uploadData.title = ''
|
||||
uploadData.introduction = ''
|
||||
|
||||
// 上传好的文件，本质是个素材，所以可以进行选中
|
||||
let item = response.data
|
||||
selectMaterial(item)
|
||||
}
|
||||
/**
|
||||
* 切换消息类型的 tab
|
||||
*
|
||||
* @param tab tab 没用 暂时删了tab
|
||||
*/
|
||||
const handleClick = () => {
|
||||
// 设置后续文件上传的文件类型
|
||||
uploadData.type = objDataRef.type
|
||||
if (uploadData.type === 'music') {
|
||||
// 【音乐】上传的是缩略图
|
||||
uploadData.type = 'thumb'
|
||||
}
|
||||
|
||||
// 从 tempObj 临时缓存中，获取对应的数据，并设置回 objDataRef
|
||||
let tempObjItem = tempObj.get(objDataRef.type)
|
||||
if (tempObjItem) {
|
||||
objDataRef.content = tempObjItem.content ? tempObjItem.content : null
|
||||
objDataRef.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
|
||||
objDataRef.url = tempObjItem.url ? tempObjItem.url : null
|
||||
objDataRef.name = tempObjItem.url ? tempObjItem.name : null
|
||||
objDataRef.title = tempObjItem.title ? tempObjItem.title : null
|
||||
objDataRef.description = tempObjItem.description ? tempObjItem.description : null
|
||||
return
|
||||
}
|
||||
// 如果获取不到，需要把 objDataRef 复原
|
||||
// 必须使用 $set 赋值，不然 input 无法输入内容
|
||||
objDataRef.content = ''
|
||||
objDataRef.mediaId = ''
|
||||
objDataRef.url = ''
|
||||
objDataRef.title = ''
|
||||
objDataRef.description = ''
|
||||
}
|
||||
/**
|
||||
* 选择素材，将设置设置到 objDataRef 变量
|
||||
*
|
||||
* @param item 素材
|
||||
*/
|
||||
const selectMaterial = (item) => {
|
||||
// 选择好素材，所以隐藏弹窗
|
||||
closeMaterial()
|
||||
|
||||
// 创建 tempObjItem 对象，并设置对应的值
|
||||
let tempObjItem = {
|
||||
type: '',
|
||||
articles: [],
|
||||
thumbMediaId: '',
|
||||
thumbMediaUrl: '',
|
||||
introduction: '',
|
||||
title: '',
|
||||
musicUrl: '',
|
||||
hqMusicUrl: '',
|
||||
mediaId: '',
|
||||
url: '',
|
||||
name: '',
|
||||
description: ''
|
||||
}
|
||||
tempObjItem.type = objDataRef.type
|
||||
if (objDataRef.type === 'news') {
|
||||
tempObjItem.articles = item.content.newsItem
|
||||
objDataRef.articles = item.content.newsItem
|
||||
} else if (objDataRef.type === 'music') {
|
||||
// 音乐需要特殊处理，因为选择的是图片的缩略图
|
||||
tempObjItem.thumbMediaId = item.mediaId
|
||||
objDataRef.thumbMediaId = item.mediaId
|
||||
tempObjItem.thumbMediaUrl = item.url
|
||||
objDataRef.thumbMediaUrl = item.url
|
||||
// title、introduction、musicUrl、hqMusicUrl：从 objDataRef 到 tempObjItem，避免上传素材后，被覆盖掉
|
||||
tempObjItem.title = objDataRef.title || ''
|
||||
tempObjItem.introduction = objDataRef.introduction || ''
|
||||
tempObjItem.musicUrl = objDataRef.musicUrl || ''
|
||||
tempObjItem.hqMusicUrl = objDataRef.hqMusicUrl || ''
|
||||
} else if (objDataRef.type === 'image' || objDataRef.type === 'voice') {
|
||||
tempObjItem.mediaId = item.mediaId
|
||||
objDataRef.mediaId = item.mediaId
|
||||
tempObjItem.url = item.url
|
||||
objDataRef.url = item.url
|
||||
tempObjItem.name = item.name
|
||||
objDataRef.name = item.name
|
||||
} else if (objDataRef.type === 'video') {
|
||||
tempObjItem.mediaId = item.mediaId
|
||||
objDataRef.mediaId = item.mediaId
|
||||
tempObjItem.url = item.url
|
||||
objDataRef.url = item.url
|
||||
tempObjItem.name = item.name
|
||||
objDataRef.name = item.name
|
||||
// title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
|
||||
if (item.title) {
|
||||
objDataRef.title = item.title || ''
|
||||
tempObjItem.title = item.title || ''
|
||||
}
|
||||
if (item.introduction) {
|
||||
objDataRef.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
|
||||
tempObjItem.description = item.introduction || ''
|
||||
}
|
||||
} else if (objDataRef.type === 'text') {
|
||||
objDataRef.content = item.content || ''
|
||||
}
|
||||
// 最终设置到临时缓存
|
||||
tempObj.set(objDataRef.type, tempObjItem)
|
||||
}
|
||||
const openMaterial = () => {
|
||||
if (objDataRef.type === 'news') {
|
||||
dialogNewsVisible.value = true
|
||||
} else if (objDataRef.type === 'image') {
|
||||
dialogImageVisible.value = true
|
||||
} else if (objDataRef.type === 'voice') {
|
||||
dialogVoiceVisible.value = true
|
||||
} else if (objDataRef.type === 'video') {
|
||||
dialogVideoVisible.value = true
|
||||
} else if (objDataRef.type === 'music') {
|
||||
dialogThumbVisible.value = true
|
||||
}
|
||||
}
|
||||
const closeMaterial = () => {
|
||||
dialogNewsVisible.value = false
|
||||
dialogImageVisible.value = false
|
||||
dialogVoiceVisible.value = false
|
||||
dialogVideoVisible.value = false
|
||||
dialogThumbVisible.value = false
|
||||
}
|
||||
const deleteObj = () => {
|
||||
if (objDataRef.type === 'news') {
|
||||
objDataRef.articles = []
|
||||
} else if (objDataRef.type === 'image') {
|
||||
objDataRef.mediaId = null
|
||||
objDataRef.url = null
|
||||
objDataRef.name = null
|
||||
} else if (objDataRef.type === 'voice') {
|
||||
objDataRef.mediaId = null
|
||||
objDataRef.url = null
|
||||
objDataRef.name = null
|
||||
} else if (objDataRef.type === 'video') {
|
||||
objDataRef.mediaId = null
|
||||
objDataRef.url = null
|
||||
objDataRef.name = null
|
||||
objDataRef.title = null
|
||||
objDataRef.description = null
|
||||
} else if (objDataRef.type === 'music') {
|
||||
objDataRef.thumbMediaId = null
|
||||
objDataRef.thumbMediaUrl = null
|
||||
objDataRef.title = null
|
||||
objDataRef.description = null
|
||||
objDataRef.musicUrl = null
|
||||
objDataRef.hqMusicUrl = null
|
||||
} else if (objDataRef.type === 'text') {
|
||||
objDataRef.content = null
|
||||
}
|
||||
// 覆盖缓存
|
||||
tempObj.set(objDataRef.type, Object.assign({}, objDataRef))
|
||||
}
|
||||
/**
|
||||
* 输入时，缓存每次 objDataRef 到 tempObj 中
|
||||
*
|
||||
* why？不确定为什么 v-model="objDataRef.content" 不能自动缓存，所以通过这样的方式
|
||||
*/
|
||||
const inputContent = () => {
|
||||
// 覆盖缓存
|
||||
tempObj.set(objDataRef.type, Object.assign({}, objDataRef))
|
||||
}
|
||||
return {
|
||||
inputContent,
|
||||
dialogNewsVisible,
|
||||
deleteObj,
|
||||
openMaterial,
|
||||
handleClick,
|
||||
beforeImageUpload,
|
||||
beforeVoiceUpload,
|
||||
handleUploadSuccess,
|
||||
beforeVideoUpload,
|
||||
selectMaterial,
|
||||
dialogImageVisible,
|
||||
dialogVoiceVisible,
|
||||
dialogThumbVisible,
|
||||
actionUrl,
|
||||
objDataRef,
|
||||
headers,
|
||||
fileList,
|
||||
beforeThumbImageUpload,
|
||||
uploadData,
|
||||
dialogVideoVisible
|
||||
}
|
||||
newsType: {
|
||||
// 图文类型：1、已发布图文；2、草稿箱图文
|
||||
type: String,
|
||||
default: '1'
|
||||
}
|
||||
})
|
||||
|
||||
const objData = reactive(props.objData)
|
||||
const message = useMessage() // 消息弹窗
|
||||
const tempObj = new Map().set(objData.type, Object.assign({}, objData))
|
||||
|
||||
// ========== 素材选择的弹窗，是否可见 ==========
|
||||
type DialogName = 'news' | 'image' | 'voice' | 'video' | 'thumb'
|
||||
type DialogState = {
|
||||
[prop in DialogName]: boolean
|
||||
}
|
||||
const dialogState: DialogState = reactive({
|
||||
news: false,
|
||||
image: false,
|
||||
voice: false,
|
||||
video: false,
|
||||
thumb: false
|
||||
})
|
||||
|
||||
// ========== 文件上传（图片、语音、视频） ==========
|
||||
const fileList = ref([])
|
||||
const uploadData = reactive({
|
||||
accountId: objData.accountId,
|
||||
type: objData.type,
|
||||
title: '',
|
||||
introduction: ''
|
||||
})
|
||||
|
||||
const UPLOAD_URL = import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary'
|
||||
const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
|
||||
|
||||
const beforeImageUpload = (rawFile: UploadRawFile) =>
|
||||
useBeforeUpload(MaterialType.Image, 2)(rawFile)
|
||||
const beforeVoiceUpload = (rawFile: UploadRawFile) =>
|
||||
useBeforeUpload(MaterialType.Voice, 10)(rawFile)
|
||||
const beforeVideoUpload = (rawFile: UploadRawFile) =>
|
||||
useBeforeUpload(MaterialType.Video, 10)(rawFile)
|
||||
|
||||
const onUploadSuccess = (res: any) => {
|
||||
if (res.code !== 0) {
|
||||
message.error('上传出错：' + res.msg)
|
||||
return false
|
||||
}
|
||||
|
||||
// 清空上传时的各种数据
|
||||
fileList.value = []
|
||||
uploadData.title = ''
|
||||
uploadData.introduction = ''
|
||||
|
||||
// 上传好的文件，本质是个素材，所以可以进行选中
|
||||
selectMaterial(res.data)
|
||||
}
|
||||
|
||||
/**
|
||||
* 切换消息类型的 tab
|
||||
*
|
||||
* @param tab tab 没用 暂时删了tab
|
||||
*/
|
||||
const handleClick = () => {
|
||||
// 设置后续文件上传的文件类型
|
||||
uploadData.type = objData.type
|
||||
if (uploadData.type === 'music') {
|
||||
// 【音乐】上传的是缩略图
|
||||
uploadData.type = 'thumb'
|
||||
}
|
||||
|
||||
// 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData
|
||||
let tempObjItem = tempObj.get(objData.type)
|
||||
if (tempObjItem) {
|
||||
objData.content = tempObjItem.content ? tempObjItem.content : null
|
||||
objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
|
||||
objData.url = tempObjItem.url ? tempObjItem.url : null
|
||||
objData.name = tempObjItem.url ? tempObjItem.name : null
|
||||
objData.title = tempObjItem.title ? tempObjItem.title : null
|
||||
objData.description = tempObjItem.description ? tempObjItem.description : null
|
||||
return
|
||||
}
|
||||
// 如果获取不到，需要把 objData 复原
|
||||
// 必须使用 $set 赋值，不然 input 无法输入内容
|
||||
objData.content = ''
|
||||
objData.mediaId = ''
|
||||
objData.url = ''
|
||||
objData.title = ''
|
||||
objData.description = ''
|
||||
}
|
||||
|
||||
/**
|
||||
* 选择素材，将设置设置到 objData 变量
|
||||
*
|
||||
* @param item 素材
|
||||
*/
|
||||
const selectMaterial = (item) => {
|
||||
// 选择好素材，所以隐藏弹窗
|
||||
closeMaterial()
|
||||
|
||||
// 创建 tempObjItem 对象，并设置对应的值
|
||||
let tempObjItem = {
|
||||
type: '',
|
||||
articles: [],
|
||||
thumbMediaId: '',
|
||||
thumbMediaUrl: '',
|
||||
introduction: '',
|
||||
title: '',
|
||||
musicUrl: '',
|
||||
hqMusicUrl: '',
|
||||
mediaId: '',
|
||||
url: '',
|
||||
name: '',
|
||||
description: ''
|
||||
}
|
||||
tempObjItem.type = objData.type
|
||||
if (objData.type === 'news') {
|
||||
tempObjItem.articles = item.content.newsItem
|
||||
objData.articles = item.content.newsItem
|
||||
} else if (objData.type === 'music') {
|
||||
// 音乐需要特殊处理，因为选择的是图片的缩略图
|
||||
tempObjItem.thumbMediaId = item.mediaId
|
||||
objData.thumbMediaId = item.mediaId
|
||||
tempObjItem.thumbMediaUrl = item.url
|
||||
objData.thumbMediaUrl = item.url
|
||||
// title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉
|
||||
tempObjItem.title = objData.title || ''
|
||||
tempObjItem.introduction = objData.introduction || ''
|
||||
tempObjItem.musicUrl = objData.musicUrl || ''
|
||||
tempObjItem.hqMusicUrl = objData.hqMusicUrl || ''
|
||||
} else if (objData.type === 'image' || objData.type === 'voice') {
|
||||
tempObjItem.mediaId = item.mediaId
|
||||
objData.mediaId = item.mediaId
|
||||
tempObjItem.url = item.url
|
||||
objData.url = item.url
|
||||
tempObjItem.name = item.name
|
||||
objData.name = item.name
|
||||
} else if (objData.type === 'video') {
|
||||
tempObjItem.mediaId = item.mediaId
|
||||
objData.mediaId = item.mediaId
|
||||
tempObjItem.url = item.url
|
||||
objData.url = item.url
|
||||
tempObjItem.name = item.name
|
||||
objData.name = item.name
|
||||
// title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
|
||||
if (item.title) {
|
||||
objData.title = item.title || ''
|
||||
tempObjItem.title = item.title || ''
|
||||
}
|
||||
if (item.introduction) {
|
||||
objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
|
||||
tempObjItem.description = item.introduction || ''
|
||||
}
|
||||
} else if (objData.type === 'text') {
|
||||
objData.content = item.content || ''
|
||||
}
|
||||
// 最终设置到临时缓存
|
||||
tempObj.set(objData.type, tempObjItem)
|
||||
}
|
||||
|
||||
const openMaterial = () => {
|
||||
// if (objData.type === 'news') {
|
||||
// dialogNewsVisible.value = true
|
||||
// } else if (objData.type === 'image') {
|
||||
// dialogImageVisible.value = true
|
||||
// } else if (objData.type === 'voice') {
|
||||
// dialogVoiceVisible.value = true
|
||||
// } else if (objData.type === 'video') {
|
||||
// dialogVideoVisible.value = true
|
||||
// } else if (objData.type === 'music') {
|
||||
// dialogThumbVisible.value = true
|
||||
// }
|
||||
dialogState[objData.type] = true
|
||||
}
|
||||
|
||||
const closeMaterial = () => {
|
||||
// dialogNewsVisible.value = false
|
||||
// dialogImageVisible.value = false
|
||||
// dialogVoiceVisible.value = false
|
||||
// dialogVideoVisible.value = false
|
||||
// dialogThumbVisible.value = false
|
||||
for (const key of ['news', 'image', 'voice', 'video', 'thumb']) {
|
||||
dialogState[key] = false
|
||||
}
|
||||
}
|
||||
|
||||
const deleteObj = () => {
|
||||
if (objData.type === 'news') {
|
||||
objData.articles = []
|
||||
} else if (objData.type === 'image') {
|
||||
objData.mediaId = null
|
||||
objData.url = null
|
||||
objData.name = null
|
||||
} else if (objData.type === 'voice') {
|
||||
objData.mediaId = null
|
||||
objData.url = null
|
||||
objData.name = null
|
||||
} else if (objData.type === 'video') {
|
||||
objData.mediaId = null
|
||||
objData.url = null
|
||||
objData.name = null
|
||||
objData.title = null
|
||||
objData.description = null
|
||||
} else if (objData.type === 'music') {
|
||||
objData.thumbMediaId = null
|
||||
objData.thumbMediaUrl = null
|
||||
objData.title = null
|
||||
objData.description = null
|
||||
objData.musicUrl = null
|
||||
objData.hqMusicUrl = null
|
||||
} else if (objData.type === 'text') {
|
||||
objData.content = null
|
||||
}
|
||||
// 覆盖缓存
|
||||
tempObj.set(objData.type, Object.assign({}, objData))
|
||||
}
|
||||
|
||||
/**
|
||||
* 输入时，缓存每次 objData 到 tempObj 中
|
||||
*
|
||||
* why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式
|
||||
*/
|
||||
const inputContent = () => {
|
||||
// 覆盖缓存
|
||||
tempObj.set(objData.type, Object.assign({}, objData))
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
|
||||
50
src/views/mp/hooks/useUpload.ts
Normal file
50
src/views/mp/hooks/useUpload.ts
Normal file
@ -0,0 +1,50 @@
|
||||
import type { UploadRawFile } from 'element-plus'
|
||||
|
||||
const message = useMessage() // 消息
|
||||
|
||||
enum MaterialType {
|
||||
Image = 'image',
|
||||
Voice = 'voice',
|
||||
Video = 'video'
|
||||
}
|
||||
|
||||
const useBeforeUpload = (type: MaterialType, maxSizeMB: number) => {
|
||||
const fn = (rawFile: UploadRawFile): boolean => {
|
||||
let allowTypes: string[] = []
|
||||
let name = ''
|
||||
|
||||
switch (type) {
|
||||
case MaterialType.Image:
|
||||
allowTypes = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg']
|
||||
maxSizeMB = 2
|
||||
name = '图片'
|
||||
break
|
||||
case MaterialType.Voice:
|
||||
allowTypes = ['audio/mp3', 'audio/mpeg', 'audio/wma', 'audio/wav', 'audio/amr']
|
||||
maxSizeMB = 2
|
||||
name = '语音'
|
||||
break
|
||||
case MaterialType.Video:
|
||||
allowTypes = ['video/mp4']
|
||||
maxSizeMB = 10
|
||||
name = '视频'
|
||||
break
|
||||
}
|
||||
// 格式不正确
|
||||
if (!allowTypes.includes(rawFile.type)) {
|
||||
message.error(`上传${name}格式不对!`)
|
||||
return false
|
||||
}
|
||||
// 大小不正确
|
||||
if (rawFile.size / 1024 / 1024 > maxSizeMB) {
|
||||
message.error(`上传${name}大小不能超过${maxSizeMB}M!`)
|
||||
return false
|
||||
}
|
||||
|
||||
return true
|
||||
}
|
||||
|
||||
return fn
|
||||
}
|
||||
|
||||
export { MaterialType, useBeforeUpload }
|
||||
Loading…
Reference in New Issue
Block a user