dvcp_v2_wxcp_app/src/components/AiComment.vue

<template>
  <div class="AiComment">
    <div class="comments flex-row">
      <div class="comments-box" @click="showCommentBox">{{ boxContent }}</div>
      <img src="AiComment/comment.svg" @click="showCommentList" 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>
  </div>
</template>

<script>

export default {
  name: "AiComment",
  props: {
    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() {
      this.commentBoxPopup = false
      this.$emit("submitComment", this.content)
      this.content = ""
    },
    showCommentList() {
      this.commentBoxPopup = false
      this.$emit("showCommentList")
    },
    getMarginBottom({detail}) {
      this.marginBottom = detail.height
      this.focus = true
    }
  }
}
</script>

<style lang="scss" scoped>

.AiComment {
  .comments {
    width: 100%;
    height: 112px;
    padding: 24px 32px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    background: #f7f7f7;

    .comments-box {
      width: 580px;
      height: 64px;
      line-height: 64px;
      background-color: #fff;
      color: #666;
      font-size: 26px;
      padding-left: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }

    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: 100%;
    height: 288px;
    background-color: #fff;
    padding: 32px 32px 24px 26px;
    box-sizing: border-box;
    position: fixed;
    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>