dvcp_v2_wechat_app/src/components/AiComment/commentEditor.vue

<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/AppMine/AppMine'})
          }).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>