<template>
|
<div :class="['rich-edit-content', size]">
|
<template v-for="(item, index) in content" :key="index">
|
<!-- <AutoWidthImage
|
v-if="item.type === LifeRechargeConstants.EditorType.Image"
|
wrapperClassName="rich-content-item rich-content-image-item"
|
:src="setOSSLink(item.path)"
|
/> -->
|
<PreviewImage
|
v-if="item.type === LifeRechargeConstants.EditorType.Image"
|
wrapperClassName="rich-content-item rich-content-image-item"
|
:src="setOSSLink(item.path)"
|
style="max-width: 100%"
|
mode="widthFix"
|
/>
|
<Video
|
v-else-if="item.type === LifeRechargeConstants.EditorType.Video"
|
class="rich-content-item rich-content-video-item"
|
:src="setOSSLink(item.path)"
|
></Video>
|
<div v-else class="rich-content-item rich-content-text-item">
|
{{ item.content }}
|
</div>
|
</template>
|
</div>
|
</template>
|
|
<script setup lang="ts">
|
import AutoWidthImage from '../Image/AutoWidthImage.vue';
|
import { Video } from '@tarojs/components';
|
import { LifeRechargeConstants, LifePayIntroInfoOutput } from '@life-payment/core-vue';
|
import { setOSSLink } from '../../utils';
|
import PreviewImage from '../Image/PreviewImage.vue';
|
|
defineOptions({
|
name: 'RichContent',
|
});
|
|
type Props = {
|
content?: LifePayIntroInfoOutput[];
|
size?: 'small' | 'default' | 'large';
|
};
|
|
const props = withDefaults(defineProps<Props>(), {
|
content: () => [],
|
size: 'default',
|
});
|
</script>
|
