refactor: mp模块,一个大大的重构+fix
This commit is contained in:
@ -1,12 +1,9 @@
|
||||
<template>
|
||||
<el-tab-pane name="image">
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:picture" class="mr-5px" /> 图片</el-row>
|
||||
</template>
|
||||
<div>
|
||||
<!-- 情况一:已经选择好素材、或者上传好图片 -->
|
||||
<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>
|
||||
<div class="select-item" v-if="reply.url">
|
||||
<img class="material-img" :src="reply.url" />
|
||||
<p class="item-name" v-if="reply.name">{{ reply.name }}</p>
|
||||
<el-row class="ope-row" justify="center">
|
||||
<el-button type="danger" circle @click="onDelete">
|
||||
<Icon icon="ep:delete" />
|
||||
@ -27,7 +24,11 @@
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
|
||||
<WxMaterialSelect
|
||||
type="image"
|
||||
:account-id="reply.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
<!-- 文件上传 -->
|
||||
@ -51,27 +52,27 @@
|
||||
</el-upload>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
|
||||
import { MaterialType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
|
||||
import WxMaterialSelect from '@/views/mp/components/wx-material-select'
|
||||
import { UploadType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
|
||||
import type { UploadRawFile } from 'element-plus'
|
||||
import { getAccessToken } from '@/utils/auth'
|
||||
import { ObjData } from './types'
|
||||
import { Reply } from './types'
|
||||
const message = useMessage()
|
||||
|
||||
const UPLOAD_URL = import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary'
|
||||
const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: ObjData
|
||||
modelValue: Reply
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: ObjData)
|
||||
(e: 'update:modelValue', v: Reply)
|
||||
}>()
|
||||
const objData = computed<ObjData>({
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
@ -79,14 +80,13 @@ const objData = computed<ObjData>({
|
||||
const showDialog = ref(false)
|
||||
const fileList = ref([])
|
||||
const uploadData = reactive({
|
||||
accountId: objData.value.accountId,
|
||||
accountId: reply.value.accountId,
|
||||
type: 'image',
|
||||
title: '',
|
||||
introduction: ''
|
||||
})
|
||||
|
||||
const beforeImageUpload = (rawFile: UploadRawFile) =>
|
||||
useBeforeUpload(MaterialType.Image, 2)(rawFile)
|
||||
const beforeImageUpload = (rawFile: UploadRawFile) => useBeforeUpload(UploadType.Image, 2)(rawFile)
|
||||
|
||||
const onUploadSuccess = (res: any) => {
|
||||
if (res.code !== 0) {
|
||||
@ -104,18 +104,18 @@ const onUploadSuccess = (res: any) => {
|
||||
}
|
||||
|
||||
const onDelete = () => {
|
||||
objData.value.mediaId = null
|
||||
objData.value.url = null
|
||||
objData.value.name = null
|
||||
reply.value.mediaId = null
|
||||
reply.value.url = null
|
||||
reply.value.name = null
|
||||
}
|
||||
|
||||
const selectMaterial = (item) => {
|
||||
showDialog.value = false
|
||||
|
||||
objData.value.type = 'image'
|
||||
objData.value.mediaId = item.mediaId
|
||||
objData.value.url = item.url
|
||||
objData.value.name = item.name
|
||||
// reply.value.type = 'image'
|
||||
reply.value.mediaId = item.mediaId
|
||||
reply.value.url = item.url
|
||||
reply.value.name = item.name
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,14 +1,11 @@
|
||||
<template>
|
||||
<el-tab-pane name="music">
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:service" />音乐</el-row>
|
||||
</template>
|
||||
<div>
|
||||
<el-row align="middle" justify="center">
|
||||
<el-col :span="6">
|
||||
<el-row align="middle" justify="center" class="thumb-div">
|
||||
<el-col :span="24">
|
||||
<el-row align="middle" justify="center">
|
||||
<img style="width: 100px" v-if="objData.thumbMediaUrl" :src="objData.thumbMediaUrl" />
|
||||
<img style="width: 100px" v-if="reply.thumbMediaUrl" :src="reply.thumbMediaUrl" />
|
||||
<icon v-else icon="ep:plus" />
|
||||
</el-row>
|
||||
<el-row align="middle" justify="center" style="margin-top: 2%">
|
||||
@ -42,30 +39,31 @@
|
||||
destroy-on-close
|
||||
>
|
||||
<WxMaterialSelect
|
||||
:objData="{ type: 'image', accountId: objData.accountId }"
|
||||
type="image"
|
||||
:account-id="reply.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
<el-col :span="18">
|
||||
<el-input v-model="objData.title" placeholder="请输入标题" />
|
||||
<el-input v-model="reply.title" placeholder="请输入标题" />
|
||||
<div style="margin: 20px 0"></div>
|
||||
<el-input v-model="objData.description" placeholder="请输入描述" />
|
||||
<el-input v-model="reply.description" placeholder="请输入描述" />
|
||||
</el-col>
|
||||
</el-row>
|
||||
<div style="margin: 20px 0"></div>
|
||||
<el-input v-model="objData.musicUrl" placeholder="请输入音乐链接" />
|
||||
<el-input v-model="reply.musicUrl" placeholder="请输入音乐链接" />
|
||||
<div style="margin: 20px 0"></div>
|
||||
<el-input v-model="objData.hqMusicUrl" placeholder="请输入高质量音乐链接" />
|
||||
</el-tab-pane>
|
||||
<el-input v-model="reply.hqMusicUrl" placeholder="请输入高质量音乐链接" />
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
|
||||
import WxMaterialSelect from '@/views/mp/components/wx-material-select'
|
||||
import type { UploadRawFile } from 'element-plus'
|
||||
import { MaterialType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
|
||||
import { UploadType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
|
||||
import { getAccessToken } from '@/utils/auth'
|
||||
import { ObjData } from './types'
|
||||
import { Reply } from './types'
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
@ -73,12 +71,12 @@ const UPLOAD_URL = import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/u
|
||||
const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: ObjData
|
||||
modelValue: Reply
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: ObjData)
|
||||
(e: 'update:modelValue', v: Reply)
|
||||
}>()
|
||||
const objData = computed<ObjData>({
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
@ -86,14 +84,13 @@ const objData = computed<ObjData>({
|
||||
const showDialog = ref(false)
|
||||
const fileList = ref([])
|
||||
const uploadData = reactive({
|
||||
accountId: objData.value.accountId,
|
||||
accountId: reply.value.accountId,
|
||||
type: 'thumb', // 音乐类型为thumb
|
||||
title: '',
|
||||
introduction: ''
|
||||
})
|
||||
|
||||
const beforeImageUpload = (rawFile: UploadRawFile) =>
|
||||
useBeforeUpload(MaterialType.Image, 2)(rawFile)
|
||||
const beforeImageUpload = (rawFile: UploadRawFile) => useBeforeUpload(UploadType.Image, 2)(rawFile)
|
||||
|
||||
const onUploadSuccess = (res: any) => {
|
||||
if (res.code !== 0) {
|
||||
@ -113,7 +110,7 @@ const onUploadSuccess = (res: any) => {
|
||||
const selectMaterial = (item: any) => {
|
||||
showDialog.value = false
|
||||
|
||||
objData.value.thumbMediaId = item.mediaId
|
||||
objData.value.thumbMediaUrl = item.url
|
||||
reply.value.thumbMediaId = item.mediaId
|
||||
reply.value.thumbMediaUrl = item.url
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,11 +1,8 @@
|
||||
<template>
|
||||
<el-tab-pane name="news">
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:reading" /> 图文</el-row>
|
||||
</template>
|
||||
<div>
|
||||
<el-row>
|
||||
<div class="select-item" v-if="objData.articles?.length > 0">
|
||||
<WxNews :articles="objData.articles" />
|
||||
<div class="select-item" v-if="reply.articles && reply.articles.length > 0">
|
||||
<WxNews :articles="reply.articles" />
|
||||
<el-col class="ope-row">
|
||||
<el-button type="danger" circle @click="onDelete">
|
||||
<Icon icon="ep:delete" />
|
||||
@ -13,7 +10,7 @@
|
||||
</el-col>
|
||||
</div>
|
||||
<!-- 选择素材 -->
|
||||
<el-col :span="24" v-if="!objData.content">
|
||||
<el-col :span="24" v-if="!reply.content">
|
||||
<el-row style="text-align: center" align="middle">
|
||||
<el-col :span="24">
|
||||
<el-button type="success" @click="showDialog = true">
|
||||
@ -25,28 +22,29 @@
|
||||
</el-col>
|
||||
<el-dialog title="选择图文" v-model="showDialog" width="90%" append-to-body destroy-on-close>
|
||||
<WxMaterialSelect
|
||||
:objData="objData"
|
||||
@select-material="selectMaterial"
|
||||
type="news"
|
||||
:account-id="reply.accountId"
|
||||
:newsType="newsType"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</el-dialog>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import WxNews from '@/views/mp/components/wx-news/main.vue'
|
||||
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
|
||||
import { ObjData, NewsType } from './types'
|
||||
import WxNews from '@/views/mp/components/wx-news'
|
||||
import WxMaterialSelect from '@/views/mp/components/wx-material-select'
|
||||
import { Reply, NewsType } from './types'
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: ObjData
|
||||
modelValue: Reply
|
||||
newsType: NewsType
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: ObjData)
|
||||
(e: 'update:modelValue', v: Reply)
|
||||
}>()
|
||||
const objData = computed<ObjData>({
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
@ -55,11 +53,11 @@ const showDialog = ref(false)
|
||||
|
||||
const selectMaterial = (item: any) => {
|
||||
showDialog.value = false
|
||||
objData.value.articles = item.content.newsItem
|
||||
reply.value.articles = item.content.newsItem
|
||||
}
|
||||
|
||||
const onDelete = () => {
|
||||
objData.value.articles = []
|
||||
reply.value.articles = []
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,15 +1,10 @@
|
||||
<template>
|
||||
<el-tab-pane name="text">
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:document" /> 文本</el-row>
|
||||
</template>
|
||||
<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="content" />
|
||||
</el-tab-pane>
|
||||
<el-input type="textarea" :rows="5" placeholder="请输入内容" v-model="content" />
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
const props = defineProps<{
|
||||
modelValue: string | null
|
||||
modelValue?: string | null
|
||||
}>()
|
||||
|
||||
const emit = defineEmits<{
|
||||
@ -17,7 +12,7 @@ const emit = defineEmits<{
|
||||
(e: 'input', v: string | null)
|
||||
}>()
|
||||
|
||||
const content = computed<string | null>({
|
||||
const content = computed<string | null | undefined>({
|
||||
get: () => props.modelValue,
|
||||
set: (val: string | null) => {
|
||||
emit('update:modelValue', val)
|
||||
|
||||
@ -1,17 +1,10 @@
|
||||
<template>
|
||||
<el-tab-pane name="video">
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:share" /> 视频</el-row>
|
||||
</template>
|
||||
<div>
|
||||
<el-row>
|
||||
<el-input v-model="objData.title" class="input-margin-bottom" placeholder="请输入标题" />
|
||||
<el-input
|
||||
class="input-margin-bottom"
|
||||
v-model="objData.description"
|
||||
placeholder="请输入描述"
|
||||
/>
|
||||
<el-input v-model="reply.title" class="input-margin-bottom" placeholder="请输入标题" />
|
||||
<el-input class="input-margin-bottom" v-model="reply.description" placeholder="请输入描述" />
|
||||
<el-row class="ope-row" justify="center">
|
||||
<WxVideoPlayer v-if="objData.url" :url="objData.url" />
|
||||
<WxVideoPlayer v-if="reply.url" :url="reply.url" />
|
||||
</el-row>
|
||||
<el-col>
|
||||
<el-row style="text-align: center" align="middle">
|
||||
@ -27,7 +20,11 @@
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
|
||||
<WxMaterialSelect
|
||||
type="video"
|
||||
:account-id="reply.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
<!-- 文件上传 -->
|
||||
@ -48,16 +45,16 @@
|
||||
</el-row>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts">
|
||||
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
|
||||
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
|
||||
import WxVideoPlayer from '@/views/mp/components/wx-video-play'
|
||||
import WxMaterialSelect from '@/views/mp/components/wx-material-select'
|
||||
import type { UploadRawFile } from 'element-plus'
|
||||
import { MaterialType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
|
||||
import { UploadType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
|
||||
import { getAccessToken } from '@/utils/auth'
|
||||
import { ObjData } from './types'
|
||||
import { Reply } from './types'
|
||||
|
||||
const message = useMessage()
|
||||
|
||||
@ -65,12 +62,12 @@ const UPLOAD_URL = import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/u
|
||||
const HEADERS = { Authorization: 'Bearer ' + getAccessToken() }
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: ObjData
|
||||
modelValue: Reply
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: ObjData)
|
||||
(e: 'update:modelValue', v: Reply)
|
||||
}>()
|
||||
const objData = computed<ObjData>({
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
@ -78,14 +75,13 @@ const objData = computed<ObjData>({
|
||||
const showDialog = ref(false)
|
||||
const fileList = ref([])
|
||||
const uploadData = reactive({
|
||||
accountId: objData.value.accountId,
|
||||
accountId: reply.value.accountId,
|
||||
type: 'video',
|
||||
title: '',
|
||||
introduction: ''
|
||||
})
|
||||
|
||||
const beforeVideoUpload = (rawFile: UploadRawFile) =>
|
||||
useBeforeUpload(MaterialType.Video, 10)(rawFile)
|
||||
const beforeVideoUpload = (rawFile: UploadRawFile) => useBeforeUpload(UploadType.Video, 10)(rawFile)
|
||||
|
||||
const onUploadSuccess = (res: any) => {
|
||||
if (res.code !== 0) {
|
||||
@ -105,16 +101,16 @@ const onUploadSuccess = (res: any) => {
|
||||
const selectMaterial = (item: any) => {
|
||||
showDialog.value = false
|
||||
|
||||
objData.value.mediaId = item.mediaId
|
||||
objData.value.url = item.url
|
||||
objData.value.name = item.name
|
||||
reply.value.mediaId = item.mediaId
|
||||
reply.value.url = item.url
|
||||
reply.value.name = item.name
|
||||
|
||||
// title、introduction:从 item 到 tempObjItem,因为素材里有 title、introduction
|
||||
if (item.title) {
|
||||
objData.value.title = item.title || ''
|
||||
reply.value.title = item.title || ''
|
||||
}
|
||||
if (item.introduction) {
|
||||
objData.value.description = item.introduction || ''
|
||||
reply.value.description = item.introduction || ''
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
@ -1,12 +1,9 @@
|
||||
<template>
|
||||
<el-tab-pane name="voice">
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:phone" /> 语音</el-row>
|
||||
</template>
|
||||
<div class="select-item2" v-if="objData.url">
|
||||
<p class="item-name">{{ objData.name }}</p>
|
||||
<div>
|
||||
<div class="select-item2" v-if="reply.url">
|
||||
<p class="item-name">{{ reply.name }}</p>
|
||||
<el-row class="ope-row" justify="center">
|
||||
<WxVoicePlayer :url="objData.url" />
|
||||
<WxVoicePlayer :url="reply.url" />
|
||||
</el-row>
|
||||
<el-row class="ope-row" justify="center">
|
||||
<el-button type="danger" circle @click="onDelete"><Icon icon="ep:delete" /></el-button>
|
||||
@ -25,7 +22,11 @@
|
||||
append-to-body
|
||||
destroy-on-close
|
||||
>
|
||||
<WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
|
||||
<WxMaterialSelect
|
||||
type="voice"
|
||||
:account-id="reply.accountId"
|
||||
@select-material="selectMaterial"
|
||||
/>
|
||||
</el-dialog>
|
||||
</el-col>
|
||||
<!-- 文件上传 -->
|
||||
@ -49,27 +50,27 @@
|
||||
</el-upload>
|
||||
</el-col>
|
||||
</el-row>
|
||||
</el-tab-pane>
|
||||
</div>
|
||||
</template>
|
||||
<script setup lang="ts">
|
||||
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
|
||||
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
|
||||
import { MaterialType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
|
||||
import WxMaterialSelect from '@/views/mp/components/wx-material-select'
|
||||
import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
|
||||
import { UploadType, useBeforeUpload } from '@/views/mp/hooks/useUpload'
|
||||
import type { UploadRawFile } from 'element-plus'
|
||||
import { getAccessToken } from '@/utils/auth'
|
||||
import { ObjData } from './types'
|
||||
import { Reply } from './types'
|
||||
const message = useMessage()
|
||||
|
||||
const UPLOAD_URL = import.meta.env.VITE_API_BASEPATH + '/admin-api/mp/material/upload-temporary'
|
||||
const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
|
||||
|
||||
const props = defineProps<{
|
||||
modelValue: ObjData
|
||||
modelValue: Reply
|
||||
}>()
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: ObjData)
|
||||
(e: 'update:modelValue', v: Reply)
|
||||
}>()
|
||||
const objData = computed<ObjData>({
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
@ -77,14 +78,13 @@ const objData = computed<ObjData>({
|
||||
const showDialog = ref(false)
|
||||
const fileList = ref([])
|
||||
const uploadData = reactive({
|
||||
accountId: objData.value.accountId,
|
||||
accountId: reply.value.accountId,
|
||||
type: 'voice',
|
||||
title: '',
|
||||
introduction: ''
|
||||
})
|
||||
|
||||
const beforeVoiceUpload = (rawFile: UploadRawFile) =>
|
||||
useBeforeUpload(MaterialType.Voice, 10)(rawFile)
|
||||
const beforeVoiceUpload = (rawFile: UploadRawFile) => useBeforeUpload(UploadType.Voice, 10)(rawFile)
|
||||
|
||||
const onUploadSuccess = (res: any) => {
|
||||
if (res.code !== 0) {
|
||||
@ -102,18 +102,18 @@ const onUploadSuccess = (res: any) => {
|
||||
}
|
||||
|
||||
const onDelete = () => {
|
||||
objData.value.mediaId = null
|
||||
objData.value.url = null
|
||||
objData.value.name = null
|
||||
reply.value.mediaId = null
|
||||
reply.value.url = null
|
||||
reply.value.name = null
|
||||
}
|
||||
|
||||
const selectMaterial = (item: ObjData) => {
|
||||
const selectMaterial = (item: Reply) => {
|
||||
showDialog.value = false
|
||||
|
||||
objData.value.type = 'voice'
|
||||
objData.value.mediaId = item.mediaId
|
||||
objData.value.url = item.url
|
||||
objData.value.name = item.name
|
||||
// reply.value.type = ReplyType.Voice
|
||||
reply.value.mediaId = item.mediaId
|
||||
reply.value.url = item.url
|
||||
reply.value.name = item.name
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
@ -1,25 +1,54 @@
|
||||
type ReplyType = '' | 'news' | 'image' | 'voice' | 'video' | 'music' | 'text'
|
||||
enum ReplyType {
|
||||
News = 'news',
|
||||
Image = 'image',
|
||||
Voice = 'voice',
|
||||
Video = 'video',
|
||||
Music = 'music',
|
||||
Text = 'text'
|
||||
}
|
||||
|
||||
interface ObjData {
|
||||
interface _Reply {
|
||||
accountId: number
|
||||
type: ReplyType
|
||||
name: string | null
|
||||
content: string | null
|
||||
mediaId: string | null
|
||||
url: string | null
|
||||
title: string | null
|
||||
description: string | null
|
||||
thumbMediaId: string | null
|
||||
thumbMediaUrl: string | null
|
||||
musicUrl: string | null
|
||||
hqMusicUrl: string | null
|
||||
introduction: string | null
|
||||
articles: any[]
|
||||
name?: string | null
|
||||
content?: string | null
|
||||
mediaId?: string | null
|
||||
url?: string | null
|
||||
title?: string | null
|
||||
description?: string | null
|
||||
thumbMediaId?: string | null
|
||||
thumbMediaUrl?: string | null
|
||||
musicUrl?: string | null
|
||||
hqMusicUrl?: string | null
|
||||
introduction?: string | null
|
||||
articles?: any[]
|
||||
}
|
||||
|
||||
type Reply = _Reply //Partial<_Reply>
|
||||
|
||||
enum NewsType {
|
||||
Published = '1',
|
||||
Draft = '2'
|
||||
}
|
||||
|
||||
export { ObjData, NewsType }
|
||||
/** 利用旧的reply[accountId, type]初始化新的Reply */
|
||||
const createEmptyReply = (old: Reply | Ref<Reply>): Reply => {
|
||||
return {
|
||||
accountId: unref(old).accountId,
|
||||
type: unref(old).type,
|
||||
name: null,
|
||||
content: null,
|
||||
mediaId: null,
|
||||
url: null,
|
||||
title: null,
|
||||
description: null,
|
||||
thumbMediaId: null,
|
||||
thumbMediaUrl: null,
|
||||
musicUrl: null,
|
||||
hqMusicUrl: null,
|
||||
introduction: null,
|
||||
articles: []
|
||||
}
|
||||
}
|
||||
|
||||
export { Reply, NewsType, ReplyType, createEmptyReply }
|
||||
|
||||
7
src/views/mp/components/wx-reply/index.ts
Normal file
7
src/views/mp/components/wx-reply/index.ts
Normal file
@ -0,0 +1,7 @@
|
||||
import { Reply, NewsType, ReplyType, createEmptyReply } from './components/types'
|
||||
|
||||
import WxReplySelect from './main.vue'
|
||||
|
||||
export type { Reply }
|
||||
export { createEmptyReply, NewsType, ReplyType }
|
||||
export default WxReplySelect
|
||||
@ -8,24 +8,59 @@
|
||||
④ 支持发送【视频】消息时,支持新建视频
|
||||
-->
|
||||
<template>
|
||||
<el-tabs type="border-card" v-model="objData.type" @tab-click="onTabClick">
|
||||
<el-tabs type="border-card" v-model="currentTab">
|
||||
<!-- 类型 1:文本 -->
|
||||
<TabText v-model="objData.content" />
|
||||
<el-tab-pane :name="ReplyType.Text">
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:document" /> 文本</el-row>
|
||||
</template>
|
||||
<TabText v-model="reply.content" />
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 类型 2:图片 -->
|
||||
<TabImage v-model="objData" />
|
||||
<el-tab-pane :name="ReplyType.Image">
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:picture" class="mr-5px" /> 图片</el-row>
|
||||
</template>
|
||||
<TabImage v-model="reply" />
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 类型 3:语音 -->
|
||||
<TabVoice v-model="objData" />
|
||||
<el-tab-pane :name="ReplyType.Voice">
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:phone" /> 语音</el-row>
|
||||
</template>
|
||||
<TabVoice v-model="reply" />
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 类型 4:视频 -->
|
||||
<TabVideo v-model="objData" />
|
||||
<el-tab-pane :name="ReplyType.Video">
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:share" /> 视频</el-row>
|
||||
</template>
|
||||
<TabVideo v-model="reply" />
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 类型 5:图文 -->
|
||||
<TabNews v-model="objData" :news-type="newsType" />
|
||||
<el-tab-pane :name="ReplyType.News">
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:reading" /> 图文</el-row>
|
||||
</template>
|
||||
<TabNews v-model="reply" :news-type="newsType" />
|
||||
</el-tab-pane>
|
||||
|
||||
<!-- 类型 6:音乐 -->
|
||||
<TabMusic v-model="objData" />
|
||||
<el-tab-pane :name="ReplyType.Music">
|
||||
<template #label>
|
||||
<el-row align="middle"><Icon icon="ep:service" />音乐</el-row>
|
||||
</template>
|
||||
<TabMusic v-model="reply" />
|
||||
</el-tab-pane>
|
||||
</el-tabs>
|
||||
</template>
|
||||
|
||||
<script setup lang="ts" name="WxReplySelect">
|
||||
import { ObjData, NewsType } from './components/types'
|
||||
import { Reply, NewsType, ReplyType, createEmptyReply } from './components/types'
|
||||
import TabText from './components/TabText.vue'
|
||||
import TabImage from './components/TabImage.vue'
|
||||
import TabVoice from './components/TabVoice.vue'
|
||||
@ -34,30 +69,54 @@ import TabNews from './components/TabNews.vue'
|
||||
import TabMusic from './components/TabMusic.vue'
|
||||
|
||||
interface Props {
|
||||
objData: ObjData
|
||||
modelValue: Reply
|
||||
newsType?: NewsType
|
||||
}
|
||||
const props = withDefaults(defineProps<Props>(), {
|
||||
newsType: () => NewsType.Published
|
||||
})
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: Reply)
|
||||
}>()
|
||||
|
||||
const objData = reactive(props.objData)
|
||||
// TODO @Dhb52:Tab 切换的时候,应该表单还保留着;清除只有两个时机:1)发送成功后;2)关闭窗口后;我捉摸,是不是每个 TabXXX 组件,是个独立的 Form,然后有自己的对象,不粘在 objData 一起。这样最终就是 MusicMessageForm、ImageMessageForm
|
||||
// const tempObj = new Map().set(objData.type, Object.assign({}, objData))
|
||||
const reply = computed<Reply>({
|
||||
get: () => props.modelValue,
|
||||
set: (val) => emit('update:modelValue', val)
|
||||
})
|
||||
// 作为多个标签保存各自Reply的缓存
|
||||
const objCache = new Map<ReplyType, Reply>()
|
||||
// 采用独立的ref来保存当前tab,避免在watch标签变化,对reply进行赋值会产生了循环调用
|
||||
const currentTab = ref<ReplyType>(props.modelValue.type || ReplyType.Text)
|
||||
|
||||
/** 切换消息类型的 tab */
|
||||
const onTabClick = () => {
|
||||
clear()
|
||||
}
|
||||
watch(
|
||||
currentTab,
|
||||
(newTab, oldTab) => {
|
||||
// 第一次进入:oldTab 为 undefined
|
||||
// 判断 newTab 是因为 Reply 为 Partial
|
||||
if (oldTab === undefined || newTab === undefined) {
|
||||
return
|
||||
}
|
||||
|
||||
/** 清除除了`type`的字段 */
|
||||
objCache.set(oldTab, unref(reply))
|
||||
|
||||
// 从缓存里面取出新tab内容,有则覆盖Reply,没有则创建空Reply
|
||||
const temp = objCache.get(newTab)
|
||||
if (temp) {
|
||||
reply.value = temp
|
||||
} else {
|
||||
let newData = createEmptyReply(reply)
|
||||
newData.type = newTab
|
||||
reply.value = newData
|
||||
}
|
||||
},
|
||||
{
|
||||
immediate: true
|
||||
}
|
||||
)
|
||||
|
||||
/** 清除除了`type`, `accountId`的字段 */
|
||||
const clear = () => {
|
||||
objData.content = ''
|
||||
objData.mediaId = ''
|
||||
objData.url = ''
|
||||
objData.title = ''
|
||||
objData.description = ''
|
||||
objData.articles = []
|
||||
reply.value = createEmptyReply(reply)
|
||||
}
|
||||
|
||||
defineExpose({
|
||||
|
||||
Reference in New Issue
Block a user