Skip to content

phsl / admin

Go to a project
Commit b5fb700e by dhb52
Options

refactor: mp/draft拆分组件

parent 30b8eeac
Showing with 619 additions and 0 deletions
src/views/mp/draft/components/CoverSelect.vue 0 → 100644
<template>
<div>
<p>封面:</p>
<div class="thumb-div">
<el-image
v-if="newsItem.thumbUrl"
style="width: 300px; max-height: 300px"
:src="newsItem.thumbUrl"
fit="contain"
/>
<Icon
v-else
icon="ep:plus"
class="avatar-uploader-icon"
:class="isFirst ? 'avatar' : 'avatar1'"
/>
<div class="thumb-but">
<el-upload
:action="UPLOAD_URL"
:headers="HEADERS"
multiple
:limit="1"
:file-list="fileList"
:data="uploadData"
:before-upload="onBeforeUpload"
:on-error="onUploadError"
:on-success="onUploadSuccess"
>
<template #trigger>
<el-button size="small" type="primary" :loading="isUploading" disabled="isUploading">
{{ isUploading ? '正在上传' : '本地上传' }}
</el-button>
</template>
<el-button
size="small"
type="primary"
@click="showImageDialog = true"
style="margin-left: 5px"
>
素材库选择
</el-button>
<template #tip>
<div class="el-upload__tip">支持 bmp/png/jpeg/jpg/gif 格式，大小不超过 2M</div>
</template>
</el-upload>
</div>
<el-dialog
title="选择图片"
v-model="showImageDialog"
width="80%"
append-to-body
destroy-on-close
>
<WxMaterialSelect
:objData="{ type: 'image', accountId: accountId }"
@select-material="onMaterialSelected"
/>
</el-dialog>
</div>
</div>
</template>
<script setup lang="ts">
import WxMaterialSelect from '@/views/mp/components/wx-material-select/main.vue'
import { getAccessToken } from '@/utils/auth'
import type { UploadFiles, UploadProps, UploadRawFile } from 'element-plus'
import { NewsItem } from './types'
const message = useMessage()
const UPLOAD_URL = 'http://localhost:8000/upload/' //import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-permanent' // 上传永久素材的地址
const HEADERS = { Authorization: 'Bearer ' + getAccessToken() } // 设置上传的请求头部
const props = defineProps<{
modelValue: NewsItem
isFirst: boolean
}>()
const emit = defineEmits<{
(e: 'update:modelValue', v: NewsItem)
}>()
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<UploadFiles>([])
interface UploadData {
type: 'image' | 'video' | 'audio'
accountId?: number
}
const uploadData: UploadData = reactive({
type: 'image',
accountId: accountId
})
const isUploading = ref(false)
/** 素材选择完成事件*/
const onMaterialSelected = (item: any) => {
showImageDialog.value = false
newsItem.value.thumbMediaId = item.mediaId
newsItem.value.thumbUrl = item.url
}
// ======================== 文件上传 ========================
const onBeforeUpload: UploadProps['beforeUpload'] = (rawFile: UploadRawFile) => {
const isType = ['image/jpeg', 'image/png', 'image/gif', 'image/bmp', 'image/jpg'].includes(
rawFile.type
)
if (!isType) {
message.error('上传图片格式不对!')
return false
}
if (rawFile.size / 1024 / 1024 > 2) {
message.error('上传图片大小不能超过 2M!')
return false
}
// 校验通过
return true
}
const onUploadSuccess: UploadProps['onSuccess'] = (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
}
const onUploadError = (err: Error) => {
message.error('上传失败: ' + err.message)
}
</script>
<style lang="scss" scoped>
.el-upload__tip {
margin-left: 5px;
}
.thumb-div {
display: inline-block;
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>
src/views/mp/draft/components/DraftTable.vue 0 → 100644
<template>
<div class="waterfall" v-loading="props.loading">
<template v-for="item in props.list" :key="item.articleId">
<div class="waterfall-item" v-if="item.content && item.content.newsItem">
<WxNews :articles="item.content.newsItem" />
<!-- 操作按钮 -->
<el-row>
<el-button
type="success"
circle
@click="emit('publish', item)"
v-hasPermi="['mp:free-publish:submit']"
>
<Icon icon="fa:upload" />
</el-button>
<el-button
type="primary"
circle
@click="emit('update', item)"
v-hasPermi="['mp:draft:update']"
>
<Icon icon="ep:edit" />
</el-button>
<el-button
type="danger"
circle
@click="emit('delete', item)"
v-hasPermi="['mp:draft:delete']"
>
<Icon icon="ep:delete" />
</el-button>
</el-row>
</div>
</template>
</div>
</template>
<script setup lang="ts">
import WxNews from '@/views/mp/components/wx-news/main.vue'
import { Article } from './types'
const props = defineProps<{
list: Article[]
loading: boolean
}>()
const emit = defineEmits<{
(e: 'publish', v: Article)
(e: 'update', v: Article)
(e: 'delete', v: Article)
}>()
</script>
<style lang="scss" scoped>
.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;
}
}
@media (min-width: 992px) and (max-width: 1300px) {
.waterfall {
column-count: 3;
}
}
@media (min-width: 768px) and (max-width: 991px) {
.waterfall {
column-count: 2;
}
}
@media (max-width: 767px) {
.waterfall {
column-count: 1;
}
}
</style>
src/views/mp/draft/components/NewsForm.vue 0 → 100644
<template>
<el-container>
<el-aside width="40%">
<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">
<el-button type="info" circle size="small" @click="() => moveDownNews(index)">
<Icon icon="ep:arrow-down-bold" />
</el-button>
<el-button
v-if="isCreating"
type="danger"
circle
size="small"
@click="() => removeNews(index)"
>
<Icon icon="ep:delete" />
</el-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">
<el-button
v-if="newsList.length > index + 1"
circle
type="info"
size="small"
@click="() => moveDownNews(index)"
>
<Icon icon="ep:arrow-down-bold" />
</el-button>
<el-button
v-if="index > 0"
type="info"
circle
size="small"
@click="() => moveUpNews(index)"
>
<Icon icon="ep:arrow-up-bold" />
</el-button>
<el-button
v-if="isCreating"
type="danger"
size="small"
circle
@click="() => removeNews(index)"
>
<Icon icon="ep:delete" />
</el-button>
</div>
</div>
</div>
<el-row justify="center" class="ope-row">
<el-button
type="primary"
circle
@click="plusNews"
v-if="newsList.length < 8 && isCreating"
>
<Icon icon="ep:plus" />
</el-button>
</el-row>
</div>
</el-aside>
<el-main>
<div v-if="newsList.length > 0">
<!-- 标题、作者、原文地址 -->
<el-row :gutter="20">
<el-input v-model="activeNewsItem.title" placeholder="请输入标题（必填）" />
<el-input
v-model="activeNewsItem.author"
placeholder="请输入作者"
style="margin-top: 5px"
/>
<el-input
v-model="activeNewsItem.contentSourceUrl"
placeholder="请输入原文地址"
style="margin-top: 5px"
/>
</el-row>
<!-- 封面和摘要 -->
<el-row :gutter="20">
<el-col :span="12">
<CoverSelect v-model="activeNewsItem" :is-first="activeNewsIndex === 0" />
</el-col>
<el-col :span="12">
<p>摘要:</p>
<el-input
:rows="8"
type="textarea"
v-model="activeNewsItem.digest"
placeholder="请输入摘要"
class="digest"
maxlength="120"
/>
</el-col>
</el-row>
<!--富文本编辑器组件-->
<el-row>
<Editor v-model="activeNewsItem.content" :editor-config="editorConfig" />
</el-row>
</div>
</el-main>
</el-container>
</template>
<script setup lang="ts">
import { Editor } from '@/components/Editor'
import { createEditorConfig } from '../editor-config'
import CoverSelect from './CoverSelect.vue'
import { type NewsItem, createEmptyNewsItem } from './types'
const message = useMessage()
const props = defineProps<{
isCreating: boolean
modelValue: NewsItem[] | null
}>()
const accountId = inject<number>('accountId')
// ========== 文件上传 ==========
const UPLOAD_URL = import.meta.env.VITE_BASE_URL + '/admin-api/mp/material/upload-permanent' // 上传永久素材的地址
const editorConfig = createEditorConfig(UPLOAD_URL, accountId)
// v-model=newsList
const emit = defineEmits<{
(e: 'update:modelValue', v: NewsItem[])
}>()
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<NewsItem>(() => newsList.value[activeNewsIndex.value])
// 将图文向下移动
const moveDownNews = (index: number) => {
const temp = newsList.value[index]
newsList.value[index] = newsList.value[index + 1]
newsList.value[index + 1] = temp
activeNewsIndex.value = index + 1
}
// 将图文向上移动
const moveUpNews = (index: number) => {
const temp = newsList.value[index]
newsList.value[index] = newsList.value[index - 1]
newsList.value[index - 1] = temp
activeNewsIndex.value = index - 1
}
// 删除指定 index 的图文
const removeNews = async (index: number) => {
try {
await message.confirm('确定删除该图文吗?')
newsList.value.splice(index, 1)
if (activeNewsIndex.value === index) {
activeNewsIndex.value = 0
}
} catch {}
}
// 添加一个图文
const plusNews = () => {
newsList.value.push(createEmptyNewsItem())
activeNewsIndex.value = newsList.value.length - 1
}
</script>
<style lang="scss" scoped>
.ope-row {
padding-top: 5px;
margin-top: 5px;
text-align: center;
border-top: 1px solid #eaeaea;
}
.el-row {
margin-bottom: 20px;
}
.el-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;
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;
}
.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>
src/views/mp/draft/components/index.ts 0 → 100644
import type { Article, NewsItem, NewsItemList } from './types'
import { createEmptyNewsItem } from './types'
import DraftTable from './DraftTable.vue'
import NewsForm from './NewsForm.vue'
export { DraftTable, NewsForm, createEmptyNewsItem }
export type { Article, NewsItem, NewsItemList }
src/views/mp/draft/components/types.ts 0 → 100644
interface NewsItem {
title: string
thumbMediaId: string
author: string
digest: string
showCoverPic: string
content: string
contentSourceUrl: string
needOpenComment: string
onlyFansCanComment: string
thumbUrl: string
}
interface NewsItemList {
newsItem: NewsItem[]
}
interface Article {
mediaId: string
content: NewsItemList
updateTime: number
}
const createEmptyNewsItem = (): NewsItem => {
return {
title: '',
thumbMediaId: '',
author: '',
digest: '',
showCoverPic: '',
content: '',
contentSourceUrl: '',
needOpenComment: '',
onlyFansCanComment: '',
thumbUrl: ''
}
}
export type { Article, NewsItem, NewsItemList }
export { createEmptyNewsItem }
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment