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/freePublish/index.vue | 338 ++++++++++++++++++++++++++++++++++++++++++++++++++++++++
1 files changed, 338 insertions(+), 0 deletions(-)
diff --git a/src/views/mp/freePublish/index.vue b/src/views/mp/freePublish/index.vue
new file mode 100644
index 0000000..c5639ec
--- /dev/null
+++ b/src/views/mp/freePublish/index.vue
@@ -0,0 +1,338 @@
+<template>
+ <doc-alert title="鍏紬鍙峰浘鏂�" url="https://doc.iocoder.cn/mp/article/" />
+
+ <!-- 鎼滅储宸ヤ綔鏍� -->
+ <ContentWrap>
+ <el-form
+ class="-mb-15px"
+ :model="queryParams"
+ ref="queryFormRef"
+ :inline="true"
+ label-width="68px"
+ >
+ <el-form-item label="鍏紬鍙�" prop="accountId">
+ <WxAccountSelect @change="onAccountChanged" />
+ </el-form-item>
+ </el-form>
+ </ContentWrap>
+
+ <!-- 鍒楄〃 -->
+ <ContentWrap>
+ <div class="waterfall" v-loading="loading">
+ <div
+ class="waterfall-item"
+ v-show="item.content && item.content.newsItem"
+ v-for="item in list"
+ :key="item.articleId"
+ >
+ <wx-news :articles="item.content.newsItem" />
+ <el-row justify="center" class="ope-row">
+ <el-button
+ type="danger"
+ circle
+ @click="handleDelete(item)"
+ v-hasPermi="['mp:free-publish:delete']"
+ >
+ <Icon icon="ep:delete" />
+ </el-button>
+ </el-row>
+ </div>
+ </div>
+ <!-- 鍒嗛〉 -->
+ <Pagination
+ :total="total"
+ v-model:page="queryParams.pageNo"
+ v-model:limit="queryParams.pageSize"
+ @pagination="getList"
+ />
+ </ContentWrap>
+</template>
+
+<script lang="ts" setup>
+import * as FreePublishApi from '@/api/mp/freePublish'
+import WxNews from '@/views/mp/components/wx-news'
+import WxAccountSelect from '@/views/mp/components/wx-account-select'
+
+defineOptions({ name: 'MpFreePublish' })
+
+const message = useMessage() // 娑堟伅寮圭獥
+const { t } = useI18n() // 鍥介檯鍖�
+
+const loading = ref(true) // 鍒楄〃鐨勫姞杞戒腑
+const total = ref(0) // 鍒楄〃鐨勬�婚〉鏁�
+const list = ref<any[]>([]) // 鍒楄〃鐨勬暟鎹�
+
+const queryParams = reactive({
+ pageNo: 1,
+ pageSize: 10,
+ accountId: -1
+})
+
+/** 渚﹀惉鍏紬鍙峰彉鍖� **/
+const onAccountChanged = (id: number) => {
+ queryParams.accountId = id
+ queryParams.pageNo = 1
+ getList()
+}
+
+/** 鏌ヨ鍒楄〃 */
+const getList = async () => {
+ try {
+ loading.value = true
+ const data = await FreePublishApi.getFreePublishPage(queryParams)
+ list.value = data.list
+ total.value = data.total
+ } finally {
+ loading.value = false
+ }
+}
+
+/** 鍒犻櫎鎸夐挳鎿嶄綔 */
+const handleDelete = async (item: any) => {
+ try {
+ // 鍒犻櫎鐨勪簩娆＄‘璁�
+ await message.delConfirm('鍒犻櫎鍚庣敤鎴峰皢鏃犳硶璁块棶姝ら〉闈紝纭畾鍒犻櫎锛�')
+ // 鍙戣捣鍒犻櫎
+ await FreePublishApi.deleteFreePublish(queryParams.accountId, item.articleId)
+ message.success(t('common.delSuccess'))
+ // 鍒锋柊鍒楄〃
+ await getList()
+ } catch {
+ //
+ }
+}
+</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;
+ }
+}
+
+.ope-row {
+ padding-top: 5px;
+ margin-top: 5px;
+ text-align: center;
+ border-top: 1px solid #eaeaea;
+}
+
+.item-name {
+ overflow: hidden;
+ font-size: 12px;
+ text-align: center;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+}
+
+.el-upload__tip {
+ margin-left: 5px;
+}
+
+/* 鏂板鍥炬枃 */
+.left {
+ display: inline-block;
+ width: 35%;
+ margin-top: 200px;
+ vertical-align: top;
+}
+
+.right {
+ display: inline-block;
+ width: 60%;
+ margin-top: -40px;
+}
+
+.avatar-uploader {
+ display: inline-block;
+ width: 20%;
+}
+
+.avatar-uploader .el-upload {
+ position: relative;
+ overflow: hidden;
+ text-align: unset !important;
+ cursor: pointer;
+ border-radius: 6px;
+}
+
+.avatar-uploader .el-upload:hover {
+ border-color: #165dff;
+}
+
+.avatar-uploader-icon {
+ width: 120px;
+ height: 120px;
+ font-size: 28px;
+ line-height: 120px;
+ color: #8c939d;
+ text-align: center;
+ border: 1px solid #d9d9d9;
+}
+
+.avatar {
+ width: 230px;
+ height: 120px;
+}
+
+.avatar1 {
+ width: 120px;
+ height: 120px;
+}
+
+.digest {
+ display: inline-block;
+ width: 60%;
+ vertical-align: top;
+}
+
+/* 鏂板鍥炬枃 */
+
+/* 鐎戝竷娴佹牱寮� */
+.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;
+}
+
+p {
+ line-height: 30px;
+}
+
+/* 鐎戝竷娴佹牱寮� */
+.news-main {
+ width: 100%;
+ height: 120px;
+ margin: auto;
+ background-color: #fff;
+}
+
+.news-content {
+ position: relative;
+ width: 100%;
+ height: 120px;
+ background-color: #acadae;
+}
+
+.news-content-title {
+ position: absolute;
+ bottom: 0;
+ left: 0;
+ display: inline-block;
+ width: 98%;
+ height: 25px;
+ padding: 1%;
+ overflow: hidden;
+ font-size: 15px;
+ color: #fff;
+ text-overflow: ellipsis;
+ white-space: nowrap;
+ background-color: black;
+ opacity: 0.65;
+}
+
+.news-main-item {
+ width: 100%;
+ padding: 5px 0;
+ margin: auto;
+ background-color: #fff;
+ border-top: 1px solid #eaeaea;
+}
+
+.news-content-item {
+ position: relative;
+ margin-left: -3px;
+}
+
+.news-content-item-title {
+ display: inline-block;
+ width: 70%;
+ font-size: 12px;
+}
+
+.news-content-item-img {
+ display: inline-block;
+ width: 25%;
+ background-color: #acadae;
+}
+
+.input-tt {
+ padding: 5px;
+}
+
+.activeAddNews {
+ border: 5px solid #2bb673;
+}
+
+.news-main-plus {
+ width: 280px;
+ height: 50px;
+ margin: auto;
+ text-align: center;
+}
+
+.icon-plus {
+ margin: 10px;
+ font-size: 25px;
+}
+
+.select-item {
+ width: 60%;
+ padding: 10px;
+ margin: 0 auto 10px;
+ border: 1px solid #eaeaea;
+}
+
+.father .child {
+ position: relative;
+ bottom: 25px;
+ display: none;
+ text-align: center;
+}
+
+.father:hover .child {
+ display: block;
+}
+
+.thumb-div {
+ display: inline-block;
+ width: 30%;
+ text-align: center;
+}
+
+.thumb-but {
+ margin: 5px;
+}
+
+.material-img {
+ width: 100%;
+ height: 100%;
+}
+</style>
--
Gitblit v1.8.0