fix: 修复WxReply、WxMaterialSelect组件bug

42a9715f · dhb52 · cf68b1e9 · 42a9715f · 42a9715f
Commit 42a9715f authored Apr 08, 2023 by dhb52
Show whitespace changes
Inline Side-by-side

Showing with 36 additions and 31 deletions

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

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

No files found.
--- a/src/views/mp/components/wx-material-select/main.vue
+++ b/src/views/mp/components/wx-material-select/main.vue
@@ -5,7 +5,8 @@
  ① 移除 avue 组件，使用 ElementUI 原生组件
 -->
 <template>
-  <!-- 类型：图片 -->
+  <div class="pb-30px">
+    <!-- 类型：image -->
    <div v-if="objData.type === 'image'">
      <div class="waterfall" v-loading="loading">
        <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
@@ -13,8 +14,7 @@
          <p class="item-name">{{ item.name }}</p>
          <el-row class="ope-row">
            <el-button type="success" @click="selectMaterialFun(item)"
-            >选择
+              >选择 <Icon icon="ep:circle-check" />
-            <i class="el-icon-circle-check el-icon--right"></i>
            </el-button>
          </el-row>
        </div>
@@ -28,7 +28,7 @@
        @pagination="getMaterialPageFun"
      />
    </div>
-  <!-- 类型：语音 -->
+    <!-- 类型：voice -->
    <div v-else-if="objData.type === 'voice'">
      <!-- 列表 -->
      <el-table v-loading="loading" :data="list">
@@ -36,7 +36,7 @@
        <el-table-column label="文件名" align="center" prop="name" />
        <el-table-column label="语音" align="center">
          <template #default="scope">
-          <wx-voice-player :url="scope.row.url" />
+            <WxVoicePlayer :url="scope.row.url" />
          </template>
        </el-table-column>
        <el-table-column label="上传时间" align="center" prop="createTime" width="180">
@@ -51,8 +51,8 @@
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
-          <el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
+            <el-button type="text" @click="selectMaterialFun(scope.row)"
-            >选择
+              >选择<Icon icon="ep:plus" />
            </el-button>
          </template>
        </el-table-column>
@@ -66,6 +66,7 @@
        @pagination="getPage"
      />
    </div>
+    <!-- 类型：video -->
    <div v-else-if="objData.type === 'video'">
      <!-- 列表 -->
      <el-table v-loading="loading" :data="list">
@@ -75,7 +76,7 @@
        <el-table-column label="介绍" align="center" prop="introduction" />
        <el-table-column label="视频" align="center">
          <template #default="scope">
-          <wx-video-player :url="scope.row.url" />
+            <WxVideoPlayer :url="scope.row.url" />
          </template>
        </el-table-column>
        <el-table-column label="上传时间" align="center" prop="createTime" width="180">
@@ -90,8 +91,8 @@
          class-name="small-padding fixed-width"
        >
          <template #default="scope">
-          <el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
+            <el-button type="text" @click="selectMaterialFun(scope.row)"
-            >选择
+              >选择<Icon icon="akar-icons:circle-plus" />
            </el-button>
          </template>
        </el-table-column>
@@ -105,14 +106,15 @@
        @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">
-          <wx-news :articles="item.content.newsItem" />
+            <WxNews :articles="item.content.newsItem" />
            <el-row class="ope-row">
              <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-row>
          </div>
@@ -127,6 +129,7 @@
        @pagination="getMaterialPageFun"
      />
    </div>
+  </div>
 </template>
 <script lang="ts" name="WxMaterialSelect">
@@ -173,7 +176,7 @@ export default defineComponent({
    const newsTypeRef = ref(props.newsType)
    const selectMaterialFun = (item) => {
-      ctx.emit('selectMaterial', item)
+      ctx.emit('select-material', item)
    }
    /** 搜索按钮操作 */
    const handleQuery = () => {
@@ -203,9 +206,10 @@ export default defineComponent({
      total.value = data.total
      loading.value = false
    }
    const getFreePublishPageFun = async () => {
      let data = await getFreePublishPage(queryParams)
-      data.list.foreach((item) => {
+      data.list.forEach((item) => {
        const newsItem = item.content.newsItem
        newsItem.forEach((article) => {
          article.picUrl = article.thumbUrl
@@ -232,6 +236,7 @@ export default defineComponent({
    onMounted(async () => {
      getPage()
    })
    return {
      handleQuery,
      dateFormatter,

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