Skip to content

Commit 42a9715

Browse files
dhb52dhb52
committed
fix: 修复WxReply、WxMaterialSelect组件bug
1 parent cf68b1e commit 42a9715

File tree

2 files changed

+139
-134
lines changed

2 files changed

+139
-134
lines changed

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

Lines changed: 122 additions & 117 deletions
Original file line numberDiff line numberDiff line change
@@ -5,127 +5,130 @@
55
① 移除 avue 组件，使用 ElementUI 原生组件
66
-->
77
<template>
8-
<!-- 类型：图片 -->
9-
<div v-if="objData.type === 'image'">
10-
<div class="waterfall" v-loading="loading">
11-
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
12-
<img class="material-img" :src="item.url" />
13-
<p class="item-name">{{ item.name }}</p>
14-
<el-row class="ope-row">
15-
<el-button type="success" @click="selectMaterialFun(item)"
16-
>选择
17-
<i class="el-icon-circle-check el-icon--right"></i>
18-
</el-button>
19-
</el-row>
20-
</div>
21-
</div>
22-
<!-- 分页组件 -->
23-
<pagination
24-
v-show="total > 0"
25-
:total="total"
26-
v-model:page="queryParams.pageNo"
27-
v-model:limit="queryParams.pageSize"
28-
@pagination="getMaterialPageFun"
29-
/>
30-
</div>
31-
<!-- 类型：语音 -->
32-
<div v-else-if="objData.type === 'voice'">
33-
<!-- 列表 -->
34-
<el-table v-loading="loading" :data="list">
35-
<el-table-column label="编号" align="center" prop="mediaId" />
36-
<el-table-column label="文件名" align="center" prop="name" />
37-
<el-table-column label="语音" align="center">
38-
<template #default="scope">
39-
<wx-voice-player :url="scope.row.url" />
40-
</template>
41-
</el-table-column>
42-
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
43-
<template #default="scope">
44-
<span>{{ formatDate(scope.row.createTime) }}</span>
45-
</template>
46-
</el-table-column>
47-
<el-table-column
48-
label="操作"
49-
align="center"
50-
fixed="right"
51-
class-name="small-padding fixed-width"
52-
>
53-
<template #default="scope">
54-
<el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
55-
>选择
56-
</el-button>
57-
</template>
58-
</el-table-column>
59-
</el-table>
60-
<!-- 分页组件 -->
61-
<pagination
62-
v-show="total > 0"
63-
:total="total"
64-
v-model:page="queryParams.pageNo"
65-
v-model:limit="queryParams.pageSize"
66-
@pagination="getPage"
67-
/>
68-
</div>
69-
<div v-else-if="objData.type === 'video'">
70-
<!-- 列表 -->
71-
<el-table v-loading="loading" :data="list">
72-
<el-table-column label="编号" align="center" prop="mediaId" />
73-
<el-table-column label="文件名" align="center" prop="name" />
74-
<el-table-column label="标题" align="center" prop="title" />
75-
<el-table-column label="介绍" align="center" prop="introduction" />
76-
<el-table-column label="视频" align="center">
77-
<template #default="scope">
78-
<wx-video-player :url="scope.row.url" />
79-
</template>
80-
</el-table-column>
81-
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
82-
<template #default="scope">
83-
<span>{{ formatDate(scope.row.createTime) }}</span>
84-
</template>
85-
</el-table-column>
86-
<el-table-column
87-
label="操作"
88-
align="center"
89-
fixed="right"
90-
class-name="small-padding fixed-width"
91-
>
92-
<template #default="scope">
93-
<el-button type="text" icon="el-icon-circle-plus" @click="selectMaterialFun(scope.row)"
94-
>选择
95-
</el-button>
96-
</template>
97-
</el-table-column>
98-
</el-table>
99-
<!-- 分页组件 -->
100-
<pagination
101-
v-show="total > 0"
102-
:total="total"
103-
v-model:page="queryParams.pageNo"
104-
v-model:limit="queryParams.pageSize"
105-
@pagination="getMaterialPageFun"
106-
/>
107-
</div>
108-
<div v-else-if="objData.type === 'news'">
109-
<div class="waterfall" v-loading="loading">
110-
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
111-
<div v-if="item.content && item.content.newsItem">
112-
<wx-news :articles="item.content.newsItem" />
8+
<div class="pb-30px">
9+
<!-- 类型：image -->
10+
<div v-if="objData.type === 'image'">
11+
<div class="waterfall" v-loading="loading">
12+
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
13+
<img class="material-img" :src="item.url" />
14+
<p class="item-name">{{ item.name }}</p>
11315
<el-row class="ope-row">
114-
<el-button type="success" @click="selectMaterialFun(item)">
115-
选择<i class="el-icon-circle-check el-icon--right"></i>
16+
<el-button type="success" @click="selectMaterialFun(item)"
17+
>选择 <Icon icon="ep:circle-check" />
11618
</el-button>
11719
</el-row>
11820
</div>
11921
</div>
22+
<!-- 分页组件 -->
23+
<pagination
24+
v-show="total > 0"
25+
:total="total"
26+
v-model:page="queryParams.pageNo"
27+
v-model:limit="queryParams.pageSize"
28+
@pagination="getMaterialPageFun"
29+
/>
30+
</div>
31+
<!-- 类型：voice -->
32+
<div v-else-if="objData.type === 'voice'">
33+
<!-- 列表 -->
34+
<el-table v-loading="loading" :data="list">
35+
<el-table-column label="编号" align="center" prop="mediaId" />
36+
<el-table-column label="文件名" align="center" prop="name" />
37+
<el-table-column label="语音" align="center">
38+
<template #default="scope">
39+
<WxVoicePlayer :url="scope.row.url" />
40+
</template>
41+
</el-table-column>
42+
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
43+
<template #default="scope">
44+
<span>{{ formatDate(scope.row.createTime) }}</span>
45+
</template>
46+
</el-table-column>
47+
<el-table-column
48+
label="操作"
49+
align="center"
50+
fixed="right"
51+
class-name="small-padding fixed-width"
52+
>
53+
<template #default="scope">
54+
<el-button type="text" @click="selectMaterialFun(scope.row)"
55+
>选择<Icon icon="ep:plus" />
56+
</el-button>
57+
</template>
58+
</el-table-column>
59+
</el-table>
60+
<!-- 分页组件 -->
61+
<pagination
62+
v-show="total > 0"
63+
:total="total"
64+
v-model:page="queryParams.pageNo"
65+
v-model:limit="queryParams.pageSize"
66+
@pagination="getPage"
67+
/>
68+
</div>
69+
<!-- 类型：video -->
70+
<div v-else-if="objData.type === 'video'">
71+
<!-- 列表 -->
72+
<el-table v-loading="loading" :data="list">
73+
<el-table-column label="编号" align="center" prop="mediaId" />
74+
<el-table-column label="文件名" align="center" prop="name" />
75+
<el-table-column label="标题" align="center" prop="title" />
76+
<el-table-column label="介绍" align="center" prop="introduction" />
77+
<el-table-column label="视频" align="center">
78+
<template #default="scope">
79+
<WxVideoPlayer :url="scope.row.url" />
80+
</template>
81+
</el-table-column>
82+
<el-table-column label="上传时间" align="center" prop="createTime" width="180">
83+
<template #default="scope">
84+
<span>{{ formatDate(scope.row.createTime) }}</span>
85+
</template>
86+
</el-table-column>
87+
<el-table-column
88+
label="操作"
89+
align="center"
90+
fixed="right"
91+
class-name="small-padding fixed-width"
92+
>
93+
<template #default="scope">
94+
<el-button type="text" @click="selectMaterialFun(scope.row)"
95+
>选择<Icon icon="akar-icons:circle-plus" />
96+
</el-button>
97+
</template>
98+
</el-table-column>
99+
</el-table>
100+
<!-- 分页组件 -->
101+
<pagination
102+
v-show="total > 0"
103+
:total="total"
104+
v-model:page="queryParams.pageNo"
105+
v-model:limit="queryParams.pageSize"
106+
@pagination="getMaterialPageFun"
107+
/>
108+
</div>
109+
<!-- 类型：news -->
110+
<div v-else-if="objData.type === 'news'">
111+
<div class="waterfall" v-loading="loading">
112+
<div class="waterfall-item" v-for="item in list" :key="item.mediaId">
113+
<div v-if="item.content && item.content.newsItem">
114+
<WxNews :articles="item.content.newsItem" />
115+
<el-row class="ope-row">
116+
<el-button type="success" @click="selectMaterialFun(item)">
117+
选择<Icon icon="ep:circle-check" />
118+
</el-button>
119+
</el-row>
120+
</div>
121+
</div>
122+
</div>
123+
<!-- 分页组件 -->
124+
<pagination
125+
v-show="total > 0"
126+
:total="total"
127+
v-model:page="queryParams.pageNo"
128+
v-model:limit="queryParams.pageSize"
129+
@pagination="getMaterialPageFun"
130+
/>
120131
</div>
121-
<!-- 分页组件 -->
122-
<pagination
123-
v-show="total > 0"
124-
:total="total"
125-
v-model:page="queryParams.pageNo"
126-
v-model:limit="queryParams.pageSize"
127-
@pagination="getMaterialPageFun"
128-
/>
129132
</div>
130133
</template>
131134

