hongze_yb_xcx/pages-question/hasQuestion.vue

<template>
  <view class="hasquestion-wrap">
    <view class="title">问题描述<van-icon @click="showHint" coloe="rgba(0, 0, 0, 0.2)" name="question" />
      <view class="hint" v-if="hintShow">实际发布的问题会以提炼出的精简内容为准</view>
    </view>
    <textarea
      v-model="text"
      placeholder="点击输入提问"
      placeholder-class="textarea-placeholder"
      :maxlength="maxlength"
      @input="calcWord"
    />
    <text style="float:right;color:grey;">剩余可输入字数:<text :style="{color:(maxlength-textlength<=10)?'red':'grey'}">{{maxlength-textlength}}</text>字</text>
    <view class="btn-wrap">
      <view class="btn" :class="{'active':textlength>0}" @click="handleClick">完成</view> 
    </view>
  </view>
</template>

<script>
import {apiPubAsk} from '@/api/question.js'
export default {
  data() {
    return {
      text:'',
      textlength:0,
      maxlength:50,
      hintShow:false
    };
  },
  methods: {
    async handleClick(){
      if(!this.textlength){
        uni.showToast({
          title: '请输入问题',
          icon: 'none',
        })
        return
      }
      const res = await apiPubAsk({
        question_content:this.text
      })
      if(res.code===200){
        uni.navigateBack({delta:1})
      }
      
    },
    //计算字数
    calcWord(e){
      console.log('text1',this.text)
      this.textlength = e.detail.value.length
      //真机,一次性输入字数大于maxlength时数据和显示错误
      if(this.textlength>=this.maxlength){
        this.textlength=this.maxlength
        this.text = this.text.slice(0,this.maxlength)
      }
      console.log('text2',this.text)
    },
    //展示提示
    showHint(){
     this.hintShow = true
     setTimeout(()=>{
       this.hintShow = false
     },1000)
    }
  },
};
</script>
<style lang="scss">
.hasquestion-wrap{
  .title{
    .van-icon{
      color:rgba(0, 0, 0, 0.2);
    }
  }
}
</style>
<style scoped lang="scss">
.hasquestion-wrap{
  padding:40rpx 34rpx;
  .title{
    margin-bottom: 20rpx;
    font-size: 32rpx;
    color: #333333;
    position:relative;
    .hint{
      position: absolute;
      padding:20rpx 30rpx;
      border-radius: 4rpx;
      font-size: 28rpx;
      background-color: rgba(0, 0, 0, 0.5);
      color:#FFFFFF;
      z-index: 2;
      left:30rpx;
    }
  }
  textarea{
    width:100%;
    height:294rpx;
    box-sizing: border-box;
    padding:30rpx;
    border:1rpx solid #BEBEBE;
    border-radius: 8rpx;
  }
  .btn-wrap{
    margin-top: 120rpx;
    text-align: center;
    .btn{
      display: inline-block;
      width:390rpx;
      height:80rpx;
      border-radius: 40rpx;
      font-size: 32rpx;
      text-align: center;
      line-height: 80rpx;
      background-color: #ADADAD99;
      color: #FFFFFF;
      &.active{
        background-color: #E6B77D;
      }
    }
  }
  
}
</style>