评论组件完成

src/components/AiComment/commentEditor.vue

@@ -0,0 +1,217 @@
+<template>
+  <section class="commentEditor">
+    <div v-if="$slots.default" @click="showCommentBox">
+      <slot/>
+    </div>
+    <div v-else class="comments flex-row">
+      <div class="comments-box" @click="showCommentBox">{{ boxContent }}</div>
+      <img src="./static/comment.svg" alt=""/>
+      <text>{{ commentCount || 0 }}</text>
+    </div>
+    <div class="modalWrapper" v-if="commentBoxPopup" :class="{clickClose:!modelClickClose}"
+         @click="commentBoxPopup=false"/>
+    <div class="commentBox" v-if="commentBoxPopup" :style="{bottom:marginBottom+ 'px'}">
+      <textarea v-model="content" placeholder="写下你的想法…" maxlength="300" :focus="focus" @focus="getMarginBottom"
+                @blur="marginBottom=0" :adjust-position="false" fixed/>
+      <view class="flex-row form-submit">
+        <div>{{ `字数 ${wordCount || 0} / 300` }}</div>
+        <button @click="submitComment" :disabled="wordCount == 0">发布</button>
+      </view>
+    </div>
+  </section>
+</template>
+
+<script>
+export default {
+  name: "commentEditor",
+  props: {
+    bid: {default: ""},
+    type: {default: 1},
+    needLogin: Boolean,
+    customLogin: Boolean,
+    commentCount: Number,
+    modelClickClose: {type: Boolean, default: true}
+  },
+  computed: {
+    wordCount() {
+      return this.content.length || 0
+    },
+    boxContent() {
+      return this.content || "我也说两句..."
+    },
+    isLogin() {
+      return Boolean(uni.getStorageSync('token'))
+    },
+  },
+  data() {
+    return {
+      content: "",
+      marginBottom: 0,
+      commentBoxPopup: false,
+      focus: false
+    }
+  },
+  methods: {
+    showCommentBox() {
+      if (this.customLogin) {
+        this.$emit("login", flag => this.commentBoxPopup = flag)
+      } else if (this.needLogin) {
+        if (this.isLogin) {
+          this.commentBoxPopup = true
+        } else {
+          this.$dialog.confirm({
+            content: '您还未登陆',
+            confirmText: '去登录'
+          }).then(() => {
+            uni.switchTab({url: '/pages/mine/mine'})
+          }).catch(() => {
+          })
+        }
+      } else {
+        this.commentBoxPopup = true
+      }
+    },
+    submitComment() {
+      let {content, type, bid: contentId} = this
+      this.$instance.post("/app/appcontentcomment/addByApplet", {content, type, contentId}).then(res => {
+        if (res?.code == 0) {
+          this.$u.toast("提交成功!")
+          this.commentBoxPopup = false
+          this.content = ""
+          uni.$emit("moreComments", 1)//刷新评论列表
+        }
+      })
+    },
+    getMarginBottom({detail}) {
+      this.marginBottom = detail.height
+      this.focus = true
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+.commentEditor {
+  font-family: PingFangSC-Regular, PingFang SC;
+
+  .comments {
+    width: 100%;
+    height: 128px;
+    padding: 24px 32px;
+    box-sizing: border-box;
+    position: fixed;
+    bottom: 0;
+    background: #fff;
+    border-top: 1px solid #eee;
+
+    .comments-box {
+      width: 580px;
+      height: 80px;
+      line-height: 80px;
+      background-color: #F4F5FA;
+      color: #666;
+      font-size: 32px;
+      padding-left: 32px;
+      white-space: nowrap;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      border-radius: 44px;
+    }
+
+    image {
+      width: 52px;
+      height: 52px;
+      margin-left: 16px;
+      vertical-align: middle;
+    }
+
+    text {
+      color: #666666;
+      font-size: 28px;
+      line-height: 60px;
+    }
+  }
+
+  .modalWrapper {
+    position: fixed;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background: rgba(0, 0, 0, .6);
+    z-index: 9;
+
+    &.clickClose {
+      pointer-events: none;
+    }
+  }
+
+  .commentBox {
+    width: 100vw;
+    height: 288px;
+    background-color: #fff;
+    padding: 32px 32px 24px 26px;
+    box-sizing: border-box;
+    position: fixed;
+    left: 0;
+    bottom: 0;
+    z-index: 99;
+
+    textarea {
+      width: 100%;
+      height: 144px;
+      color: #666;
+      font-size: 26px;
+      background: #F7F7F7;
+      border-radius: 16px;
+      padding: 16px;
+      box-sizing: border-box;
+
+      &::placeholder {
+        font-size: inherit;
+      }
+    }
+
+    .form-submit {
+      margin-top: 24px;
+      height: 64px;
+      justify-content: space-between;
+      align-items: center;
+      color: #999;
+      font-size: 24px;
+
+      button {
+        width: 144px;
+        height: 64px;
+        background-color: #135AB8;
+        color: #fff;
+        font-size: 24px;
+        border-radius: 32px;
+        line-height: 64px;
+        text-align: center;
+        margin: unset;
+
+        &[disabled] {
+          color: #999;
+          background-color: #f7f7f7;
+          font-size: 28px;
+          border: 0;
+        }
+
+        &:active {
+          opacity: .8;
+        }
+
+        &:after {
+          border: none;
+        }
+      }
+    }
+  }
+
+  .flex-row {
+    display: flex;
+    flex-direction: row;
+  }
+}
+</style>