chore(SPA): 创建话题

issue #467
slimkit · Dec 5, 2018 · d2b5b7e · d2b5b7e
1 parent 2b39fa8
commit d2b5b7e
Show file tree

Hide file tree

Showing 4 changed files with 182 additions and 16 deletions.
diff --git a/resources/spa/src/components/common/TextareaInput.vue b/resources/spa/src/components/common/TextareaInput.vue
@@ -1,12 +1,6 @@
 <template>
-  <div
-    :class="{'auto-height': !rows}"
-    class="textarea-wrap"
-  >
-    <div
-      v-if="!rows"
-      class="textarea-shadow c-textarea-input"
-    >
+  <div :class="{'auto-height': !rows}" class="textarea-wrap">
+    <div v-if="!rows" class="textarea-shadow c-textarea-input">
       {{ value }}
     </div> <!-- 用于撑起文本框自适应高度 -->
     <textarea
@@ -19,10 +13,7 @@
       class="c-textarea-input"
       @input="$emit('input', $event.target.value)"
     />
-    <span
-      v-show="maxlength && value.length > warnlength"
-      class="word-length"
-    >
+    <span v-show="maxlength && value.length > warnlength" class="word-length">
       {{ value.length }} / {{ maxlength }}
     </span>
   </div>
@@ -55,6 +46,8 @@ export default {
     min-height: 100px;
     word-wrap: break-word;
     word-break: break-all;
+    padding-bottom: 28px;
+    font-size: 30px;
   }
 
   textarea {

diff --git a/resources/spa/src/page/topic/TopicCreate.vue b/resources/spa/src/page/topic/TopicCreate.vue
@@ -0,0 +1,164 @@
+<template>
+  <div class="p-topic-create">
+    <CommonHeader>
+      创建话题
+      <span
+        slot="right"
+        class="create-btn"
+        :class="{active: !disabled}"
+        @click="beforeCreate"
+        v-text="'创建'"
+      />
+    </CommonHeader>
+
+    <main>
+      <form class="form" onsubmit="return false">
+        <div
+          v-if="!node"
+          class="coverage"
+          @click="$refs.uploader.select()"
+        >
+          <svg class="m-style-svg m-svg-big">
+            <use xlink:href="#icon-camera" />
+          </svg>
+          上传话题封面
+        </div>
+        <div
+          v-else
+          class="coverage"
+          :style="{'background-image': `url(${src})`}"
+          @click="$refs.uploader.select()"
+        />
+        <label class="title">
+          <input
+            type="text"
+            maxlength="10"
+            placeholder="输入话题标题，10字以内（必填）"
+          >
+        </label>
+        <label class="description">
+          <TextareaInput
+            v-model="description"
+            type="text"
+            placeholder="简单介绍一下话题内容"
+            :maxlength="50"
+            :warnlength="30"
+            :rows="4"
+          />
+        </label>
+      </form>
+      <p class="tips">话题创建成功后，标题不可更改</p>
+    </main>
+
+    <ImageUploader
+      ref="uploader"
+      v-model="node"
+      type="storage"
+      @update:src="src = $event"
+    />
+  </div>
+</template>
+
+<script>
+import ImageUploader from '@/components/common/ImageUploader'
+import TextareaInput from '@/components/common/TextareaInput'
+
+export default {
+  name: 'TopicCreate',
+  components: {
+    ImageUploader,
+    TextareaInput,
+  },
+  data () {
+    return {
+      title: '',
+      node: null,
+      description: '',
+      src: '',
+    }
+  },
+  computed: {
+    disabled () {
+      return false
+    },
+    form () {
+      return {
+        name: this.title,
+        logo: this.node,
+        desc: this.description,
+      }
+    },
+  },
+  methods: {
+    beforeCreate () {
+      if (this.disabled) return
+    },
+  },
+}
+</script>
+
+<style lang="less" scoped>
+.p-topic-create {
+  background-color: #fff;
+  height: 100%;
+
+  .create-btn {
+    color: @gray;
+
+    &.active {
+      color: @primary;
+    }
+  }
+
+  .coverage {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 380px;
+    color: #b3b3b3;
+    background: #ededed no-repeat center;
+    background-size: cover;
+
+    .m-svg-big {
+      margin-right: 20px;
+      width: 56px;
+      height: 56px;
+    }
+  }
+
+  .form {
+    display: flex;
+    flex-direction: column;
+
+    .title {
+      height: 120px;
+      padding: 0 20px;
+      border-bottom: 1px solid @border-color; /* no */
+
+      input {
+        font-size: 36px;
+        height: 100%;
+        width: 100%;
+      }
+    }
+
+    .description {
+      padding: 0 20px;
+      border-bottom: 1px solid @border-color; /* no */
+    }
+  }
+
+  .tips {
+    position: fixed;
+    bottom: 30px;
+    left: 30px;
+    color: #999;
+    font-size: 26px;
+
+    &::before {
+      content: '* ';
+      color: @error;
+    }
+  }
+}
+</style>
diff --git a/resources/spa/src/page/topic/TopicHome.vue b/resources/spa/src/page/topic/TopicHome.vue
@@ -12,16 +12,14 @@
       <div slot="right" class="buttons">
         <RouterLink
           tag="svg"
-          append
-          to="search"
+          :to="{name:'TopicSearch'}"
           class="m-style-svg m-svg-def"
         >
           <use xlink:href="#icon-search" />
         </RouterLink>
         <RouterLink
           tag="svg"
-          append
-          to="create"
+          :to="{name:'TopicCreate'}"
           class="m-style-svg m-svg-def"
         >
           <use xlink:href="#icon-topic-create" />

diff --git a/resources/spa/src/routers/topic.js b/resources/spa/src/routers/topic.js
@@ -1,11 +1,22 @@
 import TopicHome from '@/page/topic/TopicHome.vue'
+import TopicCreate from '@/page/topic/TopicCreate.vue'
 
 export default [
   {
     path: '/topic',
+    name: 'TopicHome',
     component: TopicHome,
     meta: {
       title: '话题',
     },
   },
+  {
+    path: '/topic/create',
+    name: 'TopicCreate',
+    component: TopicCreate,
+    meta: {
+      title: '创建话题',
+      requiresAuth: true,
+    },
+  },
 ]