root/ludu-admin-vue3
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

微调微信公众号的回复和素材选择的排版

Browse Source
This commit is contained in:
shizhong 2023-06-13 11:55:41 +08:00
parent 1f6da4eb06
commit adc5bdae2e
2 changed files with 41 additions and 81 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

55
src/views/mp/components/wx-material-select/main.vue
View File

@ -13,15 +13,14 @@
<img class="material-img" :src="item.url" /> <img class="material-img" :src="item.url" />
<p class="item-name">{{ item.name }}</p> <p class="item-name">{{ item.name }}</p>
<el-row class="ope-row"> <el-row class="ope-row">
<el-button type="success" @click="selectMaterialFun(item)" <el-button type="success" @click="selectMaterialFun(item)">
>选择 <Icon icon="ep:circle-check" /> 选择 <Icon icon="ep:circle-check" />
</el-button> </el-button>
</el-row> </el-row>
</div> </div>
</div> </div>
<!-- 分页组件 --> <!-- 分页组件 -->
<pagination <Pagination
v-show="total > 0"
:total="total" :total="total"
v-model:page="queryParams.pageNo" v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize" v-model:limit="queryParams.pageSize"
@ -30,7 +29,6 @@
</div> </div>
<!-- 类型：voice --> <!-- 类型：voice -->
<div v-else-if="objData.type === 'voice'"> <div v-else-if="objData.type === 'voice'">
<!-- 列表 -->
<el-table v-loading="loading" :data="list"> <el-table v-loading="loading" :data="list">
<el-table-column label="编号" align="center" prop="mediaId" /> <el-table-column label="编号" align="center" prop="mediaId" />
<el-table-column label="文件名" align="center" prop="name" /> <el-table-column label="文件名" align="center" prop="name" />
@ -39,27 +37,23 @@
<WxVoicePlayer :url="scope.row.url" /> <WxVoicePlayer :url="scope.row.url" />
</template> </template>
</el-table-column> </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 <el-table-column
label="操作" label="上传时间"
align="center" align="center"
fixed="right" prop="createTime"
class-name="small-padding fixed-width" width="180"
> :formatter="dateFormatter"
/>
<el-table-column label="操作" align="center" fixed="right">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="selectMaterialFun(scope.row)" <el-button type="text" @click="selectMaterialFun(scope.row)">
>选择<Icon icon="ep:plus" /> 选择 <Icon icon="ep:plus" />
</el-button> </el-button>
</template> </template>
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 分页组件 --> <!-- 分页组件 -->
<pagination <Pagination
v-show="total > 0"
:total="total" :total="total"
v-model:page="queryParams.pageNo" v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize" v-model:limit="queryParams.pageSize"
@ -79,17 +73,14 @@
<WxVideoPlayer :url="scope.row.url" /> <WxVideoPlayer :url="scope.row.url" />
</template> </template>
</el-table-column> </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 <el-table-column
label="操作" label="上传时间"
align="center" align="center"
fixed="right" prop="createTime"
class-name="small-padding fixed-width" width="180"
> :formatter="dateFormatter"
/>
<el-table-column label="操作" align="center">
<template #default="scope"> <template #default="scope">
<el-button type="text" @click="selectMaterialFun(scope.row)" <el-button type="text" @click="selectMaterialFun(scope.row)"
>选择<Icon icon="akar-icons:circle-plus" /> >选择<Icon icon="akar-icons:circle-plus" />
@ -98,8 +89,7 @@
</el-table-column> </el-table-column>
</el-table> </el-table>
<!-- 分页组件 --> <!-- 分页组件 -->
<pagination <Pagination
v-show="total > 0"
:total="total" :total="total"
v-model:page="queryParams.pageNo" v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize" v-model:limit="queryParams.pageSize"
@ -121,8 +111,7 @@
</div> </div>
</div> </div>
<!-- 分页组件 --> <!-- 分页组件 -->
<pagination <Pagination
v-show="total > 0"
:total="total" :total="total"
v-model:page="queryParams.pageNo" v-model:page="queryParams.pageNo"
v-model:limit="queryParams.pageSize" v-model:limit="queryParams.pageSize"
@ -131,7 +120,6 @@
</div> </div>
</div> </div>
</template> </template>
<script lang="ts" name="WxMaterialSelect"> <script lang="ts" name="WxMaterialSelect">
import WxNews from '@/views/mp/components/wx-news/main.vue' import WxNews from '@/views/mp/components/wx-news/main.vue'
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue' import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
@ -139,7 +127,7 @@ import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
import { getMaterialPage } from '@/api/mp/material' import { getMaterialPage } from '@/api/mp/material'
import { getFreePublishPage } from '@/api/mp/freePublish' import { getFreePublishPage } from '@/api/mp/freePublish'
import { getDraftPage } from '@/api/mp/draft' import { getDraftPage } from '@/api/mp/draft'
import { dateFormatter, formatDate } from '@/utils/formatTime' import { dateFormatter } from '@/utils/formatTime'
import { defineComponent, PropType } from 'vue' import { defineComponent, PropType } from 'vue'
export default defineComponent({ export default defineComponent({
@ -243,7 +231,6 @@ export default defineComponent({
selectMaterialFun, selectMaterialFun,
getMaterialPageFun, getMaterialPageFun,
getPage, getPage,
formatDate,
newsTypeRef, newsTypeRef,
queryParams, queryParams,
objDataRef, objDataRef,

65
src/views/mp/components/wx-reply/main.vue
View File

@ -12,10 +12,7 @@
<!-- 类型 1：文本 --> <!-- 类型 1：文本 -->
<el-tab-pane name="text"> <el-tab-pane name="text">
<template #label> <template #label>
<el-row align="middle"> <el-row align="middle"><Icon icon="ep:document" /> 文本</el-row>
<icon icon="ep:document" />
文本
</el-row>
</template> </template>
<el-input <el-input
type="textarea" type="textarea"
@ -28,10 +25,7 @@
<!-- 类型 2：图片 --> <!-- 类型 2：图片 -->
<el-tab-pane name="image"> <el-tab-pane name="image">
<template #label> <template #label>
<el-row align="middle"> <el-row align="middle"><Icon icon="ep:picture" class="mr-5px" /> 图片</el-row>
<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="objDataRef.url">
@ -39,7 +33,7 @@
<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" 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" />
</el-button> </el-button>
</el-row> </el-row>
</div> </div>
@ -48,8 +42,7 @@
<!-- 选择素材 --> <!-- 选择素材 -->
<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">
素材库选择 素材库选择 <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>
<WxMaterialSelect :obj-data="objDataRef" @select-material="selectMaterial" /> <WxMaterialSelect :obj-data="objDataRef" @select-material="selectMaterial" />
@ -70,10 +63,8 @@
<el-button type="primary">上传图片</el-button> <el-button type="primary">上传图片</el-button>
<template #tip> <template #tip>
<span> <span>
<div class="el-upload__tip" <div class="el-upload__tip">支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div>
>支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div </span>
></span
>
</template> </template>
</el-upload> </el-upload>
</el-col> </el-col>
@ -82,12 +73,8 @@
<!-- 类型 3：语音 --> <!-- 类型 3：语音 -->
<el-tab-pane name="voice"> <el-tab-pane name="voice">
<template #label> <template #label>
<el-row align="middle"> <el-row align="middle"><Icon icon="ep:phone" /> 语音</el-row>
<icon icon="ep:phone" />
语音
</el-row>
</template> </template>
<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">
@ -121,8 +108,8 @@
> >
<el-button type="primary">点击上传</el-button> <el-button type="primary">点击上传</el-button>
<template #tip> <template #tip>
<div class="el-upload__tip" <div class="el-upload__tip">
>格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s 格式支持 mp3/wma/wav/amr，文件大小不超过 2M，播放长度不超过 60s
</div> </div>
</template> </template>
</el-upload> </el-upload>
@ -132,10 +119,7 @@
<!-- 类型 4：视频 --> <!-- 类型 4：视频 -->
<el-tab-pane name="video"> <el-tab-pane name="video">
<template #label> <template #label>
<el-row align="middle"> <el-row align="middle"><Icon icon="ep:share" /> 视频</el-row>
<icon icon="ep:share" />
视频
</el-row>
</template> </template>
<el-row> <el-row>
<el-input <el-input
@ -158,8 +142,7 @@
<!-- 选择素材 --> <!-- 选择素材 -->
<el-col :span="12"> <el-col :span="12">
<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="dialogVideoVisible" width="90%" append-to-body>
<WxMaterialSelect :objData="objDataRef" @select-material="selectMaterial" /> <WxMaterialSelect :objData="objDataRef" @select-material="selectMaterial" />
@ -177,10 +160,7 @@
:before-upload="beforeVideoUpload" :before-upload="beforeVideoUpload"
:on-success="handleUploadSuccess" :on-success="handleUploadSuccess"
> >
<el-button type="primary" <el-button type="primary">新建视频 <Icon icon="ep:upload" /></el-button>
>新建视频
<icon icon="ep:upload" />
</el-button>
</el-upload> </el-upload>
</el-col> </el-col>
</el-row> </el-row>
@ -190,17 +170,14 @@
<!-- 类型 5：图文 --> <!-- 类型 5：图文 -->
<el-tab-pane name="news"> <el-tab-pane name="news">
<template #label> <template #label>
<el-row align="middle"> <el-row align="middle"><Icon icon="ep:reading" /> 图文</el-row>
<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="objDataRef.articles?.length > 0">
<WxNews :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" />
</el-button> </el-button>
</el-col> </el-col>
</div> </div>
@ -208,8 +185,8 @@
<el-col :span="24" v-if="!objDataRef.content"> <el-col :span="24" v-if="!objDataRef.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">
>{{ newsType === '1' ? '选择已发布图文' : '选择草稿箱图文' }} {{ newsType === '1' ? '选择已发布图文' : '选择草稿箱图文' }}
<icon icon="ep:circle-check" /> <icon icon="ep:circle-check" />
</el-button> </el-button>
</el-col> </el-col>
@ -227,10 +204,7 @@
<!-- 类型 6：音乐 --> <!-- 类型 6：音乐 -->
<el-tab-pane name="music"> <el-tab-pane name="music">
<template #label> <template #label>
<el-row align="middle"> <el-row align="middle"><Icon icon="ep:service" />音乐</el-row>
<icon icon="ep:service" />
音乐
</el-row>
</template> </template>
<el-row align="middle" justify="center"> <el-row align="middle" justify="center">
<el-col :span="6"> <el-col :span="6">
@ -259,8 +233,8 @@
<template #trigger> <template #trigger>
<el-button type="text">本地上传</el-button> <el-button type="text">本地上传</el-button>
</template> </template>
<el-button type="text" @click="openMaterial" style="margin-left: 5px" <el-button type="text" @click="openMaterial" style="margin-left: 5px">
>素材库选择 素材库选择
</el-button> </el-button>
</el-upload> </el-upload>
</div> </div>
@ -295,7 +269,6 @@
</el-tab-pane> </el-tab-pane>
</el-tabs> </el-tabs>
</template> </template>
<script lang="ts" name="WxReplySelect"> <script 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'