Skip to content

Commit 16c5e3e

Browse files
wuxiranwuxiran
committed
1、微信组件更新第三波，消息页面能正常展示了。但是页面可能还要错乱
1 parent ed5990f commit 16c5e3e

File tree

7 files changed

+902
-505
lines changed

7 files changed

+902
-505
lines changed

‎src/assets/imgs/profile.jpg

7.7 KB
Loading

‎src/assets/imgs/wechat.png

1.84 KB
Loading

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

Lines changed: 302 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,302 @@
1+
<!--
2+
- Copyright (C) 2018-2019
3+
- All rights reserved, Designed By www.joolun.com
4+
芋道源码：
5+
① 移除 avue 组件，使用 ElementUI 原生组件
6+
-->
7+
<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>{{ parseTime(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>{{ parseTime(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" />
113+
<el-row class="ope-row">
114+
<el-button type="success" @click="selectMaterialFun(item)">
115+
选择<i class="el-icon-circle-check el-icon--right"></i>
116+
</el-button>
117+
</el-row>
118+
</div>
119+
</div>
120+
</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+
/>
129+
</div>
130+
</template>
131+
132+
<script lang="ts" name="WxMaterialSelect">
133+
import WxNews from '@/views/mp/components/wx-news/main.vue'
134+
import WxVoicePlayer from '@/views/mp/components/wx-voice-play/main.vue'
135+
import WxVideoPlayer from '@/views/mp/components/wx-video-play/main.vue'
136+
import { getMaterialPage } from '@/api/mp/material'
137+
import { getFreePublishPage } from '@/api/mp/freePublish'
138+
import { getDraftPage } from '@/api/mp/draft'
139+
import { dateFormatter, parseTime } from '@/utils/formatTime'
140+
import { defineComponent, PropType } from 'vue'
141+
142+
export default defineComponent({
143+
components: {
144+
WxNews,
145+
WxVoicePlayer,
146+
WxVideoPlayer
147+
},
148+
props: {
149+
objData: {
150+
type: Object, // type - 类型；accountId - 公众号账号编号
151+
required: true
152+
},
153+
newsType: {
154+
// 图文类型：1、已发布图文；2、草稿箱图文
155+
type: String as PropType<string>,
156+
default: '1'
157+
}
158+
},
159+
setup(props, ctx) {
160+
// 遮罩层
161+
const loading = ref(false)
162+
// 总条数
163+
const total = ref(0)
164+
// 数据列表
165+
const list = ref([])
166+
// 查询参数
167+
const queryParams = reactive({
168+
pageNo: 1,
169+
pageSize: 10,
170+
accountId: props.objData.accountId
171+
})
172+
const objDataRef = reactive(props.objData)
173+
const newsTypeRef = ref(props.newsType)
174+
175+
const selectMaterialFun = (item) => {
176+
ctx.emit('selectMaterial', item)
177+
}
178+
/** 搜索按钮操作 */
179+
const handleQuery = () => {
180+
queryParams.pageNo = 1
181+
getPage()
182+
}
183+
const getPage = () => {
184+
loading.value = true
185+
if (objDataRef.type === 'news' && newsTypeRef.value === '1') {
186+
// 【图文】+ 【已发布】
187+
getFreePublishPageFun()
188+
} else if (objDataRef.type === 'news' && newsTypeRef.value === '2') {
189+
// 【图文】+ 【草稿】
190+
getDraftPageFun()
191+
} else {
192+
// 【素材】
193+
getMaterialPageFun()
194+
}
195+
}
196+
197+
const getMaterialPageFun = async () => {
198+
let data = await getMaterialPage({
199+
...queryParams,
200+
type: objDataRef.type
201+
})
202+
list.value = data.list
203+
total.value = data.total
204+
loading.value = false
205+
}
206+
const getFreePublishPageFun = async () => {
207+
let data = await getFreePublishPage(queryParams)
208+
data.list.foreach((item) => {
209+
const newsItem = item.content.newsItem
210+
newsItem.forEach((article) => {
211+
article.picUrl = article.thumbUrl
212+
})
213+
})
214+
list.value = data.list
215+
total.value = data.total
216+
loading.value = false
217+
}
218+
219+
const getDraftPageFun = async () => {
220+
let data = await getDraftPage(queryParams)
221+
data.list.forEach((item) => {
222+
const newsItem = item.content.newsItem
223+
newsItem.forEach((article) => {
224+
article.picUrl = article.thumbUrl
225+
})
226+
})
227+
list.value = data.list
228+
total.value = data.total
229+
loading.value = false
230+
}
231+
232+
onMounted(async () => {
233+
getPage()
234+
})
235+
return {
236+
handleQuery,
237+
dateFormatter,
238+
selectMaterialFun,
239+
getMaterialPageFun,
240+
getPage,
241+
parseTime,
242+
newsTypeRef,
243+
queryParams,
244+
objDataRef,
245+
list,
246+
total,
247+
loading
248+
}
249+
}
250+
})
251+
</script>
252+
253+
<style lang="scss" scoped>
254+
/*瀑布流样式*/
255+
.waterfall {
256+
width: 100%;
257+
column-gap: 10px;
258+
column-count: 5;
259+
margin: 0 auto;
260+
}
261+
262+
.waterfall-item {
263+
padding: 10px;
264+
margin-bottom: 10px;
265+
break-inside: avoid;
266+
border: 1px solid #eaeaea;
267+
}
268+
269+
.material-img {
270+
width: 100%;
271+
}
272+
273+
p {
274+
line-height: 30px;
275+
}
276+
277+
@media (min-width: 992px) and (max-width: 1300px) {
278+
.waterfall {
279+
column-count: 3;
280+
}
281+
p {
282+
color: red;
283+
}
284+
}
285+
286+
@media (min-width: 768px) and (max-width: 991px) {
287+
.waterfall {
288+
column-count: 2;
289+
}
290+
p {
291+
color: orange;
292+
}
293+
}
294+
295+
@media (max-width: 767px) {
296+
.waterfall {
297+
column-count: 1;
298+
}
299+
}
300+
301+
/*瀑布流样式*/
302+
</style>

0 commit comments

Comments
 (0)