dvcp_v2_wxcp_app/components/AiComment.vue

<template>
  <div class="AiComment">
    <div class="comments flex-row">
      <div class="comments-box" @click="showCommentBox">{{ boxContent }}</div>
      <u-icon name="thumb-up" size="30" label="赞"/>
    </div>
    <div class="modalWrapper" v-if="commentBoxPopup" :class="{clickClose:!modelClickClose}"
         @click="commentBoxPopup=false"/>
    <div class="commentBox" v-if="commentBoxPopup">
      <u-input v-model="content" placeholder="写下你的想法…" type="textarea" auto-height :maxlength="limit"/>
      <view class="flex-row form-submit">
        <div>{{ `字数 ${wordCount} / ${limit}` }}</div>
        <button @click="submitComment" :disabled="wordCount == 0">发表</button>
      </view>
    </div>
  </div>
</template>

<script>

import {mapState} from "vuex";

export default {
  name: "AiComment",
  props: {
    needLogin: Boolean,
    customLogin: Boolean,
    commentCount: Number,
    modelClickClose: {type: Boolean, default: true},
    placeholder: {default: "我也说两句..."},
    limit: {default: 1000}
  },
  computed: {
    ...mapState(['user']),
    wordCount() {
      return this.content?.length || 0
    },
    boxContent() {
      return this.content || this.placeholder
    },
    isLogin() {
      return !!this.user.token
    },
  },
  data() {
    return {
      content: "",
      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")
    },
  }
}
</script>

<style lang="scss" scoped>

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

    .comments-box {
      flex: 1;
      min-width: 0;
      height: 64px;
      line-height: 64px;
      background-color: #f0f0f0;
      color: #666;
      font-size: 26px;
      padding-left: 16px;
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
      border-radius: 30px;
      text-align: center;
      margin-right: 42px;
    }
  }

  .modalWrapper {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
    z-index: 9;

    &.clickClose {
      pointer-events: none;
    }
  }

  ::v-deep.commentBox {
    width: 100%;
    min-height: 288px;
    max-height: 60vh;
    background-color: #fff;
    padding: 32px 32px 24px 26px;
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
    z-index: 99;

    textarea {
      width: 100%;
      min-height: 144px;
      max-height: calc(60vh - 144px);
      overflow-y: auto;
      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>