Skip to content

phsl / admin

Go to a project
Commit 39d8ecbf by dhb52
Options

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

parent c27be373
Showing with 249 additions and 287 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,51 +241,40 @@ ...@@ -241,51 +241,40 @@
</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,
WxMaterialSelect,
WxVoicePlayer,
WxVideoPlayer
},
props: {
objData: { objData: {
// 消息对象。 // 消息对象。
type: Object, // 设置为 Object 的原因，方便属性的传递 type: Object, // 设置为 Object 的原因，方便属性的传递
...@@ -296,109 +285,47 @@ export default defineComponent({ ...@@ -296,109 +285,47 @@ export default defineComponent({
type: String, type: String,
default: '1' default: '1'
} }
}, })
setup(props) {
const objDataRef = reactive(props.objData) const objData = reactive(props.objData)
const message = useMessage() // 消息弹窗 const message = useMessage() // 消息弹窗
const tempObj = new Map().set(objDataRef.type, Object.assign({}, objDataRef)) const tempObj = new Map().set(objData.type, Object.assign({}, objData))
// ========== 素材选择的弹窗，是否可见 ==========
const dialogNewsVisible = ref(false) // 图文 // ========== 素材选择的弹窗，是否可见 ==========
const dialogImageVisible = ref(false) // 图片 type DialogName = 'news' | 'image' | 'voice' | 'video' | 'thumb'
const dialogVoiceVisible = ref(false) // 语音 type DialogState = {
const dialogVideoVisible = ref(false) // 视频 [prop in DialogName]: boolean
const dialogThumbVisible = ref(false) // 缩略图 }
// ========== 文件上传（图片、语音、视频） ========== const dialogState: DialogState = reactive({
const fileList = ref([]) news: false,
const uploadData = reactive({ image: false,
accountId: undefined, voice: false,
type: objDataRef.type, video: false,
thumb: false
})
// ========== 文件上传（图片、语音、视频） ==========
const fileList = ref([])
const uploadData = reactive({
accountId: objData.accountId,
type: objData.type,
title: '', title: '',
introduction: '' introduction: ''
}) })
const actionUrl = ref(
import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary' const UPLOAD_URL = import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary'
) const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
const headers = ref({ Authorization: 'Bearer ' + getAccessToken() }) // 设置上传的请求头部
const beforeThumbImageUpload = (file) => { const beforeImageUpload = (rawFile: UploadRawFile) =>
const isType = useBeforeUpload(MaterialType.Image, 2)(rawFile)
file.type === 'image/jpeg' || const beforeVoiceUpload = (rawFile: UploadRawFile) =>
file.type === 'image/png' || useBeforeUpload(MaterialType.Voice, 10)(rawFile)
file.type === 'image/gif' || const beforeVideoUpload = (rawFile: UploadRawFile) =>
file.type === 'image/bmp' || useBeforeUpload(MaterialType.Video, 10)(rawFile)
file.type === 'image/jpg'
if (!isType) { const onUploadSuccess = (res: any) => {
message.error('上传图片格式不对!') if (res.code !== 0) {
return false message.error('上传出错：' + res.msg)
}
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 return false
} }
...@@ -408,47 +335,48 @@ export default defineComponent({ ...@@ -408,47 +335,48 @@ export default defineComponent({
uploadData.introduction = '' uploadData.introduction = ''
// 上传好的文件，本质是个素材，所以可以进行选中 // 上传好的文件，本质是个素材，所以可以进行选中
let item = response.data selectMaterial(res.data)
selectMaterial(item) }
}
/** /**
* 切换消息类型的 tab * 切换消息类型的 tab
* *
* @param tab tab 没用 暂时删了tab * @param tab tab 没用 暂时删了tab
*/ */
const handleClick = () => { const handleClick = () => {
// 设置后续文件上传的文件类型 // 设置后续文件上传的文件类型
uploadData.type = objDataRef.type uploadData.type = objData.type
if (uploadData.type === 'music') { if (uploadData.type === 'music') {
// 【音乐】上传的是缩略图 // 【音乐】上传的是缩略图
uploadData.type = 'thumb' uploadData.type = 'thumb'
} }
// 从 tempObj 临时缓存中，获取对应的数据，并设置回 objDataRef // 从 tempObj 临时缓存中，获取对应的数据，并设置回 objData
let tempObjItem = tempObj.get(objDataRef.type) let tempObjItem = tempObj.get(objData.type)
if (tempObjItem) { if (tempObjItem) {
objDataRef.content = tempObjItem.content ? tempObjItem.content : null objData.content = tempObjItem.content ? tempObjItem.content : null
objDataRef.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null objData.mediaId = tempObjItem.mediaId ? tempObjItem.mediaId : null
objDataRef.url = tempObjItem.url ? tempObjItem.url : null objData.url = tempObjItem.url ? tempObjItem.url : null
objDataRef.name = tempObjItem.url ? tempObjItem.name : null objData.name = tempObjItem.url ? tempObjItem.name : null
objDataRef.title = tempObjItem.title ? tempObjItem.title : null objData.title = tempObjItem.title ? tempObjItem.title : null
objDataRef.description = tempObjItem.description ? tempObjItem.description : null objData.description = tempObjItem.description ? tempObjItem.description : null
return return
} }
// 如果获取不到，需要把 objDataRef 复原 // 如果获取不到，需要把 objData 复原
// 必须使用 $set 赋值，不然 input 无法输入内容 // 必须使用 $set 赋值，不然 input 无法输入内容
objDataRef.content = '' objData.content = ''
objDataRef.mediaId = '' objData.mediaId = ''
objDataRef.url = '' objData.url = ''
objDataRef.title = '' objData.title = ''
objDataRef.description = '' objData.description = ''
} }
/**
* 选择素材，将设置设置到 objDataRef 变量 /**
* 选择素材，将设置设置到 objData 变量
* *
* @param item 素材 * @param item 素材
*/ */
const selectMaterial = (item) => { const selectMaterial = (item) => {
// 选择好素材，所以隐藏弹窗 // 选择好素材，所以隐藏弹窗
closeMaterial() closeMaterial()
...@@ -467,133 +395,117 @@ export default defineComponent({ ...@@ -467,133 +395,117 @@ export default defineComponent({
name: '', name: '',
description: '' description: ''
} }
tempObjItem.type = objDataRef.type tempObjItem.type = objData.type
if (objDataRef.type === 'news') { if (objData.type === 'news') {
tempObjItem.articles = item.content.newsItem tempObjItem.articles = item.content.newsItem
objDataRef.articles = item.content.newsItem objData.articles = item.content.newsItem
} else if (objDataRef.type === 'music') { } else if (objData.type === 'music') {
// 音乐需要特殊处理，因为选择的是图片的缩略图 // 音乐需要特殊处理，因为选择的是图片的缩略图
tempObjItem.thumbMediaId = item.mediaId tempObjItem.thumbMediaId = item.mediaId
objDataRef.thumbMediaId = item.mediaId objData.thumbMediaId = item.mediaId
tempObjItem.thumbMediaUrl = item.url tempObjItem.thumbMediaUrl = item.url
objDataRef.thumbMediaUrl = item.url objData.thumbMediaUrl = item.url
// title、introduction、musicUrl、hqMusicUrl：从 objDataRef 到 tempObjItem，避免上传素材后，被覆盖掉 // title、introduction、musicUrl、hqMusicUrl：从 objData 到 tempObjItem，避免上传素材后，被覆盖掉
tempObjItem.title = objDataRef.title || '' tempObjItem.title = objData.title || ''
tempObjItem.introduction = objDataRef.introduction || '' tempObjItem.introduction = objData.introduction || ''
tempObjItem.musicUrl = objDataRef.musicUrl || '' tempObjItem.musicUrl = objData.musicUrl || ''
tempObjItem.hqMusicUrl = objDataRef.hqMusicUrl || '' tempObjItem.hqMusicUrl = objData.hqMusicUrl || ''
} else if (objDataRef.type === 'image' || objDataRef.type === 'voice') { } else if (objData.type === 'image' || objData.type === 'voice') {
tempObjItem.mediaId = item.mediaId tempObjItem.mediaId = item.mediaId
objDataRef.mediaId = item.mediaId objData.mediaId = item.mediaId
tempObjItem.url = item.url tempObjItem.url = item.url
objDataRef.url = item.url objData.url = item.url
tempObjItem.name = item.name tempObjItem.name = item.name
objDataRef.name = item.name objData.name = item.name
} else if (objDataRef.type === 'video') { } else if (objData.type === 'video') {
tempObjItem.mediaId = item.mediaId tempObjItem.mediaId = item.mediaId
objDataRef.mediaId = item.mediaId objData.mediaId = item.mediaId
tempObjItem.url = item.url tempObjItem.url = item.url
objDataRef.url = item.url objData.url = item.url
tempObjItem.name = item.name tempObjItem.name = item.name
objDataRef.name = item.name objData.name = item.name
// title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction // title、introduction：从 item 到 tempObjItem，因为素材里有 title、introduction
if (item.title) { if (item.title) {
objDataRef.title = item.title || '' objData.title = item.title || ''
tempObjItem.title = item.title || '' tempObjItem.title = item.title || ''
} }
if (item.introduction) { if (item.introduction) {
objDataRef.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下 objData.description = item.introduction || '' // 消息使用的是 description，素材使用的是 introduction，所以转换下
tempObjItem.description = item.introduction || '' tempObjItem.description = item.introduction || ''
} }
} else if (objDataRef.type === 'text') { } else if (objData.type === 'text') {
objDataRef.content = item.content || '' objData.content = item.content || ''
} }
// 最终设置到临时缓存 // 最终设置到临时缓存
tempObj.set(objDataRef.type, tempObjItem) tempObj.set(objData.type, tempObjItem)
} }
const openMaterial = () => {
if (objDataRef.type === 'news') { const openMaterial = () => {
dialogNewsVisible.value = true // if (objData.type === 'news') {
} else if (objDataRef.type === 'image') { // dialogNewsVisible.value = true
dialogImageVisible.value = true // } else if (objData.type === 'image') {
} else if (objDataRef.type === 'voice') { // dialogImageVisible.value = true
dialogVoiceVisible.value = true // } else if (objData.type === 'voice') {
} else if (objDataRef.type === 'video') { // dialogVoiceVisible.value = true
dialogVideoVisible.value = true // } else if (objData.type === 'video') {
} else if (objDataRef.type === 'music') { // dialogVideoVisible.value = true
dialogThumbVisible.value = true // } else if (objData.type === 'music') {
} // dialogThumbVisible.value = true
} // }
const closeMaterial = () => { dialogState[objData.type] = true
dialogNewsVisible.value = false }
dialogImageVisible.value = false
dialogVoiceVisible.value = false const closeMaterial = () => {
dialogVideoVisible.value = false // dialogNewsVisible.value = false
dialogThumbVisible.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 (objDataRef.type === 'news') {
objDataRef.articles = [] const deleteObj = () => {
} else if (objDataRef.type === 'image') { if (objData.type === 'news') {
objDataRef.mediaId = null objData.articles = []
objDataRef.url = null } else if (objData.type === 'image') {
objDataRef.name = null objData.mediaId = null
} else if (objDataRef.type === 'voice') { objData.url = null
objDataRef.mediaId = null objData.name = null
objDataRef.url = null } else if (objData.type === 'voice') {
objDataRef.name = null objData.mediaId = null
} else if (objDataRef.type === 'video') { objData.url = null
objDataRef.mediaId = null objData.name = null
objDataRef.url = null } else if (objData.type === 'video') {
objDataRef.name = null objData.mediaId = null
objDataRef.title = null objData.url = null
objDataRef.description = null objData.name = null
} else if (objDataRef.type === 'music') { objData.title = null
objDataRef.thumbMediaId = null objData.description = null
objDataRef.thumbMediaUrl = null } else if (objData.type === 'music') {
objDataRef.title = null objData.thumbMediaId = null
objDataRef.description = null objData.thumbMediaUrl = null
objDataRef.musicUrl = null objData.title = null
objDataRef.hqMusicUrl = null objData.description = null
} else if (objDataRef.type === 'text') { objData.musicUrl = null
objDataRef.content = null objData.hqMusicUrl = null
} else if (objData.type === 'text') {
objData.content = null
} }
// 覆盖缓存 // 覆盖缓存
tempObj.set(objDataRef.type, Object.assign({}, objDataRef)) tempObj.set(objData.type, Object.assign({}, objData))
} }
/**
* 输入时，缓存每次 objDataRef 到 tempObj 中 /**
* 输入时，缓存每次 objData 到 tempObj 中
* *
* why？不确定为什么 v-model="objDataRef.content" 不能自动缓存，所以通过这样的方式 * why？不确定为什么 v-model="objData.content" 不能自动缓存，所以通过这样的方式
*/ */
const inputContent = () => { const inputContent = () => {
// 覆盖缓存 // 覆盖缓存
tempObj.set(objDataRef.type, Object.assign({}, objDataRef)) tempObj.set(objData.type, Object.assign({}, objData))
} }
return {
inputContent,
dialogNewsVisible,
deleteObj,
openMaterial,
handleClick,
beforeImageUpload,
beforeVoiceUpload,
handleUploadSuccess,
beforeVideoUpload,
selectMaterial,
dialogImageVisible,
dialogVoiceVisible,
dialogThumbVisible,
actionUrl,
objDataRef,
headers,
fileList,
beforeThumbImageUpload,
uploadData,
dialogVideoVisible
}
}
})
</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