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

Author: YunaiV

src/types/auto-components.d.ts

@@ -54,6 +54,7 @@ declare module '@vue/runtime-core' {
     ElForm: typeof import('element-plus/es')['ElForm']
     ElFormItem: typeof import('element-plus/es')['ElFormItem']
     ElIcon: typeof import('element-plus/es')['ElIcon']
+    ElImage: typeof import('element-plus/es')['ElImage']
     ElImageViewer: typeof import('element-plus/es')['ElImageViewer']
     ElInput: typeof import('element-plus/es')['ElInput']
     ElInputNumber: typeof import('element-plus/es')['ElInputNumber']

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

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

src/views/mp/components/wx-reply/main.vue

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