feat: mp
This commit is contained in:
xingyu4j
189
apps/web-antd/src/views/mp/draft/components/cover-select.vue
Normal file
189
apps/web-antd/src/views/mp/draft/components/cover-select.vue
Normal file
@@ -0,0 +1,189 @@
|
||||
<script lang="ts" setup>
|
||||
import type { UploadFile } from 'ant-design-vue';
|
||||
|
||||
import type { NewsItem } from './types';
|
||||
|
||||
import { computed, inject, reactive, ref } from 'vue';
|
||||
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
import { useAccessStore } from '@vben/stores';
|
||||
|
||||
import { Button, Image, message, Modal, Upload } from 'ant-design-vue';
|
||||
|
||||
import { UploadType, useBeforeUpload } from '#/utils/useUpload';
|
||||
import { WxMaterialSelect } from '#/views/mp/modules/wx-material-select';
|
||||
|
||||
// 设置上传的请求头部
|
||||
|
||||
const props = defineProps<{
|
||||
isFirst: boolean;
|
||||
modelValue: NewsItem;
|
||||
}>();
|
||||
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: NewsItem): void;
|
||||
}>();
|
||||
|
||||
const UPLOAD_URL = `${import.meta.env.VITE_BASE_URL}/admin-api/mp/material/upload-permanent`; // 上传永久素材的地址
|
||||
const HEADERS = { Authorization: `Bearer ${useAccessStore().accessToken}` };
|
||||
const newsItem = computed<NewsItem>({
|
||||
get() {
|
||||
return props.modelValue;
|
||||
},
|
||||
set(val) {
|
||||
emit('update:modelValue', val);
|
||||
},
|
||||
});
|
||||
|
||||
const accountId = inject<number>('accountId');
|
||||
const showImageDialog = ref(false);
|
||||
|
||||
const fileList = ref<UploadFile[]>([]);
|
||||
interface UploadData {
|
||||
type: UploadType;
|
||||
accountId: number;
|
||||
}
|
||||
const uploadData: UploadData = reactive({
|
||||
type: UploadType.Image,
|
||||
accountId: accountId!,
|
||||
});
|
||||
|
||||
/** 素材选择完成事件*/
|
||||
function onMaterialSelected(item: any) {
|
||||
showImageDialog.value = false;
|
||||
newsItem.value.thumbMediaId = item.mediaId;
|
||||
newsItem.value.thumbUrl = item.url;
|
||||
}
|
||||
|
||||
const onBeforeUpload = (file: UploadFile) =>
|
||||
useBeforeUpload(UploadType.Image, 2)(file as any);
|
||||
|
||||
function onUploadChange(info: any) {
|
||||
if (info.file.status === 'done') {
|
||||
onUploadSuccess(info.file.response || info.file);
|
||||
} else if (info.file.status === 'error') {
|
||||
onUploadError(info.file.error || new Error('上传失败'));
|
||||
}
|
||||
}
|
||||
|
||||
function onUploadSuccess(res: any) {
|
||||
if (res.code !== 0) {
|
||||
message.error(`上传出错：${res.msg}`);
|
||||
return false;
|
||||
}
|
||||
|
||||
// 重置上传文件的表单
|
||||
fileList.value = [];
|
||||
|
||||
// 设置草稿的封面字段
|
||||
newsItem.value.thumbMediaId = res.data.mediaId;
|
||||
newsItem.value.thumbUrl = res.data.url;
|
||||
}
|
||||
|
||||
function onUploadError(err: Error) {
|
||||
message.error(`上传失败: ${err.message}`);
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div>
|
||||
<p>封面:</p>
|
||||
<div class="thumb-div">
|
||||
<Image
|
||||
v-if="newsItem.thumbUrl"
|
||||
style="width: 300px; max-height: 300px"
|
||||
:src="newsItem.thumbUrl"
|
||||
:preview="false"
|
||||
/>
|
||||
<IconifyIcon
|
||||
v-else
|
||||
icon="lucide:plus"
|
||||
class="avatar-uploader-icon"
|
||||
:class="isFirst ? 'avatar' : 'avatar1'"
|
||||
/>
|
||||
<div class="thumb-but">
|
||||
<div class="flex items-center justify-center">
|
||||
<Upload
|
||||
:action="UPLOAD_URL"
|
||||
:headers="HEADERS"
|
||||
:file-list="fileList"
|
||||
:data="{ ...uploadData }"
|
||||
:before-upload="onBeforeUpload"
|
||||
@change="onUploadChange"
|
||||
>
|
||||
<template #default>
|
||||
<Button size="small" type="primary">本地上传</Button>
|
||||
</template>
|
||||
</Upload>
|
||||
<Button
|
||||
size="small"
|
||||
type="primary"
|
||||
@click="showImageDialog = true"
|
||||
style="margin-left: 5px"
|
||||
>
|
||||
素材库选择
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
<div class="upload-tip">
|
||||
支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M
|
||||
</div>
|
||||
</div>
|
||||
<Modal
|
||||
title="选择图片"
|
||||
v-model:open="showImageDialog"
|
||||
width="80%"
|
||||
destroy-on-close
|
||||
>
|
||||
<WxMaterialSelect
|
||||
type="image"
|
||||
:account-id="accountId!"
|
||||
@select-material="onMaterialSelected"
|
||||
/>
|
||||
</Modal>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.upload-tip {
|
||||
margin-top: 5px;
|
||||
margin-left: 5px;
|
||||
font-size: 12px;
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.thumb-div {
|
||||
display: inline-block;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
|
||||
.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;
|
||||
}
|
||||
|
||||
.thumb-but {
|
||||
margin: 5px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
19
apps/web-antd/src/views/mp/draft/components/draft-table.vue
Normal file
19
apps/web-antd/src/views/mp/draft/components/draft-table.vue
Normal file
@@ -0,0 +1,19 @@
|
||||
<script lang="ts" setup>
|
||||
import type { Article } from './types';
|
||||
|
||||
import { WxNews } from '#/views/mp/modules/wx-news';
|
||||
|
||||
defineOptions({ name: 'DraftTableCell' });
|
||||
|
||||
const props = defineProps<{
|
||||
row: Article;
|
||||
}>();
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="p-2.5">
|
||||
<div v-if="props.row.content && props.row.content.newsItem">
|
||||
<WxNews :articles="props.row.content.newsItem" />
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
341
apps/web-antd/src/views/mp/draft/components/news-form.vue
Normal file
341
apps/web-antd/src/views/mp/draft/components/news-form.vue
Normal file
@@ -0,0 +1,341 @@
|
||||
<script lang="ts" setup>
|
||||
import type { NewsItem } from './types';
|
||||
|
||||
import { computed, ref } from 'vue';
|
||||
|
||||
import { confirm } from '@vben/common-ui';
|
||||
import { IconifyIcon } from '@vben/icons';
|
||||
|
||||
import { Button, Col, Input, Layout, Row, Textarea } from 'ant-design-vue';
|
||||
|
||||
import { Tinymce as RichTextarea } from '#/components/tinymce';
|
||||
|
||||
import CoverSelect from './cover-select.vue';
|
||||
import { createEmptyNewsItem } from './types';
|
||||
|
||||
defineOptions({ name: 'NewsForm' });
|
||||
|
||||
const props = defineProps<{
|
||||
isCreating: boolean;
|
||||
modelValue: NewsItem[] | null;
|
||||
}>();
|
||||
|
||||
// v-model=newsList
|
||||
const emit = defineEmits<{
|
||||
(e: 'update:modelValue', v: NewsItem[]): void;
|
||||
}>();
|
||||
|
||||
const newsList = computed<NewsItem[]>({
|
||||
get() {
|
||||
return props.modelValue === null
|
||||
? [createEmptyNewsItem()]
|
||||
: props.modelValue;
|
||||
},
|
||||
set(val) {
|
||||
emit('update:modelValue', val);
|
||||
},
|
||||
});
|
||||
|
||||
const activeNewsIndex = ref(0);
|
||||
const activeNewsItem = computed(() => {
|
||||
const item = newsList.value[activeNewsIndex.value];
|
||||
if (!item) {
|
||||
return createEmptyNewsItem();
|
||||
}
|
||||
return item;
|
||||
});
|
||||
|
||||
// 将图文向下移动
|
||||
function moveDownNews(index: number) {
|
||||
const current = newsList.value[index];
|
||||
const next = newsList.value[index + 1];
|
||||
if (current && next) {
|
||||
newsList.value[index] = next;
|
||||
newsList.value[index + 1] = current;
|
||||
activeNewsIndex.value = index + 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 将图文向上移动
|
||||
function moveUpNews(index: number) {
|
||||
const current = newsList.value[index];
|
||||
const prev = newsList.value[index - 1];
|
||||
if (current && prev) {
|
||||
newsList.value[index] = prev;
|
||||
newsList.value[index - 1] = current;
|
||||
activeNewsIndex.value = index - 1;
|
||||
}
|
||||
}
|
||||
|
||||
// 删除指定 index 的图文
|
||||
async function removeNews(index: number) {
|
||||
try {
|
||||
await confirm('确定删除该图文吗?');
|
||||
newsList.value.splice(index, 1);
|
||||
if (activeNewsIndex.value === index) {
|
||||
activeNewsIndex.value = 0;
|
||||
}
|
||||
} catch {
|
||||
// empty
|
||||
}
|
||||
}
|
||||
|
||||
// 添加一个图文
|
||||
function plusNews() {
|
||||
newsList.value.push(createEmptyNewsItem());
|
||||
activeNewsIndex.value = newsList.value.length - 1;
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<Layout>
|
||||
<Layout.Sider width="40%" theme="light">
|
||||
<div class="select-item">
|
||||
<div v-for="(news, index) in newsList" :key="index">
|
||||
<div
|
||||
class="news-main father"
|
||||
v-if="index === 0"
|
||||
:class="{ activeAddNews: activeNewsIndex === index }"
|
||||
@click="activeNewsIndex = index"
|
||||
>
|
||||
<div class="news-content">
|
||||
<img class="material-img" :src="news.thumbUrl" />
|
||||
<div class="news-content-title">{{ news.title }}</div>
|
||||
</div>
|
||||
<div class="child" v-if="newsList.length > 1">
|
||||
<Button
|
||||
type="default"
|
||||
shape="circle"
|
||||
size="small"
|
||||
@click="() => moveDownNews(index)"
|
||||
>
|
||||
<IconifyIcon icon="lucide:arrow-down" />
|
||||
</Button>
|
||||
<Button
|
||||
v-if="isCreating"
|
||||
type="primary"
|
||||
danger
|
||||
shape="circle"
|
||||
size="small"
|
||||
@click="() => removeNews(index)"
|
||||
>
|
||||
<IconifyIcon icon="lucide:trash-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="news-main-item father"
|
||||
v-if="index > 0"
|
||||
:class="{ activeAddNews: activeNewsIndex === index }"
|
||||
@click="activeNewsIndex = index"
|
||||
>
|
||||
<div class="news-content-item">
|
||||
<div class="news-content-item-title">{{ news.title }}</div>
|
||||
<div class="news-content-item-img">
|
||||
<img class="material-img" :src="news.thumbUrl" width="100%" />
|
||||
</div>
|
||||
</div>
|
||||
<div class="child">
|
||||
<Button
|
||||
v-if="newsList.length > index + 1"
|
||||
shape="circle"
|
||||
type="default"
|
||||
size="small"
|
||||
@click="() => moveDownNews(index)"
|
||||
>
|
||||
<IconifyIcon icon="lucide:arrow-down" />
|
||||
</Button>
|
||||
<Button
|
||||
v-if="index > 0"
|
||||
type="default"
|
||||
shape="circle"
|
||||
size="small"
|
||||
@click="() => moveUpNews(index)"
|
||||
>
|
||||
<IconifyIcon icon="lucide:arrow-up" />
|
||||
</Button>
|
||||
<Button
|
||||
v-if="isCreating"
|
||||
type="primary"
|
||||
danger
|
||||
size="small"
|
||||
shape="circle"
|
||||
@click="() => removeNews(index)"
|
||||
>
|
||||
<IconifyIcon icon="lucide:trash-2" />
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Row justify="center" class="ope-row">
|
||||
<Button
|
||||
type="primary"
|
||||
shape="circle"
|
||||
@click="plusNews"
|
||||
v-if="newsList.length < 8 && isCreating"
|
||||
>
|
||||
<IconifyIcon icon="lucide:plus" />
|
||||
</Button>
|
||||
</Row>
|
||||
</div>
|
||||
</Layout.Sider>
|
||||
<Layout.Content :style="{ backgroundColor: '#fff' }">
|
||||
<div v-if="newsList.length > 0 && activeNewsItem">
|
||||
<!-- 标题、作者、原文地址 -->
|
||||
<Row :gutter="20">
|
||||
<Col :span="24">
|
||||
<Input
|
||||
v-model:value="activeNewsItem.title"
|
||||
placeholder="请输入标题（必填）"
|
||||
/>
|
||||
</Col>
|
||||
<Col :span="24" style="margin-top: 5px">
|
||||
<Input
|
||||
v-model:value="activeNewsItem.author"
|
||||
placeholder="请输入作者"
|
||||
/>
|
||||
</Col>
|
||||
<Col :span="24" style="margin-top: 5px">
|
||||
<Input
|
||||
v-model:value="activeNewsItem.contentSourceUrl"
|
||||
placeholder="请输入原文地址"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<!-- 封面和摘要 -->
|
||||
<Row :gutter="20">
|
||||
<Col :span="12">
|
||||
<CoverSelect
|
||||
v-model="activeNewsItem"
|
||||
:is-first="activeNewsIndex === 0"
|
||||
/>
|
||||
</Col>
|
||||
<Col :span="12">
|
||||
<p>摘要:</p>
|
||||
<Textarea
|
||||
:rows="8"
|
||||
v-model:value="activeNewsItem.digest"
|
||||
placeholder="请输入摘要"
|
||||
class="digest"
|
||||
:maxlength="120"
|
||||
:show-count="true"
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
<!--富文本编辑器组件-->
|
||||
<Row>
|
||||
<Col :span="24">
|
||||
<RichTextarea v-model="activeNewsItem.content" />
|
||||
</Col>
|
||||
</Row>
|
||||
</div>
|
||||
</Layout.Content>
|
||||
</Layout>
|
||||
</template>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.ope-row {
|
||||
padding-top: 5px;
|
||||
margin-top: 5px;
|
||||
text-align: center;
|
||||
border-top: 1px solid #eaeaea;
|
||||
}
|
||||
|
||||
:deep(.ant-row) {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
:deep(.ant-row:last-child) {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.digest {
|
||||
display: inline-block;
|
||||
width: 100%;
|
||||
vertical-align: top;
|
||||
}
|
||||
|
||||
/* 新增图文 */
|
||||
.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;
|
||||
text-overflow: ellipsis;
|
||||
font-size: 15px;
|
||||
color: #fff;
|
||||
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;
|
||||
}
|
||||
|
||||
.select-item {
|
||||
width: 60%;
|
||||
padding: 10px;
|
||||
margin: 0 auto 10px;
|
||||
border: 1px solid #eaeaea;
|
||||
|
||||
.activeAddNews {
|
||||
border: 5px solid #2bb673;
|
||||
}
|
||||
}
|
||||
|
||||
.father .child {
|
||||
position: relative;
|
||||
bottom: 25px;
|
||||
display: none;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.father:hover .child {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.material-img {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
</style>
|
||||
41
apps/web-antd/src/views/mp/draft/components/types.ts
Normal file
41
apps/web-antd/src/views/mp/draft/components/types.ts
Normal file
@@ -0,0 +1,41 @@
|
||||
interface NewsItem {
|
||||
title: string;
|
||||
thumbMediaId: string;
|
||||
author: string;
|
||||
digest: string;
|
||||
showCoverPic: number;
|
||||
content: string;
|
||||
contentSourceUrl: string;
|
||||
needOpenComment: number;
|
||||
onlyFansCanComment: number;
|
||||
thumbUrl: string;
|
||||
picUrl?: string; // 用于预览封面
|
||||
}
|
||||
|
||||
interface NewsItemList {
|
||||
newsItem: NewsItem[];
|
||||
}
|
||||
|
||||
interface Article {
|
||||
mediaId: string;
|
||||
content: NewsItemList;
|
||||
updateTime: number;
|
||||
}
|
||||
|
||||
const createEmptyNewsItem = (): NewsItem => {
|
||||
return {
|
||||
title: '',
|
||||
thumbMediaId: '',
|
||||
author: '',
|
||||
digest: '',
|
||||
showCoverPic: 0,
|
||||
content: '',
|
||||
contentSourceUrl: '',
|
||||
needOpenComment: 0,
|
||||
onlyFansCanComment: 0,
|
||||
thumbUrl: '',
|
||||
};
|
||||
};
|
||||
|
||||
export type { Article, NewsItem, NewsItemList };
|
||||
export { createEmptyNewsItem };
|
||||
Reference in New Issue
Block a user