feat(feed): 新增动态(更多操作)/[收藏/取消收藏、申请动态置顶、删除动态]

src/App.vue

@@ -15,8 +15,11 @@
       <actionsheet />
       <comment-input />
 
+      <apply-top />
+
       <info-tips />
       <choose-tags />
+
     </div>
   </div>
 </template>
@@ -41,6 +44,8 @@ import Reward from "@/components/reward.vue";
 import chooseTags from "@/page/chooseTags.vue";
 // 提示性 弹窗
 import infoTips from "@/components/infoTips.vue";
+// 通用置顶弹窗
+import applyTop from "@/components/applyForTop.vue";
 
 export default {
   name: "app",
@@ -50,6 +55,7 @@ export default {
     actionsheet,
     commentInput,
     infoTips,
+    applyTop,
 
     SvgIcon,
 

src/components/FeedCard/FeedCard.vue

@@ -70,6 +70,7 @@
 </template>
 <script>
 import bus from "@/bus.js";
+import { mapState } from "vuex";
 import { time2txt } from "@/filters.js";
 import FeedImage from "@/components/FeedCard/FeedImage.vue";
 import CommentItem from "@/components/FeedCard/CommentItem.vue";
@@ -93,6 +94,10 @@ export default {
     }
   },
   computed: {
+    ...mapState(["CURRENTUSER"]),
+    isMine() {
+      return this.feed.user_id === this.CURRENTUSER.id;
+    },
     feedID() {
       return this.feed.id;
     },
@@ -143,6 +148,14 @@ export default {
     body() {
       return this.feed.feed_content || "";
     },
+    has_collect: {
+      get() {
+        return this.feed.has_collect;
+      },
+      set(val) {
+        this.feed.has_collect = val;
+      }
+    },
     timeLineText() {
       const text = time2txt(this.time);
       const len = text.length;
@@ -210,21 +223,84 @@ export default {
       });
     },
     handelMore() {
-      const actions = [
+      const base = [
         {
-          text: "收藏",
+          text: this.has_collect ? "取消收藏" : "收藏",
           method: () => {
-            console.log("收藏");
-          }
-        },
-        {
-          text: "举报",
-          method: () => {
-            console.log("举报");
+            // POST /feeds/:feed/collections
+            // DELETE /feeds/:feed/uncollect
+            let url;
+            let txt;
+            let method;
+            this.has_collect
+              ? ((txt = "取消收藏"),
+                (method = "delete"),
+                (url = `/feeds/${this.feedID}/uncollect`))
+              : ((txt = "已加入我的收藏"),
+                (method = "post"),
+                (url = `/feeds/${this.feedID}/collections`));
+            this.$http({
+              url,
+              method,
+              validataStatus: s => s === 204 || s === 201
+            }).then(() => {
+              this.$Message.success(txt);
+              this.has_collect = !this.has_collect;
+            });
           }
         }
       ];
-      bus.$emit("actionSheet", actions, "取消");
+      const actions = this.isMine
+        ? [
+            {
+              text: "申请动态置顶",
+              method: () => {
+                bus.$emit("apply-top:feed", this.feedID);
+              }
+            },
+            {
+              text: "删除动态",
+              method: () => {
+                // DELETE /feeds/:feed
+                setTimeout(() => {
+                  bus.$emit(
+                    "actionSheet",
+                    [
+                      {
+                        text: "删除",
+                        style: {
+                          color: "#f4504d"
+                        },
+                        method: () => {
+                          this.$http
+                            .delete(`/feeds/${this.feedID}`, {
+                              validataStatus: s => s === 204
+                            })
+                            .then(() => {
+                              this.$Message.success("删除动态成功");
+                              this.$nextTick(() => {
+                                this.$el.remove();
+                              });
+                            });
+                        }
+                      }
+                    ],
+                    "取消",
+                    "确认删除?"
+                  );
+                }, 200);
+              }
+            }
+          ]
+        : [
+            {
+              text: "举报",
+              method: () => {
+                console.log("举报");
+              }
+            }
+          ];
+      bus.$emit("actionSheet", [...base, ...actions], "取消");
     },
     commentAction({ isMine = false, placeholder, reply_user }) {
       isMine

src/components/actionsheet.vue

@@ -56,6 +56,7 @@ export default {
             (btn.methods = (btn, index) => {
               btn.method(btn, index);
               this.show = false;
+              this.scrollable = true;
             });
           return btn;
         });

src/components/applyForTop.vue

@@ -0,0 +1,158 @@
+<template>
+  <transition name='toast'>
+    <div v-if='show' class="m-box-model m-pos-f" style="background-color: #f4f5f6; z-index: 101">
+      <header class="m-box m-aln-center m-head-top m-main m-bb1">
+        <div class="m-flex-grow1">
+          <svg class="m-style-svg m-svg-def" @click="cancel">
+            <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-back"></use>
+          </svg>
+        </div>
+        <div class="m-flex-grow1 m-text-c m-head-top-title">
+          <span>申请置顶</span>
+        </div>
+        <div class="m-flex-grow1 m-text-r"></div>
+      </header>
+      <main class="m-box-model m-aln-center m-justify-center">
+        <div class="m-box-model m-lim-width m-main">
+          <div class="m-pinned-amount-btns">
+            <p class="m-pinned-amount-label">选择置顶天数</p>
+            <div class="m-box m-aln-center ">
+                <button 
+                  :key="item"
+                  v-for="item in items"
+                  class="m-pinned-amount-btn"
+                  :style="{ width: `${1 / items.length * 100}%` }"
+                  :class="{ active: ~~day === ~~item }"
+                  @click="chooseDefaultDay(item)">{{((~~item))}} D</button>
+
+            </div>
+          </div>
+          <div class="m-box m-aln-center m-justify-bet m-bb1 m-bt1 m-pinned-row plr20 m-pinned-amount-customize">
+            <span>置顶金额</span>
+            <div class="m-box m-aln-center">
+              <input type="number" v-model="customAmount" placeholder="输入金额" dir="rtl">
+              <span>积分</span>
+            </div>
+          </div>
+          <div class="m-box m-aln-center m-justify-bet m-bb1 m-bt1 m-pinned-row plr20 m-pinned-amount-customize">
+            <span>总金额</span>
+            <div class="m-box m-aln-center">
+              <input 
+              dir="rtl"
+              type="number"
+              disabled="true"
+              readonly="true"
+              placeholder="总金额"
+              v-model="amount"
+              pattern="[0-9]*"
+              style="background-color: transparent">
+              <span>积分</span>
+            </div>
+          </div>
+        </div>
+        <div class="plr20 m-lim-width" style="margin-top: 0.6rem">
+          <button
+          :disabled="disabled || loading"
+          class="m-long-btn m-signin-btn"
+          @click="handleOk">
+            <svg v-if="loading" class="m-style-svg m-svg-def rotate">
+              <use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#base-loading"></use>
+            </svg>
+            <span v-else>申请置顶</span>
+          </button>
+        </div>
+      </main>
+    </div>
+  </transition>
+</template>
+<script>
+import bus from "@/bus.js";
+const noop = () => {};
+export default {
+  name: "apply-top",
+  data() {
+    return {
+      show: false,
+      loading: false,
+      customAmount: null,
+      day: 0,
+      applyType: ""
+    };
+  },
+  computed: {
+    amount() {
+      const total = this.day * this.customAmount;
+      return total > 0 ? total.toFixed(2) : "";
+    },
+    items() {
+      return [1, 5, 10];
+    },
+    disabled() {
+      return !this.amount > 0;
+    }
+  },
+  created() {
+    bus.$on("apply-top", () => {
+      this.open();
+    });
+    bus.$on("apply-top:feed", feedID => {
+      this.applyType = "feed";
+      this.open();
+      this.applyTopFeed = () => {
+        if (this.loading) return;
+        this.loading = true;
+        // /feeds/:feed/pinneds
+        this.$http
+          .post(`/feeds/${feedID}/pinneds`, {
+            amount: ~~this.amount,
+            day: this.day
+          })
+          .then(({ data = {} }) => {
+            this.loading = false;
+            this.$Message.success(data);
+            this.$nextTick(this.cancel);
+          })
+          .catch(err => {
+            console.log(err);
+            this.loading = false;
+          });
+      };
+    });
+  },
+  methods: {
+    applyTopFeed() {},
+    handleOk() {
+      this.applyType === "feed" ? this.applyTopFeed() : "";
+    },
+    chooseDefaultDay(day) {
+      this.day = day;
+    },
+    resetProps() {
+      this.amount = null;
+    },
+    open() {
+      this.show = true;
+      this.scrollable = false;
+    },
+    cancel() {
+      this.show = false;
+      this.applyType = "";
+      this.day = null;
+      this.customAmount = null;
+      this.applyTopFeed = noop;
+      this.scrollable = true;
+    }
+  }
+};
+</script>
+
+<style>
+.m-pinned-row {
+  font-size: 0.3rem;
+  height: 1rem;
+}
+.plr20 {
+  padding-left: 20px;
+  padding-right: 20px;
+}
+</style>

src/components/reward.vue

@@ -32,7 +32,7 @@
           <div class="m-box m-aln-center m-justify-bet m-bb1 m-bt1 m-pinned-row plr20 m-pinned-amount-customize">
             <span>自定义金额</span>
             <div class="m-box m-aln-center">
-              <input type="number" v-model="customAmount" placeholder="输入金额" dir="rtl">
+              <input type="number" pattern="[0-9]*" v-model="customAmount" placeholder="输入金额" dir="rtl">
               <span>元</span>
             </div>
           </div>

src/page/info.vue

@@ -242,7 +242,6 @@ export default {
        */
       bus.$emit("choose-tags", {
         nextStep: tags => {
-          console.log(this.CURRENTUSER.tags);
           this.change =
             tags.map(n => n.id).join(",") !== this.CURRENTUSER.tags.join(",");
           this.tags = tags;