Skip to content

phsl / admin

Go to a project
Commit 39d8ecbf by dhb52
Options

refactor: MP/wx-reply组件，抽离useUpload钩子

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