library-wechat/subpkg/pages/feedback/feedback.vue

<template>
  <!-- :style="{ bottom: bottom + 'px' }" -->
  <view class="comment-container" >
    <uni-easyinput
      v-model="value"
      type="textarea"
      placeholder="HI，请留下您的留言吧!"
      :inputBorder="false"
    ></uni-easyinput>
    <button class="commit" type="primary" :disabled="!value" @click="onBtnClick">
      提交
    </button>
  </view>
</template>

<script>
import { userArticleComment } from 'api/user';

export default {
  name: 'article-comment-commit',
  props: {
  },
  data() {
    return {
      value: '',
      bottom: 0
    };
  },
  created() {
    // 检测软键盘的变化
    uni.onKeyboardHeightChange(({ height }) => {
      this.bottom = height;
    });
  },
  methods: {
    /**
     * 发送按钮点击事件
     */
    async onBtnClick() {
      // 展示加载框
      uni.showLoading({
        title: '加载中'
      });
      // 异步处理即可
      // const { data: res } = await userArticleComment({
      //   articleId: this.articleId,
      //   content: this.value
      // });
      console.log('this.value',this.value)
      uni.showToast({
        title: '发表成功',
        icon: 'success',
        mask: true
      });
      // 发表成功之后的回调
      this.$emit('success', res);
    }
  }
};
</script>

<style lang="scss" scoped>
.comment-container {
  position: relative;
  padding: 10px;
  ::v-deep .uni-easyinput{
    width: calc(100% - 20px) !important;
    background-color: #fff;
    padding: 12px;
    box-shadow: 0px 3px 60px 1px rgba(0,0,0,0.08);
    border-radius: 6px;
  }
  ::v-deep .uni-easyinput__content{
    padding: 5px 10px !important;
    background: #F1F1F9 !important;
  }
  ::v-deep .uni-easyinput__content-textarea{
    height: 140px !important;
  }
  .commit{
    margin: 40px 20px 0 20px;
    background-color: #01a4fe;
    border-radius: 23px;
  }
}
</style>