hongze_yb_xcx/pages-question/hasQuestion.vue

<template>
  <view class="hasquestion-wrap">
    <van-cell title="所属品种" :value="varietyVal||'请选择问题所属品种'" is-link @click="showFilter=true"/>
    <view style="padding:34rpx">
    <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>

    <!-- 选择品种 -->
    <van-popup 
      :show="showFilter" 
      position="bottom" 
      closeable 
      :close-on-click-overlay="true"
      @close="showFilter = false"
      round
    >
      <view class="fliter-wrap-list">
        <view class="flex top">
          <text style="color:#000">选择所属品种</text>
        </view>
        <van-tree-select
          :items="options"
          :main-active-index="mainActiveIndex"
          :active-id="activeId"
          @click-nav="onClickNav"
          @click-item="onClickItem"
          main-active-class="main-active-class"
          content-active-class="content-active-class"
        />
      </view>
    </van-popup>
  </view>
</template>

<script>
import {apiPubAsk} from '@/api/question.js'
import {apiGetTagTree} from '@/api/common'
export default {
  data() {
    return {
      text:'',
      textlength:0,
      maxlength:40,
      hintShow:false,
      

      showFilter:false,
      options:[],
      mainActiveIndex:0,
      activeId:0,//选择的品种id
      variety_classify_id:0,
      varietyVal:'',
    };
  },
  onLoad(){
    this.getOptionsList()
  },
  methods: {
    async handleClick(){
      if(!this.textlength){
        uni.showToast({
          title: '请输入问题',
          icon: 'none',
        })
        return
      }
      if(!this.activeId){
        uni.showToast({
          title: '请选择问题所属品种',
          icon: 'none',
        })
        return
      }
      const res = await apiPubAsk({
        question_content:this.text,
        variety_classify_id:this.variety_classify_id,
        variety_tag_id:this.activeId
      })
      if(res.code===200){
        uni.showToast({
          title:"发布成功",
          icon:'success'
        })
        setTimeout(() => {
          uni.navigateBack({delta:1})
        }, 1500);
      }
      
    },
    //计算字数
    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)
    },

    //获取品种筛选
    async getOptionsList(){
      const res = await apiGetTagTree()
			if(res.code===200){
				const arr = res.data||[]
        this.options=arr.map(item=>{
          let obj={
              text:'',
              children:[]
          }
          obj.text=item.classify_name
          obj.children=item.tags.map(_item=>{
            return {
              text:_item.tag_name,
              id:_item.tag_id,
              variety_classify_id:_item.classify_id
            }
          })
          return obj
        })

			}
    },
    onClickNav({detail}){
      console.log(detail);
      this.mainActiveIndex=detail.index
    },

    onClickItem({detail}){
      console.log(detail);
      this.activeId=detail.id
      this.varietyVal=this.options[this.mainActiveIndex].text+'/'+detail.text
      this.variety_classify_id=detail.variety_classify_id
      this.showFilter=false
    },


  },
};
</script>
<style lang="scss">
.hasquestion-wrap{
  .title{
    .van-icon{
      color:rgba(0, 0, 0, 0.2);
    }
  }
  .van-cell{
    border-bottom: 1px solid #e5e5e5;
  }
  .fliter-wrap-list{
        background-color: #fff;
        padding-top: 28rpx;
        padding-bottom: 100rpx;
        .top{
            font-size: 32rpx;
            justify-content: center;
            margin-bottom: 40rpx;
            padding: 0 34rpx;
            position: relative;
        }
        .van-sidebar{
            flex-shrink: 0;
        }
        .van-tree-select__content{
            overflow-x: hidden;
        }
        .main-active-class{
            border-color: #E3B377;
        }
        .content-active-class{
            color: #E3B377;
        }
  }
}
</style>
<style scoped lang="scss">
.hasquestion-wrap{
  .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>