144 lines
5.1 KiB
Vue
144 lines
5.1 KiB
Vue
<script>
|
|
// #ifdef H5
|
|
import draggable from 'vuedraggable'
|
|
// #endif
|
|
|
|
export default {
|
|
// #ifdef H5
|
|
components: {
|
|
draggable,
|
|
},
|
|
// #endif
|
|
props: {
|
|
storyContent: {
|
|
type: Array,
|
|
default: [],
|
|
},
|
|
allowText: {
|
|
type: [Boolean, String],
|
|
default: true,
|
|
},
|
|
allowImage: {
|
|
type: [Boolean, String],
|
|
default: true,
|
|
},
|
|
allowVideo: {
|
|
type: [Boolean, String],
|
|
default: true,
|
|
},
|
|
showSubmitButton: {
|
|
type: [Boolean, String],
|
|
default: true,
|
|
},
|
|
onClick: {
|
|
type: Function,
|
|
default: null,
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
}
|
|
},
|
|
computed: {
|
|
},
|
|
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, fileUrl, ...rest } = await wo.pickupFile2Cloud({ mediaType: 'image' })
|
|
if (_state === 'SUCCESS') {
|
|
this.storyContent.push({ image: fileUrl })
|
|
}
|
|
},
|
|
async addVideo() {
|
|
if (!Array.isArray(this.storyContent)) {
|
|
this.storyContent = []
|
|
}
|
|
let { _state, fileUrl, ...rest } = await wo.pickupFile2Cloud({ mediaType: 'video' })
|
|
if (_state === 'SUCCESS') {
|
|
this.storyContent.push({ video: fileUrl })
|
|
}
|
|
},
|
|
deleteSection(index) {
|
|
if (this.storyContent[index].text || this.storyContent[index].image || this.storyContent[index].video) {
|
|
uni.showModal({
|
|
title: this.$ll({ zhCN: '真的要删除这个段落吗？', enUS: 'Are you sure to delete this section?' }),
|
|
content: this.storyContent[index].text ? this.storyContent[index].text.substr(0, 10) : '',
|
|
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 {
|
|
wo.showToast({ type: wo.c2t.YELLOW, title: this.$ll({ zhCN: '不能删除唯一的段落！', enUS: 'Cannot delete the last section!' }) })
|
|
}
|
|
}
|
|
},
|
|
},
|
|
}
|
|
</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="width: inherit; min-height: 3em; line-height: 1.5em; padding: 5px; border: 1px solid #eee; background: white" :placeholder="$ll({zhCN:'新的段落', enUS:'New Section'})" 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%" autoplay :controls="true"></video>
|
|
<u-icon class="sectionHandler" name="close-circle-fill" size="40" style="position: absolute; top: 0; right: 0; border-radius: 100%; cursor: pointer; color: #909399" @click="deleteSection(index)"></u-icon>
|
|
</view>
|
|
<!-- #ifdef H5 -->
|
|
</draggable>
|
|
<!-- #endif -->
|
|
</view>
|
|
|
|
<view style="width: 100%; display: flex; flex-flow: column nowrap; align-items: flex-start; padding: 5px;">
|
|
<view style="display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%">
|
|
<view>
|
|
<u-button shape="circle" size="mini" :type="wo.c2t.uButton.WHITE" @click="addText" v-if="allowText === true || allowText === 'true'" style="margin: 0 5px">
|
|
<u-icon name="edit-pen-fill"></u-icon>
|
|
{{ $ll({ zhCN:'文字', enUS:'Text' }) || 'Text' }}
|
|
</u-button>
|
|
<u-button shape="circle" size="mini" :type="wo.c2t.uButton.WHITE" @click="addImage" v-if="allowImage === true || allowImage === 'true'" style="margin: 0 5px">
|
|
<u-icon name="camera-fill"></u-icon>
|
|
{{ $ll({ zhCN:'照片', enUS:'Photo' }) || 'Photo' }}
|
|
</u-button>
|
|
<u-button shape="circle" size="mini" :type="wo.c2t.uButton.WHITE" @click="addVideo" v-if="allowVideo === true || allowVideo === 'true'" style="margin: 0 5px">
|
|
<u-icon name="videocamera-fill" custom-prefix="custom-iconfont"></u-icon>
|
|
{{ $ll({ zhCN:'视频', enUS:'Video' }) || 'Video' }}
|
|
</u-button>
|
|
</view>
|
|
<view v-if="showSubmitButton===true || showSubmitButton==='true'">
|
|
<u-button size="mini" :type="wo.c2t.RED" @click="onClick">
|
|
<u-icon name="checkbox-mark"></u-icon> {{ $ll({zhCN:'发表', enUS:'Publish'}) || 'Publish' }}
|
|
</u-button>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<style lang="scss" scoped>
|
|
.u-btn {
|
|
align-items: baseline;
|
|
}
|
|
</style>
|