138 lines
4.3 KiB
Vue
138 lines
4.3 KiB
Vue
<script>
|
|
// #ifdef H5
|
|
import draggable from 'vuedraggable'
|
|
// #endif
|
|
|
|
export default {
|
|
// #ifdef H5
|
|
components: {
|
|
draggable,
|
|
},
|
|
// #endif
|
|
props: {
|
|
storyContent: {
|
|
type: Array,
|
|
default: ()=>[],
|
|
},
|
|
allowImage: {
|
|
type: Boolean,
|
|
default: true,
|
|
},
|
|
allowVideo: {
|
|
type: Boolean,
|
|
default: false,
|
|
},
|
|
// onClick: {
|
|
// type: Function,
|
|
// default: null,
|
|
// },
|
|
},
|
|
data() {
|
|
return {}
|
|
},
|
|
onLoad() {},
|
|
onShow() {},
|
|
methods: {
|
|
addText() {
|
|
if (!Array.isArray(this.storyContent)) {
|
|
this.storyContent = []
|
|
}
|
|
this.storyContent.push({ text: '' })
|
|
console.log(this.storyContent)
|
|
},
|
|
async addImage() {
|
|
if (!Array.isArray(this.storyContent)) {
|
|
this.storyContent = []
|
|
}
|
|
let { _state, fileID, requestId } = await this.$T.pickupFile2Cloud({ mediaType: 'image' })
|
|
if (_state === 'SUCCESS') {
|
|
this.storyContent.push({ image: fileID })
|
|
}
|
|
},
|
|
async addVideo() {
|
|
if (!Array.isArray(this.storyContent)) {
|
|
this.storyContent = []
|
|
}
|
|
let { _state, fileID, requestId } = await this.$T.pickupFile2Cloud({ mediaType: 'video' })
|
|
if (_state === 'SUCCESS') {
|
|
this.storyContent.push({ video: fileID })
|
|
}
|
|
},
|
|
deleteSection(index) {
|
|
if (this.storyContent[index].text || this.storyContent[index].image || this.storyContent[index].video) {
|
|
uni.showModal({
|
|
title: this.$ll({deDE:'Sind Sie sicher den Abschnitt zu entfernen?', enUS:'Are you sure to delete this section?', zhCN:'真的要删除这个段落吗？'}),
|
|
content: this.storyContent[index].text ? this.storyContent[index].text : '',
|
|
success: ({ confirm, cancel }) => {
|
|
if (confirm) {
|
|
this.storyContent.splice(index, 1)
|
|
if (this.storyContent.length === 0) {
|
|
this.storyContent.push({ text: '' })
|
|
}
|
|
}
|
|
},
|
|
})
|
|
} else {
|
|
if (this.storyContent.length > 1) {
|
|
this.storyContent.splice(index, 1)
|
|
} else {
|
|
this.$message({ type: 'warning', message: this.$ll({zhCN:'不能删除唯一的段落', enUS:'Cannot delete the last section', deDE:'Der letzte Abschnitt kann nicht entfernen'}) })
|
|
}
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<view style="display: flex; flex-flow: column nowrap; box-sizing: border-box">
|
|
<view>
|
|
<!-- #ifdef H5 -->
|
|
<draggable v-model="storyContent">
|
|
<!-- #endif -->
|
|
<view v-for="(section, index) of storyContent" :key="index" style="margin: 5px; position: relative">
|
|
<textarea
|
|
v-if="section.text !== undefined"
|
|
v-model="section.text"
|
|
maxlength="-1"
|
|
auto-height="true"
|
|
style="box-sizing: border-box; line-height: 1.5em; min-height: 3em; width: 100%; padding: 0 5px; border: 1px solid #eee; background: white"
|
|
placeholder=""
|
|
placeholder-style="font-size:small"
|
|
></textarea>
|
|
<img v-if="section.image" :src="section.image" style="width: 100%" />
|
|
<video v-if="section.video" :src="section.video" style="width: 100%"></video>
|
|
<i
|
|
class="el-icon-circle-close"
|
|
style="position: absolute; top: 0px; right: -10px; border-radius: 100%; cursor: pointer; font-size: 20px"
|
|
@click="deleteSection(index)"
|
|
></i>
|
|
</view>
|
|
<!-- #ifdef H5 -->
|
|
</draggable>
|
|
<!-- #endif -->
|
|
</view>
|
|
|
|
<view class="sActionBar">
|
|
<view style="display: flex; flex-flow: row nowrap; align-items: center; width: 100%">
|
|
<el-button size="mini" type="primary" icon="" @click="addText">{{ $ll({deDE:'Text', enUS:'Text', zhCN:'文字'}) }}</el-button>
|
|
<el-button v-if="allowImage" size="mini" type="primary" icon="" @click="addImage">{{ $ll({deDE:'Bild', enUS:'Image', zhCN:'图片'}) }}</el-button>
|
|
<el-button v-if="allowVideo" size="mini" type="primary" icon="" @click="addVideo">{{ $ll({deDE:'Video', enUS:'Video', zhCN:'视频'}) }}</el-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.sActionBar {
|
|
width: 100%;
|
|
display: flex;
|
|
flex-flow: column nowrap;
|
|
align-items: flex-start;
|
|
padding: 5px;
|
|
.u-btn {
|
|
margin: 5px 5px;
|
|
}
|
|
}
|
|
</style>
|