fix: 修复WxReply、WxMaterialSelect组件bug

This commit is contained in:
dhb52 2023-04-08 10:13:22 +08:00
parent cf68b1e91d
commit 42a9715ff2
2 changed files with 139 additions and 134 deletions

View File

@ -5,127 +5,130 @@
移除 avue 组件使用 ElementUI 原生组件 移除 avue 组件使用 ElementUI 原生组件
--> -->
<template> <template>
<!-- 类型图片 --> <div class="pb-30px">
<div v-if="objData.type === 'image'"> <!-- 类型image -->
<div class="waterfall" v-loading="loading"> <div v-if="objData.type === 'image'">
<div class="waterfall-item" v-for="item in list" :key="item.mediaId"> <div class="waterfall" v-loading="loading">
<img class="material-img" :src="item.url" /> <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
<p class="item-name">{{ item.name }}</p> <img class="material-img" :src="item.url" />
<el-row class="ope-row"> <p class="item-name">{{ item.name }}</p>
<el-button type="success" @click="selectMaterialFun(item)"
>选择
<i class="el-icon-circle-check el-icon--right"></i>
</el-button>
</el-row>
</div>
</div>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
/>
</div>
<!-- 类型语音 -->
<div v-else-if="objData.type === 'voice'">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" />
<el-table-column label="语音" align="center">
<template #default="scope">
<wx-voice-player :url="scope.row.url" />
</template>
</el-table-column>
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
>选择
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getPage"
/>
</div>
<div v-else-if="objData.type === 'video'">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" />
<el-table-column label="标题" align="center" prop="title" />
<el-table-column label="介绍" align="center" prop="introduction" />
<el-table-column label="视频" align="center">
<template #default="scope">
<wx-video-player :url="scope.row.url" />
</template>
</el-table-column>
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
>选择
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
/>
</div>
<div v-else-if="objData.type === 'news'">
<div class="waterfall" v-loading="loading">
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
<div v-if="item.content && item.content.newsItem">
<wx-news :articles="item.content.newsItem" />
<el-row class="ope-row"> <el-row class="ope-row">
<el-button type="success" @click="selectMaterialFun(item)"> <el-button type="success" @click="selectMaterialFun(item)"
选择<i class="el-icon-circle-check el-icon--right"></i> >选择 <Icon icon="ep:circle-check" />
</el-button> </el-button>
</el-row> </el-row>
</div> </div>
</div> </div>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
/>
</div>
<!-- 类型voice -->
<div v-else-if="objData.type === 'voice'">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" />
<el-table-column label="语音" align="center">
<template #default="scope">
<WxVoicePlayer :url="scope.row.url" />
</template>
</el-table-column>
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button type="text" @click="selectMaterialFun(scope.row)"
>选择<Icon icon="ep:plus" />
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getPage"
/>
</div>
<!-- 类型video -->
<div v-else-if="objData.type === 'video'">
<!-- 列表 -->
<el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" />
<el-table-column label="标题" align="center" prop="title" />
<el-table-column label="介绍" align="center" prop="introduction" />
<el-table-column label="视频" align="center">
<template #default="scope">
<WxVideoPlayer :url="scope.row.url" />
</template>
</el-table-column>
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
<template #default="scope">
<span>{{ formatDate(scope.row.createTime) }}</span>
</template>
</el-table-column>
<el-table-column
label="操作"
align="center"
fixed="right"
class-name="small-padding fixed-width"
>
<template #default="scope">
<el-button type="text" @click="selectMaterialFun(scope.row)"
>选择<Icon icon="akar-icons:circle-plus" />
</el-button>
</template>
</el-table-column>
</el-table>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
/>
</div>
<!-- 类型news -->
<div v-else-if="objData.type === 'news'">
<div class="waterfall" v-loading="loading">
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
<div v-if="item.content && item.content.newsItem">
<WxNews :articles="item.content.newsItem" />
<el-row class="ope-row">
<el-button type="success" @click="selectMaterialFun(item)">
选择<Icon icon="ep:circle-check" />
</el-button>
</el-row>
</div>
</div>
</div>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
/>
</div> </div>
<!-- 分页组件 -->
<pagination
v-show="total > 0"
:total="total"
v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize"
@pagination="getMaterialPageFun"
/>
</div> </div>
</template> </template>
@ -173,7 +176,7 @@ export default defineComponent({
const newsTypeRef = ref(props.newsType) const newsTypeRef = ref(props.newsType)
const selectMaterialFun = (item) => { const selectMaterialFun = (item) => {
ctx.emit('selectMaterial', item) ctx.emit('select-material', item)
} }
/** 搜索按钮操作 */ /** 搜索按钮操作 */
const handleQuery = () => { const handleQuery = () => {
@ -203,9 +206,10 @@ export default defineComponent({
total.value = data.total total.value = data.total
loading.value = false loading.value = false
} }
const getFreePublishPageFun = async () => { const getFreePublishPageFun = async () => {
let data = await getFreePublishPage(queryParams) let data = await getFreePublishPage(queryParams)
data.list.foreach((item) => { data.list.forEach((item) => {
const newsItem = item.content.newsItem const newsItem = item.content.newsItem
newsItem.forEach((article) => { newsItem.forEach((article) => {
article.picUrl = article.thumbUrl article.picUrl = article.thumbUrl
@ -232,6 +236,7 @@ export default defineComponent({
onMounted(async () => { onMounted(async () => {
getPage() getPage()
}) })
return { return {
handleQuery, handleQuery,
dateFormatter, dateFormatter,

View File

@ -37,7 +37,7 @@
<div class="select-item" v-if="objDataRef.url"> <div class="select-item" v-if="objDataRef.url">
<img class="material-img" :src="objDataRef.url" /> <img class="material-img" :src="objDataRef.url" />
<p class="item-name" v-if="objDataRef.name">{{ objDataRef.name }}</p> <p class="item-name" v-if="objDataRef.name">{{ objDataRef.name }}</p>
<el-row class="ope-row"> <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" />
</el-button> </el-button>
@ -52,7 +52,7 @@
<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="dialogImageVisible" width="90%" append-to-body>
<wx-material-select :obj-data="objDataRef" @selectMaterial="selectMaterial" /> <WxMaterialSelect :obj-data="objDataRef" @select-material="selectMaterial" />
</el-dialog> </el-dialog>
</el-col> </el-col>
<!-- 文件上传 --> <!-- 文件上传 -->
@ -91,20 +91,20 @@
<div class="select-item2" v-if="objDataRef.url"> <div class="select-item2" v-if="objDataRef.url">
<p class="item-name">{{ objDataRef.name }}</p> <p class="item-name">{{ objDataRef.name }}</p>
<div class="item-infos"> <div class="item-infos">
<wx-voice-player :url="objDataRef.url" /> <WxVoicePlayer :url="objDataRef.url" />
</div> </div>
<el-row class="ope-row"> <el-row class="ope-row" justify="center">
<el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" /> <el-button type="danger" circle @click="deleteObj"><Icon icon="ep:delete" /></el-button>
</el-row> </el-row>
</div> </div>
<el-row v-else style="text-align: center"> <el-row v-else style="text-align: center">
<!-- 选择素材 --> <!-- 选择素材 -->
<el-col :span="12" class="col-select"> <el-col :span="12" class="col-select">
<el-button type="success" @click="openMaterial"> <el-button type="success" @click="openMaterial">
素材库选择<i class="el-icon-circle-check el-icon--right"></i> 素材库选择<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="dialogVoiceVisible" width="90%" append-to-body>
<WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" /> <WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
</el-dialog> </el-dialog>
</el-col> </el-col>
<!-- 文件上传 --> <!-- 文件上传 -->
@ -151,7 +151,7 @@
@input="inputContent" @input="inputContent"
/> />
<div style="text-align: center"> <div style="text-align: center">
<wx-video-player v-if="objDataRef.url" :url="objDataRef.url" /> <WxVideoPlayer v-if="objDataRef.url" :url="objDataRef.url" />
</div> </div>
<el-col> <el-col>
<el-row style="text-align: center" align="middle"> <el-row style="text-align: center" align="middle">
@ -162,7 +162,7 @@
<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="dialogVideoVisible" width="90%" append-to-body>
<wx-material-select :objData="objDataRef" @selectMaterial="selectMaterial" /> <WxMaterialSelect :objData="objDataRef" @select-material="selectMaterial" />
</el-dialog> </el-dialog>
</el-col> </el-col>
<!-- 文件上传 --> <!-- 文件上传 -->
@ -196,8 +196,8 @@
</el-row> </el-row>
</template> </template>
<el-row> <el-row>
<div class="select-item" v-if="objDataRef.articles.size > 0"> <div class="select-item" v-if="objDataRef.articles?.length > 0">
<wx-news :articles="objDataRef.articles" /> <WxNews :articles="objDataRef.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" />
@ -216,9 +216,9 @@
</el-row> </el-row>
</el-col> </el-col>
<el-dialog title="选择图文" v-model="dialogNewsVisible" width="90%" append-to-body> <el-dialog title="选择图文" v-model="dialogNewsVisible" width="90%" append-to-body>
<wx-material-select <WxMaterialSelect
:objData="objDataRef" :objData="objDataRef"
@selectMaterial="selectMaterial" @select-material="selectMaterial"
:newsType="newsType" :newsType="newsType"
/> />
</el-dialog> </el-dialog>
@ -268,9 +268,9 @@
</el-col> </el-col>
</el-row> </el-row>
<el-dialog title="选择图片" v-model="dialogThumbVisible" width="80%" append-to-body> <el-dialog title="选择图片" v-model="dialogThumbVisible" width="80%" append-to-body>
<wx-material-select <WxMaterialSelect
:objData="{ type: 'image', accountId: objDataRef.accountId }" :objData="{ type: 'image', accountId: objDataRef.accountId }"
@selectMaterial="selectMaterial" @select-material="selectMaterial"
/> />
</el-dialog> </el-dialog>
</el-col> </el-col>
@ -482,7 +482,7 @@ export default defineComponent({
// tempObjItem // tempObjItem
let tempObjItem = { let tempObjItem = {
type: '', type: '',
articles: '', articles: [],
thumbMediaId: '', thumbMediaId: '',
thumbMediaUrl: '', thumbMediaUrl: '',
introduction: '', introduction: '',
@ -560,7 +560,7 @@ export default defineComponent({
} }
const deleteObj = () => { const deleteObj = () => {
if (objDataRef.type === 'news') { if (objDataRef.type === 'news') {
objDataRef.articles = '' objDataRef.articles = []
} else if (objDataRef.type === 'image') { } else if (objDataRef.type === 'image') {
objDataRef.mediaId = null objDataRef.mediaId = null
objDataRef.url = null objDataRef.url = null