<template>
|
<Card class="rich-edit-card">
|
<div class="rich-edit-card-title">{{ title }}</div>
|
<slot>
|
<RichContent v-if="content.length > 0" :content="content" />
|
<div class="rich-edit-card-add-wrapper" @click="handleClick">
|
<img :src="AddIcon" class="rich-edit-card-add-icon" />
|
<div class="rich-edit-card-add-text">可添加图文介绍</div>
|
<div class="rich-edit-card-add-danger">去编辑</div>
|
</div>
|
</slot>
|
</Card>
|
</template>
|
|
<script setup lang="ts">
|
import Card from '../Card/Card.vue';
|
import AddIcon from '@/assets/components/rich-card/icon-add.png';
|
import Taro from '@tarojs/taro';
|
import RichContent from './RichContent.vue';
|
import { EmptyTextEditorItem } from '@12333/constants';
|
|
defineOptions({
|
name: 'RichEditCard',
|
});
|
|
type Props = {
|
title?: string;
|
content?: API.IntroInfo[];
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
content: () => [],
|
});
|
|
const emit = defineEmits<{
|
(e: 'update:content', content: Props['content']): void;
|
}>();
|
|
function handleClick() {
|
Taro.navigateTo({
|
url: RouterPath.editRichContent,
|
events: {
|
addRichContent: function (data: { content: API.IntroInfo[] }) {
|
console.log('EditRichContent onChange', data.content);
|
emit(
|
'update:content',
|
data.content.length > 0 ? data.content : [{ ...EmptyTextEditorItem }]
|
);
|
},
|
},
|
success: function (res) {
|
res.eventChannel.emit('acceptRichContent', { content: props.content });
|
},
|
});
|
}
|
</script>
|
|
<style lang="scss">
|
@import '@/styles/common.scss';
|
|
.rich-edit-card {
|
padding: 28px 32px;
|
|
.rich-edit-card-title {
|
margin-bottom: 20px;
|
font-size: 28px;
|
color: boleGetCssVar('text-color', 'primary');
|
// font-weight: bold;
|
}
|
|
.rich-edit-card-add-wrapper {
|
margin-top: 32px;
|
display: flex;
|
justify-content: center;
|
align-items: center;
|
|
.rich-edit-card-add-icon {
|
width: 20px;
|
height: 20px;
|
margin-right: 10px;
|
}
|
|
.rich-edit-card-add-text,
|
.rich-edit-card-add-danger {
|
line-height: 1;
|
font-size: 26px;
|
}
|
|
.rich-edit-card-add-text {
|
color: #8c8c8c;
|
margin-right: 6px;
|
}
|
|
.rich-edit-card-add-danger {
|
color: boleGetCssVar('color', 'primary');
|
}
|
}
|
|
.nut-textarea {
|
padding: 0;
|
}
|
}
|
|
.rich-edit-content {
|
.rich-content-item {
|
margin-bottom: 10px;
|
|
&:last-child {
|
margin-bottom: 0;
|
}
|
}
|
|
.rich-content-image-item {
|
display: block;
|
}
|
|
.rich-content-text-item {
|
word-break: break-all;
|
white-space: pre-line;
|
font-size: 30px;
|
line-height: 50px;
|
color: boleGetCssVar('text-color', 'primary');
|
}
|
|
.rich-content-video-item {
|
width: 100%;
|
height: 300px;
|
}
|
|
&.small {
|
.rich-content-text-item {
|
font-size: 24px;
|
line-height: 36px;
|
}
|
}
|
}
|
</style>
|
