wo-user-part-uniapp/ucStoryEditor/ucStoryEditor.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 this.$T.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 this.$T.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 {
          this.$T.showToast({ type: this.$T.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="$T.WHITE_BUTTON" @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="$T.WHITE_BUTTON" @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="$T.WHITE_BUTTON" @click="addVideo" v-if="allowVideo === true || allowVideo === 'true'" style="margin: 0 5px">
            <u-icon name="videocamera-fill" custom-prefix="log-icon"></u-icon>
            {{ $ll({ zhCN:'视频', enUS:'Video' }) || 'Video' }}
          </u-button>
        </view>
        <view v-if="showSubmitButton===true || showSubmitButton==='true'">
          <u-button size="mini" :type="$T.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>