@@ -173,7 +176,7 @@ export default defineComponent({
173176
const newsTypeRef = ref(props.newsType)
174177
175178
const selectMaterialFun = (item) => {
176-
ctx.emit('selectMaterial', item)
179+
ctx.emit('select-material', item)
177180
}
178181
/** 搜索按钮操作 */
179182
const handleQuery = () => {
@@ -203,9 +206,10 @@ export default defineComponent({
203206
total.value = data.total
204207
loading.value = false
205208
}
209+
206210
const getFreePublishPageFun = async () => {
207211
let data = await getFreePublishPage(queryParams)
208-
data.list.foreach((item) => {
212+
data.list.forEach((item) => {
209213
const newsItem = item.content.newsItem
210214
newsItem.forEach((article) => {
211215
article.picUrl = article.thumbUrl
@@ -232,6 +236,7 @@ export default defineComponent({
232236
onMounted(async () => {
233237
getPage()
234238
})
239+
235240
return {
236241
handleQuery,
237242
dateFormatter,

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

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
<div class="select-item" v-if="objDataRef.url">
3838
<img class="material-img" :src="objDataRef.url" />
3939
<p class="item-name" v-if="objDataRef.name">{{ objDataRef.name }}</p>
40-
<el-row class="ope-row">
40+
<el-row class="ope-row" justify="center">
4141
<el-button type="danger" circle @click="deleteObj">
4242
<icon icon="ep:delete" />
4343
</el-button>
@@ -52,7 +52,7 @@
5252
<icon icon="ep:circle-check" />
5353
</el-button>
5454
<el-dialog title="选择图片" v-model="dialogImageVisible" width="90%" append-to-body>
55-
<wx-material-select :obj-data="objDataRef" @selectMaterial="selectMaterial" />
55+
<WxMaterialSelect :obj-data="objDataRef" @select-material="selectMaterial" />
5656
</el-dialog>
5757
</el-col>
5858
<!-- 文件上传 -->
@@ -91,20 +91,20 @@
9191
<div class="select-item2" v-if="objDataRef.url">
9292
<p class="item-name">{{ objDataRef.name }}</p>
9393
<div class="item-infos">
94-
<wx-voice-player :url="objDataRef.url" />
94+
<WxVoicePlayer :url="objDataRef.url" />
9595
</div>
96-
<el-row class="ope-row">
97-
<el-button type="danger" icon="el-icon-delete" circle @click="deleteObj" />
96+
<el-row class="ope-row" justify="center">
97+
<el-button type="danger" circle @click="deleteObj"><Icon icon="ep:delete" /></el-button>
9898
</el-row>
9999
</div>
100100
<el-row v-else style="text-align: center">
101101
<!-- 选择素材 -->
102102
<el-col :span="12" class="col-select">
103103
<el-button type="success" @click="openMaterial">
104-
素材库选择<i class="el-icon-circle-check el-icon--right"></i>
104+
素材库选择<Icon icon="ep:circle-check" />
105105
</el-button>
106106
<el-dialog title="选择语音" v-model="dialogVoiceVisible" width="90%" append-to-body>
107-
<WxMaterialSelect :objData="objData" @selectMaterial="selectMaterial" />
107+
<WxMaterialSelect :objData="objData" @select-material="selectMaterial" />
108108
</el-dialog>
109109
</el-col>
110110
<!-- 文件上传 -->
@@ -151,7 +151,7 @@
151151
@input="inputContent"
152152
/>
153153
<div style="text-align: center">
154-
<wx-video-player v-if="objDataRef.url" :url="objDataRef.url" />
154+
<WxVideoPlayer v-if="objDataRef.url" :url="objDataRef.url" />
155155
</div>
156156
<el-col>
157157
<el-row style="text-align: center" align="middle">
@@ -162,7 +162,7 @@
162162
<icon icon="ep:circle-check" />
163163
</el-button>
164164
<el-dialog title="选择视频" v-model="dialogVideoVisible" width="90%" append-to-body>
165-
<wx-material-select :objData="objDataRef" @selectMaterial="selectMaterial" />
165+
<WxMaterialSelect :objData="objDataRef" @select-material="selectMaterial" />
166166
</el-dialog>
167167
</el-col>
168168
<!-- 文件上传 -->
@@ -196,8 +196,8 @@
196196
</el-row>
197197
</template>
198198
<el-row>
199-
<div class="select-item" v-if="objDataRef.articles.size > 0">
200-
<wx-news :articles="objDataRef.articles" />
199+
<div class="select-item" v-if="objDataRef.articles?.length > 0">
200+
<WxNews :articles="objDataRef.articles" />
201201
<el-col class="ope-row">
202202
<el-button type="danger" circle @click="deleteObj">
203203
<icon icon="ep:delete" />
@@ -216,9 +216,9 @@
216216
</el-row>
217217
</el-col>
218218
<el-dialog title="选择图文" v-model="dialogNewsVisible" width="90%" append-to-body>
219-
<wx-material-select
219+
<WxMaterialSelect
220220
:objData="objDataRef"
221-
@selectMaterial="selectMaterial"
221+
@select-material="selectMaterial"
222222
:newsType="newsType"
223223
/>
224224
</el-dialog>
@@ -268,9 +268,9 @@
268268
</el-col>
269269
</el-row>
270270
<el-dialog title="选择图片" v-model="dialogThumbVisible" width="80%" append-to-body>
271-
<wx-material-select
271+
<WxMaterialSelect
272272
:objData="{ type: 'image', accountId: objDataRef.accountId }"
273-
@selectMaterial="selectMaterial"
273+
@select-material="selectMaterial"
274274
/>
275275
</el-dialog>
276276
</el-col>
@@ -482,7 +482,7 @@ export default defineComponent({
482482
// 创建 tempObjItem 对象，并设置对应的值
483483
let tempObjItem = {
484484
type: '',
485-
articles: '',
485+
articles: [],
486486
thumbMediaId: '',
487487
thumbMediaUrl: '',
488488
introduction: '',
@@ -560,7 +560,7 @@ export default defineComponent({
560560
}
561561
const deleteObj = () => {
562562
if (objDataRef.type === 'news') {
563-
objDataRef.articles = ''
563+
objDataRef.articles = []
564564
} else if (objDataRef.type === 'image') {
565565
objDataRef.mediaId = null
566566
objDataRef.url = null

0 commit comments

Comments
 (0)