feat(group): (#460) 圈外发帖

src/page/PostMenu.vue

@@ -58,14 +58,14 @@
             <img src="../images/[email protected]">
             <span>提问</span>
           </div>
-          <!--           <div
-          v-if="open"
-          key="ico_fatie"
-          @click="to('/post/fatie')"
-          class="m-box-model m-aln-center m-post-menu-item">
+          <div
+            v-if="open"
+            key="ico_fatie"
+            class="m-box-model m-aln-center m-post-menu-item"
+            @click="to('/groups/create_post')">
             <img src="../images/[email protected]">
             <span>发帖</span>
-          </div> -->
+          </div>
         </transition-group>
         <transition name="pop">
           <button

src/page/group/GroupPostCreate.vue

@@ -10,6 +10,12 @@
         @click="onSubmit">发布</span>
     </common-header>
 
+    <form-select-item
+      v-if="!groupID"
+      v-model="group.name"
+      label="选择圈子"
+      @click="selectGroup" />
+
     <main>
       <div class="title-wrap">
         <input
@@ -30,31 +36,42 @@
       </div>
     </main>
 
+    <choose-group
+      v-if="!groupID"
+      ref="chooseGroup"
+      @change="onGroupChange"/>
+
   </div>
 </template>
 
 <script>
+import ChooseGroup from "./components/ChooseGroup.vue";
+
 export default {
   name: "GroupPostCreate",
+  components: {
+    ChooseGroup
+  },
   data() {
     return {
       title: "",
-      content: ""
+      content: "",
+      group: {}
     };
   },
   computed: {
     groupID() {
       return this.$route.query.group;
     },
     disabled() {
+      if (!this.groupID && !this.group.id) return true;
       return !this.title || !this.content;
     }
   },
-  created() {},
   methods: {
     async onSubmit() {
       const params = {
-        groupId: this.groupID,
+        groupId: this.groupID || this.group.id,
         title: this.title,
         body: this.content,
         summary: this.content
@@ -67,6 +84,13 @@ export default {
           params: { groupID: data.post.group_id, postID: data.post.id }
         });
       }
+    },
+
+    selectGroup() {
+      this.$refs.chooseGroup.show();
+    },
+    onGroupChange(group) {
+      this.group = group;
     }
   }
 };

src/page/group/components/ChooseGroup.vue

@@ -0,0 +1,70 @@
+<template>
+  <transition name="popr">
+    <div v-if="visible" class="p-choose-group">
+      <common-header :back="close">选择圈子</common-header>
+
+      <ul class="list">
+        <li
+          v-for="group in list"
+          :key="group.id"
+          @click.capture.stop="selectGroup(group)">
+          <group-item :group="group"/>
+        </li>
+      </ul>
+
+    </div>
+
+  </transition>
+</template>
+
+<script>
+import GroupItem from "./GroupItem.vue";
+
+export default {
+  name: "ChooseGroup",
+  components: { GroupItem },
+  data() {
+    return {
+      visible: false,
+      list: []
+    };
+  },
+  created() {
+    this.fetchList();
+  },
+  methods: {
+    show() {
+      this.visible = true;
+    },
+    close() {
+      this.visible = false;
+    },
+    async fetchList() {
+      const list = await this.$store.dispatch("group/getMyGroups");
+      this.list = list;
+    },
+    selectGroup(group) {
+      this.$emit("change", group);
+      this.close();
+    }
+  }
+};
+</script>
+
+<style lang="less" scoped>
+.p-choose-group {
+  position: fixed;
+  top: 0;
+  left: 0;
+  bottom: 0;
+  right: 0;
+  z-index: 11;
+  background-color: #f4f5f5;
+
+  .list {
+    > li {
+      border-bottom: 1px solid @border-color;
+    }
+  }
+}
+</style>