From a1d7e81859f554f3a53680cc35f0f49bf1f77098 Mon Sep 17 00:00:00 2001
From: wwf <1971391498@qq.com>
Date: 星期四, 14 五月 2026 14:37:02 +0800
Subject: [PATCH] 导入项目
---
src/views/mp/components/wx-material-select/main.vue | 279 +++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 279 insertions(+), 0 deletions(-)
diff --git a/src/views/mp/components/wx-material-select/main.vue b/src/views/mp/components/wx-material-select/main.vue
new file mode 100644
index 0000000..aad25ea
--- /dev/null
+++ b/src/views/mp/components/wx-material-select/main.vue
@@ -0,0 +1,279 @@
+<!--
+ - Copyright (C) 2018-2019
+ - All rights reserved, Designed By www.joolun.com
+ 鑺嬮亾婧愮爜锛�
+ 鈶� 绉婚櫎 avue 缁勪欢锛屼娇鐢� ElementUI 鍘熺敓缁勪欢
+-->
+<template>
+ <div class="pb-30px">
+ <!-- 绫诲瀷锛歩mage -->
+ <div v-if="props.type === 'image'">
+ <div class="waterfall" v-loading="loading">
+ <div class="waterfall-item" v-for="item in list" :key="item.mediaId">
+ <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>
+ </el-row>
+ </div>
+ </div>
+ <!-- 鍒嗛〉缁勪欢 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getMaterialPageFun"
+ />
+ </div>
+ <!-- 绫诲瀷锛歷oice -->
+ <div v-else-if="props.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" />
+ <el-table-column label="璇煶" align="center">
+ <template #default="scope">
+ <WxVoicePlayer :url="scope.row.url" />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="涓婁紶鏃堕棿"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column label="鎿嶄綔" align="center" fixed="right">
+ <template #default="scope">
+ <el-button type="primary" link @click="selectMaterialFun(scope.row)"
+ >閫夋嫨
+ <Icon icon="ep:plus" />
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 鍒嗛〉缁勪欢 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getPage"
+ />
+ </div>
+ <!-- 绫诲瀷锛歷ideo -->
+ <div v-else-if="props.type === 'video'">
+ <!-- 鍒楄〃 -->
+ <el-table v-loading="loading" :data="list">
+ <el-table-column label="缂栧彿" align="center" prop="mediaId" />
+ <el-table-column label="鏂囦欢鍚�" align="center" prop="name" />
+ <el-table-column label="鏍囬" align="center" prop="title" />
+ <el-table-column label="浠嬬粛" align="center" prop="introduction" />
+ <el-table-column label="瑙嗛" align="center">
+ <template #default="scope">
+ <WxVideoPlayer :url="scope.row.url" />
+ </template>
+ </el-table-column>
+ <el-table-column
+ label="涓婁紶鏃堕棿"
+ align="center"
+ prop="createTime"
+ width="180"
+ :formatter="dateFormatter"
+ />
+ <el-table-column
+ label="鎿嶄綔"
+ align="center"
+ fixed="right"
+ class-name="small-padding fixed-width"
+ >
+ <template #default="scope">
+ <el-button type="primary" link @click="selectMaterialFun(scope.row)"
+ >閫夋嫨
+ <Icon icon="akar-icons:circle-plus" />
+ </el-button>
+ </template>
+ </el-table-column>
+ </el-table>
+ <!-- 鍒嗛〉缁勪欢 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getMaterialPageFun"
+ />
+ </div>
+ <!-- 绫诲瀷锛歯ews -->
+ <div v-else-if="props.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">
+ <WxNews :articles="item.content.newsItem" />
+ <el-row class="ope-row">
+ <el-button type="success" @click="selectMaterialFun(item)">
+ 閫夋嫨
+ <Icon icon="ep:circle-check" />
+ </el-button>
+ </el-row>
+ </div>
+ </div>
+ </div>
+ <!-- 鍒嗛〉缁勪欢 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getMaterialPageFun"
+ />
+ </div>
+ </div>
+</template>
+
+<script lang="ts" setup>
+import WxNews from '@/views/mp/components/wx-news'
+import WxVoicePlayer from '@/views/mp/components/wx-voice-play'
+import WxVideoPlayer from '@/views/mp/components/wx-video-play'
+import { NewsType } from './types'
+import * as MpMaterialApi from '@/api/mp/material'
+import * as MpFreePublishApi from '@/api/mp/freePublish'
+import * as MpDraftApi from '@/api/mp/draft'
+import { dateFormatter } from '@/utils/formatTime'
+
+defineOptions({ name: 'WxMaterialSelect' })
+
+const props = withDefaults(
+ defineProps<{
+ type: string
+ accountId: number
+ newsType?: NewsType
+ }>(),
+ {
+ newsType: NewsType.Published
+ }
+)
+
+const emit = defineEmits(['select-material'])
+
+// 閬僵灞�
+const loading = ref(false)
+// 鎬绘潯鏁�
+const total = ref(0)
+// 鏁版嵁鍒楄〃
+const list = ref<any[]>([])
+// 鏌ヨ鍙傛暟
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ accountId: props.accountId
+})
+
+const selectMaterialFun = (item) => {
+ emit('select-material', item)
+}
+
+const getPage = async () => {
+ loading.value = true
+ try {
+ if (props.type === 'news' && props.newsType === NewsType.Published) {
+ // 銆愬浘鏂囥��+ 銆愬凡鍙戝竷銆�
+ await getFreePublishPageFun()
+ } else if (props.type === 'news' && props.newsType === NewsType.Draft) {
+ // 銆愬浘鏂囥��+ 銆愯崏绋裤��
+ await getDraftPageFun()
+ } else {
+ // 銆愮礌鏉愩��
+ await getMaterialPageFun()
+ }
+ } finally {
+ loading.value = false
+ }
+}
+
+const getMaterialPageFun = async () => {
+ const data = await MpMaterialApi.getMaterialPage({
+ ...queryParams,
+ type: props.type
+ })
+ list.value = data.list
+ total.value = data.total
+}
+
+const getFreePublishPageFun = async () => {
+ const data = await MpFreePublishApi.getFreePublishPage(queryParams)
+ data.list.forEach((item: any) => {
+ const articles = item.content.newsItem
+ articles.forEach((article: any) => {
+ article.picUrl = article.thumbUrl
+ })
+ })
+ list.value = data.list
+ total.value = data.total
+}
+
+const getDraftPageFun = async () => {
+ const data = await MpDraftApi.getDraftPage(queryParams)
+ data.list.forEach((draft: any) => {
+ const articles = draft.content.newsItem
+ articles.forEach((article: any) => {
+ article.picUrl = article.thumbUrl
+ })
+ })
+ list.value = data.list
+ total.value = data.total
+}
+
+onMounted(async () => {
+ getPage()
+})
+</script>
+<style lang="scss" scoped>
+@media (width >= 992px) and (width <= 1300px) {
+ .waterfall {
+ column-count: 3;
+ }
+
+ p {
+ color: red;
+ }
+}
+
+@media (width >= 768px) and (width <= 991px) {
+ .waterfall {
+ column-count: 2;
+ }
+
+ p {
+ color: orange;
+ }
+}
+
+@media (width <= 767px) {
+ .waterfall {
+ column-count: 1;
+ }
+}
+
+.waterfall {
+ width: 100%;
+ column-gap: 10px;
+ column-count: 5;
+ margin: 0 auto;
+}
+
+.waterfall-item {
+ padding: 10px;
+ margin-bottom: 10px;
+ break-inside: avoid;
+ border: 1px solid #eaeaea;
+}
+
+.material-img {
+ width: 100%;
+}
+
+p {
+ line-height: 30px;
+}
+</style>
--
Gitblit v1.8.0