把基于elementUI的 StoryReader/Editor 改为基于 uview 的

ucStoryEditor/ucStoryEditor.vue

@@ -12,26 +12,35 @@ export default {
   props: {
     storyContent: {
       type: Array,
-      default: ()=>[],
+      default: [],
+    },
+    allowText: {
+      type: [Boolean, String],
+      default: true,
     },
     allowImage: {
-      type: Boolean,
+      type: [Boolean, String],
       default: true,
     },
     allowVideo: {
-      type: Boolean,
+      type: [Boolean, String],
-      default: false,
+      default: true,
+    },
+    showSubmitButton: {
+      type: [Boolean, String],
+      default: true,
+    },
+    onClick: {
+      type: Function,
+      default: null,
     },
-    //   onClick: {
-    //     type: Function,
-    //     default: null,
-    //   },
   },
   data() {
-    return {}
+    return {
+    }
+  },
+  computed: {
   },
-  onLoad() {},
-  onShow() {},
   methods: {
     addText() {
       if (!Array.isArray(this.storyContent)) {
@@ -61,8 +70,8 @@ export default {
     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:'真的要删除这个段落吗？'}),
+          title: this.$ll({ zhCN: '真的要删除这个段落吗？', enUS: 'Are you sure to delete this section?' }),
-          content: this.storyContent[index].text ? this.storyContent[index].text : '',
+          content: this.storyContent[index].text ? this.storyContent[index].text.substr(0, 10) : '',
           success: ({ confirm, cancel }) => {
             if (confirm) {
               this.storyContent.splice(index, 1)
@@ -76,7 +85,7 @@ export default {
         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'}) })
+          this.$T.showToast({ type: this.$T.YELLOW, title: this.$ll({ zhCN: '不能删除唯一的段落！', enUS: 'Cannot delete the last section!' }) })
         }
       }
     },
@@ -96,42 +105,51 @@ export default {
             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"
+            style="width: inherit; min-height: 3em; line-height: 1.5em; padding: 5px; border: 1px solid #eee; background: white"
-            placeholder=""
+            :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%"></video>
+          <video v-if="section.video" :src="section.video" style="width: 100%" autoplay :controls="true"></video>
-          <i
+          <u-icon
-            class="el-icon-circle-close"
+            class="sectionHandler"
-            style="position: absolute; top: 0px; right: -10px; border-radius: 100%; cursor: pointer; font-size: 20px"
+            name="close-circle-fill"
+            size="40"
+            style="position: absolute; top: 0; right: 0; border-radius: 100%; cursor: pointer; color: #909399"
             @click="deleteSection(index)"
-          ></i>
+          ></u-icon>
         </view>
         <!-- #ifdef H5 -->
       </draggable>
       <!-- #endif -->
     </view>
 
-    <view class="sActionBar">
+    <view style="width: 100%; display: flex; flex-flow: column nowrap; align-items: flex-start; padding: 5px;">
-      <view style="display: flex; flex-flow: row nowrap; align-items: center; width: 100%">
+      <view style="display: flex; flex-flow: row nowrap; justify-content: space-between; align-items: center; width: 100%">
-        <el-button size="mini" type="primary" icon="" @click="addText">{{ $ll({deDE:'Text', enUS:'Text', zhCN:'文字'}) }}</el-button>
+        <view>
-        <el-button v-if="allowImage" size="mini" type="primary" icon="" @click="addImage">{{ $ll({deDE:'Bild', enUS:'Image', zhCN:'图片'}) }}</el-button>
+          <u-button shape="circle" size="mini" :type="$T.WHITE_BUTTON" @click="addText" v-if="allowText === true || allowText === 'true'" style="margin: 0 5px">
-        <el-button v-if="allowVideo" size="mini" type="primary" icon="" @click="addVideo">{{ $ll({deDE:'Video', enUS:'Video', zhCN:'视频'}) }}</el-button>
+            <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>
-.sActionBar {
+.u-btn {
-  width: 100%;
+  align-items: baseline;
-  display: flex;
-  flex-flow: column nowrap;
-  align-items: flex-start;
-  padding: 5px;
-  .u-btn {
-    margin: 5px 5px;
-  }
 }
 </style>

ucStoryReader/ucStoryReader.vue

@@ -3,7 +3,7 @@ export default {
   props: {
     storyContent: {
       type: Array,
-      default: ()=>[],
+      default: [],
     },
   },
   data() {
@@ -12,27 +12,18 @@ export default {
   },
   computed: {
   },
-  onLoad() {},
-  onShow() {
-  },
   methods: {},
 }
 </script>
 
 <template>
-  <view style="display: flex; flex-flow: column nowrap;">
+  <view style="display: flex; flex-flow: column nowrap">
-      <view
+    <view v-for="(section, index) of storyContent" :key="index" style="display: flex; flex-flow: column nowrap; padding: 5px; position: relative">
-        v-for="(section, index) of storyContent"
+      <text v-if="section.text !== undefined" style="box-sizing: border-box; width: 100%">{{ section.text }}</text>
-        :key="index"
+      <img v-if="section.image" :src="section.image" style="width: 100%" />
-        style="display: flex; flex-flow: column nowrap; padding: 5px; position: relative;"
+      <video v-if="section.video" :src="section.video" style="width: 100%" autoplay :controls="true"></video>
-      >
+    </view>
-        <text v-if="section.text !== undefined" style="box-sizing: border-box; width: 100%; padding: 5px;">{{ section.text }}</text>
-        <img v-if="section.image" :src="section.image" style="width: 100%;" />
-        <video v-if="section.video" :src="section.video" style="width: 100%;" autoplay></video>
-      </view>
   </view>
 </template>
 
-<style lang="scss" scoped>
+<style lang="scss" scoped></style>
-
-</style>